/* ══════════════════════════════════════════════════════════════════════════
   DAV-OPS — live voice with Davara. A neoglass call overlay that floats over
   any Davara tab. Davara-distinct: one earned light (the orb), deep calm around
   it, motion that MEANS the state. No backdrop-filter (honors the perf law —
   the shell owns the only blur). Mobile-first, safe-area aware, all browsers.
   Accent = Davara's mint→cyan signature. Reduced-motion respected throughout.
   ══════════════════════════════════════════════════════════════════════════ */

.davops, .davops * { box-sizing: border-box; }
.davops {
  --vc: 95, 243, 192;              /* mint — the living breath */
  --vc2: 61, 242, 255;            /* cyan — the signal */
  --vc-ink: #d7fff2;
  --vc-deep: #060d1c;   /* chromatic navy — the dark as potential. #05090f was void-black. */
  --vc-pink: #ff7a9b;             /* the one warm alarm (end / mute) */
  position: fixed; inset: 0; z-index: 240;
  display: none; flex-direction: column;
  color: var(--ink, #eef4f2);
  font-family: var(--body, system-ui, sans-serif);
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(var(--vc), .10), transparent 55%),
    radial-gradient(100% 70% at 50% 108%, rgba(var(--vc2), .09), transparent 60%),
    var(--vc-deep);
  animation: vcFade .4s var(--ease-out, cubic-bezier(.2,.7,.2,1));
  padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  overscroll-behavior: contain;
}
.davops.is-on { display: flex; }
body.davops-open { overflow: hidden; }         /* lock the page behind the call */
@keyframes vcFade { from { opacity: 0; } to { opacity: 1; } }
/* desktop: a centered 560px rail, not full-bleed — the void frames the voice */
@media (min-width: 720px) {
  .davops { left: 50%; right: auto; width: 560px; max-width: 560px; transform: translateX(-50%);
    border-left: 1px solid var(--glass-line, rgba(255,255,255,.07)); border-right: 1px solid var(--glass-line, rgba(255,255,255,.07)); }
}

/* ── header ── */
.davops__head { display: flex; align-items: center; gap: 11px; min-height: 46px; }
.davops__glyph { width: 30px; height: 30px; border-radius: 50%; flex: none; position: relative;
  background: radial-gradient(circle at 38% 34%, rgba(var(--vc), .5), rgba(var(--vc2), .16) 62%, transparent);
  box-shadow: 0 0 0 1px rgba(var(--vc), .32), 0 0 18px rgba(var(--vc), .3); }
.davops__id { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; min-width: 0; }
.davops__id b { font-family: var(--display, var(--body)); font-weight: 800; font-size: .96rem; letter-spacing: .01em; color: var(--vc-ink); }
.davops__id span { font-family: var(--mono, monospace); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute, #90a6a0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.davops__hbtn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px;
  border: 1px solid var(--glass-line, rgba(255,255,255,.08)); background: rgba(255,255,255,.03); color: var(--ink-soft, #cfe0db);
  cursor: pointer; transition: .16s var(--ease, ease); font-size: 1rem; }
.davops__hbtn:hover { background: rgba(var(--vc), .1); border-color: rgba(var(--vc), .4); color: var(--vc-ink); }
.davops__hbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ── the orb — her living presence. COMPACT by default so the CONVERSATION owns
      the room; it shrinks further once you're talking (.has-convo). ── */
.davops__stage { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; min-height: 0; overflow: visible; padding: 4px 0 2px; transition: gap .3s var(--ease, ease); }
/* 84px, not 132px. Presence is behaviour, not area — idle/listening/thinking/speaking
   are encoded in motion and read identically small. The thread takes what it gives up. */
.davops__orb { --amp: 0; position: relative; width: 84px; height: 84px; display: grid; place-items: center; flex: none; transition: width .34s var(--ease, ease), height .34s var(--ease, ease); }
/* once a conversation is going, the orb becomes a quiet presence and the feed takes the screen */
.davops.has-convo .davops__stage { gap: 7px; padding: 2px 0 0; }
/* once there is something to read, the orb becomes a presence mark, not a monument */
.davops.has-convo .davops__orb { width: 46px; height: 46px; }
.davops.has-convo .davops__core { width: 42px; height: 42px; }
/* the talk key and the placeholders already say this — a standing hint line is a row
   of the screen spent on a sentence you read once */
.davops__foot .davops__note { display: none; }
.davops__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(var(--vc), .22); opacity: .5; }
.davops__ring:nth-child(2) { transform: scale(.8); border-color: rgba(var(--vc2), .2); }
.davops__ring:nth-child(3) { transform: scale(.6); border-color: rgba(var(--vc), .16); }
.davops__core { width: 80px; height: 80px; border-radius: 50%; position: relative; transition: width .34s var(--ease, ease), height .34s var(--ease, ease);
  background: radial-gradient(circle at 42% 38%, rgba(var(--vc), .9), rgba(var(--vc2), .5) 46%, rgba(var(--vc2), .12) 74%, transparent);
  box-shadow: 0 0 34px rgba(var(--vc), .5), inset 0 0 30px rgba(255,255,255,.16);
  transform: scale(calc(1 + var(--amp) * .16)); transition: transform .09s linear; }
.davops__core::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); }
/* idle: a slow breath */
.davops__orb[data-state="idle"] .davops__core { animation: vcBreath 4s ease-in-out infinite; }
.davops__orb[data-state="idle"] .davops__ring { animation: vcBreath 4s ease-in-out infinite; }
/* listening: rings draw inward, core reacts to real mic amplitude via --amp */
.davops__orb[data-state="listening"] .davops__ring { animation: vcIn 2.6s ease-out infinite; }
.davops__orb[data-state="listening"] .davops__ring:nth-child(2) { animation-delay: .55s; }
.davops__orb[data-state="listening"] .davops__ring:nth-child(3) { animation-delay: 1.1s; }
.davops__orb[data-state="listening"] .davops__core { box-shadow: 0 0 40px rgba(var(--vc), calc(.5 + var(--amp) * .5)), inset 0 0 30px rgba(255,255,255,.2); }
/* thinking: a tight bright pulse */
.davops__orb[data-state="thinking"] .davops__core { animation: vcThink 1.4s ease-in-out infinite; }
.davops__orb[data-state="thinking"] .davops__ring { border-color: rgba(var(--vc2), .3); animation: vcSpin 3.4s linear infinite; }
/* speaking: rings bloom outward */
.davops__orb[data-state="speaking"] .davops__ring { animation: vcOut 2s ease-out infinite; }
.davops__orb[data-state="speaking"] .davops__ring:nth-child(2) { animation-delay: .5s; }
.davops__orb[data-state="speaking"] .davops__ring:nth-child(3) { animation-delay: 1s; }
.davops__orb[data-state="speaking"] .davops__core { animation: vcSpeak 1.9s ease-in-out infinite; }
@keyframes vcBreath { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.05); opacity: .85; } }
@keyframes vcIn { 0% { transform: scale(1.15); opacity: 0; } 40% { opacity: .55; } 100% { transform: scale(.55); opacity: 0; } }
@keyframes vcOut { 0% { transform: scale(.5); opacity: .6; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes vcThink { 0%,100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.4); transform: scale(1.06); } }
@keyframes vcSpeak { 0%,100% { transform: scale(1); } 25% { transform: scale(1.08); } 55% { transform: scale(1.02); } 80% { transform: scale(1.06); } }
@keyframes vcSpin { to { transform: rotate(360deg); } }

