/* ============================== DESKTOP_CAD_2026Q4 ==================================
   The desktop CAD pane - the top bar, the Sketch Solid / 3D / Drawing ribbons, the Drawing menu bar and status bar, the 3D
   toolbar row, the dropdown cards and the floating rails - in the touch shell's material (owner, 2026-10-02: "redesign the
   Drawing tab, Sketch Solid tab and 3D tab to match the mobile theme, keeping the same colours"), plus the chat collapse.
   Material = --ts-* / --bb-* / --dc-* (sheet, surface, line, ink, press, shadow, Inter); every accent stays as it was:
   each ribbon's --tabcolor, the 3D tab blue, the red CONT/SNAP on, the sketch icon colours, status dots, the rail blue,
   the unit chip blue, the red accent. Only surfaces, borders, radii, heights, shadows, type and spacing change.
   Scope: html:not(.tye-ts) on every rule - the touch shell (every phone and tablet) stays byte for byte. The CAD chrome is
   NOT scoped body:not(.cad-fullscreen): Fit Screen / Fullscreen show the same chrome, maximised. Only the chat-collapse
   block is (the floating chat of CAD fullscreen is its own thing).
   Never set here: display on a ribbon, a strip, a rail, .hdr or .sbar (JS and View Mode own it); transform / filter /
   backdrop-filter / contain / will-change on #cad-panel, #vp-cad, the ribbons, strips, groups, .vp-tabs or #zoom-widget
   (the ribbon flyouts and the zoom menu are position:fixed descendants). The runtime-injected sheets load after this one
   and carry !important, so these rules win on specificity: html:not(.tye-ts) body #cad-panel ... (+ a second id).
   ================================================================================================================ */

html:not(.tye-ts) {
  --dcad-sheet: #ffffff; --dcad-surface: rgba(255, 255, 255, .94); --dcad-hdr: rgba(255, 255, 255, .92);
  --dcad-line: rgba(17, 20, 28, .10); --dcad-line2: rgba(17, 20, 28, .24);
  --dcad-ink: #101114; --dcad-ink2: #3b3f46; --dcad-ink3: #636a76;
  --dcad-press: rgba(17, 20, 28, .07); --dcad-hover: rgba(17, 20, 28, .045);
  --dcad-shadow: 0 10px 30px rgba(17, 20, 28, .12), 0 2px 8px rgba(17, 20, 28, .06);
  --dcad-seg: #ffffff; --dcad-seg-shadow: 0 1px 3px rgba(235, 56, 38, .16), 0 1px 2px rgba(0, 0, 0, .10);
  --dcad-font: Inter, 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dcad-dot: #e5322a;
}
html[data-theme="dark"]:not(.tye-ts) {
  --dcad-sheet: #1c1d21; --dcad-surface: rgba(30, 31, 35, .92); --dcad-hdr: rgba(8, 8, 8, .92);
  --dcad-line: rgba(255, 255, 255, .10); --dcad-line2: rgba(255, 255, 255, .26);
  --dcad-ink: #f2f3f5; --dcad-ink2: #c9cdd4; --dcad-ink3: #9aa1ad;
  --dcad-press: rgba(255, 255, 255, .10); --dcad-hover: rgba(255, 255, 255, .06);
  --dcad-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35);
  --dcad-seg: rgba(255, 255, 255, .14); --dcad-seg-shadow: none;
  --dcad-dot: #ff4d42;
}

/* =========================================== 1. the CAD top bar =========================================== */
/* 57px = the chat header's 56 + its hairline, so the two bottom lines meet across the split */
html:not(.tye-ts) body #cad-panel .vp-tabs {
  box-sizing: border-box !important; height: 57px !important; min-height: 57px !important; flex: none !important;
  padding: 0 10px 0 12px !important; gap: 0 !important; align-items: center !important;
  background: var(--dcad-hdr) !important; border-bottom: 1px solid var(--dcad-line) !important; box-shadow: none !important;
}
/* Drawing | Sketch Solid | 3D = the house segmented control. The three buttons are siblings with no wrapper, so the track
   is their own background (ends rounded 12) and the selected card is a ::before inset 3px (radius 9), 3px apart */
html:not(.tye-ts) body #cad-panel .vp-tabs > button.vp-tab {
  position: relative !important; z-index: 0 !important; top: 0 !important; flex: none !important;
  box-sizing: border-box !important; height: 42px !important; min-height: 0 !important; margin: 0 !important;
  padding: 0 16px 0 15px !important; gap: 7px !important; align-items: center !important;
  border: 0 !important; border-radius: 0 !important; background: var(--dcad-press) !important; box-shadow: none !important;
  color: var(--dcad-ink2) !important; font: 600 13px/1 var(--dcad-font) !important; letter-spacing: 0 !important; white-space: nowrap;
  transition: color .15s ease !important;
}
html:not(.tye-ts) body #cad-panel .vp-tabs > button#vp-btn-cad.vp-tab { border-radius: 12px 0 0 12px !important; padding-left: 17px !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs > button#vp-btn-3d.vp-tab { border-radius: 0 12px 12px 0 !important; padding-right: 17px !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs > button.vp-tab::before {
  content: '' !important; display: block !important; position: absolute !important; z-index: -1 !important;
  top: 3px !important; bottom: 3px !important; left: 1px !important; right: 2px !important; width: auto !important; height: auto !important;
  border: 0 !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important;
  pointer-events: none !important; transition: background-color .15s ease !important;
}
html:not(.tye-ts) body #cad-panel .vp-tabs > button#vp-btn-cad.vp-tab::before { left: 3px !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs > button#vp-btn-3d.vp-tab::before { right: 3px !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs > button.vp-tab.active { color: var(--dcad-ink) !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs > button.vp-tab.active::before { background: var(--dcad-seg) !important; box-shadow: var(--dcad-seg-shadow) !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs > button.vp-tab:not(.active):hover { color: var(--dcad-ink) !important; background: var(--dcad-press) !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs > button.vp-tab:not(.active):hover::before { background: var(--dcad-hover) !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs > button.vp-tab:focus-visible { outline: 2px solid var(--dcad-dot) !important; outline-offset: -2px !important; }
/* the icons keep their colours (3D: #7ab8f5 idle, #8fbdf7 selected - their own rules); one icon gap for all three */
html:not(.tye-ts) body #cad-panel .vp-tabs > button.vp-tab > .ti { font-size: 16px !important; margin: 0 !important; opacity: 1 !important; }
/* (dark: the 3D tab's selected label stays its blue, as today) */
html[data-theme="dark"]:not(.tye-ts) body #cad-panel .vp-tabs > button.vp-tab.t3d.active { color: #8fbdf7 !important; }

