/* chats.css — the chats look (chats.js). Every rule is under html[data-look="chats"], so the
   classic look never sees one. The palette is read off Grok Bot's own window (a still of Albert's
   recording, 2026-09-21): the page #050505, the list #101010, a chosen row #292929, the search
   field #1e1e1e, a reply #202020, your own line #474747, the message box #262626. */

#chats-side,.look-tabs{display:none}

/* ------------------------------------------------------------------ tokens */
html[data-look="chats"]{
  --bg:#050505; --side:#101010; --card:#1c1c1c; --card2:#292929;
  --line:#1c1c1c; --line2:#303030;
  --text:#ececec; --muted:#a8a8a8; --faint:#7c7c7c;
  --rail:272px;
}
html[data-look="chats"] body{background:#050505}

/* ------------------------------------------------------------------- frame */
html[data-look="chats"] aside#rail{display:none}
html[data-look="chats"] .app{grid-template-columns:var(--rail) minmax(0,1fr)}
html[data-look="chats"] #chats-side{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
  background:#101010;border-right:1px solid #0b0b0b}

/* the list */
.chats-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:4px;height:60px;padding:0 8px 0 16px}
.chats-brand{flex:none;display:block;width:128px;height:40px;margin:0 auto 0 -4px;user-select:none;-webkit-user-drag:none}
.chats-org{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 5px;border-radius:8px;border:0;background:none;color:#8c8c8c;font-family:inherit;font-weight:600;font-size:12.5px;line-height:1.3;text-align:left;cursor:pointer}
.chats-org>.mark{border-radius:7px}
.chats-orgname{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chats-org:hover{color:#ececec;background:#1a1a1a}
.chats-iconbtn{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:9px;background:none;color:#b8b8b8;cursor:pointer}
.chats-iconbtn:hover{background:#1f1f1f;color:#fff}
.chats-iconbtn[aria-pressed="true"]{color:#fff}
.chats-search{flex:none;display:flex;align-items:center;gap:8px;height:36px;margin:0 8px 10px;padding:0 11px;border-radius:10px;background:#1e1e1e;color:#8c8c8c;cursor:text}
.chats-search:focus-within{box-shadow:0 0 0 1px #3a3a3a}
.chats-search input{flex:1;min-width:0;border:0;background:none;outline:none;color:#ececec;font-size:14.5px}
.chats-search input::placeholder{color:#8c8c8c}
.chats-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:0 6px 8px}
.chats-row{display:flex;align-items:center;gap:10px;width:100%;min-height:62px;padding:7px 10px 7px 6px;border:0;border-radius:12px;background:none;
  color:inherit;text-align:left;cursor:pointer;font-family:inherit}
.chats-row:hover{background:#181818}
.chats-row[aria-current="page"]{background:#292929}
.chats-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.chats-name{font-size:14.5px;font-weight:600;line-height:1.3;color:#f4f4f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chats-line{font-size:13px;line-height:1.35;color:#8f8f8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chats-row[data-kind="warn"] .chats-line{color:var(--warn)}
.chats-none{padding:14px 12px;font-size:13px;color:#7c7c7c}

/* the place an employee's face will go */
.chats-av{--s:36px;position:relative;flex:none;width:var(--s);height:var(--s);display:grid;place-items:center;border-radius:50%;
  background:#262626;color:#9c9c9c;font-size:calc(var(--s) * .36);font-weight:600;line-height:1}
/* the robot (creature.js) stands on the page itself: no circle, no background */
.chats-av.has-mc{background:none;overflow:visible}
.chats-avc{width:100%;height:100%}
.chats-noshot{display:flex;flex-direction:column;align-items:center;gap:6px}
.chats-noshot-mc{width:min(150px,46%);aspect-ratio:1}
.chats-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px #101010}
.chats-row:hover .chats-dot{box-shadow:0 0 0 2px #181818}
.chats-row[aria-current="page"] .chats-dot{box-shadow:0 0 0 2px #292929}
.chats-dot.busy{background:var(--accent)}   /* the busy colour everywhere else in Catalyst */
.chats-dot.warn{background:var(--warn)}

/* you, at the foot */
.chats-foot{flex:none;padding:8px 8px 12px}
.chats-me{display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0 10px 0 8px;border:0;border-radius:12px;background:none;
  color:#ececec;font-family:inherit;font-weight:500;font-size:14px;line-height:1.3;text-align:left;cursor:pointer}
.chats-me:hover{background:#181818}
.chats-mename{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chats-me>svg{flex:none;color:#8c8c8c}

/* ----------------------------------------------------------- the head, with the selector */
/* the head is a row of its own above Teach's list of pages and the page itself */
html[data-look="chats"] #app>main{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
html[data-look="chats"] #app>main>.page-head{grid-column:1/-1;grid-row:1}
html[data-look="chats"] #app>main>#subrail{grid-column:1;grid-row:2;min-height:0}
html[data-look="chats"] #app>main>.main-col{grid-column:2;grid-row:2;min-height:0}
html[data-look="chats"] .page-head{position:relative;height:auto;min-height:56px;padding:0 12px 0 18px;gap:10px;border-bottom:0;background:#050505}
html[data-look="chats"] #view-title{font-size:14.5px;font-weight:600}
html[data-look="chats"] #view-caption{font-size:12.5px;color:#8c8c8c}
html[data-look="chats"] .page-title-row{align-items:center;gap:10px;flex:0 1 auto;max-width:calc(50% - 200px)}
html[data-look="chats"] #emp-head-lead{display:flex;align-items:center;gap:8px}
html[data-look="chats"] #emp-head-lead:empty{display:none}
html[data-look="chats"] .look-tabs{display:flex;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;gap:2px;padding:3px;
  border-radius:999px;background:#141414}
.look-tabs>button{height:30px;padding:0 15px;border:0;border-radius:999px;background:none;color:#9c9c9c;font-family:inherit;font-weight:500;font-size:13.5px;line-height:1;white-space:nowrap;cursor:pointer}
.look-tabs>button:hover{color:#ececec}
.look-tabs>button[aria-current="page"]{background:#2b2b2b;color:#fff}
html[data-look="chats"] .chats-sidebtn{display:none}
#chats-sidebtn-top{display:none}

/* ------------------------------------------------------------------ the chat */
html[data-look="chats"] .emp-roster{display:none}
html[data-look="chats"] .emp-room{--chats-pw:clamp(360px,30vw,540px)}
html[data-look="chats"] .emp-room[data-mode="team"]{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto}
html[data-look="chats"] .emp-room[data-mode="team"]>.emp-scroll{grid-column:1;grid-row:1}
html[data-look="chats"] .emp-room[data-mode="team"]>.emp-dock{grid-column:1;grid-row:2}
html[data-look="chats"] .emp-scroll{padding:6px 18px 0}
html[data-look="chats"] .emp-feed{max-width:none;gap:10px}
html[data-look="chats"] .chats-day{align-self:center;margin:12px 0 6px;font-size:12.5px;color:#8c8c8c}
html[data-look="chats"] .emp-said{max-width:min(75%,540px);margin-left:48px;padding:9px 15px;border-radius:19px;background:#474747;color:#fff}
html[data-look="chats"] .emp-from{max-width:min(88%,640px)}
/* Grok keeps a chat narrow however wide the window: a reply, a job and a plan stop at 640 */
html[data-look="chats"] .emp-feed>.emp-job{max-width:640px}
html[data-look="chats"] .emp-from>.mgr-mark{display:none}
html[data-look="chats"] .emp-from>.emp-body{min-width:0;padding:9px 15px;border-radius:19px;background:#202020}
html[data-look="chats"] .emp-from>.emp-body>:first-child{margin-top:0}
html[data-look="chats"] .emp-from>.emp-body>:last-child{margin-bottom:0}
html[data-look="chats"] .emp-job{background:#0f0f0f;border-color:#1e1e1e}
/* Administration (org.js in Supabot): the "works for" pick in the dark */
html[data-look="chats"] .org-invpick{min-width:150px;padding:5px 10px;border:1px solid #333;border-radius:9px;background:#1c1c1c;color:#ececec;font:inherit;font-size:13.5px}
html[data-look="chats"] .org-invpick:focus-visible{outline:2px solid #6b8cff;outline-offset:1px}
html[data-look="chats"] .org-invrow{align-items:center}

/* Supabot shows no logo on the page: the robots are its face (Albert, 2026-09-22). The logo is the
   app's icon and the browser tab's. */
html[data-look="chats"] .mark,html[data-look="chats"] .mgr-mark{display:none!important}

/* Supabot's conversation (chats-talk.js): replies beside the robot, one live line while work runs,
   the chat in a centred column however wide the window */
html[data-look="chats"] .emp-feed{max-width:820px;width:100%;margin:0 auto}
html[data-look="chats"] .emp-dock>.island{max-width:820px;margin:0 auto}
.talk-reply{display:flex;align-items:flex-start;max-width:min(88%,640px);align-self:flex-start}
.talk-from{font-size:12px;font-weight:600;color:#9a9a9a;margin:0 0 3px;letter-spacing:.01em}
.talk-av{flex:0 0 auto;margin-top:2px}
.talk-body{flex:0 1 auto;min-width:0;padding:9px 15px;border-radius:19px;background:#202020;color:#ececec;font-size:15px;line-height:1.5}
.talk-body>:first-child{margin-top:0}
.talk-body>:last-child{margin-bottom:0}
/* a finished job, summed up: the report one click away, a question under it without a second robot */
.talk-full{margin-top:8px;font-size:13px;color:var(--faint)}
.talk-full>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px;color:var(--faint);user-select:none}
.talk-full>summary::-webkit-details-marker{display:none}
.talk-full>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.talk-full[open]>summary::before{transform:rotate(45deg)}
.talk-full>summary:hover{color:var(--muted)}
.talk-fullbody{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.talk-fullbody .md{font-size:13.5px}
.talk-digestcol{display:flex;flex-direction:column;gap:8px;align-self:stretch}
.talk-digestcol>.talk-ask>.talk-av{visibility:hidden}
.talk-body .md-tablewrap{margin:2px 0;background:rgba(255,255,255,.02)}
/* a piece of work as one card: who is on it, how long, what it has cost, how far through its own
   checklist, then a lane per employee (Albert, 2026-09-22: "keeps you up to date") */
.talk-work{display:flex;flex-direction:column;gap:9px;max-width:min(94%,700px);align-self:flex-start;
  background:#141414;border:1px solid #262626;border-radius:16px;padding:12px 14px}
.talk-workhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--faint)}
.talk-workwho{color:#dcdcdc;font-weight:600;font-size:13px}
.talk-workclock{font-variant-numeric:tabular-nums}
.talk-workclock::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#7ee0a8;margin-right:6px;vertical-align:middle;animation:talk-beat 2s ease-in-out infinite}
.talk-workcost{font-variant-numeric:tabular-nums;margin-left:auto}
@keyframes talk-beat{0%,100%{opacity:1}50%{opacity:.25}}
.talk-plan{display:flex;align-items:center;gap:10px;min-width:0}
.talk-planbar{display:flex;gap:3px;flex:none}
.talk-planbar i{width:16px;height:3px;border-radius:2px;background:#333}
.talk-planbar i.on{background:#7ee0a8}
.talk-planbar i.now{background:#ececec}
.talk-plantxt{font-size:12.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talk-laneclock{font-size:12px;color:var(--faint);margin-left:8px;font-variant-numeric:tabular-nums}
.talk-stale{font-size:12.5px;color:#f5b73b;margin-top:2px}
.talk-lanes{display:flex;flex-direction:column;gap:12px;min-width:0}
.talk-lane{display:flex;align-items:flex-start;gap:10px;min-width:0}
.talk-worktxt{display:flex;flex-direction:column;gap:5px;min-width:0;padding-top:4px}
.talk-line{font-size:14px;line-height:1.45;color:#bdbdbd;overflow-wrap:anywhere}
.talk-line b{color:#f2f2f2;font-weight:600}
.talk-lane.warn .talk-line b{color:#f5b73b}
.talk-q{font-size:14px;line-height:1.5;color:#e6e6e6;max-width:560px}
.talk-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.talk-btns .btnrow{display:flex;flex-wrap:wrap;gap:8px}
.talk-link{border:0;border-radius:14px;padding:4px 12px;background:#262626;color:#e8e8e8;font:inherit;font-size:12.5px;cursor:pointer}
.talk-link:hover{background:#333}
.talk-link.quiet{background:none;color:#8f8f8f;padding:4px 6px}
.talk-link.quiet:hover{color:#e8e8e8}
.talk-link:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
.talk-thinking .talk-line{display:flex;align-items:center;gap:8px}
/* a question, as Grok asks one: a card, the choices as pills, the recommendation marked */
.talk-ask{display:flex;align-items:flex-start;gap:10px;max-width:min(94%,700px);align-self:flex-start}
.talk-askcard{min-width:0;padding:11px 14px 12px;border:1px solid #2e2e2e;border-radius:18px;background:#161616}
.talk-askcard.done{opacity:.62;border-color:#222}
.talk-askwho{font-size:12px;font-weight:600;color:#f5b73b;margin:0 0 3px}
.talk-askcard.done .talk-askwho{color:#9a9a9a}
.talk-askq{font-size:15px;line-height:1.5;color:#f0f0f0;margin-bottom:10px}
.talk-lane .talk-askcard{margin-top:4px;padding:10px 12px;border-color:#3a3322;background:#17150f}
.talk-askopts{display:flex;flex-wrap:wrap;gap:8px}
.talk-opt{display:inline-flex;align-items:center;gap:8px;border:1px solid #363636;border-radius:999px;padding:7px 14px;background:#222;color:#ececec;font:inherit;font-size:13.5px;cursor:pointer;text-align:left}
.talk-opt:hover:not(:disabled){background:#2c2c2c}
.talk-opt.rec{background:#f2f2f2;color:#0a0a0a;border-color:#f2f2f2}
.talk-opt.rec:hover:not(:disabled){background:#fff}
.talk-opt small{font-size:11px;opacity:.6}
.talk-opt.other{background:none;border-style:dashed;color:#9a9a9a}
.talk-opt:disabled{cursor:default;opacity:.45}
.talk-opt.on{opacity:1;outline:2px solid #6b8cff;outline-offset:1px}
.talk-opt:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
.talk-askyou{margin-top:8px;font-size:13px;color:#9a9a9a}
.talk-dots{display:inline-flex;gap:3px}
.talk-dots i{width:5px;height:5px;border-radius:50%;background:#8a8a8a;animation:talk-dot 1.2s ease-in-out infinite}
.talk-dots i:nth-child(2){animation-delay:.16s}
.talk-dots i:nth-child(3){animation-delay:.32s}
@keyframes talk-dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.talk-dots i{animation:none;opacity:.8}}
html[data-look="chats"] .chats-empty{padding-top:18vh}

/* the message box: Grok's rounded bar, a plus on the left, the white send on the right */
html[data-look="chats"] .emp-dock{padding:10px 18px 18px}
html[data-look="chats"] .emp-dock>.island{max-width:none}
html[data-look="chats"] .emp-frame .island{border:0;border-radius:24px;background:#262626}
html[data-look="chats"] .emp-frame .island:focus-within{box-shadow:0 0 0 1px #3a3a3a}
html[data-look="chats"] .emp-frame .island-row{align-items:center;padding:4px 6px}
html[data-look="chats"] .emp-frame .island-clip{width:34px;height:34px;border-radius:50%;color:#d0d0d0}
html[data-look="chats"] .emp-frame .island-clip:hover{background:#353535;color:#fff}
html[data-look="chats"] .emp-frame .island-send{width:34px;height:34px;margin:0;background:#fff;color:#000}
html[data-look="chats"] .emp-frame .island-send:disabled{background:#3a3a3a;color:#808080;cursor:default}
html[data-look="chats"] .emp-frame .island-ask{border-bottom-color:#303030;border-radius:24px 24px 0 0}

/* ----------------------------------------------------------------- the panel */
html[data-look="chats"] .chats-panel{grid-column:2;grid-row:1/span 2;width:var(--chats-pw);max-width:calc(100vw - var(--rail) - 460px);min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  padding:6px 16px 20px;border-left:1px solid #0e0e0e;background:#050505}
/* its left edge drags wider or narrower; a double-click puts it back */
.chats-grip{display:none}
html[data-look="chats"] .emp-room[data-mode="team"]>.chats-grip{display:block;grid-column:2;grid-row:1/span 2;justify-self:start;z-index:3;width:10px;margin-left:-5px;
  cursor:col-resize;touch-action:none}
html[data-look="chats"] .emp-room[data-mode="team"]>.chats-grip::after{content:"";display:block;width:2px;height:100%;margin:0 auto;background:transparent;transition:background .12s ease}
html[data-look="chats"] .emp-room[data-mode="team"]>.chats-grip:hover::after,html[data-look="chats"] .emp-room.chats-resizing>.chats-grip::after,
html[data-look="chats"] .emp-room[data-mode="team"]>.chats-grip:focus-visible::after{background:#3a3a3a}
html[data-look="chats"] .emp-room[data-mode="team"]>.chats-grip:focus-visible{outline:none}
html[data-look="chats"] .emp-room>.chats-panel[hidden]+.chats-grip{display:none}
html[data-look="chats"] .emp-room.chats-resizing{cursor:col-resize;user-select:none}
.chats-shot{position:relative;aspect-ratio:16/10;display:grid;place-items:center;border-radius:12px;overflow:hidden;background:#151515;cursor:pointer}
.chats-shot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.chats-noshot{padding:0 18px;font-size:12.5px;color:#7c7c7c;text-align:center}
.chats-shot[data-has="1"]>.chats-noshot{display:none}
.chats-open{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;
  border:0;border-radius:999px;background:rgba(22,22,22,.92);color:#fff;font-family:inherit;font-weight:500;font-size:13px;line-height:1;cursor:pointer;box-shadow:0 2px 14px rgba(0,0,0,.45)}
.chats-open:hover{background:#262626}
.chats-shot[data-has="0"]>.chats-open{top:auto;bottom:14px;transform:translateX(-50%)}
.chats-cap{font-size:12.5px;color:#8c8c8c;text-align:center}
.chats-now{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.chats-nowline{font-size:13.5px;line-height:1.45;color:#cfcfcf}
.chats-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chats-note{margin:auto 0 0;padding-top:24px;font-size:12.5px;line-height:1.55;color:#7c7c7c;text-align:center;text-wrap:balance}
.chats-note .link{font-size:12.5px}
.chats-h{margin:4px 2px 2px;font-size:12.5px;font-weight:600;color:#8c8c8c}
.chats-mates{display:flex;flex-direction:column;gap:2px}
.chats-mate{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:0;border-radius:10px;background:none;color:inherit;text-align:left;cursor:pointer;font-family:inherit}
.chats-mate:hover{background:#141414}
.chats-mate .chats-name{font-size:13.5px}
.chats-mate .chats-line{font-size:12px}
.chats-mate[data-kind="warn"] .chats-line{color:var(--warn)}
.chats-thumb{flex:none;width:64px;height:40px;border-radius:6px;overflow:hidden;background:#161616}
.chats-thumb>img{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.chats-thumb.has-mc{background:none;display:grid;place-items:center}
.chats-thumb.has-mc>.mc{width:40px;height:40px}
.chats-word{flex:none}
.chats-teamfoot{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chats-teamfoot:empty{display:none}

/* ------------------------------------------------------ shared rows, pills and the drop box */
.mem-choose,.mem-pill{height:32px;padding:0 16px;border:0;border-radius:999px;background:#fff;color:#000;font-family:inherit;font-weight:600;font-size:13.5px;
  cursor:pointer;white-space:nowrap;flex:none}
.mem-pill.sec{background:#262626;color:#ececec;font-weight:500}
.mem-choose:hover,.mem-pill:hover{filter:brightness(.92)}
.mem-pill.sec:hover{background:#303030;filter:none}
.mem-choose:disabled,.mem-pill:disabled{opacity:.45;cursor:default;filter:none}
.mem-h{margin:0 4px;font-size:13px;font-weight:600;color:#9c9c9c}
.mem-hint{margin:0 4px;font-size:12.5px;line-height:1.5;color:#6f6f6f}
.mem-list{display:flex;flex-direction:column;border-radius:16px;background:#0f0f0f;border:1px solid #191919;overflow:hidden}
.mem-row{display:flex;align-items:center;gap:12px;min-height:54px;padding:9px 14px;border:0;border-top:1px solid #171717;background:none;color:inherit;
  font-family:inherit;text-align:left;width:100%}
.mem-list>.mem-row:first-child{border-top:0}
button.mem-row{cursor:pointer}
button.mem-row:hover{background:#141414}
.mem-mark{width:20px;display:grid;place-items:center;flex:none}
.mem-glyph{width:32px;height:32px;display:grid;place-items:center;flex:none;border-radius:50%;background:#1c1c1c;color:#bdbdbd}
.mem-glyph>.port-logo{width:17px;height:17px;color:#d0d0d0}
.mem-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mem-name{font-size:14px;font-weight:500;color:#ececec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem-line{font-size:12.5px;color:#7c7c7c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem-line.bad{color:var(--bad);white-space:normal}
.mem-meta{flex:none;font-size:12.5px;color:#7c7c7c;white-space:nowrap}
.mem-on{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:12.5px;color:#9c9c9c}
.mem-on>svg{color:var(--ok)}
.mem-row .btn.quiet{flex:none}
.mem-empty{color:#7c7c7c;font-size:13px;min-height:64px}
.mem-token{display:flex;gap:8px;padding:0 14px 12px 58px}
.mem-token input{flex:1;min-width:0;height:36px;padding:0 14px;border:0;border-radius:999px;background:#1c1c1c;color:#ececec;font:inherit;font-size:13.5px;outline:none}
.mem-token input:focus{box-shadow:0 0 0 1px #3a3a3a}
.mem-tokenhint{margin:-6px 0 12px 72px}
.mem-err{margin:0;padding:0 14px 12px 58px;font-size:12.5px;color:var(--bad)}

.mem-drop{flex:none;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;background:#0f0f0f;border:1px dashed #2c2c2c;
  cursor:pointer;transition:border-color .12s ease,background .12s ease}
.mem-drop:hover{border-color:#3d3d3d}
.mem-drop.over{border-color:#8c8c8c;background:#151515}
.mem-drop:focus-visible{outline:2px solid #5a5a5a;outline-offset:2px}
.mem-droptop{display:flex;align-items:center;gap:12px}
.mem-dropicon{width:40px;height:40px;display:grid;place-items:center;flex:none;border-radius:50%;background:#1f1f1f;color:#d0d0d0}
.mem-droptxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mem-droptxt>b{font-size:14.5px;font-weight:600;color:#f4f4f4}
.mem-sub{font-size:12.5px;line-height:1.45;color:#8c8c8c}
.mem-droprow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mem-who{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;color:#7c7c7c;cursor:default;white-space:nowrap}
.mem-who select{height:28px;padding:0 26px 0 10px;border:0;border-radius:999px;background:#1f1f1f;color:#d0d0d0;font:inherit;font-size:12.5px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#8c8c8c 50%),linear-gradient(135deg,#8c8c8c 50%,transparent 50%);
  background-position:calc(100% - 13px) 12px,calc(100% - 9px) 12px;background-size:4px 4px;background-repeat:no-repeat}

/* ------------------------------------------------------------ Employee memory: the circles */
/* One screen: the graph fills it; the panel beside it scrolls on its own if it must. */
.tpage.mg{display:grid;grid-template-columns:minmax(0,1fr) 340px;overflow:hidden;height:100%}
.mg-stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:#050505;border-top:1px solid #111}
.mg-canvas{position:absolute;inset:0;display:block;touch-action:none}
.mg-find{position:absolute;top:14px;left:16px;z-index:2;display:flex;align-items:center;gap:8px;width:min(280px,calc(100% - 140px));height:36px;padding:0 12px;
  border-radius:999px;background:rgba(22,22,22,.9);color:#8c8c8c;box-shadow:0 0 0 1px #1f1f1f;backdrop-filter:blur(8px)}
.mg-find input{flex:1;min-width:0;border:0;background:none;outline:none;color:#ececec;font:inherit;font-size:13.5px}
.mg-find:focus-within{box-shadow:0 0 0 1px #3a3a3a}
.mg-zoom{position:absolute;top:14px;right:16px;z-index:2;display:flex;flex-direction:column;gap:6px}
.mg-zbtn{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(22,22,22,.9);color:#cfcfcf;cursor:pointer;
  box-shadow:0 0 0 1px #1f1f1f}
.mg-zbtn:hover{background:#262626;color:#fff}
.mg-minus{display:block;width:11px;height:1.6px;border-radius:1px;background:currentColor}
.mg-legend{position:absolute;left:16px;bottom:16px;right:70px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.mg-chip{pointer-events:auto;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border:0;border-radius:999px;background:rgba(22,22,22,.9);
  color:#cfcfcf;font:inherit;font-size:12.5px;cursor:pointer;box-shadow:0 0 0 1px #1f1f1f;backdrop-filter:blur(8px)}
.mg-chip>i{width:8px;height:8px;border-radius:50%;flex:none}
.mg-chip:hover{color:#fff}
.mg-chip[aria-pressed="true"]{background:#2a2a2a;color:#fff;box-shadow:0 0 0 1px #3a3a3a}
.mg-n{color:#7c7c7c;font-variant-numeric:tabular-nums}
.mg-more{align-self:center;font-size:12px;color:#6f6f6f;pointer-events:auto}
.mg-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;max-width:360px;text-align:center;font-size:13.5px;color:#7c7c7c;
  pointer-events:none;display:flex;flex-direction:column;gap:6px}
.mg-note.empty>b{font-size:16px;color:#e4e4e4}
.mg-side{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:14px 16px 16px;border-left:1px solid #0e0e0e;border-top:1px solid #111;background:#050505}
.mg-detail{display:flex;flex-direction:column;gap:10px;min-height:0}
.mg-dhead{display:flex;align-items:center;gap:8px;min-height:24px}
.mg-ddot{width:9px;height:9px;border-radius:50%;flex:none}
.mg-dfolder{flex:1;min-width:0;font-size:12.5px;color:#9c9c9c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-dwhen{font-size:12px;color:#6f6f6f}
.mg-dname{margin:0;font-size:18px;font-weight:600;line-height:1.3;color:#f4f4f4;overflow-wrap:anywhere}
.mg-ddesc{margin:0;font-size:13.5px;line-height:1.55;color:#a8a8a8}
.mg-detail>.mem-choose{align-self:flex-start}
.mg-near{display:flex;flex-direction:column;gap:2px}
.mg-nearrow{display:flex;align-items:center;gap:9px;padding:6px 8px;border:0;border-radius:9px;background:none;color:#d0d0d0;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.mg-nearrow:hover{background:#141414;color:#fff}
.mg-nearrow>i{width:7px;height:7px;border-radius:50%;flex:none}
.mg-nearrow>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-foot{margin-top:auto;font-size:12px;color:#6f6f6f;font-variant-numeric:tabular-nums}
.mg-read .mg-dhead{margin-bottom:10px}
.mg-readbody{font-size:14px;line-height:1.6;color:#dcdcdc}

/* ---------------------------------------------------------------- Connect tools */
.tpage.cn{overflow-y:auto;height:100%;border-top:1px solid #111}
.cn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1080px;margin:0 auto;padding:22px 24px 40px;align-items:start}
.cn-card{display:flex;flex-direction:column;gap:14px;min-width:0}
.cn-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 4px}
.cn-titles{min-width:0}
.cn-title{margin:0;font-size:16px;font-weight:600;color:#f4f4f4}
.cn-line{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:#7c7c7c}
.cn-list{display:flex;flex-direction:column;border-radius:16px;background:#0f0f0f;border:1px solid #191919;overflow:hidden}
.cn-list>.mem-row:first-child{border-top:0}
.cn-login{min-height:62px}
.cn-show{display:inline-flex;align-items:center;gap:6px}
.cn-login:has(.cn-reveal){flex-wrap:wrap}
.cn-reveal{flex-basis:100%;display:flex;flex-direction:column;gap:6px;margin:2px 0 4px;padding-left:44px}
.cn-revealmsg{font-size:12.5px;color:var(--muted)}
.cn-revealmsg.bad{color:#f28b82}
.cn-revealcode{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cn-revealcode .cn-revealmsg{flex-basis:100%}
.cn-codein{width:112px;height:34px;padding:0 12px;border:1px solid #333;border-radius:10px;background:#141414;color:#ececec;
  font:inherit;font-size:15px;letter-spacing:.28em;font-variant-numeric:tabular-nums}
.cn-codein:focus{outline:none;border-color:#5a5a5a}
.cn-revealpw{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cn-pw{padding:6px 10px;border-radius:8px;background:#1d1d1d;border:1px solid #2e2e2e;color:#fff;font-size:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;user-select:all;overflow-wrap:anywhere}
.cn-revealleft{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.cn-login .mem-glyph>.emp-login-mark{width:auto;height:auto;border:0;background:none;color:#d0d0d0;font-size:13px;font-weight:600}
.cn-login .mem-glyph>.port-logo{width:17px;height:17px;color:#d0d0d0}
/* Employee memory and Teach employee are the head's tabs again (Albert, 2026-09-23: "the old …
   were better"); the rows under the list are not drawn */
.chats-places{display:none!important}
.chats-place{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 12px;border:0;border-radius:10px;background:none;
  color:#b4b4b4;font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.chats-place:hover{background:#181818;color:#ececec}
.chats-place[aria-current="page"]{background:#292929;color:#fff}
.chats-place:focus-visible{outline:2px solid #6a6a6a;outline-offset:1px}
.chats-place>svg{flex:none;opacity:.85}
/* ⋯ in the head, and its little menu */
.chats-more{position:relative}
.chats-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:160px;padding:5px;border:1px solid #2c2c2c;border-radius:12px;
  background:#1a1a1a;box-shadow:0 12px 32px rgba(0,0,0,.5)}
.chats-menuitem{display:block;width:100%;padding:8px 11px;border:0;border-radius:8px;background:none;color:#ececec;font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.chats-menuitem:hover,.chats-menuitem:focus-visible{background:#2a2a2a;outline:none}
/* the row that opens it, at the foot of the chats: a white plug on a raised card, and what is connected, by logo */
html[data-look="chats"] .chats-conn{display:flex;align-items:center;gap:11px;width:100%;min-height:56px;padding:9px 12px 9px 10px;margin-bottom:6px;
  border:1px solid #262626;border-radius:14px;background:#181818;color:#f4f4f4;font:inherit;text-align:left;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:background .12s ease,border-color .12s ease}
html[data-look="chats"] .chats-conn:hover{background:#202020;border-color:#303030}
html[data-look="chats"] .chats-conn[aria-current="page"]{background:#292929;border-color:#383838}
html[data-look="chats"] .chats-conn:focus-visible{outline:2px solid #6a6a6a;outline-offset:2px}
.chats-conntile{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#fff;color:#000}
.chats-conntxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.chats-connname{font-size:14.5px;font-weight:600;line-height:1.3;color:#f4f4f4}
.chats-connline{font-size:12.5px;line-height:1.35;color:#8f8f8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chats-connlogos{flex:none;display:flex;align-items:center}
.chats-connlogos:empty{display:none}
.chats-connlogo{width:24px;height:24px;display:grid;place-items:center;margin-left:-7px;border-radius:50%;background:#2a2a2a;box-shadow:0 0 0 2px #181818}
.chats-connlogo:first-child{margin-left:0}
html[data-look="chats"] .chats-conn:hover .chats-connlogo{box-shadow:0 0 0 2px #202020}
html[data-look="chats"] .chats-conn[aria-current="page"] .chats-connlogo{box-shadow:0 0 0 2px #292929}
.chats-connlogo>.chats-logo{width:14px;height:14px}
.chats-connlogo>.port-logo{width:13px;height:13px;color:#d0d0d0}
/* an app's own logo, in its colours, on a dark tile */
.chats-logo{display:block;width:20px;height:20px;object-fit:contain}
.mem-glyph.cn-logo{border-radius:10px;background:#161616;box-shadow:inset 0 0 0 1px #242424}

/* --------------------------------------------------------------- Teach employee */
.tpage.tc{display:grid;grid-template-columns:minmax(0,1fr) 360px;overflow:hidden;height:100%;border-top:1px solid #111}
.tc-main{min-width:0;min-height:0;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:28px}
.tc-card{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.tc-card.wide{max-width:760px;height:100%;justify-content:center}
.tc-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:#1a1a1a;color:#e8e8e8;margin-bottom:4px}
.tc-title{margin:0;font-size:24px;font-weight:600;letter-spacing:-.01em;color:#f4f4f4}
.tc-lead{margin:0;max-width:46ch;font-size:14.5px;line-height:1.55;color:#9c9c9c;text-wrap:balance}
.tc-warn{margin:0;font-size:13px;color:var(--warn)}
.tc-ask{display:flex;align-items:center;gap:8px;width:100%;margin-top:8px;padding:6px 6px 6px 18px;border-radius:999px;background:#1c1c1c;box-shadow:0 0 0 1px #242424}
.tc-ask:focus-within{box-shadow:0 0 0 1px #3a3a3a}
.tc-ask input{flex:1;min-width:0;height:34px;border:0;background:none;outline:none;color:#ececec;font:inherit;font-size:14.5px}
.tc-ask input::placeholder{color:#7c7c7c}
.tc-opts{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.tc-seg{display:flex;gap:2px;padding:3px;border-radius:999px;background:#121212}
.tc-seg>button{height:26px;padding:0 12px;border:0;border-radius:999px;background:none;color:#8c8c8c;font:inherit;font-size:12.5px;cursor:pointer}
.tc-seg>button[aria-pressed="true"]{background:#262626;color:#fff}
.tc-opts .link{font-size:12.5px;color:#8c8c8c}
.tc-how{margin:0;max-width:52ch;font-size:12.5px;line-height:1.55;color:#7c7c7c}
.tc-live{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#f28b82}
.tc-live>.tc-task{font-weight:400;color:#9c9c9c}
.tc-live>.tc-task::before{content:"· ";color:#555}
.tc-rec{width:10px;height:10px;border-radius:50%;background:#f28b82;animation:tc-pulse 1.4s ease-in-out infinite}
@keyframes tc-pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,139,130,.5)}50%{box-shadow:0 0 0 7px rgba(242,139,130,0)}}
.tc-time{font-size:56px;font-weight:600;letter-spacing:-.02em;color:#f4f4f4;font-variant-numeric:tabular-nums;line-height:1}
.tc-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px}
.tc-thumbs{width:100%;flex:0 1 auto;min-height:120px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;padding:2px;
  border-radius:14px}
.tc-thumb{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#111;box-shadow:0 0 0 1px #1f1f1f}
.tc-thumb>img{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.tc-thumbx{position:absolute;top:5px;right:5px;width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(0,0,0,.72);
  color:#fff;cursor:pointer;opacity:0;transition:opacity .12s ease}
.tc-thumb:hover .tc-thumbx,.tc-thumbx:focus-visible{opacity:1}
.tc-progress{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:#9c9c9c}
.tc-progress.bad{color:var(--bad)}
.tc-steps{width:100%;flex:0 1 auto;min-height:0;overflow-y:auto;text-align:left;padding:18px 20px;border-radius:16px;background:#0f0f0f;border:1px solid #191919;
  font-size:14px;line-height:1.6;color:#dcdcdc}
.tc-side{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:18px 16px;border-left:1px solid #0e0e0e;background:#050505}
.tc-sidehead{display:flex;align-items:center;justify-content:space-between}
.tc-count{font-size:12.5px;color:#6f6f6f;font-variant-numeric:tabular-nums}
.tc-known{flex:0 1 auto;min-height:0;overflow-y:auto}
.tc-doors{margin-top:auto}

/* ------------------------------------------- the screen, opened: the whole window, as Grok's */
html[data-look="chats"] .emp-room[data-mode="desk"]{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:#050505}
html[data-look="chats"] .emp-room[data-mode="desk"]>.chats-panel{display:none}
.chats-deskbar{flex:none;display:flex;align-items:center;gap:4px;padding:0 12px 0 20px;border-bottom:1px solid #141414}
html[data-look="chats"] .emp-room:not([data-mode="desk"])>.chats-deskbar{display:none}
.chats-deskname{flex:none;font-size:14.5px;font-weight:600;color:#f4f4f4;white-space:nowrap}
html[data-look="chats"] .chats-deskbar>.emp-strip{flex:1;min-width:0;border:0;padding-left:12px;padding-right:8px}
.chats-deskclose{flex:none;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:#1d1d1d;color:#ddd;cursor:pointer}
.chats-deskclose:hover{background:#2a2a2a;color:#fff}

/* ------------------------------------------------------------------- widths */
@media (max-width:1180px){
  /* the selector gets the head's first row to itself */
  html[data-look="chats"] .page-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tabs tabs" "title tools";
    align-items:center;row-gap:8px;padding:8px 12px 8px 18px}
  html[data-look="chats"] .look-tabs{grid-area:tabs;justify-self:center;position:static;transform:none}
  html[data-look="chats"] .page-title-row{grid-area:title;max-width:none}
  html[data-look="chats"] #head-tools{grid-area:tools}
}
@media (max-width:1100px){
  html[data-look="chats"] .chats-panel,html[data-look="chats"] .chats-panelbtn{display:none}
  .tpage.mg{grid-template-columns:minmax(0,1fr) 300px}
  .tpage.tc{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:900px){
  .tpage.mg,.tpage.tc{display:flex;flex-direction:column;overflow-y:auto}
  .mg-stage{flex:none;height:62vh}
  .mg-side,.tc-side{border-left:0;overflow:visible}
  .tc-main{overflow:visible}
  .cn-grid{grid-template-columns:minmax(0,1fr);padding:16px 14px 32px}
}
@media (max-width:800px){
  html[data-look="chats"] .app{grid-template-columns:minmax(0,1fr)}
  html[data-look="chats"] #chats-side{position:fixed;left:0;top:0;bottom:0;z-index:45;width:min(300px,86vw);transform:translateX(-100%);visibility:hidden;
    box-shadow:0 0 0 1px #1a1a1a,12px 0 40px rgba(0,0,0,.6);transition:transform .2s ease-in,visibility 0s linear .2s}
  html[data-look="chats"] .app[data-chats-side="open"] #chats-side{transform:none;visibility:visible;transition:transform .24s ease-out}
  html[data-look="chats"] #chats-sidebtn-top{display:grid;grid-area:side}
  html[data-look="chats"] .page-head{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"side tabs tabs" "title title tools"}
  html[data-look="chats"] .look-tabs>button{padding:0 11px;font-size:13px}
  html[data-look="chats"] .emp-said{margin-left:24px;max-width:min(85%,540px)}
  html[data-look="chats"] .emp-from{max-width:min(92%,640px)}
  /* Teach's own list of pages becomes a row of pills above the page */
  html[data-look="chats"] #app>main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
  html[data-look="chats"] #app>main>#subrail{grid-column:1;grid-row:2;width:auto;flex-direction:row;align-items:center;gap:4px;overflow-x:auto;
    padding:2px 12px 8px;border-right:0}
  html[data-look="chats"] #app>main>.main-col{grid-column:1;grid-row:3}
  html[data-look="chats"] #subrail>.eyebrow{display:none}
  html[data-look="chats"] #subrail .rowbtn{flex:none;width:auto;height:34px;padding:0 14px;border-radius:999px}
}
@media (max-width:600px){
  .mg-legend>.mg-chip:nth-child(n+5),.mg-legend>.mg-more{display:none}
  html[data-look="chats"] .page-head{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"side tabs" "title title" "tools tools";padding:8px 12px}
  html[data-look="chats"] #head-tools{justify-content:flex-start}
  html[data-look="chats"] .look-tabs>button{padding:0 9px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  html[data-look="chats"] #chats-side{transition:none}
}

/* ================================================== the sign-in screen (Supabot look only)
   The wordmark and the form on one side, the chief of staff on the other: it says what this step
   wants, its eyes follow the pointer and the field, and it shuts them while a code is typed. */
html[data-look="chats"] .gate{grid-template-columns:minmax(0,440px) minmax(0,360px);gap:clamp(24px,5vw,80px);
  align-items:center;justify-content:center;place-content:center;padding:clamp(20px,4vw,56px);background:var(--bg)}
html[data-look="chats"] .gate-card{background:none;border:0;box-shadow:none;padding:0;text-align:left;max-width:380px}
html[data-look="chats"] .gate .brand{display:none}
html[data-look="chats"] .gate h1{display:block;font-size:27px;font-weight:600;letter-spacing:-.4px;line-height:1.2;margin:26px 0 0;color:var(--text)}
html[data-look="chats"] .gate .sub{margin:9px 0 22px;max-width:none;text-align:left;font-size:13.5px;color:var(--muted);line-height:1.5}
html[data-look="chats"] .gate .field{margin-bottom:11px}
html[data-look="chats"] .gate .f{max-width:none;margin:0;height:46px;border-radius:14px;background:#141414;
  border:1px solid #2b2b2b;text-align:left;padding:0 15px;font-size:15px}
html[data-look="chats"] .gate .f:focus{border-color:#4a4a4a;background:#171717}
html[data-look="chats"] .gate .f.code-in{letter-spacing:.32em;font-size:17px}
html[data-look="chats"] .gate .btn{max-width:none;margin:4px 0 0;height:46px;border-radius:999px;background:#ECECEC;
  color:#0b0b0b;border:0;font-weight:600;font-size:14.5px}
html[data-look="chats"] .gate .btn:hover:not(:disabled){background:#fff}
html[data-look="chats"] .gate .btn:disabled{background:#3a3a3a;color:#9a9a9a}
html[data-look="chats"] .gate .msg{text-align:left;margin:0 0 12px;max-width:none;font-size:12px}
html[data-look="chats"] .gate .swap{text-align:left;margin:16px 0 0;max-width:none;padding:0;font-size:12px;color:var(--faint);line-height:1.6}
html[data-look="chats"] .gate #step-wait{margin:var(--s-xl) 0 0;text-align:left}
html[data-look="chats"] .gate #qr-box{margin:0 0 12px}
html[data-look="chats"] .gate code#enrol-secret{display:inline-block;margin-bottom:12px}
/* the wordmark across the whole form (Albert, 2026-09-22: "make the supabot writing bigger") */
.gate-word{display:block;width:100%;max-width:380px;height:auto;margin:0 0 4px -6px}
.gate-stage{display:none}
html[data-look="chats"] .gate-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-width:0}
.gate-bot{width:min(54vh,430px);max-width:100%}
/* pearl, like the wordmark — every robot is pearl now; kept so the sign-in never drifts (the parts are <use> clones: they
   inherit these, a class selector would never reach them) */
.gate-stage .mc{--mc-fill:#eef1f5;--mc-shade:#ccd4dc;--mc-line:#5b656f}
.gate-stage .mc-shadow{opacity:.34}
.gate-bot .mc{width:100%;height:auto;display:block}
.gate-say{background:#202020;color:#ececec;border-radius:19px;padding:10px 16px;font-size:14.5px;line-height:1.45;
  max-width:300px;text-align:center;position:relative;box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.gate-say::after{content:"";position:absolute;left:50%;bottom:-5px;width:12px;height:12px;background:#202020;
  transform:translateX(-50%) rotate(45deg);border-radius:2px}
/* the eyes and the head, steered from chats.js; they compose with the mood's own movement */
.gate-stage .mc-face{animation:none!important;translate:var(--gx,0px) var(--gy,0px);transition:translate .3s ease-out}
.gate-stage .mc-head{rotate:var(--gr,0deg);transition:rotate .4s ease-out}
.gate-stage.shy .mc-eye{opacity:0}
.gate-stage.shy .mc-shut{opacity:1}
@keyframes gate-no{0%,100%{transform:rotate(0)}20%{transform:rotate(7deg)}60%{transform:rotate(-7deg)}}
.gate-stage.shake .mc-head{animation:gate-no .5s ease-in-out}
@media (max-width:880px){
  html[data-look="chats"] .gate{grid-template-columns:minmax(0,380px);gap:8px;place-content:center}
  html[data-look="chats"] .gate-stage{order:-1;gap:12px}
  .gate-bot{width:min(34vh,190px)}
  .gate-say{font-size:13.5px;max-width:280px}
  html[data-look="chats"] .gate h1{font-size:23px;margin-top:18px}
  .gate-word{max-width:300px}
}
@media (prefers-reduced-motion:reduce){
  .gate-stage .mc-face,.gate-stage .mc-head{transition:none}
  .gate-stage.shake .mc-head{animation:none}
}

.talk-mirror{font-size:13px;color:var(--faint);align-self:flex-start;max-width:min(94%,700px);padding:2px 0;line-height:1.5}
.talk-mirror .talk-link{font-size:13px}

/* the chief's panel: the screens of whoever is working, side by side, each opening over the window */
.chats-workh{margin-bottom:2px}
.chats-screens{display:grid;gap:10px;margin-bottom:14px}
.chats-screens[data-n="1"]{grid-template-columns:1fr}
.chats-screens[data-n="2"],.chats-screens[data-n="3"],.chats-screens[data-n="4"]{grid-template-columns:1fr 1fr}
.chats-screen{display:flex;flex-direction:column;gap:6px;padding:0;background:none;border:0;color:inherit;cursor:pointer;text-align:left;min-width:0}
.chats-screen .chats-shot-sm{aspect-ratio:16/10;border-radius:12px;overflow:hidden;position:relative;display:block}
.chats-screen .chats-shot-sm img{width:100%;height:100%;object-fit:cover;display:block}
.chats-screen:hover .chats-shot-sm{outline:1px solid #3a3a3a}
.chats-screen[data-kind="warn"] .chats-shot-sm{outline:1px solid #f5b73b}
.chats-screencap{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:12px;color:var(--faint)}
.chats-screencap b{color:#ddd;font-weight:600;font-size:12.5px}
.chats-screenline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chats-screens[data-n="1"] .chats-screen .chats-shot-sm{aspect-ratio:16/9}

/* the list as a status board: the name, then what this chat wants from you */
.chats-namerow{display:flex;align-items:baseline;gap:7px;min-width:0}
.chats-tag{flex:none;font-size:10.5px;letter-spacing:.02em;padding:1px 6px;border-radius:999px;background:#242424;color:#9a9a9a;text-transform:lowercase}
.chats-tag[data-kind="needs you"]{background:rgba(245,183,59,.16);color:#f5b73b}
.chats-tag[data-kind="working"]{background:rgba(126,224,168,.14);color:#7ee0a8}
.chats-tag[data-kind="done"]{background:#242424;color:#9a9a9a}

/* the opening of an empty chat: the robot's hello, one line under it, three things to click */
.chats-open2{display:flex;flex-direction:column;gap:12px;align-self:flex-start;max-width:min(94%,700px);margin:auto 0}
.chats-open2sub{font-size:13.5px;color:var(--faint);line-height:1.5;padding-left:40px;max-width:520px}
.chats-open2row{display:flex;flex-wrap:wrap;gap:8px;padding-left:40px}
.chats-opener{border:1px solid #2b2b2b;background:#161616;color:#d6d6d6;border-radius:999px;padding:8px 14px;font-size:13px;cursor:pointer;font-family:inherit;text-align:left}
.chats-opener:hover{background:#1d1d1d;border-color:#3a3a3a;color:#f0f0f0}

/* one question, once: in the chat (chats-talk.js talk_qCard), not again above the message box */
html[data-look="chats"] .island-ask{display:none!important}

/* Settings → Company (org.js org_renderSheet): the company you work in, in the Settings sheet */
.org-sheet{display:flex;flex-direction:column;gap:14px}
.org-sheethead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:2px 2px 6px}
.org-sheetname{flex-basis:100%;display:flex;align-items:center;gap:10px;font-size:21px;font-weight:600;letter-spacing:-.2px;color:var(--text)}
.org-sheetline{flex:1 1 auto;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.org-sheetnote{margin:0}
/* the row in two lines, as #/org has it on a narrow window: the address gets the width */
.org-sheet .org-person{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center}
.org-sheet .org-who{grid-column:1;grid-row:1}
.org-sheet .org-person>.org-more,.org-sheet .org-person>.org-morespace{grid-column:2;grid-row:1}
.org-sheet .org-person>.org-state{grid-column:1;grid-row:2;font-size:12.5px}
.org-sheet .org-person>.org-quick{grid-column:1;grid-row:3;justify-self:start;margin-left:-10px}
.org-sheet .org-emps{grid-template-columns:minmax(0,1fr);padding:0 22px}
.org-sheet .org-emps>.org-emp:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--line)}
.org-sheet .org-holder{min-width:220px}