/* VeilPrep screens: the canvas design system, scoped under .vp (generated from the Design canvas vp.css). */
.vp { --bg: #0a0a16; --elev: #111120; --surf: #181830; --input: #0c0c1a;
  --glass: rgba(14,14,26,0.82); --overlay-panel: rgba(14,14,26,0.95);
  --border: rgba(255,255,255,0.07); --border-soft: rgba(255,255,255,0.04); --border-hover: rgba(255,255,255,0.13);
  --t1: #f0f0ff; --t2: #b0b0d0; --t3: #7878a0; --t4: #585878;
  --blue: #3b82f6; --purple: #7c3aed; --indigo: #6366f1; --green: #22c55e; --amber: #f59e0b; --red: #ef4444;
  --blue-soft: rgba(59,130,246,0.14); --purple-soft: rgba(124,58,237,0.14); --green-soft: rgba(34,197,94,0.12); --amber-soft: rgba(245,158,11,0.14); --red-soft: rgba(239,68,68,0.10);
  --shadow-card: 0 4px 32px rgba(0,0,0,0.30), 0 0 0 1px var(--border); --shadow-dialog: 0 24px 80px rgba(0,0,0,0.55), 0 0 0 1px var(--border);
  --mesh: rgba(99,102,241,0.22); --grain: 0.05; --grid: 0.10; --hex: url('./hex-dark.svg'); --grain-blend: overlay;
  --gradient: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--t1); background: var(--bg);
  font-size: 13px; line-height: 1.5; position: relative; overflow: hidden; box-sizing: border-box; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.vp.light { --bg: #f2f2fa; --elev: #ffffff; --surf: #eaeaf4; --input: #f6f6fe;
  --glass: rgba(255,255,255,0.82); --overlay-panel: rgba(14,14,26,0.95);
  --border: rgba(0,0,0,0.08); --border-soft: rgba(0,0,0,0.04); --border-hover: rgba(0,0,0,0.15);
  --t1: #050510; --t2: #1a1a40; --t3: #3a3a58; --t4: #6a6a88;
  --blue: #2563eb; --purple: #6d28d9; --indigo: #4f46e5; --green: #16a34a; --amber: #d97706; --red: #dc2626;
  --blue-soft: rgba(37,99,235,0.12); --purple-soft: rgba(109,40,217,0.12); --green-soft: rgba(22,163,74,0.12); --amber-soft: rgba(217,119,6,0.14); --red-soft: rgba(220,38,38,0.10);
  --shadow-card: 0 2px 16px rgba(0,0,0,0.06), 0 0 0 1px var(--border); --shadow-dialog: 0 24px 80px rgba(0,0,0,0.12), 0 0 0 1px var(--border);
  --mesh: rgba(99,102,241,0.25); --grain: 0.06; --grid: 0.08; --hex: url('./hex-light.svg'); --grain-blend: multiply; }
