:root {
    --bg: #07111f;
    --card: #102033;
    --card-2: #0b1726;
    --accent: #22d3ee;
    --accent-2: #34d399;
    --danger: #fb7185;
    --text: #f8fafc;
    --muted: #9fb3c8;
    --border: #1f3a5a;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: "Noto Sans Devanagari", "Segoe UI", system-ui, sans-serif;
    background: radial-gradient(circle at top left, #164e63 0, transparent 32%),
                linear-gradient(145deg, #07111f 0%, #111827 100%);
    color: var(--text);
    padding: 1.5rem;
}
a { color: var(--accent); }
.page {
    max-width: 1040px;
    margin: 0 auto;
}
.center-page {
    max-width: 520px;
    min-height: calc(100vh - 3rem);
    margin: 0 auto;
    display: grid;
    place-items: center;
}
.app-shell,
.virtual-agent-page {
    max-width: 720px;
    width: 100%;
    min-height: calc(100vh - 3rem);
    margin: 0 auto;
    display: grid;
    align-items: stretch;
}
.app-shell.virtual-consultation {
    max-width: 920px;
}
.voice-agent,
.virtual-agent {
    display: flex;
    flex-direction: column;
    min-height: min(80vh, calc(100vh - 3rem));
    width: 100%;
    background: rgba(16, 32, 51, 0.92);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.voice-agent-header,
.virtual-agent-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem 1.35rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(11, 23, 38, 0.9), rgba(22, 78, 99, 0.18));
}
.voice-agent-title h1,
.virtual-agent-title h1 {
    margin: 0;
    font-size: 1.35rem;
}
.voice-agent-title-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.voice-agent-live {
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: rgba(251, 113, 133, 0.2);
    border: 1px solid rgba(251, 113, 133, 0.55);
    color: #fecdd3;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
    50% { opacity: 0.55; }
}
.voice-agent-subtitle,
.virtual-agent-subtitle {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}
.voice-agent-status-line {
    margin: 0.35rem 0 0;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
}
.voice-agent-patient,
.virtual-agent-patient {
    margin: 0.35rem 0 0;
    color: var(--accent-2);
    font-size: 0.85rem;
}
/* Clickable doctor image — voice on/off */
.doctor-voice-toggle {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font: inherit;
}
.doctor-voice-toggle:focus-visible {
    outline: 3px solid rgba(34, 211, 238, 0.65);
    outline-offset: 4px;
    border-radius: 12px;
}
.doctor-voice-toggle-image {
    position: relative;
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--border);
    background: linear-gradient(180deg, #1e4d63 0%, #102033 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.doctor-voice-toggle:hover .doctor-voice-toggle-image {
    transform: scale(1.04);
}
.doctor-voice-toggle.on .doctor-voice-toggle-image {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.2), 0 8px 24px rgba(34, 211, 238, 0.25);
}
.doctor-voice-toggle.off .doctor-voice-toggle-image {
    filter: grayscale(0.55) brightness(0.85);
    opacity: 0.88;
}
.mini-doctor-portrait {
    position: absolute;
    inset: 0;
    display: block;
}
.mini-doctor-hair {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 18px;
    border-radius: 20px 20px 8px 8px;
    background: #253044;
    z-index: 3;
}
.mini-doctor-head {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 44px;
    border-radius: 46%;
    background: #f2c7a5;
    z-index: 2;
}
.mini-doctor-eye {
    position: absolute;
    top: 32px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #102033;
    z-index: 4;
}
.mini-doctor-eye.left { left: 26px; }
.mini-doctor-eye.right { right: 26px; }
.mini-doctor-smile {
    position: absolute;
    top: 42px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 7px;
    border-bottom: 2px solid #8b3f3f;
    border-radius: 0 0 12px 12px;
    z-index: 4;
}
.mini-doctor-smile.speaking {
    animation: doctorTalk 0.35s ease-in-out infinite alternate;
}
.mini-doctor-coat {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 28px;
    border-radius: 12px 12px 0 0;
    background: #f8fafc;
    z-index: 1;
}
.mini-doctor-scrubs {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 22px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #22d3ee, #0e7490);
    z-index: 2;
}
.doctor-voice-speaker-icon {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--card-2);
    border: 2px solid var(--border);
    color: var(--muted);
    z-index: 5;
}
.doctor-voice-toggle.on .doctor-voice-speaker-icon {
    background: var(--accent);
    border-color: #0e7490;
    color: #06202b;
}
.doctor-voice-toggle .speaker-svg {
    width: 16px;
    height: 16px;
    display: block;
}
.doctor-voice-toggle-caption {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.doctor-voice-toggle.on .doctor-voice-toggle-caption {
    color: var(--accent);
}
.voice-orb-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}
.voice-orb-core {
    position: relative;
    width: 100%;
    height: 100%;
}
.voice-orb-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(34, 211, 238, 0.35);
    opacity: 0.5;
}
.voice-orb-ring-1 { inset: -6px; }
.voice-orb-ring-2 { inset: -12px; opacity: 0.25; }
.voice-orb-wrap.listening .voice-orb-ring,
.voice-orb-wrap.speaking .voice-orb-ring,
.voice-orb-wrap.thinking .voice-orb-ring {
    animation: orbPulse 1.2s ease-out infinite;
}
.voice-orb-wrap.listening .voice-orb-ring-0 { animation-delay: 0s; }
.voice-orb-wrap.listening .voice-orb-ring-1 { animation-delay: 0.15s; }
.voice-orb-wrap.listening .voice-orb-ring-2 { animation-delay: 0.3s; }
@keyframes orbPulse {
    0% { transform: scale(0.92); opacity: 0.35; }
    70% { transform: scale(1.08); opacity: 0.9; }
    100% { transform: scale(0.92); opacity: 0.35; }
}
.voice-orb-face {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #1e4d63, #102033 70%);
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 24px rgba(34, 211, 238, 0.2);
}
.voice-orb-icon {
    font-size: 1.35rem;
    line-height: 1;
}
.voice-orb-bars {
    position: absolute;
    bottom: 10px;
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 16px;
}
.voice-orb-bar {
    width: 3px;
    height: 6px;
    border-radius: 2px;
    background: var(--accent);
    animation: barBounce 0.55s ease-in-out infinite;
}
.voice-orb-bar:nth-child(2) { animation-delay: 0.08s; }
.voice-orb-bar:nth-child(3) { animation-delay: 0.16s; }
.voice-orb-bar:nth-child(4) { animation-delay: 0.24s; }
.voice-orb-bar:nth-child(5) { animation-delay: 0.32s; }
.voice-orb-bar:nth-child(6) { animation-delay: 0.4s; }
@keyframes barBounce {
    50% { height: 14px; }
}
.voice-orb-badge {
    position: absolute;
    right: -6px;
    bottom: -2px;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #06202b;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.voice-agent-hint {
    margin: 0;
    padding: 0.65rem 1.35rem 0;
    text-align: center;
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 600;
}
.voice-agent-controls {
    display: flex;
    gap: 0.65rem;
    align-items: stretch;
    padding: 0.85rem 1.35rem 1.25rem;
    border-top: 1px solid var(--border);
    background: rgba(11, 23, 38, 0.65);
}
.voice-mic-btn {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 4.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 16px;
    border: 1px solid rgba(34, 211, 238, 0.45);
    background: rgba(34, 211, 238, 0.12);
    color: var(--text);
    cursor: pointer;
    font: inherit;
}
.voice-mic-btn:hover:not(:disabled) {
    background: rgba(34, 211, 238, 0.22);
}
.voice-mic-btn.recording {
    background: rgba(251, 113, 133, 0.2);
    border-color: rgba(251, 113, 133, 0.55);
    animation: micGlow 0.8s ease-in-out infinite alternate;
}
@keyframes micGlow {
    to { box-shadow: 0 0 20px rgba(251, 113, 133, 0.45); }
}
.voice-mic-icon { font-size: 1.25rem; line-height: 1; }
.voice-mic-label { font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.voice-session-active {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 5.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 16px;
    border: 1px solid rgba(251, 113, 133, 0.55);
    background: rgba(251, 113, 133, 0.15);
    color: #fecdd3;
    font-size: 0.82rem;
    font-weight: 700;
}
.voice-agent-footer {
    display: flex;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}
.voice-agent-footer input { flex: 1; margin: 0; }
.voice-agent-footer button { flex-shrink: 0; }
.voice-agent-status,
.virtual-agent-status {
    margin: 0;
    padding: 0 1.35rem 1rem;
    font-size: 0.9rem;
}
.voice-agent-status.error,
.virtual-agent-status.error { color: #fecdd3; }
.voice-agent-status.success,
.virtual-agent-status.success { color: #bbf7d0; }
.voice-agent-chat,
.virtual-agent-chat {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.35rem;
    min-height: 50vh;
}
.chat-message {
    max-width: 92%;
    padding: 0.75rem 0.95rem;
    border-radius: 16px;
    line-height: 1.45;
    white-space: pre-wrap;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.chat-speaker {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}
.chat-body { display: block; }
.chat-message.assistant {
    align-self: flex-start;
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.35);
}
.chat-message.user {
    align-self: flex-end;
    background: rgba(52, 211, 153, 0.14);
    border: 1px solid rgba(52, 211, 153, 0.35);
}
.chat-message.user .chat-speaker { display: none; }
.chat-message.typing {
    color: var(--muted);
    font-style: italic;
}
.virtual-agent-footer.done {
    justify-content: center;
}
/* Virtual doctor consultation UI */
.virtual-agent-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.35rem;
    border-bottom: 1px solid var(--border);
    background: rgba(11, 23, 38, 0.95);
}
.virtual-agent-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.virtual-agent-brand h1 {
    margin: 0;
    font-size: 1.15rem;
}
.doctor-stage {
    position: relative;
    padding: 1.25rem 1.35rem 1rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(14, 116, 144, 0.22) 0%, rgba(11, 23, 38, 0.4) 100%);
    text-align: center;
}
.doctor-stage-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 30%, rgba(34, 211, 238, 0.14), transparent 70%),
        linear-gradient(180deg, rgba(16, 32, 51, 0.2), transparent);
    pointer-events: none;
}
.doctor-stage-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 1.25rem 2rem;
    max-width: 760px;
    margin: 0 auto;
}
.doctor-stage-figure {
    flex-shrink: 0;
}
.doctor-stage-figure .doctor-figure {
    width: 180px;
    height: 245px;
}
.doctor-stage-figure .doctor-head {
    left: 50px;
    width: 80px;
    height: 88px;
}
.doctor-stage-figure .doctor-hair {
    left: 46px;
    width: 88px;
    height: 42px;
}
.doctor-stage-figure .doctor-eye.left { left: 72px; top: 40px; }
.doctor-stage-figure .doctor-eye.right { right: 72px; top: 40px; }
.doctor-stage-figure .doctor-smile {
    left: 78px;
    top: 58px;
    width: 24px;
}
.doctor-stage-figure .doctor-smile.speaking {
    animation: doctorTalk 0.35s ease-in-out infinite alternate;
    border-bottom-width: 4px;
    height: 12px;
}
@keyframes doctorTalk {
    to { transform: scaleY(1.35); }
}
.doctor-stage-figure .doctor-neck {
    left: 74px;
    top: 78px;
}
.doctor-stage-figure .doctor-body {
    left: 22px;
    width: 136px;
    height: 130px;
    top: 94px;
}
.doctor-stage-figure .scrubs {
    left: 58px;
    top: 108px;
    width: 64px;
    height: 108px;
}
.doctor-coat-lapel {
    position: absolute;
    top: 108px;
    width: 28px;
    height: 72px;
    background: #f8fafc;
    border-radius: 0 0 8px 8px;
    z-index: 4;
}
.doctor-coat-lapel.left {
    left: 38px;
    transform: skewY(8deg);
}
.doctor-coat-lapel.right {
    right: 38px;
    transform: skewY(-8deg);
}
.stethoscope {
    position: absolute;
    top: 118px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 48px;
    z-index: 6;
}
.stethoscope::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border: 3px solid #64748b;
    border-radius: 50%;
}
.stethoscope::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border: 3px solid #475569;
    border-radius: 50%;
    background: #94a3b8;
}
.doctor-stage.speaking .stethoscope::after {
    animation: stethoscopePulse 0.5s ease-in-out infinite alternate;
}
@keyframes stethoscopePulse {
    to { transform: translateX(-50%) scale(1.08); }
}
.doctor-stage-figure.listening {
    animation: doctorFloat 1.2s ease-in-out infinite alternate;
}
.doctor-stage-figure.thinking .doctor-eye {
    animation: doctorBlink 2s ease-in-out infinite;
}
@keyframes doctorFloat {
    to { transform: translateY(-6px); }
}
@keyframes doctorBlink {
    45%, 55% { transform: scaleY(0.15); }
}
.doctor-stage-figure.listening .mic-badge {
    right: 8px;
    bottom: 28px;
    animation: glow 0.8s infinite alternate;
}
.doctor-speech-bubble {
    flex: 1;
    min-width: min(100%, 340px);
    max-width: 480px;
    text-align: left;
    padding: 1rem 1.15rem;
    border-radius: 20px 20px 20px 6px;
    background: rgba(248, 250, 252, 0.96);
    color: #0f172a;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.doctor-speech-bubble.speaking {
    box-shadow: 0 12px 40px rgba(34, 211, 238, 0.25);
}
.doctor-speech-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.doctor-speech-name {
    font-weight: 800;
    font-size: 0.95rem;
    color: #0e7490;
}
.doctor-speech-role {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.doctor-speech-text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: #1e293b;
}
.doctor-speech-waves {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 18px;
    margin-top: 0.65rem;
}
.doctor-speech-waves .wave-bar {
    width: 4px;
    height: 8px;
    border-radius: 2px;
    background: #0e7490;
    animation: waveBar 0.45s ease-in-out infinite;
}
.doctor-speech-waves .wave-bar:nth-child(2) { animation-delay: 0.08s; }
.doctor-speech-waves .wave-bar:nth-child(3) { animation-delay: 0.16s; }
.doctor-speech-waves .wave-bar:nth-child(4) { animation-delay: 0.24s; }
.doctor-speech-waves .wave-bar:nth-child(5) { animation-delay: 0.32s; }
@keyframes waveBar {
    50% { height: 16px; }
}
.doctor-stage .voice-agent-status-line {
    position: relative;
    margin: 0.85rem 0 0;
}
.doctor-stage .voice-agent-patient {
    position: relative;
    margin: 0.35rem 0 0;
}
.consultation-transcript {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem 1.35rem;
    min-height: 140px;
    max-height: 28vh;
    background: rgba(11, 23, 38, 0.45);
}
.transcript-label {
    margin: 0 0 0.25rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.consultation-transcript .chat-message {
    max-width: 88%;
    padding: 0.55rem 0.75rem;
    font-size: 0.88rem;
}
.consultation-transcript .chat-speaker {
    color: #67e8f9;
}
.consultation-transcript .chat-message.user .chat-speaker {
    display: block;
    color: var(--accent-2);
}

/* —— Simple layman-friendly UI —— */
.simple-ui .virtual-agent-topbar.simple {
    padding: 1rem 1.25rem;
}
.simple-ui .virtual-agent-brand h1 {
    font-size: 1.25rem;
    margin: 0;
}
.virtual-agent-tagline {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 500;
}
.simple-ui .doctor-stage.simple {
    padding: 1rem 1.25rem 0.75rem;
}
.simple-ui .doctor-stage-inner.simple {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.simple-ui .doctor-stage-figure .doctor-figure {
    width: 140px;
    height: 190px;
}
.doctor-speech-bubble.simple {
    max-width: 100%;
    width: 100%;
    text-align: center;
    border-radius: 16px;
}
.doctor-speech-bubble.simple .doctor-speech-label {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0e7490;
}
.doctor-speech-bubble.simple .doctor-speech-text {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.45;
}
.simple-instruction {
    position: relative;
    margin: 1rem 0 0;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--accent);
    text-align: center;
    background: rgba(34, 211, 238, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(34, 211, 238, 0.25);
}
.voice-agent-patient.simple {
    text-align: center;
    font-size: 0.95rem;
}
.simple-action-zone {
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    border-top: 1px solid var(--border);
    background: rgba(11, 23, 38, 0.65);
}
.patient-details-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.75rem;
}
.patient-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.patient-field:first-child {
    grid-column: 1 / -1;
}
.patient-field-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.patient-field input {
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(15, 30, 48, 0.9);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
}
.patient-field input:focus {
    outline: 2px solid rgba(52, 211, 153, 0.45);
    border-color: rgba(52, 211, 153, 0.5);
}
.patient-field input:disabled {
    opacity: 0.6;
}
/* Keep name + location full width now that capture controls precede the fields. */
.patient-details-form .patient-field:has(#name),
.patient-details-form .patient-field:has(#location) {
    grid-column: 1 / -1;
}
.patient-capture-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.patient-capture-btn {
    flex: 1 1 0;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.12);
    color: #065f46;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.patient-capture-btn.photo {
    border-color: rgba(59, 130, 246, 0.45);
    background: rgba(59, 130, 246, 0.12);
    color: #1e3a8a;
}
.patient-capture-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}
.patient-capture-btn:disabled {
    opacity: 0.55;
    cursor: default;
}
.patient-capture-btn .capture-icon {
    font-size: 1.1rem;
}
.patient-capture-help {
    grid-column: 1 / -1;
    margin: -0.1rem 0 0;
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.35;
}
.patient-gender-detected {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
}
.patient-photo-preview {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.patient-photo-thumb {
    width: 64px;
    height: 64px;
    border-radius: 0.6rem;
    object-fit: cover;
    border: 2px solid rgba(52, 211, 153, 0.5);
}
.patient-photo-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.patient-photo-ok {
    font-size: 0.82rem;
    font-weight: 600;
    color: #059669;
}
.patient-photo-remove {
    align-self: flex-start;
    padding: 0.2rem 0.5rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: transparent;
    color: #b91c1c;
    font-size: 0.76rem;
    cursor: pointer;
}
.patient-photo-remove:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Camera capture modal */
.camera-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(2, 6, 23, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Blur patient/background inside camera feed; keep focus frame sharp */
.camera-feed-blur-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.camera-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(14px);
    transform: scale(1.15);
    transform-origin: center;
}
.camera-video-focus {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.camera-focus-inline {
    clip-path: inset(14% 14% 14% 14% round 0.45rem);
    -webkit-clip-path: inset(14% 14% 14% 14% round 0.45rem);
}
.camera-focus-doc {
    clip-path: inset(18% 8% 18% 8% round 0.6rem);
    -webkit-clip-path: inset(18% 8% 18% 8% round 0.6rem);
}
.camera-focus-face {
    clip-path: inset(12% 22% 12% 22% round 50%);
    -webkit-clip-path: inset(12% 22% 12% 22% round 50%);
}

.camera-modal-inner {
    width: min(560px, 100%);
    background: #0f172a;
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.camera-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.camera-modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
}
.camera-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    font-size: 1rem;
    cursor: pointer;
}
.camera-stage {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 0.75rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.camera-stage.portrait {
    aspect-ratio: 3 / 4;
    max-height: 60vh;
    margin: 0 auto;
}
.camera-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.camera-frame-guide {
    position: absolute;
    pointer-events: none;
    border: 2.5px dashed rgba(52, 211, 153, 0.8);
    border-radius: 0.6rem;
    z-index: 2;
}
.camera-frame-guide.doc {
    inset: 18% 8%;
}
.camera-frame-guide.face {
    inset: 12% 22%;
    border-radius: 50%;
}
.camera-shutter-flash {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    pointer-events: none;
    z-index: 4;
    animation: shutterFlash 0.18s ease-out forwards;
}
@keyframes shutterFlash {
    from { opacity: 0.95; }
    to { opacity: 0; }
}
.camera-busy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.6);
    color: #f1f5f9;
    font-weight: 600;
}
.camera-hint {
    margin: 0;
    font-size: 0.82rem;
    color: #cbd5e1;
    text-align: center;
}
.camera-error {
    margin: 0;
    font-size: 0.85rem;
    color: #fca5a5;
    text-align: center;
}
.camera-actions {
    display: flex;
    gap: 0.6rem;
}
.camera-shutter {
    flex: 2;
    padding: 0.8rem;
    border-radius: 0.7rem;
    border: none;
    background: #34d399;
    color: #052e2b;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}
.camera-shutter:disabled {
    opacity: 0.5;
    cursor: default;
}
.camera-cancel {
    flex: 1;
    padding: 0.8rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: #e2e8f0;
    font-size: 0.9rem;
    cursor: pointer;
}
.simple-primary-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 88px;
    padding: 1rem 1.25rem;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, #34d399 0%, #059669 100%);
    color: #042f1a;
    font: inherit;
    font-weight: 800;
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(52, 211, 153, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}
.simple-primary-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(52, 211, 153, 0.45);
}
.simple-primary-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}
.simple-primary-btn.listening {
    background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
    color: #fff;
    box-shadow: 0 10px 28px rgba(251, 113, 133, 0.4);
    animation: simplePulse 1s ease-in-out infinite alternate;
}
.simple-primary-btn.complete {
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
    color: #fff;
    box-shadow: 0 10px 28px rgba(56, 189, 248, 0.35);
}
@keyframes simplePulse {
    to { box-shadow: 0 0 0 12px rgba(251, 113, 133, 0.15); }
}
.simple-primary-icon {
    font-size: 2rem;
    line-height: 1;
}
.simple-primary-text {
    line-height: 1.3;
    text-align: center;
    max-width: 280px;
}
.simple-link-btn {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.88rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.35rem;
    align-self: center;
}
.simple-link-btn:hover {
    color: var(--accent);
}
.simple-type-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.simple-type-form input {
    flex: 1;
    min-width: 160px;
    margin: 0;
}
.simple-type-form button[type="submit"] {
    flex-shrink: 0;
}
.simple-history-toggle {
    margin: 0 1.25rem 0.75rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    align-self: center;
}
.consultation-transcript.simple {
    max-height: 22vh;
    min-height: 0;
    margin: 0 1.25rem 1rem;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--border);
}