/* the document pill: inline right after the switch (no longer centred over the tabs), shrinking with an ellipsis */
html:not(.tye-ts) body #cad-panel .vp-tabs > #tye-doc-status.is-docked,
html:not(.tye-ts) body #cad-panel .vp-tabs > #tye-doc-status.is-docked:hover {
  position: relative !important; left: auto !important; top: auto !important; transform: none !important;
  order: 1 !important; flex: 0 1 auto !important; min-width: 0 !important; max-width: 300px !important;
  box-sizing: border-box !important; height: 36px !important; margin: 0 8px 0 10px !important; padding: 0 12px 0 11px !important;
  gap: 8px !important; border-radius: 18px !important; overflow: hidden !important;
  background: var(--dcad-sheet) !important; border: 1px solid var(--dcad-line) !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: var(--dcad-ink) !important; font: 500 13px/1 var(--dcad-font) !important; letter-spacing: 0 !important;
  transition: background-color .15s ease !important;
}
html:not(.tye-ts) body #cad-panel .vp-tabs > #tye-doc-status.is-docked:hover { background: var(--dcad-press) !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs > #tye-doc-status.is-docked:focus-visible { outline: 2px solid var(--dcad-dot) !important; outline-offset: 1px !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs > #tye-doc-status > * { flex: none !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs > #tye-doc-status > .tye-ds-name {
  flex: 0 1 auto !important; min-width: 0 !important; max-width: 200px !important;
  font: 600 13px/1.3 var(--dcad-font) !important; color: var(--dcad-ink) !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
html:not(.tye-ts) body #cad-panel .vp-tabs > #tye-doc-status > .tye-ds-sep { width: 1px !important; height: 14px !important; background: var(--dcad-line) !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs > #tye-doc-status > .tye-ds-status { color: var(--dcad-ink3) !important; font: 500 12.5px/1 var(--dcad-font) !important; gap: 6px !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs > #tye-doc-status > .tye-ds-caret,
html:not(.tye-ts) body #cad-panel .vp-tabs > #tye-doc-status:hover > .tye-ds-caret { color: var(--dcad-ink3) !important; transform: none !important; }
/* a narrow CAD pane (the default 738px split at 1440): the switch tightens, the status keeps its dot but loses the word and
   the caret (the pill's title still says both), so the name keeps some room */
@container cad (max-width: 820px) {
  html:not(.tye-ts) body #cad-panel .vp-tabs > button.vp-tab { padding: 0 13px 0 12px !important; }
  html:not(.tye-ts) body #cad-panel .vp-tabs > button#vp-btn-cad.vp-tab { padding-left: 14px !important; }
  html:not(.tye-ts) body #cad-panel .vp-tabs > button#vp-btn-3d.vp-tab { padding-right: 14px !important; }
  html:not(.tye-ts) body #cad-panel .vp-tabs > #tye-doc-status.is-docked,
  html:not(.tye-ts) body #cad-panel .vp-tabs > #tye-doc-status.is-docked:hover { margin: 0 4px 0 8px !important; padding: 0 12px 0 11px !important; }
  html:not(.tye-ts) body #cad-panel .vp-tabs > #tye-doc-status > .tye-ds-status { font-size: 0 !important; gap: 0 !important; }
  html:not(.tye-ts) body #cad-panel .vp-tabs > #tye-doc-status > :is(.tye-ds-sep, .tye-ds-caret) { display: none !important; }
  html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right #zoom-widget.zoom-widget { margin: 0 2px 0 4px !important; }
}

