/* YRB VoiceDesk call simulator styles (extracted from demos/_kit/kit.css by hand-off script).
   Themed to the YRB Nova site via the --k-* tokens below. */
.vd { --k-font-head: var(--font-display); --k-ink: var(--text); --k-ink-strong: #fff; --k-ink-soft: var(--text-dim);
  --k-primary: var(--accent); --k-on-primary: #06060a; --k-primary-soft: rgba(79, 201, 171, 0.14); --k-accent: var(--accent); --k-on-accent: #06060a;
  --k-line: var(--line); --k-line-strong: var(--line-strong); --k-radius: 14px; --k-radius-lg: 18px; --k-radius-xl: 24px;
  --k-glass-bg: rgba(255, 255, 255, 0.035); --k-glass-border: rgba(255, 255, 255, 0.1); --k-glass-highlight: rgba(255, 255, 255, 0.06); --k-glass-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7); --k-glass-blur: 18px;
  --k-phone-bg: linear-gradient(160deg, #1b1b22 0%, #0b0b0e 100%); --k-phone-ink: #f5f5f2; --k-bubble-ai: rgba(79, 201, 171, 0.16); --k-bubble-ai-ink: #eafaf5; --k-bubble-caller: #8b80e0; --k-bubble-caller-ink: #fff;
  --k-wave: #4fc9ab; --k-wave-caller: #b3abf0; --k-urgent-bg: #d9573a; --k-urgent-ink: #fff; }
.vd .k-call-tab { color: var(--text); }
.vd .k-call-tab[aria-selected="true"] { color: #06060a; }
.vd h3 { font-family: var(--font-display); }
.k-glass { background: var(--k-glass-bg); border: 1px solid var(--k-glass-border); box-shadow: var(--k-glass-shadow), inset 0 1px 0 var(--k-glass-highlight); -webkit-backdrop-filter: blur(var(--k-glass-blur, 18px)) saturate(150%); backdrop-filter: blur(var(--k-glass-blur, 18px)) saturate(150%); border-radius: var(--k-radius-lg); }
.k-badge-247 { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; background: var(--k-accent); color: var(--k-on-accent); }
.k-badge-247 i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: k-pulse 1.6s infinite; }
.k-call { border-radius: var(--k-radius-xl); padding: 18px; display: grid; gap: 16px; }
@media (min-width: 900px) { .k-call { grid-template-columns: 1.35fr 1fr; padding: 26px; } }
.k-call-tabs { display: flex; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; }
.k-call-tab { padding: 9px 16px; border-radius: 100px; border: 1px solid var(--k-line-strong); background: transparent; color: var(--k-ink); font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; }
.k-call-tab[aria-selected="true"] { background: var(--k-primary); color: var(--k-on-primary); border-color: var(--k-primary); }
.k-phone { border-radius: 30px; padding: 16px; background: var(--k-phone-bg); color: var(--k-phone-ink); display: flex; flex-direction: column; min-height: 460px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45); }
.k-phone-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.k-phone-top strong { display: block; font-size: 1rem; color: inherit; }
.k-phone-top small { opacity: 0.75; font-size: 0.8rem; }
.k-call-timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.9rem; opacity: 0.85; }
.k-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; margin: 12px 0 4px; }
.k-wave i { width: 4px; height: 8px; border-radius: 4px; background: var(--k-wave, var(--k-accent)); opacity: 0.6; transition: height 0.15s ease; }
.k-wave.talking i { animation: k-wave 0.9s ease-in-out infinite; opacity: 1; }
.k-wave.talking.caller i { background: var(--k-wave-caller, #fff); }
.k-wave i:nth-child(2n) { animation-delay: -0.2s; } .k-wave i:nth-child(3n) { animation-delay: -0.45s; } .k-wave i:nth-child(5n) { animation-delay: -0.7s; }
.k-speaking { text-align: center; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; min-height: 1.2em; }
.k-transcript { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 4px; max-height: 340px; scroll-behavior: smooth; }
.k-bubble { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 0.95rem; line-height: 1.45; animation: k-rise 0.3s ease; }
.k-bubble small { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; margin-bottom: 2px; }
.k-bubble.ai { align-self: flex-start; background: var(--k-bubble-ai); color: var(--k-bubble-ai-ink); border-bottom-left-radius: 6px; }
.k-bubble.caller { align-self: flex-end; background: var(--k-bubble-caller); color: var(--k-bubble-caller-ink); border-bottom-right-radius: 6px; }
.k-bubble.system { align-self: center; max-width: 100%; text-align: center; font-size: 0.82rem; font-weight: 700; background: transparent; border: 1px dashed rgba(255, 255, 255, 0.3); }
.k-typing::after { content: "▍"; animation: k-blink 0.8s steps(1) infinite; margin-left: 1px; }
.k-call-controls { display: flex; gap: 8px; justify-content: center; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); flex-wrap: wrap; }
.k-call-controls button { min-height: 42px; padding: 8px 16px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: inherit; font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.k-call-controls button.primary { background: var(--k-accent); color: var(--k-on-accent); border-color: transparent; }
.k-call-controls svg { width: 16px; height: 16px; }
.k-call-side { display: flex; flex-direction: column; gap: 10px; }
.k-call-side h3 { font-size: 1.05rem; margin-bottom: 2px; }
.k-call-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--k-ink-soft); }
.k-events { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; min-height: 120px; }
.k-event { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--k-radius); animation: k-slide-in 0.4s cubic-bezier(.2, 1.2, .4, 1); }
.k-event .k-ev-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--k-primary-soft); color: var(--k-primary); }
.k-event.urgent .k-ev-icon { background: var(--k-urgent-bg); color: var(--k-urgent-ink); }
.k-event .k-ev-icon svg { width: 18px; height: 18px; }
.k-event strong { display: block; font-size: 0.95rem; }
.k-event small { color: var(--k-ink-soft); }
.k-events-empty { color: var(--k-ink-soft); font-size: 0.92rem; padding: 12px 2px; }
@keyframes k-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes k-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes k-slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes k-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes k-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes k-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes k-wave { 0%, 100% { height: 8px; } 50% { height: 36px; } }
@keyframes k-blink { 50% { opacity: 0; } }