/* —— Human video-call UI —— */
.human-call-ui {
    max-width: 560px;
}
.human-call-ui .virtual-agent {
    background: #0a1018;
    border-color: rgba(255, 255, 255, 0.08);
}
.human-call-ui .virtual-agent-topbar.human {
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.55);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.human-call-ui .virtual-agent-brand h1 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.human-call-ui .virtual-agent-tagline {
    font-size: 0.78rem;
    color: #94a3b8;
}
.human-call-ui .doctor-voice-toggle-image {
    width: 52px;
    height: 52px;
    border-width: 2px;
}
.mini-doctor-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
}
.doctor-stage.human {
    padding: 0;
    border-bottom: none;
    background: #05080e;
    text-align: left;
}
.doctor-scene-3d {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: min(52vh, 420px);
    margin: 0 auto;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, #1e3a4f 0%, #05080e 70%);
    overflow: hidden;
    touch-action: none;
    cursor: grab;
}
.doctor-scene-3d:active {
    cursor: grabbing;
}
.doctor-scene-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.doctor-scene-fallback {
    position: absolute;
    inset: 0;
    transform: perspective(900px) rotateX(4deg);
}
.doctor-scene-fallback .doctor-video-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
}
.doctor-scene-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}
.doctor-scene-3d::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    height: 28%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
    pointer-events: none;
    z-index: 2;
}
.doctor-scene-3d.speaking {
    box-shadow: inset 0 0 80px rgba(52, 211, 153, 0.12);
}
.doctor-video-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
    transition: transform 0.4s ease;
}
.doctor-scene-3d.fallback.speaking .doctor-video-photo {
    transform: scale(1.03);
}
.doctor-scene-3d.fallback.listening .doctor-video-photo {
    transform: scale(1.01);
}
.doctor-video-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 28%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, transparent 45%);
    pointer-events: none;
}
.doctor-video-speaking-ring {
    position: absolute;
    inset: 12px;
    border: 2px solid rgba(52, 211, 153, 0.55);
    border-radius: 12px;
    animation: speakingRing 1.2s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes speakingRing {
    to { opacity: 0.35; inset: 16px; }
}
.doctor-video-listening-pill {
    position: absolute;
    bottom: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.92);
    color: #042f1a;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.listening-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #042f1a;
    animation: listeningDot 0.9s ease-in-out infinite;
}
@keyframes listeningDot {
    50% { transform: scale(1.35); opacity: 0.65; }
}
.doctor-video-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
}
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.55rem;
    border-radius: 6px;
    background: rgba(220, 38, 38, 0.92);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: livePulse 1.2s ease-in-out infinite;
}
.video-status-pill {
    padding: 0.28rem 0.6rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
}
.doctor-video-nameplate {
    position: absolute;
    left: 0.85rem;
    bottom: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    text-align: left;
}
.doctor-video-name {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.doctor-video-title {
    display: block;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 0.1rem;
}
.doctor-video-with {
    display: block;
    font-size: 0.75rem;
    color: rgba(167, 243, 208, 0.95);
    margin-top: 0.25rem;
}
.live-caption {
    margin: 0;
    padding: 0.85rem 1rem 0.65rem;
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.live-caption-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.live-caption-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7dd3fc;
}
.typing-indicator {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
.typing-indicator span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #64748b;
    animation: typingBounce 1s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
    50% { transform: translateY(-3px); opacity: 0.45; }
}
.live-caption-text {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.5;
    color: #f1f5f9;
    font-weight: 450;
}
.live-caption-waves {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 14px;
    margin-top: 0.5rem;
}
.live-caption-waves .wave-bar {
    width: 3px;
    height: 6px;
    border-radius: 2px;
    background: #34d399;
    animation: waveBar 0.45s ease-in-out infinite;
}
.consultation-thread {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: 22vh;
    overflow-y: auto;
    padding: 0.65rem 0.85rem;
    background: rgba(8, 12, 20, 0.9);
}
.thread-message {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    max-width: 92%;
}
.thread-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.thread-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.thread-bubble {
    padding: 0.5rem 0.7rem;
    border-radius: 14px;
    line-height: 1.4;
}
.thread-message.assistant .thread-bubble {
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-left-radius: 4px;
}
.thread-message.user .thread-bubble {
    background: rgba(6, 95, 70, 0.55);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-bottom-right-radius: 4px;
}
.thread-speaker {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 0.15rem;
}
.thread-body {
    font-size: 0.88rem;
    color: #e2e8f0;
    white-space: pre-wrap;
}
.thread-typing {
    font-size: 0.88rem;
    color: #94a3b8;
    font-style: italic;
}
.visit-hint {
    margin: 0;
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #94a3b8;
    text-align: center;
    background: rgba(15, 23, 42, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.human-call-ui .simple-action-zone {
    background: rgba(8, 12, 20, 0.95);
    border-top-color: rgba(255, 255, 255, 0.06);
}
.human-call-ui .patient-field-label {
    color: #cbd5e1;
    font-weight: 500;
}
.human-call-ui .patient-field input {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}
.human-call-ui .simple-primary-btn {
    min-height: 72px;
    font-size: 1.05rem;
    border-radius: 14px;
}
.human-call-ui .voice-agent-status {
    padding: 0 1rem 1rem;
}

/* —— Doctor Appointment style UI —— */
body:has(.appointment-ui) {
    padding: 0;
    background: linear-gradient(165deg, #1e5eff 0%, #1d4ed8 42%, #1e3a8a 100%);
}
.appointment-ui {
    max-width: 420px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 0;
}
.appointment-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 420px;
    margin: 0 auto;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
.appointment-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1.1rem 1rem 0.5rem;
    flex-shrink: 0;
}
.appointment-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    text-align: center;
}
.appointment-header .doctor-voice-toggle {
    position: absolute;
    right: 0.75rem;
    top: 0.65rem;
    margin: 0;
}
.appointment-header .doctor-voice-toggle-image {
    width: 48px;
    height: 48px;
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
}
.appointment-header .doctor-voice-toggle-caption {
    display: none;
}
.appointment-hero {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.35rem 0;
    min-height: 0;
}
.float-icons {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    align-items: center;
    z-index: 2;
}
.float-icon-btn {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #1d4ed8;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2);
    transition: transform 0.15s, box-shadow 0.15s;
    animation: floatIn 0.5s ease backwards;
}
.float-icon-btn:hover {
    transform: scale(1.06);
}
.float-icon-btn.active {
    background: #14b8a6;
    color: #fff;
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.45);
}
.float-icon-svg {
    width: 22px;
    height: 22px;
}
@keyframes floatIn {
    from { opacity: 0; transform: translateY(12px); }
}
.doctor-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: min(42vh, 360px);
    z-index: 1;
}
.doctor-hero-glow {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 40%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
    pointer-events: none;
}
.doctor-hero-img {
    width: min(100%, 280px);
    max-height: min(42vh, 340px);
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.25));
    animation: heroIdle 4s ease-in-out infinite;
}
.doctor-hero.speaking .doctor-hero-img {
    animation: heroSpeak 0.8s ease-in-out infinite alternate;
}
.doctor-hero.listening .doctor-hero-img {
    animation: heroListen 1.2s ease-in-out infinite alternate;
}
@keyframes heroIdle {
    50% { transform: translateY(-6px); }
}
@keyframes heroSpeak {
    to { transform: translateY(-4px) scale(1.02); }
}
@keyframes heroListen {
    to { transform: translateY(-2px); }
}
.doctor-hero-live {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(220, 38, 38, 0.9);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.doctor-hero-listening {
    position: absolute;
    bottom: 12%;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: #14b8a6;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.doctor-hero-patient {
    position: absolute;
    bottom: 4%;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.appointment-sheet {
    flex-shrink: 0;
    background: #fff;
    border-radius: 28px 28px 0 0;
    padding: 0.65rem 1.15rem 1.35rem;
    padding-bottom: max(1.35rem, env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.2);
    max-height: 52vh;
    overflow-y: auto;
}
.sheet-handle {
    width: 40px;
    height: 4px;
    margin: 0 auto 0.75rem;
    border-radius: 999px;
    background: #cbd5e1;
}
.sheet-message {
    margin-bottom: 0.75rem;
}
.sheet-message-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.45rem;
}
.sheet-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 2px solid #e2e8f0;
}
.sheet-message-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}
.sheet-message-role {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
}
.sheet-message-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #334155;
}
.typing-indicator.light span {
    background: #94a3b8;
}
.appointment-ui .consultation-thread {
    max-height: 100px;
    padding: 0;
    margin-bottom: 0.65rem;
    background: #f8fafc;
    border-radius: 12px;
}
.appointment-ui .thread-message.assistant .thread-bubble {
    background: #fff;
    border: 1px solid #e2e8f0;
}
.appointment-ui .thread-message.user .thread-bubble {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}
.appointment-ui .thread-body {
    color: #334155;
}
.appointment-ui .patient-details-form {
    margin-bottom: 0.65rem;
}
.appointment-ui .patient-field-label {
    color: #64748b;
    font-size: 0.72rem;
}
.appointment-ui .patient-field input {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    border-radius: 12px;
}
.appointment-ui .patient-field input:focus {
    outline: 2px solid rgba(20, 184, 166, 0.45);
    border-color: #14b8a6;
}
.sheet-type-form input {
    width: 100%;
    margin: 0 0 0.5rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font: inherit;
    font-size: 0.95rem;
}
.sheet-hint {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    color: #64748b;
    text-align: center;
    line-height: 1.4;
}
.appointment-cta {
    width: 100%;
    min-height: 52px;
    padding: 0.85rem 1.25rem;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, #2dd4bf 0%, #14b8a6 100%);
    color: #fff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(20, 184, 166, 0.4);
    transition: transform 0.15s, box-shadow 0.15s;
}
.appointment-cta:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(20, 184, 166, 0.5);
}
.appointment-cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}
.appointment-cta.listening {
    background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
    box-shadow: 0 10px 28px rgba(251, 113, 133, 0.4);
}
.appointment-cta.complete {
    background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
}
.sheet-link-btn {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    border: 0;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.35rem;
}
.sheet-link-btn:hover {
    color: #14b8a6;
}
.sheet-status {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    text-align: center;
}
.sheet-status.error { color: #e11d48; }
.sheet-status.success { color: #059669; }

/* —— Futuristic HUD Doctor Appointment UI (dark scene + eye-comfort) —— */
:root {
    --hud-page-bg: #0a1220;
    --hud-page-bg-2: #0f172a;
    --hud-surface-bg: rgba(15, 23, 42, 0.72);
    --hud-card-bg: rgba(15, 23, 42, 0.58);
    --hud-panel-bg: rgba(15, 23, 42, 0.82);
    --hud-text: #e2e8f0;
    --hud-muted: #94a3b8;
    --hud-accent: #5eb8c9;
    --hud-accent-hover: #6ec9d9;
    --hud-accent-soft: rgba(94, 184, 201, 0.14);
    --hud-accent-muted: #7aa8b3;
    --hud-border: rgba(94, 184, 201, 0.2);
    --hud-shadow: rgba(0, 0, 0, 0.35);
    --hud-focus: rgba(94, 184, 201, 0.32);
    --hud-scene-glow: rgba(14, 116, 144, 0.22);
}
html:has(.hud-appointment-ui),
body:has(.hud-appointment-ui) {
    background:
        radial-gradient(ellipse 90% 70% at 12% 38%, var(--hud-scene-glow), transparent 58%),
        radial-gradient(ellipse 55% 45% at 88% 18%, rgba(59, 130, 246, 0.08), transparent 52%),
        radial-gradient(ellipse 45% 38% at 72% 82%, rgba(16, 185, 129, 0.05), transparent 48%),
        linear-gradient(165deg, var(--hud-page-bg) 0%, var(--hud-page-bg-2) 48%, #0b1524 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body:has(.hud-appointment-ui) {
    padding: 0;
    display: flex;
    justify-content: center;
    color: var(--hud-text);
}
.hud-appointment-ui {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    overflow-x: hidden;
    background: transparent;
}
.hud-scene-backdrop {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.hud-scene-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(94, 184, 201, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 184, 201, 0.045) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 88% 78% at 50% 42%, #000 12%, transparent 76%);
}
.hud-scene-rings {
    position: absolute;
    left: clamp(2%, 8vw, 10%);
    top: 26%;
    width: min(44vw, 420px);
    height: min(44vw, 420px);
    border-radius: 50%;
    border: 1px solid rgba(94, 184, 201, 0.14);
    box-shadow:
        0 0 0 24px rgba(94, 184, 201, 0.035),
        0 0 0 48px rgba(94, 184, 201, 0.025),
        0 0 0 72px rgba(94, 184, 201, 0.015),
        0 0 90px rgba(14, 116, 144, 0.12);
    opacity: 0.75;
}
.hud-scene-rings::after {
    content: '';
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 1px dashed rgba(94, 184, 201, 0.1);
}
.hud-scene-scanline {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(94, 184, 201, 0.025) 50%, transparent 100%);
    background-size: 100% 6px;
    animation: hudScan 8s linear infinite;
    opacity: 0.35;
}
.hud-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.hud-ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    opacity: 0.28;
    animation: ambientDrift 14s ease-in-out infinite alternate;
}
.hud-ambient-orb.orb-a {
    width: min(55vw, 420px);
    height: min(55vw, 420px);
    top: -12%;
    left: -8%;
    background: rgba(14, 116, 144, 0.45);
}
.hud-ambient-orb.orb-b {
    width: min(45vw, 360px);
    height: min(45vw, 360px);
    bottom: -8%;
    right: -6%;
    background: rgba(16, 185, 129, 0.22);
    animation-delay: -4s;
}
.hud-ambient-orb.orb-c {
    width: min(35vw, 280px);
    height: min(35vw, 280px);
    top: 38%;
    left: 42%;
    background: rgba(59, 130, 246, 0.18);
    animation-delay: -7s;
}
@keyframes ambientDrift {
    to { transform: translate(24px, -18px) scale(1.08); }
}
.hud-appointment-ui .hud-app {
    position: relative;
    z-index: 1;
    background: transparent;
}
.hud-appointment-ui .hud-glass-panel {
    background: var(--hud-panel-bg);
    border: 1px solid var(--hud-border);
    box-shadow:
        0 10px 36px var(--hud-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px) saturate(1.15);
}
.hud-appointment-ui.simple-ui .hud-glass-panel {
    border: 1px solid var(--hud-border);
    box-shadow:
        0 10px 36px var(--hud-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hud-appointment-ui .locale-picker {
    background: var(--hud-surface-bg);
    border-color: var(--hud-border);
}
.hud-appointment-ui .locale-picker-title {
    color: var(--hud-text);
    font-weight: 600;
}
.hud-appointment-ui .locale-picker-sub {
    color: var(--hud-muted);
    font-weight: 500;
    line-height: 1.55;
}
.hud-appointment-ui .locale-toggle-btn {
    background: rgba(2, 6, 23, 0.45);
    border-color: var(--hud-border);
    color: var(--hud-muted);
    font-weight: 600;
}
.hud-appointment-ui .locale-toggle-btn:hover:not(:disabled) {
    border-color: rgba(94, 184, 201, 0.32);
    background: rgba(15, 23, 42, 0.65);
    transform: none;
}
.hud-appointment-ui .locale-toggle-btn.active {
    border-color: rgba(94, 184, 201, 0.38);
    background: var(--hud-accent-soft);
    color: var(--hud-text);
    box-shadow: none;
}
.hud-appointment-ui .welcome-hero-badge {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--hud-border);
    color: var(--hud-muted);
}
.hud-appointment-ui .welcome-hero-title {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--hud-text);
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: -0.015em;
}
.hud-appointment-ui .welcome-hero-sub {
    color: var(--hud-muted);
    font-weight: 500;
    line-height: 1.62;
    max-width: 24rem;
}
.hud-appointment-ui .welcome-hero-cta {
    background: linear-gradient(180deg, rgba(94, 184, 201, 0.92) 0%, rgba(71, 151, 166, 0.95) 100%);
    color: #0a1628;
    font-weight: 600;
    min-height: 3.65rem;
    border-radius: 16px;
    animation: none;
    box-shadow: 0 6px 22px rgba(14, 116, 144, 0.28);
}
.hud-appointment-ui .welcome-hero-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.55rem;
}
.hud-appointment-ui .welcome-hero-mic-btn {
    width: clamp(5.5rem, 22vw, 6.75rem);
    height: clamp(5.5rem, 22vw, 6.75rem);
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    color: #ffffff;
    background: linear-gradient(145deg, #38bdf8 0%, #0ea5e9 48%, #0284c7 100%);
    box-shadow:
        0 14px 36px rgba(14, 116, 144, 0.42),
        0 0 0 4px rgba(56, 189, 248, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hud-appointment-ui .welcome-hero-mic-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        0 18px 42px rgba(14, 116, 144, 0.48),
        0 0 0 5px rgba(56, 189, 248, 0.18),
        inset 0 2px 0 rgba(255, 255, 255, 0.32);
}
.hud-appointment-ui .welcome-hero-mic-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.hud-appointment-ui .simple-action-row {
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 4vw, 1.25rem);
}
.hud-appointment-ui .simple-flow-mic-btn {
    width: clamp(4.75rem, 18vw, 5.75rem);
    height: clamp(4.75rem, 18vw, 5.75rem);
}
.hud-appointment-ui .simple-skip-btn {
    background: rgba(15, 23, 42, 0.55);
    border: 1px dashed var(--hud-border);
    color: var(--hud-muted);
    box-shadow: none;
}
.hud-appointment-ui .simple-skip-btn:hover:not(:disabled) {
    border-color: rgba(94, 184, 201, 0.35);
    color: var(--hud-text);
}
.hud-appointment-ui .welcome-hero-mic-btn.listening {
    background: linear-gradient(145deg, #f87171 0%, #ef4444 55%, #dc2626 100%);
    box-shadow:
        0 14px 36px rgba(220, 38, 38, 0.35),
        0 0 0 4px rgba(248, 113, 113, 0.2);
}
.hud-appointment-ui .welcome-hero-mic-icon {
    width: clamp(2rem, 8vw, 2.55rem);
    height: clamp(2rem, 8vw, 2.55rem);
}
.hud-appointment-ui .welcome-hero-tap-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    margin: 0.15rem 0 0;
    color: var(--hud-muted);
}
.hud-appointment-ui .welcome-hero-tap-hint .hud-tap-finger {
    font-size: clamp(1.65rem, 7vw, 2rem);
    line-height: 1;
    transform: rotate(-12deg);
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}
.hud-appointment-ui .welcome-hero-tap-label {
    font-size: clamp(0.95rem, 3.8vw, 1.05rem);
    font-weight: 600;
    color: var(--hud-text);
}
.hud-appointment-ui .welcome-hero-tap-hint.listening .welcome-hero-tap-label {
    color: #fca5a5;
}
.hud-appointment-ui .welcome-hero-cta:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(110, 201, 217, 0.95) 0%, rgba(82, 165, 180, 0.98) 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 26px rgba(14, 116, 144, 0.32);
}
.hud-appointment-ui .welcome-hero-cta-glow {
    display: none;
}
.hud-appointment-ui .welcome-hero-cta-text {
    font-weight: 600;
}
.hud-appointment-ui .welcome-hero-cta.listening {
    background: linear-gradient(180deg, rgba(180, 120, 120, 0.92), rgba(150, 95, 95, 0.95));
    color: #fff;
}
.hud-appointment-ui .welcome-hero-hint {
    color: var(--hud-muted);
    font-weight: 500;
}
.hud-appointment-ui .agent-listen-btn {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--hud-border);
    color: var(--hud-text);
    font-weight: 600;
    box-shadow: none;
}
.hud-appointment-ui .agent-listen-btn.speaking {
    border-color: rgba(180, 155, 90, 0.35);
    background: rgba(120, 90, 40, 0.22);
    color: #e8dcc4;
}
.hud-appointment-ui .hud-guest-btn {
    background: linear-gradient(180deg, rgba(94, 184, 201, 0.92) 0%, rgba(71, 151, 166, 0.95) 100%);
    color: #0a1628;
    font-weight: 600;
    box-shadow: 0 6px 22px rgba(14, 116, 144, 0.24);
}
.hud-appointment-ui .hud-guest-btn:hover:not(:disabled) {
    box-shadow: 0 8px 26px rgba(14, 116, 144, 0.3);
    transform: translateY(-1px);
}
.hud-appointment-ui .hud-guest-btn.listening {
    background: linear-gradient(180deg, rgba(180, 120, 120, 0.92), rgba(150, 95, 95, 0.95));
    color: #fff;
}
.hud-appointment-ui .hud-guest-btn.complete {
    background: linear-gradient(180deg, rgba(96, 140, 190, 0.92), rgba(70, 110, 170, 0.95));
    color: #fff;
}
.hud-appointment-ui.simple-ui .hud-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}
.hud-appointment-ui .hud-title {
    font-weight: 600;
    color: var(--hud-text);
    text-shadow: 0 0 28px rgba(94, 184, 201, 0.18);
}
.hud-appointment-ui.simple-ui .hud-more-options summary {
    color: var(--hud-muted);
    font-weight: 500;
}
.hud-appointment-ui .video-call-card {
    background: var(--hud-card-bg);
    border: 1px solid var(--hud-border);
    box-shadow:
        0 12px 36px var(--hud-shadow),
        0 0 48px rgba(14, 116, 144, 0.08);
    backdrop-filter: blur(12px);
}
.hud-appointment-ui .video-call-avatar-wrap {
    background: rgba(2, 6, 23, 0.35);
    box-shadow:
        0 8px 24px var(--hud-shadow),
        inset 0 0 0 1px rgba(94, 184, 201, 0.12);
}
.hud-appointment-ui .video-call-avatar-wrap.is-listening {
    box-shadow:
        0 8px 24px var(--hud-shadow),
        0 0 0 2px rgba(180, 120, 120, 0.45);
}
.hud-appointment-ui .video-call-avatar-wrap.is-speaking {
    box-shadow:
        0 8px 24px var(--hud-shadow),
        0 0 0 2px rgba(94, 184, 201, 0.38);
}
.hud-appointment-ui .video-call-hint {
    background: rgba(15, 23, 42, 0.88);
    color: var(--hud-text);
    font-weight: 600;
    box-shadow: 0 4px 16px var(--hud-shadow);
    border: 1px solid var(--hud-border);
}
.hud-appointment-ui .vc-btn {
    background: rgba(15, 23, 42, 0.72);
    color: var(--hud-text);
    border: 1px solid var(--hud-border);
    box-shadow: 0 4px 14px var(--hud-shadow);
}
.hud-appointment-ui .vc-btn-active {
    background: rgba(120, 70, 70, 0.35);
    color: #f0caca;
    box-shadow: 0 0 0 1px rgba(180, 120, 120, 0.28);
}
.hud-appointment-ui .vc-btn-on {
    background: var(--hud-accent-soft);
    color: var(--hud-accent);
}
.hud-appointment-ui .visit-complete-title {
    color: var(--hud-text);
    font-weight: 600;
}
.hud-appointment-ui .visit-complete-sub {
    color: var(--hud-muted);
}
.hud-appointment-ui .visit-complete-ring {
    background: var(--hud-accent-soft);
    border-color: rgba(94, 184, 201, 0.35);
    box-shadow: none;
    animation: none;
}
.hud-appointment-ui .visit-complete-check,
.hud-appointment-ui .visit-complete-kicker {
    color: var(--hud-accent);
}
body:has(.hud-appointment-ui) .mp-nav {
    background: rgba(8, 17, 31, 0.9);
    border: 1px solid rgba(94, 184, 201, 0.12);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(14px);
}
body:has(.hud-appointment-ui) .mp-nav-item {
    color: var(--hud-muted);
}
body:has(.hud-appointment-ui) .mp-nav-icon {
    background: rgba(255, 255, 255, 0.04);
}
body:has(.hud-appointment-ui) .mp-nav-item.active {
    color: var(--hud-text);
}
body:has(.hud-appointment-ui) .mp-nav-item.active .mp-nav-icon {
    background: var(--hud-accent-soft);
    color: var(--hud-accent);
    box-shadow: 0 0 18px rgba(94, 184, 201, 0.2);
}
body:has(.hud-appointment-ui) .tone-teal {
    --tone: #5eb8c9;
    --tone-2: #479aaa;
}