/* the right group: Fit / Fit Screen / Fullscreen / Help as the chat header's 40px round buttons, zoom as a 36px pill */
html:not(.tye-ts) body #cad-panel .vp-tabs > .tye-vp-right {
  order: 2 !important; margin-left: auto !important; flex: none !important; height: auto !important;
  padding: 0 !important; gap: 2px !important; align-items: center !important; border-left: 0 !important;
}
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right .view-group {
  height: auto !important; margin: 0 !important; padding: 0 !important; gap: 2px !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right .view-group .vg-btn,
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right #tye-help-btn.tye-help-inline {
  position: relative; box-sizing: border-box !important; width: 40px !important; min-width: 40px !important; height: 40px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 20px !important;
  background: transparent !important; color: var(--dcad-ink2) !important; box-shadow: none !important;
  transition: background-color .16s ease, color .16s ease !important;
}
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right .view-group .vg-btn i { font-size: 20px !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right #tye-help-btn.tye-help-inline svg { width: 20px !important; height: 20px !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right .view-group .vg-btn:hover,
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right #tye-help-btn.tye-help-inline:hover { background: var(--dcad-press) !important; color: var(--dcad-ink) !important; }
/* (a view button that is on keeps its blue) */
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right .view-group .vg-btn.on { background: rgba(126, 184, 247, .16) !important; color: #8fbdf7 !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right :is(.vg-btn, #tye-help-btn):focus-visible { outline: 2px solid var(--dcad-dot) !important; outline-offset: -2px !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right #zoom-widget.zoom-widget {
  box-sizing: border-box !important; height: 36px !important; margin: 0 4px 0 6px !important; padding: 0 4px 0 12px !important;
  border: 0 !important; border-radius: 18px !important; background: var(--dcad-press) !important; box-shadow: none !important; gap: 0 !important;
}
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right #zoom-widget.zoom-widget:hover { background: var(--dcad-press) !important; box-shadow: inset 0 0 0 1px var(--dcad-line) !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right #zoom-widget.zoom-widget:focus-within { box-shadow: 0 0 0 2px rgba(126, 184, 247, .40) !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right #zoom-widget #zl {
  width: 36px !important; height: 28px !important; padding: 0 1px 0 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: var(--dcad-ink) !important; font: 600 13px/28px var(--dcad-font) !important;
  font-variant-numeric: tabular-nums !important; letter-spacing: 0 !important; text-align: right !important;
}
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right #zoom-widget .zoom-pct { color: var(--dcad-ink3) !important; font: 500 12px/1 var(--dcad-font) !important; margin: 0 2px 0 1px !important; }
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right #zoom-widget .zoom-chev {
  width: 28px !important; height: 28px !important; margin: 0 0 0 2px !important; border-radius: 14px !important; color: var(--dcad-ink3) !important; background: transparent !important;
}
html:not(.tye-ts) body #cad-panel .vp-tabs .tye-vp-right #zoom-widget .zoom-chev:hover { background: var(--dcad-press) !important; color: var(--dcad-ink) !important; }
/* the zoom menu (fixed, placed by JS): a card */
html:not(.tye-ts) body #cad-panel #zl-menu.zoom-menu {
  min-width: 168px !important; padding: 6px !important; border-radius: 20px !important;
  background: var(--dcad-sheet) !important; border: 1px solid var(--dcad-line) !important; box-shadow: var(--dcad-shadow) !important;
}
html:not(.tye-ts) body #cad-panel #zl-menu .zoom-item {
  padding: 10px 12px !important; border-radius: 12px !important; font: 500 13px/1 var(--dcad-font) !important; font-variant-numeric: tabular-nums !important;
}
html:not(.tye-ts) body #cad-panel #zl-menu .zoom-item:not(.current) { color: var(--dcad-ink) !important; background: transparent !important; }
html:not(.tye-ts) body #cad-panel #zl-menu .zoom-item:not(.current):hover { background: var(--dcad-press) !important; color: var(--dcad-ink) !important; }
html:not(.tye-ts) body #cad-panel #zl-menu .zoom-item.current { font-weight: 650 !important; }
html:not(.tye-ts) body #cad-panel #zl-menu .zoom-sep { height: 1px !important; margin: 5px 8px !important; background: var(--dcad-line) !important; border: 0 !important; }

/* ======================================= 2. the three ribbons ======================================= */
/* the sheet instead of the grey band; a hairline under the floating Sketch Solid ribbon (outside the box: no height change) */
html:not(.tye-ts) body #cad-panel #tye-solid-ribbon {
  background: var(--dcad-sheet) !important; color: var(--dcad-ink2) !important;
  box-shadow: 0 1px 0 var(--dcad-line) !important;
  --sk-halo: var(--dcad-sheet) !important;   /* (the sketch icons knock their strokes out in the ribbon's own colour) */
}
html:not(.tye-ts) body #cad-panel #tye-ribbon-ac,
html:not(.tye-ts) body #cad-panel #tye-ribbon-2d {
  background: var(--dcad-sheet) !important; color: var(--dcad-ink2) !important; font-family: var(--dcad-font) !important;
}
/* strips: a quiet 6px scrollbar in the line colour (light had a white-on-white thumb) */
html:not(.tye-ts) body #cad-panel :is(#tye-solid-ribbon > .tsr-strip, .tye-ac-strip)::-webkit-scrollbar { height: 6px !important; }
html:not(.tye-ts) body #cad-panel :is(#tye-solid-ribbon > .tsr-strip, .tye-ac-strip)::-webkit-scrollbar-track { background: transparent !important; }
html:not(.tye-ts) body #cad-panel :is(#tye-solid-ribbon > .tsr-strip, .tye-ac-strip)::-webkit-scrollbar-thumb { background: var(--dcad-line2) !important; border-radius: 3px !important; }

/* group dividers: visible hairlines in both themes (light ones were white-on-white) */
html:not(.tye-ts) body #cad-panel :is(#tye-solid-ribbon, #tye-ribbon-ac, #tye-ribbon-2d) :is(.tye-ac-panel, .tye-ac-panel-dd) {
  border-right: 0 !important;
  background: linear-gradient(var(--dcad-line), var(--dcad-line)) right center / 1px calc(100% - 16px) no-repeat !important;
}
html:not(.tye-ts) body #cad-panel :is(#tye-solid-ribbon, #tye-ribbon-ac, #tye-ribbon-2d) :is(.tye-ac-panel, .tye-ac-panel-dd):last-child { background: none !important; }
html:not(.tye-ts) body #cad-panel #tye-solid-ribbon .tye-ac-panel-inline + .tye-ac-panel-inline { border-left-color: var(--dcad-line) !important; }
/* the light theme's captions (dark has none - it is why the Sketch strip is 160 / 144): 10.5px, .08em, ink3 */
html[data-theme="light"]:not(.tye-ts) body #cad-panel #tye-solid-ribbon .tye-ac-panel-inline[data-cap]::after {
  bottom: 4px !important; font: 600 10.5px/1 var(--dcad-font) !important; letter-spacing: .08em !important; text-indent: .08em !important;
  color: var(--dcad-ink3) !important;
}

/* menu triggers (Create, Weldment ... / Views, Annotate ... / Basic, Adv, Text): radius 12, press on hover, the tab colour
   tint when open. The icon stays the 20px Tabler glyph in the tab colour (its own rules) */
