@import "tailwindcss";

@layer utilities {
  .hide-native-scrollbar {
    -ms-overflow-style: none !important;  /* IE and Edge */
    scrollbar-width: none !important;  /* Firefox */
  }
  .hide-native-scrollbar::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari and Opera */
  }
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3); /* zinc-400 with opacity */
    border-radius: 10px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.5);
  }
}


/* Force scrollbar visibility on touch devices */
@media (pointer: coarse), (hover: none) {
  ::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    -webkit-appearance: none;
    display: block !important;
    background: transparent;
  }
  
  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5) !important;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
}

/* Apply scrollbar styling to any element that scrolls */
.overflow-y-auto::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  -webkit-appearance: none;
}

.overflow-y-auto::-webkit-scrollbar-track,
.overflow-auto::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-auto::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.4);
  border-radius: 10px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover,
.overflow-auto::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.6);
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}

/* ── No long-press selection / callout on controls (app-wide, all OS) ──────
   Long-pressing any button or interactive control must never select its text,
   fire the iOS touch-callout, or flash the tap-highlight. (These properties
   inherit, so icons inside the control are covered too.) Text content — chat
   messages, inputs — keeps normal selection. The browser's image/link
   long-press menu is suppressed by a capture-phase contextmenu guard in
   index.tsx. */
button,
[role="button"],
.session-mode-tag,
.stamina-collect-btn,
.logo-button,
.profile-picture-button {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}


/* Face2Face Mode Styles */
.f2f-active-ring {
    box-shadow: 0 0 0 2px #4ade80, 0 0 10px #4ade80;
    border-radius: 50%;
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.5), 0 0 10px rgba(74, 222, 128, 0.3);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.8), 0 0 15px rgba(74, 222, 128, 0.6);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.5), 0 0 10px rgba(74, 222, 128, 0.3);
    }
}

.api-indicator {
    position: absolute;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 20;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
    border: 2px solid transparent;
}

.api-indicator.tool-call {
    animation: api-spin 1s linear infinite;
}

.api-indicator.tool-color-0 { border-top-color: #06b6d4; border-right-color: #06b6d4; } /* Cyan */
.api-indicator.tool-color-1 { border-top-color: #3b82f6; border-right-color: #3b82f6; } /* Blue */
.api-indicator.tool-color-2 { border-top-color: #ec4899; border-right-color: #ec4899; } /* Pink */
.api-indicator.tool-color-3 { border-top-color: #f43f5e; border-right-color: #f43f5e; } /* Red-Pink */

.api-indicator.retry {
    border-color: #ef4444;
    animation: api-breathe 2s ease-in-out infinite;
}

@keyframes api-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes api-breathe {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4), 0 0 8px rgba(239, 68, 68, 0.4);
        opacity: 0.6;
    }
    50% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.8), 0 0 16px rgba(239, 68, 68, 0.8);
        opacity: 1;
    }
}

.face2face-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 50;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

.face2face-overlay.visible {
    opacity: 1;
    pointer-events: none;
}

.avatar-container-large {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: 600px;
    max-height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: pan-y; /* Allow vertical scrolling even when pointer-events is auto */
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gatePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.3);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 0 16px 4px rgba(6, 182, 212, 0.15);
    }
}

@keyframes offlineHeartbeat {
    0% {
        box-shadow: 0 0 4px rgba(245, 158, 11, 0.2);
        border-color: rgba(245, 158, 11, 0.3);
    }
    50% {
        box-shadow: 0 0 16px 6px rgba(245, 158, 11, 0.45);
        border-color: rgba(245, 158, 11, 0.6);
        background: rgba(245, 158, 11, 0.08) !important;
    }
    100% {
        box-shadow: 0 0 4px rgba(245, 158, 11, 0.2);
        border-color: rgba(245, 158, 11, 0.3);
    }
}

.chat-input.is-offline {
    background: rgba(245, 158, 11, 0.05) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: rgba(245, 158, 11, 0.85) !important;
    cursor: not-allowed;
    text-align: center;
    font-weight: 600;
    animation: offlineHeartbeat 2.5s ease-in-out infinite;
}