/* —— Simple UI (illiterate-friendly Hindi) —— */
.simple-ui {
    font-size: 18px;
}
.simple-ui .hud-title {
    font-size: 1.45rem;
    font-weight: 900;
}
.simple-ui .hud-header-meta {
    font-size: 1.1rem;
    letter-spacing: 0;
    text-transform: none;
}
.simple-step-progress {
    display: flex;
    justify-content: space-between;
    gap: 0.2rem;
    margin: 0 0 0.55rem;
    padding: 0.35rem 0.15rem;
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.35);
}
.simple-step-dot {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem 0.1rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s, transform 0.2s;
}
.simple-step-dot:disabled,
.simple-step-dot.locked {
    cursor: not-allowed;
    opacity: 0.3;
}
.simple-step-dot:not(:disabled):not(.locked):hover {
    opacity: 0.85;
    transform: scale(1.05);
}
.simple-step-dot.done,
.simple-step-dot.active {
    opacity: 1;
}
.simple-step-dot.active {
    transform: scale(1.08);
}
.simple-step-dot.active .simple-step-icon {
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.55);
}
.simple-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    font-size: 1.15rem;
    background: rgba(15, 23, 42, 0.7);
}
.simple-step-label {
    font-size: 0.58rem;
    font-weight: 800;
    color: #cbd5e1;
    line-height: 1.1;
    text-align: center;
}
.simple-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin: 0.25rem 0 0.5rem;
    padding: 0.5rem 0.25rem;
    text-align: center;
}
.simple-prompt-icon {
    font-size: clamp(2.8rem, 12vw, 3.6rem);
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
.simple-prompt-text {
    margin: 0;
    font-size: clamp(1.35rem, 5.5vw, 1.75rem);
    font-weight: 900;
    color: #f8fafc;
    letter-spacing: 0.01em;
    line-height: 1.2;
}
.simple-prompt.listening .simple-prompt-icon,
.simple-prompt.thinking .simple-prompt-icon {
    animation: simplePulse 1s ease-in-out infinite alternate;
}
@keyframes simplePulse {
    to { transform: scale(1.12); }
}
.simple-hear-again {
    display: block;
    width: 100%;
    margin: 0 0 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(125, 211, 252, 0.35);
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.5);
    color: #7dd3fc;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}
.simple-hear-again:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.hud-voice-hint {
    margin: 0 0 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(250, 204, 21, 0.35);
    color: #fde68a;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.35;
}
.hud-voice-hint-btn {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fef08a;
    font: inherit;
    font-weight: 900;
    text-decoration: underline;
    cursor: pointer;
}
.hud-voice-hint-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.agent-listen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0 0 0.55rem;
    padding: 0.85rem 1rem;
    border: 2px solid rgba(52, 211, 153, 0.65);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.35), rgba(6, 95, 70, 0.55));
    color: #ecfdf5;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
}
.agent-listen-btn.speaking {
    border-color: rgba(250, 204, 21, 0.7);
    background: linear-gradient(145deg, rgba(234, 179, 8, 0.35), rgba(120, 53, 15, 0.45));
    color: #fef9c3;
}
.agent-listen-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.agent-listen-icon {
    font-size: 1.5rem;
    line-height: 1;
}
.agent-listen-label {
    line-height: 1.2;
}
.simple-action-speaking-camera {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.inline-speaking-camera-btn {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    padding: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(145deg, #818cf8 0%, #6366f1 48%, #4f46e5 100%);
    box-shadow:
        0 14px 36px rgba(79, 70, 229, 0.35),
        0 0 0 4px rgba(129, 140, 248, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.inline-speaking-camera-btn.live {
    background: #000;
    box-shadow:
        0 14px 36px rgba(79, 70, 229, 0.35),
        0 0 0 4px rgba(129, 140, 248, 0.2);
}
.inline-speaking-camera-btn.listening {
    animation: speakingCameraPulse 0.9s ease-in-out infinite alternate;
}
.inline-speaking-camera-btn.captured {
    box-shadow:
        0 14px 36px rgba(79, 70, 229, 0.35),
        0 0 0 4px rgba(52, 211, 153, 0.35);
}
.inline-speaking-camera-btn.error {
    background: linear-gradient(145deg, #64748b 0%, #475569 100%);
}
@keyframes speakingCameraPulse {
    to { box-shadow: 0 0 22px rgba(129, 140, 248, 0.55); }
}
.hud-appointment-ui .inline-speaking-camera-btn {
    width: clamp(4.75rem, 18vw, 5.75rem);
    height: clamp(4.75rem, 18vw, 5.75rem);
}
.photo-consent-actions {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    max-width: 22rem;
    padding: 0.15rem 0;
}
.photo-consent-btn {
    flex: 1 1 8.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.85rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.75rem;
    border: 2px solid transparent;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.photo-consent-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}
.photo-consent-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.photo-consent-btn.yes {
    color: #064e3b;
    background: linear-gradient(180deg, #a7f3d0 0%, #6ee7b7 100%);
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.22);
}
.photo-consent-btn.no {
    color: #7f1d1d;
    background: linear-gradient(180deg, #fecaca 0%, #fca5a5 100%);
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.15);
}
.photo-consent-btn-icon {
    font-size: 1rem;
    line-height: 1;
}
.photo-consent-btn-label {
    line-height: 1.2;
    text-align: center;
}

/* Unified patient photo step — ask / capture / done */
.patient-photo-step {
    width: min(100%, 22rem);
    margin: 0 auto 0.75rem;
    text-align: center;
}
.patient-photo-step.ask {
    padding: 0.35rem 0.5rem 0.15rem;
}
.patient-photo-step-badge {
    font-size: 2.25rem;
    line-height: 1;
    margin-bottom: 0.35rem;
}
.patient-photo-step-title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.05rem, 4.5vw, 1.25rem);
    font-weight: 800;
    line-height: 1.35;
    color: #f8fafc;
}
.patient-photo-step-sub {
    margin: 0 0 0.85rem;
    font-size: 0.88rem;
    color: rgba(226, 232, 240, 0.78);
    line-height: 1.4;
}
.patient-photo-step-actions {
    display: flex;
    gap: 0.65rem;
    justify-content: center;
    margin-bottom: 0.55rem;
}
.patient-photo-step-btn {
    flex: 1 1 7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 3.25rem;
    padding: 0.65rem 1rem;
    border-radius: 0.85rem;
    border: 2px solid transparent;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.patient-photo-step-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}
.patient-photo-step-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.patient-photo-step-btn.yes {
    color: #064e3b;
    background: linear-gradient(180deg, #a7f3d0 0%, #6ee7b7 100%);
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.24);
}
.patient-photo-step-btn.no {
    color: #7f1d1d;
    background: linear-gradient(180deg, #fecaca 0%, #fca5a5 100%);
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 10px 24px rgba(239, 68, 68, 0.16);
}
.patient-photo-step-btn-icon {
    font-size: 1.1rem;
    line-height: 1;
}
.patient-photo-step-voice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 auto;
    padding: 0.45rem 0.75rem;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
    color: rgba(226, 232, 240, 0.88);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.patient-photo-step-voice:hover:not(:disabled) {
    background: rgba(30, 41, 59, 0.75);
}
.patient-photo-step-voice.listening {
    color: #a5b4fc;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.35);
}
.patient-photo-step-voice:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.patient-photo-step-voice-icon {
    width: 1rem;
    height: 1rem;
}
.patient-photo-step.capture {
    padding: 0.15rem 0.5rem 0.25rem;
}
.patient-photo-step-look {
    margin: 0 0 0.55rem;
    font-size: clamp(1rem, 4.2vw, 1.15rem);
    font-weight: 700;
    color: #e2e8f0;
}
.patient-photo-step-camera {
    position: relative;
    width: min(100%, 16rem);
    aspect-ratio: 3 / 4;
    margin: 0 auto 0.55rem;
    border-radius: 1rem;
    overflow: hidden;
    background: #0f172a;
    box-shadow:
        0 16px 40px rgba(15, 23, 42, 0.55),
        0 0 0 3px rgba(129, 140, 248, 0.18);
}
.patient-photo-step-camera.live {
    box-shadow:
        0 16px 40px rgba(15, 23, 42, 0.55),
        0 0 0 3px rgba(129, 140, 248, 0.35);
}
.patient-photo-step-camera.error {
    display: grid;
    place-items: center;
    padding: 1rem;
}
.patient-photo-step-face-guide {
    position: absolute;
    inset: 10% 18%;
    pointer-events: none;
    border: 2px dashed rgba(167, 243, 208, 0.85);
    border-radius: 50%;
    z-index: 2;
}
.patient-photo-step-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: rgba(226, 232, 240, 0.7);
    background: rgba(15, 23, 42, 0.65);
    z-index: 3;
}
.patient-photo-step-error {
    margin: 0;
    padding: 0 1rem;
    font-size: 0.92rem;
    color: #fecaca;
    line-height: 1.4;
}
.patient-photo-step-hint {
    margin: 0;
    font-size: 0.84rem;
    color: rgba(226, 232, 240, 0.72);
}
.patient-photo-step.done {
    padding: 0.25rem 0.5rem 0.35rem;
}
.patient-photo-step-done-ring {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.45rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #6ee7b7 0%, #34d399 100%);
    color: #064e3b;
    font-size: 1.35rem;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(52, 211, 153, 0.35);
}
.patient-photo-step-thumb {
    width: min(100%, 7.5rem);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.75rem;
    margin: 0 auto 0.5rem;
    display: block;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.45);
}
.patient-photo-step-done-text {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #a7f3d0;
}
.patient-photo-step-open-camera,
.patient-photo-step-shutter {
    display: block;
    width: min(100%, 14rem);
    margin: 0.45rem auto 0.35rem;
    min-height: 2.75rem;
    padding: 0.6rem 1rem;
    border: 0;
    border-radius: 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}
.patient-photo-step-open-camera {
    color: #1e1b4b;
    background: linear-gradient(180deg, #c7d2fe 0%, #a5b4fc 100%);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.28);
}
.patient-photo-step-shutter {
    color: #064e3b;
    background: linear-gradient(180deg, #a7f3d0 0%, #6ee7b7 100%);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.24);
}
.patient-photo-step-skip {
    display: block;
    width: min(100%, 14rem);
    margin: 0.35rem auto 0;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-radius: 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
}
.patient-photo-step-skip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.patient-photo-step-open-camera:disabled,
.patient-photo-step-shutter:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.step-photo-consent .hud-speaking-status {
    display: none;
}

.simple-action-id-scan {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.inline-id-camera-btn {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    padding: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #ffffff;
    background: linear-gradient(145deg, #34d399 0%, #059669 48%, #047857 100%);
    box-shadow:
        0 14px 36px rgba(4, 120, 87, 0.35),
        0 0 0 4px rgba(52, 211, 153, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.inline-id-camera-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        0 18px 42px rgba(4, 120, 87, 0.42),
        0 0 0 5px rgba(52, 211, 153, 0.18),
        inset 0 2px 0 rgba(255, 255, 255, 0.28);
}
.inline-id-camera-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.inline-id-camera-btn.live {
    background: #000;
    box-shadow:
        0 14px 36px rgba(4, 120, 87, 0.35),
        0 0 0 4px rgba(52, 211, 153, 0.2);
}
.inline-id-camera-btn.scanning {
    animation: idScanPulse 0.9s ease-in-out infinite alternate;
}
.inline-id-camera-btn.error {
    background: linear-gradient(145deg, #64748b 0%, #475569 100%);
}
@keyframes idScanPulse {
    to { box-shadow: 0 0 22px rgba(52, 211, 153, 0.55); }
}
.inline-id-fallback-icon {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    line-height: 1;
}
.inline-id-frame-guide {
    position: absolute;
    inset: 14%;
    pointer-events: none;
    border: 2px dashed rgba(52, 211, 153, 0.85);
    border-radius: 0.45rem;
    z-index: 2;
}
.inline-id-busy {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(2, 6, 23, 0.55);
    color: #ecfdf5;
    font-size: 1.5rem;
    font-weight: 700;
    z-index: 3;
}
.simple-action-row .welcome-hero-tap-hint.scanning .welcome-hero-tap-label {
    color: #6ee7b7;
}
.hud-appointment-ui .inline-id-camera-btn {
    width: clamp(4.75rem, 18vw, 5.75rem);
    height: clamp(4.75rem, 18vw, 5.75rem);
}
.simple-action-quick-photo {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.inline-quick-photo-btn {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    padding: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #ffffff;
    background: linear-gradient(145deg, #818cf8 0%, #6366f1 48%, #4f46e5 100%);
    box-shadow:
        0 14px 36px rgba(79, 70, 229, 0.35),
        0 0 0 4px rgba(129, 140, 248, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.inline-quick-photo-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.03);
}
.inline-quick-photo-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.inline-quick-photo-btn.live {
    background: #000;
    box-shadow:
        0 14px 36px rgba(79, 70, 229, 0.35),
        0 0 0 4px rgba(129, 140, 248, 0.2);
}
.inline-quick-photo-btn.captured {
    box-shadow:
        0 14px 36px rgba(79, 70, 229, 0.35),
        0 0 0 4px rgba(52, 211, 153, 0.35);
}
.inline-quick-photo-btn.error {
    background: linear-gradient(145deg, #64748b 0%, #475569 100%);
}
.inline-quick-photo-frame {
    position: absolute;
    inset: 12% 22%;
    pointer-events: none;
    border: 2px dashed rgba(129, 140, 248, 0.9);
    border-radius: 50%;
    z-index: 2;
}
.hud-appointment-ui .inline-quick-photo-btn {
    width: clamp(4.75rem, 18vw, 5.75rem);
    height: clamp(4.75rem, 18vw, 5.75rem);
}
.simple-action-row .welcome-hero-tap-hint.captured .welcome-hero-tap-label {
    color: #a5b4fc;
}

.simple-action-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0.75rem, 4vw, 1.25rem);
    margin: 0 0 0.55rem;
}
.simple-action-mic {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.simple-flow-mic-btn {
    width: clamp(4.75rem, 18vw, 5.75rem);
    height: clamp(4.75rem, 18vw, 5.75rem);
    cursor: pointer;
}
.welcome-hero-mic-btn {
    cursor: pointer;
}
.simple-action-row .welcome-hero-tap-hint {
    margin-top: 0.12rem;
}
.simple-skip-btn {
    flex: 0 0 auto;
    min-width: 5.5rem;
    min-height: 4.5rem;
    margin-bottom: 0.15rem;
    cursor: pointer;
}
.simple-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 72px;
    padding: 0.5rem 0.35rem;
    border: 0;
    border-radius: 16px;
    font: inherit;
    cursor: pointer;
    transition: transform 0.12s;
}
.simple-btn:active:not(:disabled) {
    transform: scale(0.97);
}
.simple-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.simple-btn.mic {
    flex: 2;
    background: linear-gradient(145deg, #22d3ee, #0891b2);
    color: #042f2e;
    box-shadow: 0 8px 24px rgba(34, 211, 238, 0.45);
}
.simple-btn.mic.listening {
    background: linear-gradient(145deg, #fb7185, #e11d48);
    color: #fff;
    animation: hudMicListen 0.9s ease-in-out infinite alternate;
}
.simple-btn.skip {
    flex: 1;
    background: rgba(71, 85, 105, 0.85);
    color: #f1f5f9;
    border: 2px dashed rgba(148, 163, 184, 0.5);
}
.simple-btn-icon {
    font-size: 1.75rem;
    line-height: 1;
}
.simple-btn-label {
    font-size: 1.05rem;
    font-weight: 900;
}
.simple-ui .hud-guest-btn {
    min-height: 64px;
    font-size: 1.35rem;
    font-weight: 900;
}
.simple-ui .health-symptom-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 280px;
    gap: 0.55rem;
}
.simple-ui .health-symptom-card {
    min-height: 88px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.simple-ui .health-symptom-card:hover:not(:disabled) {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
}
.step-guest .hud-glass-panel {
    border-color: rgba(34, 211, 238, 0.32);
}
.simple-ui .hud-title {
    background: linear-gradient(90deg, #f8fafc, #7dd3fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.simple-ui .health-symptom-art {
    width: 3rem;
    height: 3rem;
    font-size: 1.65rem;
}
.simple-ui .health-symptom-label {
    font-size: 0.78rem;
    font-weight: 800;
}
.simple-ui .health-symptom-picker-title {
    font-size: 1.15rem;
}
.simple-ui .hud-speak-cta {
    font-size: clamp(1.05rem, 4vw, 1.25rem);
    padding: 0.55rem 1rem;
}
.simple-ui .hud-speak-mic-label {
    font-size: 1.15rem;
}
.simple-ui .hud-status {
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
}
.simple-ui .hud-more-options {
    margin-top: 0.35rem;
    text-align: center;
}
.simple-ui .hud-more-options summary {
    font-size: 0.75rem;
    color: #64748b;
    cursor: pointer;
    list-style: none;
}
.simple-ui .hud-more-options summary::-webkit-details-marker {
    display: none;
}
.simple-ui .hud-more-options .hud-auth-row {
    margin-top: 0.4rem;
}
.simple-ui .hud-glass-panel {
    padding: 0.75rem 0.85rem 1rem;
    border: 1px solid rgba(125, 211, 252, 0.22);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 24px 48px rgba(0, 0, 0, 0.35),
        0 0 80px rgba(34, 211, 238, 0.08);
}
.simple-ui .hud-glass-panel.panel-welcome,
.simple-ui .hud-glass-panel.panel-complete {
    justify-content: center;
    text-align: center;
}
.step-complete .hud-speak-overlay,
.step-welcome .hud-speak-overlay {
    opacity: 1;
}
.step-complete .doctor-hud-stage {
    box-shadow:
        0 0 0 2px rgba(52, 211, 153, 0.45),
        0 0 48px rgba(52, 211, 153, 0.2);
}
.step-complete .hud-speak-overlay {
    display: none;
}
.locale-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.85rem 0.75rem;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(125, 211, 252, 0.22);
}
.locale-picker-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
    color: #e0f2fe;
}
.locale-picker-sub {
    margin: 0;
    font-size: 0.78rem;
    text-align: center;
    color: var(--muted);
    line-height: 1.4;
}
.locale-picker-us .locale-picker-title,
.locale-picker-us .locale-picker-sub {
    text-align: center;
}
.locale-picker-hi-only {
    text-align: center;
}
.locale-picker-hi-pill {
    display: inline-block;
    margin: 0 auto 0.45rem;
    padding: 0.28rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(94, 184, 201, 0.28);
    background: rgba(94, 184, 201, 0.12);
    color: var(--hud-accent, #5eb8c9);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.hud-appointment-ui .locale-picker-hi-pill {
    color: var(--hud-accent);
    border-color: rgba(94, 184, 201, 0.32);
    background: var(--hud-accent-soft, rgba(94, 184, 201, 0.14));
}
.locale-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.15rem;
}
.locale-toggle-btn {
    padding: 0.65rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(30, 41, 59, 0.7);
    color: #f1f5f9;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.locale-toggle-btn:hover:not(:disabled) {
    border-color: rgba(56, 189, 248, 0.65);
    transform: translateY(-1px);
}
.locale-toggle-btn.active {
    border-color: #38bdf8;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(56, 189, 248, 0.2));
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4), 0 8px 20px rgba(14, 165, 233, 0.15);
    color: #e0f2fe;
}
.locale-toggle-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.locale-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
}
.locale-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 4.5rem;
    padding: 0.45rem 0.55rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(30, 41, 59, 0.65);
    color: #f1f5f9;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.locale-chip:hover:not(:disabled) {
    border-color: rgba(56, 189, 248, 0.65);
    transform: translateY(-1px);
}
.locale-chip.active {
    border-color: #38bdf8;
    background: rgba(14, 165, 233, 0.22);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
}
.locale-chip:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.locale-chip-label {
    font-size: 0.92rem;
    font-weight: 800;
}
.locale-chip-tag {
    font-size: 0.62rem;
    color: var(--muted);
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}
.report-doctor-grid .problem.clinical {
    font-style: italic;
    color: #cbd5e1;
}
.welcome-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem 0.15rem 0.5rem;
    animation: welcomeIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes welcomeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.welcome-hero-badge {
    margin: 0;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.2), rgba(52, 211, 153, 0.2));
    border: 1px solid rgba(125, 211, 252, 0.35);
    color: #a5f3fc;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.welcome-hero-emoji {
    margin: 0;
    font-size: clamp(3rem, 14vw, 4rem);
    line-height: 1;
    animation: welcomeWave 2s ease-in-out infinite;
}
@keyframes welcomeWave {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(12deg) scale(1.05); }
    75% { transform: rotate(-8deg) scale(1.02); }
}
.welcome-hero-title {
    margin: 0;
    font-size: clamp(1.5rem, 6vw, 2rem);
    font-weight: 900;
    background: linear-gradient(135deg, #f8fafc 0%, #7dd3fc 55%, #6ee7b7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.15;
}
.welcome-hero-sub {
    margin: 0;
    max-width: 22rem;
    font-size: clamp(1rem, 4vw, 1.15rem);
    font-weight: 600;
    color: #cbd5e1;
    line-height: 1.45;
}
.welcome-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.15rem 0;
}
.welcome-trust-pill {
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 800;
}
.welcome-hero-cta {
    position: relative;
    width: 100%;
    max-width: 20rem;
    min-height: 4.25rem;
    margin-top: 0.35rem;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 40%, #2dd4bf 100%);
    color: #042f2e;
    font: inherit;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 12px 40px rgba(34, 211, 238, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.25) inset;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: ctaPulse 2.4s ease-in-out infinite;
}
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 12px 40px rgba(34, 211, 238, 0.45), 0 0 0 0 rgba(34, 211, 238, 0.3); }
    50% { box-shadow: 0 16px 48px rgba(34, 211, 238, 0.6), 0 0 0 12px rgba(34, 211, 238, 0); }
}
.welcome-hero-cta:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.02);
}
.welcome-hero-cta:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    animation: none;
}
.welcome-hero-cta.listening {
    background: linear-gradient(135deg, #fb7185, #e11d48);
    color: #fff;
    animation: none;
}
.welcome-hero-cta-glow {
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.35), transparent 30%);
    animation: ctaSpin 3s linear infinite;
    opacity: 0.7;
}
@keyframes ctaSpin {
    to { transform: rotate(360deg); }
}
.welcome-hero-cta-icon,
.welcome-hero-cta-text {
    position: relative;
    z-index: 1;
}
.welcome-hero-cta-icon {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.1rem;
}
.welcome-hero-cta-text {
    display: block;
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    font-weight: 900;
    letter-spacing: 0.02em;
}
.welcome-hero-hint {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
}
.welcome-hero-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.55rem;
}
.welcome-hero-mic-btn {
    width: clamp(5.5rem, 22vw, 6.75rem);
    height: clamp(5.5rem, 22vw, 6.75rem);
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    color: #ffffff;
    background: linear-gradient(145deg, #38bdf8 0%, #0ea5e9 48%, #0284c7 100%);
    box-shadow:
        0 14px 36px rgba(14, 116, 144, 0.42),
        0 0 0 4px rgba(56, 189, 248, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.welcome-hero-mic-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.03);
}
.welcome-hero-mic-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.welcome-hero-mic-btn.listening {
    background: linear-gradient(145deg, #f87171 0%, #ef4444 55%, #dc2626 100%);
}
.welcome-hero-mic-icon {
    width: clamp(2rem, 8vw, 2.55rem);
    height: clamp(2rem, 8vw, 2.55rem);
}
.welcome-hero-tap-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    margin: 0.15rem 0 0;
}
.welcome-hero-tap-hint .hud-tap-finger {
    font-size: clamp(1.65rem, 7vw, 2rem);
    line-height: 1;
    transform: rotate(-12deg);
}
.welcome-hero-tap-label {
    font-size: clamp(0.95rem, 3.8vw, 1.05rem);
    font-weight: 700;
    color: #e2e8f0;
}
.visit-complete {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.2rem 0.25rem;
    animation: welcomeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.visit-complete-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.visit-confetti-piece {
    position: absolute;
    font-size: 1.25rem;
    opacity: 0;
    animation: confettiPop 1.2s ease-out calc(var(--i) * 0.12s) both;
}
.visit-confetti-piece:nth-child(1) { left: 8%; top: 12%; }
.visit-confetti-piece:nth-child(2) { right: 10%; top: 8%; }
.visit-confetti-piece:nth-child(3) { left: 18%; bottom: 28%; }
.visit-confetti-piece:nth-child(4) { right: 16%; bottom: 22%; }
.visit-confetti-piece:nth-child(5) { left: 44%; top: 4%; }
@keyframes confettiPop {
    0% { opacity: 0; transform: translateY(8px) scale(0.5); }
    30% { opacity: 1; transform: translateY(-6px) scale(1.1); }
    100% { opacity: 0.85; transform: translateY(-14px) scale(1); }
}
.visit-complete-ring {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(52, 211, 153, 0.25), rgba(34, 211, 238, 0.15));
    border: 3px solid rgba(52, 211, 153, 0.65);
    box-shadow: 0 0 40px rgba(52, 211, 153, 0.35);
    animation: successRing 1.8s ease-in-out infinite alternate;
}
@keyframes successRing {
    to { box-shadow: 0 0 56px rgba(52, 211, 153, 0.55); transform: scale(1.04); }
}
.visit-complete-check {
    font-size: 2.75rem;
    font-weight: 900;
    color: #6ee7b7;
    line-height: 1;
}
.visit-complete-kicker {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6ee7b7;
}
.visit-complete-title {
    margin: 0;
    font-size: clamp(1.45rem, 5.5vw, 1.85rem);
    font-weight: 900;
    color: #f8fafc;
    line-height: 1.2;
}
.visit-complete-sub {
    margin: 0;
    max-width: 20rem;
    font-size: clamp(0.95rem, 3.8vw, 1.05rem);
    color: #94a3b8;
    line-height: 1.5;
    font-weight: 500;
}
.visit-complete-cta {
    position: relative;
    width: 100%;
    max-width: 20rem;
    min-height: 3.5rem;
    margin-top: 0.35rem;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #14b8a6 100%);
    color: #022c22;
    font: inherit;
    font-size: clamp(1.1rem, 4.5vw, 1.25rem);
    font-weight: 900;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(52, 211, 153, 0.45);
    transition: transform 0.15s ease;
}
.visit-complete-cta:hover {
    transform: translateY(-2px) scale(1.02);
}
.visit-complete-cta-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
    animation: shineSweep 2.5s ease-in-out infinite;
}
@keyframes shineSweep {
    0%, 100% { transform: translateX(-120%); }
    50% { transform: translateX(120%); }
}
.visit-complete-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.15rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    color: #7dd3fc;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid rgba(125, 211, 252, 0.3);
    background: rgba(2, 6, 23, 0.4);
    transition: background 0.15s, color 0.15s;
}
.visit-complete-link:hover {
    background: rgba(34, 211, 238, 0.15);
    color: #bae6fd;
}
.panel-complete .simple-hear-again {
    max-width: 20rem;
    margin-top: 0.25rem;
}

