* { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      color-scheme: dark;
      --surface: #0f1420; --surface-raised: #171d2b;
      --border: rgba(255,255,255,.12); --text: #f7f8fb; --muted: #a8b2c3;
      --accent: #7c8cff; --success: #49d7a0; --warning: #f8c35c;
      --danger: #ff6b7a; --focus: #8ee8ff;
    }
    .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
    button, select, input, summary { min-height: 44px; }
    :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #0a0a0f;
      color: #e0e0e0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .hidden { display: none !important; }

    .header {
      padding: 2rem 1.5rem 1rem;
      text-align: center;
      width: 100%;
      max-width: 500px;
    }

    h1 { font-size: 1.5rem; font-weight: 600; color: #fff; }
    .subtitle { color: #666; font-size: 0.85rem; margin-top: 0.25rem; }

    .auth-screen {
      min-height: 100vh;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
    }

    .auth-card {
      width: 100%;
      max-width: 420px;
      background: #16161e;
      border: 1px solid #2a2a35;
      border-radius: 20px;
      padding: 2rem;
      text-align: center;
      box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    }

    .auth-card h1 { margin-bottom: 0.5rem; }
    .auth-card .subtitle { margin-bottom: 1.5rem; line-height: 1.5; }
    .auth-error {
      margin-top: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 10px;
      background: #2a0a0a;
      color: #ef4444;
      font-size: 0.85rem;
      display: none;
    }

    .auth-user {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      margin-top: 1rem;
      color: #888;
      font-size: 0.85rem;
    }

    .auth-user img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid #2a2a35;
    }

    .topbar {
      width: 100%;
      max-width: 500px;
      padding: 0 1.5rem;
      margin-top: 0.5rem;
      display: flex;
      justify-content: flex-end;
    }

    .account-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      background: #16161e;
      border: 1px solid #2a2a35;
      border-radius: 999px;
      padding: 0.45rem 0.6rem 0.45rem 0.45rem;
      color: #aaa;
      font-size: 0.78rem;
    }

    .account-pill img {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      object-fit: cover;
    }

    .logout-btn {
      border: 0;
      background: transparent;
      color: #888;
      cursor: pointer;
      font-size: 0.78rem;
    }

    .logout-btn:hover { color: #fff; }

    .agent-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      padding: 1rem 1.5rem;
      width: 100%;
      max-width: 500px;
    }

    .agent-card {
      background: #16161e;
      border: 2px solid #2a2a35;
      border-radius: 16px;
      padding: 1rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.6rem;
      -webkit-tap-highlight-color: transparent;
    }

    .agent-card:hover { border-color: #444; transform: translateY(-2px); }
    .agent-card:active { transform: scale(0.97); }
    .agent-card.selected { border-color: #6366f1; background: #1a1a2e; }

    .agent-avatar {
      width: 72px; height: 72px; border-radius: 50%;
      object-fit: cover; border: 2px solid #2a2a35; transition: border-color 0.2s;
    }

    .agent-avatar-fallback {
      width: 72px; height: 72px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: #1e1e2e; border: 2px solid #2a2a35; font-size: 2rem;
    }

    .agent-card.selected .agent-avatar {
      border-color: #6366f1;
      box-shadow: 0 0 16px rgba(99, 102, 241, 0.3);
    }
    .agent-card.selected .agent-avatar-fallback {
      border-color: #6366f1;
      box-shadow: 0 0 16px rgba(99, 102, 241, 0.3);
    }

    .agent-name { font-size: 0.9rem; font-weight: 600; color: #fff; }
    .agent-tagline { font-size: 0.7rem; color: #888; text-align: center; line-height: 1.3; }

    .call-section {
      padding: 1rem 1.5rem 2rem; width: 100%; max-width: 500px;
      position: sticky; bottom: 0;
      background: linear-gradient(to bottom, transparent, #0a0a0f 18%);
      padding-top: 2rem;
      z-index: 10;
    }

    .btn {
      width: 100%; padding: 0.85rem; border: none; border-radius: 12px;
      font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s;
    }

    .btn-connect { background: #6366f1; color: #fff; }
    .btn-connect:hover { background: #5558e6; }
    .btn-connect:active { transform: scale(0.98); }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }

    .secondary-actions {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem;
    }
    .voice-lock-manage-btn {
      background: transparent; border: 1px solid #333; color: #888;
      font-size: 0.8rem; padding: 0.5rem 1rem; border-radius: 8px;
      cursor: pointer; transition: all 0.2s; width: 100%;
    }
    .voice-lock-manage-btn:hover { border-color: #6366f1; color: #6366f1; }

    .status {
      margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 10px;
      font-size: 0.85rem; text-align: center;
    }

    .status-disconnected { background: #1a1a24; color: #888; }
    .status-connecting { background: #1a1a24; color: #eab308; }
    .status-connected { background: #0a2a15; color: #22c55e; }
    .status-error { background: #2a0a0a; color: #ef4444; }

    /* ── Connection/TTS issue banner ── */
    #connectionBanner {
      display: none; position: fixed; top: 1rem; left: 50%;
      transform: translateX(-50%); z-index: 9999;
      background: #1a1209; border: 1px solid #d97706; color: #fbbf24;
      padding: 0.7rem 1.1rem; border-radius: 12px; font-size: 0.82rem;
      text-align: left; max-width: 320px; width: calc(100% - 2rem);
      box-shadow: 0 4px 24px rgba(0,0,0,0.6); gap: 0.6rem; align-items: center;
    }
    #connectionBanner.visible { display: flex; }
    #connectionBanner.error { border-color: #ef4444; color: #fca5a5; background: #1a0808; }
    .conn-spinner {
      width: 13px; height: 13px; flex-shrink: 0;
      border: 2px solid #d97706; border-top-color: transparent;
      border-radius: 50%; animation: connSpin 0.8s linear infinite;
    }
    #connectionBanner.error .conn-spinner { border-color: #ef4444; }
    @keyframes connSpin { to { transform: rotate(360deg); } }
    .conn-text { flex: 1; line-height: 1.35; }
    #voiceRecoveryBtn {
      flex-shrink: 0; min-height: 36px; padding: 0.45rem 0.75rem;
      border: 1px solid currentColor; border-radius: 8px;
      background: transparent; color: inherit; font: inherit; font-weight: 700;
      cursor: pointer;
    }
    #voiceRecoveryBtn:disabled { opacity: 0.55; cursor: wait; }
    .conn-close {
      cursor: pointer; opacity: 0.55; font-size: 1rem; line-height: 1;
      padding: 0 0.15rem; flex-shrink: 0; border: 0; background: transparent;
      color: inherit;
    }
    .conn-close:hover { opacity: 1; }

    .btn-new-session {
      background: transparent; border: 1px solid #333; color: #888;
      font-size: 0.8rem; padding: 0.5rem 1rem; border-radius: 8px;
      cursor: pointer; margin-top: 0.75rem; transition: all 0.2s; width: 100%;
    }
    .btn-new-session:hover { border-color: #6366f1; color: #6366f1; }

    .session-indicator { font-size: 0.7rem; color: #555; text-align: center; margin-top: 0.5rem; }
    .session-indicator .active { color: #6366f1; }

    .call-active {
      display: none; flex-direction: column; align-items: center;
      justify-content: center; padding: 2rem 1.5rem;
      width: 100%; max-width: 500px; min-height: 100vh;
      position: relative;
    }

    .call-active.visible { display: flex; }

    .call-participants {
      display: flex; align-items: center; justify-content: center;
      gap: 2.5rem; margin-bottom: 1.5rem;
    }

    .participant {
      display: flex; flex-direction: column; align-items: center;
      gap: 0.5rem; position: relative;
    }

    .participant-ring {
      width: 110px; height: 110px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      position: relative; transition: all 0.3s ease;
    }

    .participant-ring.idle { background: transparent; box-shadow: 0 0 0 3px #2a2a35; }

    .participant-ring.speaking {
      box-shadow: 0 0 0 3px #22c55e, 0 0 25px rgba(34, 197, 94, 0.4), 0 0 50px rgba(34, 197, 94, 0.15);
      animation: speakRing 1.5s ease-in-out infinite;
    }

    @keyframes speakRing {
      0%, 100% { box-shadow: 0 0 0 3px #22c55e, 0 0 20px rgba(34, 197, 94, 0.3), 0 0 40px rgba(34, 197, 94, 0.1); }
      50% { box-shadow: 0 0 0 5px #22c55e, 0 0 35px rgba(34, 197, 94, 0.5), 0 0 60px rgba(34, 197, 94, 0.2); }
    }

    .participant-ring.listening {
      box-shadow: 0 0 0 3px #6366f1, 0 0 20px rgba(99, 102, 241, 0.3);
      animation: listenRing 2s ease-in-out infinite;
    }

    @keyframes listenRing {
      0%, 100% { box-shadow: 0 0 0 3px #6366f1, 0 0 15px rgba(99, 102, 241, 0.2); }
      50% { box-shadow: 0 0 0 4px #6366f1, 0 0 25px rgba(99, 102, 241, 0.4); }
    }

    .participant-ring.processing {
      box-shadow: 0 0 0 3px #eab308, 0 0 20px rgba(234, 179, 8, 0.3);
      animation: processingRing 1s ease-in-out infinite;
    }

    @keyframes processingRing {
      0%, 100% { box-shadow: 0 0 0 3px #eab308, 0 0 15px rgba(234, 179, 8, 0.2); }
      50% { box-shadow: 0 0 0 5px #eab308, 0 0 30px rgba(234, 179, 8, 0.5); }
    }

    .agent-avatar-wrap {
      position: relative; width: 100px; height: 100px; border-radius: 50%;
      overflow: hidden; --avatar-pulse: 0; --talk-bob: 0;
      transform:
        translateY(calc(var(--talk-bob) * -3px))
        scale(calc(1 + var(--avatar-pulse) * 0.06));
      transform-origin: center center;
      transition: transform 0.08s linear, filter 0.12s linear;
    }
    .call-avatar-fallback {
      width: 100%; height: 100%; display: flex; align-items: center;
      justify-content: center; background: #1e1e2e; font-size: 2.5rem;
    }
    .participant-img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; display: block; }
    .participant-ring.speaking .agent-avatar-wrap {
      filter:
        drop-shadow(0 0 calc(8px + var(--avatar-pulse) * 18px)
                    rgba(34, 197, 94, calc(0.25 + var(--avatar-pulse) * 0.5)))
        brightness(calc(1 + var(--avatar-pulse) * 0.08));
    }

    .user-icon {
      width: 100px; height: 100px; border-radius: 50%;
      background: #1e1e2e; display: flex; align-items: center;
      justify-content: center; font-size: 2.5rem; position: relative;
      overflow: hidden;
    }
    .user-icon video {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      object-fit: cover; transform: scaleX(-1); border-radius: 50%;
    }
    .user-icon .mic-emoji { z-index: 1; }

    .participant-label {
      font-size: 0.8rem; font-weight: 600; color: #888; transition: color 0.3s;
    }

    .transcript-panel {
      width: 100%; max-width: 420px; margin: 12px auto 0;
      max-height: 320px; overflow-y: auto;
      padding: 10px 14px;
      background: rgba(14, 14, 22, 0.85);
      border-radius: 14px;
      border: 1px solid rgba(99, 102, 241, 0.25);
      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(10px);
      scrollbar-width: thin;
      scrollbar-color: rgba(99,102,241,0.3) transparent;
      cursor: grab;
      user-select: none;
      transition: box-shadow 0.2s;
    }
    .transcript-panel:active { cursor: grabbing; }
    .transcript-panel.longpress-active {
      box-shadow: 0 0 0 3px rgba(99,102,241,0.6), 0 4px 32px rgba(0,0,0,0.6);
    }

    /* Fullscreen overlay */
    .transcript-panel.fullscreen {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      width: 100vw; max-width: 100vw;
      height: 100dvh; max-height: 100dvh;
      margin: 0;
      border-radius: 0;
      border: none;
      z-index: 9999;
      padding: 56px 20px 80px;
      background: rgba(10, 10, 18, 0.97);
      backdrop-filter: blur(20px);
      box-shadow: none;
      cursor: default;
      transition: none;
      display: flex;
      flex-direction: column;
      overscroll-behavior: contain; /* prevent pull-to-refresh */
      touch-action: pan-y;
    }
    .transcript-panel.fullscreen .transcript-log {
      flex: 1;
      overflow-y: auto;
      overscroll-behavior: contain; /* prevent PTR bubbling through inner scroll */
    }
    .transcript-panel.fullscreen .transcript-entry {
      font-size: 1rem;
      padding: 10px 0 10px 14px;
    }

    /* Drag-to-dismiss indicator — acts as the swipe-down header target */
    .transcript-drag-handle {
      display: none;
      width: 100%; /* full-width touch target */
      padding: 14px 0 10px; /* generous vertical hit area */
      cursor: grab;
      touch-action: none; /* let JS handle this element's touch events */
    }
    .transcript-drag-handle::after {
      content: '';
      display: block;
      width: 40px; height: 5px;
      background: rgba(255,255,255,0.25);
      border-radius: 3px;
      margin: 0 auto;
    }
    .transcript-panel.fullscreen .transcript-drag-handle { display: block; }

    /* Fullscreen close button */
    .transcript-fs-close {
      display: none;
      position: absolute;
      top: 14px; right: 14px;
      width: 34px; height: 34px;
      border-radius: 50%;
      border: none;
      background: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.65);
      font-size: 1rem;
      cursor: pointer;
      z-index: 10001;
      line-height: 34px;
      text-align: center;
      padding: 0;
      flex-shrink: 0;
    }
    .transcript-fs-close:active { background: rgba(255,255,255,0.22); }
    .transcript-panel.fullscreen .transcript-fs-close { display: block; }

    /* Close hint at bottom */
    .transcript-close-hint {
      display: none;
      text-align: center;
      font-size: 0.78rem;
      color: rgba(255,255,255,0.35);
      position: absolute;
      bottom: 20px;
      left: 0; right: 0;
    }
    .transcript-panel.fullscreen .transcript-close-hint { display: block; }

    .transcript-entry {
      margin-bottom: 0;
      padding: 7px 0 7px 10px;
      border-left: 3px solid transparent;
      line-height: 1.5; font-size: 0.9rem;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .transcript-entry:last-child { border-bottom: none; }
    .transcript-entry.speaker-user { border-left-color: #6366f1; }
    .transcript-entry.speaker-agent { border-left-color: #22c55e; }

    .transcript-entry .speaker { font-weight: 700; margin-right: 6px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .transcript-entry .speaker.user { color: #818cf8; }
    .transcript-entry .speaker.agent { color: #4ade80; }
    .transcript-entry .text { color: #d1d5db; }
    .transcript-entry .text.interim { color: #6b7280; font-style: italic; }
    .transcript-entry .attachment-thumb {
      display: block; margin-top: 6px; max-width: 220px; max-height: 220px;
      border-radius: 8px; border: 1px solid rgba(99, 102, 241, 0.35);
      cursor: zoom-in; background: #111;
    }
    .transcript-entry .attachment-meta {
      color: #888; font-size: 0.75rem; margin-top: 2px;
    }
    .participant-label.speaking { color: #22c55e; }
    .participant-label.listening { color: #6366f1; }
    .participant-label.processing { color: #eab308; }

    .speaking-status {
      font-size: 0.85rem; color: #888; text-align: center;
      min-height: 1.5rem; margin-bottom: 0.5rem; transition: color 0.3s;
    }
    .speaking-status.user-talking { color: #22c55e; }
    .speaking-status.agent-talking { color: #22c55e; }
    .speaking-status.processing { color: #eab308; }

    .processing-dots::after {
      content: '';
      animation: dots 1.5s steps(4, end) infinite;
    }
    @keyframes dots {
      0% { content: ''; }
      25% { content: '.'; }
      50% { content: '..'; }
      75% { content: '...'; }
    }

    .waveform {
      display: flex; justify-content: center; align-items: center;
      gap: 3px; height: 48px; margin-bottom: 1.5rem;
    }

    .wave-bar {
      width: 4px; border-radius: 2px; background: #2a2a35;
      height: 8px; transition: height 0.15s ease, background 0.3s;
    }

    .waveform.user-active .wave-bar { background: #22c55e; }
    .waveform.agent-active .wave-bar { background: #6366f1; }
    .waveform.processing .wave-bar { background: #eab308; }

    .waveform.user-active .wave-bar,
    .waveform.agent-active .wave-bar {
      animation: waveAnim 0.8s ease-in-out infinite;
    }

    .waveform.processing .wave-bar {
      animation: processWave 1.2s ease-in-out infinite;
    }

    .waveform .wave-bar:nth-child(1) { animation-delay: 0s; }
    .waveform .wave-bar:nth-child(2) { animation-delay: 0.1s; }
    .waveform .wave-bar:nth-child(3) { animation-delay: 0.2s; }
    .waveform .wave-bar:nth-child(4) { animation-delay: 0.3s; }
    .waveform .wave-bar:nth-child(5) { animation-delay: 0.4s; }
    .waveform .wave-bar:nth-child(6) { animation-delay: 0.5s; }
    .waveform .wave-bar:nth-child(7) { animation-delay: 0.6s; }

    @keyframes waveAnim {
      0%, 100% { height: 8px; }
      50% { height: 40px; }
    }

    @keyframes processWave {
      0%, 100% { height: 6px; }
      50% { height: 20px; }
    }

    .call-timer {
      font-size: 0.75rem; color: #555; margin-bottom: 1.5rem;
      font-variant-numeric: tabular-nums;
    }

    .call-actions {
      display: flex; align-items: center; justify-content: center;
      gap: 2rem; margin-bottom: 1rem;
    }

    .camera-select-wrap {
      display: none; align-items: center; gap: 0.65rem; margin-bottom: 1rem;
      padding: 0.55rem 0.85rem; border: 1px solid #2a2a35; border-radius: 999px;
      background: rgba(20, 20, 30, 0.88);
      backdrop-filter: blur(12px);
    }
    .camera-select-wrap.visible { display: flex; }

    .camera-select-label {
      font-size: 0.72rem; font-weight: 600; color: #888; letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .camera-select {
      min-width: 180px; max-width: 230px; padding: 0.45rem 1.85rem 0.45rem 0.75rem;
      border-radius: 999px; border: 1px solid #333; background: #101018; color: #fff;
      font-size: 0.82rem; appearance: none;
      background-image:
        linear-gradient(45deg, transparent 50%, #777 50%),
        linear-gradient(135deg, #777 50%, transparent 50%);
      background-position:
        calc(100% - 15px) calc(50% - 3px),
        calc(100% - 9px) calc(50% - 3px);
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
    }
    .camera-select:disabled { opacity: 0.55; cursor: not-allowed; }

    .connection-select-wrap {
      display: flex; align-items: center; justify-content: center; gap: 0.65rem;
      margin: 0.75rem auto 0; padding: 0.5rem 0.85rem;
      border: 1px solid #2a2a35; border-radius: 999px;
      background: rgba(20, 20, 30, 0.6);
      max-width: 360px;
    }
    .connection-select-label {
      font-size: 0.7rem; font-weight: 600; color: #888; letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .connection-select {
      min-width: 170px; padding: 0.4rem 1.85rem 0.4rem 0.7rem;
      border-radius: 999px; border: 1px solid #333; background: #101018; color: #fff;
      font-size: 0.8rem; appearance: none;
      background-image:
        linear-gradient(45deg, transparent 50%, #777 50%),
        linear-gradient(135deg, #777 50%, transparent 50%);
      background-position:
        calc(100% - 15px) calc(50% - 3px),
        calc(100% - 9px) calc(50% - 3px);
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
    }

    .btn-end-call {
      width: 64px; height: 64px; border-radius: 50%;
      background: #dc2626; border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s;
    }
    .btn-end-call:hover { background: #b91c1c; transform: scale(1.05); }
    .btn-end-call:active { transform: scale(0.95); }
    .btn-end-call svg { width: 28px; height: 28px; fill: #fff; }

    .btn-new-call {
      width: 64px; height: 64px; border-radius: 50%;
      background: #1e1e2e; border: 2px solid #333; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s; font-size: 1.5rem;
    }
    .btn-new-call:hover { border-color: #6366f1; background: #1a1a2e; transform: scale(1.05); }
    .btn-new-call:active { transform: scale(0.95); }

    .btn-mute {
      width: 64px; height: 64px; border-radius: 50%;
      background: #1e1e2e; border: 2px solid #333; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s; font-size: 1.5rem;
    }
    .btn-mute:hover { border-color: #6366f1; background: #1a1a2e; transform: scale(1.05); }
    .btn-mute:active { transform: scale(0.95); }
    .btn-mute.muted { background: #dc2626; border-color: #dc2626; }
    .btn-mute.muted:hover { background: #b91c1c; border-color: #b91c1c; }

    .btn-vision {
      width: 64px; height: 64px; border-radius: 50%;
      background: #1e1e2e; border: 2px solid #333; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s; font-size: 1.5rem;
    }
    .btn-vision:hover { border-color: #6366f1; background: #1a1a2e; transform: scale(1.05); }
    .btn-vision:active { transform: scale(0.95); }
    .btn-vision.active { background: #16a34a; border-color: #16a34a; }
    .btn-vision.active:hover { background: #15803d; border-color: #15803d; }
    .btn-vision:disabled { opacity: 0.35; cursor: not-allowed; }
    .btn-vision:disabled:hover { transform: none; border-color: #333; background: #1e1e2e; }

    .btn-attach {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid #333;
        background: #1e1e2e;
        color: #ccc;
        font-size: 1.3rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }
    .btn-attach:hover { border-color: #6366f1; background: #1a1a2e; transform: scale(1.05); }
    .btn-attach:active { transform: scale(0.95); }
    .btn-attach.uploading { opacity: 0.6; cursor: not-allowed; }

    .vision-preview {
      position: absolute; top: 10px; right: 10px; width: 120px; height: 90px;
      border-radius: 10px; border: 2px solid #333; overflow: hidden;
      background: #000; z-index: 10; display: none;
    }
    .vision-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

    .call-action-label {
      font-size: 0.65rem; color: #555; text-align: center; margin-top: 0.3rem;
    }

    .call-action-wrap {
      display: flex; flex-direction: column; align-items: center;
    }

    .audio-enable-btn {
      margin-top: 1rem; padding: 0.5rem 1.5rem;
      background: #6366f1; color: #fff; border: none;
      border-radius: 8px; font-size: 0.85rem; cursor: pointer; display: none;
    }

    .hint {
      margin-top: 0.5rem; font-size: 0.75rem; color: #666;
      text-align: center; display: none;
    }
    .hint.visible { display: block; }

    .chat-toggle {
      position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
      width: 56px; height: 56px; border-radius: 50%; border: 1px solid #2a2a35;
      background: rgba(22, 22, 30, 0.95); color: #fff; font-size: 1.4rem;
      cursor: pointer; display: none; align-items: center; justify-content: center;
      box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    }

    .chat-toggle.visible { display: flex; }

    .chat-panel {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
      max-height: 70vh; background: rgba(10, 10, 15, 0.98);
      border-top: 1px solid #2a2a35; transform: translateY(100%);
      transition: transform 0.22s ease; display: flex; flex-direction: column;
      backdrop-filter: blur(14px); visibility: hidden; pointer-events: none;
      overflow: hidden; min-height: 0;
    }

    .chat-panel.open { transform: translateY(0); visibility: visible; pointer-events: auto; }

    .chat-panel-header {
      padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid #1f1f29; color: #aaa; font-size: 0.85rem;
    }

    .chat-close {
      background: transparent; border: 0; color: #777; font-size: 1.1rem; cursor: pointer;
    }

    .chat-log {
      flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.85rem 1rem;
      display: flex; flex-direction: column; gap: 0.65rem;
      overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }

    .chat-log .attachment-thumb {
      width: auto; height: auto; max-width: min(260px, 100%); max-height: min(180px, 45vh);
      object-fit: contain;
    }

    .chat-row { display: flex; }
    .chat-row.user { justify-content: flex-end; }

    .chat-bubble {
      max-width: min(82vw, 520px); padding: 0.7rem 0.85rem; border-radius: 14px;
      background: #171720; color: #f3f3f3; font-size: 0.84rem; line-height: 1.45;
      border: 1px solid #232330; white-space: pre-wrap;
    }

    .chat-row.user .chat-bubble {
      background: #23253a; border-color: #36395a;
    }

    .chat-meta { font-size: 0.7rem; color: #666; margin-bottom: 0.3rem; }

    .chat-buttons {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 0.5rem; margin-top: 0.65rem;
    }

    .chat-chip {
      border: 1px solid #313149; background: #12121a; color: #ddd; border-radius: 10px;
      padding: 0.55rem 0.7rem; font-size: 0.77rem; cursor: pointer; text-align: left;
    }

    .chat-chip small { display: block; color: #7a7a90; margin-top: 0.2rem; }
    .chat-chip--active { border-color: #5c5cff; background: #1a1a33; color: #a0a0ff; font-weight: 700; }
    .chat-chip--active .chip-check { color: #7c7cff; margin-right: 0.3rem; font-weight: 700; }

    .chat-commands-wrap {
      border-top: 1px solid #1f1f29; padding: 0.5rem 0.75rem 0.75rem;
      flex-shrink: 0;
    }

    .chat-command-grid {
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.4rem;
    }

    .chat-command-btn {
      min-height: 40px; border-radius: 10px; border: 1px solid #313149;
      background: #12121a; color: #f3f3f7; padding: 0.45rem 0.3rem;
      font-size: 0.72rem; font-weight: 600; cursor: pointer;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
      transition: border-color 0.2s, background 0.2s, transform 0.2s;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-command-btn .cmd-emoji { font-size: 1.1rem; }
    .chat-command-btn .cmd-label { font-size: 0.65rem; line-height: 1.1; }
    .chat-command-btn .cmd-model-name {
      font-size: 0.55rem; color: #7c7cff; line-height: 1.1; max-width: 68px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
    }
    .chat-command-btn .cmd-model-name:empty { display: none; }

    .chat-command-btn:hover { border-color: #4a4a68; background: #171722; }
    .chat-command-btn:active { transform: scale(0.98); }

    .image-viewer {
      position: fixed; inset: 0; z-index: 10020;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 0.75rem; padding: max(56px, env(safe-area-inset-top)) 1rem max(28px, env(safe-area-inset-bottom));
      background: rgba(4, 6, 10, 0.96); overflow: auto; overscroll-behavior: contain;
    }
    .image-viewer[hidden] { display: none; }
    .image-viewer-image {
      display: block; max-width: 100%; max-height: calc(100dvh - 120px);
      width: auto; height: auto; object-fit: contain; border-radius: 10px;
    }
    .image-viewer-caption { color: #d1d5db; font-size: 0.85rem; text-align: center; max-width: 48rem; }
    .image-viewer-caption:empty { display: none; }
    .image-viewer-close {
      position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 10021;
      width: 42px; height: 42px; border: 1px solid rgba(255,255,255,0.22); border-radius: 50%;
      background: rgba(17,24,39,0.9); color: #fff; font-size: 1.1rem; cursor: pointer;
    }

    /* Session History Panel */
    .history-btn {
      background: transparent; border: 1px solid #333; color: #888;
      font-size: 0.8rem; padding: 0.5rem 1rem; border-radius: 8px;
      cursor: pointer; margin-top: 0.5rem; transition: all 0.2s; width: 100%;
    }
    .history-btn:hover { border-color: #6366f1; color: #6366f1; }
    .secondary-actions .history-btn, .secondary-actions .voice-lock-manage-btn { margin-top: 0; }

    .history-overlay {
      position: fixed; inset: 0; z-index: 50;
      background: rgba(10, 10, 15, 0.97);
      display: flex; flex-direction: column;
      transform: translateY(100%); transition: transform 0.25s ease;
      visibility: hidden; pointer-events: none;
    }
    .history-overlay.open { transform: translateY(0); visibility: visible; pointer-events: auto; }

    .history-header {
      padding: 1rem 1.5rem; display: flex; align-items: center;
      justify-content: space-between; border-bottom: 1px solid #1f1f29;
    }
    .history-header h2 { font-size: 1rem; color: #fff; font-weight: 600; }
    .history-close {
      background: transparent; border: 0; color: #777; font-size: 1.3rem;
      cursor: pointer; padding: 0.25rem;
    }

    .history-filters {
      display: flex; gap: 0.5rem; padding: 0.75rem 1rem 0.35rem;
      overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
      scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .history-filters::-webkit-scrollbar { display: none; }

    .history-filter-pill {
      appearance: none; border: 1px solid #2d2a42; background: #1e1b2e; color: #a78bfa;
      border-radius: 999px; padding: 0.45rem 0.8rem; font-size: 0.78rem; font-weight: 600;
      line-height: 1; white-space: nowrap; cursor: pointer; flex: 0 0 auto;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }
    .history-filter-pill:hover {
      border-color: #4c4a77; background: #26223b; color: #c4b5fd;
    }
    .history-filter-pill.active {
      background: #6366f1; border-color: #6366f1; color: #fff;
      box-shadow: 0 8px 20px rgba(99, 102, 241, 0.22);
    }
    .history-filter-pill:active { transform: scale(0.98); }

    .history-list {
      flex: 1; overflow-y: auto; padding: 0.75rem 1rem 1rem;
      display: flex; flex-direction: column; gap: 0.65rem;
    }

    .history-empty {
      text-align: center; color: #555; padding: 3rem 1rem;
      font-size: 0.9rem;
    }

    .history-card {
      appearance: none; width: 100%; color: inherit; text-align: left; font: inherit;
      background: linear-gradient(180deg, #181625 0%, #151320 100%);
      border: 1px solid #2a2740; border-radius: 14px;
      padding: 0.95rem 1rem; cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    }
    .history-card:hover { border-color: #3c3860; background: #1a1730; }
    .history-card:active { transform: scale(0.985); }

    .history-card-top {
      display: flex; justify-content: space-between; align-items: center;
      gap: 0.75rem; margin-bottom: 0.45rem;
    }
    .history-card-date { font-size: 0.78rem; color: #c4b5fd; font-weight: 500; }
    .history-card-duration { font-size: 0.72rem; color: #7c7a92; flex: 0 0 auto; }
    .history-card-agent {
      display: inline-flex; align-items: center; gap: 0.35rem;
      font-size: 0.72rem; color: #a78bfa; font-weight: 600; margin-bottom: 0.45rem;
    }
    .history-card-emoji { font-size: 0.8rem; line-height: 1; }
    .history-card-summary {
      font-size: 0.8rem; color: #d4d4dd; line-height: 1.45;
      display: -webkit-box; -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; overflow: hidden;
    }
    .history-card-msgs { font-size: 0.68rem; color: #7c7a92; margin-top: 0.35rem; }

    /* Session Detail View */
    .history-detail {
      display: none; flex-direction: column; flex: 1; overflow: hidden;
    }
    .history-detail.visible { display: flex; }
    .history-detail-header {
      padding: 0.75rem 1rem; border-bottom: 1px solid #1f1f29;
      display: flex; align-items: center; gap: 0.75rem;
    }
    .history-back {
      background: transparent; border: 0; color: #888; font-size: 1rem;
      cursor: pointer; padding: 0.25rem;
    }
    .history-back:hover { color: #fff; }
    .history-detail-meta { font-size: 0.78rem; color: #aaa; }

    .history-transcript {
      flex: 1; overflow-y: auto; padding: 0.85rem 1rem;
      display: flex; flex-direction: column; gap: 0.5rem;
    }

    /* Voice Lock */
    .voice-lock-overlay {
      position: fixed; inset: 0; z-index: 55;
      background: rgba(10, 10, 15, 0.98);
      display: flex; flex-direction: column;
      transform: translateY(100%); transition: transform 0.25s ease;
      visibility: hidden; pointer-events: none;
    }
    .voice-lock-overlay.open { transform: translateY(0); visibility: visible; pointer-events: auto; }
    .voice-lock-header {
      padding: 1rem 1.5rem; display: flex; align-items: center;
      justify-content: space-between; border-bottom: 1px solid #1f1f29;
      flex-shrink: 0;
    }
    .voice-lock-header h2 { font-size: 1rem; color: #fff; font-weight: 600; }
    .voice-lock-close {
      background: transparent; border: 0; color: #777; font-size: 1.3rem;
      cursor: pointer; padding: 0.25rem;
    }
    .voice-lock-close:hover { color: #fff; }
    .voice-lock-content {
      width: 100%; max-width: 500px; margin: 0 auto;
      padding: 1.25rem 1.5rem 2rem; overflow-y: auto;
      display: flex; flex-direction: column; gap: 1rem;
    }
    .voice-lock-hero {
      background: linear-gradient(180deg, #181625 0%, #14131d 100%);
      border: 1px solid #2a2740; border-radius: 16px;
      padding: 1.15rem; box-shadow: 0 18px 45px rgba(0,0,0,0.24);
    }
    .voice-lock-kicker {
      color: #a5b4fc; font-size: 0.72rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.45rem;
    }
    .voice-lock-hero h3 { color: #fff; font-size: 1.25rem; line-height: 1.2; margin-bottom: 0.6rem; }
    .voice-lock-copy { color: #b8b8c5; font-size: 0.86rem; line-height: 1.55; }
    .voice-lock-status-grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem;
    }
    .voice-lock-status-card {
      background: #15151e; border: 1px solid #272738; border-radius: 14px;
      padding: 0.85rem;
    }
    .voice-lock-status-label {
      color: #777993; font-size: 0.68rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.35rem;
    }
    .voice-lock-status-value { color: #f4f4f7; font-size: 0.88rem; line-height: 1.35; }
    .voice-lock-status-value.good { color: #86efac; }
    .voice-lock-status-value.warn { color: #fde68a; }
    .voice-lock-section {
      background: #111119; border: 1px solid #242432; border-radius: 14px;
      padding: 1rem;
    }
    .voice-lock-section h4 {
      color: #fff; font-size: 0.92rem; font-weight: 650; margin-bottom: 0.55rem;
    }
    .voice-lock-steps {
      list-style: none; display: flex; flex-direction: column; gap: 0.55rem;
      color: #b8b8c5; font-size: 0.84rem; line-height: 1.45;
    }
    .voice-lock-steps li {
      display: grid; grid-template-columns: 1.45rem 1fr; gap: 0.55rem; align-items: start;
    }
    .voice-lock-step-num {
      width: 1.45rem; height: 1.45rem; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      background: #23234a; color: #c7d2fe; font-size: 0.72rem; font-weight: 700;
    }
    .voice-lock-actions { display: flex; flex-direction: column; gap: 0.65rem; }

    .voice-lock-read-card {
      margin-top: 0.85rem; border: 1px solid #37375a; border-radius: 14px;
      background: linear-gradient(180deg, #1b1b2d 0%, #141422 100%);
      padding: 0.95rem;
    }
    .voice-lock-read-label {
      color: #a5b4fc; font-size: 0.68rem; font-weight: 800;
      text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.45rem;
    }
    .voice-lock-read-text { color: #fff; font-size: 1rem; line-height: 1.55; font-weight: 600; }
    .voice-lock-read-hint { margin-top: 0.55rem; color: #85859a; font-size: 0.76rem; line-height: 1.4; }
    .voice-lock-primary-danger { background: #991b1b; color: #fff; }
    .voice-lock-primary-danger:hover { background: #b91c1c; }
    .voice-lock-delete-action {
      display: none; background: transparent; border: 1px solid #4b1d24; color: #fca5a5;
      font-size: 0.82rem; padding: 0.65rem 1rem; border-radius: 10px; cursor: pointer;
      transition: all 0.2s; width: 100%;
    }
    .voice-lock-delete-action.visible { display: block; }
    .voice-lock-delete-action:hover { border-color: #ef4444; color: #fff; background: rgba(127, 29, 29, 0.25); }
    .voice-lock-progress {
      display: none; width: 100%; height: 0.55rem; overflow: hidden;
      border-radius: 999px; background: #23233a; border: 1px solid #343456;
    }
    .voice-lock-progress.visible { display: block; }
    .voice-lock-progress-bar {
      width: 0%; height: 100%; border-radius: 999px;
      background: linear-gradient(90deg, #6366f1, #22c55e);
      transition: width 360ms ease;
    }
    .voice-lock-message {
      min-height: 1.2rem; color: #9ca3af; font-size: 0.82rem; line-height: 1.45;
      text-align: center;
    }
    .voice-lock-message.good { color: #86efac; font-weight: 700; }
    .voice-lock-home-delete { display: none; }
    .voice-lock-home-delete.visible { display: block; }

    @media (max-width: 420px) {
      .voice-lock-status-grid { grid-template-columns: 1fr; }
      .voice-lock-content { padding-left: 1rem; padding-right: 1rem; }
    }

    .ht-msg { max-width: 85%; padding: 0.6rem 0.8rem; border-radius: 12px; font-size: 0.82rem; line-height: 1.4; }
    .ht-msg.user { align-self: flex-end; background: #23253a; color: #e0e0e0; border: 1px solid #36395a; }
    .ht-msg.assistant { align-self: flex-start; background: #171720; color: #ccc; border: 1px solid #232330; }
    .ht-msg.tool {
      align-self: flex-start; background: #0f1a0f; color: #6b9; border: 1px solid #1a2e1a;
      font-size: 0.75rem; font-family: monospace;
    }
    .ht-msg .ht-time { font-size: 0.65rem; color: #555; margin-bottom: 0.2rem; }

    @media (max-width: 600px) {
      .chat-command-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .chat-bubble { max-width: 88vw; }
    }

    /* ── Responsive cockpit system ──────────────────────────────────────── */
    :root {
      --cockpit-bg: #080b0f;
      --cockpit-panel: #10161d;
      --cockpit-panel-soft: #141c24;
      --cockpit-line: rgba(157, 184, 204, 0.18);
      --cockpit-text: #f3f6f8;
      --cockpit-muted: #8c9aa7;
      --cockpit-cyan: #5ee7e7;
      --cockpit-cyan-deep: #12373c;
      --cockpit-amber: #ffb454;
      --cockpit-danger: #ff5c5c;
      --cockpit-radius: 22px;
    }

    html { background: var(--cockpit-bg); }

    body {
      min-height: 100dvh;
      color: var(--cockpit-text);
      background:
        radial-gradient(circle at 14% 12%, rgba(94, 231, 231, 0.08), transparent 30%),
        radial-gradient(circle at 88% 88%, rgba(255, 180, 84, 0.08), transparent 28%),
        linear-gradient(135deg, #070a0e 0%, #0a1016 48%, #080b0f 100%);
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.22;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: linear-gradient(to bottom, black, transparent 86%);
    }

    #app-shell { width: 100%; position: relative; z-index: 1; }

    .screen-kicker {
      color: var(--cockpit-cyan);
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: 0.45rem;
    }

    .header {
      max-width: 760px;
      padding: 1.1rem 1rem 0.7rem;
    }

    .header h1 {
      font-size: clamp(1.75rem, 7vw, 2.45rem);
      font-weight: 720;
      letter-spacing: -0.045em;
      line-height: 1;
    }

    .header .subtitle {
      color: var(--cockpit-muted);
      font-size: 0.86rem;
      line-height: 1.4;
      margin-top: 0.55rem;
    }

    .topbar {
      max-width: none;
      padding: 0.8rem 1rem 0;
      margin: 0;
    }

    .account-pill {
      background: rgba(16, 22, 29, 0.92);
      border-color: var(--cockpit-line);
      min-height: 42px;
    }

    .auth-screen {
      min-height: 100dvh;
      padding: 1rem;
      position: relative;
      z-index: 1;
    }

    .auth-card {
      max-width: 480px;
      padding: 2rem;
      text-align: left;
      border-radius: 26px;
      border: 1px solid var(--cockpit-line);
      background: linear-gradient(155deg, rgba(20, 28, 36, 0.97), rgba(10, 15, 21, 0.98));
      box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255,255,255,0.035);
    }

    .auth-card::before {
      content: 'SECURE VOICE LINK';
      display: block;
      color: var(--cockpit-cyan);
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      margin-bottom: 1rem;
    }

    .auth-card h1 { font-size: 1.85rem; letter-spacing: -0.04em; }
    .auth-card .subtitle { color: var(--cockpit-muted); }
    #google-signin-slot { min-height: 44px; display: flex; align-items: center; }

    .agent-grid {
      max-width: 760px;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
    }

    .agent-card {
      min-width: 0;
      min-height: 158px;
      position: relative;
      justify-content: center;
      gap: 0.42rem;
      padding: 0.85rem 0.65rem;
      overflow: hidden;
      border: 1px solid var(--cockpit-line);
      border-radius: 18px;
      background: linear-gradient(150deg, rgba(21, 29, 38, 0.96), rgba(12, 17, 23, 0.96));
      box-shadow: inset 0 1px rgba(255,255,255,0.025);
    }

    .agent-card:hover { border-color: rgba(94, 231, 231, 0.45); }

    .agent-card.selected {
      border-color: var(--cockpit-cyan);
      background: linear-gradient(145deg, rgba(18, 55, 60, 0.92), rgba(12, 24, 30, 0.96));
      box-shadow: 0 0 0 1px rgba(94, 231, 231, 0.16), 0 16px 44px rgba(0,0,0,0.24);
    }

    .agent-card.selected::after {
      content: 'READY';
      position: absolute;
      right: 0.55rem;
      bottom: 0.5rem;
      color: var(--cockpit-cyan);
      font-size: 0.55rem;
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    .agent-avatar, .agent-avatar-fallback {
      width: 66px;
      height: 66px;
      border-color: var(--cockpit-line);
    }
    .agent-avatar-fallback[hidden], .call-avatar-fallback[hidden] { display: none !important; }

    .agent-language {
      position: absolute;
      top: 0.55rem;
      right: 0.55rem;
      color: #a9b6c0;
      font-size: 0.55rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      border: 1px solid var(--cockpit-line);
      border-radius: 999px;
      padding: 0.2rem 0.35rem;
    }

    .agent-name { font-size: 0.9rem; }
    .agent-tagline { color: var(--cockpit-muted); }

    .call-section {
      position: static;
      max-width: 760px;
      margin: 0 auto;
      padding: 0.75rem 1rem 1.25rem;
      background: none;
    }

    .call-section-intro {
      display: none;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--cockpit-line);
      margin-bottom: 1rem;
    }

    .call-section-intro h2,
    .call-control-heading h2 {
      font-size: 1.35rem;
      line-height: 1.1;
      letter-spacing: -0.035em;
    }

    .call-section-intro p {
      color: var(--cockpit-muted);
      font-size: 0.78rem;
      line-height: 1.5;
      margin-top: 0.45rem;
    }

    .connection-select-wrap {
      max-width: none;
      width: 100%;
      margin: 0 0 0.75rem;
      justify-content: space-between;
      border-color: var(--cockpit-line);
      background: var(--cockpit-panel-soft);
    }

    .connection-select { min-width: 0; max-width: 68%; }

    .btn-connect {
      min-height: 54px;
      border-radius: 15px;
      color: #041012;
      font-weight: 800;
      background: linear-gradient(135deg, #75f2eb, #40bfc8);
      box-shadow: 0 12px 30px rgba(64, 191, 200, 0.18);
    }

    .btn-connect:hover { background: linear-gradient(135deg, #8bf8f2, #55cdd4); }
    .status { border: 1px solid transparent; }
    .status-disconnected { background: rgba(140, 154, 167, 0.08); color: #9ba9b4; border-color: var(--cockpit-line); }
    .status-connecting { background: rgba(255, 180, 84, 0.09); color: #ffc477; border-color: rgba(255, 180, 84, 0.2); }
    .status-connected { background: rgba(94, 231, 167, 0.08); color: #76e8b4; border-color: rgba(94, 231, 167, 0.22); }

    .call-active {
      width: 100%;
      max-width: none;
      min-height: 100dvh;
      padding: 1rem;
      justify-content: flex-start;
      gap: 0.85rem;
    }

    .call-active.visible { display: flex; }

    .call-visual-panel,
    .call-control-rail {
      width: 100%;
      border: 1px solid var(--cockpit-line);
      border-radius: var(--cockpit-radius);
      background: linear-gradient(150deg, rgba(18, 25, 33, 0.98), rgba(10, 15, 21, 0.98));
      box-shadow: inset 0 1px rgba(255,255,255,0.025);
    }

    .call-visual-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1rem;
    }

    .call-participants { margin: 0.35rem 0 0.8rem; gap: 2rem; }
    .speaking-status { color: #b8c3cc; margin: 0; }
    .waveform { height: 34px; margin: 0.15rem 0; }
    .call-timer { color: var(--cockpit-cyan); margin: 0; font-size: 0.75rem; }

    .transcript-panel {
      width: 100%;
      max-width: none;
      min-height: 220px;
      max-height: 42vh;
      margin: 0;
      padding: 0;
      border-color: var(--cockpit-line);
      border-radius: var(--cockpit-radius);
      background: rgba(10, 15, 21, 0.92);
      display: flex;
      flex-direction: column;
      user-select: text;
    }

    .transcript-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex: 0 0 auto;
      padding: 0.85rem 1rem;
      border-bottom: 1px solid var(--cockpit-line);
      color: var(--cockpit-text);
      font-size: 0.82rem;
      font-weight: 750;
      letter-spacing: 0.02em;
    }

    .transcript-heading small { color: var(--cockpit-muted); font-size: 0.65rem; font-weight: 500; }
    .transcript-log { flex: 1; overflow-y: auto; padding: 0.75rem 0.9rem; }
    .transcript-log:empty::before {
      content: 'Your conversation will appear here.';
      color: #5f6c77;
      font-size: 0.82rem;
    }

    .transcript-panel.fullscreen .transcript-heading { margin: -42px 42px 12px 0; border: 0; }
    .transcript-panel.fullscreen .transcript-log { padding: 0; }

    .vision-preview {
      position: static;
      width: 100%;
      height: 150px;
      margin-top: 0.85rem;
      border-radius: 16px;
      border-color: var(--cockpit-line);
    }

    .call-control-rail { padding: 1rem; }
    .call-control-heading { display: none; }

    .call-actions {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0.55rem;
      margin: 0;
    }

    .call-action-wrap { min-width: 0; }
    .call-action-label { color: #7f8d99; font-size: 0.58rem; white-space: nowrap; }

    .btn-mute,
    .btn-end-call,
    .btn-vision,
    .btn-new-call,
    .btn-attach {
      width: 52px;
      height: 52px;
      border-width: 1px;
      border-color: var(--cockpit-line);
      background: var(--cockpit-panel-soft);
      font-size: 1.2rem;
    }

    .btn-end-call { background: #cb3f44; }
    .btn-end-call svg { width: 23px; height: 23px; }
    .camera-select-wrap { margin: 0.9rem 0 0; width: 100%; justify-content: space-between; border-color: var(--cockpit-line); }
    .camera-select { min-width: 0; max-width: 70%; }
    .audio-enable-btn { width: 100%; min-height: 46px; margin-top: 0.8rem; }
    .hint { color: var(--cockpit-muted); }

    @media (max-width: 767px) {
      #select-screen { padding-bottom: env(safe-area-inset-bottom); }
      .agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .call-section { padding-top: 1rem; }
      .secondary-actions { gap: 0.65rem; }
      .call-active { overflow: visible; }
      .call-participants { gap: clamp(1.5rem, 12vw, 3.25rem); }
      .participant-ring { width: 98px; height: 98px; }
      .participant-img, .agent-avatar-wrap, .user-icon { width: 88px; height: 88px; }
      .call-actions { gap: 0.35rem; }
      .call-action-label { font-size: 0.54rem; }
      .btn-mute, .btn-end-call, .btn-vision, .btn-new-call, .btn-attach { width: 50px; height: 50px; }
    }

    .setup-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin:1rem 0; text-align:left; }
    .setup-check { display:flex; gap:.75rem; align-items:center; padding:.85rem 1rem; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.035); }
    .setup-check > span { font-size:1.3rem; }
    .setup-check strong, .setup-check span { display:block; }
    .setup-check div span { color:var(--muted); font-size:.82rem; margin-top:.15rem; }
    .advanced-settings { margin:.75rem 0 1rem; border-top:1px solid var(--border); border-bottom:1px solid var(--border); text-align:left; }
    .advanced-settings summary { display:flex; align-items:center; cursor:pointer; color:var(--muted); font-weight:700; }
    .call-state-strip { grid-column:1/-1; display:flex; align-items:center; gap:.65rem; min-height:50px; padding:.7rem 1rem; border:1px solid var(--border); border-radius:14px; background:var(--surface-raised); color:var(--text); }
    .call-state-strip #call-state-detail { color:var(--muted); }
    .call-state-dot { width:10px; height:10px; border-radius:50%; background:var(--warning); box-shadow:0 0 0 5px rgba(248,195,92,.18); }
    .call-state-strip[data-state="listening"] .call-state-dot, .call-state-strip[data-state="connected"] .call-state-dot { background:var(--success); }
    .call-state-strip[data-state="speaking"] .call-state-dot { background:var(--accent); }
    .call-state-strip[data-state="error"] .call-state-dot { background:var(--danger); }
    .transcript-actions { margin-left:auto; display:flex; gap:.35rem; }
    .transcript-actions button { min-height:36px; padding:.35rem .65rem; border:1px solid var(--border); border-radius:9px; background:transparent; color:var(--text); }
    .attachment-status { min-height:1.25rem; margin:.5rem 0; color:var(--muted); font-size:.85rem; }
    .history-search-wrap { display:block; padding:0 0 1rem; }
    #history-search { width:100%; padding:.75rem 1rem; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font:inherit; }
    .agent-capabilities { display:flex; gap:.35rem; flex-wrap:wrap; justify-content:center; margin-top:.5rem; }
    .agent-capability { padding:.16rem .45rem; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:.68rem; }
    .agent-availability { color:var(--success); font-size:.72rem; }
    .first-call-tip { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:720px; margin:.25rem auto 1rem; padding:.75rem 1rem; border:1px solid rgba(124,140,255,.35); border-radius:14px; background:rgba(124,140,255,.1); color:var(--muted); font-size:.85rem; }
    .first-call-tip button { padding:.35rem .7rem; border:1px solid var(--border); border-radius:9px; background:transparent; color:var(--text); }

    @media (max-width: 600px) {
      .setup-checks { grid-template-columns:1fr; }
      .call-state-strip { position:sticky; top:.5rem; z-index:20; flex-wrap:wrap; }
      .call-state-strip #call-state-detail { flex-basis:100%; padding-left:1.1rem; }
      .call-control-rail { padding-bottom:max(1rem,env(safe-area-inset-bottom)); }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
    }

    @media (min-width: 1100px) and (orientation: landscape) {
      #connectionBanner {
        max-width: 660px; min-height: 58px; padding: 0.8rem 1.1rem;
        font-size: 0.9rem;
      }

      body { height: 100dvh; min-height: 0; overflow: hidden; align-items: stretch; }
      #app-shell:not(.hidden) { height: 100dvh; }
      body:has(#call-screen.visible) .topbar { display: none; }

      .auth-screen {
        justify-content: flex-start;
        padding: clamp(48px, 8vh, 86px) clamp(72px, 8vw, 150px);
      }

      .auth-screen::after {
        content: 'VOICE / LIVEKIT / OPENCLAW';
        position: absolute;
        right: 7vw;
        bottom: 7vh;
        color: rgba(255,255,255,0.16);
        font-size: clamp(1.2rem, 2.2vw, 2.6rem);
        font-weight: 800;
        letter-spacing: 0.18em;
      }

      .auth-card {
        width: 640px;
        max-width: 640px;
        padding: 3.1rem;
      }

      .auth-card h1 { font-size: 2.6rem; }
      .auth-card .subtitle { font-size: 1rem; max-width: 480px; margin: 0.8rem 0 2rem; }

      .topbar {
        position: fixed;
        top: 1.2rem;
        right: 2.5rem;
        padding: 0;
        z-index: 30;
      }

      #select-screen {
        width: 100%;
        height: 100dvh;
        padding: 2rem 2.5rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(360px, 410px);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 1.35rem 1.9rem;
      }

      .header {
        grid-column: 1;
        grid-row: 1;
        max-width: none;
        padding: 0.35rem 0 0;
        text-align: left;
      }

      .header h1 { font-size: clamp(2.3rem, 3.4vw, 3.7rem); }
      .header .subtitle { font-size: 1rem; max-width: 620px; }

      .agent-grid {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        height: 100%;
        max-width: none;
        min-height: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 1rem;
      }

      .agent-card {
        min-height: 0;
        padding: clamp(0.8rem, 2vh, 1.35rem);
        border-radius: 22px;
      }

      .agent-avatar, .agent-avatar-fallback {
        width: clamp(74px, 7.2vh, 96px);
        height: clamp(74px, 7.2vh, 96px);
      }

      .agent-name { font-size: clamp(1rem, 1.2vw, 1.28rem); }
      .agent-tagline { font-size: clamp(0.72rem, 0.72vw, 0.86rem); max-width: 220px; }

      .call-section {
        grid-column: 2;
        grid-row: 1 / 3;
        width: 100%;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 6.5rem 1.45rem 1.45rem;
        border: 1px solid var(--cockpit-line);
        border-radius: 28px;
        background: linear-gradient(160deg, rgba(19, 27, 35, 0.98), rgba(9, 14, 20, 0.98));
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        box-shadow: 0 28px 80px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.03);
      }

      .call-section-intro { display: block; margin-bottom: auto; }
      .connection-select-wrap { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.75rem; }
      .connection-select { width: 100%; max-width: none; min-height: 44px; }
      .btn-connect { min-height: 66px; font-size: 1.08rem; }
      .btn-new-session, .history-btn, .voice-lock-manage-btn { min-height: 48px; }
      .status { min-height: 50px; display: flex; align-items: center; justify-content: center; }

      .call-active {
        width: 100vw;
        height: 100dvh;
        min-height: 0;
        padding: 1.5rem 2rem;
        display: none;
        grid-template-columns: minmax(330px, 0.78fr) minmax(620px, 1.55fr) minmax(330px, 0.78fr);
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        gap: 1.5rem;
      }

      .call-active.visible { display: grid; }

      .call-visual-panel {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        min-height: 0;
        padding: 1.5rem;
        justify-content: center;
      }

      .call-visual-panel > .screen-kicker { align-self: flex-start; margin-bottom: auto; }
      .call-participants { width: 100%; gap: clamp(1.3rem, 2vw, 2.8rem); }
      .participant-ring { width: clamp(112px, 8.2vw, 150px); height: clamp(112px, 8.2vw, 150px); }
      .participant-img, .agent-avatar-wrap, .user-icon { width: calc(clamp(112px, 8.2vw, 150px) - 12px); height: calc(clamp(112px, 8.2vw, 150px) - 12px); }
      .participant-label { font-size: 0.9rem; }
      .speaking-status { font-size: 1rem; margin-top: 1rem; }
      .waveform { height: 54px; margin: 0.5rem 0; }
      .call-timer { font-size: 0.9rem; }

      .vision-preview {
        width: 100%;
        height: min(24vh, 210px);
        margin-top: auto;
      }

      .transcript-panel {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        min-height: 0;
        height: 100%;
        max-height: none;
        border-radius: 28px;
      }

      .transcript-heading { padding: 1.15rem 1.35rem; font-size: 0.92rem; }
      .transcript-log { padding: 1rem 1.25rem; }

      .call-control-rail {
        grid-column: 3;
        grid-row: 1;
        min-width: 0;
        min-height: 0;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
      }

      .call-control-heading { display: block; padding-bottom: 1.2rem; border-bottom: 1px solid var(--cockpit-line); }

      .call-actions {
        flex: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: center;
        gap: 1rem 0.8rem;
      }

      .call-action-wrap { gap: 0.35rem; }
      .call-action-label { font-size: 0.72rem; color: #9aa8b4; }
      .btn-mute, .btn-end-call, .btn-vision, .btn-new-call, .btn-attach { width: 72px; height: 72px; font-size: 1.5rem; }
      .btn-end-call svg { width: 30px; height: 30px; }
      .camera-select-wrap { flex-direction: column; align-items: stretch; }
      .camera-select { width: 100%; max-width: none; }
    }

    /* BYD's embedded browser includes the car status and climate overlays in
       100dvh. Reserve those physical bands instead of letting them cover UI. */
    @media (min-width: 1100px) and (max-width: 1400px) and (orientation: landscape) {
      :root { --byd-top-inset: 82px; --byd-bottom-inset: 96px; }
      #app-shell:not(.hidden) { height: 100dvh; overflow: hidden; }
      .topbar { top: calc(var(--byd-top-inset) + .35rem); right: 1.25rem; }
      #select-screen {
        height: calc(100dvh - var(--byd-top-inset) - var(--byd-bottom-inset));
        margin-top: var(--byd-top-inset);
        padding: .7rem 1.25rem .55rem;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 350px);
        grid-template-rows: auto minmax(0, 1fr);
        gap: .7rem 1rem;
      }
      .header { padding-top: 0; }
      .header h1 { font-size: clamp(2rem, 3.1vw, 2.75rem); }
      .header .subtitle { font-size: .88rem; }
      .agent-grid { gap: .55rem; }
      .agent-card { padding: .55rem .4rem; border-radius: 17px; }
      .agent-avatar, .agent-avatar-fallback { width: clamp(54px, 7vh, 68px); height: clamp(54px, 7vh, 68px); }
      .agent-name { font-size: clamp(.82rem, 1.15vw, 1rem); }
      .agent-tagline { font-size: .68rem; }
      .agent-capabilities { margin-top: .2rem; gap: .2rem; }
      .agent-capability { display: none; }
      .call-section { padding: 4rem .9rem .7rem; border-radius: 22px; }
      .call-section-intro { padding-bottom: .55rem; margin-bottom: .55rem; }
      .first-call-tip { margin: .15rem 0 .45rem; padding: .55rem .65rem; font-size: .72rem; }
      .setup-checks { gap: .45rem; margin: .45rem 0; }
      .setup-check { padding: .55rem .65rem; }
      .advanced-settings { margin: .25rem 0 .45rem; }
      .btn-connect { min-height: 56px; }
      .btn-new-session, .history-btn, .voice-lock-manage-btn { min-height: 42px; }
      .status { min-height: 42px; }
      .call-active {
        width: 100vw;
        height: calc(100dvh - var(--byd-top-inset) - var(--byd-bottom-inset));
        margin-top: var(--byd-top-inset);
        padding: .65rem 1rem;
        grid-template-columns: minmax(250px,.72fr) minmax(430px,1.5fr) minmax(250px,.72fr);
        gap: .75rem;
      }
    }