/* panels.css — the chats look in compartments (2026-11-01, Albert: "for the site I want compartmentalization, the element
   groups sit in rounded rectangles: the sidebar in a rounded rectangle, the chat section and the right sidebar too", and
   "I don't want black, make it more like shades of grey", docs/brand/regrey.py). Above 800 px the window is a grey frame
   with rounded boxes on it, 8 px apart: the list, and each page — the chat and its side panel as two. Then: "the chat
   and the right sidebar also need to go to the top", so a page's head line is the top of its box (its ::before, and
   its ::after over the side panel), and "in the left sidebar's rectangle make two more, for the automations and
   everything, and for the employees". On a phone everything stays edge to edge. Loaded last; chats look only. */
html[data-look="chats"]{--frame:#1c1d20;--box-r:14px;--box-gap:8px;--group:#2c2d30}
html[data-look="chats"] body{background:var(--frame)}

/* the list: Automations … Teach employee in one group, the employees in another, both inside the list's box */
html[data-look="chats"] #chats-side>.chfeat-tiles{background:var(--group);border-radius:12px;padding:6px;margin:0 8px 8px}
html[data-look="chats"] #chats-side>.chats-list{background:var(--group);border-radius:12px;margin:0 8px 8px;padding:6px}
html[data-look="chats"] #chats-side .chfeat-tile:hover,html[data-look="chats"] #chats-side .chats-row:hover{background:#37383c}
html[data-look="chats"] #chats-side .chfeat-tile[aria-current="page"],html[data-look="chats"] #chats-side .chats-row[aria-current="page"]{background:#404145}

@media (min-width:801px){
  html[data-look="chats"] .app{background:var(--frame);padding:var(--box-gap);column-gap:var(--box-gap)}
  html[data-look="chats"] #chats-side{background:var(--bg);border:0;border-radius:var(--box-r)}
  html[data-look="chats"] #app>main{background:transparent;--chats-pw:clamp(320px,24vw,440px)}
  html[data-look="chats"] #app>main>#subrail{background:transparent;border-right:0}

  /* the head line is the top of the page's box */
  html[data-look="chats"] #app>main>.page-head{background:transparent;isolation:isolate}
  html[data-look="chats"] #app>main>.page-head::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--bg);
    border-radius:var(--box-r) var(--box-r) 0 0}
  html[data-look="chats"] #app>main>.main-col{background:var(--bg);border-radius:0 0 var(--box-r) var(--box-r);overflow:hidden}

  /* the chat and its side panel: two boxes (the chat's is drawn behind its feed and its message box) */
  html[data-look="chats"] #app>main>.main-col:has(.emp-room[data-mode="team"]){background:none;border-radius:0;overflow:visible}
  html[data-look="chats"] .emp-room[data-mode="team"]::before{content:"";grid-column:1;grid-row:1/-1;background:var(--bg);
    border-radius:0 0 var(--box-r) var(--box-r)}
  html[data-look="chats"] .emp-room[data-mode="team"]{column-gap:var(--box-gap)}
  html[data-look="chats"] .emp-room[data-mode="team"]>.chats-panel{background:var(--bg);border:0;border-radius:var(--box-r);overflow:hidden}

  /* Chat: its history and the conversation, two boxes */
  html[data-look="chats"] #app>main>.main-col:has(.chchat-root){background:none;border-radius:0;overflow:visible}
  html[data-look="chats"] .surf-pane:has(>.chchat-root){background:none}
  html[data-look="chats"] .chchat-root{column-gap:var(--box-gap);background:none}
  html[data-look="chats"] .chchat-rail{background:var(--bg);border:0;border-radius:var(--box-r)}
  html[data-look="chats"] .chchat-main{background:var(--bg);border-radius:0 0 var(--box-r) var(--box-r);overflow:hidden}
}
@media (min-width:801px) and (max-width:1279px){
  /* the side panel and Chat's history lie over the page here: boxes that float */
  html[data-look="chats"] .emp-room[data-mode="team"]>.chats-panel{top:var(--box-gap);bottom:var(--box-gap);right:var(--box-gap)}
  html[data-look="chats"] .chchat-rail{top:var(--box-gap);bottom:var(--box-gap);left:var(--box-gap)}
}
@media (min-width:1280px){
  /* the side panel docked: the head line splits — its left part tops the chat's box, its right part the panel's */
  html[data-look="chats"] #app>main:has(.emp-room[data-mode="team"]>.chats-panel:not([hidden]))>.page-head::before{
    right:calc(var(--chats-pw) + var(--box-gap))}
  html[data-look="chats"] #app>main:has(.emp-room[data-mode="team"]>.chats-panel:not([hidden]))>.page-head::after{content:"";
    position:absolute;z-index:-1;top:0;bottom:0;right:0;width:var(--chats-pw);background:var(--bg);border-radius:var(--box-r) var(--box-r) 0 0}
  html[data-look="chats"] .emp-room[data-mode="team"]>.chats-panel{border-radius:0 0 var(--box-r) var(--box-r)}
  /* Chat: the history column is topped by the head line's left part */
  html[data-look="chats"] #app>main:has(.chchat-root)>.page-head::before{right:auto;width:248px}
  html[data-look="chats"] #app>main:has(.chchat-root)>.page-head::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;
    right:0;left:calc(248px + var(--box-gap));background:var(--bg);border-radius:var(--box-r) var(--box-r) 0 0}
  html[data-look="chats"] .chchat-rail{border-radius:0 0 var(--box-r) var(--box-r)}
}