/* —— Sanctuary UI: living orbital experience —— */
.sanctuary-ui {
    animation: sanctuaryBreath 6s ease-in-out infinite;
}
@keyframes sanctuaryBreath {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.03); }
}
.sanctuary-ui .hud-glass-panel.sanctuary-panel {
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.82) 0%, rgba(2, 6, 23, 0.92) 100%);
    backdrop-filter: blur(20px) saturate(1.2);
    animation: panelMorph 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes panelMorph {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.starfield {
    position: absolute;
    inset: 0;
}
.star {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #e2e8f0;
    opacity: 0;
    animation: starTwinkle 2.8s ease-in-out infinite;
}
@keyframes starTwinkle {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.8); }
}
.orbital-steps {
    position: relative;
    width: 100%;
    max-width: 16rem;
    margin: 0 auto 0.65rem;
    aspect-ratio: 1;
}
.orbital-steps-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.orbital-track {
    fill: none;
    stroke: rgba(148, 163, 184, 0.2);
    stroke-width: 4;
}
.orbital-fill {
    fill: none;
    stroke: #22d3ee;
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.6));
    transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.orbital-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    pointer-events: none;
}
.orbital-core-icon {
    font-size: 1.75rem;
    animation: corePulse 2s ease-in-out infinite;
}
.orbital-core-label {
    font-size: 0.72rem;
    font-weight: 900;
    color: #7dd3fc;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
@keyframes corePulse {
    50% { transform: scale(1.12); }
}
.orbital-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    padding: 0.25rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}
.orbital-node.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
}
.orbital-node.done { opacity: 0.85; }
.orbital-node.locked { cursor: not-allowed; opacity: 0.28; }
.orbital-node:not(:disabled):not(.locked):hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}
.orbital-node-glow {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.45), transparent 70%);
    opacity: 0;
    transition: opacity 0.2s;
}
.orbital-node.active .orbital-node-glow { opacity: 1; animation: nodeGlow 1.5s ease-in-out infinite alternate; }
@keyframes nodeGlow {
    to { transform: scale(1.25); opacity: 0.7; }
}
.orbital-node-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 1.2rem;
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid rgba(125, 211, 252, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.orbital-node.active .orbital-node-icon {
    border-color: #22d3ee;
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.55);
}
.orbital-node-label {
    position: relative;
    z-index: 1;
    font-size: 0.58rem;
    font-weight: 800;
    color: #cbd5e1;
}
.sanctuary-prompt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem 0.55rem;
    margin: 0.15rem 0;
}
.sanctuary-prompt-halo {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 7rem;
    height: 7rem;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.halo-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(34, 211, 238, 0.25);
    animation: haloExpand 3s ease-out infinite;
}
.halo-ring.h2 { animation-delay: 1s; }
.halo-ring.h3 { animation-delay: 2s; }
@keyframes haloExpand {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}
.sanctuary-prompt-glyph {
    position: relative;
    z-index: 1;
    font-size: clamp(3rem, 14vw, 4.2rem);
    line-height: 1;
    filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.45));
    animation: glyphFloat 3s ease-in-out infinite;
}
.sanctuary-prompt.listening .sanctuary-prompt-glyph {
    animation: glyphListen 0.8s ease-in-out infinite alternate;
}
@keyframes glyphFloat {
    50% { transform: translateY(-6px); }
}
@keyframes glyphListen {
    to { transform: scale(1.08); filter: drop-shadow(0 0 28px rgba(251, 113, 133, 0.65)); }
}
.sanctuary-prompt-text {
    position: relative;
    z-index: 1;
    margin: 0.35rem 0 0;
    font-size: clamp(1.4rem, 5.8vw, 1.85rem);
    font-weight: 900;
    text-align: center;
    line-height: 1.15;
    background: linear-gradient(120deg, #f8fafc 0%, #a5f3fc 45%, #6ee7b7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sanctuary-mic-well {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 9.5rem;
    margin: 0.25rem 0 0.5rem;
}
.sanctuary-orbit-skip {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    padding: 0.4rem 0.65rem;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.75);
    color: #e2e8f0;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
}
.sanctuary-mic-orb {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(100%, 11rem);
    height: 11rem;
    margin-top: 0.5rem;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #67e8f9 0%, #0891b2 55%, #0e7490 100%);
    color: #042f2e;
    font: inherit;
    cursor: pointer;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 16px 48px rgba(34, 211, 238, 0.45);
    transition: transform 0.15s ease;
}
.sanctuary-mic-orb:hover:not(:disabled) {
    transform: scale(1.04);
}
.sanctuary-mic-orb:disabled { opacity: 0.5; cursor: not-allowed; }
.sanctuary-mic-well.is-recording .sanctuary-mic-orb {
    background: radial-gradient(circle at 35% 30%, #fda4af 0%, #e11d48 55%, #9f1239 100%);
    color: #fff;
    box-shadow: 0 16px 48px rgba(251, 113, 133, 0.5);
}
.sanctuary-ripple {
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    animation: micRipple 2.4s ease-out infinite;
}
.sanctuary-ripple.r2 { animation-delay: 0.8s; }
.sanctuary-ripple.r3 { animation-delay: 1.6s; }
.sanctuary-mic-well.is-recording .sanctuary-ripple {
    border-color: rgba(255, 255, 255, 0.5);
    animation-duration: 1.2s;
}
@keyframes micRipple {
    0% { transform: scale(0.85); opacity: 0.9; }
    100% { transform: scale(1.45); opacity: 0; }
}
.sanctuary-mic-core {
    position: relative;
    z-index: 1;
    font-size: 2.5rem;
}
.sanctuary-mic-caption {
    position: relative;
    z-index: 1;
    margin-top: 0.35rem;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}
.doctor-presence-field {
    position: absolute;
    inset: 12%;
    pointer-events: none;
    z-index: 1;
}
.presence-orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(34, 211, 238, 0.25);
    animation: presenceSpin 24s linear infinite;
}
.presence-orbit.o2 {
    inset: 8%;
    animation-duration: 18s;
    animation-direction: reverse;
    border-color: rgba(52, 211, 153, 0.22);
}
.presence-orbit.o3 {
    inset: 16%;
    animation-duration: 30s;
    border-color: rgba(129, 140, 248, 0.2);
}
@keyframes presenceSpin {
    to { transform: rotate(360deg); }
}
.sound-garden {
    position: absolute;
    left: 50%;
    bottom: 18%;
    width: 12rem;
    height: 4rem;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
}
.sound-petal {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 4px;
    height: 0;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #fb7185, transparent);
    transform-origin: bottom center;
    transform: rotate(calc(var(--i) * 30deg - 75deg));
    animation: petalDance 0.9s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * 0.08s);
}
@keyframes petalDance {
    to { height: 2.5rem; opacity: 1; }
}
.speak-aurora {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 45% at 50% 55%, rgba(124, 58, 237, 0.06), transparent 70%);
    animation: auroraPulse 1.2s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 2;
}
@keyframes auroraPulse {
    to { opacity: 0.5; }
}
.is-listening .doctor-hud-stage {
    box-shadow: none;
}
.is-speaking .doctor-hud-stage {
    box-shadow: none;
}
.is-speaking .doctor-parallax-card {
    box-shadow:
        0 28px 70px rgba(15, 23, 42, 0.18),
        0 0 0 2px rgba(52, 211, 153, 0.45);
}
.welcome-portal {
    position: absolute;
    left: 50%;
    top: 28%;
    width: 10rem;
    height: 10rem;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.welcome-hero { position: relative; }
.portal-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(34, 211, 238, 0.35);
    animation: portalOpen 4s ease-in-out infinite;
}
.portal-ring.p2 { animation-delay: 1.3s; inset: 12%; }
.portal-ring.p3 { animation-delay: 2.6s; inset: 24%; }
@keyframes portalOpen {
    0%, 100% { transform: scale(0.9); opacity: 0.3; }
    50% { transform: scale(1.15); opacity: 0.9; }
}
.victory-bloom {
    position: absolute;
    left: 50%;
    top: 2.5rem;
    width: 10rem;
    height: 10rem;
    transform: translateX(-50%);
    pointer-events: none;
}
.victory-petal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.25rem;
    height: 3.5rem;
    margin: -1.75rem 0 0 -0.625rem;
    border-radius: 50% 50% 20% 20%;
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.9), rgba(34, 211, 238, 0.4));
    transform: rotate(calc(var(--i) * 36deg));
    transform-origin: 50% 100%;
    animation: victoryOpen 1.2s ease-out calc(var(--i) * 0.05s) both;
}
@keyframes victoryOpen {
    from { transform: rotate(calc(var(--i) * 36deg)) scaleY(0.2); opacity: 0; }
    to { transform: rotate(calc(var(--i) * 36deg)) scaleY(1); opacity: 0.85; }
}
.visit-complete { position: relative; overflow: visible; }
.symptom-sanctuary .health-symptom-picker-title {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 900;
    color: #a5f3fc;
}
.symptom-aurora-icon { filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.6)); }
.symptom-constellation {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120%;
    height: 8rem;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.12), transparent 70%);
    pointer-events: none;
    animation: constellationGlow 4s ease-in-out infinite alternate;
}
@keyframes constellationGlow {
    to { opacity: 0.5; transform: translate(-50%, -50%) scale(1.05); }
}
.symptom-sanctuary { position: relative; }
.symptom-orbit-grid {
    position: relative;
    z-index: 1;
}
.symptom-star {
    position: relative;
    overflow: visible;
    animation: starIdle 4s ease-in-out infinite;
    animation-delay: calc(var(--si) * -0.25s);
}
@keyframes starIdle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.symptom-star-trail {
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.35), transparent 65%);
    opacity: 0;
    transition: opacity 0.2s;
}
.symptom-star:hover:not(:disabled) .symptom-star-trail { opacity: 1; }
.symptom-star:hover:not(:disabled) {
    transform: translateY(-6px) scale(1.06);
    z-index: 2;
    box-shadow: 0 16px 40px rgba(34, 211, 238, 0.35);
}
.simple-ui .symptom-orbit-grid .health-symptom-card {
    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
    border-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
    .sanctuary-ui,
    .sanctuary-ui *,
    .star,
    .orbital-fill,
    .halo-ring,
    .sanctuary-ripple,
    .presence-orbit,
    .sound-petal,
    .victory-petal,
    .symptom-star {
        animation: none !important;
        transition: none !important;
    }
    .sanctuary-ui .hud-glass-panel.sanctuary-panel {
        animation: none;
    }
}