html:not(.tye-ts) body #cad-panel .tye-ac-dd-trigger { border-radius: 12px !important; color: var(--dcad-ink) !important; }
html:not(.tye-ts) body #cad-panel .tye-ac-dd-trigger .tye-ac-dd-name { font: 600 12px/1.2 var(--dcad-font) !important; letter-spacing: 0 !important; }
html:not(.tye-ts) body #cad-panel .tye-ac-dd-trigger .tye-ac-dd-chev { color: var(--dcad-ink3) !important; opacity: 1 !important; }
html:not(.tye-ts) body #cad-panel .tye-ac-dd-trigger:not(.ddopen):hover { background: var(--dcad-press) !important; }
html:not(.tye-ts) body #cad-panel .tye-ac-panel-dd.open > .tye-ac-dd-trigger,
html:not(.tye-ts) body #cad-panel .tye-ac-panel-dd.open > .tye-ac-dd-trigger:hover { background: color-mix(in srgb, var(--tabcolor) 14%, transparent) !important; color: var(--tabcolor) !important; }
html:not(.tye-ts) body #cad-panel .tye-ac-panel-dd.open > .tye-ac-dd-trigger :is(.tye-ac-dd-name, .tye-ac-dd-chev) { color: var(--tabcolor) !important; }
html:not(.tye-ts) body #cad-panel .tye-ac-dd-trigger:focus-visible { outline: 2px solid var(--tabcolor) !important; outline-offset: -2px !important; }
/* the Sketch on/off toggle keeps its red wash when a sketch is open (it is .ddopen, not .open) */
html:not(.tye-ts) body #cad-panel #tye-solid-ribbon .tye-ac-panel-inline .tye-ac-dd-trigger[data-group="sketchtoggle"].ddopen { border-radius: 12px !important; }

/* the Sketch strip's inline tools: radius 10, the press grey on hover; .on (armed / current plane) keeps its red */
html:not(.tye-ts) body #cad-panel #tye-solid-ribbon .tsr-inline-item { border-radius: 10px !important; }
html:not(.tye-ts) body #cad-panel #tye-solid-ribbon .tsr-inline-item:not(:disabled):not(.on):hover { background: var(--dcad-press) !important; border-color: transparent !important; }
html:not(.tye-ts) body #cad-panel #tye-solid-ribbon .tsr-inline-input:not(:disabled):not(:focus) { border-radius: 10px !important; border-color: var(--dcad-line2) !important; background: var(--dcad-hover) !important; }
html:not(.tye-ts) body #cad-panel #tye-solid-ribbon .tsr-inline-input { border-radius: 10px !important; }

/* ---------- sub-tab bars (owner 2026-10-03: variant A): no grey band, 30px chips; the strip gives the 6px back so the ribbon
   heights stay exactly 160 / 144 (Sketch) and 104 (the others) ---------- */
html:not(.tye-ts) body #cad-panel #tye-solid-ribbon > .tsr-strip,
html:not(.tye-ts) body #cad-panel :is(#tye-ribbon-ac, #tye-ribbon-2d) > .tye-ac-strip { padding-top: 1px !important; padding-bottom: 1px !important; }
html:not(.tye-ts) body #cad-panel :is(#tye-solid-ribbon, #tye-ribbon-ac, #tye-ribbon-2d) > .tye-ac-tabs {
  box-sizing: border-box !important; height: 36px !important; min-height: 36px !important; padding: 0 10px !important; gap: 2px !important;
  align-items: center !important; background: transparent !important; border-top: 1px solid var(--dcad-line) !important;
}
html:not(.tye-ts) body #cad-panel :is(#tye-solid-ribbon, #tye-ribbon-ac, #tye-ribbon-2d) > .tye-ac-tabs > .tye-ac-tab {
  box-sizing: border-box !important; height: 30px !important; margin: 0 !important; padding: 0 14px !important;
  border: 0 !important; border-radius: 15px !important; background: transparent !important; box-shadow: none !important;
  color: var(--dcad-ink2) !important; font: 600 12.5px/30px var(--dcad-font) !important; letter-spacing: 0 !important;
  transition: background-color .15s ease, color .15s ease !important;
}
html:not(.tye-ts) body #cad-panel :is(#tye-solid-ribbon, #tye-ribbon-ac, #tye-ribbon-2d) > .tye-ac-tabs > .tye-ac-tab:not(.active):not(.tsr-tab-lock):hover { background: var(--dcad-press) !important; color: var(--dcad-ink) !important; }
/* selected: the same tab-colour tint and text as today (16%; the light 3D / Drawing ribbons 14%) */
html:not(.tye-ts) body #cad-panel :is(#tye-solid-ribbon, #tye-ribbon-ac, #tye-ribbon-2d) > .tye-ac-tabs > .tye-ac-tab.active {
  background: color-mix(in srgb, var(--tabcolor) 16%, transparent) !important; color: var(--tabcolor) !important; font-weight: 700 !important;
}
html[data-theme="light"]:not(.tye-ts) body #cad-panel :is(#tye-ribbon-ac, #tye-ribbon-2d) > .tye-ac-tabs > .tye-ac-tab.active { background: color-mix(in srgb, var(--tabcolor) 14%, transparent) !important; }
html:not(.tye-ts) body #cad-panel :is(#tye-solid-ribbon, #tye-ribbon-ac, #tye-ribbon-2d) > .tye-ac-tabs > .tye-ac-tab:focus-visible { outline: 2px solid var(--tabcolor) !important; outline-offset: -2px !important; }
/* the units chip stays at the right, a pill in its own blue */
html:not(.tye-ts) body #cad-panel #tye-solid-ribbon > .tye-ac-tabs > .tsr-unit:not([hidden]) {
  height: 24px !important; padding: 0 9px !important; border-radius: 12px !important; font-family: var(--dcad-font) !important;
}
html:not(.tye-ts) body #cad-panel #tye-solid-ribbon > .tye-ac-tabs > .tsr-unit > span { height: 22px !important; line-height: 22px !important; }

/* ===================================== 3. dropdown cards (all three ribbons, Export) ===================================== */
html:not(.tye-ts) body #cad-panel .tye-ac-dd-flyout {
  margin-top: 4px !important; padding: 8px !important; border-radius: 20px !important;
  background: var(--dcad-sheet) !important; border: 1px solid var(--dcad-line) !important; box-shadow: var(--dcad-shadow) !important;
  scrollbar-color: var(--dcad-line2) transparent !important;
}
html:not(.tye-ts) body #cad-panel .tye-ac-dd-flyout::-webkit-scrollbar-track { background: transparent !important; }
html:not(.tye-ts) body #cad-panel .tye-ac-dd-flyout::-webkit-scrollbar-thumb { background: var(--dcad-line2) !important; }
html:not(.tye-ts) body #cad-panel .tye-ac-dd-flyout .tye-ac-dd-item { border-radius: 12px !important; color: var(--dcad-ink); font-family: var(--dcad-font) !important; }
html:not(.tye-ts) body #cad-panel .tye-ac-dd-flyout .tye-ac-dd-item span { font-family: var(--dcad-font) !important; font-weight: 500 !important; }
html:not(.tye-ts) body #cad-panel .tye-ac-dd-flyout .tye-ac-dd-item:not(.tye-ac-active-tool):hover { background: var(--dcad-press) !important; color: var(--tabcolor) !important; }
html:not(.tye-ts) body #cad-panel .tye-ac-dd-flyout .tye-ac-dd-item:focus-visible { outline: 2px solid var(--tabcolor) !important; outline-offset: -2px !important; }

