:root{
  --dm-primary:#0289D0;
  --dm-primary-soft:#E8F4FA;
  --dm-ink:#212934;
  --dm-muted:#4A4E57;
  --dm-hairline:#E6E6E6;
  --dm-bg:#F8F9FA;
  --dm-surface:#FFFFFF;
  --dm-severity-low:#65BC7B;
  --dm-severity-mid:#F0AD4E;
  --dm-severity-high:#D9534F;
  --dm-ai-bg:#F0F8FC;
  --dm-sensitive-bg:#FFF8E6;
  --dm-shadow:0 14px 34px rgba(33,41,52,0.08);
  --dm-voice-convo-height: 340px;
  --dm-voice-convo-height-mobile: 168px;
}

body{
  font-family:"Inter Tight","Inter",-apple-system,system-ui,sans-serif;
  background:var(--dm-bg);
  color:var(--dm-ink);
}

a{ color:var(--dm-primary); }

body.page-index .container{
  background:transparent;
  backdrop-filter:none;
  box-shadow:none;
  padding:0;
}

/* ── Shared UI ─────────────────────────────────────────────────── */
.inline-alert{ border-color:var(--dm-hairline); color:var(--dm-ink); background:var(--dm-surface); }
.inline-alert.error{ background:#FDECEA; border-color:#F5C2C7; color:#8A1C1C; }
.inline-alert.warning{ background:var(--dm-sensitive-bg); border-color:#F1D1A7; color:#7A4B00; }

.progress-container,
.question-container{
  background:var(--dm-surface);
  border:1px solid var(--dm-hairline);
  box-shadow:var(--dm-shadow);
}

.progress-bar-bg{ background:var(--dm-hairline); }
.progress-bar{ background:var(--dm-primary); }

.progress-text{
  color:var(--dm-muted);
  font-size:12px;
  font-weight:500;
}

.btn-primary,
.chat-send-btn,
.btn-confirm-selection,
.voice-text-submit-btn,
.btn-voice-continue{
  background:var(--dm-primary) !important;
  box-shadow:none;
}
.btn-primary:hover:not(:disabled),
.chat-send-btn:hover:not(:disabled),
.btn-confirm-selection:hover,
.voice-text-submit-btn:hover,
.btn-voice-continue:hover{
  box-shadow:0 10px 18px rgba(2,137,208,0.22);
}

.btn-secondary{
  background:var(--dm-surface);
  border:1px solid var(--dm-hairline);
  color:var(--dm-ink);
}
.btn-secondary:hover:not(:disabled){ background:#F0F3F5; }

.question-badge{ background:var(--dm-primary); }
.question-type-badge{
  background:var(--dm-primary-soft);
  color:var(--dm-muted);
}

.question-text{
  font-weight:400;
  color:var(--dm-ink);
}

.option-text{
  font-weight:400;
  color:var(--dm-ink);
}

.option-code,
.voice-option-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

/* Typography scale (mobile → desktop) */
@media (max-width: 640px){
  .question-text{ font-size:16px; }
  .option-text{ font-size:14px; }
  .bot-message .message-content,
  .voice-bubble-text{ font-size:13px; }
  .dm-conv-logo {
    margin-right: 10px;
  }
}
@media (min-width: 641px){
  .question-text{ font-size:18px; }
  .option-text{ font-size:16px; }
  .bot-message .message-content,
  .voice-bubble-text{ font-size:14px; }
}

/* ── Text chat (fallback chat mode) ────────────────────────────── */
.chat-container{
  border:1px solid var(--dm-hairline);
  box-shadow:var(--dm-shadow);
}
.chat-header{
  background:var(--dm-surface);
  color:var(--dm-ink);
  border-bottom:1px solid var(--dm-hairline);
}
.chat-header h1{ color:var(--dm-ink); }
.chat-header .subtitle{ color:var(--dm-muted); }
.chat-messages{ background:var(--dm-bg); }
.bot-message .message-content{
  background:var(--dm-ai-bg);
  color:var(--dm-ink);
  box-shadow:none;
  border:1px solid rgba(2,137,208,0.08);
}
.user-message .message-content{
  background:var(--dm-primary);
  color:#fff;
  box-shadow:none;
}

.chat-option-btn{
  border-color:var(--dm-hairline);
  color:var(--dm-ink);
}
.chat-option-btn:hover{
  border-color:var(--dm-primary);
  background:var(--dm-primary-soft);
  transform:translateX(2px);
}

.chat-input-container{ border-top:1px solid var(--dm-hairline); }
.chat-input{ border-color:var(--dm-hairline); }
.chat-input:focus{ border-color:var(--dm-primary); }

/* ── Voice UI layout (conversation on top, questions below) ───── */
.voice-outer-wrap{
  background:var(--dm-surface);
  border:1px solid var(--dm-hairline);
  box-shadow:var(--dm-shadow);
}
.voice-topbar{
  background:var(--dm-surface);
  color:var(--dm-ink);
  border-bottom:1px solid var(--dm-hairline);
  padding: 10px 16px;
  min-height: 48px;
}

/* SVEN logo inside topbar — inherits dm-conv-logo sizing */
.voice-topbar-logo {
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0;
}
.voice-topbar-logo .dm-conv-logo-face {
  width: 20px !important;
  height: 20px !important;
  font-size: 7px !important;
}
.voice-topbar-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--dm-ink) !important;
  letter-spacing: 0.06em !important;
}

.btn-end-call{
  background:transparent;
  color:var(--dm-primary);
  border:1px solid var(--dm-primary);
}
.btn-end-call:hover{ background:var(--dm-primary-soft); }

.voice-stage-grid{
  display:flex;
  flex-direction:column;
  gap:16px;
  height:100%;
}
.voice-conversation-panel{ order:0; }
.voice-presence-panel{ order:1; flex: 1 1 auto; }

.voice-conversation-panel{
  background:var(--dm-surface);
  border:1px solid var(--dm-hairline);
  border-radius:18px;
  padding:16px;
}
.voice-panel-header{
  color:var(--dm-muted);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.06em;
}

/* Make conversation a fixed-height top panel like the reference */
.voice-convo-bubbles{
  height: var(--dm-voice-convo-height);
  max-height: var(--dm-voice-convo-height);
  overflow-y: auto;
}
@media (max-width: 640px){
  .voice-convo-bubbles{
    height: var(--dm-voice-convo-height-mobile);
    max-height: var(--dm-voice-convo-height-mobile);
  }
}

.voice-bubble-avatar{
  box-shadow:none;
  border:1px solid var(--dm-hairline);
  background:var(--dm-surface);
}
.voice-bubble-text{
  line-height:1.55;
  border:1px solid var(--dm-hairline);
  box-shadow:none;
}
.voice-bubble.agent .voice-bubble-text{
  background:var(--dm-ai-bg);
  border-color:rgba(2,137,208,0.10);
}
.voice-bubble.user .voice-bubble-text{
  /* background:var(--dm-surface); */
  background: var(--dm-primary-soft);
  color: var(--dm-ink);
  /* display: none; */
}

.voice-avatar-card{
  background:var(--dm-surface);
  border:1px solid var(--dm-hairline);
  box-shadow:none;
}
.voice-avatar-name{ color:var(--dm-ink); }
.voice-avatar-copy{ color:var(--dm-muted); }

.voice-avatar-orb{
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,0.95), rgba(255,255,255,0.18) 32%, transparent 34%),
    linear-gradient(135deg, #2EC0FA 0%, var(--dm-primary) 55%, #015B8C 100%);
  box-shadow:0 18px 32px rgba(2,137,208,0.25);
}

