/* 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.
   Pages already seen stay in #view, hidden: every :has() below asks about the page on screen (.surf-pane:not([hidden])),
   or the Chat page's split head line showed on every page after it (Albert, 2026-11-01: "misalignment on top"). */
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(440px,34vw,660px)}
  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(.surf-pane:not([hidden]) .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(.surf-pane:not([hidden])>.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(.surf-pane:not([hidden]) .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(.surf-pane:not([hidden]) .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(.surf-pane:not([hidden])>.chchat-root)>.page-head::before{right:auto;width:248px}
  html[data-look="chats"] #app>main:has(.surf-pane:not([hidden])>.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)}
}
@media (min-width:801px) and (max-width:900px){
  /* a narrow window: tighter gaps and a slightly narrower list, so the message box keeps its field (≥ 175 px) */
  html[data-look="chats"]{--box-gap:6px;--rail:264px}
}

/* Workflows: its list, its canvas and an open workflow's panel, each a box (Albert, 2026-11-01: "in the chat workflows I
   want still compartmentalization, not just one blob"). The list is a column from 1280 px with no workflow open, else a
   sheet; the panel is 320 px, from 1280 px clamp(320px, 24vw, 440px) (css/chats-flow.css). */
@media (min-width:801px){
  html[data-look="chats"] #app>main>.main-col:has(.surf-pane:not([hidden])>.chflow-root){background:none;border-radius:0;overflow:visible}
  html[data-look="chats"] .surf-pane:has(>.chflow-root){background:none}
  html[data-look="chats"] .chflow-root{column-gap:var(--box-gap);background:none}
  html[data-look="chats"] .fl-canvas{background-color:var(--bg);border-radius:0 0 var(--box-r) var(--box-r)}
  html[data-look="chats"] .chflow-rail{background:var(--bg);border:0;border-radius:var(--box-r)}
  html[data-look="chats"] .chflow-panel{background:var(--bg);border:0;border-radius:0 0 var(--box-r) var(--box-r);overflow:hidden}
  html[data-look="chats"] .fl-desc{background:rgba(48,49,52,.94)}
  html[data-look="chats"] #app>main:has(.surf-pane:not([hidden])>.chflow-root[data-panel="1"])>.page-head::before{right:calc(320px + var(--box-gap))}
  html[data-look="chats"] #app>main:has(.surf-pane:not([hidden])>.chflow-root[data-panel="1"])>.page-head::after{content:"";position:absolute;
    z-index:-1;top:0;bottom:0;right:0;width:320px;background:var(--bg);border-radius:var(--box-r) var(--box-r) 0 0}
}
@media (min-width:801px) and (max-width:1279px){
  html[data-look="chats"] .chflow-rail{top:var(--box-gap);bottom:var(--box-gap);left:var(--box-gap)}
}
@media (min-width:1280px){
  html[data-look="chats"] #app>main:has(.surf-pane:not([hidden])>.chflow-root[data-panel="1"])>.page-head::before{right:calc(clamp(320px,24vw,440px) + var(--box-gap))}
  html[data-look="chats"] #app>main:has(.surf-pane:not([hidden])>.chflow-root[data-panel="1"])>.page-head::after{width:clamp(320px,24vw,440px)}
  html[data-look="chats"] .chflow-root[data-panel="1"] .chflow-rail{top:var(--box-gap);bottom:var(--box-gap);left:var(--box-gap)}
  html[data-look="chats"] #app>main:has(.surf-pane:not([hidden])>.chflow-root:not([data-panel="1"]))>.page-head::before{right:auto;width:248px}
  html[data-look="chats"] #app>main:has(.surf-pane:not([hidden])>.chflow-root:not([data-panel="1"]))>.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"] .chflow-root:not([data-panel="1"]) .chflow-rail{border-radius:0 0 var(--box-r) var(--box-r)}
}

/* The strip (2026-11-05, Albert, with a still of Grok Bot: "again a 2 sidebar model with bigger icons in the first, the
   first auto-retracts and only extends on hover, I think this will make it cleaner"; and "the color grading darker",
   docs/brand/redark.py, then back to the greys the same day). Two boxes on the left: the strip — big icons for Employees, Automations, Workflows, Chat, Employee
   memory, Teach employee, Projects, Connect tools and you — and the list of chats beside it. The strip opens over the list
   while the pointer rests on it (chats.js: data-open, a moment after it arrives) or a key is in it, and shows the names. */
html[data-look="chats"]{--strip:68px;--rail:272px}
/* open, it makes room: its column grows and the list and the chat move over (Albert, 2026-11-05: "when it expands it should
   compress the rest"), the columns gliding as one */
html[data-look="chats"] .app{transition:grid-template-columns .2s cubic-bezier(.2,.7,.2,1)}
html[data-look="chats"] .app:has(>#chats-strip[data-open]),html[data-look="chats"] .app:has(>#chats-strip:focus-within){--strip:236px}
html[data-look="chats"] #chats-strip{position:relative;z-index:46;min-width:0;min-height:0}
html[data-look="chats"] .chats-stripin{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:0 10px 10px;background:var(--bg);border-radius:var(--box-r);overflow:hidden}
/* the wordmark: its P while shut, the whole of it open */
.chats-stripbrand{flex:none;height:60px;display:flex;align-items:center;padding-left:13px;overflow:hidden}
.chats-stripbrand>.chats-brand{flex:none;margin:0;clip-path:inset(0 calc(100% - 21px) 0 0);transition:clip-path .18s ease}
#chats-strip[data-open] .chats-stripbrand>.chats-brand,#chats-strip:focus-within .chats-stripbrand>.chats-brand{clip-path:inset(0 0 0 0)}
.chats-stripplaces{flex:none;display:flex;flex-direction:column;gap:2px}
.chats-striplower{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:8px}
.chats-stripfoot{flex:none;padding-top:6px;margin-top:6px;border-top:1px solid #323336}
/* every row in the strip: a 48 px row, its icon in the first 48 px, its name beside it once open */
html[data-look="chats"] .chats-strip :is(.chats-striphome,.chfeat-tile,.chats-proj,.chats-conn,.chats-me){position:relative;display:flex;align-items:center;
  gap:14px;width:100%;height:48px;min-height:48px;margin:0;padding:0 0 0 0;border:0;border-radius:12px;background:none;color:#d8d8d8;
  font-family:inherit;font-size:14px;font-weight:500;line-height:1;text-align:left;white-space:nowrap;cursor:pointer;overflow:hidden}
html[data-look="chats"] .chats-strip :is(.chats-striphome,.chfeat-tile,.chats-proj,.chats-conn,.chats-me):hover{background:#323336}
html[data-look="chats"] .chats-strip :is(.chats-striphome,.chfeat-tile,.chats-proj,.chats-conn,.chats-me):focus-visible{outline:2px solid #6b8cff;outline-offset:-2px}
html[data-look="chats"] .chats-strip :is(.chats-striphome,.chfeat-tile,.chats-proj,.chats-conn)[aria-current="page"]{background:#3c3d40}
html[data-look="chats"] .chats-strip .chfeat-tiles{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;background:none;border-radius:0}
html[data-look="chats"] .chats-strip .chfeat-tiles[hidden]{display:none}
/* the icons: 24 px in a 48 px square */
.chats-stripic{flex:none;width:48px;height:48px;display:grid;place-items:center;color:#e6e6e6}
.chats-stripic>svg{width:24px;height:24px}
html[data-look="chats"] .chats-strip .chfeat-gloss{flex:none;width:48px;height:48px;display:grid;place-items:center}
html[data-look="chats"] .chats-strip .chfeat-gloss>svg,html[data-look="chats"] .chats-strip .chfeat-tile[data-key="chat"] .chfeat-gloss>svg{width:24px;height:24px}
html[data-look="chats"] .chats-strip .chfeat-tile[data-key="chat"] .chfeat-gloss{width:48px;height:48px}
html[data-look="chats"] .chats-strip .chfeat-badge{position:absolute;left:31px;top:10px}
html[data-look="chats"] .chats-strip .chats-conntile,html[data-look="chats"] .chats-strip .chats-projtile{width:34px;height:34px;margin:0 7px;border-radius:10px}
html[data-look="chats"] .chats-strip .chats-me>.mark,html[data-look="chats"] .chats-strip .chats-me>:first-child{flex:none;margin:0 7px 0 9px}
/* the names: there while open, gone while shut (still read out: they are the buttons' names) */
.chats-stripname,html[data-look="chats"] .chats-strip :is(.chfeat-name,.chats-connname,.chats-projname,.chats-mename){opacity:0;transition:opacity .12s ease}
#chats-strip[data-open] :is(.chats-stripname,.chfeat-name,.chats-connname,.chats-projname,.chats-mename),
#chats-strip:focus-within :is(.chats-stripname,.chfeat-name,.chats-connname,.chats-projname,.chats-mename){opacity:1;transition-delay:.05s}
html[data-look="chats"] .chats-strip :is(.chats-connline,.chats-connlogos,.chats-projline){display:none}
html[data-look="chats"] .chats-strip :is(.chats-conntxt,.chats-projtxt){display:block;min-width:0}
html[data-look="chats"] .chats-strip .chats-me>svg{flex:none;margin-left:auto;margin-right:12px;opacity:0}
#chats-strip[data-open] .chats-me>svg,#chats-strip:focus-within .chats-me>svg{opacity:1}
/* the list's head: the search and the + */
html[data-look="chats"] #chats-side>.chats-top{height:auto;padding:12px 8px 10px;gap:6px}
html[data-look="chats"] #chats-side>.chats-top>.chats-search{flex:1;margin:0}
@media (prefers-reduced-motion:reduce){
  html[data-look="chats"] .app,html[data-look="chats"] .chats-stripin,.chats-stripbrand>.chats-brand,.chats-stripname,html[data-look="chats"] .chats-strip :is(.chfeat-name,.chats-connname,.chats-projname,.chats-mename){transition:none}
}
/* a phone: the strip stands at the left of the open drawer, icons only */
@media (max-width:800px){
  html[data-look="chats"] #chats-strip{position:fixed;left:0;top:0;bottom:0;z-index:46;width:var(--strip);transform:translateX(-100%);visibility:hidden;
    transition:transform .2s ease-in,visibility 0s linear .2s}
  html[data-look="chats"] .app[data-chats-side="open"] #chats-strip{transform:none;visibility:visible;transition:transform .24s ease-out}
  html[data-look="chats"] .chats-stripin{border-radius:0}
  html[data-look="chats"] .app:has(>#chats-strip[data-open]),html[data-look="chats"] .app:has(>#chats-strip:focus-within){--strip:68px}
  html[data-look="chats"] #chats-side{left:var(--strip);width:min(300px,calc(86vw - var(--strip)))}
  /* shut, the list goes all the way off the screen, not to the strip's edge */
  html[data-look="chats"] .app:not([data-chats-side="open"]) #chats-side{transform:translateX(calc(-100% - var(--strip)))}
}
/* a narrow window (801-1000 px): a slimmer strip and list, so the chat keeps a message field a person can type in */
@media (min-width:801px) and (max-width:1000px){
  html[data-look="chats"]{--strip:58px;--rail:236px}
  html[data-look="chats"] .chats-stripin{padding:0 5px 10px}
}
/* the list of employees only on their tab (chats.js chats_paint: data-chats-list); every other place has the whole width */
@media (min-width:801px){
  html[data-look="chats"] .app[data-chats-list="off"]{grid-template-columns:var(--strip) minmax(0,1fr)}
  html[data-look="chats"] .app[data-chats-list="off"]>#chats-side{display:none}
}
/* Projects in the strip: a dot on its icon while one runs (green) or waits for him (amber), as its card said in words */
html[data-look="chats"] .chats-strip .chats-proj{position:relative}
html[data-look="chats"] .chats-strip .chats-proj:is([data-run="1"],[data-need="1"])::after{content:"";position:absolute;left:36px;top:9px;
  width:9px;height:9px;border-radius:50%;background:var(--accent,#3cc98f);box-shadow:0 0 0 2px var(--bg)}
html[data-look="chats"] .chats-strip .chats-proj[data-need="1"]::after{background:var(--warn,#f5b82e)}