.davops__status { font-family: var(--mono, monospace); font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(var(--vc), .95); text-shadow: 0 0 16px rgba(var(--vc), .5); text-align: center; }
.davops__interim { max-width: 92%; text-align: center; color: var(--ink-soft, #cfe0db); font-size: 1.02rem; line-height: 1.45; min-height: 1.2em; max-height: 2.9em; overflow: hidden; }
.davops.has-convo .davops__interim { font-size: .94rem; max-height: 2.5em; }
.davops__interim em { color: var(--ink-mute, #90a6a0); font-style: normal; opacity: .7; }

/* ── transcript feed — THE HERO. It fills every pixel the orb + controls don't need,
      so your words and her replies are always readable, never scrunched. ── */
.davops__feed { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 560px; margin: 0 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 11px; padding: 6px 4px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-behavior: smooth; }
.davops__feed::-webkit-scrollbar { width: 5px; } .davops__feed::-webkit-scrollbar-thumb { background: rgba(var(--vc), .3); border-radius: 4px; }
/* a gentle invitation when the call is fresh — never a blank void */
.davops__feed:empty::before { content: 'Say hello, or ask her anything. Your words and hers appear here.'; display: block; margin: auto; max-width: 260px; text-align: center; color: var(--ink-mute, #90a6a0); font-size: .9rem; line-height: 1.6; opacity: .8; }
.davops__line { position: relative; max-width: 90%; padding: 11px 15px; border-radius: 16px; font-size: .96rem; line-height: 1.55; animation: vcRise .34s var(--ease-out, ease); word-break: break-word; }
.davops__line--you { align-self: flex-end; background: rgba(var(--vc), .16); border: 1px solid rgba(var(--vc), .34); color: var(--vc-ink); border-bottom-right-radius: 5px; }
.davops__line--dav { align-self: flex-start; background: rgba(255,255,255,.05); border: 1px solid var(--glass-line, rgba(255,255,255,.1)); color: var(--ink, #eef4f2); border-bottom-left-radius: 5px; }
.davops__line--save { align-self: center; background: rgba(var(--vc2), .1); border: 1px solid rgba(var(--vc2), .3); color: #bfeeff; font-family: var(--mono, monospace); font-size: .72rem; letter-spacing: .02em; padding: 6px 12px; border-radius: 999px; }
@keyframes vcRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── foot: mode switch + PTT bar + controls — COMPACT so the feed keeps the room ── */
.davops__foot { display: flex; flex-direction: column; align-items: center; gap: 9px; padding-top: 2px; flex: 0 0 auto; }
.davops__modes { display: inline-flex; padding: 4px; gap: 3px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--glass-line, rgba(255,255,255,.08)); }
.davops__mode { border: none; background: transparent; color: var(--ink-mute, #90a6a0); font-family: var(--mono, monospace); font-size: .68rem; letter-spacing: .08em; padding: 7px 15px; border-radius: 999px; cursor: pointer; transition: .18s var(--ease, ease); }
.davops__mode.is-on { background: rgba(var(--vc), .16); color: var(--vc-ink); box-shadow: inset 0 0 0 1px rgba(var(--vc), .4); }
.davops__ptt { display: none; width: min(420px, 88%); padding: 13px; border-radius: 16px; text-align: center; cursor: pointer;
  font-family: var(--mono, monospace); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vc-ink);
  background: rgba(var(--vc), .08); border: 1.5px solid rgba(var(--vc), .34);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: .12s var(--ease, ease); }
.davops.is-ptt .davops__ptt { display: block; }
.davops__ptt.down { background: rgba(var(--vc), .26); border-color: rgba(var(--vc), .8); box-shadow: 0 0 28px rgba(var(--vc), .5); transform: scale(.985); }
.davops__controls { display: flex; align-items: center; gap: 20px; }
.davops__cbtn { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--glass-line, rgba(255,255,255,.1)); background: rgba(255,255,255,.04); color: var(--ink-soft, #cfe0db);
  transition: .16s var(--ease, ease); }
.davops__cbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.davops__cbtn:hover { border-color: rgba(var(--vc), .4); color: var(--vc-ink); }
.davops__cbtn.off { background: rgba(var(--vc-pink-rgb, 255,122,155), .14); border-color: rgba(255,122,155,.45); color: var(--vc-pink); position: relative; }
.davops__cbtn.off::after { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; background: currentColor; transform: rotate(-32deg); border-radius: 2px; }
.davops__end { width: 64px; height: 64px; background: linear-gradient(160deg, #ff8aa6, #ff5c7f); border: none; color: #1a0410;
  box-shadow: 0 8px 30px rgba(255,92,127,.4); }
.davops__end svg { width: 26px; height: 26px; stroke: #240612; }
.davops__end:hover { filter: brightness(1.08); color: #1a0410; }
.davops__note { font-family: var(--mono, monospace); font-size: .6rem; letter-spacing: .06em; color: var(--ink-mute, #90a6a0); text-align: center; opacity: .8; }
/* the TEXT channel — type to Davara inside the voice call (she answers in text + voice) */
.davops__compose { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; }
.davops__cin { flex: 1; min-width: 0; padding: 11px 15px; border-radius: 13px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-line, rgba(255,255,255,.1)); color: var(--ink, #eef4f2); font-family: var(--body, inherit); font-size: max(16px, .88rem); }
.davops__cin::placeholder { color: var(--ink-mute, #90a6a0); }
.davops__cin:focus { outline: none; border-color: rgba(var(--vc), .55); box-shadow: 0 0 0 3px rgba(var(--vc), .1); background: rgba(255,255,255,.07); }
.davops__csend { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: none; cursor: pointer; color: #04222b; background: linear-gradient(135deg, rgb(var(--vc)), rgb(var(--vc2))); box-shadow: 0 0 18px -6px rgba(var(--vc), .7); transition: filter .2s, transform .2s var(--dv-spring, cubic-bezier(.32,1.4,.45,1)); }
.davops__csend svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.davops__csend:hover { filter: brightness(1.08); transform: translateY(-1px); }
.davops__csend:active { transform: scale(.92); }

/* ── settings sheet (slides up over the call) ── */
.davops__settings { position: absolute; inset: auto 0 0 0; z-index: 4; transform: translateY(100%); transition: transform .34s var(--dv-spring, cubic-bezier(.32,1.4,.45,1));
  background: linear-gradient(180deg, rgba(13,17,28,.995), rgba(8,11,18,.998)); border-top: 1px solid rgba(var(--vc), .3); border-radius: 22px 22px 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(0,0,0,.5); max-height: 82vh; overflow-y: auto; }
.davops.is-cfg .davops__settings { transform: translateY(0); }
.davops__settings h4 { font-family: var(--display, var(--body)); font-weight: 800; font-size: .82rem; margin: 0 0 3px; color: var(--vc-ink); }
.davops__srow { margin-top: 16px; }
.davops__slbl { font-family: var(--mono, monospace); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft, #cfe0db); display: block; margin-bottom: 7px; }
.davops__seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--glass-line, rgba(255,255,255,.08)); flex-wrap: wrap; }
.davops__seg button { border: none; background: transparent; color: var(--ink-mute, #90a6a0); font-family: var(--mono, monospace); font-size: .64rem; padding: 6px 12px; border-radius: 9px; cursor: pointer; }
.davops__seg button.is-on { background: rgba(var(--vc), .16); color: var(--vc-ink); }
.davops__key { width: 100%; margin-top: 9px; padding: 11px 13px; border-radius: 11px; background: rgba(0,0,0,.3); border: 1px solid var(--glass-line, rgba(255,255,255,.1)); color: var(--ink, #eef4f2); font-family: var(--mono, monospace); font-size: .8rem; }
.davops__hint { font-size: .72rem; color: var(--ink-mute, #90a6a0); line-height: 1.5; margin-top: 8px; }
.davops__hint a { color: var(--vc-ink); }
.davops__srow .davops__cta { margin-top: 14px; width: 100%; padding: 12px; border-radius: 12px; border: 1px solid rgba(var(--vc), .34); background: rgba(var(--vc), .1); color: var(--vc-ink); font-family: var(--mono, monospace); font-size: .74rem; letter-spacing: .08em; cursor: pointer; }
.davops__sclose { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--glass-line, rgba(255,255,255,.1)); background: rgba(255,255,255,.04); color: var(--ink-soft, #cfe0db); cursor: pointer; font-size: 1rem; }

/* ══ minimized dock — draggable, floats over any tab ══ */
.davops-dock { position: fixed; z-index: 235; right: 14px; bottom: calc(88px + env(safe-area-inset-bottom)); width: 288px; max-width: calc(100vw - 24px);
  display: none; flex-direction: column; gap: 10px; padding: 13px; border-radius: 20px;
  background: var(--dv-slab, rgba(11,14,24,.92)); border: 1px solid rgba(var(--vc), .3);
  box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--vc), .12); color: var(--ink, #eef4f2);
  animation: vcDockIn .34s var(--dv-spring, cubic-bezier(.32,1.4,.45,1)); touch-action: none; }
.davops-dock.is-on { display: flex; }
@keyframes vcDockIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.davops-dock__head { display: flex; align-items: center; gap: 9px; cursor: grab; }
.davops-dock__head:active { cursor: grabbing; }
.davops-dock__orb { width: 26px; height: 26px; border-radius: 50%; flex: none; background: radial-gradient(circle at 40% 36%, rgba(var(--vc), .9), rgba(var(--vc2), .3) 60%, transparent); box-shadow: 0 0 14px rgba(var(--vc), .5); }
.davops-dock[data-state="listening"] .davops-dock__orb { animation: vcBreath 1.6s ease-in-out infinite; }
.davops-dock[data-state="thinking"] .davops-dock__orb { animation: vcThink 1.3s ease-in-out infinite; }
.davops-dock[data-state="speaking"] .davops-dock__orb { animation: vcSpeak 1.7s ease-in-out infinite; }
.davops-dock__id { display: flex; flex-direction: column; line-height: 1.1; margin-right: auto; min-width: 0; }
.davops-dock__id b { font-size: .8rem; font-weight: 800; color: var(--vc-ink); font-family: var(--display, var(--body)); }
.davops-dock__id span { font-family: var(--mono, monospace); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute, #90a6a0); }
.davops-dock__hb { width: 28px; height: 28px; border-radius: 9px; border: 1px solid var(--glass-line, rgba(255,255,255,.1)); background: rgba(255,255,255,.03); color: var(--ink-soft, #cfe0db); cursor: pointer; font-size: .82rem; display: grid; place-items: center; flex: none; }
.davops-dock__hb:hover { background: rgba(var(--vc), .12); color: var(--vc-ink); }
.davops-dock__hb.end { color: var(--vc-pink); border-color: rgba(255,122,155,.4); }
.davops-dock__cap { font-size: .8rem; line-height: 1.45; color: var(--ink-soft, #cfe0db); max-height: 4.4em; overflow: hidden; }
.davops-dock__cap b { color: var(--vc-ink); font-weight: 700; }
.davops-dock__talk { width: 100%; padding: 13px; border-radius: 13px; text-align: center; cursor: pointer;
  font-family: var(--mono, monospace); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vc-ink);
  background: rgba(var(--vc), .1); border: 1.5px solid rgba(var(--vc), .34); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.davops-dock__talk.down { background: rgba(var(--vc), .28); border-color: rgba(var(--vc), .8); box-shadow: 0 0 22px rgba(var(--vc), .5); }
.davops-dock.pill { width: auto; padding: 9px 13px; }
.davops-dock.pill .davops-dock__cap, .davops-dock.pill .davops-dock__talk { display: none; }

/* the header trigger button — a vibrant neon mic */
.davara__davops svg { stroke: currentColor; }
.davara__davops { color: rgb(var(--vc, 95,243,192)) !important; position: relative; }
.davara__davops::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 14px rgba(95,243,192,.5); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.davara__davops:hover { color: #aefbe0 !important; }
.davara__davops:hover::after, .davara__davops.is-live::after { opacity: 1; }
.davara__davops.is-live { color: #aefbe0 !important; animation: vcNeon 2.4s ease-in-out infinite; }
@keyframes vcNeon { 0%,100% { filter: drop-shadow(0 0 3px rgba(95,243,192,.6)); } 50% { filter: drop-shadow(0 0 9px rgba(95,243,192,.95)); } }

/* ══════════════════════════════════════════════════════════════════════════
   OPERATOR CONSOLE v2 — moveable window · compact Votus · steer · OPS-LIVE.
   Refined pass: the header glyph is a living lens; a hairline sweeps under it;
   the whole shell reads more like an instrument. (GPU-cheap: transforms + bg
   position only — no backdrop-filter, no per-frame blur.)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the living lens (header glyph) + a slow hairline sweep ── */
.davops__head { position: relative; z-index: 6; }   /* always above the orb glow so buttons stay clean */
.davops__id b { white-space: nowrap; }               /* never let "DAV-OPS" wrap in a narrow panel */
.davops__head::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: -5px; height: 1px; opacity: .7;
  background: linear-gradient(90deg, transparent, rgba(var(--vc), .45), rgba(var(--vc2), .45), transparent); background-size: 220% 100%; animation: vcSweep 9s linear infinite; }
@keyframes vcSweep { to { background-position: 220% 0; } }
.davops__glyph { overflow: hidden; box-shadow: 0 0 0 1px rgba(var(--vc), .34), 0 0 20px rgba(var(--vc), .34); }
.davops__glyph::before { content: ''; position: absolute; inset: -34%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(var(--vc2), .6), transparent 52%, rgba(var(--vc), .5), transparent); animation: vcSpin 6.5s linear infinite; }
.davops__glyph::after { content: ''; position: absolute; inset: 32%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, rgb(var(--vc2)) 72%); box-shadow: 0 0 10px rgba(var(--vc2), .7); }

/* header live / windowed toggles — active state */
.davops__livebtn.is-on, .davops__winbtn.is-on { background: rgba(var(--vc), .14); border-color: rgba(var(--vc), .5); color: var(--vc-ink); }
.davops__livebtn.is-on { box-shadow: 0 0 16px rgba(var(--vc), .35); }

/* ── compact VOTUS dial (the smaller SPEND meter, inside the call) ── */
.davops__votus { display: flex; align-items: center; gap: 11px; width: 100%; max-width: 520px; padding: 0 2px; max-height: 30px; }
.davops__vlbl { font-family: var(--mono, monospace); font-size: .56rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(var(--vc), .92); white-space: nowrap; }
.davops__vrange { --vfill: 22%; flex: 1; min-width: 0; height: 22px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.davops__vrange::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--vc)) 0%, rgb(var(--vc2)) var(--vfill), rgba(255,255,255,.12) var(--vfill)); }
.davops__vrange::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,.12); }
.davops__vrange::-moz-range-progress { height: 4px; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--vc)), rgb(var(--vc2))); }
.davops__vrange::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; margin-top: -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, rgb(var(--vc2))); box-shadow: 0 0 10px rgba(var(--vc), .8), 0 0 0 1px rgba(var(--vc2), .6); cursor: grab; }
.davops__vrange::-moz-range-thumb { width: 15px; height: 15px; border: none; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, rgb(var(--vc2))); box-shadow: 0 0 10px rgba(var(--vc), .8); cursor: grab; }
.davops__vrange:focus { outline: none; }
.davops__vval { font-family: var(--mono, monospace); font-size: .76rem; font-weight: 700; color: var(--vc-ink); min-width: 2.4em; text-align: right; text-shadow: 0 0 12px rgba(var(--vc), .5); }

/* ── steer toggle (in the composer) — routes a typed directive to the MAIN chat ── */
.davops__steer { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--glass-line, rgba(255,255,255,.1)); background: rgba(255,255,255,.03); color: var(--ink-soft, #cfe0db); transition: .16s var(--ease, ease); }
.davops__steer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.davops__steer:hover { border-color: rgba(var(--vc2), .5); color: var(--vc-ink); }
.davops__steer.is-on { background: rgba(var(--vc2), .16); border-color: rgba(var(--vc2), .6); color: #cff6ff; box-shadow: 0 0 16px rgba(var(--vc2), .4); }
.davops.is-steer .davops__cin { border-color: rgba(var(--vc2), .5); background: rgba(var(--vc2), .06); }
.davops.is-steer .davops__cin::placeholder { color: rgba(var(--vc2), .8); }
.davops__line--steer { align-self: center; background: rgba(var(--vc2), .1); border: 1px solid rgba(var(--vc2), .34); color: #cff6ff; font-family: var(--mono, monospace); font-size: .72rem; letter-spacing: .01em; padding: 7px 13px; border-radius: 999px; max-width: 92%; }

/* ══ MOVEABLE / RESIZABLE WINDOW (desktop) ══ */
.davops__resize { display: none; position: absolute; right: 3px; bottom: 3px; width: 20px; height: 20px; cursor: nwse-resize; z-index: 8; touch-action: none;
  background:
    linear-gradient(135deg, transparent 44%, rgba(var(--vc), .55) 44%, rgba(var(--vc), .55) 52%, transparent 52%),
    linear-gradient(135deg, transparent 62%, rgba(var(--vc2), .55) 62%, rgba(var(--vc2), .55) 70%, transparent 70%); }
.davops.is-windowed {
  left: 40px; top: 40px; right: auto; bottom: auto; width: 420px; height: 640px; max-width: none; transform: none;
  border: 1px solid rgba(var(--vc), .22); border-radius: 22px; overflow: hidden; padding: 8px 14px 12px;
  box-shadow: 0 30px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(var(--vc), .1), inset 0 1px 0 rgba(255,255,255,.05);
  animation: vcWinIn .3s var(--dv-spring, cubic-bezier(.32,1.4,.45,1));
  container-type: size; container-name: davops; }    /* the panel is a size container → children adapt to ITS size, not the viewport */
@keyframes vcWinIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.davops.is-windowed .davops__resize { display: block; }
.davops.is-windowed.is-cfg .davops__resize, .davops.is-windowed.is-liveview .davops__resize { display: none; }   /* the grip must not sit over an open sheet */
.davops.is-windowed .davops__head { cursor: grab; }
.davops.is-windowed .davops__head:active { cursor: grabbing; }
.davops.is-windowed .davops__orb { width: 132px; height: 132px; }
.davops.is-windowed .davops__core { width: 78px; height: 78px; }
.davops.is-windowed .davops__stage { gap: 12px; padding: 4px 0; }
.davops.is-windowed .davops__feed { max-height: 20vh; }
.davops.is-windowed .davops__foot { gap: 10px; }
body.davops-open.davops-windowed { overflow: auto; }   /* release the page scroll-lock — the app stays usable behind the floating panel */

/* ── the floating panel adapts to ITS OWN size (container queries) so it never breaks when shrunk ──
   (selectors are scoped under .davops.is-windowed so they out-specify the base windowed sizing) */
/* narrow → reclaim header width: drop the subtitle, trim the header buttons so "DAV-OPS" never wraps */
@container davops (max-width: 432px) {
  .davops.is-windowed .davops__id span { display: none; }
  .davops.is-windowed .davops__hbtn { width: 34px; height: 34px; } .davops.is-windowed .davops__hbtn svg { width: 16px; height: 16px; }
}
/* shorter → shrink the orb, tighten the stage, compact the controls so everything fits */
@container davops (max-height: 640px) {
  .davops.is-windowed .davops__orb { width: 106px; height: 106px; }
  .davops.is-windowed .davops__core { width: 64px; height: 64px; box-shadow: 0 0 20px rgba(var(--vc), .4), inset 0 0 20px rgba(255,255,255,.13); }
  .davops.is-windowed .davops__stage { gap: 8px; padding: 4px 0; }
  .davops.is-windowed .davops__interim { font-size: .92rem; }
  .davops.is-windowed .davops__foot { gap: 9px; }
  .davops.is-windowed .davops__cbtn { width: 50px; height: 50px; } .davops.is-windowed .davops__end { width: 56px; height: 56px; } .davops.is-windowed .davops__controls { gap: 16px; }
  .davops.is-windowed .davops__ptt { padding: 12px; }
}
/* short → the orb can't fit gracefully: drop it, keep the STATE as a compact glowing line; controls own the room */
@container davops (max-height: 540px) {
  .davops.is-windowed .davops__orb { display: none; }
  .davops.is-windowed .davops__stage { flex: 0 0 auto; padding: 4px 0 2px; }
  /* the orb distilled to a single breathing point of light beside the state — still alive, no room lost */
  .davops.is-windowed .davops__status { font-size: .72rem; position: relative; padding-left: 17px; display: inline-flex; align-items: center; }
  .davops.is-windowed .davops__status::before { content: ''; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff, rgb(var(--vc2)) 70%); box-shadow: 0 0 10px rgba(var(--vc), .85); animation: vcBreath 2.6s ease-in-out infinite; }
  .davops.is-windowed .davops__feed { max-height: 16vh; }
  .davops.is-windowed .davops__cbtn { width: 46px; height: 46px; } .davops.is-windowed .davops__end { width: 52px; height: 52px; } .davops.is-windowed .davops__controls { gap: 14px; }
}
/* tiny → trim the extras so nothing clips or collides (Votus + controls + compose stay) */
@container davops (max-height: 448px) {
  .davops.is-windowed .davops__feed { max-height: 11vh; }
  .davops.is-windowed .davops__modes { padding: 3px; } .davops.is-windowed .davops__mode { padding: 5px 12px; font-size: .62rem; }
  .davops.is-windowed .davops__ptt { padding: 10px; font-size: .68rem; }
  .davops.is-windowed .davops__note { display: none; }
  .davops.is-windowed .davops__foot { gap: 7px; }
}
/* full-screen on a SHORT viewport (landscape phone) gets the same graceful shrink via the overflow-safe stage */
@media (max-height: 620px) {
  .davops:not(.is-windowed) .davops__orb { width: 128px; height: 128px; }
  .davops:not(.is-windowed) .davops__core { width: 74px; height: 74px; }
}
@media (max-height: 500px) {
  .davops:not(.is-windowed) .davops__orb { display: none; }
  .davops:not(.is-windowed) .davops__stage { flex: 0 0 auto; }
}

/* ══ OPS-LIVE — the live window (secure: only reads a URL you set on THIS device) ══ */
.davops__live { position: absolute; inset: auto 0 0 0; z-index: 6; transform: translateY(100%); transition: transform .34s var(--dv-spring, cubic-bezier(.32,1.4,.45,1));
  background: linear-gradient(180deg, rgba(10,14,24,.995), rgba(6,9,16,.998)); border-top: 1px solid rgba(var(--vc), .3); border-radius: 22px 22px 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(0,0,0,.5); max-height: 86vh; overflow-y: auto; }
.davops.is-liveview .davops__live { transform: translateY(0); }
.davops__lhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.davops__live h4 { font-family: var(--display, var(--body)); font-weight: 800; font-size: .84rem; margin: 0; color: var(--vc-ink); letter-spacing: .04em; }
.davops__lsrc { font-family: var(--mono, monospace); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--vc), .72); display: inline-flex; align-items: center; gap: 6px; }
.davops__lsrc::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-mute, #90a6a0); flex: none; }
.davops__lsrc.is-live { color: rgba(var(--vc), .95); }
.davops__lsrc.is-live::before { background: rgb(var(--vc)); box-shadow: 0 0 8px rgb(var(--vc)); animation: vcLivePulse 1.6s ease-in-out infinite; }
.davops__lsrc.is-off::before { background: var(--vc-pink); }
@keyframes vcLivePulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.davops__live .davops__slbl { margin-top: 4px; }
/* the shape of her thinking — the Bench-Chain as five lit phases */
.davops__mind { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; margin-top: 10px; padding: 2px 4px 4px; }
.davops__phase { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; text-align: center; min-width: 0; }
.davops__phase::before { content: ''; position: absolute; top: 6px; left: -50%; width: 100%; height: 1px; background: rgba(255,255,255,.1); z-index: 0; }
.davops__phase:first-child::before { display: none; }
.davops__pdot { width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); position: relative; z-index: 1; transition: transform .3s var(--ease, ease), box-shadow .3s, background .3s; }
.davops__plbl { font-family: var(--mono, monospace); font-size: .54rem; letter-spacing: .03em; text-transform: uppercase; color: rgba(215,255,242,.72); line-height: 1.24; transition: color .3s; }
.davops__phase.is-done .davops__pdot { background: rgba(var(--vc), .5); border-color: rgba(var(--vc), .6); }
.davops__phase.is-lit .davops__pdot { background: radial-gradient(circle at 40% 35%, #fff, rgb(var(--vc2))); border-color: rgba(var(--vc2), .85); box-shadow: 0 0 15px rgba(var(--vc2), .85); transform: scale(1.28); }
.davops__phase.is-lit .davops__plbl { color: var(--vc-ink); }
/* the rolling activity log */
.davops__llog { margin-top: 10px; max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
.davops__llog::-webkit-scrollbar { width: 5px; } .davops__llog::-webkit-scrollbar-thumb { background: rgba(var(--vc), .3); border-radius: 4px; }
.davops__lempty { font-size: .74rem; color: var(--ink-mute, #90a6a0); line-height: 1.55; padding: 8px 2px; }
.davops__lrow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 11px; border-radius: 11px; background: rgba(255,255,255,.028); border: 1px solid var(--glass-line, rgba(255,255,255,.06)); animation: vcRise .3s var(--ease-out, ease); }
.davops__lg { flex: none; width: 20px; text-align: center; font-size: .84rem; line-height: 1.5; }
.davops__lb { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.davops__lb b { font-size: .62rem; font-weight: 700; color: rgba(var(--vc), .95); font-family: var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; }
.davops__lb span { font-size: .84rem; color: var(--ink-soft, #cfe0db); line-height: 1.42; word-break: break-word; }
.davops__lrow--move .davops__lb b, .davops__lrow--file .davops__lb b { color: rgba(var(--vc2), .95); }
.davops__lrow--steer { border-color: rgba(var(--vc2), .3); background: rgba(var(--vc2), .05); }
.davops__lwire { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--glass-line, rgba(255,255,255,.07)); }

/* hide the desktop-only window controls on phones + give the compact Votus dial a real touch target */
@media (max-width: 719px) {
  /* PARITY LAW (2026-08-03): the window + resize controls exist on EVERY surface.
     canWindow() in JS is the only gate — an honest refusal beats a hidden door. */
  .davops__vrange { height: 44px; }                                              /* taller invisible hit band (slim 4px track unchanged) */
  .davops__vrange::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; }
  .davops__vrange::-moz-range-thumb { width: 24px; height: 24px; }
}

/* ── per-message actions: copy (all) + replay her voice (Davara's) ── */
.davops__lt { display: block; }
.davops__lacts { display: inline-flex; gap: 5px; margin-top: 7px; opacity: .62; transition: opacity .16s var(--ease, ease); }
.davops__line--you .davops__lacts { justify-content: flex-end; width: 100%; }
.davops__line:hover .davops__lacts, .davops__line:focus-within .davops__lacts { opacity: 1; }
.davops__lb2 { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; cursor: pointer; flex: none;
  border: 1px solid var(--glass-line, rgba(255,255,255,.1)); background: rgba(255,255,255,.035); color: var(--ink-soft, #cfe0db); transition: .14s var(--ease, ease); }
.davops__lb2 svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.davops__lb2:hover { border-color: rgba(var(--vc), .5); color: var(--vc-ink); background: rgba(var(--vc), .12); }
.davops__lb2.done { border-color: rgba(var(--vc), .75); color: var(--vc-ink); background: rgba(var(--vc), .2); }

/* ── Files: attach .md / text to a DAV-OPS message (same idea as the main composer) ── */
.davops__file { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--glass-line, rgba(255,255,255,.1)); background: rgba(255,255,255,.03); color: var(--ink-soft, #cfe0db); transition: .16s var(--ease, ease); }
.davops__file svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.davops__file:hover { border-color: rgba(var(--vc), .5); color: var(--vc-ink); }
.davops__files { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; max-width: 520px; padding: 0 2px; }
.davops__files[hidden] { display: none; }
.davops__fchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 11px; border-radius: 999px;
  background: rgba(var(--vc2), .1); border: 1px solid rgba(var(--vc2), .3); color: #cff6ff; font-size: .74rem; max-width: 100%; }
.davops__fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.davops__fchip button { border: none; background: rgba(255,255,255,.08); color: inherit; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: .68rem; line-height: 1; display: grid; place-items: center; flex: none; }
.davops__fchip button:hover { background: rgba(255,122,155,.3); }

/* reduced motion — stillness with meaning */
body.no-motion .davops__core, body.no-motion .davops__ring, body.no-motion .davops-dock__orb,
body.no-motion .davara__davops.is-live, body.no-motion .davops__line,
body.no-motion .davops__glyph::before, body.no-motion .davops__head::after, body.no-motion .davops__lsrc.is-live::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .davops__core, .davops__ring, .davops-dock__orb, .davara__davops.is-live,
  .davops__glyph::before, .davops__head::after, .davops__lsrc.is-live::before, .davops__status::before { animation: none !important; }
  .davops, .davops__line, .davops-dock, .davops__settings, .davops__live, .davops__lrow { animation: none !important; transition: none !important; }
  .davops__pdot, .davops__plbl, .davops__phase { transition: none !important; }
}
/* small phones */
@media (max-width: 380px) {
  /* The orb used to grow to 168px HERE — biggest on the smallest screens, which is
     backwards, and it is the state you meet on first open. It shrinks now instead. */
  .davops__orb { width: 68px; height: 68px; } .davops__core { width: 40px; height: 40px; }
  .davops__cbtn { width: 46px; height: 46px; } .davops__end { width: 54px; height: 54px; } .davops__controls { gap: 14px; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   DAV-OPS — THE THREAD IS THE ROOM
   The stage band was holding the top half of a phone for an orb and a status word.
   It is now a thin presence strip, and the feed (already flex:1) takes the rest.
   ══════════════════════════════════════════════════════════════════════════════ */
.davops__stage{ padding:2px 0 0; gap:7px; }
.davops.has-convo .davops__stage{ gap:5px; padding:0; }

/* the thread: an editorial column, not a bubble stack. Two voices told apart by
   alignment, measure and hue — no boxes, no chrome, and no grey anywhere. */
.davops__feed{ gap:13px; padding:8px 4px 10px; }
.davops__feed:empty::before{ max-width:280px; color:#d7fff2; opacity:.9; font-size:.95rem; }

@media (max-width:420px){
  /* on a phone the thread is the product: give it every pixel the chrome can spare */
  .davops__feed{ padding:6px 2px 8px; gap:12px; }
  .davops__votus{ max-height:26px; gap:8px; }
  .davops__modes{ padding:3px; }
}

/* the orb's shrink is a settle, not a jump — it already transitions width/height */
@media (prefers-reduced-motion: reduce){ .davops__orb{ transition:none; } }

/* ═══ DAV-OPS · THE CONVERSATION GETS THE SCREEN ═══════════════════════════
   The overlay spent its top third on a title, four keys, a large orb and a
   status line. All of it is still in the DOM — everything that queries
   [data-vc-orb] / [data-vc-status] keeps finding them — it is simply not
   painted until the mark is asked for it. Hiding by CSS and removing by JS look
   identical on screen and are not remotely the same in a codebase. */

/* ── the band, folded away ── */
.davops:not(.is-chrome) .davops__id,
.davops:not(.is-chrome) .davops__livebtn,
.davops:not(.is-chrome) .davops__winbtn,
.davops:not(.is-chrome) [data-vc=cfg],
.davops:not(.is-chrome) [data-vc=min],
.davops:not(.is-chrome) .davops__stage { display: none !important; }

/* ── the one mark, hard into the corner ── */
.davops__head { padding: calc(env(safe-area-inset-top) + 5px) 10px 3px 4px; gap: 8px; align-items: flex-start; }
.davops:not(.is-chrome) .davops__head { padding-left: 3px; }
.davops__glyph {
  width: 44px; height: 44px; flex: none; padding: 0; overflow: hidden; position: relative;
  border-radius: 30%; border: 1.6px solid rgba(var(--vc), .75);
  background: radial-gradient(120% 120% at 50% 18%, rgba(14,26,34,.95), rgba(5,10,14,.99));
  color: rgb(var(--vc)); cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 0 20px -8px rgba(var(--vc), .8), inset 0 1px 0 rgba(255,255,255,.10);
  transition: border-color .2s, box-shadow .2s, transform .2s cubic-bezier(.2,1.25,.3,1);
}
.davops__glyph .w-mark { position: absolute; top: -4px; left: -4px; width: calc(100% + 8px); height: calc(100% + 8px); }
.davops__glyph:hover { border-color: rgb(var(--vc)); transform: scale(1.04); }
.davops.is-chrome .davops__glyph { border-color: rgb(var(--vc)); box-shadow: 0 0 28px -6px rgba(var(--vc), .95); }
.davops__glyphfb { width: 16px; height: 16px; border-radius: 50%; background: currentColor; }

/* HER VOICE, IN THE WAVES — the group scales to a live amplitude and the travel
   speeds up. Two elements, because a CSS transform REPLACES rather than
   composes: the paths own the loop, the group owns the breath. */
.w-mark__set { transform-box: view-box; transform-origin: 50% 50%;
  transform: scaleY(calc(1 + var(--wamp, 0) * .55));
  transition: transform .09s linear; }
.davops[data-state=speaking] .w-mark__w,
.davops-float[data-state=speaking] .w-mark__w { animation-duration: calc(var(--wd, 2.4s) * .34); }
.davops[data-state=listening] .davops__glyph { border-color: #7cf3c0; box-shadow: 0 0 26px -6px rgba(124,243,192,.9); }
.davops[data-state=thinking] .davops__glyph { animation: vcThink 1.3s ease-in-out infinite; }

/* ── the band drops from above ── */
.davops.is-chrome .davops__id,
.davops.is-chrome .davops__livebtn,
.davops.is-chrome .davops__winbtn,
.davops.is-chrome [data-vc=cfg],
.davops.is-chrome [data-vc=min],
.davops.is-chrome .davops__stage { animation: opsDrop .42s cubic-bezier(.2,.9,.25,1) both; }
@keyframes opsDrop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ── the feed takes everything the chrome gave back ── */
.davops__feed { flex: 1; min-height: 0; }
.davops:not(.is-chrome) .davops__feed { padding-top: 2px; margin-top: -38px; }

/* ── ONE CONTROL LINE: Live · mic · end · speaker · PUSH ── */
.davops__controls { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap; }
.davops__controls .davops__mode {
  flex: none; padding: 7px 13px; border-radius: 999px; font-size: .68rem; letter-spacing: .09em;
  text-transform: uppercase; font-family: var(--mono, monospace);
  border: 1px solid rgba(var(--vc), .34); background: rgba(var(--vc), .05);
  color: var(--ink-soft, #cfe0db); cursor: pointer; transition: all .18s;
}
.davops__controls .davops__mode.is-on {
  border-color: rgb(var(--vc)); background: rgba(var(--vc), .16); color: #eafcff;
  box-shadow: 0 0 18px -6px rgba(var(--vc), .8);
}
.davops__modes { display: none; }          /* the modes moved into the line above */
.davops__foot { gap: 9px; padding-top: 6px; }
.davops__ptt { margin: 0 0 2px; }

/* ── the VOTUS panel wears the main panel's clothes ── */
.davops__votus { display: block; width: 100%; margin-top: 2px; }
.davops__votus .dv-vb__panel { margin: 0; }


/* ═══ THE FOOT STOPS COLLIDING WITH ITSELF ═════════════════════════════════
   `.davops__foot` is a COLUMN FLEX container, and the votus host was left
   shrinkable — so a 118px panel sat inside a box the flex algorithm had squashed
   to 26px and painted 92px of itself onto the compose row below.

   A flex item that shrinks below its content does not clip. It spills.

   Every child of the foot now keeps the height its content needs, and the FEED
   gives up the space instead — which is correct regardless: the transcript is
   the elastic part, the controls are not. */
.davops__foot > *{ flex: none !important; }
.davops__foot{ flex: none; min-height: 0; }
.davops__feed{ flex: 1 1 auto; min-height: 60px; overflow-y: auto; }
/* and if a phone is genuinely too short for the open panel, the foot scrolls
   rather than any part of it landing on any other part */
.davops__foot{ max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; }

/* the votus panel sits flush and owns its own height */
.davops__votus{ display: block; width: 100%; flex: none; margin: 0; padding: 0; }
.davops__votus .dv-vb__panel{ margin: 0; width: 100%; }

/* ── THE CENTRE, ALIVE ──
   The middle of the open band is the wave mark in the round, driven by the same
   amplitude the corner reads — the thing you watch while she talks IS her voice,
   in the same language as every other wave in the product. */
.davops__orb{ position: relative; overflow: hidden; border-radius: 50%; }
.davops__orb .w-mark{
  position: absolute; top: 8%; left: 8%; width: 84%; height: 84%;
  border-radius: 50%; overflow: hidden; z-index: 2; color: rgb(var(--vc));
  opacity: .92; filter: drop-shadow(0 0 8px rgba(var(--vc), .55));
}
.davops__orb .w-mark__w{ stroke-width: 1.7; }
.davops__core{ z-index: 1; }

/* THE ACTUAL CAUSE:  (and 26px on mobile) on the votus host —
   a leftover from when it held a single slider row. The full panel is 118px, and
   a max-height clamp does not shrink content, it lets it spill. So the panel
   painted 92px of itself onto the compose row below.
   flex:none could never have fixed this; the clamp had to go. */
.davops__votus{ max-height: none !important; height: auto !important; }
@media (max-width: 560px){ .davops__votus{ max-height: none !important; } }


/* ═══ THE BOTTOM IS SAFE ═══════════════════════════════════════════════════
   I measured foot.bottom 800 against innerHeight 812 and called it on-screen.
   The emulator has no safe-area inset; on a real phone the home indicator lives
   in exactly that band, so 12px of harness headroom was a clipped compose bar in
   the hand. Measuring the viewport is not measuring the SAFE viewport. */
.davops__foot{
  padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
  max-height: none;
}
.davops{ height: 100svh; max-height: 100svh; }
.davops__feed{ flex: 1 1 auto; min-height: 48px; }
/* the panel breathes: two rows of controls under the track, never crowded */
.davops__votus .dv-vb__acts{ margin-top: 6px; }
.davops__votus .dv-vb__len{ margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.davops__votus .dv-vb__tierline{ margin: 2px 0 0; }


/* ═══ THE PANEL ═══════════════════════════════════════════════════════════
   THE TRACK CAN BE HELD. The foot is a scroll container, so without
   touch-action:none a touch-drag on the rail is claimed as a scroll and the
   thumb never moves. The thumb is bigger here than in the typed panel: this one
   is used one-handed, with a thumb, while talking. */
.davops__votus .dv-vb__range{ touch-action: none; height: 8px; }
.davops__votus .dv-vb__range::-webkit-slider-thumb{ width: 22px; height: 22px; }
.davops__votus .dv-vb__range::-moz-range-thumb{ width: 22px; height: 22px; }
/* the readout floats ABOVE the rail, so the rail has to be told the readout is
   there — 19px reserved against a 22px pill is how a floating label lands back
   on the thing it floats over */
.davops__votus .dv-vb__row{ padding-top: 27px; margin-top: 5px; }
/* and it stops at either end rather than walking off the component: at a low
   spend the thumb is near the left edge and half the pill was outside */
.davops__votus .dv-vb__panel .dv-vb__val{
  left: min(max(calc(var(--p, .5) * (100% - 16px) + 8px), 48px), calc(100% - 48px));
}

/* THE PANEL READS TOP TO BOTTOM. dv-vb__panel is a wrap-flex whose children
   carry explicit order from the typed composer's one-line design — so two new
   rows with no order sorted themselves ABOVE the ladder. They are given their
   place in the sequence rather than pulled out of it. */
.davops__votus .dv-vb__panel > .davops__vrow{ flex: 1 1 100%; }
.davops__votus .davops__vrow{ order: 0; }   /* above the ladder: settings you set once,
                                               heading the decisions you make often */
.davops__votus .davops__vhint{ order: 6; }

.davops__vrow{ display: flex; align-items: stretch; gap: 8px; margin: 0 0 4px; width: 100%; }
/* (the Spend/Length labels are gone — a chip that says "Dynamic" is its own label) */

/* ── THE PILL ──
   One decision, one pill, the state it is in written on its face. It is the
   ladder's own material — the glass floor, the tinted lit fill, the 62% rim,
   the bloom, the inset highlight — because this is the same family of control,
   only driven by a tap instead of a drag. */
.davops__pill{
  position: relative; flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 10px; min-height: 33px; border-radius: 999px; cursor: pointer;
  overflow: hidden; isolation: isolate;
  font-family: var(--mono, monospace); font-size: .68rem; font-weight: 700;
  letter-spacing: .03em; line-height: 1.3; white-space: nowrap;
  color: #eaf4ff;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tg) 24%, rgba(14,19,34,.97)),
    color-mix(in srgb, var(--tg) 8%, rgba(9,12,22,.98)));
  border: 1px solid color-mix(in srgb, var(--tg) 62%, transparent);
  box-shadow: 0 0 24px -8px color-mix(in srgb, var(--tg) 95%, transparent),
              inset 0 1px 0 rgba(255,255,255,.14);
  text-shadow: 0 0 12px color-mix(in srgb, var(--tg) 55%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .16s ease;
  --tg: rgb(var(--dv-accent, 61 242 255));
}
.davops__pill--len{ --tg: rgb(var(--dv-accent, 61 242 255)); }   /* the telling keeps the cool signal */
.davops__pill:active{ transform: scale(.97); }
.davops__pill:focus-visible{ outline: 1px solid color-mix(in srgb, var(--tg) 80%, transparent); outline-offset: 2px; }
.davops__pl{ display: inline-flex; align-items: center; gap: 5px; }
/* a tap is a change of STATE — the new label arrives, it does not just appear */
.davops__pl.is-roll{ animation: opsRoll .3s cubic-bezier(.22,1.3,.36,1); }
@keyframes opsRoll{
  0%{ transform: translateY(70%); opacity: 0; }
  100%{ transform: translateY(0); opacity: 1; }
}
.davops__shaped{ font-style: normal; font-size: .85em; opacity: .95; }
.davops__pill.is-shaped{ border-style: dashed; }   /* you gave this length a shape */

.davops__vhint{
  margin-top: 6px; text-align: center; font-family: var(--mono, monospace);
  font-size: .5rem; letter-spacing: .06em; color: #9fb0d8; opacity: .66;
}

@media (max-width: 380px){
  .davops__pill{ font-size: .63rem; padding: 7px 6px; }
  .davops__vrow{ gap: 7px; }
}
@media (prefers-reduced-motion: reduce){
  .davops__pl.is-roll{ animation: none; }
}

/* the shaping editor lives INSIDE the overlay's stacking context, so it needs
   its own ceiling rather than the document-level one */
.davops__lened{ position: fixed; inset: 0; z-index: 60; }


/* ═══ THE TOP OPENS UP ═════════════════════════════════════════════════════
   THE LINE IS GONE. It was a hairline under the header and it read as a
   ceiling — the transcript stopped dead against it. With the band folded away
   the header now FLOATS over the feed, and the feed dissolves as it passes
   beneath the mark: text rises, goes translucent, and leaves. Nothing collides
   with a rule because there is no longer a rule to collide with. */
.davops__head::after{ display: none !important; }

.davops:not(.is-chrome) .davops__head{
  position: absolute; top: 0; left: 0; right: 0; z-index: 7;
  pointer-events: none;                       /* the bar is air; only the mark is a target */
}
.davops:not(.is-chrome) .davops__head > *{ pointer-events: auto; }
.davops:not(.is-chrome) .davops__feed{
  margin-top: 0; padding-top: 4px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 26px, #000 62px);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 26px, #000 62px);
}

/* THE TITLE IS THE TITLE. With the subtitle gone the name takes the room, and
   it scales with the screen so a long one still fits the fixed header. */
.davops__id{ justify-content: center; }
.davops.is-chrome .davops__id b{
  font-size: clamp(1.02rem, 5.4vw, 1.62rem);
  letter-spacing: .015em; line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 22px rgba(var(--vc), .34);
}
/* the header keys give the name its room back */
.davops.is-chrome .davops__hbtn{ width: 34px; height: 34px; border-radius: 11px; }
.davops.is-chrome .davops__hbtn svg{ width: 17px; height: 17px; }
.davops.is-chrome .davops__head{ gap: 7px; }

/* the mark answers when a name is locked in */
.davops__glyph.is-named{ animation: opsNamed .7s cubic-bezier(.2,1.3,.35,1); }
@keyframes opsNamed{
  0%{ box-shadow: 0 0 0 0 rgba(var(--vc), .8), 0 0 28px -6px rgba(var(--vc), .95); }
  70%{ box-shadow: 0 0 0 14px rgba(var(--vc), 0), 0 0 40px -4px rgba(var(--vc), 1); }
  100%{ box-shadow: 0 0 0 0 rgba(var(--vc), 0), 0 0 28px -6px rgba(var(--vc), .95); }
}

/* ── THE NAMING CARD ──
   The field IS the nameplate: same size, same weight, same letterspacing as the
   title it becomes. Nothing to preview, so nothing that can disagree. */
.davops__named{
  position: fixed; inset: 0; z-index: 62; display: grid; place-items: center;
  padding: 20px; background: rgba(3,7,14,.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: opsNamedIn .22s var(--ease-out, ease);
}
.davops__named.is-out{ animation: opsNamedOut .18s ease forwards; }
@keyframes opsNamedIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes opsNamedOut{ to{ opacity: 0; } }
.davops__namecard{
  width: min(380px, 100%); padding: 22px 20px 18px; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, rgba(16,24,40,.98), rgba(8,12,22,.99));
  border: 1px solid rgba(var(--vc), .34);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.95), 0 0 48px -22px rgba(var(--vc), .8),
              inset 0 1px 0 rgba(255,255,255,.09);
  animation: opsCardRise .34s cubic-bezier(.22,1.3,.36,1);
}
@keyframes opsCardRise{ from{ transform: translateY(14px) scale(.97); opacity: 0; } to{ transform: none; opacity: 1; } }
.davops__namemark{ width: 52px; height: 52px; margin: 0 auto 12px; position: relative; color: rgb(var(--vc)); }
.davops__namemark .w-mark{ position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 12px rgba(var(--vc), .6)); }
.davops__namet{ margin: 0 0 6px; font-family: var(--display, inherit); font-weight: 800; font-size: 1.02rem; letter-spacing: .01em; color: var(--vc-ink, #eaf4ff); }
.davops__names{ margin: 0 0 16px; font-size: .78rem; line-height: 1.5; color: #c3d3ef; opacity: .88; }
.davops__namein{
  width: 100%; box-sizing: border-box; text-align: center; padding: 12px 14px;
  border-radius: 14px; border: 1px solid rgba(var(--vc), .42);
  background: rgba(6,11,20,.85); color: var(--vc-ink, #eaf4ff);
  font-family: var(--display, inherit); font-weight: 800;
  font-size: 1.32rem; letter-spacing: .015em;            /* the nameplate itself */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 26px -14px rgba(var(--vc), .9);
  outline: none;
}
.davops__namein:focus{ border-color: rgb(var(--vc)); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 30px -10px rgba(var(--vc), .95); }
.davops__namerow{ display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.davops__namesp{ flex: 1 1 auto; }
.davops__nameb{
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
  color: #dbe7ff; font-family: var(--mono, monospace); font-size: .68rem; letter-spacing: .04em;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.davops__nameb:hover{ border-color: rgba(var(--vc), .55); background: rgba(var(--vc), .08); }
.davops__nameb.is-go{
  border-color: rgba(var(--vc), .7); color: #eaf9ff; font-weight: 700;
  background: linear-gradient(180deg, rgba(var(--vc), .26), rgba(var(--vc), .08));
  box-shadow: 0 0 24px -8px rgba(var(--vc), .95), inset 0 1px 0 rgba(255,255,255,.14);
}
@media (prefers-reduced-motion: reduce){
  .davops__named, .davops__namecard, .davops__glyph.is-named{ animation: none !important; }
}


/* ═══ THE THREAD ═══════════════════════════════════════════════════════════
   Five dots on a 1.4s timer became a list of things that actually happened.
   It reads top to bottom like a turn does: heard → weighed → routed → shaped →
   (searched) → answered → wrote. The live row is the only one that moves,
   because the clock is the only thing genuinely changing while you wait. */
.davops__thread{ display: flex; flex-direction: column; gap: 5px; max-height: 32vh; overflow-y: auto; scrollbar-width: thin; }
.davops__thread::-webkit-scrollbar{ width: 4px; }
.davops__thread::-webkit-scrollbar-thumb{ background: rgba(var(--vc), .3); border-radius: 4px; }
.davops__trempty{
  padding: 12px 13px; border-radius: 12px; font-size: .74rem; line-height: 1.5;
  color: #b8c8e6; background: rgba(255,255,255,.022);
  border: 1px dashed rgba(255,255,255,.09);
}
.davops__tr{
  display: grid; grid-template-columns: 20px 1fr auto; align-items: start; gap: 9px;
  padding: 8px 11px; border-radius: 12px;
  background: rgba(255,255,255,.026); border: 1px solid rgba(255,255,255,.06);
  animation: vcRise .28s var(--ease-out, ease);
}
.davops__trg{ font-size: .82rem; line-height: 1.35; opacity: .9; text-align: center; }
.davops__trb{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.davops__trb b{
  font-family: var(--mono, monospace); font-size: .61rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: rgba(var(--vc2), .95);
}
.davops__trb span{ font-size: .76rem; line-height: 1.45; color: #dce8ff; opacity: .92; word-break: break-word; }
.davops__trt{
  font-family: var(--mono, monospace); font-size: .58rem; letter-spacing: .04em;
  color: #93a6c9; opacity: .8; padding-top: 2px; white-space: nowrap;
}
/* the one row still happening */
.davops__tr.is-live{
  border-color: rgba(var(--vc), .42);
  background: linear-gradient(180deg, rgba(var(--vc), .1), rgba(var(--vc), .03));
  box-shadow: 0 0 26px -12px rgba(var(--vc), .9), inset 0 1px 0 rgba(255,255,255,.07);
}
.davops__tr.is-live .davops__trg{ animation: opsPulse 1.5s ease-in-out infinite; }
.davops__tr.is-live .davops__trt{ color: rgb(var(--vc)); opacity: 1; }
@keyframes opsPulse{ 0%,100%{ opacity: .5; transform: scale(1); } 50%{ opacity: 1; transform: scale(1.16); } }
/* the kinds, coloured by what they mean rather than decorated */
.davops__tr--heard .davops__trb b{ color: #9df7d4; }
.davops__tr--weigh .davops__trb b{ color: #ffd86b; }
.davops__tr--search .davops__trb b{ color: #7cc0ff; }
.davops__tr--write .davops__trb b{ color: #d6a8ff; }
.davops__tr--halt{ border-color: rgba(var(--vc-pink, 255 122 155), .34); }
.davops__tr--halt .davops__trb b{ color: #ff9db4; }
/* the elapsed clock on the stage's interim line */
.davops__el{ font-style: normal; font-family: var(--mono, monospace); font-size: .82em; opacity: .6; margin-left: 8px; }
@media (prefers-reduced-motion: reduce){
  .davops__tr, .davops__tr.is-live .davops__trg{ animation: none !important; }
}


/* ═══ THE TITLE SITS ON THE MARK'S LINE ════════════════════════════════════
   The head is `align-items: flex-start`, which was right when the title block
   was two stacked lines and wrong the moment it became one: the name pinned to
   the top of a 44px row while the mark and the keys centred themselves in it,
   so three things that belong on one line sat on three different ones. */
.davops.is-chrome .davops__head{ align-items: center; }
.davops.is-chrome .davops__id{ align-self: center; }


/* ═══ THE MODE PANEL ═══════════════════════════════════════════════════════
   The meter and the modes are two faces of one control, so this occupies the
   same box and the same rhythm — nothing moves around it when it swaps. */
.davops__modes2{ display: flex; flex-direction: column; gap: 8px; }
.davops__mhead{ display: flex; align-items: baseline; gap: 8px; }
.davops__mhead span{ font-family: var(--mono, monospace); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: #cbd6f5; opacity: .7; }
.davops__mhead b{ font-family: var(--display, inherit); font-weight: 800; font-size: .84rem; color: var(--vc-ink, #eaf4ff); letter-spacing: .01em; }

/* the four keys — white, cyan-rimmed, RAISED out of the panel. The chosen one
   sinks IN: pressed, committed. That is the one piece of this style that carries
   meaning rather than decoration. */
.davops__mgrid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.davops__mk{
  position: relative; display: flex; align-items: center; justify-content: center; gap: 3px;
  min-height: 42px; padding: 8px 4px; border-radius: 14px; cursor: pointer; overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, #eaf3f7 55%, #dbe8ef 100%);
  border: 1.6px solid rgba(var(--vc), .55);
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.85),
              0 0 20px -10px rgba(var(--vc), .8),
              inset 0 1px 0 rgba(255,255,255,.95),
              inset 0 -2px 4px rgba(120,150,170,.28);
  color: #0a1622; font-family: var(--mono, monospace); font-weight: 800;
  font-size: .63rem; letter-spacing: .04em; line-height: 1.2;
  transition: transform .16s var(--ease, ease), box-shadow .22s ease, border-color .22s ease, filter .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.davops__mk:hover{ border-color: rgb(var(--vc)); filter: brightness(1.03); }
.davops__mk:active{ transform: translateY(1px) scale(.985); }
.davops__mk.is-on{
  transform: translateY(1px);
  border-color: rgb(var(--vc));
  box-shadow: 0 0 26px -8px rgba(var(--vc), 1),
              inset 0 3px 7px rgba(90,125,150,.42),
              inset 0 -1px 0 rgba(255,255,255,.85);
  background: linear-gradient(160deg, #f2fbff 0%, #dcecf4 60%, #cadfea 100%);
}
.davops__mk.is-on::after{
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--vc)), transparent);
  box-shadow: 0 0 12px rgba(var(--vc), .95);
}
.davops__mks{ font-style: normal; font-size: .78em; opacity: .75; }
.davops__mk.is-shaped{ border-style: dashed; }
.davops__mblurb{ font-size: .7rem; line-height: 1.45; color: #d6e4ff; opacity: .86; min-height: 2.1em; }

/* LOCK-IN — the one control in DAV-OPS that looks like a decision */
.davops__lockin{
  position: relative; width: 100%; min-height: 40px; margin-top: 2px;
  border-radius: 14px; cursor: pointer; overflow: hidden; isolation: isolate;
  border: 1.6px solid rgba(var(--vc), .75);
  background: linear-gradient(180deg, rgba(var(--vc), .3), rgba(var(--vc), .08));
  color: #eaf9ff; font-family: var(--mono, monospace); font-weight: 800;
  font-size: .74rem; letter-spacing: .22em;
  box-shadow: 0 0 30px -10px rgba(var(--vc), 1), inset 0 1px 0 rgba(255,255,255,.18);
  text-shadow: 0 0 16px rgba(var(--vc), .8);
  transition: transform .16s ease, box-shadow .22s ease;
}
.davops__lockin::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform: translateX(-120%); animation: lkSweep 3.6s ease-in-out infinite;
}
@keyframes lkSweep{ 0%,60%{ transform: translateX(-120%); } 100%{ transform: translateX(120%); } }
.davops__lockin:active{ transform: scale(.985); }

/* the panel answers the moment it is locked */
.davops__votus.is-locking{ animation: lkPanel 1.1s cubic-bezier(.2,1.1,.3,1); }
@keyframes lkPanel{
  0%{ filter: none; transform: none; }
  18%{ filter: brightness(1.5) saturate(1.3); transform: scale(1.012); }
  55%{ filter: brightness(1.05); transform: scale(.997); }
  100%{ filter: none; transform: none; }
}

/* ── THE SINGULARITY ──
   A point opens, twelve rays reach the edges, a lattice ignites and everything
   collapses back into one light. Spent once, on the only irreversible tap in
   this interface — which is what keeps it from being noise. */
.davops__singularity{ position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.davops__singularity > *{ position: absolute; left: var(--sx, 50%); top: var(--sy, 50%); transform: translate(-50%, -50%); }
.davops__sgcore{
  width: 10px; height: 10px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 30px 10px rgba(var(--vc), .95), 0 0 90px 30px rgba(var(--vc2), .55);
  animation: sgCore 1.15s cubic-bezier(.2,1.05,.3,1) forwards;
}
@keyframes sgCore{
  0%{ transform: translate(-50%,-50%) scale(0); opacity: 0; }
  16%{ transform: translate(-50%,-50%) scale(2.4); opacity: 1; }
  62%{ transform: translate(-50%,-50%) scale(1.1); opacity: 1; }
  100%{ transform: translate(-50%,-50%) scale(0); opacity: 0; }
}
.davops__sgring{
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(var(--vc), .9); box-shadow: 0 0 26px rgba(var(--vc), .7);
  animation: sgRing 1.15s cubic-bezier(.15,.85,.25,1) forwards;
}
.davops__sgring--b{ border-color: rgba(var(--vc2), .8); animation-delay: .13s; }
@keyframes sgRing{
  0%{ transform: translate(-50%,-50%) scale(.2); opacity: 0; }
  20%{ opacity: 1; }
  100%{ transform: translate(-50%,-50%) scale(26); opacity: 0; }
}
.davops__sgrays{ width: 0; height: 0; }
.davops__sgrays i{
  position: absolute; left: 0; top: 0; width: 2px; height: 0;
  transform-origin: 50% 0; transform: rotate(var(--a)) translateY(0);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(var(--vc), .65), transparent);
  filter: drop-shadow(0 0 8px rgba(var(--vc), .95));
  animation: sgRay .95s cubic-bezier(.2,.9,.25,1) var(--d, 0ms) forwards;
}
@keyframes sgRay{
  0%{ height: 0; opacity: 0; }
  22%{ opacity: 1; }
  55%{ height: 62vmax; opacity: .95; }
  100%{ height: 0; opacity: 0; }
}
.davops__sglat{
  width: 78vmin; height: 78vmin; border-radius: 50%; opacity: 0;
  background:
    repeating-linear-gradient(60deg, rgba(var(--vc), .16) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-60deg, rgba(var(--vc2), .14) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 26px);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 72%);
          mask-image: radial-gradient(circle, #000 30%, transparent 72%);
  animation: sgLat 1.15s ease-out forwards;
}
@keyframes sgLat{
  0%{ opacity: 0; transform: translate(-50%,-50%) scale(.4) rotate(0deg); }
  30%{ opacity: .95; }
  100%{ opacity: 0; transform: translate(-50%,-50%) scale(1.35) rotate(24deg); }
}
.davops__corein{ width: 100%; box-sizing: border-box; }

@media (max-width: 380px){
  .davops__mk{ font-size: .57rem; min-height: 38px; border-radius: 12px; }
  .davops__mgrid{ gap: 5px; }
}
@media (prefers-reduced-motion: reduce){
  .davops__singularity, .davops__votus.is-locking, .davops__lockin::before{ animation: none !important; }
  .davops__singularity{ display: none; }
}

/* ═══ THE TWO FACES SHARE ONE BOX ══════════════════════════════════════════
   The meter face draws itself inside .dv-vb__panel; the modes face had no such
   box, so swapping between them moved every edge. Same padding, same rhythm —
   nothing shifts when the control changes what it is. */
.davops__modes2{ padding: 2px 2px 0; }
.davops__votus .davops__modes2 .davops__mhead{ padding-left: 2px; }
.davops__mblurb{ padding: 0 2px; }
.davops__modes2 .davops__vhint{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ═══ THE OPERATOR BENCH ═══════════════════════════════════════════════════
   Four numbers, and the fourth is the only one that can be NEGATIVE value: a
   cache read share under ~50% means the caching is costing more than it saves,
   so it is coloured by verdict rather than decorated. */
.davops__admin{ border-top: 1px solid rgba(var(--vc), .18); padding-top: 12px; }
.davops__adot{
  font-style: normal; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-family: var(--mono, monospace); font-size: .52rem; letter-spacing: .1em;
  color: #0b1220; background: linear-gradient(90deg, #f8b450, #5eead4);
}
.davops__bench{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 9px 0 6px; }
.davops__bcell{
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
}
.davops__bcell b{ font-family: var(--display, inherit); font-weight: 800; font-size: .92rem; color: var(--vc-ink, #eaf4ff); line-height: 1; }
.davops__bcell span{ font-family: var(--mono, monospace); font-size: .5rem; letter-spacing: .08em; text-transform: uppercase; color: #a9bbdd; }
.davops__bcell.is-good{ border-color: rgba(124,243,192,.45); box-shadow: 0 0 20px -12px rgba(124,243,192,.9); }
.davops__bcell.is-good b{ color: #9df7d4; }
.davops__bcell.is-warn{ border-color: rgba(255,180,80,.45); box-shadow: 0 0 20px -12px rgba(255,180,80,.9); }
.davops__bcell.is-warn b{ color: #ffc978; }
.davops__brow{ display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.davops__orstate{
  font-family: var(--mono, monospace); font-size: .58rem; letter-spacing: .05em;
  color: #9fb0d8; padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58%;
}
.davops__orstate.is-on{
  color: #9df7d4; border-color: rgba(124,243,192,.6); background: rgba(124,243,192,.08);
  box-shadow: 0 0 18px -8px rgba(124,243,192,.9);
}


/* ═══ THE FLOATING ORB IS ACTUALLY VISIBLE ═════════════════════════════════
   Measured on a real minimize: the orb held the `on` class and sat at
   opacity 0, scale(.6), top 2472px in an 812px viewport. It was never missing —
   it was transparent and past the fold, which is indistinguishable from missing
   and is why this read as "sometimes".

   `position: fixed` because a floating button's whole contract is "stay where
   the eye is", and `absolute` breaks that the moment the page is taller than the
   screen. And `.on` FORCES the visible state rather than depending on a
   transition having had the chance to run. */
.davops-float{ position: fixed !important; }
.davops-float.on{
  opacity: 1 !important;
  transform: scale(1) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* it must sit above the app chrome it floats over, but under the overlay itself */
.davops-float{ z-index: 238; }


/* ═══ DAV-OPS OPERATOR DECK — HUD · frame · thinking · moments · the door ══
   The session's vital signs always on screen, her thinking drawn as structure,
   the price on every turn, and a double-tap door to a parallel window. Every
   button a rounded squircle; every text bright; glow, never highlight. ═══ */

/* ── the operator line under the name ── */
.davops__op{ display: block; font-style: normal; font-family: var(--mono, monospace);
  font-size: .56rem; letter-spacing: .14em; text-transform: uppercase;
  color: #9fe8d4; text-shadow: 0 0 12px rgba(95,243,192,.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.davops:not(.is-chrome) .davops__op{ display: none; }

/* ── THE HUD — always visible, never grey ── */
.davops__hud{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 4px 4px 2px; min-height: 26px; }
.davops:not(.is-chrome) .davops__hud{ padding-left: 56px; padding-top: 8px; position: relative; z-index: 6; pointer-events: none; }
.davops__hchip{ display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid rgba(var(--vc), .3); background: rgba(var(--vc), .06);
  font-family: var(--mono, monospace); font-size: .66rem; letter-spacing: .04em;
  color: #d7fff2; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.davops__hchip b{ font-weight: 800; letter-spacing: .1em; color: #eafff8; }
.davops__hchip i{ font-style: normal; color: #9fe8d4; }
.davops__hchip--op{ border-color: rgba(var(--vc2), .4); background: rgba(var(--vc2), .07); color: #d8f6ff;
  box-shadow: 0 0 16px -8px rgba(var(--vc2), .8); }
.davops__hchip--frame{ border-color: rgba(255,212,121,.42); background: rgba(255,212,121,.07); color: #ffe9c4; }

/* ── the message wears its price ── */
.davops__vtag{ display: inline-block; margin-top: 6px; margin-right: 8px;
  font-family: var(--mono, monospace); font-size: .64rem; letter-spacing: .06em;
  color: #9fe8d4; text-shadow: 0 0 10px rgba(95,243,192,.4); }

/* ── keep-as-MotusMoment key on every message ── */
.davops__lb2--mm{ font-size: .8rem; color: #cfe0db; }
.davops__lb2--mm:hover{ border-color: rgba(255,212,121,.6); color: #ffe9c4; background: rgba(255,212,121,.12); }
.davops__lb2--mm.done{ border-color: rgba(255,212,121,.8); color: #ffe9c4; background: rgba(255,212,121,.2); }

/* ── the MotusMoment offer — she asks, you decide ── */
.davops__offer{ align-self: center; max-width: 94%; display: flex; flex-direction: column; gap: 9px;
  padding: 12px 15px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,212,121,.09), rgba(255,212,121,.03));
  border: 1px solid rgba(255,212,121,.36);
  box-shadow: 0 0 26px -12px rgba(255,212,121,.7); }
.davops__offert{ font-size: .84rem; line-height: 1.5; color: #ffe9c4; }
.davops__offert b{ color: #ffd479; }
.davops__offerb{ display: flex; gap: 8px; justify-content: flex-end; }
.davops__offerb .davops__nameb{ border-radius: 14px; }
.davops__offerb .is-go{ border-color: rgba(255,212,121,.7); background: rgba(255,212,121,.16); color: #ffe9c4; }

/* ── the settings toggles — squircle rows, the dot is the state ── */
.davops__togs{ display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.davops__tog{ display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
  padding: 11px 13px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--glass-line, rgba(255,255,255,.1)); background: rgba(255,255,255,.03);
  color: var(--ink, #eef4f2); transition: border-color .18s ease, background .18s ease; }
.davops__tog:hover{ border-color: rgba(var(--vc), .4); }
.davops__tog > i{ flex: none; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%;
  border: 1.6px solid rgba(255,255,255,.35); background: transparent; transition: all .22s ease; }
.davops__tog.is-on > i{ border-color: rgb(var(--vc));
  background: radial-gradient(circle at 40% 35%, #fff, rgb(var(--vc)) 72%);
  box-shadow: 0 0 12px rgba(var(--vc), .8); }
.davops__tog span{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.davops__tog b{ font-size: .8rem; font-weight: 800; color: #eafff8; }
.davops__tog.is-on b{ text-shadow: 0 0 14px rgba(var(--vc), .4); }
.davops__tog em{ font-style: normal; font-size: .7rem; line-height: 1.45; color: #cfe0db; }

/* ── the session block in settings ── */
.davops__sess{ display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px;
  font-family: var(--mono, monospace); font-size: .68rem; color: #d7fff2; }
.davops__sess b{ color: #eafff8; }
.davops__sess .is-frame{ width: 100%; color: #ffe9c4; }

/* ── VISUAL THINKING — the structure of her turn, drawn as it happens ── */
.davops__tcard{ align-self: stretch; max-width: 100%; padding: 0; overflow: hidden;
  background: linear-gradient(170deg, rgba(10,16,28,.9), rgba(7,11,20,.95));
  border: 1px solid rgba(var(--vc2), .26); border-radius: 18px;
  box-shadow: 0 0 30px -16px rgba(var(--vc2), .8), inset 0 1px 0 rgba(255,255,255,.05); }
.davops__tcard.is-live{ border-color: rgba(var(--vc2), .48); }
.davops__tchead{ display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 10px 14px; border: none; background: transparent; cursor: pointer; color: inherit; }
.davops__tchead b{ font-family: var(--mono, monospace); font-size: .66rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: #bfeeff; }
.davops__tchead span{ font-family: var(--mono, monospace); font-size: .64rem; color: #8fd8f0; margin-right: auto; }
.davops__tcarrow{ font-style: normal; font-size: .7rem; color: #8fd8f0; transition: transform .24s ease; }
.davops__tcard:not(.is-open) .davops__tcarrow{ transform: rotate(-90deg); }
.davops__tcpulse{ flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, rgb(var(--vc2)) 70%);
  box-shadow: 0 0 10px rgba(var(--vc2), .85); }
.davops__tcard.is-live .davops__tcpulse{ animation: vcBreath 1.5s ease-in-out infinite; }
.davops__tcbody{ display: grid; grid-template-rows: 1fr; padding: 0 14px 12px;
  transition: grid-template-rows .3s var(--ease, ease), padding .3s ease; }
.davops__tcard:not(.is-open) .davops__tcbody{ grid-template-rows: 0fr; padding: 0 14px; overflow: hidden; }
.davops__tcbody > *{ min-height: 0; }
/* the stem + nodes: each real step lands on the line and lights */
.davops__vtn{ position: relative; display: flex; align-items: baseline; gap: 10px;
  padding: 5px 0 5px 22px; opacity: 0; transform: translateY(5px);
  animation: vtLand .4s var(--ease-out, ease) forwards; }
@keyframes vtLand{ to{ opacity: 1; transform: none; } }
.davops__vtn::before{ content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 1.4px;
  background: linear-gradient(180deg, rgba(var(--vc2), .34), rgba(var(--vc2), .1)); }
.davops__vtn:first-child::before{ top: 50%; }
.davops__vtn:last-child::before{ bottom: 50%; }
.davops__vtg{ position: absolute; left: 0; top: 50%; transform: translateY(-58%);
  font-style: normal; font-size: .68rem; color: #7fd8ff; text-shadow: 0 0 10px rgba(97,218,251,.5);
  background: #0a1220; border-radius: 50%; line-height: 1; padding: 1px; z-index: 1; }
.davops__vtn.is-live .davops__vtg{ animation: vcBreath 1.3s ease-in-out infinite; }
.davops__vtb{ display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.davops__vtb b{ font-size: .76rem; font-weight: 700; color: #dff4ff; }
.davops__vtn.is-live .davops__vtb b{ color: #fff; text-shadow: 0 0 14px rgba(var(--vc2), .5); }
.davops__vtb em{ font-style: normal; font-size: .68rem; line-height: 1.4; color: #a8cbe4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.davops__vtt{ flex: none; font-family: var(--mono, monospace); font-size: .62rem; color: #8fd8f0; }
.davops__vtn--find .davops__vtg, .davops__vtn--write .davops__vtg{ color: #ffd479; text-shadow: 0 0 12px rgba(255,196,90,.55); }
.davops__vtn--mantra .davops__vtg{ color: #d9b8ff; text-shadow: 0 0 12px rgba(190,140,255,.5); }
.davops__vtn--halt .davops__vtg{ color: #ff9db4; }

/* ── THE FOUR MODES read at arm's length (was .63rem — too small everywhere) ── */
.davops__mk{ font-size: .8rem !important; letter-spacing: .035em !important; min-height: 48px !important; }
.davops__mhead b{ font-size: 1rem !important; }
.davops__mhead span{ font-size: .58rem !important; }
.davops__mblurb{ font-size: .8rem !important; color: #e2ecff !important; opacity: .95 !important; }

/* ── the composer is a textarea now — it grows with you and with the window ── */
.davops__cin{ resize: none; line-height: 1.5; min-height: 44px; max-height: 40vh;
  overflow-y: hidden; scrollbar-width: thin; }
.davops__compose{ align-items: flex-end; }

/* ── windowed: the feed takes every pixel the window grows by ── */
.davops.is-windowed .davops__feed{ max-height: none; flex: 1 1 auto; }

/* ── the popped window IS the window — no window-controls inside it ── */
html.davops-popped .davops__winbtn,
html.davops-popped [data-vc=min],
html.davops-popped .davops__popbtn,
html.davops-popped .davops__resize{ display: none !important; }
html.davops-popped .davops{ left: 0 !important; right: 0 !important; width: auto !important;
  max-width: none !important; transform: none !important; border-left: 0; border-right: 0; }

@media (prefers-reduced-motion: reduce){
  .davops__vtn{ animation: none; opacity: 1; transform: none; }
  .davops__tcpulse, .davops__vtn.is-live .davops__vtg{ animation: none !important; }
  .davops__tcbody{ transition: none; }
}


/* ═══ A CLOSED SHEET DOES NOT EXIST FOR THE POINTER ════════════════════════
   THE DESKTOP ROOT CAUSE, PROVEN BY elementFromPoint: the settings and
   OPS-LIVE sheets close by translateY(100%) — but in the WINDOWED panel the
   translated sheet still lands INSIDE the panel's box and keeps hit-testing,
   so an invisible layer ate every click on the composer and controls. On a
   phone the full-height panel pushed it off-screen, which is why mobile
   worked and desktop did not. visibility removes it from hit-testing the
   moment the close transition ends; opening restores it instantly. */
.davops__settings, .davops__live{
  visibility: hidden;
  transition: transform .34s var(--dv-spring, cubic-bezier(.32,1.4,.45,1)), visibility 0s linear .36s;
}
.davops.is-cfg .davops__settings, .davops.is-liveview .davops__live{
  visibility: visible;
  transition: transform .34s var(--dv-spring, cubic-bezier(.32,1.4,.45,1));
}


/* ═══ THE TIER RAIL — the meter at rest ════════════════════════════════════
   One line: seven rings, the current tier named in its own color — the same
   level-view the main meter shows on hold. Tap = the full panel. The height
   this gives back goes straight to the conversation. */
.davops__vmini{ display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 520px; margin: 0 auto; padding: 8px 14px; min-height: 44px;
  border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(var(--vc), .3); background: rgba(var(--vc), .045);
  transition: border-color .18s ease, box-shadow .22s ease;
  -webkit-tap-highlight-color: transparent; }
.davops__vmini:hover{ border-color: rgba(var(--vc), .55); box-shadow: 0 0 20px -12px rgba(var(--vc), .9); }
.davops__vmg{ flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  color: var(--vt); opacity: .62; font-size: .8rem; line-height: 1; transition: opacity .2s ease; }
.davops__vmg svg{ width: 17px; height: 17px; }
.davops__vmini:hover .davops__vmg{ opacity: .85; }
.davops__vmg.is-cur{ width: auto; opacity: 1; display: inline-flex; align-items: baseline; gap: 7px;
  padding: 4px 14px; border-radius: 999px;
  border: 1.5px solid var(--vt); background: rgba(4,8,16,.55);
  box-shadow: 0 0 18px -6px var(--vt), inset 0 1px 0 rgba(255,255,255,.08); }
.davops__vmgi{ font-style: normal; align-self: center; display: grid; place-items: center; }
.davops__vmgi svg{ width: 15px; height: 15px; }
.davops__vmg.is-cur b{ font-family: var(--mono, monospace); font-weight: 800; font-size: .78rem;
  letter-spacing: .05em; color: var(--vt); text-shadow: 0 0 14px var(--vt); }
.davops__vmg.is-cur em{ font-style: normal; font-family: var(--mono, monospace); font-size: .62rem;
  letter-spacing: .06em; color: #d7e8f2; }

/* the collapse bar in the full panel — full-width, so it can overlap nothing */
.davops__vcollapse{ width: 100%; margin-top: 7px; padding: 7px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(var(--vc), .22); background: rgba(var(--vc), .04);
  font-family: var(--mono, monospace); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: #b9e8da; transition: border-color .18s ease, background .18s ease; }
.davops__vcollapse:hover{ border-color: rgba(var(--vc), .5); background: rgba(var(--vc), .09); color: #eafff8; }

/* ═══ ONE LINE, THEN THE ROOM THE WINDOW GIVES ═════════════════════════════
   The composer rests at ONE line; it grows only when the words (or the window)
   ask for it. The foot tightens so the feed — her words, the thought stream —
   owns the screen at every proportion. */
.davops__cin{ min-height: 40px; padding-top: 9px; padding-bottom: 9px; }
.davops__foot{ gap: 7px; }
.davops.is-windowed .davops__foot{ gap: 6px; }
.davops.is-windowed .davops__votus{ margin-top: 0; }
.davops__ptt{ margin: 0; }

/* the vital signs stay one quiet line at small sizes — never a second storey */
@container davops (max-width: 432px) {
  .davops.is-windowed .davops__hchip{ font-size: .6rem; padding: 3px 8px; gap: 4px; }
  .davops.is-windowed .davops__hud{ gap: 4px; }
  .davops.is-windowed .davops__vmg{ width: 18px; }
  .davops.is-windowed .davops__vmg.is-cur{ padding: 3px 10px; }
  .davops.is-windowed .davops__vmg.is-cur em{ display: none; }   /* the range yields before anything overlaps */
  .davops.is-windowed .davops__vmini{ gap: 5px; padding: 7px 10px; }
}
@container davops (max-height: 540px) {
  .davops.is-windowed .davops__hchip{ font-size: .6rem; padding: 3px 8px; }
  .davops.is-windowed .davops__hud{ min-height: 22px; padding-bottom: 0; }
}
/* the resize grip lives in the corner UNDER nothing: give the foot corner room */
.davops.is-windowed .davops__foot{ padding-bottom: 4px; }
/* (the 10px right pad is gone: it shrank the input by exactly the amount the
   rail then overhung. The window grip lives BELOW the composer, not beside it.) */


/* ═══ THE FEED GETS THE FLOOR BACK ═════════════════════════════════════════
   Measured at the 358x468 floor: the HUD wrapped to 112px, the inert
   HOLD-TO-TALK bar burned 40px in Live mode. Both give the room back to the
   conversation. */

/* the vital signs are ONE line, always — overflow scrolls sideways, never stacks */
.davops__hud{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.davops__hud::-webkit-scrollbar{ display: none; }
.davops__hchip{ flex: none; }

/* the talk bar exists only where holding it DOES something (PTT mode) */
.davops:not(.is-ptt) .davops__ptt{ display: none; }


/* ═══ NO SCROLLBAR FOR TWO INVISIBLE PIXELS ════════════════════════════════
   The foot is overflow:auto (a tiny-screen safety) and one child ran 2px wide
   — Windows answered with a full arrow scrollbar across the panel. Sideways
   overflow in the foot is never meaningful: clip it; keep the vertical safety. */
.davops__foot{ overflow-x: hidden; }


/* ═══ THE RAIL SLIMS + LEARNS THE HOLD ═════════════════════════════════════
   Slimmer at rest; held, it becomes the slider it always was — the pill reads
   the live value while the finger walks the tiers. */
.davops__vmini{ min-height: 34px; padding: 4px 12px; gap: 6px; touch-action: none; }
.davops__vmg{ width: 18px; height: 18px; font-size: .72rem; }
.davops__vmg svg{ width: 14px; height: 14px; }
.davops__vmg.is-cur{ padding: 2px 11px; gap: 6px; }
.davops__vmgi svg{ width: 13px; height: 13px; }
.davops__vmg.is-cur b{ font-size: .72rem; }
.davops__vmg.is-cur em{ font-size: .6rem; }
.davops__vmini.is-scrub{ border-color: var(--vt); cursor: ew-resize;
  box-shadow: 0 0 22px -8px var(--vt), inset 0 1px 0 rgba(255,255,255,.07); }
.davops__vmini.is-scrub .davops__vmg{ opacity: .85; }

/* ═══ THE TOP NEVER CROWDS ═════════════════════════════════════════════════
   In a narrow window the header keys shrink and the name yields by ellipsis —
   nothing overlaps, nothing leaves the frame. cqw sizes the name to the PANEL,
   not the monitor behind it. */
@container davops (max-width: 480px) {
  .davops.is-windowed.is-chrome .davops__hbtn{ width: 30px; height: 30px; border-radius: 10px; }
  .davops.is-windowed.is-chrome .davops__hbtn svg{ width: 15px; height: 15px; }
  .davops.is-windowed.is-chrome .davops__head{ gap: 5px; }
  .davops.is-windowed.is-chrome .davops__id b{ font-size: clamp(.9rem, 5.6cqw, 1.2rem); }
  .davops.is-windowed.is-chrome .davops__glyph{ width: 38px; height: 38px; }
}
/* the vital signs FADE at the edge instead of cutting a chip in half */
.davops__hud{
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent);
}

/* ═══ THE BOTTOM GIVES ITS IDLE PIXELS BACK ════════════════════════════════ */
.davops.is-windowed{ padding-bottom: 6px; }
.davops.is-windowed .davops__foot{ padding-bottom: 0; padding-top: 2px; }
.davops.is-windowed .davops__stage{ padding: 0; gap: 5px; }
.davops.is-windowed .davops__status{ font-size: .68rem; }
.davops.is-windowed .davops__interim:empty{ display: none; }
.davops.is-windowed .davops__compose{ margin-bottom: 0; }


/* ═══ THE PILL SITS IN THE RAIL, NEVER OVER IT ═════════════════════════════
   The slim pass squeezed the current-tier pill into an 18px box and its text
   spilled across the neighbouring rings. The pill owns its own room now: auto
   box, nothing shrinks, one line always. */
.davops__vmg{ flex: none; }
.davops__vmg.is-cur{ width: auto; height: auto; min-height: 23px; flex: none;
  align-items: center; line-height: 1; overflow: hidden; white-space: nowrap; }
.davops__vmg.is-cur b, .davops__vmg.is-cur em{ line-height: 1.1; }

/* ── the emerald aura — the rail breathes, softly (glow, never highlight) ── */
.davops__vmini{
  border-color: rgba(95,243,192,.42);
  box-shadow: 0 0 14px -7px rgba(95,243,192,.55), inset 0 0 12px -9px rgba(95,243,192,.3);
  animation: opsRailBreath 4.6s ease-in-out infinite;
}
@keyframes opsRailBreath{
  0%, 100%{ box-shadow: 0 0 12px -7px rgba(95,243,192,.5), inset 0 0 10px -9px rgba(95,243,192,.28); }
  50%{ box-shadow: 0 0 24px -6px rgba(95,243,192,.85), inset 0 0 15px -8px rgba(95,243,192,.42); }
}
.davops__vmini.is-scrub{ animation: none; }   /* the scrub's own light takes over */

/* ═══ THE MARK FOLDS EVERYTHING — a focused thread ═════════════════════════
   Folded = the conversation and nothing else: no vital signs, no chips. One
   tap on the waves brings the deck back. */
.davops:not(.is-chrome) .davops__hud{ display: none !important; }

/* ═══ THE HOLD KEY IS THE TALK PAD — the big bar retires ═══════════════════ */
.davops__ptt{ display: none !important; }
.davops__controls [data-vc-mode="ptt"]{ min-width: 64px; text-align: center; touch-action: none; }

/* ── A TALK PAD IS NOT TEXT (2026-08-08) ──────────────────────────────────────
   Holding HOLD on a phone selected the word "HOLD": the native long-press
   selection/callout fired, which cancels the pointer stream — so the key let go
   mid-sentence and the press died. `touch-action:none` was already here and does
   NOT prevent this; it governs scroll/zoom, not selection. `-webkit-touch-callout`
   + `user-select:none` are what actually stop it, and preventDefault() on
   pointerdown cannot substitute. Every press-and-hold target gets the guard, and
   ::selection is neutralised so even a selection forced another way draws nothing. */
.davops__controls .davops__mode,
.davops [data-vc-ptt], .davops-dock [data-vc-dtalk], .davops__vmini{
  user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.davops__controls .davops__mode::selection,
.davops [data-vc-ptt]::selection, .davops-dock [data-vc-dtalk]::selection{ background: transparent; }
.davops__controls .davops__mode::-moz-selection,
.davops [data-vc-ptt]::-moz-selection, .davops-dock [data-vc-dtalk]::-moz-selection{ background: transparent; }
/* held = alive: the listening green floods the key and the aura answers */
.davops__controls .davops__mode.down{
  border-color: #7cf3c0; background: rgba(124,243,192,.34); color: #03231a;
  text-shadow: none; transform: scale(1.06);
  box-shadow: 0 0 30px -4px rgba(124,243,192,.95), inset 0 1px 0 rgba(255,255,255,.35);
}
@media (prefers-reduced-motion: reduce){
  .davops__vmini{ animation: none; }
  .davops__controls .davops__mode.down{ transform: none; }
}


/* ═══ THE RAIL, TWO LINES — rings above, the name below in its tier light ══
   The label owns a whole line: it can never cover an icon again. The current
   ring lights and lifts; the name breathes its color underneath. */
.davops__vmini{ flex-direction: column; gap: 4px; padding: 6px 12px 7px; min-height: 46px; }
.davops__vmrow{ display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; }
.davops__vmg.is-on{ width: 22px; height: 22px; opacity: 1;
  border-radius: 50%; box-shadow: 0 0 12px var(--vt), inset 0 0 6px -2px var(--vt);
  transform: scale(1.08); }
.davops__vmg.is-on svg{ width: 17px; height: 17px; }
.davops__vmlab{ display: flex; align-items: baseline; justify-content: center; gap: 7px;
  font-family: var(--mono, monospace); font-weight: 800; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vt); text-shadow: 0 0 14px var(--vt); white-space: nowrap; }
.davops__vmlab em{ font-style: normal; font-weight: 600; font-size: .62rem; letter-spacing: .05em;
  text-transform: none; color: #d7e8f2; text-shadow: none; }
/* the old inline pill is retired — its rules must never resurrect it */
.davops__vmg.is-cur{ display: none !important; }

/* ═══ THE COMPOSER'S GROWING EDGE ══════════════════════════════════════════ */
.davops__compose{ position: relative; padding-bottom: 9px; }
.davops__cgrip{ position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%);
  width: 76px; height: 14px; display: grid; place-items: center;
  cursor: ns-resize; touch-action: none; -webkit-tap-highlight-color: transparent; }
.davops__cgrip::before{ content: ''; width: 46px; height: 4px; border-radius: 999px;
  background: rgba(95,243,192,.55); box-shadow: 0 0 10px rgba(95,243,192,.45);
  transition: width .18s ease, background .18s ease, box-shadow .18s ease; }
.davops__cgrip:hover::before, .davops__cgrip.is-drag::before{
  width: 60px; background: rgb(95,243,192); box-shadow: 0 0 16px rgba(95,243,192,.9); }

/* ═══ THE LIVING AURA — the window's edge breathes ═════════════════════════
   A dedicated ring child (never a ::after collision): a slow conic light
   walking the border, masked to 1.6px, over a soft breathing outer glow.
   Under the motion threshold: 16s per revolution, low alpha, reduced-motion
   stills it to a quiet emerald edge. */
@property --wa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.davops__aura{ position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 58;
  padding: 1.6px; display: none; opacity: .8;
  background: conic-gradient(from var(--wa, 0deg),
    transparent 0%, rgba(95,243,192,.85) 10%, rgba(61,242,255,.55) 20%, transparent 32%,
    transparent 55%, rgba(95,243,192,.4) 68%, transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: opsAuraSpin 16s linear infinite; }
.davops.is-on .davops__aura{ display: block; }
@keyframes opsAuraSpin{ from{ --wa: 0deg; } to{ --wa: 360deg; } }
.davops.is-windowed{ border-color: rgba(95,243,192,.3);
  animation: opsWinBreath 7s ease-in-out infinite; }
@keyframes opsWinBreath{
  0%, 100%{ box-shadow: 0 30px 90px rgba(0,0,0,.62), 0 0 26px -12px rgba(95,243,192,.4), inset 0 1px 0 rgba(255,255,255,.05); }
  50%{ box-shadow: 0 30px 90px rgba(0,0,0,.62), 0 0 44px -10px rgba(95,243,192,.7), inset 0 1px 0 rgba(255,255,255,.06); }
}
@media (prefers-reduced-motion: reduce){
  .davops__aura{ animation: none; background: conic-gradient(from 40deg, transparent, rgba(95,243,192,.5), transparent 40%); }
  .davops.is-windowed{ animation: none; }
}


/* ═══ THE NAME LIVES UNDER THE FINGER ══════════════════════════════════════
   At rest the rail is ONE slim line of rings, stretched edge to edge. Hold it
   and it breathes open — the tier name and live value appear beneath while
   you drag, and fold away when you let go. A line saved on every idle view. */
.davops__vmini{ min-height: 32px; padding: 5px 16px; transition: min-height .22s ease; }
.davops__vmrow{ justify-content: space-between; }
.davops__vmlab{ max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height .22s ease, opacity .22s ease, margin-top .22s ease; }
.davops__vmini.is-scrub{ min-height: 54px; }
.davops__vmini.is-scrub .davops__vmlab{ max-height: 20px; opacity: 1; margin-top: 3px; }

/* ═══ LIVE BURNS RED · HOLD FLOODS EMERALD — as squircles, per the law ═════ */
.davops__controls .davops__mode{
  border-radius: 17px; padding: 11px 19px; min-width: 76px; min-height: 44px;
  font-size: .74rem; letter-spacing: .11em; position: relative;
}
.davops__controls [data-vc-mode="live"].is-on{
  color: #ff5f6d; border-color: rgba(255,95,109,.66); background: rgba(255,95,109,.1);
  box-shadow: 0 0 22px -7px rgba(255,95,109,.9);
  text-shadow: 0 0 14px rgba(255,95,109,.65);
}
/* held: the key floods emerald and rings of light leave it — the magical aura */
.davops__controls .davops__mode.down{
  border-color: #5ff3c0; color: #03231a;
  background: linear-gradient(160deg, rgba(95,243,192,.62), rgba(61,242,255,.34));
  box-shadow: 0 0 36px -2px rgba(95,243,192,1), inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow: none;
}
.davops__controls .davops__mode.down::before{
  content: ''; position: absolute; inset: -5px; border-radius: 21px; pointer-events: none;
  border: 1.6px solid rgba(95,243,192,.85);
  animation: opsHoldAura 1.15s ease-out infinite;
}
.davops__controls .davops__mode.down::after{
  content: ''; position: absolute; inset: -5px; border-radius: 21px; pointer-events: none;
  border: 1.2px solid rgba(61,242,255,.6);
  animation: opsHoldAura 1.15s ease-out infinite .38s;
}
@keyframes opsHoldAura{
  0%{ opacity: .95; transform: scale(1); }
  100%{ opacity: 0; transform: scale(1.34); }
}

/* ═══ THE GHOST COMPOSER — one full-width field, the keys float over it ════
   The input owns the whole bottom section; attach, steer and send hover as
   translucent ghosts in their same places, waking fully on touch. */
.davops__compose{ max-width: 100%; }
.davops__compose .davops__cin{ width: 100%; padding-left: 54px; padding-right: 14px; }
.davops__compose .davops__file{
  position: absolute; left: 8px; bottom: 13px; z-index: 2;
  opacity: .55; background: rgba(6,12,20,.55); transition: opacity .16s ease; }
.davops__compose .davops__steer{
  position: absolute; right: 58px; bottom: 13px; z-index: 2;
  opacity: .55; background: rgba(6,12,20,.55); transition: opacity .16s ease; }
.davops__compose .davops__csend{
  position: absolute; right: 9px; bottom: 11px; z-index: 2; opacity: .88; }
.davops__compose .davops__file:hover, .davops__compose .davops__file:active,
.davops__compose .davops__steer:hover, .davops__compose .davops__steer:active,
.davops__compose .davops__csend:hover{ opacity: 1; }
.davops__compose .davops__steer.is-on{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .davops__controls .davops__mode.down::before,
  .davops__controls .davops__mode.down::after{ animation: none; opacity: .5; }
  .davops__vmini, .davops__vmlab{ transition: none; }
}


/* ═══ ONE COLUMN, ONE WIDTH ════════════════════════════════════════════════
   The rail and the composer are the SAME element width at every size, so
   their edges can never disagree — narrow, they both fill; wide, they both
   stop at the column. One token, two organs. */
.davops__votus, .davops__compose, .davops__files, .davops__cmd{
  width: 100%; max-width: 560px; margin-left: auto; margin-right: auto;
}
.davops__vmini{ max-width: none; }   /* it fills its host; the HOST is what's capped */

/* ═══ THE KEYS SIT ON THE INPUT'S LINE ═════════════════════════════════════
   The composer reserves 9px at the bottom for the grip; the input's box ends
   exactly there. Anchoring every key to that same 9px puts all four boxes on
   one line — and keeps them pinned to the input's edge as it grows. */
.davops__compose .davops__file,
.davops__compose .davops__steer,
.davops__compose .davops__csend{ bottom: 9px; top: auto; width: 40px; height: 40px; }

/* ═══ SEND — THE INITIUM {AXIOS} MARK IN A CYAN SQUIRCLE ═══════════════════ */
.davops__csend{
  border-radius: 13px !important; padding: 0; overflow: visible;
  background: radial-gradient(120% 120% at 50% 15%, rgba(12,26,38,.92), rgba(4,10,18,.96)) !important;
  border: 1.5px solid rgba(61,242,255,.62) !important;
  box-shadow: 0 0 18px -6px rgba(61,242,255,.8), inset 0 1px 0 rgba(255,255,255,.09) !important;
  display: grid; place-items: center;
  transition: border-color .18s ease, box-shadow .22s ease, transform .18s var(--dv-spring, cubic-bezier(.32,1.4,.45,1));
}
.davops__csend:hover{ border-color: rgb(61,242,255) !important;
  box-shadow: 0 0 26px -5px rgba(61,242,255,1), inset 0 1px 0 rgba(255,255,255,.14) !important;
  transform: translateY(-1px); }
.davops__csend:active{ transform: scale(.94); }
.davops__csimg{ width: 26px; height: 26px; object-fit: contain; display: block;
  filter: drop-shadow(0 0 5px rgba(61,242,255,.5)); pointer-events: none; }
/* the mark answers the send — one bloom, then rest */
.davops__csend.is-fire{ animation: opsMarkFire .82s cubic-bezier(.25,.9,.3,1); }
@keyframes opsMarkFire{
  0%{ transform: scale(1); border-color: rgba(95,243,192,1) !important;
      box-shadow: 0 0 0 0 rgba(95,243,192,.9), 0 0 30px -4px rgba(95,243,192,1) !important; }
  30%{ transform: scale(.9); }
  55%{ transform: scale(1.1); border-color: rgba(95,243,192,1) !important;
      box-shadow: 0 0 0 14px rgba(95,243,192,0), 0 0 40px -2px rgba(61,242,255,1) !important; }
  100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(61,242,255,0), 0 0 18px -6px rgba(61,242,255,.8) !important; }
}

/* ═══ THE SEND SURGE — emerald floods the box, cyan closes it ══════════════
   Three voices on one beat: the SURGE leaves the mark and fills the field,
   the RIM drinks it and turns cyan, a LANCE sweeps the width. ~950ms, once
   per send — the only place this panel spends motion like this. */
.davops__sendfx{
  position: absolute; left: 0; right: 0; top: 0; bottom: 9px;
  border-radius: 13px; pointer-events: none; z-index: 3; opacity: 0; overflow: hidden;
}
.davops__sendfx.is-fire{ opacity: 1; }
.davops__sendfx.is-fire::before{
  content: ''; position: absolute; top: 50%; left: var(--ox, 92%);
  width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(95,243,192,.95), rgba(95,243,192,.4) 42%, transparent 70%);
  animation: opsSurge .56s cubic-bezier(.2,.85,.3,1) forwards;
}
@keyframes opsSurge{
  0%{ transform: scale(.25); opacity: 0; }
  16%{ opacity: 1; }
  100%{ transform: scale(52); opacity: 0; }
}
.davops__sendfx > i{ position: absolute; inset: 0; border-radius: inherit; display: block; border: 1.6px solid transparent; }
.davops__sendfx.is-fire > i{ animation: opsRim .95s cubic-bezier(.3,.75,.25,1) forwards; }
@keyframes opsRim{
  0%{ border-color: rgba(95,243,192,0); box-shadow: 0 0 0 0 rgba(95,243,192,0), inset 0 0 0 0 rgba(95,243,192,0); }
  20%{ border-color: rgba(95,243,192,.95); box-shadow: 0 0 24px -5px rgba(95,243,192,.85), inset 0 0 20px -7px rgba(95,243,192,.55); }
  58%{ border-color: rgba(95,243,192,.85); box-shadow: 0 0 32px -6px rgba(95,243,192,.7), inset 0 0 15px -8px rgba(95,243,192,.32); }
  76%{ border-color: rgba(61,242,255,1); box-shadow: 0 0 44px -2px rgba(61,242,255,1), inset 0 0 28px -6px rgba(61,242,255,.7); }
  100%{ border-color: rgba(61,242,255,0); box-shadow: 0 0 0 0 rgba(61,242,255,0), inset 0 0 0 0 rgba(61,242,255,0); }
}
.davops__sendfx > b{
  position: absolute; top: 0; bottom: 0; left: -38%; width: 32%; display: block; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(61,242,255,.45), rgba(226,255,255,.7), rgba(61,242,255,.45), transparent);
  filter: blur(1px);
}
.davops__sendfx.is-fire > b{ animation: opsLance .6s cubic-bezier(.4,0,.2,1) .34s forwards; }
@keyframes opsLance{ 0%{ left: -38%; opacity: 0; } 22%{ opacity: .9; } 100%{ left: 106%; opacity: 0; } }

/* ═══ THE COMMAND PALETTE ══════════════════════════════════════════════════ */
.davops__cmd{ margin-bottom: 7px; border-radius: 16px; overflow: hidden auto; max-height: 208px;
  border: 1px solid rgba(var(--vc), .34);
  background: linear-gradient(180deg, rgba(10,18,28,.985), rgba(6,11,18,.995));
  box-shadow: 0 -14px 42px rgba(0,0,0,.55), 0 0 26px -14px rgba(var(--vc), .9);
  scrollbar-width: thin; }
.davops__cmd[hidden]{ display: none; }
.davops__cmdi{ display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 9px 13px; cursor: pointer; border: none; background: transparent; color: var(--ink, #eef4f2);
  border-bottom: 1px solid rgba(255,255,255,.04); transition: background .14s ease; }
.davops__cmdi:last-child{ border-bottom: none; }
.davops__cmdi.is-sel, .davops__cmdi:hover{ background: rgba(var(--vc), .14); }
.davops__cmdi.is-sel{ box-shadow: inset 2px 0 0 rgb(var(--vc)); }
.davops__cmdk{ font-family: var(--mono, monospace); font-weight: 800; font-size: .76rem; color: #7cf3c0; flex: none; }
.davops__cmdd{ font-size: .71rem; line-height: 1.4; color: #cfe0db; }

/* /help — the whole registry, in the thread */
.davops__help{ align-self: stretch; max-width: 100%; display: flex; flex-direction: column; gap: 5px;
  background: rgba(var(--vc2), .06); border: 1px solid rgba(var(--vc2), .28); }
.davops__help > b{ font-family: var(--mono, monospace); font-size: .66rem; letter-spacing: .16em; color: #bfeeff; margin-bottom: 3px; }
.davops__helpr{ display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: .74rem; line-height: 1.45; color: #dbe9e4; }
.davops__helpr i{ font-style: normal; font-family: var(--mono, monospace); font-weight: 800; color: #7cf3c0; flex: none; min-width: 92px; }
.davops__helpr em{ font-style: normal; font-family: var(--mono, monospace); font-size: .66rem; color: #8fb8d8; }
.davops__helpf{ margin-top: 6px; font-size: .7rem; color: #9fe8d4; }
.davops__helpf b{ color: #eafff8; }

/* ═══ MOBILE — the same organs, sized for the thumb ════════════════════════ */
@media (max-width: 560px){
  .davops__cmd{ max-height: 168px; }
  .davops__cmdd{ font-size: .68rem; }
  .davops__helpr i{ min-width: 84px; }
  .davops__csimg{ width: 24px; height: 24px; }
}
@container davops (max-height: 520px){
  .davops.is-windowed .davops__cmd{ max-height: 132px; }
}
@media (prefers-reduced-motion: reduce){
  .davops__sendfx.is-fire::before, .davops__sendfx.is-fire > i,
  .davops__sendfx.is-fire > b, .davops__csend.is-fire{ animation: none !important; }
  .davops__sendfx.is-fire > i{ border-color: rgba(61,242,255,.55); }
}


/* ═══ NOTHING IN THE FEED MAY BE SQUASHED ══════════════════════════════════
   THE P0, MEASURED: the feed is a flex COLUMN, and a flex child shrinks by
   default. Once the transcript outgrew the pane, a 315px thinking card was
   crushed to ONE PIXEL — its content spilling out, a neighbouring message
   landing on top of its header. That is why the cards "closed themselves" and
   why the click to reopen never found them. One rule; every message and every
   card now keeps the height it actually needs. */
.davops__feed > *{ flex: 0 0 auto; }

/* the thinking record collapses by HEIGHT, not by a grid fraction — the old
   grid-template-rows trick only ever collapsed the FIRST of its seven rows */
.davops__tcbody{ display: block; max-height: 70vh; overflow: hidden; opacity: 1;
  transition: max-height .32s cubic-bezier(.3,.8,.3,1), opacity .24s ease, padding .32s ease; }
.davops__tcard:not(.is-open) .davops__tcbody{ max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
/* the header is a real target: full width, generous, and always on top */
.davops__tchead{ position: relative; z-index: 2; min-height: 42px; }
.davops__tchead:hover{ background: rgba(var(--vc2), .07); }
.davops__tcard{ overflow: visible; }

/* ═══ THE MARK, UNBOUND ════════════════════════════════════════════════════
   No squircle, no plate — the logo alone, bigger, with its own light. The send
   surge still fires exactly as before. */
.davops__csend{
  background: transparent !important; border: none !important; box-shadow: none !important;
  border-radius: 14px !important; width: 44px; height: 44px;
}
.davops__csend:hover{ background: transparent !important; box-shadow: none !important; transform: translateY(-1px) scale(1.04); }
.davops__csimg{ width: 38px; height: 38px; filter: drop-shadow(0 0 7px rgba(61,242,255,.7)); transition: filter .2s ease; }
.davops__csend:hover .davops__csimg{ filter: drop-shadow(0 0 12px rgba(61,242,255,1)); }
.davops__csend.is-fire{ animation: opsMarkFireClean .82s cubic-bezier(.25,.9,.3,1); }
@keyframes opsMarkFireClean{
  0%{ transform: scale(1); } 30%{ transform: scale(.88); } 55%{ transform: scale(1.14); } 100%{ transform: scale(1); }
}
.davops__csend.is-fire .davops__csimg{ animation: opsMarkGlow .82s ease-out; }
@keyframes opsMarkGlow{
  0%{ filter: drop-shadow(0 0 6px rgba(95,243,192,.9)); }
  45%{ filter: drop-shadow(0 0 22px rgba(95,243,192,1)) drop-shadow(0 0 34px rgba(95,243,192,.7)); }
  75%{ filter: drop-shadow(0 0 26px rgba(61,242,255,1)) drop-shadow(0 0 40px rgba(61,242,255,.8)); }
  100%{ filter: drop-shadow(0 0 7px rgba(61,242,255,.7)); }
}

/* ═══ GHOST KEYS — the icon alone, no plate ════════════════════════════════ */
.davops__compose .davops__file,
.davops__compose .davops__steer{
  background: transparent !important; border: none !important; box-shadow: none !important;
  opacity: .62; color: #9fe8d4;
}
.davops__compose .davops__file:hover,
.davops__compose .davops__steer:hover{ opacity: 1; color: #d7fff2; background: transparent !important; }
.davops__compose .davops__file svg,
.davops__compose .davops__steer svg{ width: 21px; height: 21px; stroke-width: 1.9; }
.davops__compose .davops__steer.is-on{ opacity: 1; color: #7cf3c0; }
/* the attach key's LEFT edge meets the field's left border, exactly */
.davops__compose .davops__file{ left: 0; }
.davops__compose .davops__cin{ padding-left: 46px; padding-right: 92px; }

/* ═══ THE FIELD ANSWERS THE MARK — a cyan field for a cyan send ════════════ */
.davops__cin{
  border-color: rgba(61,242,255,.34) !important;
  box-shadow: 0 0 16px -8px rgba(61,242,255,.55), inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .2s ease, box-shadow .24s ease, background .2s ease;
  scrollbar-width: none; -ms-overflow-style: none;      /* no rail stealing width */
}
.davops__cin::-webkit-scrollbar{ width: 0; height: 0; display: none; }
.davops__cin:focus{
  border-color: rgba(61,242,255,.72) !important;
  box-shadow: 0 0 24px -6px rgba(61,242,255,.8), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* ═══ THE WAIT FACE ════════════════════════════════════════════════════════
   Mid-turn the mark becomes a stop: amber ring, the word, one slow pulse. */
.davops__csend.is-wait .davops__csimg{ opacity: .18; }
.davops__csend.is-wait::after{
  content: 'WAIT'; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono, monospace); font-size: .56rem; font-weight: 800; letter-spacing: .1em;
  color: #ffd479; border: 1.6px solid rgba(255,212,121,.8); border-radius: 14px;
  background: rgba(20,14,4,.6); box-shadow: 0 0 20px -6px rgba(255,212,121,.85);
  animation: opsWaitPulse 1.5s ease-in-out infinite;
}
@keyframes opsWaitPulse{ 0%,100%{ box-shadow: 0 0 16px -8px rgba(255,212,121,.7); } 50%{ box-shadow: 0 0 28px -4px rgba(255,212,121,1); } }
.davops.is-waiting .davops__cin{ border-color: rgba(255,212,121,.4) !important; }

/* ═══ THE DELETION KEY ═════════════════════════════════════════════════════ */
.davops__lb2--del:hover{ border-color: rgba(255,122,155,.65); color: #ff9db4; background: rgba(255,122,155,.13); }

/* ═══ THE MARK BREATHES OFF THE EDGE ═══════════════════════════════════════
   4px was almost touching the frame. The waves get their own air. */
.davops__head{ padding-left: 11px !important; }
.davops:not(.is-chrome) .davops__head{ padding-left: 11px !important; }

@media (prefers-reduced-motion: reduce){
  .davops__csend.is-fire, .davops__csend.is-fire .davops__csimg,
  .davops__csend.is-wait::after{ animation: none !important; }
  .davops__tcbody{ transition: none; }
}


/* ═══ A LINE TOO LONG TO SIT STILL, TRAVELS ════════════════════════════════
   The thinking detail was clipped with an ellipsis — the end of her reasoning
   simply never arrived. Now the line wraps to two and, when even that is not
   enough, drifts slowly across so the whole thought passes the eye. Hovering
   holds it still to read. */
.davops__vtb em{
  white-space: normal; text-overflow: clip; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  line-height: 1.42; max-height: 2.9em;
}
/* the live step gets the full travel — you watch the thought complete itself */
.davops__vtn.is-live .davops__vtb em{
  -webkit-line-clamp: none; line-clamp: none; display: block;
  max-height: none; white-space: nowrap; position: relative;
  animation: opsDrift 13s linear 1.4s infinite;
}
@keyframes opsDrift{
  0%, 8%   { transform: translateX(0); }
  46%, 54% { transform: translateX(min(0px, calc(100cqw - 100%))); }
  92%, 100%{ transform: translateX(0); }
}
.davops__vtb:hover em{ animation-play-state: paused; -webkit-line-clamp: none; line-clamp: none; max-height: none; }
/* the settled record reads in full — nothing hidden once the turn is done */
.davops__tcard:not(.is-live) .davops__vtb em{
  -webkit-line-clamp: none; line-clamp: none; display: block; max-height: none; white-space: normal;
}
.davops__vtb{ container-type: inline-size; }

@media (prefers-reduced-motion: reduce){
  .davops__vtn.is-live .davops__vtb em{ animation: none; white-space: normal;
    -webkit-line-clamp: 3; line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; }
}

/* the hint fades as it turns over — never a hard cut */
.davops__cin{ transition: border-color .2s ease, box-shadow .24s ease, background .2s ease; }
.davops__cin.is-fading::placeholder{ opacity: 0; }
.davops__cin::placeholder{ opacity: .75; transition: opacity .26s ease; }


/* ═══ EVERY QUIET EDGE IS A HANDLE ═════════════════════════════════════════ */
.davops.is-windowed{ cursor: default; }
.davops.is-windowed.is-dragging{ cursor: grabbing; user-select: none; }
.davops.is-windowed.is-dragging *{ cursor: grabbing !important; }

/* the mark charges while held — the hand-over to the main chat is legible */
.davops__csend.is-charging .davops__csimg{ animation: opsMarkCharge 1.5s linear forwards; }
@keyframes opsMarkCharge{
  0%{ filter: drop-shadow(0 0 7px rgba(61,242,255,.7)); transform: scale(1); }
  100%{ filter: drop-shadow(0 0 20px rgba(95,243,192,1)) drop-shadow(0 0 32px rgba(95,243,192,.8)); transform: scale(1.1); }
}

/* ═══ WHERE SHOULD IT BE BUILT? ════════════════════════════════════════════ */
.davops__artq{ align-self: center; max-width: 94%; display: flex; flex-direction: column; gap: 9px;
  padding: 12px 15px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(61,242,255,.09), rgba(61,242,255,.03));
  border: 1px solid rgba(61,242,255,.36); box-shadow: 0 0 26px -12px rgba(61,242,255,.8); }
.davops__artq .davops__offert{ color: #cff6ff; }
.davops__artq .davops__offert b{ color: #7fe9ff; }
.davops__artq .is-go{ border-color: rgba(61,242,255,.7); background: rgba(61,242,255,.16); color: #d8f6ff; }
.davops__artq .is-go i{ font-style: normal; font-size: .62em; opacity: .8; margin-left: 5px; letter-spacing: .06em; }
.davops__artqf{ font-family: var(--mono, monospace); font-size: .62rem; color: #8fb8d8; text-align: right; }
.davops__artqf button{ background: none; border: none; color: #8fb8d8; cursor: pointer; font: inherit; text-decoration: underline dotted; padding: 2px; }
.davops__artqf button:hover{ color: #cff6ff; }

/* artifact cards in the DAV-OPS feed keep their full height like everything else */
.davops__line--arts{ align-self: stretch; max-width: 100%; background: transparent; border: none; padding: 0; }