/* chats-chat.css — Supabot's Chat portal (chats-chat.js, p21/features slice C1), its incognito mode (slice C2) and renaming or
   deleting a chat from the history (slice C3). Every rule is under html[data-look="chats"].
   ChatGPT's classic shape in Supabot's p21 tokens (SPEC §3.2): the page #070707; one centred column min(760px, pane − 32px);
   bubbles ≤ 640 px, the answer #222 at the left, the person's #4e4e4e at the right, 14/20 text, padding 8/12, radius 18;
   rhythm 4 within a speaker · 16 when it changes · 6 to an attached line or the under-row · 3 from a head line; the day
   divider 12 px #989898; lines 28 px 13/20 #9a9a9a; the sources pill 28 px #1a1a1a radius 14; the composer a 44 px pill
   #292929, 13 px above the pane's foot, centred on an empty chat. No per-message times.
   Widths (D22): the history is 248 px in the pane at ≥ 1280; below that it is the phone's sheet behind the head's list
   button; ≤ 800 the phone (12 px gutter, bubbles 85 %). */

html[data-look="chats"] .surf-pane[data-surf="chat"]{background:#070707}
html[data-look="chats"] .chchat-root{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:248px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);overflow:hidden;color:#ececec;font-size:14px;line-height:20px}

/* ------------------------------------------------------------------ the head */
html[data-look="chats"] .page-head:has([data-chchat-head]) #view-title:empty{display:none}
html[data-look="chats"] .chchat-listbtn{display:none;flex:none;width:32px;height:32px;place-items:center;margin-left:-6px;padding:0;border:0;border-radius:9px;
  background:none;color:#bdbdbd;cursor:pointer}
html[data-look="chats"] .chchat-listbtn:hover,html[data-look="chats"] .chchat-listbtn[aria-expanded="true"]{background:#1a1a1a;color:#fff}
html[data-look="chats"] .chchat-headmodel{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}
html[data-look="chats"] .chchat-model{display:inline-flex;align-items:center;gap:8px;min-width:0;height:36px;margin-left:-10px;padding:0 8px 0 10px;border:0;
  border-radius:10px;background:none;color:#f0f0f0;font:inherit;font-size:14.5px;font-weight:600;line-height:1;cursor:pointer}
html[data-look="chats"] .chchat-model:hover,html[data-look="chats"] .chchat-model[aria-expanded="true"]{background:#171717}
html[data-look="chats"] .chchat-model>.maker-logo,html[data-look="chats"] .chchat-model>.chchat-auto{flex:none;width:16px;height:16px}
html[data-look="chats"] .chchat-modelname{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chchat-caret{display:grid;flex:none;color:#8a8a8a}
html[data-look="chats"] .chchat-auto{display:grid;place-items:center;color:#e6e6e6}
html[data-look="chats"] .chchat-eu{flex:none;display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:5px;background:#1d2a22;color:#7ee0a8;
  font-size:10.5px;font-weight:600;letter-spacing:.04em;line-height:1}
html[data-look="chats"] .chchat-listbtn:focus-visible,html[data-look="chats"] .chchat-model:focus-visible,html[data-look="chats"] .chchat-act:focus-visible,
html[data-look="chats"] .chchat-row:focus-visible,html[data-look="chats"] .chchat-mem:focus-visible,html[data-look="chats"] .chchat-send:focus-visible,
html[data-look="chats"] .chchat-pill:focus-visible,html[data-look="chats"] .chchat-ib:focus-visible,html[data-look="chats"] .chchat-quiet:focus-visible,
html[data-look="chats"] .chchat-src:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}

/* ------------------------------------------------------------------ the history */
html[data-look="chats"] .chchat-rail{min-height:0;min-width:0;display:flex;flex-direction:column;padding:10px 10px 12px;background:#0c0c0c;border-right:1px solid #161616}
html[data-look="chats"] .chchat-railtop{flex:none;display:flex;flex-direction:column;gap:2px;padding-bottom:6px}
html[data-look="chats"] .chchat-act{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;border-radius:10px;background:none;
  color:#e6e6e6;font:inherit;font-size:14px;font-weight:500;text-align:left;cursor:pointer}
html[data-look="chats"] .chchat-act:hover{background:#171717}
html[data-look="chats"] .chchat-act>svg{flex:none;color:#cfcfcf}
html[data-look="chats"] .chchat-search{cursor:text;background:#151515}
html[data-look="chats"] .chchat-search:focus-within{box-shadow:inset 0 0 0 1px #333}
html[data-look="chats"] .chchat-searchinput{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;color:#fff;font:inherit;font-size:14px;outline:none}
html[data-look="chats"] .chchat-searchinput::placeholder{color:#8c8c8c}
html[data-look="chats"] .chchat-searchinput::-webkit-search-cancel-button{filter:invert(1) opacity(.5)}
html[data-look="chats"] .chchat-list{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;margin:0 -4px;padding:0 4px;
  scrollbar-width:thin;scrollbar-color:#2a2a2a transparent}
html[data-look="chats"] .chchat-day{flex:none;padding:12px 10px 5px;font-size:12px;line-height:16px;font-weight:600;color:#6f6f6f}
html[data-look="chats"] .chchat-row{flex:none;display:block;width:100%;height:34px;padding:0 10px;border:0;border-radius:9px;background:none;color:#bdbdbd;
  font:inherit;font-size:13.5px;line-height:34px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
html[data-look="chats"] .chchat-rowname{display:block;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chchat-row:hover{background:#151515;color:#ececec}
html[data-look="chats"] .chchat-row[aria-current="page"]{background:#202020;color:#fff}
html[data-look="chats"] .chchat-railnote{padding:10px;font-size:12.5px;line-height:18px;color:#6a6a6a}

/* a row's ⋯ (C3): on hover or focus, on the open chat's row, while its menu is open, always on a touch screen; the name
   makes room for it while it shows */
html[data-look="chats"] .chchat-rowbox{position:relative;flex:none}
html[data-look="chats"] .chchat-rowbox:hover>.chchat-row{background:#151515;color:#ececec}
html[data-look="chats"] .chchat-rowbox>.chchat-row[aria-current="page"]{background:#202020;color:#fff}
html[data-look="chats"] .chchat-rowmore{position:absolute;top:3px;right:3px;width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;
  border-radius:7px;background:none;color:#a8a8a8;cursor:pointer;opacity:0}
html[data-look="chats"] .chchat-rowbox:hover>.chchat-rowmore,html[data-look="chats"] .chchat-rowbox:focus-within>.chchat-rowmore,
html[data-look="chats"] .chchat-rowbox.cur>.chchat-rowmore,html[data-look="chats"] .chchat-rowbox.menu>.chchat-rowmore{opacity:1}
html[data-look="chats"] .chchat-rowmore:hover,html[data-look="chats"] .chchat-rowbox.menu>.chchat-rowmore{background:#2c2c2c;color:#fff}
html[data-look="chats"] .chchat-rowbox:hover>.chchat-row,html[data-look="chats"] .chchat-rowbox:focus-within>.chchat-row,
html[data-look="chats"] .chchat-rowbox.cur>.chchat-row,html[data-look="chats"] .chchat-rowbox.menu>.chchat-row{padding-right:34px}
html[data-look="chats"] .chchat-rowmore:focus-visible{outline:2px solid #6b8cff;outline-offset:0}
@media (hover:none){
  html[data-look="chats"] .chchat-rowmore{opacity:1}
  html[data-look="chats"] .chchat-rowbox>.chchat-row{padding-right:34px}
}
/* Rename: the row is its name field */
html[data-look="chats"] .chchat-rowedit{display:block;width:100%;height:34px;margin:0;padding:0 10px;border:0;border-radius:9px;background:#1a1a1a;
  box-shadow:inset 0 0 0 1px #3d3d3d;color:#fff;font:inherit;font-size:13.5px;line-height:34px;outline:none}
html[data-look="chats"] .chchat-rowedit:focus{box-shadow:inset 0 0 0 1px #6b8cff}
html[data-look="chats"] .chchat-rowedit::selection{background:#3b4f99}
/* its menu, on <body> under the ⋯ (the model menu's surface) */
html[data-look="chats"] .chchat-rmenu{position:fixed;z-index:60;width:180px;padding:6px;border:1px solid #262626;border-radius:14px;background:#161616;
  color:#ececec;box-shadow:0 18px 48px rgba(0,0,0,.6);font-size:14px;line-height:20px;animation:chchat-menuin .12s ease-out}
html[data-look="chats"] .chchat-ritem{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;border-radius:9px;background:none;
  color:#ececec;font:inherit;font-size:14px;font-weight:500;text-align:left;cursor:pointer}
html[data-look="chats"] .chchat-ritem>svg{flex:none;color:#bdbdbd}
html[data-look="chats"] .chchat-ritem:hover,html[data-look="chats"] .chchat-ritem:focus-visible{background:#222;outline:none}
html[data-look="chats"] .chchat-ritem.danger,html[data-look="chats"] .chchat-ritem.danger>svg{color:#ff7b72}
html[data-look="chats"] .chchat-ritem.danger:hover,html[data-look="chats"] .chchat-ritem.danger:focus-visible{background:#2a1716}
html[data-look="chats"] .chchat-railfoot{flex:none;margin-top:6px;padding:10px 10px 0;border-top:1px solid #151515;font-size:12px;line-height:18px;color:#7c7c7c}
html[data-look="chats"] .chchat-scrim{display:none}

/* ------------------------------------------------------------------ the conversation */
html[data-look="chats"] .chchat-main{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:#070707}
html[data-look="chats"] .chchat-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px;overflow-anchor:auto;
  scrollbar-width:thin;scrollbar-color:#2a2a2a transparent}
html[data-look="chats"] .chchat-col{width:min(760px,100%);margin:0 auto;display:flex;flex-direction:column}
html[data-look="chats"] .chchat-col>[data-gap="4"]{margin-top:4px}
html[data-look="chats"] .chchat-col>[data-gap="6"]{margin-top:6px}
html[data-look="chats"] .chchat-col>[data-gap="16"]{margin-top:16px}
html[data-look="chats"] .chchat-dock{flex:none;padding:6px 16px 13px}
html[data-look="chats"] .chchat-dock>.chchat-composer{width:min(760px,100%);margin:0 auto}

/* a new chat: the greeting and the composer in the middle (about 38 % down) */
html[data-look="chats"] .chchat-hello{display:none}
html[data-look="chats"] .chchat-main[data-empty="1"] .chchat-scroll,html[data-look="chats"] .chchat-main[data-empty="1"] .chchat-dock{display:none}
html[data-look="chats"] .chchat-main[data-empty="1"] .chchat-hello{position:absolute;left:0;right:0;top:38%;transform:translateY(-50%);display:flex;
  flex-direction:column;align-items:center;padding:0 16px}
html[data-look="chats"] .chchat-hellot{margin:0 0 20px;font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em;color:#f4f4f4;text-align:center}
html[data-look="chats"] .chchat-helloslot{width:min(760px,100%)}
html[data-look="chats"] .chchat-hellonote{margin:12px 0 0;max-width:min(760px,100%);font-size:12px;line-height:16px;color:#7c7c7c;text-align:center}
html[data-look="chats"] .chchat-hellonote.warn{color:#f5b544}

/* the bubbles */
html[data-look="chats"] .chchat-bub{max-width:min(640px,100%);padding:8px 12px;border-radius:18px;font-size:14px;line-height:20px;overflow-wrap:anywhere;min-width:0}
html[data-look="chats"] .chchat-bub.me{align-self:flex-end;background:#4e4e4e;color:#fff;white-space:pre-wrap}
html[data-look="chats"] .chchat-turn{align-self:flex-start;display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:min(640px,100%)}
html[data-look="chats"] .chchat-bub.bot{background:#222;color:#fff;max-width:100%}
html[data-look="chats"] .chchat-bub .md{max-width:none;gap:8px;font-size:14px;line-height:20px;color:#fff}
html[data-look="chats"] .chchat-bub .md-p,html[data-look="chats"] .chchat-bub .md-mark{line-height:20px}
html[data-look="chats"] .chchat-bub .md-h1{font-size:15px}
html[data-look="chats"] .chchat-bub .md-h2{font-size:14px}
html[data-look="chats"] .chchat-bub .md-h3{color:#bdbdbd}
html[data-look="chats"] .chchat-bub .md-mark,html[data-look="chats"] .chchat-bub .md-quote{color:#bdbdbd}
html[data-look="chats"] .chchat-bub .md-quote{border-left-color:#444}
html[data-look="chats"] .chchat-bub a.md-link,html[data-look="chats"] .chchat-bub .md a{color:#ececec;text-decoration:underline;text-decoration-color:#666;text-underline-offset:2px}
html[data-look="chats"] .chchat-bub a.md-link:hover,html[data-look="chats"] .chchat-bub .md a:hover{text-decoration-color:#bbb}
html[data-look="chats"] .chchat-bub .chchat-nolink{text-decoration:none!important;cursor:default}
html[data-look="chats"] .chchat-bub .md-tablewrap{border-color:#343434;background:rgba(255,255,255,.02)}
html[data-look="chats"] .chchat-bub .md-table th,html[data-look="chats"] .chchat-bub .md-table td{border-color:#343434}
html[data-look="chats"] .chchat-bub .md-code{background:#181818;border-color:#303030}
html[data-look="chats"] .chchat-bub .md-pre{font-size:12.5px;color:#dcdcdc}
html[data-look="chats"] .chchat-bub .chat-cite{vertical-align:baseline;line-height:1;margin-left:3px;font-size:inherit}
html[data-look="chats"] .chchat-bub .chat-cite a{display:inline-block;min-width:17px;height:17px;padding:0 4px;border-radius:5px;background:#333;color:#cfcfcf;
  font-size:10.5px;font-weight:600;line-height:17px;text-align:center;text-decoration:none;vertical-align:1px}
html[data-look="chats"] .chchat-bub .chat-cite a:hover{background:#444;color:#fff}

/* the head line over an answer, the under-row beneath it */
html[data-look="chats"] .chchat-hl{display:flex;align-items:center;gap:6px;min-height:20px;margin-bottom:3px;font-size:13px;line-height:20px;color:#9a9a9a}
html[data-look="chats"] .chchat-hl>svg{flex:none}
html[data-look="chats"] .chchat-under{display:flex;align-items:center;gap:6px;height:28px;margin-top:6px}
html[data-look="chats"] .chchat-under.arriving{visibility:hidden}
html[data-look="chats"] .chchat-pill{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px 0 6px;border:0;border-radius:14px;background:#1a1a1a;
  color:#cfcfcf;font:inherit;font-size:12.5px;line-height:1;cursor:pointer}
html[data-look="chats"] .chchat-pill:hover{background:#222;color:#fff}
html[data-look="chats"] .chchat-marks{display:flex;align-items:center}
html[data-look="chats"] .chchat-marks .chat-fav{width:16px;height:16px;border-radius:50%;outline:0;box-shadow:0 0 0 1.5px #1a1a1a;background:#2e2e2e;color:#e8e8e8;
  font-size:9px;font-weight:700}
html[data-look="chats"] .chchat-marks .chat-fav img{width:16px;height:16px;border-radius:50%}
/* the first mark on top, so each letter stays readable where the next one overlaps it (favicons read either way) */
html[data-look="chats"] .chchat-marks .chat-fav{position:relative}
html[data-look="chats"] .chchat-marks .chat-fav:nth-child(1){z-index:3}
html[data-look="chats"] .chchat-marks .chat-fav:nth-child(2){z-index:2}
html[data-look="chats"] .chchat-marks .chat-fav+.chat-fav{margin-left:-6px}
/* a letter mark (no icon for that site) is only overlapped 2 px, so its letter stays whole */
html[data-look="chats"] .chchat-marks .chat-fav:not(:has(img))+.chat-fav,html[data-look="chats"] .chchat-marks .chat-fav+.chat-fav:not(:has(img)){margin-left:-2px}
html[data-look="chats"] .chchat-notemark{display:grid;place-items:center;color:#cfcfcf}
html[data-look="chats"] .chchat-ib{width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:none;color:#8a8a8a;cursor:pointer}
html[data-look="chats"] .chchat-ib:hover{background:#171717;color:#ececec}
html[data-look="chats"] .chchat-copy{opacity:0;transition:opacity .12s ease}
html[data-look="chats"] .chchat-turn:hover .chchat-copy,html[data-look="chats"] .chchat-under.last .chchat-copy,html[data-look="chats"] .chchat-copy:focus-visible{opacity:1}
@media (hover:none){html[data-look="chats"] .chchat-copy{opacity:1}}

/* lines: the live line, a stopped or failed answer, not saved, a viewer's note */
html[data-look="chats"] .chchat-line,html[data-look="chats"] .chchat-live{display:flex;align-items:center;gap:8px;min-height:28px;max-width:640px;min-width:0;
  font-size:13px;line-height:20px;color:#9a9a9a}
html[data-look="chats"] .chchat-line.err .chchat-linetext,html[data-look="chats"] .chchat-line.err>span:first-child{color:#e8b0ab}
html[data-look="chats"] .chchat-line.note{align-self:center;justify-content:center;text-align:center;margin-bottom:8px}
html[data-look="chats"] .chchat-linetext{min-width:0;overflow-wrap:anywhere}
html[data-look="chats"] .chchat-quiet{flex:none;padding:0 2px;border:0;background:none;color:#ececec;font:inherit;font-size:13px;font-weight:500;cursor:pointer;
  text-decoration:underline;text-decoration-color:#555;text-underline-offset:3px}
html[data-look="chats"] .chchat-quiet:hover{text-decoration-color:#bbb}
html[data-look="chats"] .chchat-live .talk-act{font-size:13px;line-height:20px;color:#9a9a9a;min-height:20px}
html[data-look="chats"] .chchat-spin{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid #3a3a3a;border-top-color:#bdbdbd;animation:chchat-spin 1s linear infinite}
@keyframes chchat-spin{to{transform:rotate(360deg)}}
html[data-look="chats"] .chchat-divider{align-self:center;margin:20px 0 12px!important;font-size:12px;line-height:16px;color:#989898}
html[data-look="chats"] .chchat-col>.chchat-divider:first-child{margin-top:4px!important}

/* ------------------------------------------------------------------ the composer */
html[data-look="chats"] .chchat-composer{display:flex;align-items:flex-end;gap:6px;min-height:44px;padding:0 8px 0 16px;border-radius:22px;background:#292929;
  box-shadow:0 0 0 1px rgba(255,255,255,.03)}
html[data-look="chats"] .chchat-composer:focus-within{box-shadow:0 0 0 1px #3a3a3a}
html[data-look="chats"] .chchat-field{flex:1;min-width:0;height:44px;max-height:144px;margin:0;padding:12px 0;border:0;background:none;color:#fff;font:inherit;
  font-size:14px;line-height:20px;resize:none;outline:none;overflow-y:auto;scrollbar-width:thin}
html[data-look="chats"] .chchat-field::placeholder{color:#8c8c8c}
html[data-look="chats"] .chchat-field:disabled{cursor:not-allowed}
html[data-look="chats"] .chchat-mem{flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;margin-bottom:8px;padding:0 10px 0 8px;border:0;border-radius:999px;
  background:#353535;color:#e6e6e6;font:inherit;font-size:12.5px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer}
html[data-look="chats"] .chchat-mem:hover{background:#3d3d3d}
html[data-look="chats"] .chchat-mem>svg{flex:none}
html[data-look="chats"] .chchat-mem.off{background:none;color:#8a8a8a;box-shadow:inset 0 0 0 1px #3a3a3a}
html[data-look="chats"] .chchat-mem.off:hover{color:#cfcfcf}
html[data-look="chats"] .chchat-send{flex:none;width:28px;height:28px;display:grid;place-items:center;margin-bottom:8px;padding:0;border:0;border-radius:50%;
  background:#4a4a4a;color:#1a1a1a;cursor:pointer}
html[data-look="chats"] .chchat-send:disabled{cursor:default}
html[data-look="chats"] .chchat-send.ready{background:#fff;color:#000}
html[data-look="chats"] .chchat-sq{width:10px;height:10px;border-radius:2px;background:#000}

/* ------------------------------------------------------------------ the model menu (on <body>, under the head's button) */
html[data-look="chats"] .chchat-menu{position:fixed;z-index:60;padding:6px;border:1px solid #262626;border-radius:14px;background:#161616;color:#ececec;
  box-shadow:0 18px 48px rgba(0,0,0,.6);overflow-y:auto;overscroll-behavior:contain;font-size:14px;line-height:20px;scrollbar-width:thin;
  scrollbar-color:#2a2a2a transparent;animation:chchat-menuin .12s ease-out}
@keyframes chchat-menuin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
html[data-look="chats"] .chchat-mrow{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:5px 10px;border:0;border-radius:10px;background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer}
html[data-look="chats"] .chchat-mrow:hover,html[data-look="chats"] .chchat-mrow:focus-visible,html[data-look="chats"] .chchat-mmore:hover,
html[data-look="chats"] .chchat-mmore:focus-visible,html[data-look="chats"] .chchat-mback:hover,html[data-look="chats"] .chchat-mback:focus-visible{background:#222;outline:none}
html[data-look="chats"] .chchat-mrow>.maker-logo,html[data-look="chats"] .chchat-mrow>.chchat-auto{flex:none;width:16px;height:16px}
html[data-look="chats"] .chchat-mtext{flex:1;min-width:0;display:flex;flex-direction:column}
html[data-look="chats"] .chchat-mname{font-size:14px;line-height:18px;font-weight:500;color:#f0f0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chchat-mnote{font-size:12px;line-height:16px;color:#8f8f8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chchat-mcheck{flex:none;width:16px;display:grid;color:#fff}
html[data-look="chats"] .chchat-meyebrow{padding:10px 10px 4px;font-size:12px;line-height:16px;font-weight:600;color:#7c7c7c}
html[data-look="chats"] .chchat-msep{height:1px;margin:5px 6px;background:#242424}
html[data-look="chats"] .chchat-mmore,html[data-look="chats"] .chchat-mback{display:flex;align-items:center;gap:8px;width:100%;height:44px;padding:0 10px;border:0;
  border-radius:10px;background:none;color:#cfcfcf;font:inherit;font-size:13.5px;cursor:pointer}
html[data-look="chats"] .chchat-mmore>svg,html[data-look="chats"] .chchat-mback>svg{flex:none;color:#8a8a8a}
html[data-look="chats"] .chchat-mmorename{flex:1;text-align:left}
html[data-look="chats"] .chchat-mmorecount{font-size:12px;color:#7c7c7c}
html[data-look="chats"] .chchat-mfoot{display:flex;align-items:flex-start;gap:8px;padding:9px 10px 6px;font-size:12px;line-height:17px;color:#8a8a8a}
html[data-look="chats"] .chchat-mfoot>svg{flex:none;margin-top:1px;color:#7ee0a8}

/* ------------------------------------------------------------------ the sources sheet */
html[data-look="chats"] .chchat-srcs{display:flex;flex-direction:column;gap:2px}
html[data-look="chats"] .chchat-srchead{padding:10px 8px 6px;font-size:12px;line-height:16px;font-weight:600;color:#7c7c7c}
html[data-look="chats"] .chchat-srchead:first-child{padding-top:2px}
html[data-look="chats"] .chchat-src{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 8px;border:0;border-radius:10px;background:none;
  color:#ececec;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
html[data-look="chats"] .chchat-src:hover{background:#181818}
html[data-look="chats"] .chchat-src:disabled{cursor:default}
html[data-look="chats"] .chchat-src>.chat-fav{width:20px;height:20px;border-radius:6px;font-size:10.5px;font-weight:700;background:#262626;color:#e8e8e8}
html[data-look="chats"] .chchat-src>.chat-fav img{width:20px;height:20px}
html[data-look="chats"] .chchat-srctext{flex:1;min-width:0;display:flex;flex-direction:column}
html[data-look="chats"] .chchat-srctitle{font-size:13.5px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chchat-srcsub{font-size:12px;line-height:16px;color:#8f8f8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chchat-srcn{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:5px;background:#2a2a2a;color:#bdbdbd;font-size:11px;
  font-weight:600;line-height:18px;text-align:center}

/* ------------------------------------------------------------------ incognito (C2, §5.2) */
/* the pill at the head's right: off #121212 with a #262626 edge; on white with black words */
html[data-look="chats"] #head-tools:has(.chchat-incog){flex:none;width:auto;min-width:0;overflow:visible;justify-content:flex-end}
html[data-look="chats"] .chchat-incog{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 10px;border:1px solid #262626;border-radius:999px;
  background:#121212;color:#d8d8d8;font:inherit;font-size:13px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer}
html[data-look="chats"] .chchat-incog:hover{background:#1a1a1a;color:#fff}
html[data-look="chats"] .chchat-incog>svg{flex:none}
html[data-look="chats"] .chchat-incog[aria-pressed="true"]{background:#fff;border-color:#fff;color:#000}
html[data-look="chats"] .chchat-incog[aria-pressed="true"]:hover{background:#e6e6e6;border-color:#e6e6e6}
html[data-look="chats"] .chchat-incog:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
/* the line under the head while an incognito chat has lines (28 px, 13/20 #9a9a9a, centred in the column) */
/* the glyph flows with the words, so two lines on a phone stay one centred block */
html[data-look="chats"] .chchat-incogbar{display:none;flex:none;min-height:28px;padding:4px 16px;font-size:13px;line-height:20px;color:#9a9a9a;text-align:center;
  text-wrap:balance}
html[data-look="chats"] .chchat-incogbar>svg{display:inline-block;margin-right:7px;vertical-align:-2px;color:#bdbdbd}
html[data-look="chats"] .chchat-main[data-incog="1"][data-empty="0"] .chchat-incogbar{display:block}
/* an empty incognito chat: the glyph in a 56 px dashed ring, the title, what it keeps and what it reads, the composer */
html[data-look="chats"] .chchat-incogring{width:56px;height:56px;display:grid;place-items:center;margin-bottom:16px;border:1.5px dashed #4a4a4a;border-radius:50%;
  color:#f0f0f0}
html[data-look="chats"] .chchat-hello[data-kind="incog"] .chchat-hellot{margin-bottom:8px}
html[data-look="chats"] .chchat-incogwords{margin:0 0 22px;max-width:min(480px,100%);font-size:14px;line-height:21px;color:#9a9a9a;text-align:center;
  text-wrap:balance}
@media (max-width:800px){
  /* the pill is its glyph (its name stays the aria-label) */
  html[data-look="chats"] .chchat-incog{width:32px;padding:0;justify-content:center;gap:0}
  html[data-look="chats"] .chchat-incogtext{display:none}
  html[data-look="chats"] .chchat-incogbar{padding:4px 12px}
  html[data-look="chats"] .chchat-incogwords{font-size:13.5px;line-height:20px;margin-bottom:18px}
}
@media (max-width:600px){
  /* the glyph stays beside the model (its own row under the title was a whole row for one 32 px button) */
  html[data-look="chats"] .page-head:has([data-chchat-head]){grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"side tabs tabs" "title title tools"}
  html[data-look="chats"] .page-head:has([data-chchat-head]) #head-tools{justify-content:flex-end}
}

/* ------------------------------------------------------------------ widths (D22) */
@media (max-width:1279px){
  html[data-look="chats"] .chchat-root{grid-template-columns:minmax(0,1fr)}
  html[data-look="chats"] .chchat-rail{position:absolute;left:0;top:0;bottom:0;z-index:6;width:248px;transform:translateX(-102%);visibility:hidden;
    transition:transform .2s ease-in,visibility 0s linear .2s;box-shadow:0 0 0 1px #1a1a1a,12px 0 40px rgba(0,0,0,.6)}
  html[data-look="chats"] .chchat-root[data-sheet="1"] .chchat-rail{transform:none;visibility:visible;transition:transform .22s ease-out}
  html[data-look="chats"] .chchat-root[data-sheet="1"] .chchat-scrim{display:block;position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.45)}
  html[data-look="chats"] .page-head:has([data-chchat-head]) .chchat-listbtn{display:grid}
}
@media (max-width:800px){
  html[data-look="chats"] .chchat-scroll{padding:12px}
  html[data-look="chats"] .chchat-dock{padding:6px 12px 13px}
  html[data-look="chats"] .chchat-main[data-empty="1"] .chchat-hello{padding:0 12px}
  html[data-look="chats"] .chchat-bub.me{max-width:min(640px,85%)}
  html[data-look="chats"] .chchat-turn{max-width:min(640px,85%)}
  html[data-look="chats"] .chchat-rail{width:min(280px,86%)}
  html[data-look="chats"] .chchat-composer{padding-left:14px}
}
@media (max-width:420px){
  html[data-look="chats"] .chchat-hellot{font-size:21px;line-height:28px}
  html[data-look="chats"] .chchat-mem{padding:0 9px 0 7px}
}
@media (prefers-reduced-motion:reduce){
  html[data-look="chats"] .chchat-rail,html[data-look="chats"] .chchat-menu,html[data-look="chats"] .chchat-rmenu,html[data-look="chats"] .chchat-copy{transition:none;animation:none}
  html[data-look="chats"] .chchat-spin{animation-duration:3s}
}