/* Phone-only AI Call pages reuse the real call controls and live transcripts. */
@layer fuuvo-mobile-design {
@media (max-width: 920px) {
    html body .ai-call-dialog.mobile-call-prototype {
        z-index: 10030 !important;
        --call-paper: var(--mobile-paper, #fff);
        --call-ink: var(--mobile-ink, #171821);
        --call-muted: var(--mobile-muted, #786e83);
        --call-line: var(--mobile-line, #edeaf0);
        --call-surface: var(--mobile-accent, #f2eef7);
        --call-avatar-size: min(100vw, 400px, max(0px, calc(100dvh - 448px - env(safe-area-inset-top) - env(safe-area-inset-bottom))));
        color: var(--call-ink) !important;
        background: var(--call-paper) !important;
    }
    html body .mobile-call-prototype .ai-call-sheet {
        display: block !important;
        height: 100dvh !important; min-height: 100svh !important;
        padding: 0 !important; overflow: auto !important;
        background: radial-gradient(ellipse 73% 53% at 50% -3%, #ff82a9 0%, #ffb9d2 45%, #f9e2ee55 83%, transparent 100%), radial-gradient(ellipse 100% 55% at 0 0, #dcc9fc 0%, #eadffa88 60%, transparent 100%), var(--call-paper) !important;
    }
    html body:is([data-ui-theme="dark"], [data-theme="dark"]) .mobile-call-prototype .ai-call-sheet,
    html:is([data-ui-theme="dark"], [data-theme="dark"]) body .mobile-call-prototype .ai-call-sheet {
        background: radial-gradient(ellipse 73% 53% at 50% -3%, #70415d 0%, #4b3043 45%, transparent 100%), radial-gradient(ellipse 100% 55% at 0 0, #39304e, transparent), var(--call-paper) !important;
    }
    html body .mobile-call-prototype .ai-call-sheet::before,
    html body .mobile-call-prototype :is(.ai-call-backdrop, .ai-call-avatar-halo, .ai-call-header > .ai-call-more, .ai-call-header > .ai-call-captions-toggle, .ai-call-listening, .ai-call-ai-note, #ai-call-hangup, .ai-call-scenario-copy, #ai-call-scene-label) { display: none !important; }
    html body .mobile-call-page-header {
        position: absolute !important; z-index: 15 !important;
        inset: env(safe-area-inset-top) 0 auto !important;
        height: 56px !important; display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        align-items: center !important; gap: 5px !important; padding: 0 12px !important;
        color: var(--call-ink) !important;
    }
    .mobile-call-page-header strong { font-size: 16px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: center !important; }
    .mobile-call-page-header button,
    .mobile-call-scenario-header button {
        display: grid !important; place-items: center !important; width: 44px !important; height: 44px !important; padding: 0 !important;
        border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--call-ink) !important; cursor: pointer;
    }
    .mobile-call-page-header svg, .mobile-call-scenario-header svg { width: 22px !important; height: 22px !important; }
    html body .mobile-call-prototype .ai-call-header {
        position: absolute !important; top: calc(68px + env(safe-area-inset-top)) !important; left: 20px !important; right: 20px !important;
        width: auto !important; height: 40px !important; display: flex !important; justify-content: center !important;
    }
    html body .mobile-call-prototype .ai-call-scene-toggle {
        height: 38px !important; padding: 8px 13px !important; gap: 8px !important;
        max-width: 100% !important; border: 1px solid var(--call-line) !important; border-radius: 20px !important;
        background: color-mix(in srgb, var(--call-paper) 84%, transparent) !important;
        color: var(--call-ink) !important; box-shadow: none !important; font-size: 12px !important; font-weight: 500 !important;
    }
    html body .mobile-call-prototype :is(.ai-call-scene-default-icon, .ai-call-scene-active-icon) { display: none !important; }
    html body .mobile-call-prototype .ai-call-scene-chevron { display: block !important; order: -1; width: 17px !important; height: 17px !important; }
    html body .mobile-call-prototype .ai-call-scene-control { max-width: 100% !important; }
    html body .mobile-call-prototype.is-interpreter .ai-call-scene-control { background: transparent !important; border: 0 !important; box-shadow: none !important; }
    html body .mobile-call-prototype .ai-call-avatar-stage {
        top: calc(124px + env(safe-area-inset-top)) !important; left: 50% !important;
        width: var(--call-avatar-size) !important; height: auto !important; aspect-ratio: 1 !important;
        transform: translateX(-50%) !important; opacity: 1 !important;
    }
    html body .mobile-call-prototype .ai-call-avatar-ring {
        inset: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    }
    html body .mobile-call-prototype .ai-call-dialog-mascot { inset: 0 !important; }
    html body .mobile-call-prototype .ai-call-avatar-ring .ai-call-mascot-image { object-fit: contain !important; }
    html body .mobile-call-headline {
        position: absolute !important; left: 20px !important; right: 20px !important;
        top: calc(126px + env(safe-area-inset-top) + var(--call-avatar-size)) !important;
        margin: 0 !important; color: var(--call-ink) !important; font-size: 25px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -.7px !important; text-align: center !important;
    }
    html body .mobile-call-description {
        position: absolute !important; left: 20px !important; right: 20px !important;
        top: calc(165px + env(safe-area-inset-top) + var(--call-avatar-size)) !important;
        margin: 0 !important; color: var(--call-muted) !important; font-size: 13px !important; line-height: 1.5 !important; text-align: center !important;
    }
    html body .mobile-call-wave {
        position: absolute !important; top: calc(193px + env(safe-area-inset-top) + var(--call-avatar-size)) !important; left: 50% !important;
        display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; height: 36px !important; transform: translateX(-50%) !important;
    }
    .mobile-call-wave i { display: block !important; width: 3px !important; height: 12px !important; border-radius: 3px !important; background: #ac95bb !important; }
    .mobile-call-wave i:nth-child(2n) { height: 22px !important; }
    .mobile-call-wave i:nth-child(3n) { height: 32px !important; }
    .mobile-call-prototype.is-calling:not(.is-muted) .mobile-call-wave i { animation: mobile-call-wave 1s ease-in-out infinite alternate; }
    .mobile-call-prototype.is-calling .mobile-call-wave i:nth-child(2n) { animation-delay: -.4s; }
    @keyframes mobile-call-wave { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
    html body .mobile-call-prototype .ai-call-prompt { position: absolute !important; bottom: calc(193px + env(safe-area-inset-bottom)) !important; font-size: 12px !important; line-height: 1.5 !important; color: var(--call-muted) !important; }
    html body .mobile-call-prototype:not(.is-calling) .ai-call-prompt { display: none !important; }
    html body .mobile-call-prototype .ai-call-status { bottom: calc(182px + env(safe-area-inset-bottom)) !important; font-size: 12px !important; font-weight: 400 !important; color: var(--call-muted) !important; width: calc(100% - 40px) !important; }
    html body .mobile-call-prototype:not(.is-calling) .ai-call-status { bottom: calc(109px + env(safe-area-inset-bottom)) !important; }
    html body .mobile-call-prototype .ai-call-status.is-error { color: #c64a5e !important; background: var(--call-paper) !important; }
    html body .mobile-call-prototype .ai-call-controls {
        position: absolute !important; bottom: calc(128px + env(safe-area-inset-bottom)) !important; left: 50% !important;
        width: min(calc(100% - 48px), 340px) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; transform: translateX(-50%) !important;
    }
    html body .mobile-call-prototype:not(.is-calling) .ai-call-controls { display: none !important; }
    html body .mobile-call-prototype .ai-call-controls button {
        position: relative !important; width: 52px !important; height: 52px !important; flex: 0 0 52px !important; border-radius: 50% !important; border: 0 !important;
        background: var(--call-surface) !important; color: var(--call-ink) !important; box-shadow: none !important; padding: 0 !important;
    }
    html body .mobile-call-prototype .ai-call-controls button.is-active,
    html body .mobile-call-prototype .ai-call-controls #ai-call-mute.is-muted { background: #857090 !important; color: #fff !important; }
    html body .mobile-call-prototype .ai-call-controls svg { width: 23px !important; height: 23px !important; }
    #ai-call-mute { order: 1; }
    .mobile-call-caption-button { order: 2; }
    #ai-call-video-toggle { order: 3; }
    #ai-call-share { order: 4; }
    html body .mobile-call-control-label { position: absolute !important; bottom: -22px !important; left: -8px !important; right: -8px !important; display: block !important; color: var(--call-muted) !important; font-size: 10px !important; line-height: 1.4 !important; font-weight: 400 !important; white-space: nowrap !important; text-align: center !important; }
    html body .mobile-call-prototype .ai-call-speech-controls { top: auto !important; bottom: calc(216px + env(safe-area-inset-bottom)) !important; }
    html body .mobile-call-prototype:has(.ai-call-status:not(:empty)) .ai-call-prompt { display: none !important; }
    html body .mobile-call-footer { position: absolute !important; z-index: 9 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: calc(100px + env(safe-area-inset-bottom)) !important; background: var(--call-paper) !important; border-top: 1px solid var(--call-line) !important; }
    html body .mobile-call-prototype .ai-call-start,
    html body .mobile-call-bottom-button {
        position: absolute !important; z-index: 10 !important; bottom: calc(26px + env(safe-area-inset-bottom)) !important; left: 20px !important; right: 20px !important;
        width: calc(100% - 40px) !important; height: 48px !important; min-height: 48px !important; padding: 12px 15px !important;
        clip: auto !important; clip-path: none !important; overflow: visible !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        border: 1px solid #202027 !important; border-radius: 13px !important; background: #202027 !important; color: #fff !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; cursor: pointer;
    }
    html body .mobile-call-prototype .ai-call-start.is-active { border-color: #edd5da !important; background: var(--call-paper) !important; color: #b9445b !important; }
    html body .mobile-call-prototype.mobile-call-needs-reconnect .ai-call-start { display: none !important; }
    html body .mobile-call-prototype .ai-call-conversation { display: none !important; }
    html body .mobile-call-prototype .ai-call-scenarios {
        z-index: 24 !important; box-sizing: border-box !important;
        inset: auto 0 0 !important; width: 100% !important; max-width: none !important; max-height: min(75dvh, 650px) !important;
        transform: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        padding: 10px 20px calc(20px + env(safe-area-inset-bottom)) !important; background: var(--call-paper) !important; color: var(--call-ink) !important; border-radius: 25px 25px 0 0 !important;
    }
    html body .mobile-call-prototype .ai-call-scenarios-backdrop { z-index: 23 !important; inset: 0 !important; width: 100% !important; height: 100% !important; background: #24202b60 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    html body .mobile-call-prototype .ai-call-scenarios-handle { width: 40px !important; height: 4px !important; margin: 0 auto 8px !important; background: var(--call-line) !important; }
    html body .mobile-call-scenario-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 0 6px !important; }
    .mobile-call-scenario-header h2 { margin: 0 !important; font-size: 20px !important; font-weight: 600 !important; color: var(--call-ink) !important; }
    html body .mobile-call-prototype .ai-call-scenarios-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; }
    html body .mobile-call-prototype .ai-call-scenarios-grid > button {
        min-height: 72px !important; padding: 12px 30px 12px 38px !important; align-items: center !important;
        border: 0 !important; border-bottom: 1px solid var(--call-line) !important; border-radius: 0 !important; background: transparent !important; color: var(--call-ink) !important;
    }
    html body .mobile-call-prototype .ai-call-scenario-icon { top: 24px !important; left: 0 !important; right: auto !important; width: 24px !important; height: 24px !important; color: var(--call-muted) !important; }
    .mobile-call-prototype .ai-call-scenario-icon svg { width: 24px !important; height: 24px !important; }
    html body .mobile-call-scenario-copy { display: grid !important; gap: 5px !important; }
    .mobile-call-scenario-copy strong { color: var(--call-ink) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; }
    .mobile-call-scenario-copy small { color: var(--call-muted) !important; font-size: 11px !important; line-height: 1.4 !important; }
    .mobile-call-prototype .ai-call-scenarios-grid > button.is-selected::after { position: absolute; right: 2px; content: '✓'; font-size: 19px; color: var(--call-ink); }
    html body .mobile-call-prototype .ai-call-video { top: calc(119px + env(safe-area-inset-top)) !important; width: min(44vw, 170px) !important; max-height: 150px !important; left: auto !important; right: 20px !important; transform: none !important; }
    html body .mobile-call-prototype.is-interpreter .ai-call-interpreter-toolbar { top: calc(124px + env(safe-area-inset-top)) !important; left: 20px !important; right: 20px !important; width: auto !important; transform: none !important; }
    html body .mobile-call-prototype.is-interpreter .ai-call-interpreter-stage { top: calc(215px + env(safe-area-inset-top)) !important; bottom: calc(246px + env(safe-area-inset-bottom)) !important; max-height: none !important; width: calc(100% - 40px) !important; color: var(--call-ink) !important; }
    html body .mobile-call-prototype.is-interpreter.is-calling :is(.mobile-call-headline, .mobile-call-description, .mobile-call-wave) { display: none !important; }
    html body .mobile-call-prototype.is-interpreter:not(.is-calling):not(.mobile-call-captions-page):not(.mobile-call-ended) .ai-call-avatar-stage { display: block !important; }
    html body .mobile-call-prototype.is-interpreter:not(.is-calling):not(.mobile-call-captions-page) :is(.ai-call-interpreter-toolbar, .ai-call-interpreter-stage) { display: none !important; }
    html body .mobile-call-prototype .ai-call-interpreter-target-text { color: var(--call-ink) !important; font-size: 21px !important; }
    html body .mobile-call-prototype .ai-call-interpreter-source-text { color: var(--call-muted) !important; font-size: 17px !important; }
    html body .mobile-call-prototype.mobile-call-captions-page .ai-call-sheet,
    html body .mobile-call-prototype.mobile-call-ended .ai-call-sheet { background: var(--call-paper) !important; }
    html body .mobile-call-prototype.mobile-call-captions-page :is(.ai-call-header, .ai-call-avatar-stage, .mobile-call-headline, .mobile-call-description, .mobile-call-wave, .ai-call-prompt, .ai-call-start, .ai-call-controls, .ai-call-video, .ai-call-status, .ai-call-interpreter-toolbar, .mobile-call-ended-orb, .mobile-call-review),
    html body .mobile-call-prototype.mobile-call-ended :is(.ai-call-header, .ai-call-avatar-stage, .mobile-call-wave, .ai-call-prompt, .ai-call-start, .ai-call-controls, .ai-call-status, .ai-call-interpreter-toolbar, .ai-call-interpreter-stage) { display: none !important; }
    html body .mobile-call-prototype.mobile-call-captions-page:not(.is-interpreter) .ai-call-conversation,
    html body .mobile-call-prototype.mobile-call-captions-page.is-interpreter .ai-call-interpreter-stage {
        position: absolute !important; top: calc(76px + env(safe-area-inset-top)) !important; bottom: calc(114px + env(safe-area-inset-bottom)) !important;
        left: 20px !important; width: calc(100% - 40px) !important; max-height: none !important; margin: 0 !important; padding: 0 !important;
        display: block !important; overflow-y: auto !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; backdrop-filter: none !important;
    }
    html body .mobile-call-prototype .ai-call-line { margin-bottom: 22px !important; }
    html body .mobile-call-prototype .ai-call-line p { color: var(--call-ink) !important; font-size: 14px !important; line-height: 1.7 !important; }
    html body .mobile-call-prototype .ai-call-line.is-user { padding: 12px 14px !important; border-radius: 15px 15px 4px 15px !important; background: var(--call-surface) !important; text-align: left !important; }
    .mobile-call-empty-captions { position: absolute; top: 140px; left: 30px; right: 30px; color: var(--call-muted); font-size: 13px; }
    html body .mobile-call-ended-orb { position: absolute !important; top: 29% !important; left: 50% !important; width: 96px !important; height: 96px !important; display: grid !important; place-items: center !important; background: var(--call-surface) !important; border-radius: 50% !important; transform: translateX(-50%) !important; color: #857090 !important; }
    .mobile-call-ended-orb svg { width: 40px; height: 40px; }
    html body .mobile-call-prototype.mobile-call-ended .mobile-call-headline { top: calc(29% + 126px) !important; font-size: 24px !important; }
    html body .mobile-call-prototype.mobile-call-ended .mobile-call-description { top: calc(29% + 168px) !important; }
    html body .mobile-call-review { position: absolute !important; top: calc(29% + 208px) !important; left: 20px !important; right: 20px !important; display: flex !important; gap: 12px !important; align-items: center !important; width: calc(100% - 40px) !important; padding: 14px !important; border: 1px solid var(--call-line) !important; border-radius: 12px !important; background: transparent !important; color: var(--call-ink) !important; font-size: 14px !important; }
    .mobile-call-review svg { width: 24px; height: 24px; color: var(--call-muted); }
    html body .mobile-call-prototype [hidden] { display: none !important; }
    html body .mobile-call-prototype.mobile-call-captions-page .ai-call-conversation[hidden],
    html body .mobile-call-prototype.mobile-call-captions-page .ai-call-interpreter-stage[hidden] { display: none !important; }
    @media (max-height: 690px) {
        html body .mobile-call-prototype.is-calling { --call-avatar-size: min(100vw, 300px, max(0px, calc(100dvh - 438px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))); }
        html body .mobile-call-prototype.is-calling .mobile-call-headline { top: calc(124px + env(safe-area-inset-top) + var(--call-avatar-size)) !important; font-size: 22px !important; }
        html body .mobile-call-prototype.is-calling .mobile-call-description { top: calc(156px + env(safe-area-inset-top) + var(--call-avatar-size)) !important; }
        html body .mobile-call-prototype.is-calling .mobile-call-wave { display: none !important; }
    }
    @media (min-width: 560px) and (max-height: 520px) {
        html body .mobile-call-prototype .ai-call-avatar-stage { top: calc(112px + env(safe-area-inset-top)) !important; left: 25% !important; width: min(160px, calc(100dvh - 230px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important; }
        html body .mobile-call-prototype:not(.mobile-call-ended) .mobile-call-headline { top: calc(120px + env(safe-area-inset-top)) !important; left: 50% !important; }
        html body .mobile-call-prototype:not(.mobile-call-ended) .mobile-call-description { display: none !important; }
        html body .mobile-call-prototype .mobile-call-wave { display: none !important; }
        html body .mobile-call-prototype .ai-call-prompt,
        html body .mobile-call-prototype .ai-call-status { top: calc(155px + env(safe-area-inset-top)) !important; bottom: auto !important; left: 50% !important; right: 20px !important; width: auto !important; transform: none !important; }
        html body .mobile-call-prototype .ai-call-controls { left: 75% !important; width: min(calc(50% - 40px), 340px) !important; }
        html body .mobile-call-prototype .ai-call-speech-controls { top: calc(148px + env(safe-area-inset-top)) !important; bottom: auto !important; left: 50% !important; right: 20px !important; }
        html body .mobile-call-prototype:has(.ai-call-speech-controls button:not([hidden])) .ai-call-prompt { display: none !important; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .mobile-call-prototype .mobile-call-wave i { animation: none !important; }
}
}