/**
 * English Voice Agent - Telegram Mini App Styles
 *
 * Minimal, functional styling for the voice agent interface.
 * Designed to work within Telegram's Mini App context.
 */

/* ============================================
   CSS Variables (Theme)
   ============================================ */
:root {
    /* Colors - Brew & Browse warm-brown palette */
    --bg-primary: #F5EFEB;
    --bg-surface: #FFFFFF;
    --bg-secondary: #EADDCF;
    --bg-tertiary: #E8DCCB;
    --border-color: #E8DCCB;
    --text-primary: #4A3324;
    --text-secondary: #7A6250; /* 4.99:1 on --bg-primary (WCAG AA) */
    --text-muted: #8A7261;     /* lighter tier for hints/disabled */

    --accent-primary: #6B4E3D;
    --accent-primary-hover: #5A4031;
    --accent-danger: #B05252;
    --accent-danger-hover: #963D3D;
    --accent-success: #588157;
    --accent-warning: #D4A04A;
    --accent-warning-text: #8A6414; /* 4.71:1 on --bg-primary; warning as TEXT, not fill */
    --accent-blue: #4A7C99;

    /* Honey Brew redesign tokens */
    --hero: #F3DCA5;
    --hero-soft: #F7E6C0;
    --accent-pay: #2F6B45;

    /* Typography */
    --font-serif: ui-serif, Georgia, 'Times New Roman', serif;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-btn: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(107, 78, 61, 0.05);
    --shadow-md: 0 8px 24px rgba(107, 78, 61, 0.08);
    --shadow-floating: 0 12px 32px rgba(107, 78, 61, 0.15);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1E1A18;
        --bg-surface: #2A2421;
        --bg-secondary: #3D342E;
        --bg-tertiary: #4A3F38;
        --border-color: #4A3F38;
        --text-primary: #EAE0D5;
        --text-secondary: #B09F93;
        --text-muted: #B09F93;
        --accent-primary: #C5A491;
        --accent-primary-hover: #D8B9A7;
        --accent-warning-text: #E0B56A;
        --hero: #6E5730;
        --hero-soft: #4A3F2A;
        --accent-pay: #3E7C52;
        --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
        --shadow-floating: 0 12px 32px rgba(0, 0, 0, 0.4);
    }
}

/* ============================================
   Base Styles
   ============================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   App Container
   ============================================ */
#app {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
}

/* ============================================
   Screens
   ============================================ */
.screen {
    display: none;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.screen.active {
    display: flex;
}

/* ============================================
   Loading Screen
   ============================================ */
#loading-screen {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 24px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary);
}

/* ============================================
   Error Screen
   ============================================ */
#error-screen {
    justify-content: center;
    align-items: center;
    padding: 32px;
    text-align: center;
}

/* Honey-soft rounded-square tile with a red ✗ glyph. */
.error-icon {
    width: 68px;
    height: 68px;
    background-color: var(--hero-soft);
    color: var(--accent-danger);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.error-icon svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

.error-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.error-text {
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 32px;
}

/* Compact retry button, centered — not a full-width bar. */
#error-screen .btn {
    width: auto;
    align-self: center;
    padding: 12px 24px;
}

/* ============================================
   Call Screen Layout
   ============================================ */
#call-screen {
    flex-direction: column;
    position: relative;
}

.top-section {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    padding: 0;
}

.level-check-countdown-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 24px 16px;
    gap: 16px;
}

.level-check-instruction {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
    line-height: 1.4;
    max-width: 280px;
}

.level-check-countdown-container.hidden {
    display: none;
}

.level-check-countdown {
    position: relative;
    width: min(52vw, 220px);
    aspect-ratio: 1;
}

.level-check-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.level-check-ring-track,
.level-check-ring-progress {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
}

.level-check-ring-track {
    stroke: var(--bg-secondary);
}

.level-check-ring-progress {
    stroke: var(--accent-primary);
    /* circumference of r=54 circle; offset driven by Timer */
    stroke-dasharray: 339.292;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear, stroke var(--transition-normal);
}

.level-check-countdown-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(32px, 10vw, 44px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.level-check-countdown.timer-low .level-check-ring-progress {
    stroke: var(--accent-danger);
}

.level-check-countdown.timer-low .level-check-countdown-value {
    color: var(--accent-danger);
}

.bottom-section {
    flex-shrink: 0;
    background: var(--bg-surface);
    z-index: 20;
}

/* Pre-Call State */
.pre-call-state {
    padding: 20px 16px;
    text-align: center;
}

.pre-call-state.hidden {
    display: none;
}

/* In-call chrome overlays the scrollable lesson. */
.in-call-state {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: block;
    pointer-events: none;
}

.in-call-state.hidden {
    display: none;
}

.in-call-state:not(.hidden) + .top-section {
    padding-top: calc(68px + env(safe-area-inset-top));
    scroll-padding-bottom: calc(132px + env(safe-area-inset-bottom));
    overflow-y: hidden;
}

/* ExerciseRenderer's .exercise-container is the real scroll owner. Keep its
   minimum size collapsible and put clearance at the END of that scroll extent,
   never in a fixed bottom panel. */
.in-call-state:not(.hidden) + .top-section .exercise-container {
    min-height: 0;
    scroll-padding-bottom: calc(132px + env(safe-area-inset-bottom));
}

.in-call-state:not(.hidden) + .top-section .exercise-container::after {
    content: "";
    display: block;
    flex: 0 0 calc(116px + env(safe-area-inset-bottom));
}

/* Honey Brew round 2: the top bar is a transparent, gapped row — each
   control (status chip, Speed, End) is its own floating surface chip. */
.in-call-topbar {
    position: absolute;
    top: 0;
    inset-inline: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
    z-index: 120;
}

/* Status is plain dot + text sitting directly on the band — no pill. */
.in-call-topbar .connection-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    width: max-content;
    max-width: none;
    overflow: visible;
}

.in-call-topbar .call-timer,
.in-call-topbar #timer-display {
    font-weight: 700;
    color: var(--text-primary);
}

.in-call-topbar .status-dot {
    flex: 0 0 6px;
}

.in-call-topbar .status-text {
    white-space: nowrap;
}

/* Terminal retry belongs to the Dara problem badge. Keeping the legacy
   connection-status retry here would duplicate the action and collide with
   Speed in the compact bar. */
.in-call-topbar .retry-btn {
    display: none;
}

.in-call-top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.call-top-action {
    min-height: 34px;
    border-radius: var(--radius-full);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.call-top-action:active:not(:disabled) {
    transform: scale(0.96);
}

.call-top-speed {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Calm zone: End is a neutral chip — only the icon glyph is red. */
.call-top-end {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Mock: dark upright handset icon, red "End" label. */
.call-top-end svg {
    color: var(--text-primary);
}

.call-top-end .call-top-end-label {
    color: var(--accent-danger);
}

.call-top-label,
.call-top-end-label {
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-secondary);
}

.in-call-fabs {
    position: absolute;
    inset-inline-end: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 116px;
    height: 116px;
    pointer-events: none;
    /* Mock keeps the mic/text chips visible above open bottom sheets
       (.bottom-sheet is z-index 100). */
    z-index: 120;
    transition: bottom var(--transition-normal);
}

/* While a bottom sheet is open the fabs float just above its panel,
   per mock — not underneath it and not on top of its content. */
.screen:has(.bottom-sheet:not(.hidden)) .in-call-fabs {
    bottom: calc(250px + env(safe-area-inset-bottom));
}

.call-fab {
    position: absolute;
    pointer-events: auto;
}

.call-fab-mute {
    inset-inline-start: 0;
    bottom: 0;
}

.call-fab-transcript {
    inset-inline-end: 0;
    top: 0;
}

/* Mic icon inside the primary "Start Lesson" CTA so the action
   reads as a voice lesson, not a generic submit. */
#start-call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.start-call-icon {
    flex-shrink: 0;
    opacity: 0.95;
}

/* Waiting indicator — shown during call before first exercise */
.call-waiting-indicator {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.call-waiting-label {
    color: var(--text-secondary);
    font-size: 15px;
    text-align: center;
    padding: 0 32px;
}

.call-waiting-indicator.hidden {
    display: none;
}

/* Language-review call: title + docked conversation fill the canvas that
   has no exercise to show. An absolutely-positioned child is laid out
   against .top-section's PADDING box, so the in-call chrome offsets that
   .top-section reserves as padding have to be repeated here or the title
   lands under the status/speed/end bar. */
.review-call-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: calc(68px + env(safe-area-inset-top)) 12px 0;
}

.review-call-view.hidden {
    display: none;
}

.review-call-title {
    margin: 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 15px;
    flex-shrink: 0;
}

.review-call-transcript {
    position: relative;
    flex: 1;
    min-height: 0;
}

/* The transcript is a bottom sheet everywhere else; docked it IS the
   screen, so it drops the sheet chrome and fills its host. */
.transcript-panel-content.docked {
    position: absolute;
    inset: 0;
    max-height: none;
    border-radius: 0;
    background: transparent;
    animation: none;
}

.transcript-panel-content.docked .transcript-panel-header {
    display: none;
}

/* Keep the newest bubble clear of the floating Mic/End controls — same
   reserve .top-section uses for its own scroll padding in-call. */
.transcript-panel-content.docked .transcript-panel-body {
    padding: 0 4px calc(124px + env(safe-area-inset-bottom));
}

.waiting-dots {
    display: flex;
    gap: 8px;
}

.waiting-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-secondary);
    opacity: 0.3;
    animation: waiting-pulse 1.4s ease-in-out infinite;
}

.waiting-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.waiting-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes waiting-pulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
    40% { opacity: 1; transform: scale(1.2); }
}

/* Status + timer occupy the flexible side of the top bar. */
.call-status-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* Audio bars (vertical, left side of in-call pill) */
.audio-bars {
    display: flex;
    gap: 3px;
    align-items: center;
}

.audio-bars .bar {
    width: 3px;
    border-radius: 2px;
    background: var(--accent-primary);
    height: 12px;
    transition: height 100ms ease-out;
}

/* Transcript button */
/* Shared stacked icon+label layout for in-call buttons */
.btn-call-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.btn-call-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1;
    white-space: nowrap;
}

/* Icon circle (inner span) shared by all in-call action buttons */
.btn-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* Honey Brew: the fab button itself is the 56px rounded square; the inner
   icon circle loses its own chrome (it only paints the muted-state fill).
   Surface bg + border per DESIGN.md "Call Screen (calm zone)" — the fabs had
   drifted to a filled --accent-primary, which is the exact token the
   exercise's primary action button uses. On a short exercise the two
   touched and read as one brown blob (user report 2026-07-28), so the fill
   is back to the neutral chip the spec asks for. */
.call-fab {
    width: 56px;
    height: 56px;
    gap: 2px;
    justify-content: center;
    border-radius: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.call-fab .btn-icon-circle {
    width: 32px;
    height: 32px;
    background: transparent;
    box-shadow: none;
    border: none;
    color: var(--accent-primary);
}

.call-fab .btn-call-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    max-width: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Transcript icon circle */
.btn-icon-transcript {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-color);
}

/* "Panel is open" state. Reads against the neutral fab: accent fill with a
   surface glyph, the same inversion the muted mic uses. */
#transcript-btn.active .btn-icon-transcript {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--bg-surface);
}

#transcript-btn:active .btn-icon-circle {
    transform: scale(0.95);
}

/* Mute icon circle */
.btn-icon-mute {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-color);
}

#mute-btn.muted .btn-icon-mute {
    background: var(--accent-danger);
    border-color: var(--accent-danger);
    color: var(--bg-surface);
}

#mute-btn:active .btn-icon-circle {
    transform: scale(0.95);
}

/* Mic standby: call is connecting / Dara hasn't spoken yet — mic is
   force-muted and the control is inert until her first phrase. */
#mute-btn.mic-standby {
    opacity: 0.45;
    pointer-events: none;
}

#mute-btn .hidden {
    display: none;
}

#finish-call-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Narrow viewport safety belt for translated top-bar labels. */
@media (max-width: 360px) {
    .call-top-label { display: none; }
    .call-top-action { padding-inline: 9px; }
    .connection-status { gap: 4px; }
}

/* ============================================
   Status Message Container (formerly Transcript)
   ============================================ */
.transcript-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 100%;
    padding: 16px;
}

/* Status messages (lesson started, reconnecting, errors) */
.status-message {
    text-align: center;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 500;
    animation: statusFadeIn 0.3s ease-out;
}

