/* ============================== DESKTOP_CHAT_2026Q4 ==============================
   The desktop chat and left panel in the touch shell's material (owner, 2026-09-30: "ออกแบบ chat และ left panel ใน desktop
   ให้เข้า ธีม mobile"; mockup approved: "ทำตาม mockup"). Values are the touch shell's (--ts-* in touch_shell.css) at desktop
   density. Desktop only: every rule sits under html:not(.tye-ts) - the touch shell owns every touch size, which stays byte for
   byte as it was - and under body:not(.cad-fullscreen), so the floating chat of CAD fullscreen keeps its own compact skin.
   Nothing here moves or re-creates a node: ids, handlers, the Send button, the tour targets and every menu stay as they are.
   The runtime-injected chat styles (chat-polish / chat-user-align / tye-tour-css ...) load after this sheet and some carry
   !important, so the rules that meet them are id-scoped and !important too.
   Rollback = remove the <link>. */

html {   /* (DESKTOP_CHAT_WIDE_TOUCH_2026Q4: every html - only this file reads --dc-*) */
  --dc-sheet: #ffffff; --dc-surface: rgba(255, 255, 255, .94); --dc-hdr: rgba(255, 255, 255, .92);
  --dc-ink: #101114; --dc-ink2: #3b3f46; --dc-ink3: #636a76;
  --dc-line: rgba(17, 20, 28, .10); --dc-line2: rgba(17, 20, 28, .24);
  --dc-press: rgba(17, 20, 28, .07); --dc-hover: rgba(17, 20, 28, .05);
  --dc-shadow: 0 10px 30px rgba(17, 20, 28, .12), 0 2px 8px rgba(17, 20, 28, .06);
  --dc-dot: #e5322a; --dc-dotbg: rgba(229, 50, 42, .10);
  --dc-focus: rgba(15, 23, 42, .55);   /* (the composer's focus border: cad_draw.css LIGHT_MODE_INPUT_CARD_FOCUS's ~4:1) */
  --dc-font: Inter, 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dc-ease: cubic-bezier(.32, .72, 0, 1);
}
html[data-theme="dark"] {
  --dc-sheet: #1c1d21; --dc-surface: rgba(30, 31, 35, .92); --dc-hdr: rgba(8, 8, 8, .92);
  --dc-ink: #f2f3f5; --dc-ink2: #c9cdd4; --dc-ink3: #9aa1ad;
  --dc-line: rgba(255, 255, 255, .10); --dc-line2: rgba(255, 255, 255, .26);
  --dc-press: rgba(255, 255, 255, .10); --dc-hover: rgba(255, 255, 255, .06);
  --dc-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35);
  --dc-dot: #ff4d42; --dc-dotbg: rgba(255, 77, 66, .14);
  --dc-focus: rgba(255, 255, 255, .26);
}

/* ---------- the header: 56px, round 40px icon buttons, the mode pill without a frame ---------- */
html:not(.tye-ts) body:not(.cad-fullscreen) #left-pane > header {
  min-height: 56px; padding: 8px 10px !important; gap: 2px;
  background: var(--dc-hdr); border-bottom: 1px solid var(--dc-line);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
}
html:not(.tye-ts) body:not(.cad-fullscreen) #left-pane #sb-toggle,
html:not(.tye-ts) body:not(.cad-fullscreen) #left-pane #sb-toggle.fs-sb-active,
html:not(.tye-ts) body:not(.cad-fullscreen) #search-btn,
html:not(.tye-ts) body:not(.cad-fullscreen) #tts-toggle,
html:not(.tye-ts) body:not(.cad-fullscreen) #stop-btn,
html:not(.tye-ts) body:not(.cad-fullscreen) #panel-picker-btn {
  width: 40px !important; height: 40px !important; min-width: 40px; padding: 0 !important; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 0 !important; border-radius: 20px !important; background: transparent !important; color: var(--dc-ink2) !important;
  box-shadow: none !important; animation: none; transition: background .16s ease, color .16s ease;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #left-pane #sb-toggle svg,
html:not(.tye-ts) body:not(.cad-fullscreen) #search-btn svg,
html:not(.tye-ts) body:not(.cad-fullscreen) #tts-toggle svg,
html:not(.tye-ts) body:not(.cad-fullscreen) #stop-btn svg,
html:not(.tye-ts) body:not(.cad-fullscreen) #panel-picker-btn svg { width: 20px !important; height: 20px !important; }
/* (the sidebar toggle's "open" look was the brand red of cad_fullscreen.js - the phone's selected grey instead) */
html:not(.tye-ts) body:not(.cad-fullscreen) #left-pane #sb-toggle.fs-sb-active { background: var(--dc-press) !important; color: var(--dc-ink) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #left-pane #sb-toggle svg,
html:not(.tye-ts) body:not(.cad-fullscreen) #left-pane #sb-toggle.fs-sb-active svg { stroke: currentColor !important; color: inherit !important; }
@media (hover: hover) {
  html:not(.tye-ts) body:not(.cad-fullscreen) #left-pane #sb-toggle:hover,
  html:not(.tye-ts) body:not(.cad-fullscreen) #search-btn:hover,
  html:not(.tye-ts) body:not(.cad-fullscreen) #tts-toggle:hover,
  html:not(.tye-ts) body:not(.cad-fullscreen) #stop-btn:not(.speaking):hover,
  html:not(.tye-ts) body:not(.cad-fullscreen) #panel-picker-btn:hover { background: var(--dc-press) !important; color: var(--dc-ink) !important; }
}
/* Mute: the speaker alone (its title says what it does); on = the selected grey, not the red glow */
html:not(.tye-ts) body:not(.cad-fullscreen) #tts-toggle > span { display: none !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #tts-toggle::before { content: none !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #tts-toggle.on { background: var(--dc-press) !important; color: var(--dc-ink) !important; }
/* the speaker button keeps its speaking cue, in the accent, without the pulse ring */
html:not(.tye-ts) body:not(.cad-fullscreen) #stop-btn.speaking { color: var(--dc-dot) !important; background: var(--dc-dotbg) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) .hctrl { gap: 2px; margin-left: auto; }   /* (the model chip is width-capped below, so the right group takes the free space itself) */
html:not(.tye-ts) body:not(.cad-fullscreen) .hctrl-sep { width: 1px; height: 22px; margin: 0 6px; background: var(--dc-line); }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(#left-pane #sb-toggle, #search-btn, #tts-toggle, #stop-btn, #panel-picker-btn, #model-btn, #mode-btn):focus-visible {
  outline: 2px solid var(--dc-dot) !important; outline-offset: -2px;
}

/* the model chip: ty\e mark + the model name (Inter, as on the phone) + a chevron */
html:not(.tye-ts) body:not(.cad-fullscreen) #model-btn {
  height: 40px; padding: 0 10px 0 9px !important; gap: 8px; border: 0 !important; border-radius: 20px !important;
  background: transparent !important; box-shadow: none !important; display: inline-flex; align-items: center;
  transition: background .16s ease;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #model-btn .brand-logo { width: 20px !important; height: 20px !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #model-btn .mname {
  font: 600 14px/1 var(--dc-font) !important; letter-spacing: -.005em !important; color: var(--dc-ink) !important;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* (with CAD open the header is ~700px: the chip stops short of the centred mode pill and its name ends in an ellipsis) */
html:not(.tye-ts) body:not(.cad-fullscreen) #left-pane > header > .model-picker { max-width: calc(50% - 150px); min-width: 0; }
html:not(.tye-ts) body:not(.cad-fullscreen) #model-btn::after {
  content: ''; flex: none; width: 14px; height: 14px; background-color: var(--dc-ink3); transition: transform .16s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