/* Smaller avatar (match compact clinical UI) */
.voice-avatar-orb{
  width: 88px;
  height: 88px;
}
.voice-avatar-face{
  width: 56px;
  height: 56px;
  font-size: 18px;
  font-weight: 700;
}
.voice-avatar-name{
  font-size: 16px;
  font-weight: 600;
}
.voice-avatar-face{ color:var(--dm-primary); }

.voice-question-card{
  background:var(--dm-surface);
  border:0px solid var(--dm-hairline);
  box-shadow:none;
}
.voice-question-text{
  color:var(--dm-ink);
  font-weight:400;
}
@media (max-width: 640px){ .voice-question-text{ font-size:16px; } }
@media (min-width: 641px){ .voice-question-text{ font-size:18px; } }

.voice-question-option-tag,
.voice-option-tag{
  background:var(--dm-surface);
  border-color:var(--dm-hairline);
  color:var(--dm-ink);
  font-weight:400;
}
.voice-question-option-tag:hover,
.voice-option-tag:hover{
  border-color:var(--dm-primary);
  background:var(--dm-primary-soft);
  box-shadow:none;
}
.voice-question-option-tag.preview,
.voice-option-tag.preview{
  border-color:var(--dm-primary);
  background:var(--dm-primary-soft);
  box-shadow:0 8px 14px rgba(27, 107, 147, 0.12);
}
.voice-question-option-tag.preview-soft,
.voice-option-tag.preview-soft{
  border-color:var(--dm-primary);
  background:rgba(27, 107, 147, 0.08);
  box-shadow:none;
}
.voice-question-option-tag.selected,
.voice-option-tag.selected{
  background:var(--dm-primary);
  border-color:var(--dm-primary);
  color:#fff;
  box-shadow:none;
}