@keyframes statusFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.status-info {
    color: var(--text-muted);
}

.status-success {
    color: var(--accent-success);
}

.status-warning {
    color: var(--accent-warning-text);
}

.status-error {
    color: var(--accent-danger);
}

/* ============================================
   Live Transcript Panel
   ============================================ */
.transcript-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    display: none;
}

.transcript-panel.open {
    display: block;
}

.transcript-panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.transcript-panel-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 75vh;
    background: var(--bg-surface);
    border-radius: 20px 20px 0 0;
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.transcript-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.transcript-panel-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.transcript-panel-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.transcript-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
}

/* Message bubbles */
.transcript-msg {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    animation: fadeIn 0.2s ease-out;
}

.transcript-msg-assistant {
    align-self: flex-start;
}

.transcript-msg-user {
    align-self: flex-end;
}

.transcript-speaker {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.transcript-msg-user .transcript-speaker {
    text-align: right;
}

.transcript-bubble {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-primary);
    word-break: break-word;
}

.transcript-msg-assistant .transcript-bubble {
    background: var(--bg-secondary);
    border-bottom-left-radius: 4px;
}

.transcript-msg-user .transcript-bubble {
    background: var(--accent-primary);
    color: white;
    border-bottom-right-radius: 4px;
}

.transcript-bubble.interim {
    opacity: 0.7;
    font-style: italic;
}

.transcript-bubble p {
    margin: 0;
}

.transcript-bubble p + p {
    margin-top: 4px;
}

.transcript-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    padding: 40px 20px;
}

/* RTL support */
[dir="rtl"] .transcript-msg-assistant {
    align-self: flex-end;
}

[dir="rtl"] .transcript-msg-user {
    align-self: flex-start;
}

[dir="rtl"] .transcript-msg-assistant .transcript-bubble {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 4px;
}

[dir="rtl"] .transcript-msg-user .transcript-bubble {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 4px;
}

[dir="rtl"] .transcript-msg-user .transcript-speaker {
    text-align: left;
}

/* ============================================
   Connection Status
   ============================================ */
.connection-status {
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.status-separator {
    color: var(--text-muted);
}

.connection-status.hidden {
    display: none;
}

/* Default (steady/connected) dot is green; transitional states below
   (connecting/reconnecting/disconnected/error) override it. */
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-success);
}

.connection-status.connected .status-dot {
    background-color: var(--accent-success);
}

.connection-status.connecting .status-dot {
    background-color: var(--accent-warning);
    animation: pulse 1s ease-in-out infinite;
}

.connection-status.error .status-dot,
.connection-status.disconnected .status-dot {
    background-color: var(--accent-danger);
}

.connection-status.reconnecting .status-dot {
    background-color: var(--accent-warning);
    animation: pulse 1s ease-in-out infinite;
}

.retry-btn {
    width: 100%;
    margin-top: 2px;
    font-size: 12px;
    padding: 4px 8px;
}

.retry-btn.hidden {
    display: none;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   Call Timer
   ============================================ */
.call-timer {
    font-size: 14px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.call-timer.hidden {
    display: none;
}

/* Level-check countdown: last 30 seconds */
#timer-display.timer-low {
    color: var(--accent-danger);
    font-weight: 600;
}

/* ============================================
   Audio Level Indicators (vertical bars in in-call pill)
   ============================================ */
/* .audio-bars and .bar styles are defined in the In-Call State section above */

/* ============================================
   Microphone Permission
   ============================================ */
.mic-permission {
    text-align: center;
}

.mic-permission.hidden {
    display: none;
}

.mic-text {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
}

/* ============================================
   Call Controls
   ============================================ */
.call-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    margin-top: 16px;
}

.call-controls.hidden {
    display: none;
}

/* ============================================
   In-call Warning (balance and session warnings)
   ============================================ */
.usage-warning {
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    animation: fadeIn var(--transition-normal);
}

.usage-warning.hidden {
    display: none;
}

.usage-warning.warning {
    background-color: rgba(212, 160, 74, 0.15);
    color: var(--accent-warning-text);
    border: 1px solid var(--accent-warning);
}

.usage-warning.final {
    background-color: rgba(176, 82, 82, 0.15);
    color: var(--accent-danger);
    border: 1px solid var(--accent-danger);
}

/* ============================================
   TTS Failure Banner
   ============================================ */
.tts-failure-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    background-color: rgba(212, 160, 74, 0.15);
    color: var(--accent-warning-text);
    border: 1px solid var(--accent-warning);
    animation: fadeIn var(--transition-normal);
}

.tts-failure-text {
    flex: 0 1 auto;
}

.tts-retry-btn {
    flex: 0 0 auto;
    padding: 4px 12px;
    font-size: 14px;
    border-radius: var(--radius-sm);
    background-color: var(--accent-warning);
    color: var(--bg-primary);
    border: none;
    cursor: pointer;
    font-weight: 600;
}

.tts-retry-btn:hover {
    opacity: 0.85;
}

.tts-retry-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   Audio Playback Blocked Overlay (GRN-78)
   Floating centered overlay shown when the
   browser refuses to autoplay agent audio
   (Telegram WebView Android, strict autoplay
   policy). One tap on the card calls
   `room.startAudio()` from a gesture context.
   ============================================ */
.audio-blocked-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.65);
    animation: fadeIn var(--transition-normal);
    padding: 24px;
}

.audio-blocked-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary, #1f1f23);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.audio-blocked-btn {
    appearance: none;
    border: none;
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
}

.audio-blocked-btn-primary {
    background-color: var(--accent-warning);
    color: var(--bg-primary);
}

.audio-blocked-btn-primary:hover,
.audio-blocked-btn-primary:active {
    opacity: 0.92;
}

.audio-blocked-btn-secondary {
    background-color: transparent;
    color: var(--text-primary, #ffffff);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.audio-blocked-btn-secondary:hover,
.audio-blocked-btn-secondary:active {
    background-color: rgba(255, 255, 255, 0.06);
}

.audio-blocked-subtitle {
    margin: 0;
    padding: 0 4px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
    text-align: center;
}

/* ============================================
   GRN-86 Audio Cancel-Confirmation Screen
   Shown when the user taps "Cancel" on the
   audio-blocked overlay. Full-screen replacement
   (not modal-on-modal — Telegram WebView's modal
   stacking is unreliable). Single CTA: Start
   over → endCall() + page reload to bring the
   user back to the entry screen with fresh state.
   ============================================ */
.audio-cancel-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-primary, #000);
    animation: fadeIn var(--transition-normal);
    padding: 24px;
}

.audio-cancel-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: 320px;
    text-align: center;
}

.audio-cancel-headline {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    line-height: 1.3;
}

.audio-cancel-body {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-secondary, rgba(255, 255, 255, 0.75));
}