.vp * { box-sizing: border-box; }
.vp.rtl { direction: rtl; font-family: 'Inter', 'Noto Sans Arabic', -apple-system, sans-serif; }
.vp .ltr { direction: ltr; unicode-bidi: isolate; }
.vp .atmo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vp .atmo .mesh { position: absolute; width: 760px; height: 440px; border-radius: 50%; top: 18%; left: 22%; background: radial-gradient(ellipse at center, var(--mesh), transparent 70%); }
.vp .atmo .mesh.two { top: 55%; left: 58%; width: 560px; height: 360px; opacity: 0.6; }
.vp .atmo .hexgrid { position: absolute; inset: 0; opacity: var(--grid); background-image: var(--hex); background-size: 28px 49px; }
.vp .atmo .grain { position: absolute; inset: 0; opacity: var(--grain); mix-blend-mode: var(--grain-blend); background-image: url('./grain.svg'); background-size: 200px 200px; }
.vp .z { position: relative; z-index: 1; }
.vp .h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--t1); }
.vp .h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--t1); }
.vp .h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--t1); }
.vp .h4 { font-size: 15px; font-weight: 600; color: var(--t1); }
.vp .body { font-size: 13px; color: var(--t2); }
.vp .small { font-size: 12px; color: var(--t3); }
.vp .tiny { font-size: 11px; color: var(--t3); }
.vp .label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); }
.vp .muted { color: var(--t4); }
.vp .strong { color: var(--t1); font-weight: 600; }
.vp .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.vp .card { background: var(--glass); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-card); }
.vp .dialog { background: var(--glass); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-dialog); }
.vp .surface { background: var(--surf); border: 1px solid var(--border-soft); border-radius: 10px; }
.vp .elev { background: var(--elev); border: 1px solid var(--border); border-radius: 12px; }
.vp .scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.vp.light .scrim { background: rgba(0,0,0,0.3); }
.vp .opanel { background: var(--overlay-panel); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; color: #f0f0ff; box-shadow: 0 16px 48px rgba(0,0,0,0.5); }
.vp .opanel .t1 { color: #f0f0ff; }
.vp .opanel .t2 { color: #b0b0d0; }
.vp .opanel .t3 { color: #7878a0; }
.vp .opanel .t4 { color: #585878; }
.vp .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: transparent; color: var(--t2); font-family: inherit; cursor: pointer; white-space: nowrap; }
.vp .btn.primary { background: var(--gradient); color: #fff; border-color: transparent; box-shadow: 0 4px 20px rgba(99,102,241,0.30); }
.vp .btn.sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.vp .btn.xs { height: 26px; padding: 0 10px; font-size: 11px; border-radius: 8px; }
.vp .btn.danger { color: var(--red); border-color: rgba(239,68,68,0.4); }
.vp .btn.block { width: 100%; }
.vp .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--t3); cursor: pointer; }
.vp .iconbtn.bordered { border-color: var(--border); }
.vp .input { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 6px; background: var(--input); border: 1px solid var(--border); color: var(--t1); font-size: 13px; font-family: inherit; }
.vp .input.area { height: auto; align-items: flex-start; padding: 10px 12px; line-height: 1.5; }
.vp .input .ph { color: var(--t4); }
.vp .select { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 12px; border-radius: 6px; background: var(--input); border: 1px solid var(--border); color: var(--t1); font-size: 12px; }
.vp .toggle { width: 44px; height: 24px; border-radius: 999px; background: var(--surf); position: relative; flex-shrink: 0; border: 1px solid var(--border); }
.vp .toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.vp .toggle.on { background: var(--blue); border-color: transparent; }
.vp .toggle.on::after { left: 23px; }
.vp .toggle.amber.on { background: var(--amber); }
.vp.rtl .toggle::after { left: auto; right: 3px; }
.vp.rtl .toggle.on::after { right: 23px; }
.vp .check { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border-hover); background: var(--input); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.vp .check.on { background: var(--blue); border-color: var(--blue); }
.vp .check.on::after { content: ''; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); }
.vp .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 5px; font-size: 10px; font-weight: 600; background: var(--surf); border: 1px solid var(--border); color: var(--t2); }
.vp .opanel .kbd { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: #f0f0ff; }
.vp /* Pills, .vp chips, .vp badges */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.vp .pill.blue { background: var(--blue-soft); color: var(--blue); }
.vp .pill.purple { background: var(--purple-soft); color: var(--purple); }
.vp .pill.green { background: var(--green-soft); color: var(--green); }
.vp .pill.amber { background: var(--amber-soft); color: var(--amber); }
.vp .pill.red { background: var(--red-soft); color: var(--red); }
.vp .pill.gray { background: var(--surf); color: var(--t3); border: 1px solid var(--border); }
.vp .pill.outline { background: transparent; border: 1px solid currentColor; opacity: 0.9; }
.vp .chip { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 10px; font-size: 12px; font-weight: 500; border: 1px solid var(--border); background: var(--input); color: var(--t2); white-space: nowrap; }
.vp .chip.on { background: var(--blue-soft); border-color: rgba(59,130,246,0.4); color: var(--blue); font-weight: 600; }
.vp .chip.on.amber { background: var(--amber-soft); border-color: rgba(245,158,11,0.45); color: var(--amber); }
.vp .tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 10px; background: var(--surf); color: var(--t3); border: 1px solid var(--border-soft); }
.vp .badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; }
.vp .badge.you { background: var(--purple-soft); color: var(--purple); }
.vp .badge.them { background: var(--blue-soft); color: var(--blue); }
.vp .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.vp .dot.green { background: var(--green); }
.vp .dot.blue { background: var(--blue); }
.vp .dot.purple { background: var(--purple); }
.vp .dot.amber { background: var(--amber); }
.vp .dot.red { background: var(--red); }
.vp .dot.off { background: var(--t4); opacity: 0.5; }
.vp .tab { height: 36px; padding: 0 14px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; color: var(--t3); border-bottom: 2px solid transparent; }
.vp .tab.on { color: var(--t1); border-bottom-color: var(--blue); font-weight: 600; }
.vp .ftab { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--t3); border-radius: 8px; }
.vp .ftab.on { background: var(--surf); color: var(--t1); }
.vp .voice { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.vp .voice i { display: block; width: 3px; border-radius: 3px; background: var(--blue); height: 100%; transform-origin: center; }
.vp .voice.idle i { transform: scaleY(0.18); opacity: 0.35; }
.vp .voice.speaking i:nth-child(1) { transform: scaleY(0.45); }
.vp .voice.speaking i:nth-child(2) { transform: scaleY(0.9); }
.vp .voice.speaking i:nth-child(3) { transform: scaleY(1); }
.vp .voice.speaking i:nth-child(4) { transform: scaleY(0.7); }
.vp .voice.speaking i:nth-child(5) { transform: scaleY(0.4); }
.vp .voice.listening i { background: var(--green); }
.vp .voice.listening i:nth-child(1) { transform: scaleY(0.3); }
.vp .voice.listening i:nth-child(2) { transform: scaleY(0.6); }
.vp .voice.listening i:nth-child(3) { transform: scaleY(0.85); }
.vp .voice.listening i:nth-child(4) { transform: scaleY(0.5); }
.vp .voice.listening i:nth-child(5) { transform: scaleY(0.25); }
.vp .voice.lg { height: 22px; gap: 4px; }
.vp .voice.lg i { width: 4px; }
.vp .dots { display: inline-flex; gap: 4px; align-items: center; }
.vp .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); display: block; }
.vp .dots i:nth-child(2) { opacity: 0.6; }
.vp .dots i:nth-child(3) { opacity: 0.3; }
.vp .row { display: flex; align-items: center; gap: 12px; }
.vp .col { display: flex; flex-direction: column; gap: 12px; }
.vp .between { justify-content: space-between; }
.vp .wrap { flex-wrap: wrap; }
.vp .grow { flex-grow: 1; min-width: 0; }
.vp .center { align-items: center; justify-content: center; }
.vp .divider { height: 1px; background: var(--border-soft); }
.vp .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp .gap4 { gap: 4px; }
.vp .gap6 { gap: 6px; }
.vp .gap8 { gap: 8px; }
.vp .gap16 { gap: 16px; }
.vp .gap20 { gap: 20px; }
.vp .gap24 { gap: 24px; }
.vp .topbar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px 0 80px; border-bottom: 1px solid var(--border); background: var(--glass); }
.vp.rtl .topbar { padding: 0 80px 0 24px; }
.vp .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--t1); }
.vp .logomark { width: 22px; height: 22px; border-radius: 6px; background: var(--gradient); }
.vp .traffic { position: absolute; top: 20px; left: 16px; display: flex; gap: 8px; }
.vp .traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.vp .traffic i:nth-child(1) { background: #ff5f57; }
.vp .traffic i:nth-child(2) { background: #febc2e; }
.vp .traffic i:nth-child(3) { background: #28c840; }
.vp .page { width: 720px; margin: 0 auto; padding: 32px 0; }
.vp .page.wide { width: 1040px; }
.vp .flag { width: 22px; height: 16px; border-radius: 3px; display: inline-block; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.15); }
.vp .f-gb { background: linear-gradient(#012169, #012169); position: relative; }
.vp .f-gb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, #C8102E 40%, #C8102E 60%, transparent 60%), linear-gradient(to right, transparent 42%, #C8102E 42%, #C8102E 58%, transparent 58%); }
.vp .f-fr { background: linear-gradient(to right, #0055A4 33%, #fff 33%, #fff 66%, #EF4135 66%); }
.vp .f-es { background: linear-gradient(#AA151B 25%, #F1BF00 25%, #F1BF00 75%, #AA151B 75%); }
.vp .f-de { background: linear-gradient(#000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%); }
.vp .f-it { background: linear-gradient(to right, #009246 33%, #fff 33%, #fff 66%, #CE2B37 66%); }
.vp .f-nl { background: linear-gradient(#AE1C28 33%, #fff 33%, #fff 66%, #21468B 66%); }
.vp .f-jp { background: radial-gradient(circle at center, #BC002D 30%, #fff 31%); }
.vp .f-sa { background: #006C35; }
.vp .f-cn { background: #DE2910; }
.vp .f-in { background: linear-gradient(#FF9933 33%, #fff 33%, #fff 66%, #138808 66%); }
.vp .f-kr { background: radial-gradient(circle at center, #CD2E3A 22%, #0047A0 23%, #0047A0 32%, #fff 33%); }
.vp .call { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); }
.vp .calltile { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.22); font-size: 12px; font-weight: 600; }
.vp .track { display: block; height: 6px; border-radius: 3px; background: var(--surf); overflow: hidden; flex-grow: 1; }
.vp .fill { display: block; height: 100%; border-radius: 3px; background: var(--gradient); }
.vp .tile { padding: 12px 14px; border-radius: 12px; background: var(--surf); border: 1px solid var(--border-soft); }
.vp .num { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--t1); line-height: 1.1; }
.vp .star { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 3px; font-size: 9px; font-weight: 700; margin-inline-end: 6px; vertical-align: middle; }
.vp .star.s { background: var(--blue-soft); color: var(--blue); }
.vp .star.t { background: var(--purple-soft); color: var(--purple); }
.vp .star.a { background: rgba(99,102,241,0.15); color: var(--indigo); }
.vp .star.r { background: var(--green-soft); color: var(--green); }
.vp .md p { margin: 0 0 8px; }
.vp .md h3 { font-size: 13px; font-weight: 700; color: var(--t1); margin: 12px 0 6px; }
.vp .md ul { margin: 0; padding-inline-start: 18px; }
.vp .md li { margin: 3px 0; }
.vp .md strong { color: var(--t1); }
.vp .code { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.6; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px 14px; color: #d4d4f0; white-space: pre; overflow: hidden; direction: ltr; text-align: left; }
.vp .code .k { color: #c792ea; }
.vp .code .f { color: #82aaff; }
.vp .code .s { color: #c3e88d; }
.vp .code .c { color: #676e95; }
.vp /* ---------------------------------------------------------------- Overlay
   Mirrors the real overlay window. Tokens are the --ov-* set from
   src/renderer/styles/globals.css: dark glass by default, .vp light under .light. */
.owin { position: absolute; top: 20px; right: 20px; width: 460px; height: 760px; padding: 16px; display: flex; flex-direction: column; gap: 12px; direction: ltr;
  --ov-panel: rgba(15,15,25,0.88); --ov-panel-border: rgba(255,255,255,0.08); --ov-panel-shadow: 0 8px 32px rgba(0,0,0,0.4);
  --ov-line: rgba(255,255,255,0.05); --ov-sep: rgba(255,255,255,0.08); --ov-hover: rgba(255,255,255,0.05); --ov-chip: rgba(255,255,255,0.04); --ov-chip-border: rgba(255,255,255,0.07);
  --ov-dot: rgba(255,255,255,0.15); --ov-dot-off: rgba(255,255,255,0.2);
  --ov-t10: rgba(255,255,255,0.10); --ov-t15: rgba(255,255,255,0.15); --ov-t20: rgba(255,255,255,0.20); --ov-t25: rgba(255,255,255,0.25); --ov-t30: rgba(255,255,255,0.30); --ov-t35: rgba(255,255,255,0.35); --ov-t40: rgba(255,255,255,0.40); --ov-t50: rgba(255,255,255,0.50); --ov-t55: rgba(255,255,255,0.55); --ov-t70: rgba(255,255,255,0.70); --ov-t75: rgba(255,255,255,0.75);
  --ov-md-text: #c8c8e0; --ov-md-head: #f0f0ff; --ov-md-strong: #93c5fd; --ov-md-code: rgba(255,255,255,0.08); --ov-md-pre: rgba(0,0,0,0.2);
  --ov-blue-text: #93c5fd; --ov-blue-dot: #60a5fa; --ov-blue-bg: rgba(59,130,246,0.15);
  --ov-amber-text: #fcd34d; --ov-amber-dot: #fbbf24; --ov-amber-bg: rgba(245,158,11,0.15);
  --ov-purple-text: #d8b4fe; --ov-purple-dot: #c084fc; --ov-purple-bg: rgba(168,85,247,0.15);
  --ov-green-dot: #4ade80; --ov-yellow-dot: #facc15; --ov-sd-title: rgba(192,132,252,0.7); --ov-question: rgba(96,165,250,0.7); --ov-thinking: rgba(96,165,250,0.4);
  --ov-end: rgba(248,113,113,0.6); --ov-end-border: rgba(239,68,68,0.15);
  --ov-warn-bg: rgba(245,158,11,0.12); --ov-warn-text: rgba(251,191,36,0.9);
  --ov-banner-bg: rgba(245,158,11,0.08); --ov-banner-border: rgba(245,158,11,0.15); --ov-banner-text: rgba(251,191,36,0.8); --ov-banner-cta: #fbbf24;
  --ov-mock-bg: #181830; --ov-mock-border: rgba(255,255,255,0.07); --ov-mock-text: #7878a0; --ov-mock-q: #b0b0d0; --ov-mock-qbg: #0c0c1a;
  --voice-you: #34d399; --voice-ai: #60a5fa; --ov-code-bg: rgba(0,0,0,0.35); --ov-code-text: #d4d4f0; }
.vp .owin.light {
  --ov-panel: rgba(255,255,255,0.86); --ov-panel-border: rgba(0,0,0,0.08); --ov-panel-shadow: 0 8px 32px rgba(0,0,0,0.12);
  --ov-line: rgba(0,0,0,0.06); --ov-sep: rgba(0,0,0,0.1); --ov-hover: rgba(0,0,0,0.04); --ov-chip: rgba(0,0,0,0.03); --ov-chip-border: rgba(0,0,0,0.08);
  --ov-dot: rgba(10,10,30,0.18); --ov-dot-off: rgba(10,10,30,0.22);
  --ov-t10: rgba(10,10,30,0.20); --ov-t15: rgba(10,10,30,0.28); --ov-t20: rgba(10,10,30,0.38); --ov-t25: rgba(10,10,30,0.45); --ov-t30: rgba(10,10,30,0.50); --ov-t35: rgba(10,10,30,0.55); --ov-t40: rgba(10,10,30,0.60); --ov-t50: rgba(10,10,30,0.68); --ov-t55: rgba(10,10,30,0.74); --ov-t70: rgba(10,10,30,0.85); --ov-t75: rgba(10,10,30,0.88);
  --ov-md-text: #1a1a40; --ov-md-head: #050510; --ov-md-strong: #1d4ed8; --ov-md-code: rgba(0,0,0,0.06); --ov-md-pre: rgba(0,0,0,0.04);
  --ov-blue-text: #1d4ed8; --ov-blue-dot: #2563eb; --ov-blue-bg: rgba(37,99,235,0.12);
  --ov-amber-text: #b45309; --ov-amber-dot: #d97706; --ov-amber-bg: rgba(217,119,6,0.14);
  --ov-purple-text: #6d28d9; --ov-purple-dot: #7c3aed; --ov-purple-bg: rgba(124,58,237,0.12);
  --ov-green-dot: #16a34a; --ov-yellow-dot: #ca8a04; --ov-sd-title: #6d28d9; --ov-question: #2563eb; --ov-thinking: rgba(37,99,235,0.6);
  --ov-end: rgba(220,38,38,0.75); --ov-end-border: rgba(220,38,38,0.2);
  --ov-warn-bg: rgba(245,158,11,0.14); --ov-warn-text: #b45309;
  --ov-banner-bg: rgba(245,158,11,0.1); --ov-banner-border: rgba(217,119,6,0.25); --ov-banner-text: #92400e; --ov-banner-cta: #b45309;
  --ov-mock-bg: #eaeaf4; --ov-mock-border: rgba(0,0,0,0.08); --ov-mock-text: #3a3a58; --ov-mock-q: #1a1a40; --ov-mock-qbg: #f6f6fe;
  --voice-you: #059669; --voice-ai: #2563eb; --ov-code-bg: rgba(0,0,0,0.05); --ov-code-text: #1a1a40; }
.vp .owin.rtl { direction: rtl; }
.vp .gp { background: var(--ov-panel); backdrop-filter: blur(16px); border: 1px solid var(--ov-panel-border); border-radius: 12px; box-shadow: var(--ov-panel-shadow); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.vp .gp.t30 { flex: 30 1 0; }
.vp .gp.t70 { flex: 70 1 0; }
.vp .gp .hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; border-bottom: 1px solid var(--ov-line); flex-shrink: 0; }
.vp .gp .hd .l { display: flex; align-items: center; gap: 10px; }
.vp .gp .hd .r { display: flex; align-items: center; gap: 4px; }
.vp .gp .ttl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ov-t50); }
.vp .gp .ttl.sd { color: var(--ov-sd-title); }
.vp .gp .bd { flex: 1 1 0; min-height: 0; overflow: hidden; padding: 14px 28px; }
.vp .gp .bd.tail { display: flex; flex-direction: column; justify-content: flex-end; }
.vp .gp .ghost { font-size: 11px; color: var(--ov-t25); }
.vp .gp .gbtn { font-size: 11px; font-weight: 500; color: var(--ov-t25); padding: 4px 12px; border-radius: 8px; background: none; border: 0; font-family: inherit; }
.vp .gp .nav { font-size: 13px; color: var(--ov-t40); padding: 2px 8px; line-height: 1; }
.vp .gp .nav.off { color: var(--ov-t10); }
.vp .gp .cnt { font-size: 10px; min-width: 34px; text-align: center; color: var(--ov-t30); font-weight: 500; }
.vp .gp .empty { font-size: 13px; font-style: italic; color: var(--ov-t20); }
.vp .sdot { width: 10px; height: 10px; border-radius: 50%; background: var(--ov-dot); flex-shrink: 0; }
.vp .sdot.blue { background: var(--ov-blue-dot); }
.vp .sdot.green { background: var(--ov-green-dot); }
.vp .sdot.yellow { background: var(--ov-yellow-dot); }
.vp .sbar { padding: 12px 20px; flex-direction: row; align-items: center; justify-content: space-between; flex-shrink: 0; }
.vp .sbar .l { display: flex; align-items: center; gap: 14px; }
.vp .sbar .r { display: flex; align-items: center; gap: 6px; }
.vp .sbar .st { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; }
.vp .sbar .st i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.vp .sbar .st.off { color: var(--ov-t40); }
.vp .sbar .st.off i { background: var(--ov-dot-off); }
.vp .sbar .st.thinking { color: var(--ov-blue-text); }
.vp .sbar .st.thinking i { background: var(--ov-blue-dot); }
.vp .sbar .st.live { color: var(--ov-t55); }
.vp .sbar .st.live i { background: var(--ov-green-dot); }
.vp .sbar .sep { width: 1px; height: 16px; background: var(--ov-sep); }
.vp .sbar .pills { display: flex; align-items: center; gap: 4px; }
.vp .mpill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ov-t40); white-space: nowrap; }
.vp .mpill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ov-dot); display: block; }
.vp .mpill.on.blue { background: var(--ov-blue-bg); color: var(--ov-blue-text); }
.vp .mpill.on.blue i { background: var(--ov-blue-dot); }
.vp .mpill.on.amber { background: var(--ov-amber-bg); color: var(--ov-amber-text); }
.vp .mpill.on.amber i { background: var(--ov-amber-dot); }
.vp .mpill.on.purple { background: var(--ov-purple-bg); color: var(--ov-purple-text); }
.vp .mpill.on.purple i { background: var(--ov-purple-dot); }
.vp .sbar .gear { width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--ov-t35); }
.vp .sbar .end { font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 8px; color: var(--ov-end); border: 1px solid var(--ov-end-border); background: none; font-family: inherit; }
.vp .swarn { display: flex; align-items: center; justify-content: center; padding: 6px 0; font-size: 11px; font-weight: 500; background: var(--ov-warn-bg); color: var(--ov-warn-text); }
.vp .cbanner { height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 12px; background: var(--ov-banner-bg); border: 1px solid var(--ov-banner-border); }
.vp .cbanner .m { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ov-banner-text); }
.vp .cbanner .m i { width: 6px; height: 6px; border-radius: 50%; background: var(--ov-banner-cta); opacity: .7; display: block; }
.vp .cbanner .a { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; color: var(--ov-banner-cta); }
.vp .cbanner .a .x { color: var(--ov-t20); font-size: 13px; width: 20px; text-align: center; }
.vp .tr { display: flex; flex-direction: column; gap: 12px; }
.vp .tr .e { display: flex; gap: 12px; }
.vp .tr .e .tm { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: var(--ov-t25); padding-top: 3px; flex-shrink: 0; direction: ltr; }
.vp .tr .e .w { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.vp .tr .e p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ov-t75); unicode-bidi: plaintext; }
.vp .tr .e.partial .tm { color: var(--ov-t15); }
.vp .tr .e.partial p { color: var(--ov-t40); font-style: italic; }
.vp .spk { display: inline-flex; align-items: center; flex-shrink: 0; padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.vp .spk.you { color: #7c3aed; background: rgba(124,58,237,0.14); }
.vp .spk.them { color: #3b82f6; background: rgba(59,130,246,0.14); }
.vp .owin.light .spk.you { color: #6d28d9; background: rgba(109,40,217,0.12); }
.vp .owin.light .spk.them { color: #2563eb; background: rgba(37,99,235,0.12); }
.vp .vi { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.vp .vi i { display: block; border-radius: 3px; }
.vp .vi.you i { background: var(--voice-you); }
.vp .vi.ai i { background: var(--voice-ai); }
.vp .vi.idle i { opacity: 0.35; }
.vp .vi.loading { gap: 4px; }
.vp .vi.loading i { border-radius: 50%; }
.vp .vi.loading i:nth-child(2) { opacity: 0.65; }
.vp .vi.loading i:nth-child(3) { opacity: 0.35; }
.vp .ans { font-size: 13px; line-height: 1.6; color: var(--ov-md-text); }
.vp .ans .q { color: var(--ov-question); font-weight: 500; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ov-line); }
.vp .ans h2 { font-size: 13px; font-weight: 700; color: var(--ov-md-head); margin: 10px 0 4px; }
.vp .ans h2:first-child { margin-top: 0; }
.vp .ans p { margin: 0 0 7px; }
.vp .ans ul { margin: 0 0 7px; padding-inline-start: 1.25em; }
.vp .ans li { margin-bottom: 3px; }
.vp .ans strong { color: var(--ov-md-strong); font-weight: 600; }
.vp .ans code { background: var(--ov-md-code); border-radius: 4px; padding: 1px 5px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; }
.vp .ans .caret { display: inline-block; width: 6px; height: 13px; background: #7c3aed; vertical-align: text-bottom; margin-inline-start: 2px; }
.vp .ans .next { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ov-line); }
.vp .ans .next .lb { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ov-t30); }
.vp .ans .next .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vp .ans .next .chips span { font-size: 11px; line-height: 1.4; padding: 4px 10px; border-radius: 999px; background: var(--ov-chip); border: 1px solid var(--ov-chip-border); color: var(--ov-t55); }
.vp .ans .think { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 11px; color: var(--ov-thinking); }
.vp .ans .think b { display: flex; gap: 6px; }
.vp .ans .think b i { width: 6px; height: 6px; border-radius: 50%; background: var(--ov-blue-dot); display: block; }
.vp .ans .think b i:nth-child(2) { transform: translateY(-3px); }
.vp .ans .think b i:nth-child(3) { opacity: 0.6; }
.vp .ans .code { margin: 6px 0 8px; background: var(--ov-code-bg); color: var(--ov-code-text); border-color: var(--ov-line); }
.vp .owin.light .ans .code .k { color: #7c3aed; }
.vp .owin.light .ans .code .f { color: #1d4ed8; }
.vp .owin.light .ans .code .s { color: #15803d; }
.vp .owin.light .ans .code .c { color: #6b7280; }
.vp /* Mock bar (theme tokens in the app: bg-surface, .vp border-primary, .vp text-tertiary) */
.mockbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--ov-mock-bg); border: 1px solid var(--ov-mock-border); }
.vp .mockbar .l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vp .mockbar .lb { font-size: 11px; font-weight: 500; color: var(--ov-mock-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp .mockbar .q { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 6px; color: var(--ov-mock-q); background: var(--ov-mock-qbg); flex-shrink: 0; }
.vp .mockbar .skip { font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--ov-mock-border); color: var(--ov-mock-q); background: none; font-family: inherit; flex-shrink: 0; }
.vp /* Backdrops: a dark call, .vp a light Meet-style call, .vp the user's desktop */
.desk { background: linear-gradient(135deg, #12121f 0%, #16162a 100%); }
.vp .call.lt { background: linear-gradient(135deg, #f4f5f9 0%, #e9ebf3 60%, #e2e5f0 100%); }
.vp .desk.lt { background: linear-gradient(135deg, #f7f7fb 0%, #eeeff6 100%); }
.vp .lt .calltile { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.06); color: rgba(20,20,40,0.35); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.vp .calltile.code { color: rgba(255,255,255,0.35); }
.vp .lt .calltile.code { color: rgba(20,20,40,0.5); }