.simple-ui .hud-caption {
    display: none;
}
.simple-ui .consultation-thread {
    display: none;
}
.simple-ui .hud-hint {
    display: none;
}
.ip-location-picker {
    margin: 0 0 0.6rem;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(34, 211, 238, 0.35);
    text-align: center;
}
.ip-location-loading {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #7dd3fc;
}
.ip-location-title {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #7dd3fc;
}
.ip-location-value {
    margin: 0 0 0.55rem;
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    font-weight: 900;
    color: #f8fafc;
    line-height: 1.3;
}
.ip-location-actions {
    display: flex;
    gap: 0.5rem;
}
.ip-location-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 52px;
    padding: 0.45rem 0.5rem;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 900;
    cursor: pointer;
}
.ip-location-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ip-location-btn.confirm {
    background: linear-gradient(145deg, #4ade80, #16a34a);
    color: #052e16;
}
.ip-location-btn.change {
    background: rgba(71, 85, 105, 0.9);
    color: #f1f5f9;
    border: 2px dashed rgba(148, 163, 184, 0.45);
}
.hud-app {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    background: var(--hud-page-bg);
    overflow: hidden;
}
.hud-appointment-ui .hud-header {
    display: block;
    text-align: center;
}
.video-call-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(0.75rem, 4vw, 1.25rem);
    width: 100%;
    padding-top: 0;
}
.hud-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0.85rem 1rem 0.35rem;
    flex-shrink: 0;
}
.hud-header-meta {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(125, 211, 252, 0.65);
}
.hud-header-meta.left { justify-self: start; }
.hud-header-meta.right { justify-self: end; }
.hud-header-center {
    grid-column: 2;
    text-align: center;
}
.hud-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.02em;
    text-shadow: 0 0 24px rgba(34, 211, 238, 0.35);
}
.hud-sanctuary-tagline {
    margin: 0.2rem 0 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(110, 231, 183, 0.85);
}
.sanctuary-ui .hud-title {
    background: linear-gradient(90deg, #f8fafc, #7dd3fc, #6ee7b7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.simple-ui .doctor-hud-stage {
    min-height: min(48vh, 420px);
}
.doctor-hud-stage {
    position: relative;
    flex: 1;
    min-height: min(52vh, 460px);
    margin: 0 clamp(0.5rem, 2.5vw, 1rem);
    border-radius: 0;
    overflow: visible;
    background: transparent;
}
.doctor-video-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: clamp(0.25rem, 1.5vw, 0.75rem) 0 clamp(0.35rem, 2vw, 0.75rem);
}
.video-call-card {
    position: relative;
    width: min(100%, 440px);
    min-height: 0;
    padding: clamp(0.65rem, 2.5vw, 1rem);
    border-radius: clamp(18px, 4vw, 28px);
    background: var(--hud-card-bg);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.55rem, 2vw, 0.85rem);
}
.video-call-label {
    position: absolute;
    top: clamp(0.85rem, 3vw, 1.35rem);
    left: clamp(0.85rem, 3vw, 1.35rem);
    z-index: 3;
    margin: 0;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    background: var(--hud-surface-bg);
    color: var(--hud-text);
    font-size: clamp(0.72rem, 2.8vw, 0.82rem);
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    max-width: calc(100% - 1.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.video-call-avatar-btn,
.video-call-avatar-frame {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}
.video-call-avatar-btn {
    cursor: pointer;
}
.video-call-avatar-btn:disabled {
    cursor: not-allowed;
}
.hud-speaking-status {
    margin: 0 0 0.55rem;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(94, 184, 201, 0.18);
    color: var(--hud-muted, #94a3b8);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}
.video-call-avatar-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: clamp(180px, 42vw, 280px);
    max-height: min(52vh, 360px);
    border-radius: clamp(14px, 3vw, 18px);
    overflow: hidden;
    background: #d1d5db;
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.video-call-avatar-wrap.is-listening {
    box-shadow:
        0 12px 32px rgba(15, 23, 42, 0.12),
        0 0 0 3px rgba(251, 113, 133, 0.55);
}
.video-call-avatar-wrap.is-speaking {
    box-shadow:
        0 12px 32px rgba(15, 23, 42, 0.12),
        0 0 0 3px rgba(52, 211, 153, 0.45);
}
.video-call-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}
.video-call-hint {
    position: absolute;
    left: 50%;
    bottom: clamp(0.55rem, 2vw, 0.85rem);
    transform: translateX(-50%);
    margin: 0;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--hud-text);
    font-size: clamp(0.72rem, 2.8vw, 0.82rem);
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
    z-index: 2;
    max-width: calc(100% - 1.5rem);
    text-align: center;
}
.vc-btn {
    width: clamp(44px, 12vw, 52px);
    height: clamp(44px, 12vw, 52px);
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: var(--hud-surface-bg);
    color: var(--hud-text);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.vc-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}
.vc-btn:disabled {
    cursor: not-allowed;
    opacity: 0.85;
}
.vc-btn-video-off {
    background: #3f3f46;
    color: #ffffff;
}
.vc-btn-active {
    background: #fee2e2;
    color: #dc2626;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}
.vc-btn-on {
    background: #ecfdf5;
    color: #059669;
}
.vc-btn-end {
    background: #ef4444;
    color: #ffffff;
}
.vc-icon {
    width: clamp(18px, 4.5vw, 22px);
    height: clamp(18px, 4.5vw, 22px);
    fill: currentColor;
}
.vc-icon-end {
    width: clamp(16px, 4vw, 20px);
    height: clamp(16px, 4vw, 20px);
}
.doctor-video-stage.ready-to-speak .video-call-avatar-wrap {
    transform: scale(1.01);
}
.doctor-video-stage.is-speaking .video-call-avatar {
    animation: hudSpeak 0.9s ease-in-out infinite alternate;
}
.doctor-parallax-scene {
    position: relative;
    width: min(92vw, 360px);
    height: min(60vh, 480px);
    max-height: calc(100% - 0.5rem);
    transform-style: preserve-3d;
}
.doctor-parallax-layer {
    position: absolute;
    border-radius: 28px;
    pointer-events: none;
    transition: transform 0.16s ease-out;
    will-change: transform;
}
.layer-card-ghost {
    width: 68%;
    height: 54%;
    left: 0;
    bottom: 6%;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
}
.layer-card-accent {
    width: 76%;
    height: 70%;
    left: -2%;
    top: 8%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.14);
}
.layer-card-accent-pattern {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 28% 35%, rgba(250, 204, 21, 0.95) 0%, transparent 42%),
        radial-gradient(circle at 72% 68%, rgba(59, 130, 246, 0.85) 0%, transparent 38%),
        linear-gradient(135deg, #fef08a 0%, #fde68a 35%, #93c5fd 70%, #c4b5fd 100%);
}
.doctor-parallax-card-wrap {
    width: 84%;
    height: 88%;
    right: 0;
    top: 6%;
    pointer-events: auto;
}
.doctor-parallax-card {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
    transition: box-shadow 0.2s ease, filter 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.doctor-card-progress {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    right: 0.85rem;
    z-index: 5;
    height: 4px;
    pointer-events: none;
}
.doctor-card-progress-track {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
}
.doctor-card-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 38%;
    height: 100%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}
.doctor-card-badge {
    position: absolute;
    top: 1.35rem;
    right: 0.85rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.92);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.28);
    pointer-events: none;
}
.doctor-card-badge-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
}
.doctor-card-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.04) 24%,
        transparent 48%
    );
}
.hud-speak-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 16px;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.hud-speak-btn:disabled {
    cursor: not-allowed;
}
.doctor-parallax-card:not(:disabled):active {
    filter: brightness(0.97);
}
.doctor-hud-stage.ready-to-speak .doctor-parallax-card {
    cursor: pointer;
    box-shadow: 0 32px 78px rgba(15, 23, 42, 0.22);
}
.doctor-hud-stage.ready-to-speak {
    box-shadow: none;
}
.hud-speak-pulse {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    border: 3px solid rgba(34, 211, 238, 0.65);
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.45);
    animation: hudSpeakPulse 1.8s ease-out infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes hudSpeakPulse {
    0% {
        transform: scale(0.92);
        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5);
        opacity: 1;
    }
    70% {
        transform: scale(1.02);
        box-shadow: 0 0 0 18px rgba(34, 211, 238, 0);
        opacity: 0.35;
    }
    100% {
        transform: scale(1.02);
        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
        opacity: 0;
    }
}
.hud-speak-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.75rem 0.85rem;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.25) 38%, rgba(15, 23, 42, 0.72) 100%);
}
.hud-speak-mic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 88px;
    min-height: 88px;
    padding: 0.5rem;
    border-radius: 50%;
    background: linear-gradient(145deg, #22d3ee 0%, #0891b2 100%);
    color: #042f2e;
    box-shadow:
        0 8px 28px rgba(34, 211, 238, 0.55),
        0 0 0 4px rgba(255, 255, 255, 0.25);
    animation: hudMicBounce 2s ease-in-out infinite;
}
.hud-speak-mic.listening {
    background: linear-gradient(145deg, #fb7185 0%, #e11d48 100%);
    color: #fff;
    animation: hudMicListen 0.9s ease-in-out infinite alternate;
    box-shadow:
        0 8px 28px rgba(251, 113, 133, 0.55),
        0 0 0 4px rgba(255, 255, 255, 0.3);
}
@keyframes hudMicBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes hudMicListen {
    to { transform: scale(1.08); }
}
.hud-mic-svg {
    width: 36px;
    height: 36px;
}
.hud-tap-finger {
    font-size: 1.35rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    animation: hudFingerTap 1.4s ease-in-out infinite;
}
@keyframes hudFingerTap {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(6px) scale(1.05); }
}
.hud-speak-mic-label {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hud-speak-cta {
    margin: 0;
    padding: 0.45rem 0.85rem;
    max-width: 100%;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.95);
    color: #422006;
    font-size: clamp(0.95rem, 3.5vw, 1.1rem);
    font-weight: 800;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.doctor-hud-stage.is-listening .doctor-parallax-card {
    box-shadow:
        0 28px 70px rgba(15, 23, 42, 0.18),
        0 0 0 3px rgba(251, 113, 133, 0.55);
}
.doctor-hud-stage.is-listening {
    box-shadow: none;
}
.doctor-hud-stage.is-listening .hud-speak-cta {
    background: rgba(251, 113, 133, 0.95);
    color: #fff;
}
.hud-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(34, 211, 238, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
    pointer-events: none;
}
.hud-frame {
    position: absolute;
    inset: 10% 6% 14% 6%;
    border: 1px solid rgba(34, 211, 238, 0.45);
    box-shadow:
        0 0 30px rgba(34, 211, 238, 0.15),
        inset 0 0 40px rgba(34, 211, 238, 0.06);
    pointer-events: none;
}
.hud-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: #22d3ee;
    border-style: solid;
}
.hud-corner.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hud-corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.hud-corner.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.hud-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.hud-scanline {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(34, 211, 238, 0.04) 50%, transparent 100%);
    background-size: 100% 8px;
    animation: hudScan 6s linear infinite;
    pointer-events: none;
    opacity: 0.5;
}
@keyframes hudScan {
    to { background-position: 0 100%; }
}
.hud-doctor-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%;
    transition: transform 0.15s ease, filter 0.15s ease;
    pointer-events: none;
}
.doctor-hud-stage.speaking .doctor-parallax-card .hud-doctor-img {
    animation: hudSpeak 0.9s ease-in-out infinite alternate;
}
@keyframes hudSpeak {
    to { transform: scale(1.02); filter: brightness(1.05); }
}
.hud-icon-rail {
    position: absolute;
    right: 0.65rem;
    top: 28%;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    z-index: 6;
    pointer-events: auto;
}
.hud-icon-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    color: #475569;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    transition: background 0.2s, transform 0.15s;
}
.hud-icon-ring:hover {
    transform: scale(1.06);
}
.hud-icon-ring.active {
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.18);
}
.hud-icon-ring .float-icon-svg {
    width: 20px;
    height: 20px;
}
.hud-status-row {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    top: 0.65rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    pointer-events: none;
}
.hud-live {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.5rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    color: #e2e8f0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}
.hud-patient {
    font-size: 0.72rem;
    font-weight: 600;
    color: #a7f3d0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.hud-patient::before {
    content: "रोगी: ";
    color: rgba(167, 243, 208, 0.75);
    font-weight: 500;
}
.hud-glass-panel {
    flex-shrink: 0;
    margin: 0 0.85rem 0.5rem;
    padding: 0.85rem 0.9rem 1rem;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(125, 211, 252, 0.25);
    backdrop-filter: blur(16px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.hud-caption {
    margin-bottom: 0.65rem;
}
.hud-caption-label {
    margin: 0 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #7dd3fc;
    text-transform: uppercase;
}
.hud-caption-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #e2e8f0;
}
.typing-indicator.hud span {
    background: #67e8f9;
}
.hud-appointment-ui .consultation-thread {
    max-height: 72px;
    padding: 0.4rem;
    margin-bottom: 0.5rem;
    background: rgba(2, 6, 23, 0.4);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.hud-appointment-ui .thread-body {
    color: #cbd5e1;
    font-size: 0.8rem;
}
.hud-appointment-ui .patient-details-form {
    margin-bottom: 0.55rem;
}
.hud-appointment-ui .patient-field-label {
    color: #94a3b8;
    font-size: 0.68rem;
}
.hud-appointment-ui .patient-field input {
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(125, 211, 252, 0.2);
    color: #f1f5f9;
    border-radius: 10px;
    font-size: 0.88rem;
}
.hud-type-form input {
    width: 100%;
    margin: 0 0 0.5rem;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    border: 1px solid rgba(125, 211, 252, 0.25);
    background: rgba(2, 6, 23, 0.5);
    color: #f1f5f9;
    font: inherit;
}
.health-symptom-picker {
    margin: 0 0 0.65rem;
}
.health-symptom-picker-title {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #7dd3fc;
    text-align: center;
    letter-spacing: 0.02em;
}
.health-symptom-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
    max-height: 220px;
    overflow-y: auto;
    padding: 0.15rem 0.1rem 0.2rem;
    -webkit-overflow-scrolling: touch;
}
.health-symptom-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 72px;
    padding: 0.35rem 0.2rem 0.4rem;
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.45);
    color: #e2e8f0;
    font: inherit;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.health-symptom-card:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(34, 211, 238, 0.65);
    box-shadow: 0 6px 18px rgba(34, 211, 238, 0.2);
}
.health-symptom-card:active:not(:disabled) {
    transform: scale(0.97);
}
.health-symptom-card:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.health-symptom-card.voice-only {
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.5);
}
.health-symptom-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 1.35rem;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.health-symptom-label {
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    color: #cbd5e1;
}
.hud-glass-panel:has(.health-symptom-picker) .consultation-thread {
    max-height: 52px;
}
@media (max-width: 380px) {
    .health-symptom-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.hud-hint {
    margin: 0 0 0.6rem;
    font-size: 0.72rem;
    color: #94a3b8;
    text-align: center;
}
.hud-guest-btn {
    width: 100%;
    min-height: 52px;
    margin-bottom: 0.5rem;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(90deg, #22d3ee 0%, #06b6d4 50%, #2dd4bf 100%);
    color: #042f2e;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 10px 32px rgba(34, 211, 238, 0.4);
    transition: transform 0.15s, box-shadow 0.15s;
}
.hud-guest-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(34, 211, 238, 0.5);
}
.hud-guest-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.hud-guest-btn.listening {
    background: linear-gradient(90deg, #fb7185, #e11d48);
    color: #fff;
}
.hud-guest-btn.complete {
    background: linear-gradient(90deg, #60a5fa, #2563eb);
    color: #fff;
}
.hud-auth-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.hud-auth-sm {
    min-height: 32px;
    padding: 0.3rem 0.65rem;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    color: #1e3a8a;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.hud-auth-sm:hover:not(:disabled) {
    background: #fff;
}
.hud-auth-sm.active {
    box-shadow: 0 0 0 2px #22d3ee;
}
.hud-auth-sm:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.hud-status {
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
    text-align: center;
    color: #94a3b8;
}
.hud-status.error { color: #fca5a5; }
.hud-status.success { color: #6ee7b7; }
.hud-home-bar {
    flex-shrink: 0;
    width: 36%;
    height: 4px;
    margin: 0.35rem auto 0.65rem;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.35);
}

/* Mobile: compact, full width, safe areas */
@media (max-width: 479px) {
    .hud-header {
        padding: max(0.65rem, env(safe-area-inset-top)) 0.75rem 0.25rem;
    }
    .hud-title { font-size: 1.05rem; }
    .doctor-hud-stage {
        margin: 0 0.45rem;
        min-height: auto;
    }
    .doctor-video-stage {
        padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
    }
    .video-call-card {
        width: 100%;
        padding: 0.6rem;
    }
    .video-call-controls {
        gap: 0.4rem;
    }
    .hud-glass-panel {
        margin: 0 0.45rem max(0.5rem, env(safe-area-inset-bottom));
        padding: 0.75rem 0.8rem 0.9rem;
    }
    .hud-guest-btn {
        font-size: 0.95rem;
        min-height: 48px;
    }
    .hud-appointment-ui .consultation-thread {
        max-height: 64px;
    }
}

/* Large phones / small tablets: centered card */
@media (min-width: 480px) and (max-width: 899px) {
    .hud-appointment-ui {
        max-width: min(600px, 100%);
    }
    .hud-app {
        max-width: min(600px, 100%);
    }
    .video-call-card {
        width: min(100%, 480px);
    }
    .doctor-hud-stage {
        min-height: auto;
    }
    .hud-appointment-ui .consultation-thread {
        max-height: 120px;
    }
    .hud-caption-text { font-size: 0.92rem; }
}

/* Desktop: two-column layout, larger hero + panel */
@media (min-width: 900px) {
    body:has(.hud-appointment-ui) {
        padding: 1rem;
        align-items: flex-start;
    }
    .hud-appointment-ui {
        max-width: min(1180px, 100%);
        min-height: calc(100vh - 2rem);
        min-height: calc(100dvh - 2rem);
        border-radius: 24px;
        border: 1px solid var(--hud-border);
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
        overflow: hidden;
        background: rgba(10, 18, 32, 0.42);
        backdrop-filter: blur(10px);
    }
    .hud-app {
        display: grid;
        grid-template-columns: minmax(360px, 1.05fr) minmax(380px, 1fr);
        grid-template-rows: auto 1fr auto;
        max-width: none;
        width: 100%;
        min-height: calc(100vh - 2rem);
        min-height: calc(100dvh - 2rem);
        padding: 0 1.25rem 0.75rem;
        gap: 0 1.5rem;
        background: transparent;
    }
    .hud-appointment-ui .hud-app {
        background: transparent;
    }
    .hud-header {
        grid-column: 1 / -1;
        padding: 1.1rem 0.25rem 0.65rem;
    }
    .hud-title {
        font-size: clamp(1.35rem, 2vw, 1.75rem);
    }
    .hud-header-meta { font-size: 0.7rem; }
    .doctor-hud-stage {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
        flex: unset;
        min-height: min(68vh, 620px);
        max-height: 78vh;
        align-self: stretch;
        display: flex;
    }
    .doctor-video-stage {
        height: 100%;
        align-items: stretch;
    }
    .video-call-card {
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: min(62vh, 580px);
    }
    .video-call-avatar-wrap {
        max-height: none;
        flex: 1 1 auto;
        aspect-ratio: auto;
        min-height: 280px;
    }
    .hud-icon-ring {
        width: 52px;
        height: 52px;
    }
    .hud-icon-ring .float-icon-svg {
        width: 24px;
        height: 24px;
    }
    .hud-glass-panel {
        grid-column: 2;
        grid-row: 2;
        margin: 0.75rem 0;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        max-height: min(72vh, 620px);
        padding: 1.25rem 1.4rem 1.35rem;
        border-radius: 22px;
    }
    .hud-caption-text {
        font-size: 1rem;
        line-height: 1.55;
    }
    .hud-appointment-ui .consultation-thread {
        max-height: min(220px, 28vh);
        flex: 1 1 auto;
        overflow-y: auto;
    }
    .hud-appointment-ui .thread-body { font-size: 0.88rem; }
    .hud-hint { font-size: 0.8rem; }
    .hud-guest-btn {
        font-size: 1.1rem;
        min-height: 56px;
        margin-top: auto;
    }
    .hud-home-bar {
        grid-column: 1 / -1;
        margin-bottom: 0.5rem;
    }
}

@media (min-width: 1200px) {
    .hud-appointment-ui { max-width: min(1280px, 96vw); }
    .hud-app {
        grid-template-columns: minmax(420px, 1.15fr) minmax(440px, 1fr);
        gap: 0 2rem;
        padding: 0 1.75rem 1rem;
    }
    .doctor-hud-stage { min-height: min(72vh, 680px); }
    .video-call-card { min-height: min(68vh, 640px); }
    .hud-glass-panel { max-height: min(76vh, 680px); }
}

@media (max-width: 640px) {
    .hud-appointment-ui,
    .hud-app {
        max-width: 100%;
    }
    .appointment-ui {
        max-width: 100%;
    }
    .appointment-app {
        max-width: 100%;
    }
    .float-icon-btn {
        width: 42px;
        height: 42px;
    }
    .doctor-hero-img {
        width: min(92vw, 260px);
    }
    .consultation-thread {
        max-height: 18vh;
    }
    .voice-agent-controls { flex-wrap: wrap; }
    .voice-mic-btn { min-width: 3.5rem; }
    .doctor-voice-toggle { margin-left: 0; }
    .voice-agent-header { flex-wrap: wrap; }
    .doctor-stage-inner {
        flex-direction: column;
        align-items: center;
    }
    .doctor-speech-bubble {
        border-radius: 16px;
        max-width: 100%;
    }
    .consultation-transcript { max-height: 22vh; }
}
.card {
    background: rgba(16, 32, 51, 0.92);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 1.5rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.agent-card {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 2rem;
}
.agent-card:before {
    content: "";
    position: absolute;
    inset: -40% -20% auto;
    height: 220px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.18), transparent 65%);
}
h1 { margin: 0 0 0.5rem; font-size: clamp(1.7rem, 3vw, 2.5rem); }
h2 { margin: 0 0 0.75rem; font-size: 1.15rem; }
.muted { color: var(--muted); line-height: 1.55; }
.prompt { font-size: 1.35rem; line-height: 1.45; margin: 1rem 0; }
input, textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    color: var(--text);
    background: var(--card-2);
    font: inherit;
    line-height: 1.5;
}
textarea { min-height: 150px; resize: vertical; }
label {
    display: block;
    color: var(--muted);
    margin: 0.85rem 0 0.35rem;
}
button, a.button {
    border: 0;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-weight: 700;
    cursor: pointer;
    background: var(--accent);
    color: #06202b;
    text-decoration: none;
}
button.secondary { background: #1f3a5a; color: var(--text); border: 1px solid var(--border); }
a.secondary-link { background: #1f3a5a; color: var(--text); border: 1px solid var(--border); }
button.danger { background: var(--danger); color: white; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.controls { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.center-controls { justify-content: center; }
.status { margin-top: 1rem; min-height: 1.25rem; color: var(--muted); }
.status.error { color: #fecdd3; }
.status.success { color: #bbf7d0; }
.saved {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 14px;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.35);
}
.grid {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 1.25rem;
    align-items: stretch;
}
.human-agent {
    position: relative;
    width: 230px;
    height: 220px;
    margin: 0 auto 0.75rem;
}
.agent-button {
    display: block;
    width: 230px;
    height: 220px;
    margin: 0 auto 1rem;
    padding: 0;
    border: 0;
    border-radius: 26px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.agent-button:hover .doctor-figure,
.agent-button:focus-visible .doctor-figure { transform: translateY(-4px) scale(1.02); }
.agent-button:focus-visible { outline: 3px solid rgba(34, 211, 238, 0.65); outline-offset: 6px; }
.doctor-figure {
    position: relative;
    width: 150px;
    height: 205px;
    margin: 0 auto;
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.35));
}
.doctor-head {
    position: absolute;
    top: 0;
    left: 42px;
    width: 66px;
    height: 78px;
    border-radius: 46% 46% 48% 48%;
    background: #f2c7a5;
    z-index: 4;
}
.doctor-hair {
    position: absolute;
    top: -4px;
    left: 38px;
    width: 74px;
    height: 36px;
    border-radius: 38px 38px 18px 18px;
    background: #253044;
    z-index: 5;
}
.doctor-eye {
    position: absolute;
    top: 36px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #102033;
    z-index: 6;
}
.doctor-eye.left { left: 62px; }
.doctor-eye.right { right: 62px; }
.doctor-smile {
    position: absolute;
    top: 53px;
    left: 65px;
    width: 20px;
    height: 10px;
    border-bottom: 3px solid #8b3f3f;
    border-radius: 0 0 20px 20px;
    z-index: 6;
}
.doctor-neck {
    position: absolute;
    top: 70px;
    left: 62px;
    width: 26px;
    height: 24px;
    background: #e9b78f;
    z-index: 2;
}
.doctor-body {
    position: absolute;
    top: 86px;
    left: 14px;
    width: 122px;
    height: 118px;
    border-radius: 34px 34px 18px 18px;
    background: #f8fafc;
    z-index: 3;
}
.scrubs {
    position: absolute;
    top: 97px;
    left: 49px;
    width: 52px;
    height: 98px;
    border-radius: 14px 14px 10px 10px;
    background: linear-gradient(180deg, #22d3ee, #0e7490);
    z-index: 2;
}
.mic-badge, .clipboard {
    position: absolute;
    right: 18px;
    bottom: 36px;
    z-index: 7;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: #06202b;
    font-size: 0.72rem;
    font-weight: 800;
    box-shadow: 0 0 0 10px rgba(34, 211, 238, 0.14);
}
.clipboard {
    width: 54px;
    height: 70px;
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: 0 0 0 8px rgba(34, 211, 238, 0.12);
}
.clipboard-line {
    display: block;
    width: 32px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: #94a3b8;
}
.listening .human-agent { animation: float 1s infinite alternate; }
.listening .mic-badge { animation: glow 0.8s infinite alternate; }
@keyframes float { to { transform: translateY(-5px); } }
@keyframes glow { to { box-shadow: 0 0 0 18px rgba(34, 211, 238, 0.12), 0 0 42px rgba(52, 211, 153, 0.7); } }
.pulse {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 0.45rem;
    background: var(--danger);
    border-radius: 50%;
    animation: pulse 1s infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}
.stat {
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem;
}
.stat strong { display: block; color: var(--accent); font-size: 1.7rem; }
.two-column { grid-template-columns: repeat(2, 1fr); }
.chart-layout {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 1.25rem;
    align-items: center;
    margin: 1.25rem 0;
}
.pie-chart {
    width: 100%;
    max-width: 320px;
    transform: rotate(-90deg);
}
.pie-total, .pie-label {
    fill: var(--text);
    text-anchor: middle;
    transform: rotate(90deg);
    transform-origin: 21px 21px;
}
.pie-total {
    font-size: 0.42rem;
    font-weight: 800;
}
.pie-label {
    fill: var(--muted);
    font-size: 0.18rem;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
}
.pie-empty {
    display: grid;
    place-items: center;
    min-height: 240px;
    border: 1px dashed var(--border);
    border-radius: 50%;
    color: var(--muted);
}
.legend {
    display: grid;
    gap: 0.8rem;
}
.legend-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text);
    font-weight: 700;
}
.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}
.legend-dot.voice { background: #22d3ee; }
.legend-dot.text { background: #34d399; }
.legend-dot.other { background: #fb7185; }
.chart-badge {
    display: grid;
    place-items: center;
    width: 160px;
    height: 160px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: conic-gradient(#22d3ee 0 45%, #34d399 45% 82%, #fb7185 82% 100%);
    color: #06202b;
    font-size: 1.35rem;
    font-weight: 900;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32);
}
.report-agent-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2.5rem;
}
.report-auth-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 60vh;
}
.report-auth-card {
    width: min(100%, 420px);
    margin-top: 1rem;
    padding: 1.25rem 1.35rem 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
.report-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 1rem 0 1.1rem;
}
.report-auth-tabs button {
    padding: 0.55rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    cursor: pointer;
}
.report-auth-tabs button.active {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.45);
    color: var(--text);
}
.report-auth-form {
    display: grid;
    gap: 0.85rem;
}
.report-auth-field {
    display: grid;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--muted);
}
.report-auth-field input {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: var(--card-2);
    color: var(--text);
    font: inherit;
}
.report-auth-submit {
    margin-top: 0.25rem;
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}
.report-auth-submit:disabled {
    opacity: 0.65;
    cursor: wait;
}
.report-page-header { margin-bottom: 1rem; }
.report-page-kicker {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.35rem;
}
.report-page-title {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 800;
}
.report-page-sub {
    margin: 0.45rem 0 0;
    color: var(--muted);
}
.report-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}
.report-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card-2);
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.report-link-btn.secondary { background: transparent; }
.report-meta {
    color: var(--muted);
    font-size: 0.88rem;
    margin: 0 0 0.5rem;
}
.report-chat {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}
.report-chat-title {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.report-chat-line {
    display: grid;
    gap: 0.15rem;
    margin-bottom: 0.45rem;
}
.report-chat-role {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--muted);
}
.report-chat-body {
    line-height: 1.45;
    white-space: pre-wrap;
}
.report-list { display: grid; gap: 0.85rem; margin-top: 1rem; }
.report {
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1rem;
}
.report-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.report-header-meta { color: var(--muted); }
.report-summary {
    margin: 0 0 0.65rem;
    display: grid;
    gap: 0.65rem;
}
.report-patient-photo-wrap {
    margin: 0;
    padding: 0.65rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}
.report-patient-photo-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: min(100%, 220px);
}
.report-patient-photo-viewport {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 220px;
    overflow: auto;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    -webkit-overflow-scrolling: touch;
}
.report-patient-photo-scaler {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.report-patient-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center center;
    transition: transform 0.15s ease;
    user-select: none;
    background: #ffffff;
}
.report-patient-photo-zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
}
.report-patient-photo-zoom-btn {
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.75);
    color: #e2e8f0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.report-patient-photo-zoom-btn:hover:not(:disabled) {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(148, 163, 184, 0.55);
}
.report-patient-photo-zoom-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.report-patient-photo-zoom-btn.reset {
    font-size: 0.95rem;
    margin-left: 0.15rem;
}
.report-patient-photo-zoom-level {
    min-width: 3.25rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.report-patient-photo-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.report-patient-photo-loading {
    margin: 0;
    padding: 1.25rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
}
.report-doctor-grid {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .report-doctor-grid {
        grid-template-columns: 1fr 1fr;
    }
    .report-row-full {
        grid-column: 1 / -1;
    }
}
.report-phone a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}
.report-phone a:hover {
    text-decoration: underline;
}
.report-row {
    display: grid;
    gap: 0.2rem;
}
.report-row dt {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}
.report-row dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.45;
}
.report-row dd.problem {
    font-weight: 600;
    white-space: pre-wrap;
}
.problem { white-space: pre-wrap; line-height: 1.55; }
.empty, .error {
    background: var(--card-2);
    border: 1px dashed var(--border);
    color: var(--muted);
    border-radius: 16px;
    padding: 1rem;
}
.error { color: #fecdd3; }

.guest-details-panel {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0.5rem 0 0.75rem;
    padding: 0.85rem 0.75rem;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(125, 211, 252, 0.25);
}
.guest-details-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
    color: #e0f2fe;
}
.guest-details-section-label {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
}
.gender-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
}
.gender-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.35rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(30, 41, 59, 0.7);
    color: #e2e8f0;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.gender-card:hover:not(:disabled) {
    border-color: rgba(56, 189, 248, 0.6);
    transform: translateY(-1px);
}
.gender-card.active {
    border-color: #38bdf8;
    background: rgba(14, 165, 233, 0.22);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
}
.gender-card:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.gender-card-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.25), rgba(52, 211, 153, 0.15));
    color: #7dd3fc;
}
.gender-card.active .gender-card-art {
    color: #a5f3fc;
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.4), rgba(52, 211, 153, 0.25));
}
.gender-portrait-svg {
    width: 2.4rem;
    height: 2.4rem;
}
.gender-card-label {
    font-size: 0.78rem;
    font-weight: 800;
}
.guest-details-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}
.digit-display-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(30, 41, 59, 0.65);
    color: #f1f5f9;
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s;
}
.digit-display-btn.active {
    border-color: #38bdf8;
    background: rgba(14, 165, 233, 0.18);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.3);
}
.digit-display-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.digit-display-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
}
.digit-display-value {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}
.digit-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}
.digit-key {
    min-height: 2.75rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(51, 65, 85, 0.85);
    color: #f8fafc;
    font-size: 1.2rem;
    font-weight: 800;
    font: inherit;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.digit-key:hover:not(:disabled) {
    background: rgba(71, 85, 105, 0.95);
    transform: translateY(-1px);
}
.digit-key:active:not(:disabled) {
    transform: translateY(0);
}
.digit-key:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.digit-key-fn {
    font-size: 1rem;
}
.guest-details-error {
    margin: 0;
    text-align: center;
    color: #fecdd3;
    font-size: 0.82rem;
    font-weight: 600;
}
.guest-details-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.guest-details-continue {
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #0ea5e9, #22c55e);
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
    font: inherit;
    cursor: pointer;
}
.guest-details-continue:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.guest-details-skip {
    width: 100%;
    padding: 0.5rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.guest-details-skip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 820px) {
    .grid { grid-template-columns: 1fr; }
    .stats { grid-template-columns: 1fr; }
    .two-column { grid-template-columns: 1fr; }
    .chart-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   Visual-first / icon-driven layer
   ============================================================ */
.mp-icon { display: block; }

/* Color tokens for icon tones (one hue = one meaning) */
.tone-teal   { --tone: #22d3ee; --tone-2: #0e7490; }
.tone-sky    { --tone: #38bdf8; --tone-2: #0369a1; }
.tone-amber  { --tone: #fbbf24; --tone-2: #b45309; }
.tone-violet { --tone: #a78bfa; --tone-2: #6d28d9; }
.tone-green  { --tone: #34d399; --tone-2: #047857; }
.tone-emerald { --tone: #34d399; --tone-2: #047857; }
.tone-rose   { --tone: #fb7185; --tone-2: #be123c; }
.tone-blue   { --tone: #38bdf8; --tone-2: #0369a1; }
.tone-cyan   { --tone: #67e8f9; --tone-2: #0e7490; }

/* --- Bottom icon navigation (works on every screen) --- */
body { padding-bottom: 6.25rem; }
.mp-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(0.6rem, env(safe-area-inset-bottom));
    z-index: 1200;
    display: flex;
    gap: 0.25rem;
    width: min(560px, calc(100% - 1.5rem));
    padding: 0.4rem;
    border-radius: 22px;
    background: rgba(8, 17, 31, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(14px);
}
.mp-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.2rem 0.45rem;
    border-radius: 16px;
    text-decoration: none;
    color: #9fb3c8;
    transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}
.mp-nav-item:active { transform: scale(0.94); }
.mp-nav-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--tone, #9fb3c8);
}
.mp-nav-label {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}
.mp-nav-item.active {
    color: #fff;
}
.mp-nav-item.active .mp-nav-icon {
    background: var(--tone);
    color: #07111f;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--tone) 45%, transparent);
}
@media (max-width: 380px) {
    .mp-nav-label { font-size: 0.62rem; }
    .mp-nav-icon { width: 38px; height: 38px; }
}

/* --- Icon-led action buttons --- */
.report-link-btn.icon-action {
    gap: 0.45rem;
    padding: 0.55rem 1.05rem;
    border-color: color-mix(in srgb, var(--tone, var(--accent)) 45%, var(--border));
    background: color-mix(in srgb, var(--tone, var(--accent)) 16%, var(--card-2));
}
.report-link-btn.icon-action.secondary {
    background: transparent;
}
.icon-action-icon {
    display: grid;
    place-items: center;
    color: var(--tone, var(--accent));
}
.icon-action.active .icon-action-icon,
.report-link-btn.icon-action:hover { color: var(--text); }

/* --- Page header glyph --- */
.report-page-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.report-page-glyph {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    color: var(--tone, var(--accent));
    background: color-mix(in srgb, var(--tone, var(--accent)) 18%, var(--card-2));
    border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 40%, var(--border));
}

/* --- Iconified report fields --- */
.report-field {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-left: 4px solid var(--tone, var(--accent));
}
.report-field-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--tone, var(--accent));
    background: color-mix(in srgb, var(--tone, var(--accent)) 16%, transparent);
}
.report-field-body { display: grid; gap: 0.15rem; min-width: 0; }
.report-field-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tone, var(--accent));
}
.report-field-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Source + session badges --- */
.report-header-meta { display: flex; align-items: center; gap: 0.5rem; }
.session-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--muted);
    font-weight: 700;
}
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}
.source-badge.voice { background: rgba(56, 189, 248, 0.18); color: #7dd3fc; }
.source-badge.text  { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; }
.report-time { display: inline-flex; align-items: center; gap: 0.3rem; }

/* --- Chat with avatars --- */
.report-chat-line {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 0.6rem;
}
.report-chat-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.report-chat-line.assistant .report-chat-avatar { background: rgba(34, 211, 238, 0.18); color: var(--accent); }
.report-chat-line.user .report-chat-avatar,
.report-chat-line.patient .report-chat-avatar { background: rgba(52, 211, 153, 0.18); color: var(--accent-2); }
.report-chat-bubble { display: grid; gap: 0.1rem; min-width: 0; }

/* --- Large pictogram prompts (replace text instructions) --- */
.pictogram-prompt {
    gap: 0.6rem;
}
.pictogram-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}
.pictogram-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 4.25rem;
    padding: 0.55rem 0.5rem 0.45rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.pictogram-emoji {
    font-size: clamp(2.4rem, 9vw, 3.1rem);
    line-height: 1;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
.pictogram-cap {
    font-size: 0.85rem;
    font-weight: 800;
    color: #cbd5e1;
    line-height: 1;
}
.pictogram-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.3);
}
.pictogram-action-glyph {
    font-size: clamp(1.9rem, 7vw, 2.4rem);
    line-height: 1;
}
.pictogram-action-label {
    font-size: clamp(1.2rem, 5vw, 1.55rem);
    font-weight: 900;
    color: #f8fafc;
}
.pictogram-prompt.action-tap .pictogram-action { background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.34); }
.pictogram-prompt.action-wait .pictogram-action { background: rgba(148, 163, 184, 0.14); border-color: rgba(148, 163, 184, 0.34); }
.pictogram-prompt.action-done .pictogram-action { background: rgba(52, 211, 153, 0.16); border-color: rgba(52, 211, 153, 0.4); }
.pictogram-prompt.listening .pictogram-action-glyph,
.pictogram-prompt.thinking .pictogram-action-glyph {
    animation: simplePulse 1s ease-in-out infinite alternate;
}