.audio-cancel-cta {
    appearance: none;
    border: none;
    width: 100%;
    padding: 14px 16px;
    margin-top: 8px;
    border-radius: var(--radius-md);
    background-color: var(--accent-warning);
    color: var(--bg-primary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.audio-cancel-cta:hover,
.audio-cancel-cta:active {
    opacity: 0.92;
}

/* ============================================
   Thank You Screen
   ============================================ */
#thankyou-screen {
    justify-content: center;
    align-items: center;
    padding: 24px 20px;
    text-align: center;
}

.thankyou-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.thankyou-content h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.thankyou-content p {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}

.language-review-result {
    width: min(100%, 320px);
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    text-align: left;
}

.language-review-result .language-review-result-title {
    margin-bottom: 4px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.language-review-result ul,
.language-review-preview {
    margin: 0;
    padding-inline-start: 20px;
}

.language-review-result li,
.language-review-preview li {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
}

.language-review-preview {
    margin-top: 4px;
    color: var(--text-secondary);
}




.transcript-note {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 32px;
    text-align: center;
}

/* Honey-soft rounded-square tile with a green check glyph. */
.thankyou-icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background-color: var(--hero-soft);
    color: var(--accent-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 4px;
}

.thankyou-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    max-width: 280px;
}

/* Feedback Form */
.feedback-form {
    width: 100%;
    max-width: 320px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: var(--bg-surface);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.feedback-label {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.feedback-stars {
    display: flex;
    gap: 8px;
}

.feedback-star {
    background: none;
    border: none;
    font-size: 32px;
    color: var(--border-color);
    cursor: pointer;
    padding: 4px;
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
}

.feedback-star:hover,
.feedback-star.active {
    color: var(--accent-warning);
    transform: scale(1.15);
}

.feedback-star.active {
    transform: scale(1);
}

.feedback-comment {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: none;
}

.feedback-comment::placeholder {
    color: var(--text-muted);
}

.feedback-submit {
    width: 100%;
    font-size: 14px;
    padding: 10px;
}

.feedback-status {
    font-size: 14px;
    color: var(--accent-success);
    margin: 0;
}

/* No reserved empty band under the submit button (mock). */
.feedback-status:empty {
    display: none;
}

.feedback-form.submitted .feedback-stars,
.feedback-form.submitted .feedback-comment,
.feedback-form.submitted .feedback-submit {
    display: none;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    background-color: var(--accent-primary);
    color: var(--bg-surface);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: var(--radius-btn);
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

@media (prefers-color-scheme: dark) {
    .btn {
        color: #1E1A18;
    }
}

.btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-large {
    padding: 16px 24px;
    font-size: 16px;
}

.btn-primary {
    background-color: var(--accent-primary);
    color: var(--bg-surface);
}

.btn-secondary {
    background-color: var(--bg-surface);
    color: var(--accent-primary);
    border: 1.5px solid var(--accent-primary);
}

/* Ghost action (DESIGN.md Button System): text-only, underlined,
   --text-secondary. Low-emphasis sibling under a real button — used for the
   "cancel + refund" action so the plain cancel stays the primary path. */
.btn-ghost {
    display: block;
    width: 100%;
    margin-top: 4px;
    background: none;
    border: none;
    padding: 8px 0 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: underline;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.btn-ghost:active {
    opacity: 0.7;
}

.btn-ghost:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger {
    background-color: var(--accent-danger);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
}

.btn-loading {
    opacity: 0.7;
    pointer-events: none;
}

.hidden {
    display: none !important;
}

/* ============================================
   Utility Classes
   ============================================ */
.text-center {
    text-align: center;
}

.text-muted {
    color: var(--text-muted);
}

.text-sm {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ============================================
   Typography
   ============================================ */
h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}

h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Honey Brew: serif display face for major headings, titles and large
   numerals. Body text, buttons, chips and inputs stay on the system stack.
   RTL scripts override --font-serif below so Arabic/Hebrew/Urdu never get
   forced into Georgia. */
h1,
h2,
.error-title,
.onboarding-question,
.bottom-sheet-title,
.transcript-panel-header h3,
.settings-header h3,
.language-modal-header h3,
.purchase-modal-header h3,
.auth-sheet-title,
.tutorial-wordmark,
.level-result-heading strong,
.level-countdown-number,
.level-check-countdown-value {
    font-family: var(--font-serif);
}

/* .level-sheet-title is reused inside legend rows with a system-ui `font`
   shorthand (higher up in cascade order it re-sets family), so only the
   sheet's top title gets serif here. */
.level-sheet > .level-sheet-title {
    font-family: var(--font-serif);
}

/* RTL scripts: keep headings on the same Noto Sans stacks as body text. */
html[dir="rtl"] {
    --font-serif: 'Segoe UI', Tahoma, Arial, sans-serif;
}

html[dir="rtl"][lang="ar"] {
    --font-serif: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
}

html[dir="rtl"][lang="he"] {
    --font-serif: 'Noto Sans Hebrew', 'Segoe UI', Tahoma, Arial, sans-serif;
}

html[dir="rtl"][lang="ur"] {
    --font-serif: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq',
                  'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
}

p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ============================================
   Safe Area Padding (for devices with notches)
   ============================================ */
@supports (padding: max(0px)) {
    .bottom-section {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* ============================================
   RTL (Right-to-Left) Language Support
   ============================================
   These styles apply when the document has dir="rtl" set.
   The locale service automatically sets this based on the
   language configuration's "direction" field.
   ============================================ */

/* Base RTL adjustments */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Flex direction reversal for horizontal layouts */
[dir="rtl"] .in-call-state {
    flex-direction: row-reverse;
}

[dir="rtl"] .audio-bars {
    flex-direction: row-reverse;
}

[dir="rtl"] .connection-status {
    flex-direction: row-reverse;
}

/* Thank you screen buttons */
[dir="rtl"] .thankyou-buttons {
    flex-direction: row-reverse;
}

/* Error screen */
[dir="rtl"] .error-text {
    text-align: right;
}

/* Usage warning alignment */
[dir="rtl"] .usage-warning {
    text-align: right;
}

[dir="rtl"] .tts-failure-banner {
    flex-direction: row-reverse;
}

/* Mic permission text */
[dir="rtl"] .mic-permission {
    text-align: right;
}

/* Timer display - numbers should remain LTR even in RTL context */
[dir="rtl"] .call-timer {
    direction: ltr;
    unicode-bidi: embed;
}

[dir="rtl"] #timer-display {
    direction: ltr;
    unicode-bidi: embed;
}

/* Audio bars - keep LTR for visual consistency */
[dir="rtl"] .audio-bars {
    direction: ltr;
}

/* Loading spinner - no change needed, centered element */

/* Button icon adjustments (if any icons are used) */
[dir="rtl"] .btn svg,
[dir="rtl"] .btn .icon {
    margin-left: var(--spacing-sm);
    margin-right: 0;
}

/* Margin/padding adjustments for common patterns */
[dir="rtl"] .ml-auto {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .mr-auto {
    margin-right: 0;
    margin-left: auto;
}

/* Input fields */
[dir="rtl"] input,
[dir="rtl"] textarea {
    text-align: right;
}

/* Ensure proper alignment of inline elements */
[dir="rtl"] .inline-flex {
    flex-direction: row-reverse;
}

/* Keep specific elements LTR (numbers, times, codes) */
[dir="rtl"] .ltr-content {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* Per-script font stacks. Selectors target `body` (not `html`) because the
   `body { font-family: ... }` rule above otherwise wins by specificity and the
   stack we want here never inherits down. */
html[dir="rtl"][lang="ar"] body {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
}

html[dir="rtl"][lang="he"] body {
    font-family: 'Noto Sans Hebrew', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* Urdu prefers Nastaliq calligraphic style; fall back through Arabic-script
   Naskh families if Nastaliq isn't installed on the device. */
html[dir="rtl"][lang="ur"] body {
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq',
                 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* ==============================
   Voice Selector
   ============================== */

/* ==============================
   Reminder Settings Panel
   ============================== */

.settings-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    color: var(--text-secondary);
    z-index: 10;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: center;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
}

.settings-icon:hover {
    background: var(--bg-secondary);
}

.settings-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.settings-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.settings-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 80vh;
    background: var(--bg-surface);
    border-radius: 20px 20px 0 0;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.settings-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.settings-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0 4px;
    line-height: 1;
}

.settings-body {
    padding: 16px 20px 32px;
}

.settings-section {
    margin-bottom: 24px;
}

.settings-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.settings-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-section-header .settings-label {
    margin-bottom: 0;
}

.settings-support {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.settings-support-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-decoration: none;
    text-align: center;
}

.support-dialog {
    margin-top: 12px;
}

.support-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    box-sizing: border-box;
}

.support-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.support-dialog-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.subscription-cancel-title {
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--text-primary);
}

.support-status {
    font-size: 0.85rem;
    margin-top: 6px;
    text-align: center;
}

.support-status.success {
    color: var(--accent-primary);
}

.support-status.error {
    color: var(--error-color);
}

.settings-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}

.settings-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    /* Filled progress left of the thumb (mock). --slider-fill is kept in
       sync by the shared fill updater in voice-speed-picker.js. */
    background: linear-gradient(
        to right,
        var(--accent-primary) 0%,
        var(--accent-primary) var(--slider-fill, 50%),
        var(--border-color) var(--slider-fill, 50%),
        var(--border-color) 100%
    );
    border-radius: 3px;
    outline: none;
}

.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
}

/* Subscription section (settings panel). Rendered by subscription-settings.js
   into #subscription-settings-mount. The JS emits .subscription-row +
   .settings-row__label/value/hint which had no CSS, so the section looked
   broken next to the other settings sections. Buttons reuse the existing
   .btn / .btn-secondary base. Warm DESIGN.md palette, light + dark via tokens. */
/* RTL sliders fill from the right. */
[dir="rtl"] .settings-slider {
    background: linear-gradient(
        to left,
        var(--accent-primary) 0%,
        var(--accent-primary) var(--slider-fill, 50%),
        var(--border-color) var(--slider-fill, 50%),
        var(--border-color) 100%
    );
}

.subscription-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.settings-row__label {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.settings-row__value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-row__value.muted {
    font-weight: 500;
    color: var(--text-secondary);
}

.settings-row__hint {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.subscription-row .btn {
    margin-top: 4px;
}

.reminder-times-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reminder-time-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    gap: 12px;
}

.time-value {
    flex: 1;
    font-size: 18px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    border-bottom: 1px dashed transparent;
}

.time-value:hover {
    border-bottom-color: var(--text-secondary);
}

.edit-group {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.time-input-inline {
    flex: 1;
    max-width: 120px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--text-muted);
    border-radius: 24px;
    transition: 0.3s;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-input:checked + .toggle-slider {
    background-color: var(--accent-success);
}

.toggle-input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.btn-delete-time {
    background: none;
    border: none;
    color: var(--accent-danger);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.btn-delete-time:hover {
    background: rgba(176, 82, 82, 0.1);
}

.btn-add-time {
    background: none;
    border: 1px solid var(--accent-success);
    color: var(--accent-success);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 16px;
}

.add-time-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.time-input {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 16px;
}

.btn-small {
    padding: 6px 12px;
    font-size: 14px;
}

.no-times {
    color: var(--text-secondary);
    text-align: center;
    padding: 16px;
    font-style: italic;
}

/* RTL support for settings */
[dir="rtl"] .settings-icon {
    right: auto;
    left: 12px;
}

[dir="rtl"] .toggle-slider:before {
    left: auto;
    right: 3px;
}

[dir="rtl"] .toggle-input:checked + .toggle-slider:before {
    transform: translateX(-20px);
}

/* ==============================
   Onboarding - Language Selection
   ============================== */

#onboarding-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 40px 24px 32px;
    overflow-y: auto;
}

#onboarding-screen.hidden {
    display: none;
}

.onboarding-step {
    width: 100%;
    max-width: 400px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Honey Brew: every onboarding step is a full-height column so its primary
   CTA can pin to the bottom (margin-top: auto on the action block) while the
   content occupies the space above. */
.onboarding-step > .onboarding-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

.onboarding-content > .btn {
    margin-top: auto;
}

.onboarding-content > .onboarding-cta {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
}


.onboarding-step.hidden {
    display: none;
}

.tutorial-content {
    max-width: 390px;
    padding: 32px 22px 24px;
    gap: 18px;
}

.tutorial-content h2,
.tutorial-bridge-content h2,
.tutorial-paywall-hero h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-align: center;
}

.tutorial-eyebrow {
    margin: 0;
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.tutorial-body {
    margin: 0;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.48;
    text-align: center;
}

.tutorial-goal-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
}

.tutorial-goal-options button {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.tutorial-goal-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tutorial-goal-copy small {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-secondary);
}

.tutorial-goal-options button,
.tutorial-level-options button {
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-surface);
    color: var(--text-primary);
}

.tutorial-goal-options button {
    min-height: 56px;
    padding: 10px 14px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tutorial-goal-options button.selected {
    border-color: var(--accent-primary);
    background: var(--hero-soft);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 14%, transparent);
}

#tutorial-goal-text {
    width: 100%;
    resize: none;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
}

.tutorial-secondary-action {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tutorial-radar-preview { margin: -8px auto -4px; }

/* In-call controls tour (call-tutorial.js): four dimming strips leave a
   click-through hole around the highlighted control. */
#call-tour { position: fixed; inset: 0; z-index: 10500; pointer-events: none; }
#call-tour .call-tour-strip {
    position: absolute;
    background: rgba(20, 14, 8, 0.62);
    pointer-events: auto;
}
#call-tour .call-tour-ring {
    position: absolute;
    border: 2px solid var(--accent-primary);
    border-radius: 18px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 30%, transparent);
    animation: call-tour-ring-pulse 1.6s infinite ease-in-out;
}
@keyframes call-tour-ring-pulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 30%, transparent); }
    50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent-primary) 12%, transparent); }
}
#call-tour .call-tour-card {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: min(88vw, 340px);
    padding: 18px;
    border-radius: 20px;
    background: var(--bg-surface);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    text-align: center;
    pointer-events: auto;
}
#call-tour .call-tour-card h3 { margin: 0 0 8px; font-size: 17px; }
#call-tour .call-tour-card p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-secondary);
}
/* Transcript-open phase: the panel (z 1500) must be readable, so hide the
   dimming strips and let only the coach card float above the panel. */
#call-tour.call-tour-above-panel { z-index: 12000; }
#call-tour.call-tour-above-panel .call-tour-strip,
#call-tour.call-tour-above-panel .call-tour-ring { display: none; }
.call-tour-press { animation: call-tour-press 0.26s ease; }
@keyframes call-tour-press {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.88); }
}

.voice-speed-loading {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 24px 0;
}

.voice-speed-loading span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: voice-speed-pulse 1s infinite ease-in-out;
}

.voice-speed-loading span:nth-child(2) { animation-delay: 0.15s; }
.voice-speed-loading span:nth-child(3) { animation-delay: 0.3s; }

@keyframes voice-speed-pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1); }
}

.pre-call-card {
    max-width: 360px;
    text-align: left;
}

.pre-call-card .howto-title,
.pre-call-card .howto-text {
    text-align: center;
}

.pre-call-card .onboarding-level-check-facts {
    margin: 14px 0 18px;
}
.tutorial-picker-content { justify-content: flex-start; overflow-y: auto; }

.tutorial-level-options {
    display: grid;
    gap: 10px;
    width: 100%;
    padding-bottom: 24px;
}

.tutorial-level-options button {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 10px;
    align-items: center;
    padding: 14px;
    text-align: left;
}

.tutorial-level-options strong { font-size: 20px; color: var(--accent-primary); }
.tutorial-level-options span { color: var(--text-secondary); font-size: 14px; line-height: 1.4; }

#tutorial-speed .english-share-welcome {
    width: 100%;
    padding: 18px;
    border-radius: 20px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-floating);
}

.tutorial-bridge-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: min(100%, 430px);
    min-height: 100%;
    margin: auto;
    padding: 44px 20px 0;
}

.tutorial-bridge-content .tutorial-eyebrow {
    align-self: flex-start;
    padding: 7px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-success) 12%, var(--bg-surface));
    color: var(--accent-success);
    letter-spacing: 0;
    text-transform: none;
}

.tutorial-bridge-content > h2 {
    margin-top: 18px;
    font-size: 28px;
    line-height: 1.16;
    text-align: left;
}

.tutorial-bridge-lead {
    margin: 7px 0 0;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.42;
}

.tutorial-bridge-route {
    display: grid;
    /* Mock: photo column is roughly a third of the card. */
    grid-template-columns: minmax(0, 34%) 1fr;
    gap: 14px;
    margin-top: 28px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}

.tutorial-bridge-cover {
    position: relative;
    min-height: 198px;
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
}

.tutorial-bridge-cover img {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
}

/* Mock: badge bottom-LEFT, fully inside the photo, no white ring. */
.tutorial-bridge-cover .tutorial-level-badge {
    left: 12px;
    right: auto;
    bottom: 12px;
    border: none;
}

.tutorial-bridge-visual {
    position: relative;
    height: 220px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-floating);
}

.tutorial-bridge-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.tutorial-mini-exercise {
    display: grid;
    align-content: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-surface);
}

.tutorial-mini-exercise p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    color: var(--text-primary);
    font-size: 14px;
}

.tutorial-mini-gap {
    width: 58px;
    height: 30px;
    border: 1.5px dashed var(--border-color);
    border-radius: 8px;
}

.tutorial-mini-exercise > div {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.tutorial-mini-exercise > div span {
    padding: 6px 13px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
}

.tutorial-level-badge {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--accent-primary);
    color: var(--bg-surface);
    font-size: 14px;
    font-weight: 800;
}

.tutorial-route {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tutorial-route li {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    min-height: 66px;
}

/* Mock: standalone "↓" glyph between steps instead of a connector line. */
.tutorial-route li:not(:last-child)::after {
    content: "\2193";
    position: absolute;
    top: 38px;
    left: 0;
    width: 34px;
    text-align: center;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    background: none;
}

.tutorial-route li > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--hero-soft);
    color: var(--accent-primary);
    font-weight: 800;
}