/* ==================================== 4. Drawing: the menu bar ==================================== */
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr:not(.collapsed) {
  box-sizing: border-box !important; height: 48px !important; min-height: 48px !important;
  padding: 0 10px !important; gap: 2px !important;
  background: var(--dcad-surface) !important; border-bottom: 1px solid var(--dcad-line) !important; box-shadow: none !important;
}
/* File / Annotate / Edit / Calc / Design / Parametric / Make / Manage / More: ghost buttons, radius 10, their chevrons */
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .tb-trigger,
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tb-more-btn {
  height: 36px !important; padding: 0 12px !important; border: 0 !important; border-radius: 10px !important;
  background: transparent !important; box-shadow: none !important; color: var(--dcad-ink2) !important;
  font: 600 13px/1 var(--dcad-font) !important; letter-spacing: 0 !important;
}
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .tb-trigger .ti,
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tb-more-btn .ti { font-size: 16px !important; opacity: 1 !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .tb-trigger:hover,
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .tb-group.open > .tb-trigger,
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tb-more-btn:hover { background: var(--dcad-press) !important; color: var(--dcad-ink) !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .tb-trigger:focus-visible,
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tb-more-btn:focus-visible { outline: 2px solid var(--dcad-dot) !important; outline-offset: -2px !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr > .sep { width: 1px !important; height: 20px !important; margin: 0 6px !important; background: var(--dcad-line) !important; }
/* SNAP / OSNAP / ORTHO / CONT: ONE track (press grey, radius 12, padding 3); a toggle that is on keeps its red tint and
   red text on a 30px card. (z-index 2: the card sits behind the label; the hover tooltip still clears the ribbon) */
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tog {
  position: relative !important; z-index: 2 !important; box-sizing: border-box !important;
  height: 36px !important; margin: 0 !important; padding: 0 12px 0 11px !important; gap: 6px !important;
  border: 0 !important; border-radius: 0 !important; background: var(--dcad-press) !important; box-shadow: none !important;
  color: var(--dcad-ink2) !important; font: 600 12px/1 var(--dcad-font) !important; letter-spacing: .03em !important;
}
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr :is(#bOsnap, #bOrtho, #bCont).btn.tog { margin-left: -1px !important; }   /* (.tb's 1px flex gap would show as a seam in the track) */
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr #bSnap.btn.tog { border-radius: 12px 0 0 12px !important; padding-left: 13px !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr #bCont.btn.tog { border-radius: 0 12px 12px 0 !important; padding-right: 14px !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tog .ti { font-size: 15px !important; opacity: 1 !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tog::before {
  content: '' !important; display: block !important; position: absolute !important; z-index: -1 !important;
  top: 3px !important; bottom: 3px !important; left: 1px !important; right: 2px !important; width: auto !important; height: auto !important;
  transform: none !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important;
  pointer-events: none !important; transition: background-color .15s ease !important;
}
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr #bSnap.btn.tog::before { left: 3px !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr #bCont.btn.tog::before { right: 3px !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tog:not(.on):hover { background: var(--dcad-press) !important; color: var(--dcad-ink) !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tog:not(.on):hover::before { background: var(--dcad-hover) !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tog.on { color: #ff6a55 !important; background: var(--dcad-press) !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tog.on::before { background: rgba(232, 52, 31, .16) !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tog.on:hover { color: #ff8a78 !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tog.on:hover::before { background: rgba(232, 52, 31, .22) !important; }
html[data-theme="light"]:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tog.on { color: #c9271a !important; }
html[data-theme="light"]:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tog.on::before { background: rgba(232, 52, 31, .12) !important; }
html[data-theme="light"]:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tog.on:hover { color: #a3231a !important; }
html[data-theme="light"]:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tog.on:hover::before { background: rgba(232, 52, 31, .18) !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .btn.tog:focus-visible { outline: 2px solid var(--dcad-dot) !important; outline-offset: -2px !important; }
/* the save pill at the bar's end: a full pill, its state colours as they were */
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr #cad-save-status { border-radius: 999px !important; font-family: var(--dcad-font) !important; }

/* the Drawing status bar: a 32px strip on the sheet; tool + X/Y in their mono font, the counts / link / units as chips */
html:not(.tye-ts) body #cad-panel #vp-cad > .sbar {
  box-sizing: border-box !important; height: 32px !important; min-height: 32px !important; padding: 0 8px !important;
  background: var(--dcad-sheet) !important; color: var(--dcad-ink3) !important;
  border-top: 1px solid var(--dcad-line) !important; border-bottom: 1px solid var(--dcad-line) !important; box-shadow: none !important;
}
html:not(.tye-ts) body #cad-panel #vp-cad > .sbar .sb-lbl { color: var(--dcad-ink3) !important; font-family: var(--dcad-font) !important; font-size: 10px !important; letter-spacing: .06em !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .sbar #sb-coord { color: var(--dcad-ink2) !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .sbar .sb-divider { width: 1px !important; height: 14px !important; background: var(--dcad-line) !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .sbar .sb-spacer ~ .sb-divider { width: 0 !important; margin: 0 !important; background: none !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .sbar :is(#sb-selcount, #sb-entcount, #tye-assoc-badge) {
  box-sizing: border-box !important; height: 22px !important; margin: 0 2px !important; padding: 0 9px !important;
  border-radius: 11px !important; background: var(--dcad-press) !important;
}
html:not(.tye-ts) body #cad-panel #vp-cad > .sbar :is(#sb-entcount, #tye-assoc-badge) { color: var(--dcad-ink2) !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .sbar #sb-selcount:not([style*="#7eb8f7"]):not([style*="126, 184, 247"]) { color: var(--dcad-ink2) !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .sbar #tye-assoc-badge[style*="#10b981"],
html:not(.tye-ts) body #cad-panel #vp-cad > .sbar #tye-assoc-badge[style*="16, 185, 129"] { color: #10b981 !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .sbar .sb-units {
  box-sizing: border-box !important; height: 22px !important; margin-left: 4px !important; padding: 0 10px !important;
  display: inline-flex; align-items: center; border-radius: 11px !important;
}

/* ===================================== 5. the 3D toolbar row ===================================== */
html:not(.tye-ts) body #cad-panel #vp-3d > .v3d-hdr {
  box-sizing: border-box !important; height: 44px !important; min-height: 44px !important; padding: 0 8px !important; gap: 2px !important;
  background: var(--dcad-surface) !important; border-top: 0 !important; border-bottom: 1px solid var(--dcad-line) !important; box-shadow: none !important;
}
html:not(.tye-ts) body #cad-panel #vp-3d > .v3d-hdr .btn {
  box-sizing: border-box !important; height: 32px !important; padding: 0 9px 0 8px !important; gap: 6px !important; flex: none !important;
  border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important;
  color: var(--dcad-ink2) !important; font: 600 12.5px/1 var(--dcad-font) !important; letter-spacing: 0 !important; white-space: nowrap !important;
}
html:not(.tye-ts) body #cad-panel #vp-3d > .v3d-hdr .btn:not(.on):hover { background: var(--dcad-press) !important; color: var(--dcad-ink) !important; }
/* Wire / Grid / Axes / Shadow / Material keep their blue - in light too (the light theme had lost it to a grey) */
html[data-theme="dark"]:not(.tye-ts) body #cad-panel #vp-3d > .v3d-hdr .btn.blu:not(.on) { color: rgba(143, 189, 247, .85) !important; }
html[data-theme="dark"]:not(.tye-ts) body #cad-panel #vp-3d > .v3d-hdr .btn.blu:not(.on):hover { background: rgba(122, 184, 245, .10) !important; color: #bcd9ff !important; }
html[data-theme="light"]:not(.tye-ts) body #cad-panel #vp-3d > .v3d-hdr .btn.blu:not(.on) { color: #185fa5 !important; }
html[data-theme="light"]:not(.tye-ts) body #cad-panel #vp-3d > .v3d-hdr .btn.blu:not(.on):hover { background: rgba(55, 138, 221, .08) !important; color: #185fa5 !important; }
/* on: the blue tint as today */
html:not(.tye-ts) body #cad-panel #vp-3d > .v3d-hdr .btn.on { background: rgba(122, 184, 245, .18) !important; color: #bcd9ff !important; }
html[data-theme="light"]:not(.tye-ts) body #cad-panel #vp-3d > .v3d-hdr .btn.on { background: rgba(55, 138, 221, .16) !important; color: #185fa5 !important; }
html:not(.tye-ts) body #cad-panel #vp-3d > .v3d-hdr .btn:focus-visible { outline: 2px solid var(--dcad-dot) !important; outline-offset: -2px !important; }
html:not(.tye-ts) body #cad-panel #vp-3d > .v3d-hdr .btn .ti { font-size: 16px !important; }
html:not(.tye-ts) body #cad-panel #vp-3d > .v3d-hdr > .sep { width: 1px !important; height: 20px !important; margin: 0 4px !important; background: var(--dcad-line) !important; flex: none; }
/* "N solid · N line": one chip that never wraps (with no room left it ends in an ellipsis instead of breaking in two) */
html:not(.tye-ts) body #cad-panel #vp-3d > .v3d-hdr #v3d-info {
  flex: 0 1 auto !important; min-width: 0 !important; margin-left: auto !important; box-sizing: border-box; height: 26px; line-height: 26px !important;
  padding: 0 10px !important; border-radius: 13px; background: var(--dcad-press) !important; overflow: hidden !important; text-overflow: ellipsis !important;
  color: var(--dcad-ink3) !important; font: 500 11.5px/26px var(--dcad-font) !important; white-space: nowrap !important;
}
/* a narrow CAD pane (the split at 1280 gives it 578px): the toggles go icon-only - their titles still name them */
@container cad (max-width: 700px) {
  html:not(.tye-ts) body #cad-panel #vp-3d > .v3d-hdr .btn { font-size: 0 !important; gap: 0 !important; padding: 0 8px !important; min-width: 32px; justify-content: center; }
}