/* --- Voice-first language chip cue --- */
.locale-chip-speak {
    font-size: 1rem;
    line-height: 1;
}
.locale-chip.active .locale-chip-speak {
    animation: simplePulse 1s ease-in-out infinite alternate;
}

/* --- Watch & Learn reels (carousel of localized voice snippets) --- */
.reels-section {
    margin: 0.75rem 0 0.5rem;
}
.reels-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0.15rem 0.5rem;
}
.reels-head-icon { font-size: 1.25rem; }
.reels-head-text {
    font-size: 1rem;
    font-weight: 800;
    color: #e2e8f0;
}
.reels-row {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.15rem 0.15rem 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.reels-row::-webkit-scrollbar { height: 6px; }
.reels-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 999px; }
.reel-card {
    flex: 0 0 auto;
    width: 7.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    scroll-snap-align: start;
}
.reel-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 22px rgba(0,0,0,0.4);
    overflow: hidden;
    transition: transform 0.15s ease;
}
.reel-card:active .reel-thumb { transform: scale(0.95); }
.reel-thumb-emoji {
    font-size: 2.9rem;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
}
.reel-thumb-play {
    position: absolute;
    bottom: 0.45rem;
    right: 0.45rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.7rem;
    padding-left: 2px;
}
.reel-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    color: #e2e8f0;
}
.reel-card-listen {
    font-size: 0.72rem;
    font-weight: 700;
    color: #7dd3fc;
}