.tutorial-route div { display: grid; gap: 2px; }

/* Column 2 wrapper: steps list + loop caption stacked (mock puts the
   loop line at the bottom of the right column, not under the photo). */
.tutorial-route-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tutorial-route-loop {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.tutorial-route strong { color: var(--text-primary); font-size: 14px; }
.tutorial-route small { color: var(--text-secondary); font-size: 12px; line-height: 1.35; }

.tutorial-proof {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
    padding: 13px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent-success) 12%, var(--bg-surface));
    color: var(--accent-success);
    font-size: 14px;
    font-weight: 750;
}

/* Mock: plain green check glyph, no filled circle. */
.tutorial-proof > span:first-child {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    background: none;
    color: var(--accent-success);
    font-size: 18px;
    font-weight: 800;
}

.tutorial-bridge-content > .btn {
    width: 100%;
    min-height: 58px;
    margin: auto 0 max(14px, env(safe-area-inset-bottom));
    border-radius: var(--radius-btn);
}

.tutorial-paywall-hero,
.tutorial-paywall-continue,
.tutorial-paywall-trust { display: none; }

.purchase-modal.tutorial-paywall .purchase-modal-overlay { background: var(--bg-primary); }
.purchase-modal.tutorial-paywall .purchase-modal-content {
    width: 100%;
    max-width: 430px;
    height: 100%;
    max-height: none;
    border-radius: 0;
    background: linear-gradient(180deg, #EEE2D6 0, #FAF6F2 34%, #FFF 100%);
}
/* The gradient above is hard-coded honey, so in dark mode it has to be replaced
   outright — otherwise the dark palette's light text lands on a light surface
   and the whole hero renders invisible. */
@media (prefers-color-scheme: dark) {
    .purchase-modal.tutorial-paywall .purchase-modal-content {
        background: linear-gradient(180deg, #3D342E 0, #2A2421 34%, var(--bg-primary) 100%);
    }
}
.purchase-modal.tutorial-paywall .tutorial-paywall-hero { display: grid; gap: 14px; }
.purchase-modal.tutorial-paywall .purchase-modal-header {
    position: absolute;
    z-index: 4;
    top: max(22px, env(safe-area-inset-top));
    right: 14px;
    padding: 0;
    border: 0;
}
.purchase-modal.tutorial-paywall .purchase-modal-header h3 { display: none; }
/* RTL: the brand wordmark starts on the right, so the close button moves left
   instead of sitting on top of it. */
[dir="rtl"] .purchase-modal.tutorial-paywall .purchase-modal-header {
    right: auto;
    left: 14px;
}
.purchase-modal.tutorial-paywall .purchase-modal-close {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: var(--bg-surface);
    color: var(--text-secondary);
    outline: none;
}
.purchase-modal.tutorial-paywall .purchase-modal-body {
    padding:
        max(16px, env(safe-area-inset-top))
        16px
        max(22px, env(safe-area-inset-bottom));
}
.tutorial-paywall-brand {
    color: var(--text-primary);
    font-size: 20px;
}
.tutorial-paywall-heading {
    margin-top: 8px;
}
.tutorial-paywall-heading h2 {
    font-size: 30px;
    line-height: 1.06;
}
.tutorial-paywall-heading p {
    margin: 7px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.38;
    text-align: center;
}

/* Learning loop: three steps around a dashed ring, "∞ no limits" in the core.
   Node centres follow the ring geometry (r=78 around 105,105) — the SVG arcs
   in index.html are drawn to stop short of each node. */
.tutorial-paywall-loop {
    position: relative;
    width: 210px;
    height: 208px;
    margin: 8px auto 0;
}
.tutorial-paywall-loop-track {
    position: absolute;
    inset: 0;
    width: 210px;
    height: 210px;
    color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
}
.tutorial-paywall-loop-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tutorial-paywall-loop .loop-step {
    position: absolute;
    width: 104px;
    margin-left: -52px;
    text-align: center;
    color: var(--text-primary);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.15;
}
.tutorial-paywall-loop .loop-step-lesson { top: 0; left: 105px; width: 136px; margin-left: -68px; }
.tutorial-paywall-loop .loop-step-speaking { top: 117px; left: 172px; }
.tutorial-paywall-loop .loop-step-review { top: 117px; left: 38px; }
.tutorial-paywall-loop .loop-step-icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin: 0 auto 5px;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--hero-soft);
    color: var(--accent-primary);
    box-shadow: var(--shadow-sm);
}
.tutorial-paywall-loop-core {
    position: absolute;
    top: 113px;
    left: 105px;
    width: 120px;
    margin: 0 0 0 -60px;
    transform: translateY(-50%);
    text-align: center;
}
.tutorial-paywall-loop-core strong {
    display: block;
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-size: 34px;
    line-height: 1;
}
.tutorial-paywall-loop-core span {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.purchase-modal.tutorial-paywall .packages-container {
    gap: 8px;
    margin: 12px 0 0;
}
.purchase-modal.tutorial-paywall .packages-container::before {
    content: attr(data-title);
    margin-bottom: -2px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
}
.purchase-modal.tutorial-paywall .package-card {
    min-height: 68px;
    padding: 10px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-surface);
}
.purchase-modal.tutorial-paywall .package-card.selected {
    border-color: var(--accent-primary);
    background: var(--hero-soft);
}
.purchase-modal.tutorial-paywall .packages-container {
    gap: 14px;
}
.purchase-modal.tutorial-paywall .package-price-plate {
    background: transparent;
}
.purchase-modal.tutorial-paywall .packages-renewal-footer {
    margin: 8px 0 0;
    line-height: 1.25;
}
.purchase-modal.tutorial-paywall .tutorial-paywall-continue {
    display: block;
    margin-top: 8px;
}
.purchase-modal.tutorial-paywall .tutorial-paywall-trust {
    display: block;
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
}

.tutorial-home-coach {
    display: grid;
    gap: 3px;
    margin: -2px 0 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--accent-primary);
    color: var(--bg-surface);
}
.tutorial-home-coach span { font-size: 14px; opacity: 0.84; }
/* The home screen is held on this one card — say which step it is and what
   finishing it unlocks (the counter shares .tutorial-step-count with the
   tour card, so only the colour differs on the accent background). */
.tutorial-home-coach .tutorial-step-count {
    font-size: 12px;
    opacity: 0.7;
    color: inherit;
}
.tutorial-home-coach .tutorial-coach-unlock {
    font-size: 12px;
    opacity: 0.7;
}
.tutorial-home-blocker {
    position: fixed;
    inset: 0;
    z-index: 3;
    background: color-mix(in srgb, var(--text-primary) 32%, transparent);
    pointer-events: auto;
}
.tutorial-home-blocker.target-ready {
    background: transparent;
}
.tutorial-focus-review #continue-card,
.tutorial-focus-review #catalog-home-section,
.tutorial-focus-lesson #language-review-card,
.tutorial-focus-lesson #catalog-home-section {
    opacity: 0.24;
    pointer-events: none;
    filter: grayscale(0.55);
}
.tutorial-focus-review .pre-call-state > *,
.tutorial-focus-lesson .pre-call-state > * {
    pointer-events: none;
}
.tutorial-focus-review #language-review-card,
.tutorial-focus-lesson #continue-card {
    position: relative;
    z-index: 4;
    pointer-events: auto;
    box-shadow:
        0 0 0 100vmax color-mix(in srgb, var(--text-primary) 32%, transparent),
        var(--shadow-floating);
}

/* Unified tutorial — exact compositions from the approved finalized mockup.
   These selectors are intentionally limited to tutorial-owned screens. */
.tutorial-story-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100dvh - 72px);
    align-items: stretch;
    padding: 6px 0 0;
}

.tutorial-wordmark {
    align-self: flex-start;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Mock: wordmark left + progress dashes right on the SAME top row. */
.tutorial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 14px;
}

.tutorial-header .tutorial-progress {
    width: auto;
    margin: 0;
}

.tutorial-progress {
    display: flex;
    width: 100%;
    gap: 6px;
    margin: 14px 0 14px;
}

.tutorial-progress span {
    height: 4px;
    flex: 0 0 26px;
    width: 26px;
    border-radius: 2px;
    background: var(--bg-tertiary);
}

.tutorial-progress span.done {
    background: var(--accent-primary);
}

.tutorial-story-content > h2 {
    max-width: 350px;
    margin: 0 auto;
    color: var(--text-primary);
    font-size: 28px;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-align: center;
}

.tutorial-story-content > .btn {
    margin-top: auto;
    flex: 0 0 auto;
}

.tutorial-story-collage {
    position: relative;
    width: 100%;
    height: 474px;
    margin-top: 16px;
}

.tutorial-story-shot {
    position: absolute;
    margin: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 16%, transparent);
    border-radius: 18px;
    background: var(--bg-surface);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--text-primary) 16%, transparent);
}

.tutorial-story-shot > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.tutorial-story-shot-left {
    top: 124px;
    left: -18px;
    width: 148px;
    height: 320px;
    transform: rotate(-8deg);
}

.tutorial-story-shot-center {
    z-index: 2;
    top: 18px;
    left: 50%;
    width: 196px;
    height: 424px;
    transform: translateX(-50%) rotate(1.5deg);
}

.tutorial-story-shot-right {
    top: 126px;
    right: -18px;
    width: 146px;
    height: 316px;
    transform: rotate(8deg);
}

.tutorial-speaking-card {
    display: flex;
    flex-direction: column;
    padding: 11px;
    color: var(--text-primary);
    text-align: left;
}

.tutorial-speaking-card > img {
    width: 100%;
    height: 104px;
    flex: 0 0 104px;
    border-radius: 12px;
    object-fit: cover;
}

/* Mock: honey pill badge, not plain grey text. */
.tutorial-speaking-kicker {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    background: var(--hero);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tutorial-speaking-card > strong {
    margin-top: 10px;
    font-family: var(--font-serif);
    color: var(--accent-primary);
    font-size: 16px;
    line-height: 1.25;
}

.tutorial-speaking-card > p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.3;
    transform: scale(0.72);
    transform-origin: top left;
    width: 139%;
    margin-bottom: -22px;
}

.tutorial-speaking-card ol {
    display: grid;
    gap: 5px;
    margin: 5px 0 0;
    padding: 0;
    list-style: none;
}

.tutorial-speaking-card li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 5px;
    padding: 6px 7px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.28;
    transform: scale(0.67);
    transform-origin: top left;
    width: 149%;
    margin-bottom: -13px;
}

/* Mock: question number inside a small honey circle badge. */
.tutorial-speaking-card li span {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--hero);
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 800;
}

.tutorial-story-mic {
    position: absolute;
    z-index: 5;
    top: 8px;
    right: 18px;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 5px solid var(--bg-primary);
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--bg-surface);
    box-shadow: var(--shadow-md);
}

.tutorial-book-stage {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 468px;
    margin-top: 18px;
}

/* Mock: photo is upright and full-bleed, filling the stage down to the CTA. */
.tutorial-book-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 24px;
    background: var(--bg-secondary);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--text-primary) 16%, transparent);
}

.tutorial-book-photo img,
.tutorial-book-exercise img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tutorial-book-photo img {
    object-position: center;
}

/* Mock: white exercise card anchored bottom-right, clipped by the
   photo's bottom edge — upright, no rotation. */
.tutorial-book-exercise {
    position: absolute;
    right: -6px;
    bottom: -10px;
    width: 56%;
    height: 300px;
    margin: 0;
    overflow: hidden;
    border: 5px solid var(--bg-surface);
    border-radius: 18px;
    background: var(--bg-surface);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--text-primary) 22%, transparent);
}

.tutorial-book-exercise img {
    object-position: top;
}

/* Mock: small honey chip overlapping the photo's top edge. */
.tutorial-book-tag {
    position: absolute;
    z-index: 4;
    top: -14px;
    left: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--hero-soft);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.tutorial-phrase-stage {
    position: relative;
    width: 100%;
    height: 455px;
    margin-top: 16px;
}

.tutorial-voice-note {
    position: absolute;
    top: 22px;
    left: 3px;
    width: 292px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-surface);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--text-primary) 14%, transparent);
    text-align: left;
    transform: rotate(-4deg);
}

.tutorial-voice-note > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 750;
}

/* Mock: small inline mic glyph next to the eyebrow — no filled circle. */
.tutorial-voice-note-mic {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    background: none;
    color: var(--text-secondary);
}

.tutorial-voice-note-mic svg {
    width: 16px;
    height: 16px;
}