/* ======================================= 6. floating rails ======================================= */
html:not(.tye-ts) body #cad-panel :is(#tye-cad-rail, #tye-drw-rail) {
  box-sizing: border-box !important; border-radius: 22px !important;
  background: var(--dcad-sheet) !important; border: 1px solid var(--dcad-line) !important; box-shadow: var(--dcad-shadow) !important;
}
html:not(.tye-ts) body #cad-panel :is(#tye-cad-rail, #tye-drw-rail) .tye-cad-rail-hd .tye-grip,
html:not(.tye-ts) body #cad-panel :is(#tye-cad-rail, #tye-drw-rail) .tye-cad-rail-hd button,
html:not(.tye-ts) body #cad-panel :is(#tye-cad-rail, #tye-drw-rail) .tye-cad-rail-hd button .ti { color: var(--dcad-ink3) !important; }
html:not(.tye-ts) body #cad-panel :is(#tye-cad-rail, #tye-drw-rail) .tye-cad-rail-hd button:hover .ti { color: var(--dcad-ink) !important; }
html:not(.tye-ts) body #cad-panel #tye-cad-rail .tye-cad-rail-div { background: var(--dcad-line) !important; }
html:not(.tye-ts) body #cad-panel #tye-cad-rail :is(.tye-ca-tile, #tye-3dfea-btn, #tye-motion-btn, #tye-cfdpro-btn, #tye-mates-btn),
html:not(.tye-ts) body #cad-panel #tye-drw-rail :is(#tye-pdm-btn, #tye-cmp-btn, #tye-configs-btn, #tye-cstr-btn, #tye-std-badge) {
  border-radius: 12px !important; font-family: var(--dcad-font) !important;
}
html:not(.tye-ts) body #cad-panel #tye-cad-rail :is(.tye-ca-tile, #tye-3dfea-btn, #tye-motion-btn, #tye-cfdpro-btn, #tye-mates-btn):not(.active):not(.on),
html:not(.tye-ts) body #cad-panel #tye-drw-rail :is(#tye-pdm-btn, #tye-cmp-btn, #tye-configs-btn, #tye-cstr-btn, #tye-std-badge):not(.active):not(.on) { color: var(--dcad-ink2) !important; }
html:not(.tye-ts) body #cad-panel #tye-cad-rail :is(.tye-ca-tile, #tye-3dfea-btn, #tye-motion-btn, #tye-cfdpro-btn, #tye-mates-btn):not(.active):not(.on):not(.ddopen):hover,
html:not(.tye-ts) body #cad-panel #tye-drw-rail :is(#tye-pdm-btn, #tye-cmp-btn, #tye-configs-btn, #tye-cstr-btn, #tye-std-badge):not(.active):not(.on):hover {
  background: var(--dcad-press) !important; border-color: transparent !important; color: var(--dcad-ink) !important;
}
html:not(.tye-ts) body #cad-panel #tye-cad-rail :is(.tye-dd-trig, .tye-ca-trigger).ddopen { background: var(--dcad-press) !important; }
/* on Sketch Solid the ribbon floats over the canvas (160 / 144px on the Sketch strip): the rail centres in the room between
   its bottom and the pills (BOTTOM_BAR_PILL assumed a 65px ribbon; a dragged rail keeps its own place - inline styles) */
