/* 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 list #28292c, a chosen row #3c3d40, the search field #333437. The chat itself takes
   the numbers measured off the recording at full size (p21 grok-reference A.2, F1): the page #26272a, a reply
   #36373a, your own line #58595c, the message box #3c3d40 (the token block under "the chat"). */

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

/* ------------------------------------------------------------------ tokens */
html[data-look="chats"]{
  --bg:#26272a; --side:#28292c; --card:#323336; --card2:#3c3d40;
  --line:#323336; --line2:#414245;
  --text:#ececec; --muted:#a8a8a8; --faint:#7c7c7c;
  --rail:272px;
}
html[data-look="chats"] body{background:#26272a}   /* Grok's page (p21 F1) */
/* the focus ring: --line2 (#414245) was about 1.5:1 on #26272a and #28292c and could not be seen on
   the chosen row (#3c3d40); this blue, the one .talk-opt already had, is 6:1 (hunt, 2026-09-23) */
html[data-look="chats"] :focus-visible,html[data-look="chats"] input:focus-visible+.sw{outline-color:#6b8cff}

/* ------------------------------------------------------------------- frame */
html[data-look="chats"] aside#rail{display:none}
html[data-look="chats"] .app{grid-template-columns:var(--strip,68px) 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:#28292c;border-right:1px solid #27282b}

/* 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:146px;height:20px;margin:0 auto 0 0;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:#303134}
.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:#343538;color:#fff}
/* p21 review-1 (item 15): the ring only for the keyboard, drawn inside the button so the head never cuts it; focus given
   back after a tap or a click (the phone's sheet closing) draws none */
.chats-iconbtn:focus{outline:none}
.chats-iconbtn:focus-visible{outline:2px solid #6b8cff;outline-offset:-2px}
.chats-iconbtn[data-quiet-focus]:focus-visible{outline:none}
.chats-iconbtn[aria-pressed="true"]{color:#fff}
/* the + at the company's ceiling: it stays where it is, dimmed, and says why when pressed (2026-09-23) */
.chats-iconbtn[aria-disabled="true"]{opacity:.4;cursor:default}
.chats-iconbtn[aria-disabled="true"]:hover{background:none;color:#b8b8b8}
/* an employee's name in the head renames it, for whom the database lets (chats_headName) */
html[data-look="chats"] #view-title.chats-renamable{cursor:pointer;border-radius:6px}
html[data-look="chats"] #view-title.chats-renamable:hover{text-decoration:underline dotted #6a6a6a;text-underline-offset:4px}
html[data-look="chats"] #view-title.chats-renamable:focus-visible{outline:2px solid var(--accent,#6aa7ff);outline-offset:2px}
.chats-search{flex:none;display:flex;align-items:center;gap:8px;height:36px;margin:0 8px 10px;padding:0 11px;border-radius:10px;background:#333437;color:#8c8c8c;cursor:text}
.chats-search:focus-within{box-shadow:0 0 0 1px #6b8cff}   /* was #48494c: 1.3:1 on the list */
.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:66px;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:#2f3033}
.chats-row[aria-current="page"]{background:#3c3d40}
.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:#393a3d;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-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px #28292c}
.chats-row:hover .chats-dot{box-shadow:0 0 0 2px #2f3033}
.chats-row[aria-current="page"] .chats-dot{box-shadow:0 0 0 2px #3c3d40}
.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:#2f3033}
.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:48px;padding:0 12px 0 18px;gap:10px;border-bottom:0;background:#26272a}
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:#2c2d30}
.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:#3d3e41;color:#fff}
html[data-look="chats"] .chats-sidebtn{display:none}
#chats-sidebtn-top{display:none}
/* p21 H1 (SPEC 3.6, 3.2): the chat's own head (chats.js chats_paintChrome puts .chats-chathead on it; app.js HEAD_MODES takes
   it off for every other page). One 48 px row down to 901 px: [robot 34][name] · the tabs · [⋯][panel]. The tabs sit in
   the middle of three columns whose sides are equal, so they stand exactly where the other pages centre them; a name too
   long for its side ends in "…". No state word, no approvals chip, no Stop: those left the head. */
html[data-look="chats"] .page-head.chats-chathead{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"title tabs tools";
  align-items:center;column-gap:12px;row-gap:8px;min-height:48px;padding:0 12px}
html[data-look="chats"] .chats-chathead .page-title-row{grid-area:title;max-width:none;min-width:0;padding-left:6px;gap:8px}
html[data-look="chats"] .chats-chathead #view-title{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:20px}
html[data-look="chats"] .chats-chathead .look-tabs{grid-area:tabs;justify-self:center;position:static;transform:none}
html[data-look="chats"] .chats-chathead #head-tools{grid-area:tools;justify-self:end;width:auto;min-width:0;margin-left:0;justify-content:flex-end;gap:6px;overflow:visible}
html[data-look="chats"] .chats-chathead #view-caption{display:none}
.chats-scrim{display:none}

/* ------------------------------------------------------------------ the chat */
html[data-look="chats"] .emp-roster{display:none}
/* the screen panel, bigger by default (Albert, 2026-11-05: "make the desktop sidebar bigger by default"); was clamp(320px,24vw,440px) */
html[data-look="chats"] .emp-room{--chats-pw:clamp(440px,34vw,660px)}
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}

/* ---------------------------------------------- p21 F1: the frame, one table of tokens (p21 SPEC 3.2, Grok A.1-A.2, C.1-C.3)
   One column, one set of edges: every block of a chat sits in one centred column min(760px, pane - 2 gutters) (the
   gutters are on .emp-scroll and .emp-dock, employee.css). Bubbles and cards stop at 640; his bubbles end at the
   column's right edge, everything else starts at its left edge; the message box is exactly the column. The space
   between rows comes from data-gap (emp_fillFeed / chats_gap): 4 px within one speaker, 16 px when the speaker changes,
   6 px from a bubble to the line under it, 3 px from a head line to its bubble; a card counts as a speaker of its own. */
html[data-look="chats"] .emp-room{
  --gut:16px; --col:760px; --bub:min(640px,85%); --card-max:640px;
  --c-agent:#36373a; --c-person:#58595c; --c-bubtext:#fff;
  --c-card:#2e2f32; --c-cardline:#393a3d;
  --c-line:#9a9a9a; --c-quiet:#a0a0a0; --c-sec:#3d3e41; --c-composer:#3c3d40;
}
@media (max-width:420px){html[data-look="chats"] .emp-room{--gut:12px}}
/* the composer never floats: clip, unlike hidden, cannot be scrolled from code (a scrollIntoView aimed at a card scrolled
   .main-col and left a black void under the message box, p20 e2e-p3-plan-14) */
html[data-look="chats"] .main-col,html[data-look="chats"] .emp-room,html[data-look="chats"] .emp-frame{overflow:clip}
html[data-look="chats"] .emp-feed{width:100%;max-width:var(--col);margin:0 auto;gap:0;padding:16px 0}
/* the rhythm (the opener is centred in an empty chat on its own). p21 review-1: the default and "first" keep the specificity
   of the values under them (:where adds none); with :not() they outranked every one of them and every gap came out 16 px */
html[data-look="chats"] .emp-feed>[data-gap]:where(:not(.chats-open2)){margin-top:16px}
html[data-look="chats"] .emp-feed>[data-gap="first"]:where(:not(.chats-open2)){margin-top:0}
html[data-look="chats"] .emp-feed>[data-gap="same"]{margin-top:4px}
html[data-look="chats"] .emp-feed>[data-gap="attach"]{margin-top:6px}
html[data-look="chats"] .emp-feed>[data-gap="head"]{margin-top:3px}
html[data-look="chats"] .emp-feed>[data-gap="stack"]{margin-top:0}
html[data-look="chats"] .emp-feed>[data-gap="day"]{margin-top:20px}
html[data-look="chats"] .emp-feed>[data-gap="afterday"]{margin-top:12px}
/* the time line: where a day starts and after a pause of more than an hour (chats_days), centred over the column */
html[data-look="chats"] .chats-day{align-self:center;margin:0;font-size:12px;line-height:16px;color:#989898}
/* his bubble: at the column's right edge, 14/20, 8/12, r18; the speaker's joined corners 5 px */
html[data-look="chats"] .emp-said{max-width:var(--bub);margin-left:0;padding:8px 12px;border-radius:18px;background:var(--c-person);color:var(--c-bubtext);
  font-size:14px;line-height:20px}
html[data-look="chats"] .emp-feed>.emp-said[data-gap="same"]{border-top-right-radius:5px}
html[data-look="chats"] .emp-feed>.emp-said:has(+.emp-said[data-gap="same"]){border-bottom-right-radius:5px}
html[data-look="chats"] .emp-feed>:is(.talk-reply,.emp-from)[data-gap="same"]>:is(.talk-body,.emp-body),
html[data-look="chats"] .emp-feed>.proj-msg[data-gap="same"]>.talk-reply:first-child>.talk-body{border-top-left-radius:5px}
html[data-look="chats"] .emp-feed>:is(.talk-reply,.emp-from):has(+:is(.talk-reply,.emp-from,.proj-msg)[data-gap="same"])>:is(.talk-body,.emp-body){border-bottom-left-radius:5px}
html[data-look="chats"] .emp-from{max-width:var(--bub)}
html[data-look="chats"] .emp-from>.mgr-mark{display:none}
html[data-look="chats"] .emp-from>.emp-body{min-width:0;padding:8px 12px;border-radius:18px;background:var(--c-agent);color:var(--c-bubtext);font-size:14px;line-height:20px}
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:#28292c;border-color:#333437}
/* 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 #434447;border-radius:9px;background:#323336;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): plain replies, no robot, one live line while work runs,
   the chat in a centred column however wide the window (p21 F1: the column and the box share both edges; the box is the
   chat's own column, never the pane's width: Albert, 2026-09-25, "too long") */
html[data-look="chats"] .emp-dock>.island{width:100%;max-width:var(--col);margin:0 auto}
/* the chief's bubble (Grok's #36373a, 14/20, 8/12, r18, at most 640 or 85 % of the column) */
.talk-reply{display:flex;align-items:flex-start;max-width:var(--bub,min(640px,85%));align-self:flex-start}
/* a reply with nothing to read is never an empty grey pill (Albert, 2026-09-25: "this lighter little blob on screen") */
.talk-reply[hidden],.talk-reply.talk-empty,.talk-body:empty{display:none!important}
.talk-from{font-size:12px;font-weight:600;color:#9a9a9a;margin:0 0 3px;letter-spacing:.01em}
.talk-body{flex:0 1 auto;min-width:0;padding:8px 12px;border-radius:18px;background:var(--c-agent,#36373a);color:var(--c-bubtext,#fff);font-size:14px;line-height:20px}
.talk-body .md,html[data-look="chats"] .emp-from>.emp-body .md{max-width:none;font-size:14px;line-height:20px;color:inherit}
.talk-body .md-p,.talk-body .md-mark,html[data-look="chats"] .emp-from>.emp-body .md-p{line-height:20px}
/* a long word, path or record wraps inside its bubble or card, as the person's own bubble does (at 390 px
   they ran past the edge and were cut off — the 2026-09-23 bug hunt) */
.talk-body,.talk-askq,.talk-askyou{overflow-wrap:anywhere}
.talk-body>:first-child{margin-top:0}
.talk-body>:last-child{margin-bottom:0}
/* ---------------------------------------------- p21 S1: an answer and the one row under it (SPEC 2.7, 2.8, 3.2; Grok C.2, C.3)
   The bubble; 6 px under it ONE row, 28 px, never wrapping: the sources pill on the left, "Full report" next to it, Copy at
   the right end of the bubble's width (on hover; on a touch screen under the newest answer only); then a summary's
   question; then, under the newest answer only, the follow-ups "↳ …", 32 px each. The row and the bubble share one width
   (the grid track: the wider of the two, at most a bubble's). Links in the words are the words' own colour, underlined. */
.talk-ans{display:flex;flex-direction:column;align-items:stretch;align-self:stretch;min-width:0}
.talk-ansbox{display:grid;grid-template-columns:fit-content(var(--bub,min(640px,85%)));justify-content:start;min-width:0}
.talk-ansbox>.talk-reply{justify-self:start;max-width:100%;min-width:0}
.talk-ans>.talk-reply{align-self:flex-start}
.talk-under{display:flex;align-items:center;gap:4px;height:28px;margin-top:6px;min-width:0;white-space:nowrap}
.proj-msg>.talk-under{margin-top:-2px;align-self:flex-start}
.talk-pill{flex:none;display:inline-flex;align-items:center;gap:8px;height:28px;margin:0;padding:0 12px 0 6px;border:0;border-radius:14px;
  background:#303134;color:#d6d6d6;font:inherit;font-size:13px;line-height:20px;cursor:pointer}
.talk-pill:hover{background:#38393c;color:#fff}
.talk-pill:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
.talk-pill>.talk-stack>.talk-mono{box-shadow:0 0 0 1.5px #303134}
.talk-pill:hover>.talk-stack>.talk-mono{box-shadow:0 0 0 1.5px #38393c}
/* p21 review-1 (item 12): separate coins. The first lies on top; each next one tucks 6 px under the one before, its letter
   moved into the part that shows (the tucked half of the letter read as a glitch: "B", half a "C", half a "T") */
.talk-pill>.talk-stack>.talk-mono+.talk-mono{box-sizing:border-box;padding-left:7px}
.talk-pillword{white-space:nowrap}
/* an answer landing now: its pill fades in where it sits (p21 review-1, item 11: no fly-in) */
.talk-pill.talk-pillin{animation:talk-pillin .3s ease-out .15s both}
@keyframes talk-pillin{from{opacity:0}to{opacity:1}}
/* p21 review-1 (item 14): "Full report" is the same quiet 28 px pill as the sources pill, a small page in front: the row under
   an answer is always controls, never a stray caption */
.talk-fullbtn{flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;margin:0;padding:0 12px 0 9px;border:0;border-radius:14px;
  background:#303134;color:#d6d6d6;font:inherit;font-size:13px;line-height:20px;white-space:nowrap;cursor:pointer}
.talk-fullbtn:hover{background:#38393c;color:#fff}
.talk-fullbtn:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
.talk-fullbtn>svg{flex:none;color:#a9a9a9}
.talk-fullbtn:hover>svg{color:#fff}
@media (max-width:420px){.talk-fullw{display:none}.talk-fullr{text-transform:capitalize}}
.talk-copy{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;margin:0 0 0 auto;padding:0;border:0;border-radius:8px;
  background:none;color:var(--c-quiet,#a0a0a0);cursor:pointer;visibility:hidden}
.talk-copy:hover{color:#fff;background:#303134}
.talk-copy[data-done="1"]{color:#7ee0a8}
.talk-copy:focus-visible{visibility:visible;outline:2px solid #6b8cff;outline-offset:1px}
.talk-ans:hover .talk-copy,.talk-ans:focus-within .talk-copy{visibility:visible}
@media (hover:none){
  .talk-ans:hover .talk-copy,.talk-ans:focus-within .talk-copy{visibility:hidden}
  .talk-ans[data-last] .talk-copy{visibility:visible}
}
/* p22 files (2026-09-29): the files a job handed over, right under its answer's bubble and above its row — one chip each:
   its kind on a small tile, its name and "Spreadsheet · 12 KB", Download at the right end. The whole chip downloads; on a
   phone only the arrow says so. The chips take the answer's width (at least 260 px where there is room), a long name ends
   in "…". */
.talk-files{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:8px;min-width:0}
.talk-file{display:flex;align-items:center;gap:10px;width:100%;min-width:min(260px,100%);max-width:100%;height:48px;margin:0;
  padding:0 7px 0 8px;box-sizing:border-box;border:1px solid #393a3d;border-radius:12px;background:#2c2d30;color:#ececec;
  font:inherit;text-align:left;cursor:pointer}
.talk-file:hover{background:#303134;border-color:#404144}
.talk-file:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
.talk-filetile{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:#23262b;color:#c3cad3}
.talk-filetile[data-kind="sheet"]{background:#15321f;color:#7ee0a8}
.talk-filetile[data-kind="pdf"]{background:#3a1b1b;color:#ff9b8f}
.talk-filetile[data-kind="doc"]{background:#16294a;color:#8fb8ff}
.talk-filetile[data-kind="slides"]{background:#3a2915;color:#ffb86b}
.talk-filetile[data-kind="image"]{background:#2c1f3d;color:#c9a2ff}
.talk-filewords{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
.talk-filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:18px;color:#ececec}
.talk-filemeta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:16px;color:#9a9a9a}
.talk-filedl{flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;margin-left:auto;padding:0 12px 0 9px;border-radius:14px;
  background:#343538;color:#d6d6d6;font-size:13px;line-height:20px;white-space:nowrap}
.talk-file:hover>.talk-filedl{background:#3d3e41;color:#fff}
.talk-file[data-state="loading"]{cursor:progress}
.talk-file[data-state="loading"]>.talk-filedl{color:#a9a9a9}
.talk-file[data-state="done"]>.talk-filedl{color:#7ee0a8}
.talk-file[data-state="error"]>.talk-filedl{color:#ff9b8f}
@media (max-width:420px){.talk-filedlw{display:none}.talk-filedl{width:32px;padding:0;justify-content:center}}
.talk-ans>.talk-ask,.talk-ans>.talk-askcard{margin-top:8px}
.talk-follow{display:flex;flex-direction:column;align-items:flex-start;margin-top:6px;min-width:0}
.talk-follow[hidden]{display:none}
.talk-followrow{display:flex;align-items:center;gap:8px;max-width:min(100%,640px);height:32px;margin:0;padding:0 8px 0 2px;border:0;border-radius:8px;
  background:none;color:#cfcfcf;font:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}
.talk-followrow:hover:not(:disabled){color:#fff;background:#2c2d30}
.talk-followrow:focus-visible{outline:2px solid #6b8cff;outline-offset:1px}
.talk-followrow:disabled{cursor:default;opacity:.5}
.talk-followarrow{flex:none;color:#8a8a8a}
.talk-followtext{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* links in an answer (SPEC 2.8, S7): the words' colour, underlined, never blue; the sites are the pill's */
.talk-body a,.talk-body a.md-link,html[data-look="chats"] .emp-from>.emp-body a{color:#ececec;text-decoration:underline;text-decoration-color:#666;text-underline-offset:2px}
.talk-body a:hover,html[data-look="chats"] .emp-from>.emp-body a:hover{text-decoration-color:#bdbdbd}
.talk-body .md-tablewrap{margin:2px 0;background:rgba(255,255,255,.02);--tbl-fade:#393a3d}
/* a table wider than its bubble (chats_tableWatch sets data-overflow): its right edge fades under a small "→" that stays
   at the edge while it scrolls, until its end is in view (p21 F1, L20: on a phone the cut was silent) */
html[data-look="chats"] .md-tablewrap{display:grid}
html[data-look="chats"] .md-tablewrap>.md-table{grid-area:1/1}
html[data-look="chats"] .md-tablewrap[data-overflow]::after{content:"";grid-area:1/1;justify-self:end;position:sticky;right:0;z-index:1;display:block;
  width:14px;pointer-events:none;background:linear-gradient(to right,transparent,var(--tbl-fade,#36373a))}
/* p21 final fixes (the final look, item 13): the hint beside the table (under its right edge), not over a cell */
.md-tablehint{display:block;margin:2px 0 4px auto;padding:2px 0;border:0;background:none;color:#9a9a9a;font:inherit;font-size:12px;line-height:18px;cursor:pointer}
.md-tablehint:hover{color:#fff}
.md-tablehint[hidden]{display:none}
/* p21 review-1 (item 16): on a phone a table never cuts a word in half ("v=spf / inclu / box.c"): each record is one line
   and the table scrolls sideways inside the bubble, its right edge faded (above) */
@media (max-width:420px){html[data-look="chats"] .talk-body .md-table :is(td,th),html[data-look="chats"] .talk-body .md-table td:last-child{white-space:nowrap;overflow-wrap:normal}}
/* the box manager's own choices (classic buttons) start at the column's edge like everything else */
html[data-look="chats"] .emp-choices{margin:0}
/* ---------------------------------------------- p21 L1: a job still going is one line (SPEC 2.7, 3.2; Grok C.4)
   28 px, 13/20 #9a9a9a: the 16 px picture of what it does, 8 px, who (the chief of staff's chat), what it does now, one line
   with an ellipsis. Its right end on hover or focus: a quiet Stop and "›" (on a touch screen "›" always, Stop in the opened
   line). Opened (a click), rows grow under it with no surface, 24 px in, at most 240 px with their own scroll. No clock,
   no $, no card (the mm:ss clock and the cost are only in the opened rows). */
.talk-work,.talk-work.talk-row{display:flex;flex-direction:column;align-items:stretch;align-self:flex-start;box-sizing:border-box;width:min(100%,var(--card-max,640px));min-width:0;min-height:0}
.talk-workline{display:flex;align-items:center;gap:2px;height:28px;min-width:0}
.talk-workbtn{flex:1 1 auto;display:flex;align-items:center;min-width:0;height:28px;margin:0;padding:0;border:0;border-radius:6px;background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer}
.talk-workbtn:focus-visible,.talk-chevbtn:focus-visible,.talk-headbtn:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
.talk-workbtn>.talk-act{flex:1 1 auto;min-height:0;font-size:13px;line-height:20px;color:var(--c-line,#9a9a9a)}
.talk-work .talk-actwho,.talk-live .talk-actwho{color:#c4c4c4;font-weight:500}
.talk-workbtn:hover .talk-tickline,.talk-workbtn:hover .talk-actwho{color:#f2f2f2}
/* waiting for him: the amber pulse is the dot; the words say where the ask is ("waiting for your OK ↓") */
.talk-work[data-state="waiting"] .talk-tickline{color:#e2e2e2}
.talk-workstop{flex:none;visibility:hidden;padding:4px 6px}
.talk-workline:hover .talk-workstop,.talk-workline:focus-within .talk-workstop{visibility:visible}
/* p21 review-1 (item 17): opened, Stop is in its last row ("Watch · Stop"), not twice */
.talk-work[data-open]>.talk-workline>.talk-workstop{display:none}
.talk-chevbtn{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;margin:0;padding:0;border:0;border-radius:6px;background:none;
  color:var(--c-line,#9a9a9a);font:inherit;font-size:15px;line-height:1;cursor:pointer;transition:transform .15s ease}
.talk-chevbtn:hover{color:#fff}
.talk-workline>.talk-chevbtn{visibility:hidden}
.talk-workline:hover>.talk-chevbtn,.talk-workline:focus-within>.talk-chevbtn,.talk-work[data-open]>.talk-workline>.talk-chevbtn{visibility:visible}
.talk-work[data-open]>.talk-workline>.talk-chevbtn,.talk-head[data-open] .talk-chevbtn{transform:rotate(90deg)}
@media (hover:none){
  .talk-workline>.talk-chevbtn{visibility:visible}
  .talk-workline>.talk-workstop{display:none}
}
/* the opened line, and the Worked fold over an answer (the same look) */
.talk-workmore,.talk-worked{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0;max-height:240px;overflow-y:auto;
  margin:0 0 4px 24px;font-size:13px;line-height:20px;color:var(--c-line,#9a9a9a);overscroll-behavior:contain}
/* p21 final fixes (the final look, items 3/4): an opened live line scrolls only its steps and lanes; its last row (Watch · Stop,
   Pause · Stop project… · Download) stands under them, whole, never inside the scroll */
.talk-workmore{max-height:none;overflow:visible}
.talk-wscroll{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0;max-height:216px;overflow-y:auto;overscroll-behavior:contain}
.talk-wscroll:empty{display:none}
.talk-workmore[hidden],.talk-worked[hidden]{display:none}
@keyframes talk-beat{0%,100%{opacity:1}50%{opacity:.25}}
/* its checklist: where it is, out of how many */
.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:#434447}
.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-planbox[hidden]{display:none}
.talk-workmore .talk-plan{min-height:20px}
.talk-workmore .talk-plantxt{font-size:13px;color:var(--c-line,#9a9a9a)}
.talk-workmore .talk-trailrows li,.talk-wrows li{font-size:13px;line-height:20px}
.talk-lanes{display:flex;flex-direction:column;gap:0;min-width:0}
.talk-lanes[hidden]{display:none}
.talk-lane{display:flex;flex-direction:column;min-width:0}
.talk-laneline{display:flex;align-items:center;gap:4px;min-width:0;height:24px}
.talk-laneline>.talk-act{flex:1 1 auto;min-height:0;font-size:13px;line-height:20px;color:var(--c-line,#9a9a9a)}
.talk-lanetools{flex:none;display:inline-flex;visibility:hidden}
.talk-lane:hover .talk-lanetools,.talk-lane:focus-within .talk-lanetools{visibility:visible}
@media (hover:none){.talk-lanetools{visibility:visible}}
.talk-lanetools .talk-link,.talk-wlast .talk-link{padding:0 3px;font-size:13px;line-height:20px}
.talk-wmore{color:#7c7c7c}
.talk-wlast{display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px;min-height:20px}
.talk-wfacts{color:#7c7c7c;font-variant-numeric:tabular-nums}
.talk-wsep{color:#5f5f5f}
.talk-wsep[hidden]{display:none}
.talk-wfacts:empty{display:none}
/* the Worked fold's own rows: a check, the step in words; "Searched: …" as text; the pages it opened, each a link */
.talk-wrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;min-width:0}
.talk-wrows li{display:flex;align-items:center;gap:6px;min-width:0;color:var(--c-line,#9a9a9a)}
.talk-wrows li>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talk-wrows li.query{padding-left:0}
.talk-wdot{flex:none;width:4px;height:4px;margin:0 3px;border-radius:50%;background:#5a5a5a}
.talk-whead{margin-top:4px;color:#7c7c7c}
.talk-wpages{display:flex;flex-direction:column;min-width:0}
.talk-wpages .talk-srcrow{height:20px;font-size:13px}
.talk-q{font-size:14px;line-height:1.5;color:#e6e6e6;max-width:560px}
/* under a lane it is the second line, quieter than the lane's own (it outshone it) */
.talk-lane .talk-q{font-size:13px;color:var(--faint)}
.talk-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.talk-btns .btnrow{display:flex;flex-wrap:wrap;gap:8px}
/* p21 F1, the three button looks (SPEC 3.2): primary white on black and secondary #3d3e41, 32 px pills (.talk-opt.rec /
   .talk-opt); quiet, words only (.talk-opt.other, .talk-opt.no, .talk-link, .proj-link) */
.talk-link{border:0;border-radius:8px;padding:4px 6px;background:none;color:var(--c-quiet,#a0a0a0);font:inherit;font-size:13px;line-height:20px;cursor:pointer}
.talk-link:hover{color:#fff}
.talk-link.quiet{background:none;color:var(--c-quiet,#a0a0a0);padding:4px 6px}
.talk-link.quiet:hover{color:#fff}
.talk-link:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
/* 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(100%,var(--card-max,640px));align-self:flex-start}
/* the one card surface (p21 F1): #2e2f32, a 1 px #393a3d edge, r16, 12/14, 14/20 */
.talk-askcard{min-width:0;padding:12px 14px;border:1px solid var(--c-cardline,#393a3d);border-radius:16px;background:var(--c-card,#2e2f32);font-size:14px;line-height:20px}
.talk-askcard.done{opacity:.62;border-color:#36373a}
.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:14px;line-height:20px;color:#fff;margin-bottom:10px}
.talk-askopts{display:flex;flex-wrap:wrap;gap:8px}
.talk-opt{display:inline-flex;align-items:center;gap:8px;min-height:32px;border:1px solid var(--c-sec,#3d3e41);border-radius:999px;padding:6px 14px;background:var(--c-sec,#3d3e41);color:#fff;font:inherit;font-size:13px;line-height:18px;cursor:pointer;text-align:left}
.talk-opt:hover:not(:disabled){background:#444548;border-color:#444548}
.talk-opt.rec{background:#fff;color:#26272a;border-color:#fff}
.talk-opt.rec:hover:not(:disabled){background:#e6e6e6;border-color:#e6e6e6}
.talk-opt small{font-size:11px;opacity:.6}
.talk-opt.other{background:none;border-style:dashed;border-color:#48494c;color:var(--c-quiet,#a0a0a0)}
.talk-opt.other:hover:not(:disabled){background:none;border-color:#555;color:#fff}
.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}
/* a long option wraps inside its button (live-fix 2, 2026-09-24: options are shown and sent whole) */
.talk-opt{max-width:100%}
.talk-opt.long{border-radius:16px;line-height:18px;padding:6px 14px}
.talk-askyou{margin-top:8px;font-size:13px;color:#9a9a9a}
/* p21 A1 (SPEC 2.2, 2.7; Grok C.5, A.2): a question is a bubble like any reply (#36373a, r18, at most 640 or 85 %): who asks
   (an employee's ask: its name with a 6 px amber dot), the question 14/20, then its pills inside the same bubble; a field
   when it asks for something he types. Closed, and every record: one line in a bubble, the words #a2a2a2, a 22 px chip
   #3d3e41 / #a7a7a7 with a 6 px dot, 12 px from the right edge. */
.talk-askcard.talk-qb{align-self:flex-start;box-sizing:border-box;max-width:var(--bub,min(640px,85%));padding:8px 12px 12px;border:0;border-radius:18px;
  background:var(--c-agent,#36373a);color:var(--c-bubtext,#fff)}
.talk-qb .talk-askwho{display:flex;align-items:center;gap:6px;min-width:0;margin:0 0 2px;font-size:13px;line-height:20px;font-weight:600;color:#d6d6d6}
.talk-askdot{flex:none;width:6px;height:6px;border-radius:50%;background:#f5b73b}
.talk-qb .talk-askq{margin:0 0 10px}
/* p23: one grey line under a question that is no choice (a TAN is confirmed on his phone only) */
.talk-qnote{margin:-4px 0 10px;font-size:13px;line-height:18px;color:#a2a2a2}
.talk-qb .talk-askopts{gap:6px}
.talk-qb .talk-opt{background:#404144;border-color:#404144}
.talk-qb .talk-opt:hover:not(:disabled){background:#48494c;border-color:#48494c}
.talk-qb .talk-opt.rec{background:#fff;color:#26272a;border-color:#fff}
.talk-qb .talk-opt.rec:hover:not(:disabled){background:#e6e6e6;border-color:#e6e6e6}
.talk-qb .talk-opt.other{background:none;border-color:#525356}
.talk-qb .talk-opt.no{background:none;border-color:transparent;padding-left:8px;padding-right:8px}
.talk-askfield{display:flex;align-items:center;gap:6px;margin:0 0 8px;min-width:0}
.talk-askin{flex:1 1 auto;min-width:0;height:32px;box-sizing:border-box;padding:0 12px;border:1px solid #48494c;border-radius:16px;background:#2e2f32;color:#fff;
  font:inherit;font-size:14px;line-height:20px;outline:none}
.talk-askin::placeholder{color:#8a8a8a}
.talk-askin:focus{border-color:#6b8cff}
.talk-askfield>.talk-opt{flex:none}
.talk-askcard.talk-qb.done{display:flex;align-items:center;gap:10px;min-height:36px;padding:7px 12px;opacity:1;border:0}
/* Grok's question card (Albert, 2026-09-28: "just copy the design of questions" — his screenshot of Grok, measured): the card
   #393a3d r16 with the question 15/22 and an × at its right; the choices one list #404144 r12, a hairline #48494c round it and
   between rows; each row a 20 px letter tile (#4b4c4f, #9a9a9a), the choice 15/22 #f2f2f2 and its line 14/20 #9a9a9a; then
   "Type your own answer" in a field as dark as the page (#27282b, r10). The recommended choice is first, its tile white. */
.talk-askcard.talk-qb.talk-qg{width:min(100%,640px);max-width:var(--bub,min(640px,100%));padding:12px 12px 12px;border-radius:16px;background:#393a3d}
.talk-qg .talk-qhead{display:flex;align-items:flex-start;gap:10px;min-width:0;margin:0 0 10px}
.talk-qg .talk-qhead>.talk-askq{flex:1 1 auto;min-width:0;margin:0;padding:3px 0 0 4px;font-size:15px;line-height:22px;font-weight:500;color:#f2f2f2;text-wrap:pretty}
.talk-qx{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:0 -2px 0 0;padding:0;border:0;border-radius:8px;
  background:none;color:#8f8f8f;cursor:pointer}
.talk-qx:hover:not(:disabled){background:#434447;color:#fff}
.talk-qx:focus-visible{outline:2px solid #6b8cff;outline-offset:1px}
.talk-qlist{display:flex;flex-direction:column;min-width:0;border:1px solid #48494c;border-radius:12px;background:#404144;overflow:hidden}
.talk-qg .talk-opt.talk-qopt{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;row-gap:1px;align-items:center;width:100%;max-width:none;min-height:48px;
  box-sizing:border-box;margin:0;padding:10px 14px 10px 12px;border:0;border-top:1px solid #48494c;border-radius:0;background:none;color:#f2f2f2;
  font:inherit;font-size:15px;line-height:22px;font-weight:400;text-align:left;cursor:pointer}
.talk-qg .talk-opt.talk-qopt:first-child{border-top:0}
.talk-qg .talk-opt.talk-qopt::before{content:attr(data-key);grid-column:1;grid-row:1 / span 2;align-self:center;width:20px;height:20px;border-radius:5px;background:#4b4c4f;
  color:#9a9a9a;font-size:11px;line-height:20px;font-weight:600;text-align:center}
.talk-qg .talk-opt.talk-qopt>span{grid-column:2;min-width:0;overflow-wrap:anywhere}
.talk-qg .talk-opt.talk-qopt.two::after{content:attr(data-detail);grid-column:2;min-width:0;font-size:14px;line-height:20px;color:#9a9a9a;overflow-wrap:anywhere}
.talk-qg .talk-opt.talk-qopt.rec{background:none;color:#f2f2f2}
.talk-qg .talk-opt.talk-qopt.rec::before{background:#f2f2f2;color:#292a2d}
.talk-qg .talk-opt.talk-qopt:hover:not(:disabled){background:#454649;border-color:#48494c}
.talk-qg .talk-opt.talk-qopt:first-child:hover:not(:disabled){border-color:transparent}
.talk-qg .talk-opt.talk-qopt:focus-visible{outline:2px solid #6b8cff;outline-offset:-2px}
.talk-qg .talk-opt.talk-qopt:disabled{opacity:.5}
.talk-qg .talk-askopts{margin:10px 0 0}
.talk-qtype{position:relative;display:flex;align-items:center;min-width:0;margin:10px 0 0}
.talk-qg .talk-askin.talk-qin{flex:1 1 auto;height:40px;padding:0 44px 0 14px;border:1px solid #3e3f42;border-radius:10px;background:#27282b;color:#f2f2f2;font-size:15px}
.talk-qg .talk-askin.talk-qin::placeholder{color:#7d7d7d}
.talk-qg .talk-askin.talk-qin:focus{border-color:#56575a}
.talk-qsend{position:absolute;right:6px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-top:-14px;padding:0;border:0;
  border-radius:50%;background:#f2f2f2;color:#292a2d;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .12s}
.talk-qtype.has .talk-qsend{opacity:1;pointer-events:auto}
.talk-qsend:disabled{opacity:.4}
.talk-qsend:focus-visible{opacity:1;outline:2px solid #6b8cff;outline-offset:2px}
@media (max-width:600px){
  .talk-askcard.talk-qb.talk-qg{padding:10px}
  .talk-qg .talk-opt.talk-qopt{padding:9px 12px 9px 10px;column-gap:10px}
}
@media (prefers-reduced-motion:reduce){.talk-qsend{transition:none}}

.talk-qtext{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:20px;color:#a2a2a2}
.talk-chip{flex:0 0 auto;min-width:0;max-width:60%;display:inline-flex;align-items:center;gap:6px;height:22px;box-sizing:border-box;padding:0 9px;border-radius:11px;
  background:#3d3e41;color:#a7a7a7;font-size:12px;line-height:16px;white-space:nowrap}
.talk-chip::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.talk-chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* an email to check before it goes (chats-talk.js talk_mailNode, 2026-09-23): the head as a mail client shows it, then
   the body on a page of its own, drawn as the email it becomes — white, a mail client's type, real paragraphs and bullets */
.talk-mailwrap{width:100%}
.talk-mail{flex:1 1 auto;max-width:640px;box-sizing:border-box}
.talk-mailmeta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;margin:6px 0 10px;font-size:13.5px;line-height:1.45}
.talk-mailmeta dt{color:var(--faint)}
.talk-mailmeta dd{margin:0;color:#e6e6e6;overflow-wrap:anywhere}
.talk-mailmeta dd strong{font-weight:600;color:#f4f4f4}
/* p22 mail card: From is a list of his own mailboxes — a pill like the memory's "who" list, as wide as its address */
.talk-mailfrom{max-width:100%;height:24px;margin:-2px 0;padding:0 26px 0 10px;border:1px solid #434447;border-radius:999px;background-color:#343538;color:#e6e6e6;
  font:inherit;font-size:13px;cursor:pointer;text-overflow:ellipsis;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) 10px,calc(100% - 9px) 10px;background-size:4px 4px;background-repeat:no-repeat}
.talk-mailfrom:hover{border-color:#56575a}
.talk-mailfrom:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
.talk-mailnofrom{color:#f5b73b}
/* an address the brain worked out: a quiet mark beside it (p21 final fixes: grey with the amber dot of what waits for him, not an
   amber chip on the paper's head) */
.talk-mailguess{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:0 8px;border-radius:9px;background:#393a3d;color:#bdbdbd;font-size:12px;line-height:18px;vertical-align:1px}
.talk-mailguess::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#f5b73b}
/* on a phone the note goes under the address, not beside it (it broke over two lines there) */
@media (max-width:600px){.talk-mailguess{display:flex;width:max-content;max-width:100%;margin:3px 0 0}}
.talk-mailpaper{margin:0 0 12px;padding:16px 18px;border-radius:12px;background:#fff;color:#343538;
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow-wrap:anywhere}
.talk-mailpaper p{margin:0 0 12px}
.talk-mailpaper ul,.talk-mailpaper ol{margin:0 0 12px;padding-left:22px}
.talk-mailpaper li{margin:0 0 4px}
.talk-mailpaper>:last-child{margin-bottom:0}
.talk-mailpaper strong{font-weight:600}
.talk-mailpaper a{color:#0b57d0;text-decoration:underline}
/* as the box sends them (mailout.py fragment): a heading a larger bold line, a rule, code (2026-09-23 review) */
.talk-mailpaper .talk-mailh{margin:18px 0 8px;font-size:17px}
.talk-mailpaper hr{border:none;border-top:1px solid #dddddd;margin:18px 0}
.talk-mailpaper code{font:13.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:#f2f2f2;border-radius:4px;padding:0 4px}
/* a link whose words name another address than where it goes: where it goes, beside it — not part of the email */
.talk-mailhref{display:inline-block;margin-left:6px;padding:0 7px;border-radius:9px;background:#fff4d6;color:#8a5a00;font-size:12px;line-height:1.6;vertical-align:1px}
/* p21 E1 (SPEC 2.7): one frame for every email to check — the name line with the amber dot, From / To / Subject at 13/20, the
   paper cut at 200 px in the chat (--cut: the slot may leave less) with a fade and "Show the whole email" over its foot,
   then Send it (primary), Change something… (secondary), Don't send (quiet) */
.talk-mail .talk-mailwho{display:flex;align-items:center;gap:6px;min-width:0;margin:0 0 4px;font-size:13px;line-height:20px;font-weight:600;color:#d6d6d6}
.talk-mailwhotext{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.talk-mail .talk-mailmeta{gap:0 12px;margin:0 0 8px;font-size:13px;line-height:20px}
.talk-mailcut{position:relative;margin:0 0 12px}
.talk-mailcut>.talk-mailpaper{margin:0}
.talk-mailpaper[data-cut]{max-height:var(--cut,200px);overflow:hidden}
/* p21 final fixes (the final look, item 1: "the paper fade cuts a text line in half"): the cut falls a few px under a whole line
   (talk_mailSnap), so no line is sliced or dimmed; the fade covers only that empty band, and "Show the whole email" stands
   under the paper, not on its edge */
.talk-mailcut[data-over]>.talk-mailpaper{-webkit-mask-image:linear-gradient(#26272a calc(100% - 4px),transparent);mask-image:linear-gradient(#26272a calc(100% - 4px),transparent)}
.talk-mailmore{display:none;align-items:center;height:28px;margin:8px auto 0;padding:0 12px;border:1px solid #434447;
  border-radius:14px;background:#323336;color:#e6e6e6;font:inherit;font-size:13px;line-height:20px;white-space:nowrap;cursor:pointer}
.talk-mailmore:hover{background:#393a3d;color:#fff}
.talk-mailmore:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
.talk-mailcut[data-over]{display:flex;flex-direction:column}
.talk-mailcut[data-over]>.talk-mailmore{display:inline-flex;align-self:center}
.talk-mailopts{align-items:center;gap:6px}
.talk-mailopts .talk-opt.no{padding-left:8px;padding-right:8px}
/* a phone: the three answers on one row, so the paper keeps its room in the slot */
@media (max-width:600px){.talk-mailopts{gap:4px}.talk-mailopts .talk-opt{padding-left:12px;padding-right:12px}.talk-mailopts .talk-opt.no{padding-left:6px;padding-right:4px}}
.talk-mail.proj-reviewmail .talk-mailcut{margin-bottom:10px}
/* what became of an email (p21 E1, SPEC 2.3): a record — one line in a bubble, the words dimmed, the chip on the right; a
   click opens the email under it, read-only. Held with its employee asking: the chip is a link to that ask, in amber */
.talk-askcard.talk-qb.talk-mrec{flex:0 0 auto;flex-direction:column;align-items:stretch;justify-content:center;gap:0}
.talk-askcard.talk-qb.talk-rec{max-width:min(100%,640px)}
.talk-mrecline{display:flex;align-items:center;gap:10px;min-width:0;min-height:22px}
.talk-mrecbtn{flex:0 1 auto;display:flex;min-width:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.talk-mrecbtn:hover .talk-qtext{color:#e6e6e6}
.talk-mrecbtn:focus-visible,.talk-chipask:focus-visible{outline:2px solid #6b8cff;outline-offset:2px;border-radius:6px}
.talk-chip.talk-chipask{border:0;font:inherit;font-size:12px;line-height:16px;background:#2a2414;color:#f5b73b;cursor:pointer}
.talk-chip.talk-chipask:hover{background:#3a3016;color:#ffc95c}
.talk-mrecmore{min-width:0;padding:8px 0 4px}
.talk-mrecmore[hidden]{display:none}
.talk-mrecmore .talk-mailmeta{margin:0 0 8px;font-size:13px;line-height:20px}
.talk-mrecmore .talk-mailpaper{margin:0}
.talk-mrecmore .talk-mailstate{margin-top:8px;font-size:13px;line-height:20px;color:#a2a2a2}
.talk-mrecreport{margin-top:4px;font-size:13px;line-height:20px;color:#8f8f8f;overflow-wrap:anywhere}
.talk-mrec[data-open]{align-self:stretch;max-width:min(100%,640px)}
.talk-mailnote{margin:0 0 10px;font-size:13px;line-height:1.45;color:#f5b73b}
/* what the box says became of it once handed over (chats-talk.js talk_mailWords, 2026-09-24): not sent is said in amber */
.talk-mail[data-box="held"] .talk-mailstate,.talk-mail[data-box="waiting"] .talk-mailstate,.talk-mail[data-box="unsure"] .talk-mailstate{color:#f5b73b}
/* p28 (2026-11-05, the Vattenfall email): its fate is said in colour only where it means something — gone in green (the box's
   own "sent"), not gone in amber (its job is over and nothing says it went); Try again sits on the record's line */
.talk-mrec[data-fate="sent"] .talk-chip{color:#10a37f}
.talk-mrec[data-fate="notsent"] .talk-chip,.talk-mrec[data-fate="unsure"] .talk-chip{color:#f5b73b}
.talk-mrec[data-fate="notsent"] .talk-mailstate,.talk-mail[data-box="draft_left"] .talk-mailstate{color:#f5b73b}
.talk-mrecline>.talk-opt.talk-mretry,.talk-mrecline>.talk-opt.talk-mailundo{flex:none;min-height:24px;height:24px;padding:0 10px;font-size:12px;line-height:16px}
/* its files: a paperclip chip each, its name and its size; a press opens (downloads) it */
.talk-mailatts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;min-width:0}
.talk-mailatt{display:inline-flex;align-items:center;gap:7px;max-width:100%;min-width:0;height:30px;margin:0;padding:0 11px 0 9px;box-sizing:border-box;
  border:1px solid #393a3d;border-radius:15px;background:#2c2d30;color:#ececec;font:inherit;font-size:13px;line-height:18px;cursor:pointer}
.talk-mailatt:hover{background:#303134;border-color:#404144}
.talk-mailatt:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
.talk-mailclip{flex:none;color:#a7a7a7}
.talk-mailattw{display:inline-flex;align-items:baseline;gap:6px;min-width:0}
.talk-mailattname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.talk-mailattsize{flex:none;font-size:12px;color:#9a9a9a}
.talk-mailatt[data-state="loading"]{cursor:progress;opacity:.7}
.talk-mailatt[data-state="error"] .talk-mailattsize{color:#ff9b8f}
.talk-mrecmore .talk-mailatts{margin-bottom:8px}
/* pressed: "Sending in 5 s · Undo" where its buttons were, nothing handed over yet */
.talk-mailwait{align-items:center;gap:8px}
.talk-mailcount{font-size:13px;line-height:20px;color:#e6e6e6;font-variant-numeric:tabular-nums}
.talk-mailwaitsep{color:var(--faint)}
.talk-chip>.talk-mailcount{font-size:inherit;line-height:inherit;color:inherit}
.talk-mailheld{margin-top:6px;font-size:13px;line-height:1.45;color:#c8c8c8;overflow-wrap:anywhere}
.talk-mailrec{margin-top:4px;color:#f2f2f2;font-weight:600}
.talk-opt.no{background:none;border-color:transparent;color:var(--c-quiet,#a0a0a0)}
.talk-opt.no:hover:not(:disabled){background:none;border-color:transparent;color:#fff}
.talk-stopnote{font-size:12px;color:var(--faint)}
.talk-loaderr{font-size:14px;line-height:1.45}
.talk-loaderr .talk-link{flex:none}
/* ---------------------------------------------- what it is doing, at a glance (chats-talk.js, 2026-09-23)
   Albert: "dont put the robot in the chat too … make cooler chatting animations so the user always knows
   what's happening". A live row is one line: a small moving picture of the kind of thing being done, who
   (where it matters), the words — which roll over when they change — and a clock. Every motion here is
   transform or opacity (the verb's shimmer is base.css's own); none of it for a reader who asked for less. */
/* a line of the column's own width (at most 640): what grows in it (the sources coming into the search window) never
   changes its width */
.talk-live{display:flex;flex-direction:column;gap:0;align-self:flex-start;box-sizing:border-box;width:min(100%,var(--card-max,640px));min-width:0;padding:0}
.talk-act{display:flex;align-items:center;gap:8px;min-width:0;min-height:22px;font-size:14px;line-height:1.45;color:#bdbdbd}
/* a line's type (p21 F1): 13/20, #9a9a9a */
.talk-live>.talk-act{height:28px;font-size:13px;line-height:20px;color:var(--c-line,#9a9a9a)}
/* the picture's place is 16 px for every kind (p21 L1, SPEC 3.2: glyph 16, 8 px to the words), so the name and the words
   always start at the same x; the 18 px drawings are shown at 16 */
.talk-gs{flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px}
.talk-actwho{flex:none;color:#f2f2f2;font-weight:600;white-space:nowrap}
.talk-lane.warn .talk-actwho{color:#f5b73b}
.talk-actsep{flex:none;color:#6f6f6f;margin:0 -3px}
.talk-tick{display:grid;min-width:0;flex:0 1 auto;overflow:hidden}
.talk-tickline{grid-area:1/1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talk-tickline.in{animation:talk-tickin .22s ease-out both}
.talk-tickline.out{animation:talk-tickout .22s ease-in both;pointer-events:none}
.talk-tickline.shimmer.in{animation:talk-tickin .22s ease-out both,shimmer 2.2s linear infinite}
.talk-tickline.shimmer.out{animation:talk-tickout .22s ease-in both,shimmer 2.2s linear infinite}
@keyframes talk-tickin{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes talk-tickout{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-100%)}}
.talk-actclock{flex:none;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.talk-actclock:empty{display:none}
/* "Thinking · 6 s": the dot as far from the words as from the number */
.talk-actclock[data-fmt="s"]{margin-left:-4px}

/* p21 review-1 (item 9): the mark in front of a line, one small set (talk_mark): run = a ring with a turning arc, wait = an
   amber dot with a pulse, stand = a still grey dot, done = ✓. 16 px box, the mark itself 8-11 px, in the line's grey. */
.talk-glyph{position:relative;flex:none;display:inline-grid;place-items:center;width:16px;height:16px;color:#a9a9a9}
.tg-run{display:block;box-sizing:border-box;width:11px;height:11px;border-radius:50%;border:1.6px solid rgba(169,169,169,.26);border-top-color:#e6e6e6;
  animation:tg-spin .9s linear infinite}
@keyframes tg-spin{to{transform:rotate(1turn)}}
.tg-mark[data-mark="done"]{color:#5fbf8a}
.tg-wait{position:relative;width:8px;height:8px}
.tg-wait i{position:absolute;inset:0;border-radius:50%;background:#f5b73b}
.tg-wait b{position:absolute;inset:0;border-radius:50%;border:1.5px solid #f5b73b;animation:tg-pulse 1.6s ease-out infinite}
@keyframes tg-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}
.talk-glyph.still .tg-wait i{background:#6f6f6f}
.talk-glyph.still *{animation:none!important}
.talk-glyph.still .tg-wait b{display:none}

/* what was done, under a live line: faint, ticked, newest first */
.talk-trail{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.talk-live>.talk-trail{margin-left:24px}
.talk-trailrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;min-width:0;max-width:100%}
.talk-trailrows li{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;line-height:1.5;color:#7c7c7c}
.talk-trailrows li>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a step just finished rises in the way the live words do, a moment after them, so the two do not cross */
.talk-trailrows li.new{animation:talk-rise .28s ease-out .15s both}
@keyframes talk-rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.talk-check{flex:none;color:#5fbf8a;opacity:.85}
.talk-trailmore{border:0;background:none;padding:1px 0;color:#8a8a8a;font:inherit;font-size:12px;cursor:pointer}
.talk-trailmore:hover{color:#e8e8e8}
.talk-trailmore:focus-visible{outline:2px solid #6b8cff;outline-offset:2px;border-radius:4px}

/* a site's letter on a round tile: one of eight muted hues, by the site's name */
.talk-mono{flex:none;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;font-size:9px;font-weight:700;font-style:normal;
  line-height:1;color:#fff;background:#6b7c93;letter-spacing:0}
.talk-mono[data-h="0"]{background:#4a74c9}
.talk-mono[data-h="1"]{background:#8a63d2}
.talk-mono[data-h="2"]{background:#c4623f}
.talk-mono[data-h="3"]{background:#2f9a88}
.talk-mono[data-h="4"]{background:#b08428}
.talk-mono[data-h="5"]{background:#b8508a}
.talk-mono[data-h="6"]{background:#4f9444}
.talk-mono[data-h="7"]{background:#6b7c93}
.talk-mono.pop{animation:talk-pop .38s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes talk-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.talk-stack{flex:none;display:inline-flex;align-items:center}
/* the first on top: each letter keeps its whole face, the next tile tucks in under its edge (p21 S1: 16 px, 6 px under) */
.talk-stack>.talk-mono{position:relative;box-shadow:0 0 0 1.5px #27282b}
.talk-stack>.talk-mono+.talk-mono{margin-left:-6px}
.talk-stack>.talk-mono:nth-child(1){z-index:5}
.talk-stack>.talk-mono:nth-child(2){z-index:4}
.talk-stack>.talk-mono:nth-child(3){z-index:3}
.talk-stack>.talk-mono:nth-child(4){z-index:2}
.talk-stack>.talk-mono:nth-child(5){z-index:1}

/* the web, as it is searched: one compact card, then one line */
.talk-trace{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;max-width:100%}
.emp-feed>.talk-trace{align-self:flex-start;max-width:min(100%,640px)}
/* p21 L1 (SPEC 2.7 "Brain live line"): no card. The line "Searching the web · {query}" (28 px, 13/20) and under it the window,
   exactly three rows of 20 px, 24 px in and at most 640 wide in all; a set width, not one worked out from what is in it (it
   grew 133 px as the sources' titles came in, the 2026-09-23 review). A search that is over: one quiet line. */
.talk-src{box-sizing:border-box;width:min(100%,var(--card-max,640px));min-width:0;padding:0;border:0;background:none}
.talk-src[data-state="done"]{position:relative;width:auto;max-width:100%}
.talk-land{animation:talk-land .32s ease-out .14s both}
@keyframes talk-land{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.talk-srchead{display:flex;align-items:center;gap:8px;min-width:0;height:28px;font-size:13px;line-height:20px;color:var(--c-line,#9a9a9a)}
.talk-srcdone{height:20px;gap:6px;color:#7c7c7c}
.talk-srcdone .talk-check{margin-left:3px}
.talk-srcdone .talk-srccount{flex:none;color:#7c7c7c;font-weight:400}
.talk-srcdone .talk-srccount::before{content:"· "}
.talk-srcword{flex:none;white-space:nowrap}
.talk-srcq{min-width:0;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#7c7c7c}
.talk-srchead:not(.talk-srcdone)>.talk-srcq::before{content:"· "}
.talk-srcwin{position:relative;box-sizing:border-box;height:60px;width:min(calc(100% - 24px),616px);margin:0 0 4px 24px;overflow:hidden}
.talk-srcwin .talk-srcrow{height:20px}
/* p21 review-1 (item 10): three whole rows; more step up one row at a time (talk_reelStep) under a soft fade at the foot */
.talk-srcwin.masked{-webkit-mask-image:linear-gradient(to bottom,#26272a calc(100% - 12px),transparent 100%);
  mask-image:linear-gradient(to bottom,#26272a calc(100% - 12px),transparent 100%)}
.talk-srcreel{display:flex;flex-direction:column}
.talk-srcreel.scroll{transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.talk-srcrow{flex:none;display:flex;align-items:center;gap:7px;min-width:0;height:22px;font-size:12.5px;color:#8f8f8f;text-decoration:none}
a.talk-srcrow:hover .talk-srctitle,a.talk-srcrow:hover .talk-srchost{color:#f0f0f0}
a.talk-srcrow:focus-visible{outline:2px solid #6b8cff;outline-offset:1px;border-radius:4px}
.talk-srchost{flex:none;max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d2d2d2}
.talk-srctitle{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talk-srcrow.drop{animation:talk-drop .34s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 100ms)}
@keyframes talk-drop{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .talk-glyph,.talk-glyph *{animation:none!important}
  .tg-wait b{display:none}
  .talk-tickline,.talk-srcreel,.talk-srcrow,.talk-mono,.talk-trailrows li,.talk-land{animation:none!important}
  /* a window of real sources that no longer rolls can be scrolled by hand (the placeholders' is not) */
  .talk-src[data-state="reading"] .talk-srcwin{overflow-y:auto}
  .talk-pill.talk-pillin{animation:none}
}

/* the message box: Grok's rounded bar, a plus on the left, the white send on the right. p21 F1: one 44 px pill #3c3d40,
   exactly the column (.emp-dock>.island above), 13 px above the pane's bottom (the dock's gutters, employee.css); inside
   "+" 28 · the field · the approvals switch · send 28, each 28 px control 8 px off the bar's foot as the field grows */
html[data-look="chats"] .emp-frame .island{border:0;border-radius:22px;background:var(--c-composer,#3c3d40)}
/* inset: the dock clips what stands outside the bar (it has no room above the bar any more) */
html[data-look="chats"] .emp-frame .island:focus-within{box-shadow:inset 0 0 0 1px #48494c}
html[data-look="chats"] .emp-frame .island-row{align-items:flex-end;gap:8px;min-height:44px;padding:0 8px}
html[data-look="chats"] .emp-frame .island-row textarea{min-height:44px;padding:12px 4px;font-size:14px;line-height:20px}
html[data-look="chats"] .emp-frame .island-row>*:not(textarea){margin-bottom:8px}
html[data-look="chats"] .emp-frame .island-clip{width:28px;height:28px;border-radius:50%;color:#d0d0d0}
html[data-look="chats"] .emp-frame .island-clip:hover{background:#444548;color:#fff}
html[data-look="chats"] .emp-frame .island-send{width:28px;height:28px;margin-top:0;margin-left:0;margin-right:0;background:#fff;color:#26272a}
html[data-look="chats"] .emp-frame .island-send:disabled{background:#48494c;color:#808080;cursor:default}
html[data-look="chats"] .emp-frame .island-ask{border-bottom-color:#414245;border-radius:22px 22px 0 0}
/* Workflow ▾ (p21/features, chats-flow.js) is one more 28 px control of the bar, before the approvals switch (Auto ·
   Important · Every step) — no ring, grey words and caret, the bar's hover, so it reads as one of the bar's controls; its
   orange mark stays. A picked workflow keeps its orange pill with the ✕: that is something in the box, not a control. */
html[data-look="chats"] .emp-frame .island-row .chflow-wfbtn{height:28px;margin-right:0}
html[data-look="chats"] .emp-frame .island-row .chflow-wfbtn:not(.on){gap:5px;padding:0 7px 0 9px;border-color:transparent;color:#b8b8b8}
html[data-look="chats"] .emp-frame .island-row .chflow-wfbtn:not(.on):hover,
html[data-look="chats"] .emp-frame .island-row .chflow-wfbtn:not(.on)[aria-expanded="true"]{background:#444548;color:#fff}
html[data-look="chats"] .emp-frame .island-row .chflow-wfbtn:not(.on)>svg:last-child{color:#8a8a8a}
html[data-look="chats"] .emp-frame .island-row .chflow-wfbtn:not(.on):hover>svg:last-child,
html[data-look="chats"] .emp-frame .island-row .chflow-wfbtn:not(.on)[aria-expanded="true"]>svg:last-child{color:#d0d0d0}
/* a hint never wraps under the 44 px bar's one line (a phone cut "The team is on it. Type to add to the job." in half) */
html[data-look="chats"] .emp-frame .island-row textarea::placeholder{white-space:nowrap;overflow:hidden}

/* ----------------------------------------------------------------- the panel (p21 F2, SPEC 3.5)
   His choice, never the work's: docked beside the chat at >= 1280 px (clamp(320px, 24vw, 440px), dragged by its left
   edge; the chat keeps at least 560 px), over the chat with a scrim at 801-1279 px (the panel button stays in the head),
   a bottom sheet with a handle at <= 800 px. Screen mode has no head; sources, report and details have
   "‹ title ×". Grok's panel: #26272a, a 1 px #2d2e31 edge, one screen card, a 12 px #8a8a8a caption under it. */
html[data-look="chats"] .chats-panel{grid-column:2;grid-row:1/span 2;width:var(--chats-pw);max-width:calc(100vw - var(--strip,68px) - var(--rail) - 560px);min-width:0;min-height:0;
  display:flex;flex-direction:column;border-left:1px solid #2d2e31;background:#26272a;outline:none}
.chats-pbody{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:8px 16px 20px;scrollbar-width:thin}
.chats-handle{display:none}
.chats-phead{flex:none;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px}
.chats-phead[hidden]{display:none}
.chats-ptitle{flex:1;min-width:0;margin:0;font-size:14px;font-weight:600;line-height:20px;color:#ececec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chats-panel[data-mode]:not([data-mode="screen"])>.chats-pbody{padding-top:0}
/* p21 S1 (SPEC 2.8): Sources — "Used in the answer", then "Also looked at": the site's letter, the title on one line, "site ·
   the page in words", one line of what it says; each row a link to a new tab. Report: the whole report, links as links. */
.chats-srcsec{display:flex;flex-direction:column;gap:2px;min-width:0}
.chats-srchead{margin:4px 0 4px;font-size:12px;font-weight:600;line-height:16px;color:#8c8c8c}
.chats-srclist{display:flex;flex-direction:column;min-width:0}
.chats-src{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:7px 8px;margin:0 -8px;border-radius:10px;color:inherit;text-decoration:none}
.chats-src:hover{background:#2c2d30}
.chats-src:focus-visible{outline:2px solid #6b8cff;outline-offset:-2px}
.chats-src>.talk-mono{margin-top:2px}
.chats-srctxt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.chats-srctitle,.chats-srcwhere,.chats-srcpre{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chats-srctitle{font-size:14px;line-height:20px;color:#ececec}
.chats-srcwhere{font-size:12px;line-height:17px;color:#8c8c8c}
.chats-srcpre{font-size:12.5px;line-height:18px;color:#a8a8a8}
.chats-src:hover .chats-srctitle{text-decoration:underline;text-decoration-color:#666;text-underline-offset:2px}
.chats-srcmore{align-self:flex-start;padding:4px 0;border:0;background:none;color:#a0a0a0;font:inherit;font-size:13px;cursor:pointer}
.chats-srcmore:hover{color:#fff}
.chats-report{min-width:0;font-size:14px;line-height:20px;color:#dcdcdc;overflow-wrap:anywhere}
.chats-report .md{font-size:14px;line-height:20px;color:inherit;max-width:none}
.chats-report a,.chats-report a.md-link{color:#ececec;text-decoration:underline;text-decoration-color:#666;text-underline-offset:2px}
.chats-pscrim{display:none}
/* 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:#48494c}
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}
/* over the chat: 801-1279 px from the right, the phone from the bottom; the chat's column stays where it was */
@media (max-width:1279px){
  html[data-look="chats"] .emp-room[data-mode="team"]{grid-template-columns:minmax(0,1fr)}
  html[data-look="chats"] .emp-room[data-mode="team"]>.chats-grip{display:none}
  html[data-look="chats"] .chats-panel{position:absolute;z-index:31;grid-column:1/-1;grid-row:1/-1;top:0;right:0;bottom:0;width:min(400px,calc(100% - 48px));max-width:none;
    border-left:1px solid #343538;background:#28292c;box-shadow:-16px 0 48px rgba(0,0,0,.55);animation:chats-pin .2s ease-out}
  html[data-look="chats"] .emp-room[data-panel]>.chats-pscrim{display:block;position:absolute;inset:0;z-index:30;background:rgba(0,0,0,.5);animation:fade-in .2s ease-out}
}
@keyframes chats-pin{from{transform:translateX(28px);opacity:.5}to{transform:none;opacity:1}}
@media (max-width:800px){
  html[data-look="chats"] .chats-panel{top:auto;left:0;right:0;width:auto;height:min(85vh,calc(100% - 24px));border-left:0;border-top:1px solid #343538;
    border-radius:16px 16px 0 0;box-shadow:0 -16px 48px rgba(0,0,0,.6);animation:chats-pup .22s ease-out}
  html[data-look="chats"] .chats-handle{display:block;flex:none;position:relative;height:22px;cursor:grab;touch-action:none}
  html[data-look="chats"] .chats-handle::after{content:"";position:absolute;left:50%;top:9px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:#48494c}
  html[data-look="chats"] .chats-panel>.chats-pbody{padding-top:4px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  html[data-look="chats"] .chats-phead{height:44px}
}
@keyframes chats-pup{from{transform:translateY(48px);opacity:.5}to{transform:none;opacity:1}}
.chats-panel.chats-dragging{animation:none;transition:none;user-select:none}
@media (prefers-reduced-motion:reduce){
  html[data-look="chats"] .chats-panel,html[data-look="chats"] .emp-room[data-panel]>.chats-pscrim{animation:none}
  .chats-open{transition:none}
}
/* a screen card: 16:10 at the panel's width; "Open" shows on hover (always on a touch screen) */
.chats-shot{position:relative;aspect-ratio:16/10;display:grid;place-items:center;border-radius:12px;overflow:hidden;background:#2e2f32;cursor:pointer}
.chats-shot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#26272a}
.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);
  opacity:0;transition:opacity .15s ease}
.chats-open:hover{background:#393a3d}
/* the live screen (chats_miniLive): over the still, shown from its first frame; the card stays the click, not the screen */
.chats-liveview{position:absolute;inset:0;background:#26272a;opacity:0;transition:opacity .2s ease;pointer-events:none}
.chats-liveview>div{background:transparent!important}
.chats-shot[data-live="1"]>.chats-liveview{opacity:1}
.chats-shot[data-live="1"]>.chats-noshot{display:none}
.chats-shot[data-live="1"][data-idle]{aspect-ratio:16/10;height:auto}
.chats-open{z-index:1}
.chats-shot:hover>.chats-open,.chats-shot:focus-within>.chats-open,.chats-screen:hover .chats-open,.chats-screen:focus-visible .chats-open{opacity:1}
@media (hover:none){.chats-open{opacity:1}}
/* no picture yet: the kind of work it does and three words; Open under them, never over them */
.chats-noshot{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 16px;font-size:13px;line-height:20px;color:#8a8a8a;text-align:center}
.chats-noglyph{display:grid;place-items:center;min-height:18px;color:#9a9a9a}
.chats-shot[data-has="1"]>.chats-noshot{display:none}
.chats-noglyph[hidden]{display:none}
/* no picture: Open stands under the words (at the card's foot), so it never covers them */
.chats-shot[data-has="0"]>.chats-open{top:auto;bottom:14px;transform:translateX(-50%)}
/* p21 final fixes (the final look, item 14): no picture long after its work began — a short line, not a big empty box */
.chats-shot[data-has="0"][data-idle]{aspect-ratio:auto;height:44px}
.chats-shot[data-has="0"][data-idle]>.chats-noshot{flex-direction:row;gap:8px}
.chats-shot[data-has="0"][data-idle]>.chats-open{display:none}
.chats-cap{margin-top:-2px;font-size:12px;line-height:16px;color:#8a8a8a;text-align:center}
.chats-now{display:flex;flex-direction:column}
.chats-nowline{padding:0 18px;font-size:13px;line-height:18px;color:#8b8b8b;text-align:center;text-wrap:balance}
/* the chief's panel: the one working, big; under it one row per employee at work or waiting */
.chats-screen{display:flex;flex-direction:column;gap:10px;width:100%;padding:0;background:none;border:0;color:inherit;cursor:pointer;text-align:left;min-width:0;font-family:inherit}
.chats-screen:focus-visible{outline:none}
.chats-screen:focus-visible .chats-shot{outline:2px solid #6b8cff;outline-offset:2px}
.chats-bigwrap{display:flex;flex-direction:column}
.chats-bigwrap[hidden]{display:none}
.chats-rows{display:flex;flex-direction:column;gap:2px}
.chats-rows[hidden]{display:none}
.chats-grp{display:flex;align-items:center;gap:6px;min-width:0;height:32px;margin-top:4px;padding:0 8px;font-size:13px;line-height:20px;color:#9a9a9a}
.chats-grp:first-child{margin-top:0}
.chats-grp .proj-panelname{color:#d6d6d6;font-weight:600}
.chats-grp .proj-link{flex:none;font-size:13px;font-weight:500;text-decoration:none;color:#a0a0a0}
.chats-grp .proj-link:hover{color:#fff}
/* p21 final fixes: a group row that does not fit its line wraps between words, as a sentence ("Pre-seed investors for Supabot ·
   starting… · Open ›"), never "Pre-seed investors for Su… · startin…" */
.chats-grp{display:block;height:auto;min-height:32px;padding-top:6px;padding-bottom:6px}
.chats-grp .proj-panelname{white-space:normal;overflow:visible}
.chats-grp .proj-panelsep{margin:0}
.chats-grp .proj-panelwords{white-space:nowrap;color:#9a9a9a}
.chats-grp .proj-link{display:inline;padding:0}
.chats-mate{display:flex;align-items:center;gap:10px;width:100%;min-width:0;padding:6px 8px;border:0;border-radius:10px;background:none;color:inherit;text-align:left;cursor:pointer;font-family:inherit}
.chats-mate:hover{background:#2c2d30}
.chats-mate .chats-txt{gap:0}
.chats-mate .chats-name{font-size:13.5px;line-height:18px;font-weight:500}
.chats-mate .chats-line{font-size:12px;line-height:16px;color:#9a9a9a}
.chats-sdot{flex:none;width:6px;height:6px;margin-right:2px;border-radius:50%;background:var(--ok)}
.chats-mate[data-kind="warn"] .chats-sdot{background:var(--warn)}
.chats-thumb{flex:none;width:64px;height:40px;border-radius:6px;overflow:hidden;background:#292a2d}
.chats-thumb>img{display:block;width:100%;height:100%;object-fit:contain;background:#26272a}
.chats-thumb.has-mc{display:grid;place-items:center}
.chats-thumb.has-mc>.mc{width:36px;height:36px}
.chats-rowsep{height:1px;margin:6px 8px;background:#323336}
/* p21 review-1 (item 6): "and N more" is a link that shows them all */
.chats-rowsmore{align-self:flex-start;margin:0;padding:2px 8px;border:0;border-radius:6px;background:none;font:inherit;font-size:13px;line-height:20px;
  color:#d6d6d6;text-decoration:underline;text-decoration-color:#666;text-underline-offset:3px;cursor:pointer}
.chats-rowsmore:hover{color:#fff;text-decoration-color:#bdbdbd}
.chats-rowsmore:focus-visible{outline:2px solid #6b8cff;outline-offset:1px}
.chats-rowsmore[hidden]{display:none}
.chats-none{margin:auto 0;padding:24px 18px;font-size:13px;line-height:18px;color:#8b8b8b;text-align:center;text-wrap:balance}
.chats-none[hidden]{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:#26272a;font-family:inherit;font-weight:600;font-size:13.5px;
  cursor:pointer;white-space:nowrap;flex:none}
.mem-pill.sec{background:#393a3d;color:#ececec;font-weight:500}
.mem-choose:hover,.mem-pill:hover{filter:brightness(.92)}
.mem-pill.sec:hover{background:#414245;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:#28292c;border:1px solid #303134;overflow:hidden}
.mem-row{display:flex;align-items:center;gap:12px;min-height:54px;padding:9px 14px;border:0;border-top:1px solid #2e2f32;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:#2c2d30}
.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:#323336;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:#323336;color:#ececec;font:inherit;font-size:13.5px;outline:none}
.mem-token input:focus{box-shadow:0 0 0 1px #48494c}
.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:#28292c;border:1px dashed #3e3f42;
  cursor:pointer;transition:border-color .12s ease,background .12s ease}
.mem-drop:hover{border-color:#4b4c4f}
.mem-drop.over{border-color:#8c8c8c;background:#2d2e31}
.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:#343538;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:#343538;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:#26272a;border-top:1px solid #292a2d}
.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 #343538;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 #48494c}
.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 #343538}
.mg-zbtn:hover{background:#393a3d;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 #343538;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:#3d3e41;color:#fff;box-shadow:0 0 0 1px #48494c}
.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 #28292c;border-top:1px solid #292a2d;background:#26272a}
.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:#2c2d30;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}
/* a note's pictures, under the line that shows them (chats_markdown) */
.mg-pics{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.mg-pic{display:block;max-width:min(100%,360px);max-height:220px;border-radius:8px;background:#26272a;box-shadow:0 0 0 1px #38393c}
.mg-picname{font-size:12.5px;color:#7c7c7c}

/* ---------------------------------------------------------------- Connect tools */
.tpage.cn{overflow-y:auto;height:100%;border-top:1px solid #292a2d}
.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:#28292c;border:1px solid #303134;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}
/* the name keeps at least 200 px; below that the buttons go to a line of their own under it (bug hunt,
   2026-09-23: beside it they left the name 0 px at 390 and 88 px in the two-column grid) */
.cn-login{flex-wrap:wrap;row-gap:4px}
.cn-login>.mem-txt{flex:1 1 200px}
.cn-login .mem-line{white-space:normal;overflow-wrap:anywhere}
.cn-loginacts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:2px;margin-left:auto;max-width:100%}
.cn-fail{gap:12px}
.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 #434447;border-radius:10px;background:#2c2d30;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:#333437;border:1px solid #404144;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}
/* p26: "site · email" with the site bold, a group's name over its logins, the sign-up badge, search */
.cn-login .mem-name.cn-loginname{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.cn-loginname .emp-login-site{font-weight:600;color:#f4f4f4}
.cn-loginname .emp-login-user{font-weight:400;color:#a9a9a9}
.cn-badge{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:rgba(245,183,59,.16);color:#f5b73b;
  font-size:11px;font-weight:500;line-height:17px;vertical-align:1px;white-space:nowrap}
.cn-group{margin:0;padding:12px 14px 6px;border-top:1px solid #2e2f32;font-size:12px;font-weight:600;letter-spacing:.01em;color:#8f8f8f}
.cn-group:first-child{border-top:0}
.cn-group+.mem-row{border-top:0}
.cn-login+.cn-group{margin-top:2px}
.cn-auth{flex-basis:100%;padding-left:44px}
.cn-card>.emp-login-find{margin:0;border:0;border-radius:999px;background:#2c2d30;box-shadow:0 0 0 1px #343538;color:#8c8c8c}
.cn-card>.emp-login-find:focus-within{box-shadow:0 0 0 1px #48494c}
/* 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:#2f3033;color:#ececec}
.chats-place[aria-current="page"]{background:#3c3d40;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 #3e3f42;border-radius:12px;
  background:#303134;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:#3d3e41;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 #393a3d;border-radius:14px;background:#2f3033;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:#353639;border-color:#414245}
html[data-look="chats"] .chats-conn[aria-current="page"]{background:#3c3d40;border-color:#47484b}
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:#26272a}
.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:#3d3e41;box-shadow:0 0 0 2px #2f3033}
.chats-connlogo:first-child{margin-left:0}
html[data-look="chats"] .chats-conn:hover .chats-connlogo{box-shadow:0 0 0 2px #353639}
html[data-look="chats"] .chats-conn[aria-current="page"] .chats-connlogo{box-shadow:0 0 0 2px #3c3d40}
.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:#2e2f32;box-shadow:inset 0 0 0 1px #38393c}

/* --------------------------------------------------------------- Teach employee */
.tpage.tc{display:grid;grid-template-columns:minmax(0,1fr) 360px;overflow:hidden;height:100%;border-top:1px solid #292a2d}
.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:#303134;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:#323336;box-shadow:0 0 0 1px #38393c}
.tc-ask:focus-within{box-shadow:0 0 0 1px #48494c}
.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:#2a2b2e}
.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:#393a3d;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:#292a2d;box-shadow:0 0 0 1px #343538}
.tc-thumb>img{display:block;width:100%;height:100%;object-fit:contain;background:#26272a}
.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:#28292c;border:1px solid #303134;
  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 #28292c;background:#26272a}
.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:#26272a}
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 #2c2d30}
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:#333437;color:#ddd;cursor:pointer}
.chats-deskclose:hover{background:#3d3e41;color:#fff}
/* A phone: the name and the X on the first row, the question under them at the full width, its buttons wrapping
   under it. In one row the buttons (flex:none, employee.css) squeezed the question to 0 px and ran past the window
   under the X — at 390, 480 and 600 wide only the hand showed and "It's solved" lay beneath the X (2026-09-23). */
@media (max-width:800px){
  .chats-deskbar{flex-wrap:wrap;padding:8px 10px 0 16px}
  .chats-deskname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  html[data-look="chats"] .chats-deskbar>.emp-strip{order:1;flex:1 1 100%;flex-wrap:wrap;gap:6px 10px;min-height:0;margin:8px -10px 0 -16px;padding:10px 16px 12px}
  html[data-look="chats"] .chats-deskbar>.emp-strip>div:not(.btnrow){flex:1 1 0}
  html[data-look="chats"] .chats-deskbar>.emp-strip>.btnrow{flex:1 1 100%;flex-wrap:wrap}
}

/* ------------------------------------------------------------------- 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}
}
/* p21 H1: 901-1000 px, the one row gets tighter (smaller tab buttons, smaller gaps), so "Chief of staff" still fits beside
   the centred tabs at 901 px (it ended in "…" at 57 px) */
@media (min-width:901px) and (max-width:1000px){
  html[data-look="chats"] .page-head.chats-chathead{column-gap:8px;padding:0 10px}
  html[data-look="chats"] .chats-chathead .page-title-row{padding-left:0}
  html[data-look="chats"] .chats-chathead .look-tabs>button{padding:0 10px;font-size:12.5px}
}
/* p21 H1 (SPEC 3.6): the chat's head in two rows at 900 px and less: the tabs, then [robot][name] … [⋯][panel]; with the
   list a drawer (<= 800 px) its button leads the first row. A phone keeps these two rows (it had a third, the tools). */
@media (max-width:900px){
  html[data-look="chats"] .page-head.chats-chathead{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tabs tabs" "title tools";padding:8px 12px 8px 18px}
  html[data-look="chats"] .chats-chathead .page-title-row{padding-left:0}
}
@media (max-width:800px){
  html[data-look="chats"] .page-head.chats-chathead{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"side tabs tabs" "title title tools"}
}
@media (max-width:600px){
  html[data-look="chats"] .page-head.chats-chathead{padding:8px 12px}
}
@media (max-width:1100px){
  .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}
  /* the page scrolls here, so its halves must not shrink: they did, and the pictures overlapped
     a third of each other and the list was cut off at 390 px (2026-09-23) */
  .tc-main,.tc-side{flex:none}
  .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 #303134,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"] .app[data-chats-side="open"]>.chats-scrim{display:block;position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.45);animation:fade-in .2s 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}
  /* 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}
  /* never wider than its cell: it ran over the list button at 360 px (hunt, 2026-09-23) */
  html[data-look="chats"] .look-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
}
@media (max-width:420px){
  /* the short names (chats.js CHATS_PLACES): Employees · Memory · Teach; the full one stays the
     button's text and its aria-label */
  html[data-look="chats"] .look-tabs>button[data-short]{font-size:0}
  html[data-look="chats"] .look-tabs>button[data-short]::after{content:attr(data-short);font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  html[data-look="chats"] #chats-side{transition:none}
  html[data-look="chats"] .app[data-chats-side="open"]>.chats-scrim{animation: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;padding:clamp(20px,4vw,56px);background:var(--bg)}   /* centred as base.css .gate: "safe", so it scrolls */
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:#2c2d30;
  border:1px solid #3d3e41;text-align:left;padding:0 15px;font-size:15px}
html[data-look="chats"] .gate .f:focus{border-color:#56575a;background:#2e2f32}
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:#27282b;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:#48494c;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:#353639;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:#353639;
  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}
  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}
}

/* p21 review-1 (item 9): work that lives in another chat is a line like the others: 28 px, its mark, one line */
.talk-mirror{display:flex;align-items:center;gap:8px;min-height:28px;font-size:13px;color:var(--c-line,#9a9a9a);align-self:flex-start;max-width:min(100%,var(--card-max,640px));
  line-height:20px;white-space:nowrap;min-width:0}
.talk-mirrorsay{flex:none}
.talk-mirror .talk-link{min-width:0;overflow:hidden;text-overflow:ellipsis;padding:4px 0;font-size:13px}

/* 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:#38393c;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:#38393c;color:#9a9a9a}
/* a failed job is never grey "done" (2026-09-23: the list said done while the chat said "That did not work") */
.chats-tag[data-kind="not finished"]{background:rgba(255,95,87,.14);color:var(--bad)}

/* the opening of an empty chat: the 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(100%,640px);margin:auto 0}
.chats-open2sub{font-size:13.5px;color:var(--faint);line-height:1.5;max-width:520px}
.chats-open2row{display:flex;flex-wrap:wrap;gap:8px}
.chats-opener{border:1px solid #3d3e41;background:#2e2f32;color:#d6d6d6;border-radius:999px;padding:8px 14px;font-size:13px;cursor:pointer;font-family:inherit;text-align:left}
.chats-opener:hover{background:#333437;border-color:#48494c;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}

/* Settings on a phone (bug hunt, 2026-09-23: at 390 px base.css's 180 px nav left the page 160 px, so every
   value, the organization switcher and Add a person were cut off). Company and Account become tabs above the
   page, as the schema sheet does (ontoschema.css), and each row's label goes over its value. */
@media (max-width:600px){
  .scrim:has(>.sheet[aria-label="Settings"]){padding:12px}
  .sheet[aria-label="Settings"]{height:calc(100dvh - 24px);max-height:720px}
  .sheet[aria-label="Settings"] .sheet-head{padding:0 var(--s-xl)}
  .sheet[aria-label="Settings"] .sheet-body{flex-direction:column}
  .sheet[aria-label="Settings"] .sheet-nav{width:auto;flex:none;display:flex;gap:4px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
  .sheet[aria-label="Settings"] .sheet-nav .rowbtn{width:auto;flex:none}
  .sheet[aria-label="Settings"] .sheet-pane{padding:var(--s-xl)}
  .sheet[aria-label="Settings"] .statusrow{flex-wrap:wrap;gap:2px var(--s-l)}
  .sheet[aria-label="Settings"] .statusrow .k{width:100%}
  .org-sheet .org-emps{padding:0 var(--s-xl)}
  .org-sheet .org-holder{min-width:0;max-width:100%}
}
/* no employees yet, in the chief of staff's panel (2026-09-23) */
.chats-noteam{padding:6px 12px 10px}

/* ----------------------------------------------------------------- approvals (chats-talk.js talk_ap*, 2026-09-23)
   Albert: "3 approve settings … it needs to be quick changeable"; 2026-09-25, approving the redesign: "i want the old
   selector for important, auto etc" (H1's one chip "Ask me: Important ▾" went). The switch sits in the message box before
   Send, Workflow ▾ before it: the three glyphs always; their names while the field keeps room to type (about 180 px) —
   all three in a wide box, the lit one's in a middle one, none in a narrow box or on a phone, where each button's title and
   aria-label still say it in words. Lit: Auto green, Important white, Every step amber — how much it stops you. The card
   for an OK draws the employee's screen with where it will act ringed. */
html[data-look="chats"] .emp-frame .island{container-type:inline-size}
.talk-apsw{flex:none;display:inline-flex;align-items:center;gap:2px;margin:0 6px 0 4px;padding:2px;border-radius:999px;background:#303134}
.talk-apopt{display:inline-flex;align-items:center;gap:5px;height:28px;min-width:30px;justify-content:center;padding:0 8px;border:0;border-radius:999px;
  background:none;color:#8f8f8f;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.talk-apopt:hover{color:#e6e6e6;background:#393a3d}
.talk-apopt.on{background:#444548;color:#fff}
.talk-apopt.on[data-mode="auto"]{color:#86e0a8}
.talk-apopt.on[data-mode="every"]{color:#f5b73b}
.talk-apopt:not(.on) .talk-aplabel{display:none}
.talk-apsw.busy .talk-apopt.on{opacity:.75}
/* In the 44 px bar the row's gap spaces it; 32 px tall and 6 px off the bar's foot, its middle is the 28 px controls'. The
   names by the box's width (measured 2026-09-25: "+", Workflow ▾ 113 px, the gaps and Send take 217 px; the switch is 258
   px with three names, 162 with the lit one's, 85 with none): all three from 655 px (1440, 1100 and 1280 beside the
   docked panel, and 960: 656), the lit one's from 561 px (940-880), none at 560 px and under (860, 820, a phone) — the
   field keeps 180 px or more. A picked workflow's chip is up to 220 px: in a box under 760 px the names then step down one
   (a 760 px box keeps all three, the field 178). */
.island .talk-apopt{padding:0 7px}
html[data-look="chats"] .emp-frame .island-row>.talk-apsw{margin:0 0 6px}
@container (min-width:655px){.island-row:not(:has(.chflow-wfbtn.on)) .talk-apopt:not(.on) .talk-aplabel{display:inline}}
@container (min-width:760px){.island .talk-apopt:not(.on) .talk-aplabel{display:inline}}
/* a narrow box and a phone's: the three icons only */
@container (max-width:654px){.island-row:has(.chflow-wfbtn.on) .talk-apopt .talk-aplabel{display:none}}
@container (max-width:560px){.island .talk-apopt .talk-aplabel{display:none}.island .talk-apopt{min-width:27px;padding:0 6px}.island .talk-apsw{gap:0}}
/* ...and in a box of 600 px and under (820-880 px beside the list, 540-600 px) the picked workflow's chip is at most 140 px,
   its name cut with "…" (its title says it whole): at 220 it left the field about 100 px beside the three icons (p21 review
   2026-09-26: 107 px at 820, 99 at 540), at 140 the field keeps about 180 */
@container (max-width:600px){html[data-look="chats"] .emp-frame .island-row .chflow-wfbtn.on{max-width:140px}}
/* Settings → Company: one line */
.talk-aprow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 14px;padding:10px 12px;border:1px solid var(--line2);border-radius:12px}
.talk-aprowtext{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px;color:var(--muted)}
.talk-aprowtext b{color:var(--text);font-size:14px}
.talk-aprow .talk-apsw{margin:0}
.talk-aprow .talk-aplabel{display:inline!important}

/* the OK card (p21 A1, SPEC 2.7, V7, L13): the one card surface, no amber on it (the name line's dot says it waits); the
   action, directly the rest of its sentence, its screen at 288 × 180 (on a phone min(288 px, the card − 28 px) at 16:10),
   then [Approve ⏎] [Don't do it] · Don't ask again for this job · Stop this job. Answered, one closed line (.talk-aprec). */
.talk-ask.talk-apwrap{width:min(100%,640px);max-width:none}
.talk-apcard{flex:1;min-width:0}
.talk-apcard .talk-apwho{display:flex;align-items:center;gap:6px;min-width:0;margin:0 0 2px;font-size:13px;line-height:20px;font-weight:600;color:#d6d6d6}
.talk-apname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.talk-apact{margin:0;font-size:14px;font-weight:600;line-height:20px;color:#f0f0f0;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.talk-apq{margin:0;font-size:13px;line-height:20px;color:#bdbdbd;overflow-wrap:anywhere}
/* p23 S12: a payment's card — the values it binds, in one small table (dl), then the one line of what the OK means */
.talk-appay{margin:8px 0 4px}
.talk-paytbl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 12px;margin:0;font-size:13px;line-height:19px}
.talk-paytbl dt{color:#9a9a9a}
.talk-paytbl dd{margin:0;color:#f0f0f0;overflow-wrap:anywhere}
.talk-paymono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
.talk-payamt{font-weight:700}
.talk-paynote{margin:6px 0 0;font-size:12px;line-height:17px;color:#bdbdbd}
.talk-paynote.bad{color:#ffb020}
/* a payment's card: the values beside a thumbnail of the bank's page (a click opens it large), so the buttons stay in the
   slot's 360 px; a card with no picture yet shows none */
.talk-apcard.talk-apcardpay{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
.talk-apcard.talk-apcardpay>*{grid-column:1/-1}
.talk-apcard.talk-apcardpay>.talk-appay{grid-column:1}
.talk-apcard.talk-apcardpay>.talk-apshot{grid-column:2;align-self:start;width:128px;min-width:0;margin:8px 0 6px}
.talk-apcard.talk-apcardpay>.talk-apshot:disabled{display:none}
.talk-apcard.talk-apcardpay .talk-apnote{display:none}
.talk-apshot{position:relative;display:block;width:min(288px,100%);max-width:none;aspect-ratio:16/10;margin:8px 0 10px;padding:0;border:1px solid #404144;border-radius:10px;
  overflow:hidden;background:#27282b;cursor:zoom-in}
.talk-apshot:disabled{cursor:default}
.talk-apshot img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill}
.talk-apbox{position:absolute;box-sizing:border-box;min-width:6px;min-height:6px;border:2px solid #ffb020;border-radius:5px;pointer-events:none;
  box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 0 9999px rgba(0,0,0,.22)}
.talk-apbox::after{content:"";position:absolute;inset:-6px;border:2px solid rgba(255,176,32,.75);border-radius:8px;animation:talk-appulse 1.3s ease-out infinite}
@keyframes talk-appulse{0%{transform:scale(.9);opacity:.95}100%{transform:scale(1.22);opacity:0}}
.talk-apcard.done .talk-apbox::after{animation:none;opacity:0}
.talk-apnone{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#7c7c7c;font-size:12px}
.talk-apnote{position:absolute;left:6px;right:6px;bottom:6px;padding:3px 7px;border-radius:7px;background:rgba(10,10,10,.85);color:#e0e0e0;
  font-size:11.5px;line-height:1.35;text-align:left}
.talk-apshot.behind img{opacity:.5}
.talk-apopts{align-items:center;gap:6px}
.talk-apopts .talk-opt.other,.talk-apopts .talk-opt.no{border:0;background:none;padding-left:8px;padding-right:8px;color:var(--c-quiet,#a0a0a0)}
.talk-apopts .talk-opt.other:hover:not(:disabled),.talk-apopts .talk-opt.no:hover:not(:disabled){background:none;color:#fff}
.talk-apkey{padding:0 3px;border:1px solid currentColor;border-radius:4px;font-size:10.5px;line-height:14px;opacity:.55}
@media (hover:none),(max-width:600px){.talk-apkey{display:none}}
.talk-apcard .talk-apyou{margin-top:6px;font-size:13px;line-height:20px}
.talk-aprec{display:none}
/* answered: the same card, one closed line (a record's look), until the next OK opens it again */
.talk-apcard.talk-apclosed{display:flex;flex-direction:column;justify-content:center;min-height:36px;box-sizing:border-box;padding:7px 12px;border:0;border-radius:18px;
  background:var(--c-agent,#36373a);opacity:1}
.talk-apcard.talk-apclosed>:not(.talk-aprec):not(.talk-apyou){display:none}
.talk-apcard.talk-apclosed>.talk-aprec{display:flex;align-items:center;gap:10px;min-width:0}
.talk-apcard.talk-apclosed>.talk-apyou{margin-top:4px}
.talk-apwrap:has(.talk-apclosed){width:auto;max-width:min(100%,640px)}
.sheet.talk-apsheet{width:min(96vw,1180px)}
.talk-apbig{flex:1 1 auto;width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.talk-apshot.big{width:100%;max-width:none;margin:0;cursor:default}
@media (max-width:600px){
  .talk-ask.talk-apwrap{width:100%}
  /* a phone: the OK card as tight as its parts allow, so the whole of it fits the slot's 55 % more often */
  .talk-apcard:not(.talk-apclosed){padding:10px 12px}
  .talk-apcard .talk-apshot{margin:6px 0 8px}
  .talk-apopts{gap:4px 6px}
  .talk-apopts .talk-opt.other,.talk-apopts .talk-opt.no{min-height:30px;padding-top:4px;padding-bottom:4px}
  .talk-slot .talk-also{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){.talk-apbox::after{animation:none;opacity:.8;transform:none}}

/* ----------------------------------------------------------------- p21 O1: time order (SPEC 2.4-2.7, 3.4)
   The slot (p21 A1, SPEC 2.3): the one entry pinned at the foot, what waits for him, one ask at a time. At most 360 px (55 %
   of the chat on a phone, set by talk_slotCap), then it scrolls inside itself. Folded after a line of his that did not
   answer it: one 36 px line, the amber dot, what waits, "· N more", "Show". "Also waiting: …" is the last line of the ask. */
html[data-look="chats"] .talk-slot{display:flex;flex-direction:column;gap:0;align-self:stretch;min-width:0;max-height:360px;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin}
html[data-look="chats"] .talk-slot[data-folded="1"]{overflow:hidden}
html[data-look="chats"] .talk-slot>[hidden]{display:none!important}
.talk-slot>.talk-askcard.talk-qb{max-width:min(100%,640px)}
.talk-slotfold{flex:none;display:flex;align-items:center;gap:8px;align-self:flex-start;box-sizing:border-box;height:36px;min-width:0;max-width:min(100%,640px);
  margin:0;padding:0 14px 0 12px;border:1px solid #393a3d;border-radius:18px;background:#2c2d30;color:var(--c-line,#9a9a9a);font:inherit;font-size:13px;line-height:20px;
  text-align:left;cursor:pointer}
.talk-slotfold:hover{color:#fff;border-color:#48494c}
.talk-slotfold:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
.talk-slotwords{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cfcfcf}
.talk-slotmore{flex:none;white-space:nowrap}
.talk-slotshow{flex:none;margin-left:4px;color:#fff;font-weight:600}
/* "Also waiting": one line (p21 final fixes) — the names that fit, then "· 2 more ›"; opened, every name over several lines.
   Inline boxes, so it reads as one sentence ("Also waiting: Employee 16 (an OK) · 2 more ›") */
.talk-also{display:block;min-width:0;margin-top:8px;font-size:13px;line-height:20px;color:var(--c-line,#9a9a9a);white-space:nowrap;overflow:hidden}
.talk-also .talk-alsoitem[hidden],.talk-also .talk-alsotail[hidden]{display:none}
.talk-also .talk-alsobtn{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.talk-also[data-all]{white-space:normal}
.talk-also[data-all] .talk-alsobtn{display:inline;white-space:normal;text-align:left}
.talk-alsomore{margin:0;padding:0;border:0;background:none;color:#cfcfcf;font:inherit;cursor:pointer}
.talk-alsomore:hover{color:#fff}
.talk-alsomore:focus-visible{outline:2px solid #6b8cff;outline-offset:2px;border-radius:4px}
.talk-also[hidden]{display:none}
.talk-alsobtn{margin:0;padding:0;border:0;background:none;color:#cfcfcf;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:#555;text-underline-offset:3px}
.talk-alsobtn:hover{color:#fff;text-decoration-color:#bdbdbd}
.talk-alsobtn:focus-visible{outline:2px solid #6b8cff;outline-offset:2px;border-radius:4px}
/* the head line over an answer: 13/20 #9a9a9a, one line; "re: …" is a link up to what he asked; the words and "›" open the
   Worked fold under it (p21 L1) */
.talk-head{display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;min-width:0;max-width:min(100%,var(--card-max,640px));
  font-size:13px;line-height:20px;color:var(--c-line,#9a9a9a)}
.talk-headline{display:flex;align-items:center;min-width:0;max-width:100%;height:20px;white-space:nowrap}
.talk-headtxt,.talk-headsep{flex:none;white-space:pre}
.talk-headbtn{flex:none;display:inline-flex;align-items:center;margin:0;padding:0;border:0;border-radius:6px;background:none;color:inherit;font:inherit;cursor:pointer}
.talk-headbtn:hover,.talk-headline:has(.talk-chevbtn:hover) .talk-headbtn{color:#fff}
.talk-headline>.talk-chevbtn{width:16px;height:20px;margin-left:2px}
.talk-head>.talk-worked{align-self:stretch;margin-top:2px}
.talk-headre{min-width:0;overflow:hidden;text-overflow:ellipsis;border:0;padding:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
.talk-headre:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* a line (SPEC 3.2): 28 px, 13/20 #9a9a9a, one line with an ellipsis; "finished · answer below ↓" is a link as a whole */
.talk-row{display:flex;align-items:center;align-self:flex-start;min-height:28px;min-width:0;max-width:min(100%,var(--card-max,640px))}
.talk-rowbtn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;padding:4px 0;background:none;color:var(--c-line,#9a9a9a);
  font:inherit;font-size:13px;line-height:20px;cursor:pointer;text-align:left}
.talk-rowbtn:hover{color:#fff}
.talk-rowbtn:focus-visible,.talk-headre:focus-visible,.talk-footbtn:focus-visible{outline:2px solid #6b8cff;outline-offset:2px;border-radius:6px}
/* the row the chat was taken to lights up for a moment (SPEC 3.4) */
.talk-flash{animation:talk-flash 1.2s ease-out}
@keyframes talk-flash{0%,30%{filter:brightness(1.75)}100%{filter:none}}
/* "New since 21:35" (SPEC 2.5): a time line, a shade brighter */
html[data-look="chats"] .chats-new{color:#c4c4c4}
/* a question closed because he said something else after it */
.talk-askyou.talk-skipped{color:#a2a2a2}
/* the foot element (SPEC 2.4): after the feed in the scroll area, sticky 8 px above the message box, taking no room */
html[data-look="chats"] .talk-foot{position:sticky;bottom:8px;z-index:2;display:flex;justify-content:center;align-items:center;width:100%;max-width:var(--col);height:28px;
  margin:-36px auto 8px;pointer-events:none}
/* p21 L1, its working face: what still works out of view, at the column's left edge; "Screens ›" at its right edge. At the
   bottom of the chat it takes its own room right under the slot (nothing is under it: SPEC 3.7). p21 review-1: a row of its
   own, never sticky: scrolled a little up, it goes up with the chat instead of lying over the OK card's buttons */
html[data-look="chats"] .talk-foot[data-face="work"]{position:relative;bottom:auto;justify-content:space-between;gap:8px;margin-top:0}
.talk-foot[data-face="work"] .talk-footbtn{flex:0 1 auto;min-width:0;gap:8px;padding:0 12px 0 10px;border-color:#393a3d;background:#2c2d30;color:var(--c-line,#9a9a9a);box-shadow:none}
.talk-foot[data-face="work"] .talk-footbtn:hover{color:#fff}
.talk-footscr{pointer-events:auto;flex:none;height:28px;padding:0 10px;border:0;border-radius:14px;background:#2c2d30;color:var(--c-quiet,#a0a0a0);
  font:inherit;font-size:13px;line-height:20px;cursor:pointer}
.talk-footscr:hover{color:#fff}
.talk-footscr:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
.talk-footscr[hidden]{display:none}
html[data-look="chats"] .talk-foot[hidden]{display:none}
/* p21 final fixes (the final look, item 7): "↓ Latest" in a strip of its own above the message box (the scroll area ends above
   it), never over a line of the chat */
html[data-look="chats"] .emp-dock>.talk-foot[data-face="jump"]{position:static;margin:0 auto 8px;pointer-events:none}
html[data-look="chats"] .emp-dock>.talk-foot[data-face="jump"] .talk-footbtn{box-shadow:none}
.talk-footbtn{pointer-events:auto;display:inline-flex;align-items:center;gap:7px;height:28px;max-width:100%;padding:0 12px;border:1px solid #404144;border-radius:14px;
  background:#303134;color:#d6d6d6;font:inherit;font-size:13px;line-height:20px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.talk-foottxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.talk-footbtn:hover{border-color:#56575a;color:#fff}
.talk-footdot{flex:none;width:6px;height:6px;border-radius:50%;background:#7ee0a8}
/* 2026-11-01, Albert: "put employee memory and teach employee also in the sidebar": the head's selector is hidden (it stays in
   the page for ⌘1-3) and the head keeps one row: the name on the left, the tools on the right, the list's button first on
   a phone. These come after every width above, so they win over its "tabs" rows. */
html[data-look="chats"] .look-tabs{display:none}
html[data-look="chats"] .page-title-row{max-width:none}
html[data-look="chats"] .page-head.chats-chathead{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title tools"}
@media (max-width:1180px){
  html[data-look="chats"] .page-head{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title tools";padding:6px 12px 6px 18px}
}
@media (max-width:900px){
  html[data-look="chats"] .page-head.chats-chathead{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title tools";padding:6px 12px 6px 18px}
}
@media (max-width:800px){
  html[data-look="chats"] .page-head,html[data-look="chats"] .page-head.chats-chathead{grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"side title tools";padding:6px 12px}
}
@media (max-width:600px){
  html[data-look="chats"] .page-head:not(.chats-chathead){grid-template-areas:"side title" "tools tools";grid-template-columns:auto minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){.talk-flash{animation:none;outline:2px solid #6b8cff;outline-offset:2px}}

/* ----------------------------------------------------------------- p21 P2: a running project is one live line (SPEC 4.3)
   The job line's look (28 px, 13/20 #9a9a9a, its mark, 8 px, the name, " · ", its words with an ellipsis). "2 things wait
   for you ↓" is a link in the line (it brings the project's first ask to the slot); "Open ›" at the right is always there,
   ⋯ beside it on hover or focus (on a touch screen its items are the opened line's last row). No bar, no $, no card. */
.talk-pjline>.talk-workline{gap:0}
/* the name never shrinks under its words (it overlapped "2 things wait for you"): at most 48 % of the line, then an ellipsis;
   what it does takes what is left */
.talk-pjline .talk-pjhead{flex:0 0 auto;max-width:48%;gap:8px;min-width:0}
.talk-pjline .talk-pjhead .talk-actwho{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:20px}
.talk-pjline .talk-actsep{flex:none;margin:0;padding:0 1px;font-size:13px;line-height:20px;white-space:pre}
.talk-pjline .talk-actsep[hidden],.talk-pjline .talk-pjneed[hidden],.talk-pjline .talk-pjwords[hidden],.talk-pjline .talk-link[hidden]{display:none}
.talk-pjneed{flex:none;margin:0;padding:4px 0;border:0;background:none;color:#e2e2e2;font:inherit;font-size:13px;line-height:20px;cursor:pointer;white-space:nowrap}
.talk-pjneed:hover:not(:disabled){color:#fff;text-decoration:underline;text-underline-offset:3px}
.talk-pjneed:disabled{cursor:default}
.talk-pjwords{flex:0 1 auto;display:flex;align-items:center;min-width:0;height:28px;margin:0;padding:0;border:0;background:none;color:var(--c-line,#9a9a9a);
  font:inherit;font-size:13px;line-height:20px;text-align:left;cursor:pointer}
.talk-pjwords>.talk-tick{flex:0 1 auto;min-width:0}
.talk-pjwords:hover .talk-tickline{color:#f2f2f2}
.talk-pjline .talk-link{flex:none;padding:4px 6px;font-size:13px;line-height:20px;white-space:nowrap}
.talk-pjopen{color:#cfcfcf}
.talk-pjdots{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;visibility:hidden}
.talk-pjline>.talk-workline:hover .talk-pjdots,.talk-pjline>.talk-workline:focus-within .talk-pjdots,.talk-pjdots[aria-expanded="true"]{visibility:visible}
@media (hover:none){.talk-pjdots{display:none}}
.talk-pjline{position:relative}
.talk-pjmenu{position:absolute;top:30px;right:0;z-index:5;display:flex;flex-direction:column;min-width:220px;padding:6px;border:1px solid #404144;border-radius:12px;
  background:#303134;box-shadow:0 10px 28px rgba(0,0,0,.55)}
.talk-pjmenuitem{display:flex;align-items:center;min-height:32px;padding:0 10px;border:0;border-radius:8px;background:none;color:#e6e6e6;font:inherit;font-size:13px;
  line-height:20px;text-align:left;cursor:pointer}
.talk-pjmenuitem:hover:not(:disabled){background:#393a3d;color:#fff}
.talk-pjmenuitem:disabled{opacity:.45;cursor:default}
.talk-pjconfirm{margin:4px 0 4px 24px}
.talk-pjline[data-state="waiting"] .talk-actwho{color:#e2e2e2}
.talk-pjmore .proj-since{font-size:13px;line-height:20px;color:#bdbdbd}
.talk-pjstages{color:var(--c-line,#9a9a9a);font-variant-numeric:tabular-nums}
.talk-pjstages[hidden]{display:none}
.talk-pjlanes{display:flex;flex-direction:column;min-width:0}
.talk-pjlane{display:flex;align-items:center;min-width:0;height:22px;margin:0;padding:0;border:0;background:none;color:var(--c-line,#9a9a9a);font:inherit;font-size:13px;
  line-height:20px;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talk-pjlane>b{flex:none;color:#c4c4c4;font-weight:500}
.talk-pjlane>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.talk-pjlane:hover,.talk-pjlane:hover>b{color:#fff}
@media (max-width:800px){.talk-pjline .talk-pjhead{max-width:40%}}
/* the plan he started: one closed line (a record) at its time */
.proj-planrec .talk-chip{color:#a7a7a7}
/* the project's asks in the slot: the question bubble around the need's own row (proj_needNode) and its answers as pills */
.talk-pjask .proj-trayrow{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:0;background:none}
.talk-pjask .proj-trayq{margin:0 0 10px;font-size:14px;line-height:20px;color:#fff}
.talk-pjask .proj-trayq b{font-weight:600}
.talk-pjask .proj-trayq small{display:block;margin-top:2px;font-size:13px;line-height:20px;color:#a2a2a2}
.talk-pjask .proj-trayopts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}
.talk-pjask .proj-trayrow.done .proj-trayq{margin:0;color:#a2a2a2}
.talk-pjask .proj-inline{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.talk-pjask .proj-inline .proj-field{flex:1 1 200px;min-width:0;min-height:32px;box-sizing:border-box;padding:6px 12px;border:1px solid #48494c;border-radius:16px;
  background:#2e2f32;color:#fff;font:inherit;font-size:14px;line-height:20px}
.talk-pjask .proj-footnote{margin:8px 0 0}
.talk-pjask .proj-confirm{margin-top:10px}
.talk-pjask.proj-actcard{display:block;border:0;border-radius:18px;background:var(--c-agent,#36373a);padding:8px 12px 12px;color:#fff}
.talk-pjask.proj-actcard .proj-acttitle{display:block;margin:0 0 8px;font-size:13px;line-height:20px;color:#d6d6d6}
.talk-pjask.proj-actcard .proj-actwhy{display:block;margin:0 0 10px;font-size:14px;line-height:20px}
/* the email list and the first email in the slot: the card surface with the paper, cut between two lines (talk_mailCutNode): at
   most 200 px and "Show the whole email" for the first email, the greeting and about three lines for the list's example */
.talk-pjask.talk-mail{max-width:min(100%,640px)}
.talk-pjask.talk-mail .talk-askwho{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:13px;line-height:20px;color:#d6d6d6}
.talk-pjask.talk-mail .talk-askq{margin:0 0 6px}
/* a follow-up that is a link (a reply's "Answer in your mailbox") looks like the others */
a.talk-followrow{box-sizing:border-box;text-decoration:none}
/* on a phone the project's links are 44 px to tap (the line stays 28 px; the hit area grows) */
@media (max-width:800px){
  .talk-pjneed,.talk-pjopen,.talk-pjresume{position:relative}
  .talk-pjneed::before,.talk-pjopen::before,.talk-pjresume::before{content:"";position:absolute;inset:-8px 0}
  .talk-pjlane{position:relative;height:32px}
  .talk-pjlane::before{content:"";position:absolute;inset:-6px 0}
}