/* Fullscreen reel player */
.reel-player {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    background: #061018;
}
.reel-close {
    position: absolute;
    top: max(0.75rem, env(safe-area-inset-top));
    right: 0.85rem;
    z-index: 2;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}
.reel-stage {
    position: relative;
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    min-height: 45vh;
}
.reel-hero-emoji {
    font-size: clamp(7rem, 38vw, 13rem);
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
    animation: simplePulse 1.6s ease-in-out infinite alternate;
}
.reel-video { width: 100%; height: 100%; max-height: 60vh; object-fit: contain; background: #000; }
.reel-progress {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.3rem;
}
.reel-dot {
    width: 1.6rem;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.25);
}
.reel-dot.active { background: #38bdf8; }
.reel-info {
    flex: 0 0 auto;
    padding: 1rem 1.1rem max(1.4rem, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(8,17,31,0.4), #07111f 40%);
    text-align: center;
}
.reel-info-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.3rem, 5.5vw, 1.7rem);
    font-weight: 900;
    color: #f8fafc;
}
.reel-points {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.reel-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 4.5rem;
    padding: 0.5rem 0.45rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
}
.reel-point-emoji { font-size: 2rem; line-height: 1; }
.reel-point-label { font-size: 0.78rem; font-weight: 800; color: #cbd5e1; line-height: 1.1; }
.reel-caption {
    margin: 0 auto 1rem;
    max-width: 30rem;
    font-size: 1.02rem;
    line-height: 1.5;
    color: #e2e8f0;
}
.reel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
}
.reel-ctrl {
    min-width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
}
.reel-ctrl-main {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: auto;
    border-radius: 999px;
    padding: 0 1.3rem;
    background: linear-gradient(135deg, #22d3ee, #0e7490);
    color: #06121d;
    font-weight: 900;
    border: none;
}
.reel-ctrl-main .reel-ctrl-label { font-size: 1.05rem; }

/* --- Pictogram step hint (tap -> speak) --- */
.pictogram-hint {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
.pictogram-hint-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}
.pictogram-hint-emoji {
    font-size: clamp(1.9rem, 7vw, 2.5rem);
    line-height: 1;
}
.pictogram-hint-cap {
    font-size: 0.85rem;
    font-weight: 800;
    color: #cbd5e1;
    line-height: 1;
}
.pictogram-hint-arrow {
    font-size: clamp(1.3rem, 5vw, 1.7rem);
    opacity: 0.85;
}