@keyframes offlineTextPulse {
    0% {
        opacity: 0.85;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
        text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
    }
    100% {
        opacity: 0.85;
        transform: scale(1);
    }
}

.offline-notice-heartbeat {
    animation: offlineTextPulse 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes offlineBannerPulse {
    0% {
        box-shadow: 0 0 4px rgba(245, 158, 11, 0.1);
        border-color: rgba(245, 158, 11, 0.2);
        background: rgba(245, 158, 11, 0.08);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 16px 4px rgba(245, 158, 11, 0.35);
        border-color: rgba(245, 158, 11, 0.5);
        background: rgba(245, 158, 11, 0.15);
        transform: scale(1.015);
    }
    100% {
        box-shadow: 0 0 4px rgba(245, 158, 11, 0.1);
        border-color: rgba(245, 158, 11, 0.2);
        background: rgba(245, 158, 11, 0.08);
        transform: scale(1);
    }
}

.offline-banner-heartbeat {
    animation: offlineBannerPulse 2.5s ease-in-out infinite;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* ─── Header Status Banner (sync / offline) ──────────────────────── */
/* Thin full-width bar that overlaps the top of the chat history, styled after
   the sandbox status bar. Pointer events pass through so it never blocks the
   chat underneath. Rendered as the first child of the (position: relative) chat
   region so `top: 0` pins it just below the header. */
.status-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid transparent;
    pointer-events: none;
}

.status-banner--offline {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.12);
    border-bottom-color: rgba(245, 158, 11, 0.35);
}

.status-banner--sync {
    color: var(--text-secondary, #a1a1aa);
    background: rgba(15, 23, 42, 0.6);
    border-bottom-color: rgba(148, 163, 184, 0.25);
}

/* Busy status (Thinking / Planning lesson / Taking notes) — relocated out of
   the header title column so the mode/persona pills keep a stable position on
   narrow phones. */
.status-banner--status {
    color: #c7d2fe;
    background: rgba(49, 46, 129, 0.45);
    border-bottom-color: rgba(129, 140, 248, 0.35);
}

/* Limited storage mode notice — dismissible, so unlike the other banner
   flavors it must accept pointer events. */
.status-banner--limited {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.12);
    border-bottom-color: rgba(59, 130, 246, 0.35);
    pointer-events: auto;
}

.status-banner__dismiss {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 4px 6px;
    opacity: 0.7;
}

.status-banner__dismiss:hover {
    opacity: 1;
}

/* Safe Test Mode — persistent while armed; loud on purpose. */
.status-banner--testmode {
    color: #f0abfc;
    background: rgba(192, 38, 211, 0.14);
    border-bottom-color: rgba(192, 38, 211, 0.4);
}

/* Second banner row when the top slot is taken (offline/sync/limited). */
.status-banner--stacked {
    top: 32px;
}

/* ─── Stamina UI ─────────────────────────────────────────────────── */

.stamina-counter-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Never clip the stamina counter. The collect (+) button is overlaid as a
       corner badge (see .stamina-collect-btn) rather than sitting inline, so the
       wrapper stays counter-width whether or not the daily collect is available
       — no horizontal cost, no layout shift, leaving room for the user avatar. */
    position: relative;
    /* Center the counter in the space between the title/pills and the action
       cluster: this auto margin plus the auto margin on .header-controls-right
       split the controls bar's free space evenly on each side of the counter,
       while the cluster (and the user avatar) stay pinned to the right edge. */
    margin-left: auto;
    /* The counter takes "whatever space is available": it yields before the
       right-side action cluster does, so the user avatar is NEVER pushed off the
       edge. On normal widths there is slack and it shows in full; only on a very
       narrow screen (e.g. the Z-Fold cover) does it give up a little. The inner
       .stamina-counter owns the overflow clip so the corner (+) badge, which
       sits outside this box, is never cut. */
    flex-shrink: 1;
    min-width: 0;
}

.stamina-counter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.3s ease, background 0.3s ease;
    white-space: nowrap;
    justify-content: center;
    line-height: 1.2;
    /* Yields with its wrapper on a very narrow header; clips here (not on the
       wrapper) so the corner (+) badge stays visible. */
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