html:not(.tye-ts) body:not(.cad-fullscreen) .model-picker:has(#model-dropdown.open) #model-btn { background: var(--dc-press) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) .model-picker:has(#model-dropdown.open) #model-btn::after { transform: rotate(180deg); }
@media (hover: hover) { html:not(.tye-ts) body:not(.cad-fullscreen) #model-btn:hover { background: var(--dc-press) !important; } }

/* the mode pill: no frame, the phone's type; grey when hovered or open */
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-picker { gap: 2px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-btn {
  height: 40px; padding: 0 12px 0 11px !important; gap: 7px !important; border: 0 !important; border-radius: 20px !important;
  background: transparent !important; color: var(--dc-ink) !important; transition: background .16s ease;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-btn .mode-btn-label { font: 600 15px/1 var(--dc-font) !important; letter-spacing: -.01em; color: var(--dc-ink) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-btn #mode-btn-icon { width: 17px !important; height: 17px !important; color: var(--dc-ink2) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-btn.realtime-active #mode-btn-icon { color: var(--dc-dot) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-btn .mode-chevron { width: 14px !important; height: 14px !important; color: var(--dc-ink3) !important; transition: transform .16s ease; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-picker:has(#mode-dropdown.open) #mode-btn { background: var(--dc-press) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-picker:has(#mode-dropdown.open) #mode-btn .mode-chevron { transform: rotate(180deg); color: var(--dc-ink2) !important; }
@media (hover: hover) { html:not(.tye-ts) body:not(.cad-fullscreen) #mode-btn:hover { background: var(--dc-press) !important; } }

/* ---------- header menus: the phone's cards ---------- */
html:not(.tye-ts) body:not(.cad-fullscreen) #model-dropdown,
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-dropdown,
html:not(.tye-ts) body:not(.cad-fullscreen) #pp-menu {
  background: var(--dc-sheet) !important; border: 1px solid var(--dc-line) !important; border-radius: 18px !important;
  box-shadow: var(--dc-shadow) !important; padding: 6px !important; box-sizing: border-box;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #model-dropdown { width: 340px !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-dropdown { width: 320px !important; min-width: 320px !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #model-dropdown .drop-section-lbl,
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-dropdown > div:first-child {
  font: 600 11px/1 var(--dc-font) !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--dc-ink3) !important; padding: 12px 12px 8px !important;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #model-dropdown .model-opt,
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-dropdown .mode-opt {
  min-height: 56px !important; border-radius: 12px !important; background: transparent !important; color: var(--dc-ink) !important;
  border: 0 !important; box-shadow: none !important;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-dropdown .mode-opt { padding: 8px 12px !important; gap: 12px !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #model-dropdown .model-opt.active,
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-dropdown .mode-opt.active { background: var(--dc-press) !important; }
@media (hover: hover) {
  html:not(.tye-ts) body:not(.cad-fullscreen) #model-dropdown .model-opt:not(:disabled):hover,
  html:not(.tye-ts) body:not(.cad-fullscreen) #mode-dropdown .mode-opt:not(.locked):hover { background: var(--dc-press) !important; }
}
html:not(.tye-ts) body:not(.cad-fullscreen) :is(#model-dropdown .model-opt, #mode-dropdown .mode-opt):focus-visible { outline: 2px solid var(--dc-dot); outline-offset: -2px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #model-dropdown .model-opt-name,
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-dropdown .mode-opt-name { font: 500 15px/1.3 var(--dc-font) !important; color: var(--dc-ink) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #model-dropdown .model-opt-desc,
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-dropdown .mode-opt-desc { font: 400 12.5px/1.35 var(--dc-font) !important; color: var(--dc-ink3) !important; }
/* (a disabled row - "Coming soon" - stays muted element by element, never by fading the whole button) */
html:not(.tye-ts) body:not(.cad-fullscreen) #model-dropdown .model-opt:disabled .model-opt-name { color: var(--dc-ink3) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #model-dropdown .model-opt:disabled .model-opt-desc { color: var(--dc-ink3) !important; opacity: .7; }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(#model-dropdown .model-opt-check, #mode-dropdown .mode-opt-check) { color: var(--dc-ink) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-dropdown .mode-opt-icon {
  width: 36px !important; height: 36px !important; border-radius: 10px !important; border: 0 !important; background: var(--dc-press) !important; color: var(--dc-ink2) !important;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-dropdown .mode-opt.active .mode-opt-icon { background: var(--dc-sheet) !important; box-shadow: 0 0 0 1px var(--dc-line); color: var(--dc-ink) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-dropdown .mode-opt.locked { opacity: .55; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-dropdown .tier-lock { color: #9a4a06; background: rgba(180, 83, 9, .08); border-color: rgba(180, 83, 9, .28); }
html[data-theme="dark"]:not(.tye-ts) body:not(.cad-fullscreen) #mode-dropdown .tier-lock { color: #f0b265; background: rgba(240, 178, 101, .12); border-color: rgba(240, 178, 101, .35); }
html:not(.tye-ts) body:not(.cad-fullscreen) #pp-menu .pp-item { min-height: 44px; border-radius: 12px; color: var(--dc-ink); }
@media (hover: hover) { html:not(.tye-ts) body:not(.cad-fullscreen) #pp-menu .pp-item:hover { background: var(--dc-press) !important; } }
html:not(.tye-ts) body:not(.cad-fullscreen) #pp-menu .pp-item { color: var(--dc-ink) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #pp-menu .pp-items { padding: 0; }
html:not(.tye-ts) body:not(.cad-fullscreen) #pp-menu .pp-item-name { font: 500 15px/1.3 var(--dc-font); }
html:not(.tye-ts) body:not(.cad-fullscreen) #panel-picker-btn.active { background: var(--dc-press) !important; color: var(--dc-ink) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #pp-menu .pp-item.active { background: var(--dc-press) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #pp-menu .pp-item.active .pp-item-ico,
html:not(.tye-ts) body:not(.cad-fullscreen) #pp-menu .pp-item-check { color: var(--dc-ink) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #pp-menu .pp-item:focus-visible { outline: 2px solid var(--dc-dot); outline-offset: -2px; }

/* ---------- the left panel: the phone's Projects page at desktop density ---------- */
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar { background: var(--bg); border-right: 1px solid var(--dc-line); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sb-hdr { padding: 12px 10px 4px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sb-actions { gap: 6px; align-items: center; }
/* New chat: the ink pill (the phone's primary), an edit mark in place of the + */
html:not(.tye-ts) body:not(.cad-fullscreen) #new-chat-btn {
  height: 40px; padding: 0 14px !important; justify-content: center; justify-content: safe center; gap: 8px !important; min-width: 0; border: 0 !important; border-radius: 20px !important;
  background: var(--dc-ink) !important; color: var(--dc-sheet) !important; font: 600 14px/1 var(--dc-font) !important; box-shadow: none !important;
  transition: transform .12s ease, opacity .16s ease;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #new-chat-btn svg { display: none !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #new-chat-btn .sb-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html:not(.tye-ts) body:not(.cad-fullscreen) #new-chat-btn::before {
  content: ''; flex: none; width: 18px; height: 18px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'/%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'/%3E%3Cpath d='M16 5l3 3'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'/%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'/%3E%3Cpath d='M16 5l3 3'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
@media (hover: hover) { html:not(.tye-ts) body:not(.cad-fullscreen) #new-chat-btn:hover { opacity: .88; } }
html:not(.tye-ts) body:not(.cad-fullscreen) #new-chat-btn:active { transform: scale(.97); }
html:not(.tye-ts) body:not(.cad-fullscreen) #new-proj-btn,
html:not(.tye-ts) body:not(.cad-fullscreen) #sess-mgr-btn,
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-chat-rail {
  width: 40px !important; height: 40px !important; flex: none; padding: 0; border: 0 !important; border-radius: 20px !important;
  background: transparent !important; color: var(--dc-ink2) !important; display: inline-flex; align-items: center; justify-content: center;
  transition: background .16s ease, color .16s ease;
}
html:not(.tye-ts) body:not(.cad-fullscreen) :is(#new-proj-btn, #sess-mgr-btn, #sb-chat-rail) svg { width: 20px; height: 20px; }
@media (hover: hover) {
  html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar :is(#new-proj-btn, #sess-mgr-btn, #sb-chat-rail):hover { background: var(--dc-press) !important; color: var(--dc-ink) !important; }
}
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar #sb-chat-rail.open { background: var(--dc-press) !important; color: var(--dc-ink) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(#new-chat-btn, #new-proj-btn, #sess-mgr-btn, #sb-chat-rail, #sb-acc-row):focus-visible { outline: 2px solid var(--dc-dot); outline-offset: 2px; }
/* "Workspace": the phone's section label - sentence case, 13px */
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .side-group-label {
  padding: 14px 16px 6px; font: 600 13px/1.3 var(--dc-font); letter-spacing: 0; text-transform: none; color: var(--dc-ink3);
}
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar #session-list { padding: 0 8px 8px; }
/* a chat: 36px tile (the layers mark in the accent for a design chat), title and time, ⋯ on hover */
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item {
  position: relative; display: flex !important; align-items: center !important; gap: 11px;
  min-height: 56px !important; margin: 0 0 2px !important; padding: 7px 6px 7px 7px !important; box-sizing: border-box;
  border: 0 !important; border-radius: 14px !important; background: transparent !important;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item::before {
  content: ''; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--dc-press);
}
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item::after {
  content: ''; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none;
  background-color: var(--dc-ink2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item:has(.sess-cad-badge)::before { background: var(--dc-dotbg); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item:has(.sess-cad-badge)::after {
  background-color: var(--dc-dot);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E");
}
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item.active { background: var(--dc-press) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item.active::before { background: var(--dc-sheet); box-shadow: 0 0 0 1px var(--dc-line); }
@media (hover: hover) { html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item:not(.active):hover { background: var(--dc-hover) !important; } }
/* (a teammate's shared chat: no side stripe - its Team pill says it, as on the phone) */
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item.sess-shared-other { border-left: 0 !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item .sess-info { flex: 1 1 auto; min-width: 0; padding: 0 !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item .sess-title {
  font: 500 14.5px/20px var(--dc-font) !important; color: var(--dc-ink) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item.active .sess-title { font-weight: 600 !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item .sess-meta { display: flex; align-items: center; gap: 6px; height: 16px; margin-top: 1px; min-width: 0; overflow: hidden; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item .sess-time { font: 400 12.5px/16px var(--dc-font) !important; color: var(--dc-ink3) !important; white-space: nowrap; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item .sess-cad-badge {
  flex: none; display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 8px; border: 0;
  background: var(--dc-dotbg) !important; color: var(--dc-dot) !important; font: 600 10px/1 var(--dc-font); letter-spacing: .02em;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item .sess-team-pill {
  flex: 0 1 auto; min-width: 0; max-width: 60%; height: 16px; padding: 0 6px; box-sizing: border-box;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block !important; line-height: 14px; vertical-align: middle;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item .sess-team-pill svg { vertical-align: -1px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-menu-btn {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 16px; background: transparent !important; color: var(--dc-ink3) !important;
  align-items: center; justify-content: center;
}
@media (hover: hover) { html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-menu-btn:hover { background: var(--dc-line) !important; color: var(--dc-ink) !important; } }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-menu-btn.active { background: var(--dc-line) !important; color: var(--dc-ink) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item:not(.active):has(.sess-menu-btn.active) { background: var(--dc-hover) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-empty-hint { padding: 12px 16px; font: 500 14px/1.4 var(--dc-font); color: var(--dc-ink3); }
/* a project row: its colour tile at the chats' size */
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .proj-hdr { min-height: 52px; border-radius: 14px; gap: 11px; padding: 7px 6px 7px 7px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .proj-icon { width: 36px; height: 36px; border-radius: 11px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .proj-name { font: 600 14.5px/20px var(--dc-font); color: var(--dc-ink); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .proj-body { padding-left: 16px; }
@media (hover: hover) { html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .proj-hdr:hover { background: var(--dc-hover); } }

/* the account row: a round avatar (its colour stays the user's), name and plan */
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar-footer { padding: 8px; border-top: 1px solid var(--dc-line); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-row {
  padding: 8px !important; gap: 11px; border: 0; border-radius: 16px !important; background: transparent; transition: background .16s ease;
}
@media (hover: hover) { html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-row:hover { background: var(--dc-press) !important; } }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar-footer:has(.sb-acc-popup.open) #sb-acc-row { background: var(--dc-press) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-avatar { width: 36px; height: 36px; border-radius: 50% !important; font: 600 14px/1 var(--dc-font); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-name { font: 600 14px/18px var(--dc-font); color: var(--dc-ink); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-sub { font: 400 12.5px/16px var(--dc-font); color: var(--dc-ink3); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-row .sb-acc-caret { color: var(--dc-ink3); }

/* the account menu: the phone's profile card - avatar, name, e-mail; 36px rows; Theme as a Light / Dark / System switch */
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup {
  background: var(--dc-sheet) !important; border: 1px solid var(--dc-line) !important; border-radius: 18px !important;
  box-shadow: var(--dc-shadow) !important; padding: 6px !important; min-width: 300px;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-head { gap: 12px; padding: 10px 10px 12px; align-items: center; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-avatar { width: 44px; height: 44px; border-radius: 50% !important; font: 600 17px/1 var(--dc-font); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-name { font: 600 16px/1.25 var(--dc-font); color: var(--dc-ink); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-email { font: 400 13px/1.3 var(--dc-font); color: var(--dc-ink3); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup #sb-org-pill-btn { margin: 0 0 6px; border: 0; border-radius: 14px; background: var(--dc-press); }
@media (hover: hover) { html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup #sb-org-pill-btn:hover { box-shadow: inset 0 0 0 999px var(--dc-hover); } }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-usage-row { padding: 4px 12px 0; font: 400 12.5px/1.4 var(--dc-font); color: var(--dc-ink3); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-usage-bar { margin: 6px 12px 8px; height: 4px; border-radius: 2px; background: var(--dc-press); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-usage-fill { background: var(--dc-ink) !important; border-radius: 2px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup :is(.sb-pop-sep, .sb-pop-div) { height: 1px; margin: 6px 10px; background: var(--dc-line); border: 0; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item {
  min-height: 36px; padding: 0 12px !important; gap: 12px !important; border-radius: 12px !important; background: transparent;
  font: 500 15px/1.2 var(--dc-font) !important; color: var(--dc-ink) !important;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item > svg { width: 20px !important; height: 20px !important; color: var(--dc-ink2); flex: none; }
@media (hover: hover) { html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item:hover { background: var(--dc-press) !important; } }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item:focus-visible { outline: 2px solid var(--dc-dot); outline-offset: -2px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item.danger,
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item[onclick*="Logout"],
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item[onclick*="logout"] { color: var(--dc-dot) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item:is(.danger, [onclick*="Logout"], [onclick*="logout"]) > svg { color: var(--dc-dot); }
/* (desktop_chat.js adds the switch next to the Theme flyout row; CSS picks which one shows: the switch on the desktop, the
   original row in CAD fullscreen and on touch. The switch is hidden by default, so a menu built in one regime reads right
   after a resize into the other) */
#sb-acc-popup .dc-theme-row { display: none; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .sb-theme-parent-wrap[data-dc="1"] { display: none !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .dc-theme-row { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 6px 0 12px; font: 500 15px/1.2 var(--dc-font); color: var(--dc-ink); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .dc-theme-row > svg { width: 20px; height: 20px; color: var(--dc-ink2); flex: none; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .dc-tseg { margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--dc-press); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .dc-tseg button {
  border: 0; background: transparent; color: var(--dc-ink2); font: 600 12.5px/1 var(--dc-font); padding: 7px 10px; border-radius: 9px; cursor: pointer;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .dc-tseg button[aria-checked="true"] { background: var(--dc-ink); color: var(--dc-sheet); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sb-acc-popup .dc-tseg button:focus-visible { outline: 2px solid var(--dc-dot); outline-offset: 1px; }

/* collapsed: the phone's floating rail - New chat in ink, then round buttons; the avatar at the foot */
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar.collapsed { width: 64px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar.collapsed .sb-hdr { padding: 10px 0 0; align-items: center; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar.collapsed .sb-actions {
  flex: none; gap: 2px; padding: 4px; border-radius: 26px; background: var(--dc-surface); border: 1px solid var(--dc-line); box-shadow: var(--dc-shadow);
}
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar.collapsed #new-chat-btn { width: 44px !important; height: 44px !important; padding: 0 !important; border-radius: 22px !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar.collapsed #new-proj-btn,
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar.collapsed #sess-mgr-btn { width: 44px !important; height: 44px !important; border-radius: 22px !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar.collapsed #sb-sessions-rail { display: flex !important; justify-content: center; margin-top: 8px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar.collapsed #sb-sessions-popup { max-height: min(70vh, calc(100vh - 240px)) !important; overflow-y: auto; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar.collapsed #sb-chat-rail { width: 44px !important; height: 44px !important; border-radius: 22px !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar.collapsed #sidebar-footer { border-top: 0; display: flex; justify-content: center; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar.collapsed #sb-acc-row { padding: 4px !important; border-radius: 22px !important; }

/* ---------- the empty chat ---------- */
/* Take a tour: a round pill in the sheet colour */
html:not(.tye-ts) body:not(.cad-fullscreen) #chat .tye-tour-launch {
  height: 44px; padding: 0 8px 0 7px !important; gap: 10px !important; border-radius: 22px !important;
  background: var(--dc-sheet) !important; border: 1px solid var(--dc-line) !important; box-shadow: 0 1px 2px rgba(17, 20, 28, .05) !important;
  color: var(--dc-ink) !important; font: 500 14px/1 var(--dc-font) !important; display: inline-flex !important; align-items: center;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #chat .tye-tour-launch .ttl-icon { width: 30px !important; height: 30px !important; border-radius: 15px !important; background: var(--dc-dotbg) !important; color: var(--dc-dot) !important; display: inline-grid; place-items: center; }
html:not(.tye-ts) body:not(.cad-fullscreen) #chat .tye-tour-launch .ttl-meta {
  height: 24px; padding: 0 9px !important; border-radius: 12px !important; border: 0 !important; background: var(--dc-press) !important; color: var(--dc-ink2) !important;
  font: 600 10.5px/24px var(--dc-font) !important; letter-spacing: .08em !important; text-transform: uppercase;
}
@media (hover: hover) { html:not(.tye-ts) body:not(.cad-fullscreen) #chat .tye-tour-launch:hover { background: var(--dc-press) !important; } }
/* the start choice: the phone's two pills (Chat in ink); the sub-lines go, as on the phone */
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-choice { max-width: 420px; margin-left: auto; margin-right: auto; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-choice .mc-prompt { margin: 0 0 12px; font: 500 13px/1.3 var(--dc-font); letter-spacing: 0; color: var(--dc-ink3); }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-choice .mc-row { gap: 10px; justify-content: center; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-choice .mc-btn,
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-choice .mc-btn:hover {
  flex: 1 1 0; max-width: 176px; width: auto; height: 52px; min-height: 52px; padding: 0 16px; box-sizing: border-box;
  flex-direction: row; align-items: center; justify-content: center; gap: 9px;
  border-radius: 26px; border: 1px solid var(--dc-line); background: var(--dc-sheet); color: var(--dc-ink); box-shadow: var(--dc-shadow);
  transform: none; transition: transform .12s ease, background .16s ease;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-choice .mc-btn:active { transform: scale(.97); }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-choice .mc-btn:focus-visible { outline: 2px solid var(--dc-dot); outline-offset: 2px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-choice .mc-btn svg { width: 21px; height: 21px; flex: none; color: var(--dc-dot); }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-choice .mc-btn.mc-chat,
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-choice .mc-btn.mc-chat:hover { background: var(--dc-ink); color: var(--dc-sheet); border-color: transparent; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-choice .mc-btn.mc-chat svg { color: currentColor; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-choice .mc-label { font: 600 15px/1 var(--dc-font); letter-spacing: 0; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mode-choice .mc-sub { display: none; }

/* ---------- messages: your message in a grey bubble with no frame ---------- */
html:not(.tye-ts) body:not(.cad-fullscreen) #chat .msg.user .bubble {
  background: var(--dc-press) !important; border: 0 !important; border-radius: 20px !important; padding: 10px 16px !important; color: var(--dc-ink) !important;
}

/* ---------- the composer: one card, round 44px controls, Send in ink ---------- */
html:not(.tye-ts) body:not(.cad-fullscreen) #input-card { width: 100%; max-width: 760px; box-sizing: border-box; margin-left: auto; margin-right: auto; }
html:not(.tye-ts) body:not(.cad-fullscreen) #input-card,
html:not(.tye-ts) body:not(.cad-fullscreen) #input-card:hover {
  background: var(--dc-sheet) !important; border: 1px solid var(--dc-line) !important; border-radius: 26px !important; box-shadow: var(--dc-shadow) !important;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #input-card:focus-within { border-color: var(--dc-focus) !important; background: var(--dc-sheet) !important; box-shadow: var(--dc-shadow) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #input-card > #chat-lock-banner { border-radius: 25px 25px 0 0; }
html:not(.tye-ts) body:not(.cad-fullscreen) #input-row { padding: 6px !important; gap: 2px !important; align-items: flex-end !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #input-btns { gap: 2px !important; margin: 0 !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-btn,
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-btn:hover,
html:not(.tye-ts) body:not(.cad-fullscreen) #mic-btn,
html:not(.tye-ts) body:not(.cad-fullscreen) #mic-btn:hover {
  width: 44px !important; height: 44px !important; min-width: 44px !important; margin: 0 !important; flex: none; border: 0 !important;
  border-radius: 22px !important; background: transparent !important; color: var(--dc-ink2) !important; transform: none !important;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #input-card.open #attach-btn { background: var(--dc-press) !important; color: var(--dc-ink) !important; }
@media (hover: hover) {
  html:not(.tye-ts) body:not(.cad-fullscreen) #attach-btn:hover,
  html:not(.tye-ts) body:not(.cad-fullscreen) #mic-btn:hover { background: var(--dc-press) !important; color: var(--dc-ink) !important; }
  html:not(.tye-ts) body:not(.cad-fullscreen) #mic-btn:not(.listening):hover svg { fill: var(--dc-ink) !important; }
}
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-btn svg { width: 20px !important; height: 20px !important; stroke-width: 2.2 !important; transition: transform .2s var(--dc-ease); }
html:not(.tye-ts) body:not(.cad-fullscreen) #input-card.open #attach-btn svg { transform: rotate(45deg); }
/* (the mic icon is a filled path: it takes fill, not color) */
html:not(.tye-ts) body:not(.cad-fullscreen) #mic-btn svg { width: 20px !important; height: 20px !important; fill: var(--dc-ink2) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mic-btn.listening { background: rgba(229, 50, 42, .12) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #mic-btn.listening svg { fill: var(--dc-dot) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(#attach-btn, #mic-btn, #send-btn):focus-visible { outline: 2px solid var(--dc-dot) !important; outline-offset: 1px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #txt {
  color: var(--dc-ink) !important; caret-color: var(--dc-dot); font-size: 16px !important; line-height: 21px !important;
  min-height: 44px !important; padding: 12px 6px 11px !important;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #txt::placeholder { color: var(--dc-ink3) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #send-btn,
html:not(.tye-ts) body:not(.cad-fullscreen) #send-btn:hover {
  width: 44px !important; height: 44px !important; min-width: 44px !important; margin: 0 !important;
  border: 0 !important; border-radius: 22px !important; background: var(--dc-ink) !important; color: var(--dc-sheet) !important; box-shadow: none !important; opacity: 1 !important;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #send-btn svg { width: 20px !important; height: 20px !important; stroke: var(--dc-sheet) !important; stroke-width: 2.4 !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #send-btn:not(:disabled):active { transform: scale(.94); }
html:not(.tye-ts) body:not(.cad-fullscreen) #send-btn:disabled { background: var(--dc-press) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #send-btn:disabled svg { stroke: var(--dc-ink3) !important; }
/* (typing during a reply disables the Stop button; its square is currentColor) */
html:not(.tye-ts) body:not(.cad-fullscreen) #send-btn.is-stop,
html:not(.tye-ts) body:not(.cad-fullscreen) #send-btn.is-stop:disabled { background: var(--dc-ink) !important; color: var(--dc-sheet) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #send-btn.is-stop:disabled svg { stroke: var(--dc-sheet) !important; }
/* attached files: chips on the press grey, the remove badge on the corner */
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-strip:not(.hidden) { gap: 10px; padding: 12px 12px 4px; border-bottom: 0; }
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-strip .atc,
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-strip .atc:hover { height: 48px; max-width: 220px; padding: 0 30px 0 6px; gap: 8px; border: 0; border-radius: 14px; background: var(--dc-press); }
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-strip .atc .atc-thumb { width: 36px; height: 36px; border-radius: 10px; background: var(--dc-sheet); color: var(--dc-ink2); }
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-strip .atc .atc-name { color: var(--dc-ink); font: 500 13px/1.3 var(--dc-font); }
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-strip .atc.atc-img,
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-strip .atc.atc-img:hover { width: 56px; height: 56px; max-width: 56px; padding: 0; background: transparent; }
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-strip .atc.atc-img .atc-thumb { width: 56px; height: 56px; border-radius: 14px; background: var(--dc-press); outline: 1px solid var(--dc-line); outline-offset: -1px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-strip .atc-x,
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-strip .atc-x:hover {
  position: absolute !important; top: -7px !important; right: -7px !important; left: auto !important; bottom: auto !important;
  width: 22px !important; height: 22px !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border: 2px solid var(--dc-sheet) !important; border-radius: 50% !important; background: var(--dc-ink) !important; color: var(--dc-sheet) !important;
  font: 600 14px/1 var(--dc-font) !important; box-shadow: none !important; transform: none !important; cursor: pointer; z-index: 1;
}
/* the attach menu: a card over the + */
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-toolbar {
  width: min(300px, 100%) !important; padding: 6px !important; gap: 2px !important; border-radius: 18px !important;
  background: var(--dc-sheet) !important; border: 1px solid var(--dc-line) !important; box-shadow: var(--dc-shadow) !important;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-toolbar .attach-menu-item,
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-toolbar .attach-menu-item:hover { min-height: 56px !important; padding: 8px 10px !important; gap: 12px; border-radius: 12px; background: transparent; color: var(--dc-ink); }
@media (hover: hover) { html:not(.tye-ts) body:not(.cad-fullscreen) #attach-toolbar .attach-menu-item:hover { background: var(--dc-press); } }
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-toolbar .attach-menu-item:focus-visible { outline: 2px solid var(--dc-dot); outline-offset: -2px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-toolbar .attach-menu-ico,
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-toolbar .attach-menu-item:hover .attach-menu-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--dc-press); color: var(--dc-ink2); }
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-toolbar .attach-menu-ico svg { width: 20px; height: 20px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-toolbar .attach-menu-title { font: 600 15px/1.25 var(--dc-font); color: var(--dc-ink); }
html:not(.tye-ts) body:not(.cad-fullscreen) #attach-toolbar .attach-menu-sub { font: 400 12.5px/1.3 var(--dc-font); color: var(--dc-ink3); }

@media (prefers-reduced-motion: reduce) {
  html:not(.tye-ts) body:not(.cad-fullscreen) :is(#model-btn, #mode-btn, #mode-btn .mode-chevron, #new-chat-btn, #mode-choice .mc-btn, #attach-btn svg, #sb-acc-row, #send-btn),
  html:not(.tye-ts) body:not(.cad-fullscreen) #model-btn::after { transition: none !important; }
}
/* Windows contrast themes: background-color is forced to the system canvas, which would erase the mask-painted marks */
@media (forced-colors: active) {
  html:not(.tye-ts) body:not(.cad-fullscreen) #new-chat-btn::before,
  html:not(.tye-ts) body:not(.cad-fullscreen) #model-btn::after { background-color: ButtonText !important; }
  html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .sess-item::after { background-color: CanvasText !important; }
  html:not(.tye-ts) body:not(.cad-fullscreen) #new-chat-btn { border: 1px solid ButtonText !important; }
}
/* ---------- CHAT_MENU_MATERIAL_2026Q4: a chat's and a project's ⋯ menu, the Move to project flyout, the ⋯ buttons ----------
   The owner-approved mockup "ChatMenu" (2026-10-05). Both cards are moved to <body> while open (voice_ui.js _portalToBody), so
   they are styled at body level, never under #sidebar: the sheet with a hairline, 18px corners, 6px padding; 40px rows with 12px
   corners in 500 15px Inter and ink; 20px icons in ink2 at full opacity; 1px separators; Delete in the accent (Sign out's colour);
   in the flyout a 10px project dot, an outlined General dot and a check on the chat's own project. z-index 10002 / 10003 clears
   CAD fullscreen's floating chat card (#left-pane, 10001 !important) where gen_fs.py re-scopes these rules; gen_wide.py copies
   them to the landscape tablet's Chat screen, where (pointer: coarse) makes the rows 44px. Every var() keeps a fallback. */
@keyframes cmMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Delete / Delete project: the accent, at WCAG AA for 15px text. Light: its darker step #c8261e (5.6:1 on the sheet, 4.8:1 on its
   hover tint) - the mockup's #e5322a is 4.36:1, under 4.5. Dark: the accent itself, #ff4d42 (5.1:1), on a lighter hover tint (.10:
   4.6:1; the mockup's .14 is 4.34:1). Every html, as the --dc-* tokens. */
html { --cm-del: #c8261e; --cm-delbg: rgba(229, 50, 42, .10); }
html[data-theme="dark"] { --cm-del: #ff4d42; --cm-delbg: rgba(255, 77, 66, .10); }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) {
  z-index: 10002; box-sizing: border-box; min-width: 256px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
  padding: 6px !important; overflow: hidden auto; overscroll-behavior: contain; outline: none;
  background: var(--dc-sheet, #ffffff) !important; border: 1px solid var(--dc-line, rgba(17, 20, 28, .10)) !important; border-radius: 18px;
  box-shadow: var(--dc-shadow, 0 10px 30px rgba(17, 20, 28, .12), 0 2px 8px rgba(17, 20, 28, .06)) !important;
  font-family: var(--dc-font, Inter, system-ui, sans-serif);
}
html:not(.tye-ts) body:not(.cad-fullscreen) :is(#gx-move-sub) { z-index: 10003; min-width: 180px; max-width: min(320px, calc(100vw - 16px)); }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub).open { animation: cmMenuIn .15s var(--dc-ease, cubic-bezier(.32, .72, 0, 1)) both; }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) button {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; margin: 0; padding: 0 12px; box-sizing: border-box;
  border: 0; border-radius: 12px; background: transparent; color: var(--dc-ink, #101114); cursor: pointer;
  font: 500 15px/1.2 var(--dc-font, Inter, system-ui, sans-serif); letter-spacing: 0; text-align: left; white-space: nowrap;
  transition: background-color .12s ease;
}
html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) button > svg { width: 20px; height: 20px; flex: none; opacity: 1; color: var(--dc-ink2, #3b3f46); }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) button > svg.sess-dd-chevron { width: 16px; height: 16px; margin-left: auto; color: var(--dc-ink3, #636a76); }
@media (hover: hover) {
  html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) button:hover { background: var(--dc-press, rgba(17, 20, 28, .07)); color: var(--dc-ink, #101114); }
}
html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) button[aria-expanded="true"] { background: var(--dc-press, rgba(17, 20, 28, .07)); }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) :is(button, .sess-dd-hint):focus-visible { outline: 2px solid var(--dc-dot, #e5322a); outline-offset: -2px; }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) :is(button, .sess-dd-hint):focus:not(:focus-visible) { outline: none; }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) .sess-dd-sep { height: 1px; margin: 6px 10px; border: 0; background: var(--dc-line, rgba(17, 20, 28, .10)); }
/* Delete / Delete project: text and icon in the accent (--cm-del above) */
html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) :is(.sess-dd-del, .sess-dd-del > svg) { color: var(--cm-del, #c8261e) !important; opacity: 1 !important; }
@media (hover: hover) {
  html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) .sess-dd-del:hover { background: var(--cm-delbg, rgba(229, 50, 42, .10)) !important; }
}
/* a teammate's chat: the read-only note (was italic, centred, 11.5px - 2.65:1 in dark) */
html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) .sess-dd-hint {
  padding: 10px 12px; font: 400 12.5px/1.4 var(--dc-font, Inter, system-ui, sans-serif); font-style: normal; color: var(--dc-ink3, #636a76);
  text-align: left; white-space: normal; border-radius: 12px; cursor: default;
}
/* the flyout: the dot centred in the 20px icon slot, so every name starts where New project's does */
html:not(.tye-ts) body:not(.cad-fullscreen) :is(#gx-move-sub) .proj-sub-dot { width: 10px; height: 10px; margin: 0 5px; border: 0; border-radius: 3px; flex: none; box-sizing: border-box; }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(#gx-move-sub) .proj-sub-dot.is-general { background: transparent; box-shadow: inset 0 0 0 1.5px var(--dc-line2, rgba(17, 20, 28, .24)); }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(#gx-move-sub) .gx-mv-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(#gx-move-sub) button > svg.gx-mv-check { width: 16px; height: 16px; margin-left: 4px; color: var(--dc-dot, #e5322a); }
@media (pointer: coarse) {
  html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub).open { animation: none; }
  html:not(.tye-ts) body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) button { transition: none; }
}
/* the ⋯ of a project: the chat ⋯'s 32px round button */
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .proj-menu-btn {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 16px; background: transparent !important; color: var(--dc-ink3, #636a76) !important;
  align-items: center; justify-content: center; flex: none;
}
@media (hover: hover) { html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .proj-menu-btn:hover { background: var(--dc-line, rgba(17, 20, 28, .10)) !important; color: var(--dc-ink, #101114) !important; } }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .proj-menu-btn.active { background: var(--dc-line, rgba(17, 20, 28, .10)) !important; color: var(--dc-ink, #101114) !important; }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar .proj-hdr:has(.proj-menu-btn.active) { background: var(--dc-hover, rgba(17, 20, 28, .05)); }
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar :is(.sess-menu-btn, .proj-menu-btn) > svg { width: 18px; height: 18px; }
/* the keyboard: a chat row and a project header take focus (Enter opens / folds), and so does each ⋯ */
html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar :is(.sess-item, .proj-hdr, .sess-menu-btn, .proj-menu-btn):focus-visible { outline: 2px solid var(--dc-dot, #e5322a); outline-offset: -2px; }
/* with a pointer a ⋯ shows on hover, while its row holds focus and while its menu is open; otherwise it stays in the row 0px wide
   (never display:none), so Tab still reaches it */
@media (hover: hover) {
  html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar :is(.sess-menu-btn, .proj-menu-btn) { display: inline-flex !important; width: 0; min-width: 0; opacity: 0; overflow: hidden; }
  html:not(.tye-ts) body:not(.cad-fullscreen) #sidebar :is(.sess-item:hover .sess-menu-btn, .sess-item:focus-within .sess-menu-btn, .sess-menu-btn.active, .proj-hdr:hover .proj-menu-btn, .proj-hdr:focus-within .proj-menu-btn, .proj-menu-btn.active) { width: 32px; opacity: 1; }
}
/* the Archive toast with Undo (voice_ui.js _sessUndoToast), as in the mockup: an inverse card, the ink colour as its surface and
   Undo in the accent. Not scoped (the rest of this file is desktop only): desktop, CAD fullscreen (above its chat card) and touch,
   where it rises above the tab bar; voice_ui.js _sessUndoPlace docks it at the foot of the chat column when there is one. Undo is
   #ff4d42 on the light theme's dark card (5.8:1, 5.0:1 on its .06 hover tint); on the dark theme's light card it is #c8261e (5.0:1,
   4.6:1 on its .05 hover tint) - the mockup's #e5322a is 3.9:1 on #f2f3f5. */
#gx-undo-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 10004; transform: translate(-50%, 8px);
  display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: max-content; max-width: min(440px, calc(100vw - 32px));
  min-height: 48px; padding: 0 6px 0 16px; border-radius: 16px;
  background: var(--dc-ink, #101114); color: var(--dc-sheet, #ffffff); box-shadow: 0 10px 30px rgba(17, 20, 28, .28);
  font: 500 14px/1.3 var(--dc-font, Inter, system-ui, sans-serif);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s var(--dc-ease, ease), visibility 0s linear .18s;
}
#gx-undo-toast.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
#gx-undo-toast .gx-ut-msg { flex: 1 1 auto; min-width: 0; }
#gx-undo-toast .gx-ut-btn {
  flex: none; height: 36px; margin: 0; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: #ff4d42; cursor: pointer;
  font: 600 14px/1 var(--dc-font, Inter, system-ui, sans-serif);
}
@media (hover: hover) { #gx-undo-toast .gx-ut-btn:hover { background: rgba(255, 255, 255, .06); } }
#gx-undo-toast .gx-ut-btn:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
html[data-theme="dark"] #gx-undo-toast { color: #101114; box-shadow: 0 10px 30px rgba(0, 0, 0, .40); }
html[data-theme="dark"] #gx-undo-toast .gx-ut-btn { color: #c8261e; }
@media (hover: hover) { html[data-theme="dark"] #gx-undo-toast .gx-ut-btn:hover { background: rgba(17, 20, 28, .05); } }
html.tye-ts body #gx-undo-toast { bottom: calc(var(--ts-space, 98px) + 12px); }
@media (prefers-reduced-motion: reduce) { #gx-undo-toast, #gx-undo-toast.show { transition: none; transform: translate(-50%, 0); } }
@media (forced-colors: active) { #gx-undo-toast { border: 1px solid CanvasText; } }
/* ============================== END DESKTOP_CHAT_2026Q4 ============================== */

/* ============================== DESKTOP_CHAT_WIDE_TOUCH_2026Q4 ============================== */
/* generated by gen_wide.py from the rules above: a touch tablet in landscape (1025px+) shows the desktop header and
   left panel on its Chat screen - the same look there. Composer, start pills, attach menu and tab bar stay the touch
   shell's. */
@media (min-width: 1025px) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #left-pane > header {min-height: 56px; padding: 8px 10px !important; gap: 2px;
  background: var(--dc-hdr); border-bottom: 1px solid var(--dc-line);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #left-pane #sb-toggle, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #left-pane #sb-toggle.fs-sb-active, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #search-btn, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #tts-toggle, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #stop-btn, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #panel-picker-btn {width: 40px !important; height: 40px !important; min-width: 40px; padding: 0 !important; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 0 !important; border-radius: 20px !important; background: transparent !important; color: var(--dc-ink2) !important;
  box-shadow: none !important; animation: none; transition: background .16s ease, color .16s ease;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #left-pane #sb-toggle svg, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #search-btn svg, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #tts-toggle svg, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #stop-btn svg, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #panel-picker-btn svg {width: 20px !important; height: 20px !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #left-pane #sb-toggle.fs-sb-active {background: var(--dc-press) !important; color: var(--dc-ink) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #left-pane #sb-toggle svg, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #left-pane #sb-toggle.fs-sb-active svg {stroke: currentColor !important; color: inherit !important;}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #left-pane #sb-toggle:hover, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #search-btn:hover, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #tts-toggle:hover, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #stop-btn:not(.speaking):hover, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #panel-picker-btn:hover {background: var(--dc-press) !important; color: var(--dc-ink) !important;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #tts-toggle > span {display: none !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #tts-toggle::before {content: none !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #tts-toggle.on {background: var(--dc-press) !important; color: var(--dc-ink) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #stop-btn.speaking {color: var(--dc-dot) !important; background: var(--dc-dotbg) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) .hctrl {gap: 2px; margin-left: auto;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) .hctrl-sep {width: 1px; height: 22px; margin: 0 6px; background: var(--dc-line);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(#left-pane #sb-toggle, #search-btn, #tts-toggle, #stop-btn, #panel-picker-btn, #model-btn, #mode-btn):focus-visible {outline: 2px solid var(--dc-dot) !important; outline-offset: -2px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-btn {height: 40px; padding: 0 10px 0 9px !important; gap: 8px; border: 0 !important; border-radius: 20px !important;
  background: transparent !important; box-shadow: none !important; display: inline-flex; align-items: center;
  transition: background .16s ease;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-btn .brand-logo {width: 20px !important; height: 20px !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-btn .mname {font: 600 14px/1 var(--dc-font) !important; letter-spacing: -.005em !important; color: var(--dc-ink) !important;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #left-pane > header > .model-picker {max-width: calc(50% - 150px); min-width: 0;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-btn::after {content: ''; flex: none; width: 14px; height: 14px; background-color: var(--dc-ink3); transition: transform .16s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) .model-picker:has(#model-dropdown.open) #model-btn {background: var(--dc-press) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) .model-picker:has(#model-dropdown.open) #model-btn::after {transform: rotate(180deg);}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-btn:hover {background: var(--dc-press) !important;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-picker {gap: 2px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-btn {height: 40px; padding: 0 12px 0 11px !important; gap: 7px !important; border: 0 !important; border-radius: 20px !important;
  background: transparent !important; color: var(--dc-ink) !important; transition: background .16s ease;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-btn .mode-btn-label {font: 600 15px/1 var(--dc-font) !important; letter-spacing: -.01em; color: var(--dc-ink) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-btn #mode-btn-icon {width: 17px !important; height: 17px !important; color: var(--dc-ink2) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-btn.realtime-active #mode-btn-icon {color: var(--dc-dot) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-btn .mode-chevron {width: 14px !important; height: 14px !important; color: var(--dc-ink3) !important; transition: transform .16s ease;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-picker:has(#mode-dropdown.open) #mode-btn {background: var(--dc-press) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-picker:has(#mode-dropdown.open) #mode-btn .mode-chevron {transform: rotate(180deg); color: var(--dc-ink2) !important;}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-btn:hover {background: var(--dc-press) !important;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-dropdown, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-dropdown, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #pp-menu {background: var(--dc-sheet) !important; border: 1px solid var(--dc-line) !important; border-radius: 18px !important;
  box-shadow: var(--dc-shadow) !important; padding: 6px !important; box-sizing: border-box;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-dropdown {width: 340px !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-dropdown {width: 320px !important; min-width: 320px !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-dropdown .drop-section-lbl, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-dropdown > div:first-child {font: 600 11px/1 var(--dc-font) !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--dc-ink3) !important; padding: 12px 12px 8px !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-dropdown .model-opt, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-dropdown .mode-opt {min-height: 56px !important; border-radius: 12px !important; background: transparent !important; color: var(--dc-ink) !important;
  border: 0 !important; box-shadow: none !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-dropdown .mode-opt {padding: 8px 12px !important; gap: 12px !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-dropdown .model-opt.active, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-dropdown .mode-opt.active {background: var(--dc-press) !important;}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-dropdown .model-opt:not(:disabled):hover, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-dropdown .mode-opt:not(.locked):hover {background: var(--dc-press) !important;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(#model-dropdown .model-opt, #mode-dropdown .mode-opt):focus-visible {outline: 2px solid var(--dc-dot); outline-offset: -2px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-dropdown .model-opt-name, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-dropdown .mode-opt-name {font: 500 15px/1.3 var(--dc-font) !important; color: var(--dc-ink) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-dropdown .model-opt-desc, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-dropdown .mode-opt-desc {font: 400 12.5px/1.35 var(--dc-font) !important; color: var(--dc-ink3) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-dropdown .model-opt:disabled .model-opt-name {color: var(--dc-ink3) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-dropdown .model-opt:disabled .model-opt-desc {color: var(--dc-ink3) !important; opacity: .7;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(#model-dropdown .model-opt-check, #mode-dropdown .mode-opt-check) {color: var(--dc-ink) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-dropdown .mode-opt-icon {width: 36px !important; height: 36px !important; border-radius: 10px !important; border: 0 !important; background: var(--dc-press) !important; color: var(--dc-ink2) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-dropdown .mode-opt.active .mode-opt-icon {background: var(--dc-sheet) !important; box-shadow: 0 0 0 1px var(--dc-line); color: var(--dc-ink) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-dropdown .mode-opt.locked {opacity: .55;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #mode-dropdown .tier-lock {color: #9a4a06; background: rgba(180, 83, 9, .08); border-color: rgba(180, 83, 9, .28);}
  html.tye-ts[data-theme="dark"][data-ts-view="chat"] body:not(.cad-fullscreen) #mode-dropdown .tier-lock {color: #f0b265; background: rgba(240, 178, 101, .12); border-color: rgba(240, 178, 101, .35);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #pp-menu .pp-item {min-height: 44px; border-radius: 12px; color: var(--dc-ink);}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #pp-menu .pp-item:hover {background: var(--dc-press) !important;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #pp-menu .pp-item {color: var(--dc-ink) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #pp-menu .pp-items {padding: 0;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #pp-menu .pp-item-name {font: 500 15px/1.3 var(--dc-font);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #panel-picker-btn.active {background: var(--dc-press) !important; color: var(--dc-ink) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #pp-menu .pp-item.active {background: var(--dc-press) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #pp-menu .pp-item.active .pp-item-ico, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #pp-menu .pp-item-check {color: var(--dc-ink) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #pp-menu .pp-item:focus-visible {outline: 2px solid var(--dc-dot); outline-offset: -2px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar {background: var(--bg); border-right: 1px solid var(--dc-line);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sb-hdr {padding: 12px 10px 4px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sb-actions {gap: 6px; align-items: center;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #new-chat-btn {height: 40px; padding: 0 14px !important; justify-content: center; justify-content: safe center; gap: 8px !important; min-width: 0; border: 0 !important; border-radius: 20px !important;
  background: var(--dc-ink) !important; color: var(--dc-sheet) !important; font: 600 14px/1 var(--dc-font) !important; box-shadow: none !important;
  transition: transform .12s ease, opacity .16s ease;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #new-chat-btn svg {display: none !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #new-chat-btn .sb-btn-label {min-width: 0; overflow: hidden; text-overflow: ellipsis;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #new-chat-btn::before {content: ''; flex: none; width: 18px; height: 18px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'/%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'/%3E%3Cpath d='M16 5l3 3'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'/%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'/%3E%3Cpath d='M16 5l3 3'/%3E%3C/svg%3E") center / 18px 18px no-repeat;}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #new-chat-btn:hover {opacity: .88;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #new-chat-btn:active {transform: scale(.97);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #new-proj-btn, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sess-mgr-btn, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-chat-rail {width: 40px !important; height: 40px !important; flex: none; padding: 0; border: 0 !important; border-radius: 20px !important;
  background: transparent !important; color: var(--dc-ink2) !important; display: inline-flex; align-items: center; justify-content: center;
  transition: background .16s ease, color .16s ease;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(#new-proj-btn, #sess-mgr-btn, #sb-chat-rail) svg {width: 20px; height: 20px;}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar :is(#new-proj-btn, #sess-mgr-btn, #sb-chat-rail):hover {background: var(--dc-press) !important; color: var(--dc-ink) !important;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar #sb-chat-rail.open {background: var(--dc-press) !important; color: var(--dc-ink) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(#new-chat-btn, #new-proj-btn, #sess-mgr-btn, #sb-chat-rail, #sb-acc-row):focus-visible {outline: 2px solid var(--dc-dot); outline-offset: 2px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .side-group-label {padding: 14px 16px 6px; font: 600 13px/1.3 var(--dc-font); letter-spacing: 0; text-transform: none; color: var(--dc-ink3);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar #session-list {padding: 0 8px 8px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item {position: relative; display: flex !important; align-items: center !important; gap: 11px;
  min-height: 56px !important; margin: 0 0 2px !important; padding: 7px 6px 7px 7px !important; box-sizing: border-box;
  border: 0 !important; border-radius: 14px !important; background: transparent !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item::before {content: ''; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--dc-press);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item::after {content: ''; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none;
  background-color: var(--dc-ink2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item:has(.sess-cad-badge)::before {background: var(--dc-dotbg);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item:has(.sess-cad-badge)::after {background-color: var(--dc-dot);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E");}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item.active {background: var(--dc-press) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item.active::before {background: var(--dc-sheet); box-shadow: 0 0 0 1px var(--dc-line);}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item:not(.active):hover {background: var(--dc-hover) !important;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item.sess-shared-other {border-left: 0 !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item .sess-info {flex: 1 1 auto; min-width: 0; padding: 0 !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item .sess-title {font: 500 14.5px/20px var(--dc-font) !important; color: var(--dc-ink) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item.active .sess-title {font-weight: 600 !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item .sess-meta {display: flex; align-items: center; gap: 6px; height: 16px; margin-top: 1px; min-width: 0; overflow: hidden;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item .sess-time {font: 400 12.5px/16px var(--dc-font) !important; color: var(--dc-ink3) !important; white-space: nowrap;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item .sess-cad-badge {flex: none; display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 8px; border: 0;
  background: var(--dc-dotbg) !important; color: var(--dc-dot) !important; font: 600 10px/1 var(--dc-font); letter-spacing: .02em;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item .sess-team-pill {flex: 0 1 auto; min-width: 0; max-width: 60%; height: 16px; padding: 0 6px; box-sizing: border-box;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block !important; line-height: 14px; vertical-align: middle;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item .sess-team-pill svg {vertical-align: -1px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-menu-btn {width: 32px; height: 32px; padding: 0; border: 0; border-radius: 16px; background: transparent !important; color: var(--dc-ink3) !important;
  align-items: center; justify-content: center;}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-menu-btn:hover {background: var(--dc-line) !important; color: var(--dc-ink) !important;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-menu-btn.active {background: var(--dc-line) !important; color: var(--dc-ink) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item:not(.active):has(.sess-menu-btn.active) {background: var(--dc-hover) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-empty-hint {padding: 12px 16px; font: 500 14px/1.4 var(--dc-font); color: var(--dc-ink3);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .proj-hdr {min-height: 52px; border-radius: 14px; gap: 11px; padding: 7px 6px 7px 7px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .proj-icon {width: 36px; height: 36px; border-radius: 11px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .proj-name {font: 600 14.5px/20px var(--dc-font); color: var(--dc-ink);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .proj-body {padding-left: 16px;}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .proj-hdr:hover {background: var(--dc-hover);}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar-footer {padding: 8px; border-top: 1px solid var(--dc-line);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-row {padding: 8px !important; gap: 11px; border: 0; border-radius: 16px !important; background: transparent; transition: background .16s ease;}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-row:hover {background: var(--dc-press) !important;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar-footer:has(.sb-acc-popup.open) #sb-acc-row {background: var(--dc-press) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-avatar {width: 36px; height: 36px; border-radius: 50% !important; font: 600 14px/1 var(--dc-font);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-name {font: 600 14px/18px var(--dc-font); color: var(--dc-ink);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-sub {font: 400 12.5px/16px var(--dc-font); color: var(--dc-ink3);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-row .sb-acc-caret {color: var(--dc-ink3);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup {background: var(--dc-sheet) !important; border: 1px solid var(--dc-line) !important; border-radius: 18px !important;
  box-shadow: var(--dc-shadow) !important; padding: 6px !important; min-width: 300px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-head {gap: 12px; padding: 10px 10px 12px; align-items: center;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-avatar {width: 44px; height: 44px; border-radius: 50% !important; font: 600 17px/1 var(--dc-font);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-name {font: 600 16px/1.25 var(--dc-font); color: var(--dc-ink);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-email {font: 400 13px/1.3 var(--dc-font); color: var(--dc-ink3);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup #sb-org-pill-btn {margin: 0 0 6px; border: 0; border-radius: 14px; background: var(--dc-press);}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup #sb-org-pill-btn:hover {box-shadow: inset 0 0 0 999px var(--dc-hover);}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-usage-row {padding: 4px 12px 0; font: 400 12.5px/1.4 var(--dc-font); color: var(--dc-ink3);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-usage-bar {margin: 6px 12px 8px; height: 4px; border-radius: 2px; background: var(--dc-press);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-usage-fill {background: var(--dc-ink) !important; border-radius: 2px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup :is(.sb-pop-sep, .sb-pop-div) {height: 1px; margin: 6px 10px; background: var(--dc-line); border: 0;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item {min-height: 36px; padding: 0 12px !important; gap: 12px !important; border-radius: 12px !important; background: transparent;
  font: 500 15px/1.2 var(--dc-font) !important; color: var(--dc-ink) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item > svg {width: 20px !important; height: 20px !important; color: var(--dc-ink2); flex: none;}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item:hover {background: var(--dc-press) !important;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item:focus-visible {outline: 2px solid var(--dc-dot); outline-offset: -2px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item.danger, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item[onclick*="Logout"], html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item[onclick*="logout"] {color: var(--dc-dot) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-pop-item:is(.danger, [onclick*="Logout"], [onclick*="logout"]) > svg {color: var(--dc-dot);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .sb-theme-parent-wrap[data-dc="1"] {display: none !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .dc-theme-row {display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 6px 0 12px; font: 500 15px/1.2 var(--dc-font); color: var(--dc-ink);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .dc-theme-row > svg {width: 20px; height: 20px; color: var(--dc-ink2); flex: none;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .dc-tseg {margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--dc-press);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .dc-tseg button {border: 0; background: transparent; color: var(--dc-ink2); font: 600 12.5px/1 var(--dc-font); padding: 7px 10px; border-radius: 9px; cursor: pointer;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .dc-tseg button[aria-checked="true"] {background: var(--dc-ink); color: var(--dc-sheet);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sb-acc-popup .dc-tseg button:focus-visible {outline: 2px solid var(--dc-dot); outline-offset: 1px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar.collapsed {width: 64px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar.collapsed .sb-hdr {padding: 10px 0 0; align-items: center;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar.collapsed .sb-actions {flex: none; gap: 2px; padding: 4px; border-radius: 26px; background: var(--dc-surface); border: 1px solid var(--dc-line); box-shadow: var(--dc-shadow);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar.collapsed #new-chat-btn {width: 44px !important; height: 44px !important; padding: 0 !important; border-radius: 22px !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar.collapsed #new-proj-btn, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar.collapsed #sess-mgr-btn {width: 44px !important; height: 44px !important; border-radius: 22px !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar.collapsed #sb-sessions-rail {display: flex !important; justify-content: center; margin-top: 8px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar.collapsed #sb-sessions-popup {max-height: min(70vh, calc(100vh - 240px)) !important; overflow-y: auto;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar.collapsed #sb-chat-rail {width: 44px !important; height: 44px !important; border-radius: 22px !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar.collapsed #sidebar-footer {border-top: 0; display: flex; justify-content: center;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar.collapsed #sb-acc-row {padding: 4px !important; border-radius: 22px !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #chat .tye-tour-launch {height: 44px; padding: 0 8px 0 7px !important; gap: 10px !important; border-radius: 22px !important;
  background: var(--dc-sheet) !important; border: 1px solid var(--dc-line) !important; box-shadow: 0 1px 2px rgba(17, 20, 28, .05) !important;
  color: var(--dc-ink) !important; font: 500 14px/1 var(--dc-font) !important; display: inline-flex !important; align-items: center;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #chat .tye-tour-launch .ttl-icon {width: 30px !important; height: 30px !important; border-radius: 15px !important; background: var(--dc-dotbg) !important; color: var(--dc-dot) !important; display: inline-grid; place-items: center;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #chat .tye-tour-launch .ttl-meta {height: 24px; padding: 0 9px !important; border-radius: 12px !important; border: 0 !important; background: var(--dc-press) !important; color: var(--dc-ink2) !important;
  font: 600 10.5px/24px var(--dc-font) !important; letter-spacing: .08em !important; text-transform: uppercase;}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #chat .tye-tour-launch:hover {background: var(--dc-press) !important;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #chat .msg.user .bubble {background: var(--dc-press) !important; border: 0 !important; border-radius: 20px !important; padding: 10px 16px !important; color: var(--dc-ink) !important;}
@media (prefers-reduced-motion: reduce) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(#model-btn, #mode-btn, #mode-btn .mode-chevron, #new-chat-btn, #sb-acc-row), html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-btn::after {transition: none !important;}
}
@media (forced-colors: active) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #new-chat-btn::before, html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #model-btn::after {background-color: ButtonText !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .sess-item::after {background-color: CanvasText !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #new-chat-btn {border: 1px solid ButtonText !important;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) {z-index: 10002; box-sizing: border-box; min-width: 256px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
  padding: 6px !important; overflow: hidden auto; overscroll-behavior: contain; outline: none;
  background: var(--dc-sheet, #ffffff) !important; border: 1px solid var(--dc-line, rgba(17, 20, 28, .10)) !important; border-radius: 18px;
  box-shadow: var(--dc-shadow, 0 10px 30px rgba(17, 20, 28, .12), 0 2px 8px rgba(17, 20, 28, .06)) !important;
  font-family: var(--dc-font, Inter, system-ui, sans-serif);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(#gx-move-sub) {z-index: 10003; min-width: 180px; max-width: min(320px, calc(100vw - 16px));}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub).open {animation: cmMenuIn .15s var(--dc-ease, cubic-bezier(.32, .72, 0, 1)) both;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) button {display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; margin: 0; padding: 0 12px; box-sizing: border-box;
  border: 0; border-radius: 12px; background: transparent; color: var(--dc-ink, #101114); cursor: pointer;
  font: 500 15px/1.2 var(--dc-font, Inter, system-ui, sans-serif); letter-spacing: 0; text-align: left; white-space: nowrap;
  transition: background-color .12s ease;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) button > svg {width: 20px; height: 20px; flex: none; opacity: 1; color: var(--dc-ink2, #3b3f46);}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) button > svg.sess-dd-chevron {width: 16px; height: 16px; margin-left: auto; color: var(--dc-ink3, #636a76);}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) button:hover {background: var(--dc-press, rgba(17, 20, 28, .07)); color: var(--dc-ink, #101114);}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) button[aria-expanded="true"] {background: var(--dc-press, rgba(17, 20, 28, .07));}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) :is(button, .sess-dd-hint):focus-visible {outline: 2px solid var(--dc-dot, #e5322a); outline-offset: -2px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) :is(button, .sess-dd-hint):focus:not(:focus-visible) {outline: none;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) .sess-dd-sep {height: 1px; margin: 6px 10px; border: 0; background: var(--dc-line, rgba(17, 20, 28, .10));}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) :is(.sess-dd-del, .sess-dd-del > svg) {color: var(--cm-del, #c8261e) !important; opacity: 1 !important;}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) .sess-dd-del:hover {background: var(--cm-delbg, rgba(229, 50, 42, .10)) !important;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) .sess-dd-hint {padding: 10px 12px; font: 400 12.5px/1.4 var(--dc-font, Inter, system-ui, sans-serif); font-style: normal; color: var(--dc-ink3, #636a76);
  text-align: left; white-space: normal; border-radius: 12px; cursor: default;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(#gx-move-sub) .proj-sub-dot {width: 10px; height: 10px; margin: 0 5px; border: 0; border-radius: 3px; flex: none; box-sizing: border-box;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(#gx-move-sub) .proj-sub-dot.is-general {background: transparent; box-shadow: inset 0 0 0 1.5px var(--dc-line2, rgba(17, 20, 28, .24));}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(#gx-move-sub) .gx-mv-name {flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(#gx-move-sub) button > svg.gx-mv-check {width: 16px; height: 16px; margin-left: 4px; color: var(--dc-dot, #e5322a);}
@media (pointer: coarse) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) button {min-height: 44px;}
}
@media (prefers-reduced-motion: reduce) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub).open {animation: none;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) :is(.sess-dropdown, #gx-move-sub) button {transition: none;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .proj-menu-btn {width: 32px; height: 32px; padding: 0; border: 0; border-radius: 16px; background: transparent !important; color: var(--dc-ink3, #636a76) !important;
  align-items: center; justify-content: center; flex: none;}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .proj-menu-btn:hover {background: var(--dc-line, rgba(17, 20, 28, .10)) !important; color: var(--dc-ink, #101114) !important;}
}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .proj-menu-btn.active {background: var(--dc-line, rgba(17, 20, 28, .10)) !important; color: var(--dc-ink, #101114) !important;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar .proj-hdr:has(.proj-menu-btn.active) {background: var(--dc-hover, rgba(17, 20, 28, .05));}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar :is(.sess-menu-btn, .proj-menu-btn) > svg {width: 18px; height: 18px;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar :is(.sess-item, .proj-hdr, .sess-menu-btn, .proj-menu-btn):focus-visible {outline: 2px solid var(--dc-dot, #e5322a); outline-offset: -2px;}
@media (hover: hover) {
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar :is(.sess-menu-btn, .proj-menu-btn) {display: inline-flex !important; width: 0; min-width: 0; opacity: 0; overflow: hidden;}
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar :is(.sess-item:hover .sess-menu-btn, .sess-item:focus-within .sess-menu-btn, .sess-menu-btn.active, .proj-hdr:hover .proj-menu-btn, .proj-hdr:focus-within .proj-menu-btn, .proj-menu-btn.active) {width: 32px; opacity: 1;}
}
  /* a tap leaves :hover on iOS: the rail buttons rest clear again unless their popup is open */
  @media (hover: none) {
    html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar.collapsed :is(#new-proj-btn, #sess-mgr-btn, #sb-chat-rail):not(.open):hover { background: transparent !important; }
  }
  /* the collapsed rail's chat list ends above the floating tab bar */
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar.collapsed #sb-sessions-popup { max-height: min(70vh, calc(100dvh - 240px - var(--ts-space, 98px))) !important; }
  /* no hover on touch: a chat row's menu button is always there, as on the Projects screen */
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #sidebar :is(.sess-menu-btn, .proj-menu-btn) { display: inline-flex !important; width: 36px; height: 36px; border-radius: 18px; touch-action: manipulation; }
}
/* ============================== END DESKTOP_CHAT_WIDE_TOUCH_2026Q4 ============================== */