.tutorial-voice-note > p {
    margin: 13px 0 0;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.38;
}

.tutorial-voice-wave {
    display: flex;
    height: 18px;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
}

.tutorial-voice-wave i {
    width: 4px;
    border-radius: 5px;
    background: var(--accent-primary);
}

/* Mock: shorter, irregular (asymmetric) bars, ~18px max. */
.tutorial-voice-wave i:nth-child(1) { height: 8px; }
.tutorial-voice-wave i:nth-child(2) { height: 14px; }
.tutorial-voice-wave i:nth-child(3) { height: 18px; }
.tutorial-voice-wave i:nth-child(4) { height: 11px; }
.tutorial-voice-wave i:nth-child(5) { height: 16px; }
.tutorial-voice-wave i:nth-child(6) { height: 13px; }
.tutorial-voice-wave i:nth-child(7) { height: 6px; }

.tutorial-phrase-down {
    position: absolute;
    z-index: 5;
    top: 183px;
    right: 18px;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 5px solid var(--bg-primary);
    border-radius: 50%;
    background: var(--accent-success);
    color: var(--bg-surface);
    font-size: 24px;
    font-weight: 900;
    box-shadow: var(--shadow-md);
}

.tutorial-review-preview {
    position: absolute;
    right: 0;
    bottom: 6px;
    width: 314px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    /* Mock: saturated honey card, not muted beige. */
    background: var(--hero);
    border-color: color-mix(in srgb, var(--accent-primary) 18%, var(--hero));
    box-shadow: 0 18px 36px color-mix(in srgb, var(--text-primary) 16%, transparent);
    text-align: left;
    transform: rotate(3deg);
}

.tutorial-review-preview ul {
    margin: 10px 0;
    padding-left: 20px;
}

.tutorial-review-preview .continue-card-head {
    margin-bottom: 0;
}

.tutorial-review-preview .continue-icon {
    background: var(--hero-soft);
}

.tutorial-review-preview .continue-info {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.tutorial-review-preview .review-count {
    align-self: flex-start;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-surface);
}

.tutorial-review-preview li {
    margin: 5px 0;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.35;
}

/* Mock: compact left-aligned cream pill sized to its text. */
.tutorial-review-preview .btn {
    display: inline-grid;
    width: max-content;
    min-height: 0;
    place-items: center;
    padding: 10px 18px;
    border: 1.5px solid var(--accent-primary);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.tutorial-goal-content {
    position: relative;
    align-items: stretch;
    padding-top: 30px;
    text-align: left;
}

.tutorial-goal-content .tutorial-eyebrow {
    color: var(--text-secondary);
    text-align: left;
}

.tutorial-goal-content h2 {
    margin: 10px 0 0;
    color: var(--text-primary);
    font-size: 24px;
    line-height: 1.2;
    text-align: left;
}

.tutorial-goal-subtitle {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.4;
}

.tutorial-goal-content .tutorial-goal-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 12px;
}

.tutorial-goal-content .tutorial-goal-options button {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 12px;
    padding: 8px 13px;
    border-radius: var(--radius-md);
    text-align: left;
}

/* Mock: emoji sits inside a ~44px honey rounded-square chip. */
.tutorial-goal-content .tutorial-goal-options button > span[aria-hidden="true"] {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--hero-soft);
    font-size: 20px;
}

.tutorial-goal-content .tutorial-goal-options button > strong {
    font-size: 16px;
}

.tutorial-goal-content #tutorial-goal-text {
    min-height: 44px;
    margin-top: 8px;
    resize: none;
}

.tutorial-goal-content #tutorial-goal-next {
    margin-top: auto;
}

.tutorial-goal-content #tutorial-goal-text {
    margin-bottom: 8px;
}


/* Unified tutorial back arrow: story/speed steps anchor it top-left; the
   Dara header row shifts right so the wordmark never collides with it. */
.tutorial-story-content,
#tutorial-speed .tutorial-content,
.tutorial-picker-content {
    position: relative;
}
.tutorial-story-content .tutorial-step-back {
    top: 8px;
    left: -8px;
}
.tutorial-story-content .tutorial-header {
    padding-left: 30px;
}
#tutorial-speed .tutorial-step-back {
    top: -6px;
    left: -8px;
}
#tutorial-speed .tutorial-content {
    padding-top: 34px;
}
/* Picker scrolls (overflow-y: auto) — negative offsets get clipped, so the
   arrow stays at 0/0 and the content clears it with top padding. */
.tutorial-picker-content .tutorial-step-back {
    top: 0;
    left: -4px;
}
.tutorial-goal-content .tutorial-step-back {
    top: -4px;
    left: -8px;
}

.tutorial-level-content {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 72px);
    padding-top: 0;
}

.tutorial-level-content .tutorial-intro-back {
    position: absolute;
    top: -8px;
    left: -8px;
}

.tutorial-level-content .tutorial-eyebrow {
    margin-top: 0;
    color: var(--text-secondary);
}

.tutorial-level-content > h2 {
    max-width: 340px;
    margin: 14px auto 0;
    color: var(--text-primary);
    font-size: 28px;
    line-height: 1.18;
    text-align: center;
}

.tutorial-level-content .tutorial-radar-preview {
    margin: 0 auto;
}

.tutorial-level-content .level-radar .poly {
    fill: var(--accent-primary);
    fill-opacity: 0.14;
    stroke: var(--accent-primary);
    stroke-width: 2.4;
}

.tutorial-level-content .level-radar .axis-pct {
    font-size: 12px;
}

.tutorial-level-content .tutorial-body {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.42;
}

.tutorial-level-content .tutorial-secondary-action {
    width: 100%;
    min-height: 54px;
    /* Mock: skip pins to the bottom together with the primary CTA. */
    margin-top: auto;
    margin-bottom: 10px;
    padding: 10px 14px;
    border: 1.5px solid var(--accent-primary);
    border-radius: 14px;
    background: var(--bg-surface);
    color: var(--accent-primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.tutorial-level-content .tutorial-secondary-action:hover {
    background: var(--hero-soft);
    color: var(--accent-primary);
}

.tutorial-level-content .tutorial-secondary-action:active {
    transform: scale(0.98);
}

.tutorial-level-content #tutorial-level-next {
    margin-top: 0;
}

/* The skip button carries margin-top:auto — the CTA follows right under it. */
.tutorial-level-content > .onboarding-cta {
    margin-top: 0;
}

.tutorial-picker-content {
    position: relative;
    align-items: stretch;
    padding: 40px 3px 24px;
    text-align: left;
}

.tutorial-picker-content .tutorial-eyebrow,
.tutorial-picker-content > h2 {
    text-align: left;
}

.tutorial-picker-content .tutorial-eyebrow {
}

[dir="rtl"] .tutorial-picker-content .tutorial-eyebrow {
    padding-right: 0;
    padding-left: 48px;
}

.tutorial-picker-content > h2 {
    margin-top: 10px;
    font-size: 28px;
    line-height: 1.2;
}

.tutorial-picker-lead {
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.45;
    text-align: left;
}

.tutorial-picker-content .tutorial-level-options {
    gap: 8px;
    margin-top: 16px;
}

.tutorial-picker-content .tutorial-level-options button {
    display: flex;
    min-height: 56px;
    align-items: center;
    gap: 12px;
    padding: 9px 11px;
    border-radius: var(--radius-md);
}

.tutorial-picker-content .tutorial-level-options strong {
    display: grid;
    width: 46px;
    height: 36px;
    flex: 0 0 46px;
    place-items: center;
    border-radius: 9px;
    background: var(--hero-soft);
    color: var(--text-primary);
    font-size: 14px;
}

.tutorial-picker-content .tutorial-level-options button > span {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

.tutorial-picker-content .tutorial-level-options button b {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
}

.tutorial-picker-content .tutorial-level-options button small {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.25;
}

@media (max-height: 760px) {
    .tutorial-story-content {
        /* #onboarding-screen padding is 40px top + 32px bottom */
        min-height: calc(100dvh - 72px);
    }
    .tutorial-story-collage,
    .tutorial-book-stage,
    .tutorial-phrase-stage {
        transform: scale(0.86);
        transform-origin: top center;
        margin-bottom: -62px;
    }
}

/* Short viewports (Telegram header eats height): keep the CTA on screen
   without scrolling — shrink the collage compositions and headings. */
@media (max-height: 700px) {
    #onboarding-screen {
        padding-top: 20px;
    }
    .tutorial-story-content {
        /* padding-top shrinks to 20px here: 20 + 32 bottom */
        min-height: calc(100dvh - 52px);
    }
    .tutorial-story-content > h2,
    .tutorial-level-content > h2 {
        font-size: 24px;
    }
    .tutorial-progress {
        margin: 10px 0;
    }
    .tutorial-story-collage,
    .tutorial-book-stage,
    .tutorial-phrase-stage {
        margin-top: 10px;
        transform: scale(0.76);
        margin-bottom: -120px;
    }
    .tutorial-phrase-stage {
        transform: scale(0.72);
        margin-bottom: -138px;
    }
    .tutorial-level-content {
        min-height: calc(100dvh - 52px);
    }
}

@media (max-height: 620px) {
    .tutorial-story-collage,
    .tutorial-book-stage,
    .tutorial-phrase-stage {
        transform: scale(0.68);
        margin-bottom: -148px;
    }
}

.onboarding-content {
    width: 100%;
    text-align: center;
}

.onboarding-question {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}

.onboarding-question-study {
    margin-bottom: 4px;
}

/* Lesson-language picker hierarchy: the serif question is the dominant
   heading; the "You're learning English" line above it is a small caption. */
.onboarding-question-detected {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: start;
    margin-bottom: 16px;
}

#onboarding-lesson .onboarding-step-context {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-align: start;
    letter-spacing: 0;
    margin: 0 0 6px;
}

.onboarding-question.hidden {
    display: none;
}

.onboarding-step-context {
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-primary);
    margin: 0 0 12px;
    letter-spacing: 0.01em;
}

.onboarding-step-context.hidden {
    display: none;
}

/* Language Grid - for study languages (2x2) */
.language-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 320px;
    margin: 24px auto 0;
}

/* Language List - for lesson languages (scrollable) */
.language-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
    position: relative;
}

/* Scroll hint: mask-fade + animated chevron (pure CSS, no JS layout calc).
   The mask gradient fades the last ~80px of the list so whatever card
   is at the bottom visibly dissolves — works on any screen size without
   measuring card positions. The chevron bounces below the list. */
.language-search {
    width: 100%;
    padding: 10px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
    margin-bottom: 12px;
    transition: border-color var(--transition-fast);
}

.language-search:focus {
    border-color: var(--accent-primary);
}

.language-search::placeholder {
    color: var(--text-muted);
}

.language-list-wrapper {
    position: relative;
    width: 100%;
}

.language-list-wrapper .language-list {
    max-height: 60vh;
    overflow-y: auto;
    padding-bottom: 4px;
    mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent);
    transition: mask-image 0.3s ease, -webkit-mask-image 0.3s ease;
}

.language-list-wrapper.scrolled-bottom .language-list {
    mask-image: none;
    -webkit-mask-image: none;
}

/* Hide scroll hint when search is active */
.language-search:not(:placeholder-shown) ~ .language-list-wrapper .language-list {
    mask-image: none;
    -webkit-mask-image: none;
}

.language-search:not(:placeholder-shown) ~ .language-list-wrapper .scroll-hint-chevron {
    display: none;
}

.scroll-hint-chevron {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
    animation: scrollHintBounce 1.8s ease-in-out infinite;
}

.scroll-hint-chevron svg {
    display: block;
    width: 20px;
    height: 20px;
}

.language-list-wrapper.scrolled-bottom .scroll-hint-chevron {
    opacity: 0;
}

@keyframes scrollHintBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(4px); }
}

/* Language Card */
.language-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    text-align: start;
    width: 100%;
}

.language-no-results {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary);
}

/* Grid cards (study language) — centered vertical layout */
.language-grid .language-card {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
}

.language-grid .language-flag {
    font-size: 32px;
    margin-bottom: 8px;
}

.language-grid .language-info {
    align-items: center;
}

.language-grid .language-name {
    font-weight: 600;
    font-size: 16px;
}

.language-card:hover {
    border-color: var(--accent-primary);
}

.language-card:active {
    transform: scale(0.98);
}

.language-card.selected {
    border-color: var(--accent-primary);
    background: var(--hero-soft);
}