html[data-theme="light"]:not(.tye-ts) body.tye-solidtab-active #cad-panel:has(#tye-solid-ribbon > .tsr-strip > .tye-ac-panel-inline) :is(#tye-cad-rail, #tye-cad-rail-open) { top: calc(50% + (128px - var(--bb-clear)) / 2) !important; }
html[data-theme="light"]:not(.tye-ts) body.tye-solidtab-active #cad-panel:has(#tye-solid-ribbon > .tsr-strip > .tye-ac-panel-inline) #tye-cad-rail { max-height: calc(100% - 128px - var(--bb-clear)) !important; }
html[data-theme="dark"]:not(.tye-ts) body.tye-solidtab-active #cad-panel:has(#tye-solid-ribbon > .tsr-strip > .tye-ac-panel-inline) :is(#tye-cad-rail, #tye-cad-rail-open) { top: calc(50% + (112px - var(--bb-clear)) / 2) !important; }
html[data-theme="dark"]:not(.tye-ts) body.tye-solidtab-active #cad-panel:has(#tye-solid-ribbon > .tsr-strip > .tye-ac-panel-inline) #tye-cad-rail { max-height: calc(100% - 112px - var(--bb-clear)) !important; }
/* the Sketch Finish / Cancel rail (while sketching): the same card; its green / red stay */
html:not(.tye-ts) body #cad-panel #tye-sk-rail {
  box-sizing: border-box !important; border-radius: 22px !important;
  background: var(--dcad-sheet) !important; border: 1px solid var(--dcad-line) !important; box-shadow: var(--dcad-shadow) !important;
}
html:not(.tye-ts) body #cad-panel #tye-sk-rail .tsk-tile { border-radius: 12px !important; font-family: var(--dcad-font) !important; }
html:not(.tye-ts) body #cad-panel #tye-sk-rail .tsk-tile:hover { background: var(--dcad-press) !important; }
html:not(.tye-ts) body #cad-panel #tye-sk-rail :is(.tsk-grip, .tsk-rail-fold) { color: var(--dcad-ink3) !important; }
/* the Pro Tools dock: the card radius and shadow only */
html:not(.tye-ts) body #tye-pro-dock#tye-pro-dock { border-radius: 22px !important; box-shadow: var(--dcad-shadow) !important; }

/* ================================== 7. Drawing menus under <body>: the cards ================================== */
html:not(.tye-ts) body > .tb-menu.tb-menu,
html:not(.tye-ts) body > .tb-more-panel.tb-more-panel {
  border-radius: 20px !important; background: var(--dcad-sheet) !important;
  border: 1px solid var(--dcad-line) !important; box-shadow: var(--dcad-shadow) !important;
}
html:not(.tye-ts) body > .tb-menu.tb-menu .btn:not(.cm-item) { border-radius: 12px !important; }
html:not(.tye-ts) body > .tb-menu.tb-menu .btn:not(.cm-item):hover { background: var(--dcad-press) !important; }
html:not(.tye-ts) body > .tb-menu.tb-menu :is(.cm-item, .btn.cm-item) { border-radius: 12px !important; }
html:not(.tye-ts) body > .tb-menu.tb-menu :is(.cm-item, .btn.cm-item):hover { background: var(--dcad-press) !important; border-color: transparent !important; }
html:not(.tye-ts) body > .tb-menu.tb-menu .cm-head { border-bottom-color: var(--dcad-line) !important; }
html:not(.tye-ts) body > .tb-menu.tb-menu .cm-all { border-radius: 12px !important; }
html:not(.tye-ts) body > .tb-menu.tb-menu .sep.h { background: var(--dcad-line) !important; }
html:not(.tye-ts) body > .tb-more-panel.tb-more-panel > .tb-group > .tb-trigger { border-radius: 12px !important; }
html:not(.tye-ts) body > .tb-more-panel.tb-more-panel > .tb-group > .tb-trigger:hover { background: var(--dcad-press) !important; }

/* =========================================== 8. CHAT COLLAPSE ===========================================
   desktop_cad_collapse.js: html.tye-chat-collapsed = the chat folds into the sidebar's own 64px rail (the sidebar is held
   collapsed without touching sb_collapsed), the CAD takes the rest. Ctrl+\ toggles; tye_chat_collapsed remembers it.
   The two buttons are JS nodes: hidden here by default, shown only by the scoped rules below (so touch, CAD fullscreen
   and a page without the script never show a raw button). */