.stamina-row {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.stamina-value {
    letter-spacing: 0.02em;
}

/* Amber pulse for low balance (< 15, > 0) */
@keyframes stamina-amber-pulse {
    0%, 100% {
        background: rgba(251, 191, 36, 0.08);
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
    }
    50% {
        background: rgba(251, 191, 36, 0.18);
        box-shadow: 0 0 8px 2px rgba(251, 191, 36, 0.25);
    }
}

.stamina-counter.stamina-pulse {
    animation: stamina-amber-pulse 2s ease-in-out infinite;
}

/* Collect button (+) next to the counter */
.stamina-collect-btn {
    /* Overlaid as a corner badge on the stamina counter (top-right, sticking
       up — not rightward, so it never collides with the bookmark). Out of flow,
       so it costs no header width and causes no layout shift when the daily
       collect appears/disappears. */
    position: absolute;
    top: -7px;
    right: 2px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #0c0c0f;
    background: #10b981;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.stamina-collect-btn:hover:not(:disabled):not(.is-disabled) {
    background: #34d399;
    transform: scale(1.12);
}

.stamina-collect-btn:active:not(:disabled):not(.is-disabled) {
    transform: scale(0.9);
}

.stamina-collect-btn.is-collecting {
    opacity: 0.5;
    pointer-events: none;
    animation: stamina-collect-spin 0.8s linear infinite;
}

.stamina-collect-btn.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: auto;
    border-color: rgba(161, 161, 170, 0.2);
    background: rgba(161, 161, 170, 0.05);
    color: #71717a;
}

@keyframes stamina-collect-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Bounce on successful collect */
@keyframes stamina-collect-bounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    50% { transform: scale(0.95); }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ─── Exhaustion Gate Overlay Card ─────────────────────────────── */

.stamina-gate-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, rgba(24, 24, 27, 0.98), rgba(39, 39, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    padding: 2rem 1.5rem;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7),
                0 0 30px rgba(239, 68, 68, 0.1);
    animation: gate-slide-in 0.3s ease-out;
}

@keyframes gate-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.stamina-gate-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: gate-icon-pulse 3s ease-in-out infinite;
}

@keyframes gate-icon-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
    50% {
        box-shadow: 0 0 12px 4px rgba(239, 68, 68, 0.15);
    }
}

.stamina-gate-collect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 260px;
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #34d399, #06b6d4);
    color: #09090b;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(52, 211, 153, 0.3);
}

.stamina-gate-collect-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(52, 211, 153, 0.4);
}

.stamina-gate-collect-btn:active:not(:disabled) {
    transform: translateY(0);
}

.stamina-gate-collect-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.stamina-gate-stub-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: #a1a1aa;
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.stamina-gate-stub-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #d4d4d8;
}

.stamina-gate-stub-btn.pro {
    border-color: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.stamina-gate-stub-btn.pro:hover {
    background: rgba(251, 191, 36, 0.08);
}

/* ─── Store variant + purchase section (Paddle Session 4) ───────── */

/* Cyan shop framing replaces the red alarm framing when the gate is
   opened proactively from the user menu's "Stamina Store" entry. */
.stamina-gate-icon.store {
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.2);
    animation: gate-icon-pulse-store 3s ease-in-out infinite;
}

@keyframes gate-icon-pulse-store {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
    }
    50% {
        box-shadow: 0 0 12px 4px rgba(34, 211, 238, 0.15);
    }
}

.stamina-section-label {
    color: #71717a;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.stamina-pack-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    /* Headroom for the badges that overhang the card tops. */
    padding-top: 8px;
}

.stamina-pack-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.2s ease;
}

.stamina-pack-card:hover:not(:disabled) {
    border-color: rgba(34, 211, 238, 0.4);
    background: rgba(34, 211, 238, 0.06);
    transform: translateY(-1px);
}

.stamina-pack-card:active:not(:disabled) {
    transform: translateY(0);
}

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

.stamina-pack-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 7px;
    border-radius: 999px;
    background: #0e7490;
    color: #e0f2fe;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
}

.stamina-pack-badge.best {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #1c1917;
}

.stamina-pack-amount {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #f4f4f5;
    font-weight: 700;
    font-size: 0.9rem;
}

