/* VOICE_BTN_2026Q4 : one Voice menu in the chat header (owner 2026-10-04 chose variant B of the mockup
   https://claude.ai/artifact/YXLVuP4ioimx13ADng8Y7r ). The header had two speaker icons side by side - #tts-toggle (read
   replies aloud on / off) and #stop-btn (stop the reply being read, which at rest drew a crossed-out speaker too).
   Both stay in the DOM with their ids and handlers (voice_ui.js owns ttsOn and stopping; Settings, touch_shell.js and
   cad_mobile.js click #tts-toggle by id) but are hidden here; desktop_voice.js adds #vb-wrap = #vb-btn (speaker that shows
   off / on / reading + a chevron) and #vb-menu: Read replies aloud (house switch), Stop reading (Esc, only while a reply
   is read), Voice and speed (Settings).
   Scope = desktop_chat.css's: the desktop chat (html:not(.tye-ts) body:not(.cad-fullscreen)) and the landscape tablet
   chat (>=1025px, html.tye-ts[data-ts-view="chat"]). Phones, the tablet Model / Drawing views and CAD fullscreen keep
   what they have. Colours = desktop_chat.css's --dc-* tokens (light and dark). */
#vb-wrap { display: none; }

/* desktop chat */
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-wrap ~ :is(#tts-toggle, #stop-btn, .hctrl-sep) { display: none !important; }   /* only once desktop_voice.js has put #vb-wrap before them */
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-wrap { display: inline-flex; position: relative; flex: none; }
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-btn {
  height: 40px; padding: 0 8px 0 10px; gap: 3px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 20px; background: transparent; color: var(--dc-ink2); cursor: pointer; font: inherit;
  transition: background .16s ease, color .16s ease;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-btn > svg.vb-ic { width: 20px; height: 20px; flex: none; }
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-btn > svg.vb-chev { width: 12px; height: 12px; flex: none; color: var(--dc-ink3); transition: transform .16s ease; }
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-btn :is(.vb-on, .vb-w) { display: none; }
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-btn:is(.on, .speaking) .vb-off { display: none; }
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-btn:is(.on, .speaking) .vb-on { display: inline; }
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-btn.on { color: var(--dc-ink); }
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-btn.speaking { color: var(--dc-dot); background: var(--dc-dotbg); }
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-btn.speaking .vb-w { display: inline; animation: vb-pulse 1.2s ease-in-out infinite; }
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-btn.speaking > svg.vb-chev { color: currentColor; }
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-wrap.open #vb-btn { background: var(--dc-press); }
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-wrap.open #vb-btn.speaking { background: var(--dc-dotbg); }
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-wrap.open #vb-btn > svg.vb-chev { transform: rotate(180deg); }
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-btn:focus-visible { outline: 2px solid var(--dc-dot); outline-offset: -2px; }
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 600; width: 320px; box-sizing: border-box;
  background: var(--dc-sheet); border: 1px solid var(--dc-line); border-radius: 18px; box-shadow: var(--dc-shadow); padding: 6px;
  font-family: var(--dc-font); color: var(--dc-ink); text-align: left;
}
html:not(.tye-ts) body:not(.cad-fullscreen) #vb-wrap.open #vb-menu { display: block; animation: dropIn .14s ease; }
@media (min-width: 1025px) {   /* the landscape tablet chat wears the desktop chat header (desktop_chat.css DESKTOP_CHAT_WIDE_TOUCH_2026Q4) */
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-wrap ~ :is(#tts-toggle, #stop-btn, .hctrl-sep) { display: none !important; }   /* only once desktop_voice.js has put #vb-wrap before them */
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-wrap { display: inline-flex; position: relative; flex: none; }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-btn {
    height: 40px; padding: 0 8px 0 10px; gap: 3px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 20px; background: transparent; color: var(--dc-ink2); cursor: pointer; font: inherit;
    transition: background .16s ease, color .16s ease;
  }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-btn > svg.vb-ic { width: 20px; height: 20px; flex: none; }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-btn > svg.vb-chev { width: 12px; height: 12px; flex: none; color: var(--dc-ink3); transition: transform .16s ease; }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-btn :is(.vb-on, .vb-w) { display: none; }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-btn:is(.on, .speaking) .vb-off { display: none; }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-btn:is(.on, .speaking) .vb-on { display: inline; }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-btn.on { color: var(--dc-ink); }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-btn.speaking { color: var(--dc-dot); background: var(--dc-dotbg); }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-btn.speaking .vb-w { display: inline; animation: vb-pulse 1.2s ease-in-out infinite; }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-btn.speaking > svg.vb-chev { color: currentColor; }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-wrap.open #vb-btn { background: var(--dc-press); }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-wrap.open #vb-btn.speaking { background: var(--dc-dotbg); }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-wrap.open #vb-btn > svg.vb-chev { transform: rotate(180deg); }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-btn:focus-visible { outline: 2px solid var(--dc-dot); outline-offset: -2px; }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-menu {
    display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 600; width: 320px; box-sizing: border-box;
    background: var(--dc-sheet); border: 1px solid var(--dc-line); border-radius: 18px; box-shadow: var(--dc-shadow); padding: 6px;
    font-family: var(--dc-font); color: var(--dc-ink); text-align: left;
  }
  html.tye-ts[data-ts-view="chat"] body:not(.cad-fullscreen) #vb-wrap.open #vb-menu { display: block; animation: dropIn .14s ease; }
}

@media (hover: hover) {
  #vb-wrap #vb-btn:not(.speaking):hover { background: var(--dc-press); color: var(--dc-ink); }
  #vb-menu .vb-it:not(:disabled):hover { background: var(--dc-press); }
}
@keyframes vb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* the menu's insides (the menu itself only shows in the scope above) */
#vb-menu .vb-t { font: 600 11px/1 var(--dc-font); letter-spacing: .06em; text-transform: uppercase; color: var(--dc-ink3); padding: 12px 12px 8px; }
#vb-menu .vb-it {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; box-sizing: border-box; margin: 0;
  border: 0; border-radius: 12px; background: transparent; color: var(--dc-ink); text-align: left; cursor: pointer; font: inherit;
}
#vb-menu .vb-it:disabled { cursor: default; opacity: .42; }
#vb-menu .vb-it:focus-visible { outline: 2px solid var(--dc-dot); outline-offset: -2px; }
#vb-menu .vb-mi { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--dc-press); color: var(--dc-ink2); }
#vb-menu .vb-mi svg { width: 17px; height: 17px; }
#vb-menu .vb-it.stop:not(:disabled) .vb-mi { background: var(--dc-dotbg); color: var(--dc-dot); }
#vb-menu .vb-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#vb-menu .vb-n { font: 600 14px/1.2 var(--dc-font); letter-spacing: -.005em; }
#vb-menu .vb-it.stop:not(:disabled) .vb-n { color: var(--dc-dot); }
#vb-menu .vb-s { font: 400 12px/1.3 var(--dc-font); color: var(--dc-ink3); }
#vb-menu kbd { flex: none; font: 600 11px/1 var(--dc-font); color: var(--dc-ink3); border: 1px solid var(--dc-line2); border-radius: 6px; padding: 4px 6px; background: transparent; }
#vb-menu .vb-sep { height: 1px; margin: 4px 8px; background: var(--dc-line); }
/* the house switch, one size and one green (SWITCH_SIZE_2026Q4 tokens: 44x26, knob 20) */
#vb-menu .vb-sw { flex: none; position: relative; width: var(--tsw-w, 44px); height: var(--tsw-h, 26px); border-radius: var(--tsw-r, 13px); background: var(--dc-line2); transition: background-color .15s ease; }
#vb-menu .vb-sw::after { content: ""; position: absolute; top: var(--tsw-p, 3px); left: var(--tsw-p, 3px); width: var(--tsw-k, 20px); height: var(--tsw-k, 20px); border-radius: 50%; background: #fff; box-shadow: var(--tsw-knob-sh, 0 1px 3px rgba(0, 0, 0, .28)); transition: transform .15s ease; }
#vb-menu .vb-it[aria-checked="true"] .vb-sw { background: var(--tsw-on, #16a34a); }
#vb-menu .vb-it[aria-checked="true"] .vb-sw::after { transform: translateX(var(--tsw-x, 18px)); }
@media (prefers-reduced-motion: reduce) {
  #vb-btn.speaking .vb-w { animation: none !important; }
  #vb-wrap.open #vb-menu { animation: none !important; }
  #vb-menu .vb-sw, #vb-menu .vb-sw::after { transition: none; }
  #vb-btn, #vb-btn > svg.vb-chev { transition: none !important; }   /* (!important: the scoped rules above are more specific) */
}