/* Lesson-language picker tiles: softer 14px corners, hairline border.
   The first tile is the detected/current language (list is ordered with it
   first) — highlight it as the current choice per mock. */
#lesson-language-list .language-card {
    border-width: 1.5px;
    border-radius: 14px;
    /* Mock: slimmer single-row tiles. */
    padding: 12px 14px;
}

/* Mock: English name bold left, native name muted right — one row. */
#lesson-language-list .language-flag {
    font-size: 24px;
}

#lesson-language-list .language-info {
    flex: 1;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

#lesson-language-list .language-name {
    font-weight: 700;
}

#lesson-language-list .language-native {
    text-align: end;
}

#lesson-language-list .language-card:first-child {
    background: var(--hero-soft);
    border-color: var(--accent-primary);
}

.language-flag {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.language-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.language-name {
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.language-native {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.language-card.selected .language-native {
    color: var(--text-secondary);
}

/* RTL: text-align:start on .language-card already handles alignment;
   flex-direction:row naturally flips under dir="rtl" so we don't override it.
   The list inherits direction from <html dir="rtl">, no extra rule needed. */

/* Language Settings Button */
.language-setting-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    text-align: start;
    transition: all 0.15s ease;
}

.language-setting-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
}

.language-setting-flag {
    font-size: 24px;
    margin-inline-end: 12px;
    flex-shrink: 0;
}

.language-setting-name {
    flex: 1;
    font-size: 16px;
    color: var(--text-primary);
}

.language-setting-arrow {
    font-size: 20px;
    color: var(--text-secondary);
    margin-inline-start: 8px;
}

/* Language Selector Modal */
.language-selector-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.language-selector-modal.open {
    opacity: 1;
}

.language-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.language-modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    background: var(--bg-surface);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.language-selector-modal.open .language-modal-content {
    transform: translateY(0);
}

.language-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.language-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.language-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.language-modal-close:hover {
    color: var(--text-primary);
}

.language-modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.language-modal-body.language-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 320px;
    margin: 0 auto;
}

.language-modal-body.language-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.language-modal-scrollable {
    max-height: 70vh;
}

/* RTL support for language settings:
   text-align:start + margin-inline-* on the base rules handle direction
   automatically. Only the chevron arrow needs explicit mirroring so it
   visually points away from the button (toward the modal trigger side). */
[dir="rtl"] .language-setting-arrow {
    transform: scaleX(-1);
}

/* ============================================
   Balance Display
   ============================================ */
.balance-container {
    display: inline-block;
    padding: 6px 16px;
    margin-bottom: 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    transition: all var(--transition-normal);
}

.balance-container.hidden {
    display: none;
}

.balance-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.balance-amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.balance-message {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Low balance state */
.balance-container.low {
    background: var(--hero);
}

.balance-container.low .balance-amount,
.balance-container.low .balance-message {
    color: var(--text-primary);
}

.balance-container.low .balance-amount::before {
    content: "⚠️ ";
}

/* Empty balance state */
.balance-container.empty {
    background: linear-gradient(135deg, #B05252 0%, #8B3E3E 100%);
    cursor: pointer;
}

.balance-container.empty:active {
    opacity: 0.85;
}

.balance-container.empty .balance-amount,
.balance-container.empty .balance-message {
    color: #ffffff;
}

.balance-container.empty .balance-amount::before {
    content: "❌ ";
}

/* Subscription state: green gradient, "Подписка до DD.MM" badge. */
.balance-container.subscription {
    background: linear-gradient(135deg, #4A8F5C 0%, #2F7041 100%);
    cursor: default;
}

.balance-container.subscription .balance-amount,
.balance-container.subscription .balance-message {
    color: #ffffff;
}

.balance-container.subscription .balance-amount::before {
    content: "✓ ";
}

/* Subscribe / upgrade CTA — Honey Brew: dedicated deep-green pay accent
   (--accent-pay) reserved exclusively for the subscription CTA, so it stands
   apart from both the brown primary Start button and the honey surfaces. */
.subscribe-btn {
    margin-top: 10px;
    background-color: var(--accent-pay);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 13px 20px;
    box-shadow: 0 6px 16px rgba(47, 107, 69, 0.35);
}

@media (prefers-color-scheme: dark) {
    .subscribe-btn {
        color: #fff;
    }
}

.subscribe-btn.hidden {
    display: none;
}

/* ============================================
   Call Summary (Thank You Screen)
   ============================================ */
.call-summary {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 24px;
    padding: 12px 20px;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    margin: 4px 0;
    width: 100%;
    max-width: 280px;
    border: 1px solid var(--border-color);
}

.summary-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.summary-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.summary-label {
    font-size: 12px;
    color: var(--text-muted);
}

.summary-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ============================================
   Purchase Modal
   ============================================ */
.purchase-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.purchase-modal.open {
    opacity: 1;
    pointer-events: auto;
}

.purchase-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.purchase-modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    background: var(--bg-surface);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.purchase-modal.open .purchase-modal-content {
    transform: translateY(0);
}

/* Drag-handle pill at the top of the purchase sheet (mock). */
.purchase-modal-content > .bottom-sheet-handle {
    margin: 10px auto 0;
    flex-shrink: 0;
}

.purchase-modal.tutorial-paywall .purchase-modal-content > .bottom-sheet-handle {
    display: none;
}

.purchase-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    flex-shrink: 0;
}

.purchase-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.purchase-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    font-weight: 300;
    color: var(--accent-primary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.purchase-modal-close:hover {
    color: var(--text-primary);
}

.purchase-modal-body {
    padding: 4px 20px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
}

.purchase-balance-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.purchase-current-value {
    font-weight: 600;
    color: var(--text-primary);
}

.purchase-max-text {
    font-size: 12px;
    color: var(--text-muted);
}

/* Package Cards */
.packages-container {
    display: flex;
    flex-direction: column;
    /* Room for the floating "most popular" badge (top: -9px) between cards. */
    gap: 14px;
    margin: var(--spacing-md) 0;
}

/* Unselected plans read as white surface cards with a visible hairline. */
.package-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.package-price-rub {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 16px;
}

/* 3-tier plan ladder : per-week price plate + banner badge */
.package-price-plate {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0;
    background: transparent;
    border-radius: 0;
    flex-shrink: 0;
    text-align: right;
}

.package-price-week {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
}

.package-price-unit {
    font-size: 11px;
    color: var(--text-secondary);
}

.package-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.package-sub {
    font-size: 13px;
    color: var(--text-secondary);
}

.packages-renewal-footer {
    margin-top: var(--spacing-sm);
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.package-price-was {
    color: var(--text-secondary);
    text-decoration: line-through;
}

/* "Most popular" card: accent border + full-width banner on top (own design
   palette). Banner bleeds to the card edges via negative
   margins; flex-wrap puts it on its own row above label/plate. */
.package-card {
    position: relative;
    flex-wrap: wrap;
}

.package-card.popular {
    /* Mock: heavier, darker brown outline on the highlighted card. */
    border-width: 2px;
    border-color: color-mix(in srgb, var(--accent-primary) 75%, var(--text-primary));
    background: var(--hero-soft);
    /* overflow must stay visible: the badge floats over the top border. */
}

/* Honey Brew: selected plan reads as honey-tinted with accent border. */
.package-card.selected {
    border-color: var(--accent-primary);
    background: var(--hero-soft);
}

/* Small honey badge pill floating centered on the card's top border. */
.package-badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 3px 10px;
    background: var(--hero);
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    border-radius: 8px;
    white-space: nowrap;
}

.purchase-step {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.purchase-step.hidden {
    display: none;
}

/* Step 2: payment method cards */
.payment-methods {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.method-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    width: 100%;
    min-height: 64px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    color: var(--text-primary);
}

.method-card:hover {
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
}

.method-card:active {
    transform: scale(0.99);
}

/* Mock: card icon in a ~56px honey rounded tile left of the text. */
.method-card-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--hero);
    font-size: 24px;
    line-height: 1;
}

.method-card-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.method-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.method-card-sub {
    font-size: 14px;
    color: var(--text-secondary);
}

.method-card-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

/* 54-ФЗ receipt email step (YooKassa) */
.receipt-email-step {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.receipt-email-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.receipt-email-input {
    width: 100%;
    padding: var(--spacing-md);
    font-size: 16px;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition-fast);
}

.receipt-email-input:focus {
    border-color: var(--accent-primary);
}

.receipt-email-input.invalid {
    border-color: var(--accent-danger);
}

.receipt-email-error {
    font-size: 14px;
    color: var(--accent-danger);
}

.receipt-email-note {
    font-size: 14px;
    color: var(--text-secondary);
}

.receipt-email-continue {
    width: 100%;
    min-height: 48px;
    padding: var(--spacing-md);
    font-size: 16px;
    font-weight: 600;
    color: var(--bg-surface);
    background: var(--accent-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.receipt-email-continue:disabled {
    opacity: 0.6;
    cursor: default;
}

.receipt-email-continue:hover {
    background: var(--accent-primary-hover);
}

.receipt-email-continue:active {
    transform: scale(0.99);
}

/* Back arrow in step 2 header */
.purchase-method-back {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-primary);
}

.purchase-method-back:hover {
    color: var(--accent-primary);
}

.purchase-method-prompt {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-sm);
}

.purchase-method-footer {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin: var(--spacing-md) 0 0;
}

/* Auto-renewal disclosure — shown next to the payment action so the recurring
   nature of the subscription is stated at the point of purchase, not only in
   Terms or the payment provider's own checkout. */
.purchase-renewal-note {
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary);
    background: var(--hero-soft);
    border: none;
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin: 0 0 var(--spacing-md);
}

/* YooKassa embedded widget container */
.yookassa-widget {
    margin-top: var(--spacing-md);
    min-height: 420px;
    width: 100%;
}
.yookassa-widget.hidden {
    display: none;
}

/* Stripe Embedded Checkout container */
.stripe-checkout {
    margin-top: var(--spacing-md);
    min-height: 400px;
    width: 100%;
}
.stripe-checkout.hidden {
    display: none;
}

.package-card:hover:not(.disabled) {
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}

.package-card:active:not(.disabled) {
    transform: scale(0.98);
}

.package-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.package-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.package-price {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-primary);
}

.star-icon {
    font-size: 14px;
}

.package-disabled-text {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: var(--spacing-sm);
}

.purchase-footer {
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
    margin-top: var(--spacing-sm);
}

.purchase-stars-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

.purchase-stars-hint a {
    color: var(--accent-primary);
    text-decoration: none;
}

/* Purchase Status */
.purchase-status {
    text-align: center;
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: all var(--transition-fast);
}

.purchase-status:empty {
    display: none;
}

.purchase-status.loading {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.purchase-status.success {
    background: rgba(88, 129, 87, 0.15);
    color: var(--accent-success);
}

.purchase-status.error {
    background: rgba(176, 82, 82, 0.15);
    color: var(--accent-danger);
}

.purchase-status.info {
    background: rgba(107, 78, 61, 0.15);
    color: var(--accent-primary);
}

/* RTL Support for Balance */
[dir="rtl"] .balance-container {
    text-align: center;
}

[dir="rtl"] .summary-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .purchase-modal-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .purchase-balance-info {
    flex-direction: row-reverse;
}

[dir="rtl"] .package-card {
    flex-direction: row-reverse;
}

[dir="rtl"] .package-disabled-text {
    margin-left: 0;
    margin-right: var(--spacing-sm);
}

/* ==============================
   Level Check Screens
   ============================== */

.onboarding-back-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-primary);
    line-height: 1;
    z-index: 1;
}

/* Back chevron is absolutely positioned at 16/16; give the step's content
   top clearance so the H2 doesn't collide with it on narrow screens. */
#onboarding-level-check .onboarding-content {
    padding-top: 16px;
}

/* Compact type on this step so everything fits one phone screen */
#onboarding-level-check .onboarding-question {
    font-size: 20px;
    margin-bottom: var(--spacing-sm);
}

.onboarding-level-check-facts {
    list-style: none;
    padding: 0;
    margin: 0 auto var(--spacing-md);
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.onboarding-level-check-fact {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--text-secondary);
    text-align: left;
}

.onboarding-level-check-fact-strong {
    font-weight: 700;
    color: var(--text-primary);
}

/* Honey Brew: icon tiles are light-honey rounded squares. */
.onboarding-fact-badge {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hero-soft);
}

.onboarding-fact-badge-wifi {
    background: var(--hero-soft);
}

.onboarding-fact-badge-mic {
    background: var(--hero-soft);
}

