/* Circl on a computer: the tab bar becomes a sidebar, content gets more room.
   Phones and tablets are untouched (everything here is inside min-width:1024px). */
@media (min-width:1024px){
  :root{--side:236px}
  nav.tabs{top:0;bottom:0;right:auto;width:var(--side);border-top:0;border-right:1px solid var(--line);padding:86px 14px 24px;overflow-y:auto}
  nav.tabs .wrap{display:flex;flex-direction:column;gap:4px;max-width:none}
  nav.tabs button{flex-direction:row;justify-content:flex-start;gap:14px;padding:11px 14px;font-size:15px;border-radius:14px;cursor:pointer;transition:background .15s}
  nav.tabs button:hover{background:var(--panel)}
  nav.tabs button[aria-current="page"]{background:var(--panel)}
  nav.tabs .badge{top:6px;left:30px}
  nav.tabs .cbtn{margin:0;width:32px;height:28px}
  nav.tabs button.centre{order:-1;margin-bottom:8px}
  nav.tabs button::after,nav.tabs button::before{display:none}
  nav.tabs .tabpill{display:none}
  :root{--aw:min(860px,calc(100vw - var(--side) - 48px))}
  body:has(nav.tabs:not([hidden])) .app{box-sizing:border-box;width:var(--aw);max-width:none;margin-left:calc(var(--side) + (100vw - var(--side) - var(--aw)) / 2);margin-right:0;padding-inline:28px}
  body:has(nav.tabs:not([hidden])) header.top{margin-inline:-28px;padding-inline:28px}
  .composer{left:var(--side);bottom:0}
  .composer .wrap{max-width:860px}
  .cm-body{max-width:min(70%,560px)}
  .bub{max-width:62%}
  .md-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pr-prop .md-stack{grid-template-columns:1fr}
  .md-tabs{overflow:visible}
  button,a,[data-tab],[data-act]{cursor:pointer}
  ::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}
}
@media (min-width:1400px){
  :root{--aw:960px}
  .composer .wrap{max-width:960px}
}

/* chat bubbles everywhere: your messages in purple with a little tail, comments in bubbles too */
.cm.mine .cm-bub,.bub.mine{background:var(--accent);color:#fff}
.cm.mine .cm-bub.open{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.cm-bub,.bub{position:relative}
.cm.first:not(.mine) .cm-bub::before,.cm.first.mine .cm-bub::before{content:"";position:absolute;top:0;width:10px;height:12px;background:inherit}
.cm.first:not(.mine) .cm-bub::before{left:-5px;clip-path:polygon(100% 0,0 0,100% 100%)}
.cm.first.mine .cm-bub::before{right:-5px;clip-path:polygon(0 0,100% 0,0 100%)}
.cmts{border-left:0;padding-left:0}
.cmt>div{background:var(--panel);border-radius:6px 18px 18px 18px;padding:8px 12px;width:fit-content;max-width:100%}