#dcad-chat-hide, #dcad-chat-show { display: none; }
/* while the chat is hidden, Show chat is the rail's chat bubble: the Chat list button (the same bubble) steps aside */
html.tye-chat-collapsed:not(.tye-ts) body:not(.cad-fullscreen) #sidebar #sb-chat-rail { display: none !important; }
html:not(.tye-ts):not(.tye-chat-collapsed):not(.dcad-cad-off) body:not(.cad-fullscreen) #left-pane > header .hctrl > #dcad-chat-hide,
html.tye-chat-collapsed:not(.tye-ts) body:not(.cad-fullscreen) #left-pane > header > #dcad-chat-show { display: inline-flex; }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(#dcad-chat-hide, #dcad-chat-show) {
  align-items: center; justify-content: center; flex: none; position: relative;
  box-sizing: border-box; margin: 0; padding: 0; border: 0; cursor: pointer;
  background: transparent; color: var(--dc-ink2, #3b3f46); transition: background-color .16s ease, color .16s ease;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #dcad-chat-hide { width: 40px; height: 40px; border-radius: 20px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #dcad-chat-show { width: 44px; height: 44px; border-radius: 22px; }
html:not(.tye-ts) body:not(.cad-fullscreen) :is(#dcad-chat-hide, #dcad-chat-show) svg { width: 20px; height: 20px; flex: none; pointer-events: none; }
@media (hover: hover) {
  html:not(.tye-ts) body:not(.cad-fullscreen) :is(#dcad-chat-hide, #dcad-chat-show):hover { background: var(--dc-press, rgba(17, 20, 28, .07)); color: var(--dc-ink, #101114); }
}
html:not(.tye-ts) body:not(.cad-fullscreen) :is(#dcad-chat-hide, #dcad-chat-show):focus-visible { outline: 2px solid var(--dc-dot, #e5322a); outline-offset: -2px; }
/* the unread dot: a bot reply landed while the chat was hidden */
html:not(.tye-ts) body:not(.cad-fullscreen) #dcad-chat-show .dcad-dot {
  position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--dc-dot, #e5322a); box-shadow: 0 0 0 2px var(--dc-sheet, #fff); display: none;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #dcad-chat-show.has-unread .dcad-dot { display: block; }

/* collapsed: the 64px rail column (the header slot holds Show chat, the sidebar its own collapsed rail) */
html.tye-chat-collapsed:not(.tye-ts) body:not(.cad-fullscreen) #left-pane {
  flex: 0 0 64px !important; width: 64px !important; min-width: 64px !important; max-width: 64px !important;
  overflow: visible !important;   /* (the account menu is absolute and 300px wide: it must not be clipped by the rail) */
}
html.tye-chat-collapsed:not(.tye-ts) body:not(.cad-fullscreen) #left-pane > header {
  justify-content: center !important; padding: 6px 10px !important; gap: 0 !important;
}
html.tye-chat-collapsed:not(.tye-ts) body:not(.cad-fullscreen) #left-pane > header > :not(#dcad-chat-show) { display: none !important; }
html.tye-chat-collapsed:not(.tye-ts) body:not(.cad-fullscreen) #left-pane > #main { overflow: visible !important; }
html.tye-chat-collapsed:not(.tye-ts) body:not(.cad-fullscreen) #left-pane > #main > :is(#chat-wrap, #sb-resize-handle) { display: none !important; }
html.tye-chat-collapsed:not(.tye-ts) body:not(.cad-fullscreen) #sidebar {
  width: 64px !important; min-width: 64px !important; max-width: 64px !important; border-right: 0 !important;
}
html.tye-chat-collapsed:not(.tye-ts) body:not(.cad-fullscreen) #split-handle { display: none !important; }
html.tye-chat-collapsed:not(.tye-ts) body:not(.cad-fullscreen) #app > #cad-panel { flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
/* ---------- RAIL_OPEN_2026Q4 (owner 2026-10-04 chose variant A of https://claude.ai/artifact/BaTwM95ht5J7LCqVBQ9WCh ):
   the "open the tools rail" handle (#tye-cad-rail-open on Sketch Solid / 3D, #tye-drw-rail-open on Drawing - phase_cad_leftpanel.js /
   phase_drw_leftpanel.js show it while the rail is folded) as a 44px round button in the rail's own material (sheet, hairline,
   soft shadow) instead of cad_draw.css's red 10px-radius square; same place (left 12px, vertically centred), same chevron.
   The scripts set its display inline (block / none), so no display here. ---------- */
html:not(.tye-ts) body #cad-panel :is(#tye-cad-rail-open, #tye-drw-rail-open) {
  width: 44px !important; height: 44px !important; padding: 0 !important; box-sizing: border-box !important; border-radius: 22px !important;
  background: var(--dcad-sheet) !important; color: var(--dcad-ink2) !important; border: 1px solid var(--dcad-line) !important;
  box-shadow: var(--dcad-shadow) !important; font: 600 14px/42px var(--dcad-font) !important; text-align: center !important;
  transition: background-color .16s ease, color .16s ease !important;
}
html:not(.tye-ts) body #cad-panel :is(#tye-cad-rail-open, #tye-drw-rail-open) .ti { font-size: 20px !important; line-height: 42px !important; color: inherit !important; vertical-align: top; }
@media (hover: hover) {
  html:not(.tye-ts) body #cad-panel :is(#tye-cad-rail-open, #tye-drw-rail-open):hover { color: var(--dcad-ink) !important; background-image: linear-gradient(var(--dcad-press), var(--dcad-press)) !important; }
}
html:not(.tye-ts) body #cad-panel :is(#tye-cad-rail-open, #tye-drw-rail-open):focus-visible { outline: 2px solid var(--dcad-dot) !important; outline-offset: 2px !important; }
@media (prefers-reduced-motion: reduce) { html:not(.tye-ts) body #cad-panel :is(#tye-cad-rail-open, #tye-drw-rail-open) { transition: none !important; } }
/* ============================== END DESKTOP_CAD_2026Q4 ============================== */