.stamina-pack-amount svg {
    color: #fbbf24;
}

.stamina-pack-price {
    color: #a1a1aa;
    font-size: 0.72rem;
    font-weight: 500;
}

.stamina-pro-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(251, 191, 36, 0.25);
    background: linear-gradient(160deg, rgba(251, 191, 36, 0.07), rgba(251, 191, 36, 0.02));
}

.stamina-pro-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fbbf24;
    font-weight: 700;
    font-size: 0.85rem;
}

.stamina-pro-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stamina-pro-benefits li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #d4d4d8;
    font-size: 0.75rem;
}

.stamina-pro-check {
    color: #34d399;
    flex-shrink: 0;
}

.stamina-pro-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #1c1917;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.25);
}

.stamina-pro-cta:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.35);
}

.stamina-pro-cta:active:not(:disabled) {
    transform: translateY(0);
}

.stamina-pro-cta:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.stamina-pro-footnote {
    margin: 0;
    color: #71717a;
    font-size: 0.65rem;
    text-align: center;
}

/* Mobile adjustments for stamina counter */
@media (max-width: 480px) {
    .stamina-counter {
        font-size: 0.72rem;
        padding: 2px 5px;
    }

    .stamina-collect-btn {
        width: 16px;
        height: 16px;
    }

    /* Narrow header (phones, and especially the Z-Fold cover screen ~344px):
       stack the mode + persona pills vertically instead of side by side. This
       reclaims ~50px of header width so the stamina counter and the right-side
       action cluster (incl. the user avatar) all fit. Safe now that the turn
       counter renders below the header — vertical pills no longer overlap it. */
    .header-tags-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }
}

/* ─── Header Controls Layout ────────────────────────────────────
   .header-controls--spaced  — adds flex:1 so the controls bar
   stretches and lets the right-side cluster auto-push to the edge.
   .header-controls-right    — groups the lesson plan button, nav
   arrows, mute button and profile picture so they stay anchored to
   the right regardless of sync/offline indicator visibility.      */

.header-controls--spaced {
    flex: 1 1 auto;
    min-width: 0;
}

/* Higher-specificity guarantee that the controls bar actually grows to fill the
   header. When the grow is defeated (the bar stays content-width), `.header`'s
   space-between shoves the stamina counter + action cluster to the far right
   with a wide empty gap before the stamina counter, and the user avatar at the
   end of the cluster overflows off the right edge. Growing the bar anchors the
   stamina counter next to the pills and pins the action cluster — with the user
   avatar — to the in-bounds right edge. */
.header .header-controls--spaced {
    flex: 1 1 auto;
    min-width: 0;
}

.header-controls-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ─── Accessibility: right-side action controls ──────────────────────
   Bookmark, nav arrows, mute and the profile button. Goals: (1) icons that
   grow with the user's text-size preference; (2) genuinely larger, better-
   spaced controls where there is room. */

/* Icons scale with the OS/browser font-size setting (rem), capped so the
   cover screen can't be blown out. Scoped to direct-child <svg> so the mute
   button's separate hold-progress ring is never resized. */
.header-controls-right .logo-button > svg {
    width: clamp(22px, 1.5rem, 28px);
    height: clamp(22px, 1.5rem, 28px);
}

/* NOTE: an invisible ::before hit-area expansion was tried here but removed —
   the cluster buttons sit only 4px apart, so the expanded zones overlapped and
   the later element (the avatar) stole the mute button's edge taps, and the
   overlay interfered with the mute's touch hold-gesture. Touch-target size is
   instead handled by enlarging the buttons where there's room (below). */

/* Where there is room (most phones and the unfolded inner screen) make the
   controls visibly larger and better spaced. */
@media (min-width: 500px) {
    .header-controls-right {
        gap: 8px;
    }
    .header-controls-right .logo-button {
        min-width: 40px;
        min-height: 40px;
    }
    .header-nav-arrows {
        gap: 6px !important;
    }
    /* More headroom here, so allow icons to grow further with the font. */
    .header-controls-right .logo-button > svg {
        width: clamp(24px, 1.7rem, 40px);
        height: clamp(24px, 1.7rem, 40px);
    }
}