.onboarding-fact-icon {
    flex-shrink: 0;
    color: var(--accent-primary);
    opacity: 0.85;
}

/* Sample radar preview shown before the level check starts */
.level-check-radar-preview {
    text-align: center;
    margin: 0 auto var(--spacing-md);
}

.level-check-radar-preview .level-radar {
    display: block;
    width: min(250px, 66vw);
    margin: 0 auto 4px;
}

.level-check-axes-link {
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.onboarding-level-check-actions {
    margin-top: auto;
    padding-bottom: var(--spacing-md);
    width: 100%;
    text-align: center;
}

.level-check-time-pill {
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 6px;
    background: var(--hero-soft);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: var(--spacing-sm);
}

.onboarding-error {
    margin-top: var(--spacing-md);
    color: #d93025;
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.4;
}

/* Level loading screen */
.level-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--spacing-xl);
    gap: var(--spacing-md);
}

.level-loading-text {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    max-width: 320px;
    line-height: 1.4;
}

/* Honey ring around the countdown numeral. */
.level-loading-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    border: 8px solid var(--hero);
    border-radius: 50%;
}

.level-countdown-number {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

/* Mock: content-hugging column centered under the ring.
   done  = honey rounded-square chip with a green check,
   active = full-row honey pill with bold text + honey square dot,
   pending = plain muted text with no marker. */
.level-loading-axes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: max-content;
    max-width: 100%;
}
.level-loading-axes li {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 500 16px/1.3 system-ui, sans-serif;
    color: var(--text-secondary);
    transition: color .25s;
}
.level-loading-axis-check {
    display: none;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--hero);
    flex-shrink: 0;
    transition: background .25s, transform .25s;
}
/* Done = every item before the currently pulsing one. */
.level-loading-axes li:has(~ li.pulsing) {
    color: var(--text-primary);
}
.level-loading-axes li:has(~ li.pulsing) .level-loading-axis-check {
    display: inline-flex;
}
.level-loading-axes li:has(~ li.pulsing) .level-loading-axis-check::after {
    content: "\2713";
    color: var(--accent-success);
    font-size: 15px;
    font-weight: 800;
}
.level-loading-axes li.pulsing {
    color: var(--text-primary);
    font-weight: 700;
    background: var(--hero);
    border-radius: 14px;
    padding: 10px 18px 10px 12px;
}
.level-loading-axes li.pulsing .level-loading-axis-check {
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-primary) 22%, var(--hero));
    animation: pulse 1s ease-in-out infinite;
}

/* Level result screen — radar */
.level-result-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding-top: max(env(safe-area-inset-top), 24px);
    text-align: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.level-result-complete-badge {
    align-self: center;
    padding: 7px 12px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--accent-success) 12%, var(--bg-surface));
    color: var(--accent-success);
    font-size: 12px;
    font-weight: 800;
}

.level-result-heading {
    display: grid;
    justify-items: center;
    gap: 0;
}

.level-result-heading strong {
    color: var(--text-primary);
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.05em;
}

.level-result-heading span {
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 700;
}

.level-result-summary {
    max-width: 340px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}
/* Same sizing as the home-level-card radar so labels can spill into the
   wrap padding via overflow:visible instead of clipping at the SVG edge.
   Long Cyrillic titles ("Точность", "Звучание") need this. */
.level-radar-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 36px;
    box-sizing: content-box;
}
.level-radar {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
    overflow: visible;
}
.level-radar .ring, .home-level-radar .ring { fill: none; stroke: var(--border-color); stroke-width: 1; }
.level-radar .axis, .home-level-radar .axis { stroke: var(--border-color); stroke-width: 1; }
/* Mock: solid warm brown-tinted fill + dark-brown stroke (no gradient). */
.level-radar .poly, .home-level-radar .poly {
    fill: var(--accent-primary);
    fill-opacity: 0.16;
    stroke: var(--accent-primary);
    stroke-width: 2.5;
}
.level-radar .axis-label, .home-level-radar .axis-label {
    font: 600 13px/1 system-ui, sans-serif;
    fill: var(--text-primary);
    dominant-baseline: middle;
}
.level-radar .axis-sub, .home-level-radar .axis-sub {
    font: 400 10px/1.2 system-ui, sans-serif;
    fill: var(--text-secondary);
    dominant-baseline: middle;
}
.level-radar .axis-pct, .home-level-radar .axis-pct {
    font: 700 16px/1 system-ui, sans-serif;
    dominant-baseline: middle;
}

/* Plain underlined text link per mock — no pill, no border, no "?" icon. */
.level-explain-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px auto 0;
    padding: 12px 18px;
    min-height: 44px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font: 500 14px/1 system-ui, sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.level-explain-btn svg { display: none; }
.level-explain-btn:active { opacity: 0.7; }

.level-independence {
    display: flex;
    justify-content: center;
    margin: 8px auto 0;
}
.level-independence-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font: 600 13px/1 system-ui, sans-serif;
}

/* Stray empty white pill between the radar and the axes link. */
.level-independence-pill:empty {
    display: none;
}

.level-result-cta {
    margin: auto 24px 28px;
    padding-top: 16px;
}
.level-result-cta .btn-primary {
    width: 100%;
    height: 48px;
}

/* Bottom sheet — legend */
.level-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 100;
}
/* Sticky so the X stays reachable while the sheet content scrolls.
   Negative margin removes it from the flow height (grip stays centered). */
.level-sheet-close {
    position: sticky;
    top: 4px;
    margin-left: auto;
    margin-bottom: -32px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
}

.level-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-surface);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
    padding: 16px 20px 28px;
    z-index: 101;
    max-height: 92%;
    overflow-y: auto;
}
.level-sheet.open { transform: translateY(0); }
.level-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.level-sheet-grip {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-tertiary);
    margin: 0 auto 12px;
}
.level-sheet-title {
    font: 700 18px/1.2 system-ui, sans-serif;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.level-sheet-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}
.level-sheet-item:last-child { border-bottom: 0; }
.level-sheet-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
    margin-top: 6px;
}
.level-sheet-body { flex: 1; min-width: 0; }
.level-sheet-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}
.level-sheet-title-row {
    font: 600 15px/1.2 system-ui, sans-serif;
    color: var(--text-primary);
}
.level-sheet-row .level-sheet-title {
    font: 600 15px/1.2 system-ui, sans-serif;
    color: var(--text-primary);
    margin: 0;
}
.level-sheet-pct {
    font: 700 14px/1 system-ui, sans-serif;
}
.level-sheet-text {
    font: 400 13px/1.4 system-ui, sans-serif;
    color: var(--text-secondary);
}

/* Level retry screen — Tier 3a / 3b / 4 */
.level-retry-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--spacing-xl);
    text-align: center;
    gap: var(--spacing-md);
}
.level-retry-icon {
    color: var(--accent-primary);
    opacity: 0.8;
}
.level-retry-title {
    font: 700 20px/1.3 system-ui, sans-serif;
    color: var(--text-primary);
}
.level-retry-message {
    font: 400 15px/1.5 system-ui, sans-serif;
    color: var(--text-secondary);
    max-width: 320px;
}
.level-retry-content .btn-primary {
    min-width: 200px;
    margin-top: var(--spacing-sm);
}
.level-retry-escalation {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    width: 100%;
    max-width: 320px;
}
.level-retry-hint {
    font: 400 13px/1.4 system-ui, sans-serif;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.level-retry-support-link {
    font: 600 14px/1.3 system-ui, sans-serif;
    color: var(--accent-primary);
    text-decoration: none;
}
.level-retry-support-link:hover { text-decoration: underline; }

.btn-text {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

/* --- catalog screen types (unit rework) --- */
/* Speaking/ungraded screens: pronunciation, personalize, discussion-as-screen,
   dialogue pairs[] + shared inline audio play buttons. */
.speaking-focus {
    /* The teaching point of the screen — must read as content, not a footnote. */
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--hero-soft);
    border-inline-start: 3px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: var(--spacing-md);
}

.speaking-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.speaking-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
}

.speaking-card-number {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-primary);
    line-height: 1.7;
}

.speaking-card-text {
    flex: 1;
}

.pronunciation-item {
    align-items: center;
}

.pronunciation-target {
    border-color: var(--accent-primary);
}

.pronunciation-texts {
    flex: 1;
    min-width: 0;
}

.pronunciation-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.pronunciation-phrase {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.sentence-starters {
    margin-top: var(--spacing-md);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}

.sentence-starters-heading {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.sentence-starter {
    font-size: 14px;
    line-height: 1.6;
    font-style: italic;
    color: var(--text-primary);
}

.inline-audio-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.inline-audio-btn.playing {
    background: var(--accent-primary-hover);
    box-shadow: 0 0 0 3px var(--bg-secondary);
}

.dialogue-line {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.dialogue-line-text {
    flex: 1;
}

.dialogue-bubble .inline-audio-btn {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.dialogue-bubble.speaker-b .inline-audio-btn {
    background: var(--bg-surface);
    color: var(--accent-primary);
}

/* ==========================================================================
   Auth sheet — browser sign-in (WEB_ACCOUNT_LINKING_PLAN.md "Auth UI spec").
   Mobile: bottom sheet; desktop (min-width 640px): centered modal 480px.
   ========================================================================== */
.auth-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 110;
}
.auth-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.auth-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-surface);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
    padding: 16px 24px 28px;
    z-index: 111;
    max-height: 92%;
    overflow-y: auto;
    box-shadow: var(--shadow-floating);
}
.auth-sheet.open { transform: translateY(0); }
.auth-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-sheet-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 4px;
}
.auth-sheet-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
    line-height: 1.4;
}
.auth-google-btn {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
}
.auth-google-g { flex: none; }
.auth-link-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 10px;
    min-height: 44px;
}
.auth-legal {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.4;
    opacity: .8;
    margin: 0;
}
.auth-legal a { color: var(--text-secondary); }
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.auth-field label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.auth-field input {
    background: var(--bg-tertiary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 16px;
    color: var(--text-primary);
    min-height: 48px;
}
.auth-field input:focus-visible,
.auth-sheet button:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.auth-field-error {
    color: var(--accent-danger);
    font-size: 14px;
    min-height: 0;
    margin: 0;
}
.auth-form-error { text-align: center; }
.auth-notice {
    font-size: 14px;
    color: var(--accent-success);
    text-align: center;
    margin: 0;
}
.auth-btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    margin-inline-start: 8px;
}
.auth-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--text-primary);
    color: var(--bg-surface);
    border-radius: var(--radius-full);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 120;
    max-width: min(90vw, 420px);
    text-align: center;
}
.auth-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.signin-chip {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-primary);
    cursor: pointer;
    min-height: 32px;
}
@media (min-width: 640px) {
    /* Desktop: the sheet becomes a centered modal. */
    .auth-sheet {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        width: 480px;
        max-width: calc(100vw - 48px);
        border-radius: var(--radius-lg);
        transform: translate(-50%, -50%) scale(0.97);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s, transform .2s;
    }
    .auth-sheet.open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        pointer-events: auto;
    }
    .auth-sheet .level-sheet-grip { display: none; }
}
.settings-account-line {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}
.onboarding-signin-link {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    font-size: 14px;
    padding: 8px;
    min-height: 36px;
}

/* One wide field instead of six boxes: the same six digits, but paste,
   password managers and one-time-code autofill all work without per-box
   focus juggling. */
.auth-code-input {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 8px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Email gate — covers the level-check result until an address is entered.
   The radar stays visible (blurred) behind it: the learner can see there is
   a real result waiting, which is the whole reason they hand over the email. */
.email-gate {
    position: fixed;
    inset: 0;
    z-index: 115;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
    overflow-y: auto;
}
.email-gate-blur {
    filter: blur(7px);
    pointer-events: none;
    user-select: none;
}
.email-gate-card {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}
.email-gate-lock {
    color: var(--accent-primary);
    display: flex;
    justify-content: center;
}
.email-gate-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}
.email-gate-sub {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}
.email-gate-privacy {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-secondary);
    margin: 4px 0 0;
    line-height: 1.4;
    text-align: start;
}
.email-gate-card .auth-field input { text-align: center; }
.email-gate-card .auth-field-error { text-align: center; }

/* English Share (language mix) selector */
.english-share-welcome {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-top: var(--spacing-md);
    padding: 16px;
}

.english-share-welcome .settings-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.english-share-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.english-share-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: start;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.english-share-card-radio {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    border: 2px solid var(--text-muted);
    flex: 0 0 auto;
    margin-top: 1px;
    position: relative;
}