.voice-listen-row{
  background:var(--dm-surface);
  border:0px solid var(--dm-hairline);
  box-shadow:none;
}
.voice-status-text{
  color:var(--dm-muted);
  font-size:12px;
  font-weight:500;
}

.voice-status-indicator.idle .voice-pulse-ring{ border-color:var(--dm-hairline); }
.voice-status-indicator.connected .voice-pulse-ring{ border-color:var(--dm-severity-low); }
.voice-status-indicator.listening .voice-pulse-ring{ border-color:var(--dm-severity-low); }
.voice-status-indicator.speaking .voice-pulse-ring{ border-color:var(--dm-severity-high); }
.voice-status-indicator.thinking .voice-pulse-ring{ border-color:var(--dm-severity-mid); }
.voice-status-indicator.loading .voice-pulse-ring{ border-color:#9AA6AE; }
.voice-status-indicator.error .voice-pulse-ring{ border-color:var(--dm-severity-high); }

.voice-speak-hint{ color:var(--dm-muted); font-size:12px; }
.voice-speak-hint em{ color:var(--dm-primary); }

/* ═══════════════════════════════════════════════════════════════
   VOICE MODE — Complete Layout Override
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared: kill the big avatar card everywhere ────────────── */
.voice-avatar-card {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}



.voice-onboarding-stage{
  display: none;
}

/* ── Shared: SVEN mini-logo (in both conversation panel headers) */
.dm-conv-logo {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,0.95),
      rgba(255,255,255,0.18) 32%, transparent 34%),
    linear-gradient(135deg, #2EC0FA 0%, var(--dm-primary) 55%, #015B8C 100%);
  box-shadow: 0 4px 12px rgba(2,137,208,0.25);
  display: flex; align-items: center; justify-content: center;
}
.dm-conv-logo-face {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800;
  color: var(--dm-primary); letter-spacing: 0.04em;
}
.dm-conv-logo-label {
  display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
.dm-conv-logo-name {
  font-size: 13px; font-weight: 700;
  color: var(--dm-ink); letter-spacing: 0.04em;
}
.dm-conv-logo-sub { font-size: 10px; color: var(--dm-muted); }

/* ── Animated waveform ──────────────────────────────────────── */
.dm-waveform {
  display: flex; align-items: center; gap: 3px; height: 20px;
  opacity: 0; transition: opacity 0.3s; pointer-events: none; flex-shrink: 0;
}
.dm-waveform.active { opacity: 1; }
.dm-waveform-bar {
  width: 3px; border-radius: 2px; background: var(--dm-primary);
  animation: dm-wave-idle 1.4s ease-in-out infinite;
  transform-origin: bottom center;
}
.dm-waveform-bar:nth-child(1) { height: 6px;  animation-delay: 0s;    }
.dm-waveform-bar:nth-child(2) { height: 12px; animation-delay: 0.12s; }
.dm-waveform-bar:nth-child(3) { height: 18px; animation-delay: 0.22s; }
.dm-waveform-bar:nth-child(4) { height: 12px; animation-delay: 0.34s; }
.dm-waveform-bar:nth-child(5) { height: 6px;  animation-delay: 0.46s; }
@keyframes dm-wave-idle {
  0%,100% { transform: scaleY(1);    opacity: 0.65; }
  50%      { transform: scaleY(1.8); opacity: 1;    }
}
.dm-waveform.speaking .dm-waveform-bar {
  animation-name: dm-wave-speak; animation-duration: 0.55s;
}
@keyframes dm-wave-speak {
  0%,100% { transform: scaleY(0.5); opacity: 0.5; }
  50%      { transform: scaleY(2.2); opacity: 1;   }
}

/* ── dm-hide: used by JS to remove duplicate listen rows ─────  */
.dm-hide { display: none !important; }

/* ── Outer wrap: flex column so topbar + stage stack cleanly ── */
.voice-outer-wrap {
  display: flex !important;
  flex-direction: column !important;
}

/* ── Stage: fills the remaining height of the outer wrap ─────  */
.voice-stage {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;          /* kill any inherited padding */
}

/* ── Grid inside each stage: full height ─────────────────────  */
.voice-stage-grid {
  height: 100% !important;
  min-height: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE  (≤ 768px) — stacked layout, aligned for voice mode
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Outer wrap: fill viewport height precisely */
  .voice-outer-wrap {
    min-height: calc(100dvh - 32px) !important;
    height:     calc(100dvh - 32px) !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Topbar: compact on mobile */
  .voice-topbar {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    min-height: 44px !important;
  }
  .voice-topbar-logo {
    width: 28px !important;
    height: 28px !important;
  }
  .voice-topbar-logo .dm-conv-logo-face {
    width: 18px !important;
    height: 18px !important;
    font-size: 6px !important;
  }
  .voice-topbar-name {
    font-size: 13px !important;
  }
  .btn-end-call {
    font-size: 12px !important;
    padding: 5px 12px !important;
  }

  /* Stage: fill the remaining height below topbar */
  .voice-stage {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* Grid: single column, full height flex */
  .voice-stage-grid {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    gap: 0 !important;
  }

  /* ── TOP SECTION: conversation panel ────────────────────────── */
  .voice-conversation-panel {
    order: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--dm-hairline) !important;
    background: var(--dm-ai-bg) !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  /* Panel header (SVEN logo + waveform): compact, always visible */
  .voice-conversation-panel .voice-panel-header {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px 7px !important;
    border-bottom: 1px solid var(--dm-hairline) !important;
    flex-shrink: 0 !important;
    background: var(--dm-surface) !important;
    min-height: 40px !important;
  }
  .voice-conversation-panel .voice-panel-header .dm-conv-logo-name {
    font-size: 12px !important;
  }
  .voice-conversation-panel .voice-panel-header .dm-conv-logo {
    width: 26px !important;
    height: 26px !important;
  }
  .voice-conversation-panel .voice-panel-header .dm-conv-logo-face {
    width: 16px !important;
    height: 16px !important;
    font-size: 6px !important;
  }
  /* Bubbles: tighter text */
  .voice-conversation-panel .voice-bubble-text {
    font-size: 12px !important;
    padding: 8px 11px !important;
  }

  /* Bubbles area: fixed height, scrollable */
  .voice-conversation-panel .voice-convo-bubbles,
  .voice-conversation-panel .assessment-bubbles {
    height: var(--dm-voice-convo-height-mobile) !important;
    max-height: var(--dm-voice-convo-height-mobile) !important;
    min-height: var(--dm-voice-convo-height-mobile) !important;
    overflow-y: auto !important;
    padding: 10px 12px 8px !important;
    flex: none !important;
  }

  /* Latest-message strip below bubbles */
  .voice-conversation-panel .voice-conversation-body {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* ── BOTTOM SECTION: presence panel (question + mic) ─────────── */
  .voice-presence-panel {
    order: 1 !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 10px !important;
    gap: 8px !important;
    overflow: hidden !important;
    background: var(--dm-surface) !important;
  }

  /* Question card: takes all available space in presence panel */
  .voice-presence-panel .voice-question-card {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 12px 13px !important;
    border: 0px solid var(--dm-hairline) !important;
    border-radius: 14px !important;
    background: var(--dm-surface) !important;
  }

  /* Question meta badges: compact */
  .voice-presence-panel .voice-question-meta {
    flex-shrink: 0 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .voice-presence-panel .question-badge,
  .voice-presence-panel .question-type-badge {
    font-size: 10px !important;
    padding: 3px 9px !important;
    border-radius: 4px !important;
  }

  /* Question text: tighter on mobile */
  .voice-presence-panel .voice-question-text {
    flex-shrink: 0 !important;
    font-size: 13px !important;
    margin-bottom: 10px !important;
    line-height: 1.45 !important;
  }

  /* Options: scrollable flex area */
  .voice-presence-panel .voice-question-options {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    align-content: flex-start !important;
    padding-right: 2px !important;
    gap: 7px !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* Option tags: smaller touch targets but still tappable */
  .voice-presence-panel .voice-question-option-tag {
    font-size: 12px !important;
    padding: 7px 12px !important;
    min-height: 34px !important;
    border-radius: 50px !important;
  }
  .voice-presence-panel .voice-option-text {
    font-size: 12px !important;
  }
  .voice-presence-panel .voice-option-code {
    font-size: 9px !important;
  }

  /* Action buttons row (Back / Continue): compact */
  .voice-presence-panel .voice-question-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }
  .voice-presence-panel .btn-voice-back {
    font-size: 12px !important;
    padding: 7px 14px !important;
  }
  .voice-presence-panel .btn-voice-continue {
    font-size: 12px !important;
    padding: 7px 18px !important;
  }

  /* Speak hint: very small, unobtrusive */
  .voice-presence-panel .voice-speak-hint {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  /* Mic / status row: pinned to bottom of presence panel, no shrink */
  .voice-presence-panel .voice-listen-row {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding: 8px 12px !important;
    border-top: 0px solid var(--dm-hairline) !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .voice-status-text {
    font-size: 12px !important;
  }

  /* dm-conv-logo spacing */
  .dm-conv-logo {
    margin-right: 10px !important;
    flex-shrink: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   DESKTOP  (≥ 769px) — side-by-side, LEFT=conversation RIGHT=questions
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .voice-outer-wrap {
    min-height: clamp(520px, calc(100vh - 100px), 880px) !important;
    height:     clamp(520px, calc(100vh - 100px), 880px) !important;
  }

  /* Two-column grid.
     HTML order: presence-panel first, conversation-panel second.
     We use grid-column to swap them visually. */
  .voice-stage-grid {
    display: grid !important;
    grid-template-columns: 360px 1fr !important;
    /* Use 1fr instead of 100% to avoid “grid collapses then content sits at bottom”
       when parent heights are computed via flex/clamp. */
    grid-template-rows: 1fr !important;
    gap: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  /* Onboarding: the right presence column is mostly empty on desktop
     (avatar card is hidden), so collapse to a single-column layout. */
  #voice-onboarding-stage.voice-stage-grid {
    grid-template-columns: 1fr !important;
  }
  #voice-onboarding-stage .voice-presence-panel {
    display: none !important;
  }
  #voice-onboarding-stage .voice-conversation-panel {
    grid-column: 1 !important;
    border-right: none !important;
  }

  /* ── LEFT column: conversation panel ────────────────────────  */
  .voice-conversation-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    /* Reset all borders then add only the right divider */
    border: none !important;
    border-right: 1px solid var(--dm-hairline) !important;
    border-radius: 0 !important;
    background: var(--dm-ai-bg) !important;
    padding: 0 !important;
    gap: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .voice-conversation-panel .voice-panel-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 16px 12px !important;
    border-bottom: 1px solid var(--dm-hairline) !important;
    flex-shrink: 0 !important;
    background: var(--dm-surface) !important;
  }
  /* Bubbles fill ALL remaining height — content anchors to TOP */
  .voice-conversation-panel .voice-convo-bubbles,
  .voice-conversation-panel .assessment-bubbles {
    flex: 1 1 0 !important;
    height: 0 !important;          /* 0 + flex:1 = fill parent */
    max-height: none !important;
    overflow-y: auto !important;
    padding: 14px 16px 10px !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
  }

  /* ── RIGHT column: presence panel ───────────────────────────  */
  .voice-presence-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 18px 20px 14px !important;
    overflow-y: auto !important;
    background: var(--dm-surface) !important;
    height: 100% !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }
  /* Progress bar at very top of right column */
  .voice-presence-panel .voice-progress-bar-wrap {
    flex-shrink: 0 !important;
    order: -1 !important;
  }
  /* Question card fills available space */
  .voice-presence-panel .voice-question-card {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  /* Status / listen row pinned to bottom */
  .voice-presence-panel .voice-listen-row {
    margin-top: auto !important;
    flex-shrink: 0 !important;
    order: 99 !important;
  }
}
/* ═══ END VOICE LAYOUT ══════════════════════════════════════════ */