.english-share-card.selected {
    border-color: var(--accent-primary);
    background: var(--hero-soft);
}

.english-share-card.selected .english-share-card-radio {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
}

.english-share-card.selected .english-share-card-radio::after {
    content: "\2713";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-surface);
    font-size: 12px;
    font-weight: 700;
}

.english-share-card-body {
    min-width: 0;
    display: block;
}

.english-share-card-name {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.english-share-card-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-success);
    background: color-mix(in srgb, var(--accent-success) 12%, transparent);
    border-radius: var(--radius-full);
    padding: 2px 10px;
}

.english-share-card-desc {
    display: none;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-top: 4px;
}

.english-share-card.selected .english-share-card-desc {
    display: block;
}

.english-share-card-mix {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
    max-width: 180px;
    background: color-mix(in srgb, var(--accent-success) 45%, white);
}

.english-share-card-mix i {
    display: block;
    height: 100%;
    background: var(--accent-primary);
    margin-inline-start: auto;
}

.english-share-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 10px;
}

.english-share-legend-native,
.english-share-legend-english {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

.english-share-legend-native {
    background: color-mix(in srgb, var(--accent-success) 45%, white);
}

.english-share-legend-english {
    background: var(--accent-primary);
    margin-inline-start: 10px;
}

.english-share-welcome-hint {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 4px 0 14px;
}

.english-share-modal-body {
    padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
}

.english-share-en-note {
    font-size: 12px;
    color: var(--warning, #e6a23c);
    line-height: 1.4;
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(230, 162, 60, 0.08);
    border-radius: var(--radius-md, 10px);
}

/* Onboarding: detected-language confirm + English warning */
.onboarding-question-en {
    font-size: 16px;
    color: var(--text-secondary);
    margin-top: 8px;
    text-align: center;
}

.onboarding-question-en.hidden {
    display: none;
}

.onboarding-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding-top: 28px;
}

.onboarding-confirm-actions .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.btn-sublabel {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.75;
}

.btn-sublabel.hidden {
    display: none;
}

.onboarding-english-warning-body {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 12px;
    text-align: left;
}

/* Mock: the heading + body block is vertically weighted toward the center
   of the space above the pinned CTAs (both auto margins split the space). */
#onboarding-confirm .onboarding-question,
#onboarding-english-warning .onboarding-question {
    margin-top: auto;
}

/* ============================================
   Voice Speed Button (in-call bar, 4th action)
   ============================================ */
/* Same shape as .btn-icon-transcript / .btn-icon-mute — outlined,
   warm-brown — but the inner glyph is the LIVE speed value rendered
   as text ("1x" / "0.9x" / "1.2x") instead of an icon. The button
   doubles as a discoverable affordance and a status indicator. */
.btn-icon-speed {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-color);
}

#speed-btn:active .btn-icon-circle {
    transform: scale(0.95);
}

.speed-value {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text-primary);
}

/* ============================================
   Bottom Sheet (generic — used by Voice Speed)
   ============================================ */
.bottom-sheet {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bottom-sheet.hidden {
    display: none;
}

.bottom-sheet-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(74, 51, 36, 0.4);
    animation: fadeIn var(--transition-fast);
}

.bottom-sheet-panel {
    position: relative;
    z-index: 1;
    background: var(--bg-surface);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    padding: 12px 20px 24px;
    box-shadow: var(--shadow-floating);
    animation: slideUpSheet var(--transition-normal);
}

@keyframes slideUpSheet {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.bottom-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-tertiary);
    margin: 0 auto 16px;
}

.bottom-sheet-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px;
    text-align: center;
}

/* ============================================
   Voice Speed Sheet contents
   ============================================ */
.voice-speed-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.voice-speed-slider-wrap .settings-slider {
    flex: 1;
}

.voice-speed-value-label {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    min-width: 48px;
    padding: 4px 10px;
    background: var(--hero-soft);
    border-radius: 10px;
    text-align: center;
}

.voice-speed-caption {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
}

/* End lesson confirmation intentionally contains no explanatory body: the
   product does not promise to save unfinished progress. */
.end-call-panel {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.end-call-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.end-call-actions .btn {
    width: 100%;
}

/* Approved mockup: the primary "End" button is the standard brown filled
   button (destructive semantics live in the sheet text). Text color comes
   from .btn so dark mode keeps its token parity. */
.end-call-confirm {
    background: var(--accent-primary);
}

.end-call-confirm:hover:not(:disabled) {
    background: var(--accent-primary-hover);
}


/* ============================================
   Voice Speed Picker (settings modal + course-welcome step)
   ============================================ */
.voice-speed-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

/* Tutorial speed step is left-aligned per mock. */
#tutorial-speed .tutorial-eyebrow,
#tutorial-speed h2,
#tutorial-speed .tutorial-body,
#tutorial-speed .settings-label,
#tutorial-speed .english-share-welcome-hint {
    text-align: left;
}

.voice-speed-picker-slider {
    width: 100%;
}

/* Mock: full-width slider, then a bottom row with the honey value pill
   on the left and the outlined "Listen" pill on the right. */
.voice-speed-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.voice-speed-picker-value {
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--hero);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.voice-speed-listen-btn {
    width: max-content;
    min-width: 0;
    padding: 10px 18px;
    border-radius: 999px;
    position: relative;
}

/* Loading state while the sample buffers: dim label, show a spinner. */
.voice-speed-listen-btn.is-loading {
    color: transparent;
}

.voice-speed-listen-btn.is-loading::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--text-secondary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ============================================
   Agent Status Badge (Dara: listening/thinking/speaking)
   Floating bottom-left of the content area, above the bottom bar.
   Sole DOM owner: agent-status.js. States switch via [data-state].
   ============================================ */
/* Honey Brew: fixed-footprint neutral pill so surrounding buttons never
   jump when the caption changes (слушаю…/думаю…/говорю…). */
.agent-status {
    position: absolute;
    left: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 25;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 122px;
    padding: 7px 13px;
    border-radius: 9999px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    color: var(--text-secondary);
    pointer-events: none;
}

.agent-status.hidden { display: none; }

.agent-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.agent-status-caption {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 150ms ease;
}

/* one icon per state */
.agent-status .as-icon { display: none; }
.agent-status[data-state="connecting"] .as-icon-connecting { display: block; }
.agent-status[data-state="listening"] .as-icon-listening { display: block; }
.agent-status[data-state="thinking"] .as-icon-thinking { display: flex; }
.agent-status[data-state="speaking"] .as-icon-speaking { display: block; }
.agent-status[data-state="problem"] .as-icon-problem { display: block; }

.agent-status[data-state="thinking"] .agent-status-icon,
.agent-status[data-state="speaking"] .agent-status-icon {
    color: var(--accent-primary);
}

/* Problem: keep the pill neutral, color only the glyph (calm zone —
   no red filled areas on the call screen). */
.agent-status[data-state="problem"] .agent-status-icon {
    color: var(--accent-danger);
    border-radius: 50%;
    animation: agent-status-problem-pulse 1.2s ease-in-out infinite;
}

.agent-status[data-state="problem"] .agent-status-caption {
    color: var(--accent-danger);
    font-weight: 600;
}

@keyframes agent-status-problem-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(176, 82, 82, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(176, 82, 82, 0); }
}

.agent-status .think-dots { gap: 4px; align-items: center; }
.agent-status .think-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: agent-status-think 1.2s infinite;
}
.agent-status .think-dots span:nth-child(2) { animation-delay: 0.2s; }
.agent-status .think-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes agent-status-think {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

.agent-status-retry {
    pointer-events: auto;
    flex-basis: 100%;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--accent-danger);
    border: none;
    border-radius: var(--radius-full);
    padding: 6px 14px;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}
.agent-status-retry.hidden { display: none; }

[dir="rtl"] .agent-status { left: auto; right: 16px; }

@media (prefers-reduced-motion: reduce) {
    .agent-status-icon,
    .agent-status .think-dots span { animation: none; }
}

/* ============================================
   Course Welcome (round-2 Honey Brew fixes)
   Base rules live in catalog-home.css; these higher-specificity
   overrides win regardless of stylesheet order.
   ============================================ */
#course-welcome-screen .course-welcome-card {
    background: var(--hero);
    border-color: transparent;
    text-align: start;
}

#course-welcome-screen .course-welcome-sub {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    margin: 10px 0 0;
}

#course-welcome-screen .course-welcome-unit-card {
    display: flex;
    gap: 12px;
    align-items: center;
}

.course-welcome-unit-tile {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex: 0 0 auto;
}

@media (prefers-color-scheme: dark) {
    .course-welcome-unit-tile {
        background: rgba(255, 255, 255, 0.14);
    }
}

.course-welcome-unit-info {
    min-width: 0;
}

.course-welcome-unit-intro,
.course-welcome-unit-meta {
    font-size: 12px;
    color: var(--text-primary);
    opacity: 0.75;
    margin: 0;
}

.course-welcome-unit-meta {
    margin-top: 2px;
}

.course-welcome-unit-title {
    font-family: ui-serif, Georgia, 'Times New Roman', serif;
    font-size: 17px;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0;
}

.course-welcome-note {
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--bg-surface);
    border-radius: 16px;
    padding: 12px 14px;
    margin-top: 10px;
    box-shadow: var(--shadow-sm);
}

.course-welcome-note span {
    color: var(--accent-success);
    font-size: 16px;
}

.course-welcome-note p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: start;
}

/* Books emoji sits on a translucent rounded-square tile. */
#course-welcome-screen .course-welcome-icon {
    width: 68px;
    height: 68px;
    margin: var(--spacing-lg) auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 13px;
    font-size: 34px;
}

@media (prefers-color-scheme: dark) {
    #course-welcome-screen .course-welcome-icon {
        background: rgba(255, 255, 255, 0.14);
    }
}

/* Home intro tour (2026-07-26, reworked 2026-07-28): ONE overlay for the
   whole walk — the spotlight and the card animate from step to step instead
   of the DOM being rebuilt, and the card is pinned outside the spotlight so
   it can never cover what it is pointing at. */
.tutorial-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    cursor: pointer;
}
.tutorial-tour-overlay.tutorial-tour-dim {
    background: color-mix(in srgb, var(--text-primary) 55%, transparent);
}
.tutorial-tour-highlight {
    position: absolute;
    border-radius: 20px;
    /* The dim IS the spotlight's shadow — one soft cut-out, no box on top. */
    box-shadow:
        0 0 0 9999px color-mix(in srgb, var(--text-primary) 55%, transparent),
        0 0 0 3px color-mix(in srgb, var(--accent-primary) 45%, transparent);
    pointer-events: none;
    transition:
        top var(--transition-normal),
        left var(--transition-normal),
        width var(--transition-normal),
        height var(--transition-normal);
}
.tutorial-tour-card {
    position: absolute;
    left: 16px;
    right: 16px;
    background: var(--bg-surface);
    border-radius: 16px;
    padding: 16px;
    display: grid;
    gap: 10px;
    text-align: left;
    box-shadow: var(--shadow-floating), 0 12px 40px rgba(0, 0, 0, 0.22);
    transition: top var(--transition-normal);
}
.tutorial-tour-card.tutorial-tour-card-center {
    max-width: 340px;
    margin: 0 auto;
    padding: 22px 20px;
    text-align: center;
}
.tutorial-tour-card strong { font-size: 20px; }
.tutorial-tour-card p { font-size: 16px; color: var(--text-secondary); margin: 0; }
/* Pointer to the spotlight: up when the card sits below it, down when the
   card had to move above. Its x is set inline from the hole's centre. */
.tutorial-tour-arrow {
    position: absolute;
    top: -8px;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    background: var(--bg-surface);
    transform: rotate(45deg);
    border-radius: 3px;
}
.tutorial-tour-card-above .tutorial-tour-arrow {
    top: auto;
    bottom: -8px;
}
.tutorial-step-count {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.tutorial-tour-actions {
    display: flex;
    gap: 10px;
}
/* .btn is width:100% by default — inside the row it must share, not claim. */
.tutorial-tour-actions .btn {
    width: auto;
    padding: 12px 16px;
}
.tutorial-tour-back { flex: 0 0 auto; }
.tutorial-tour-next { flex: 1 1 0; }
body.tutorial-scroll-lock {
    overflow: hidden;
    height: 100vh;
}
@media (prefers-reduced-motion: reduce) {
    .tutorial-tour-highlight,
    .tutorial-tour-card { transition: none; }
}