/* ============================================
   EB IT Support app — brand styles (v2.2)
   Colours from the EB IT Support logo: black, logo blue #2f92d0, white.
   Light and dark themes. The theme follows the phone's setting, unless the
   customer picks Light or Dark in the footer (html[data-theme]).
   Loaded after app_portal.css; everything below uses the --eb-* tokens, so the
   old app's own dark-mode colours never show through.
   ============================================ */

:root {
    color-scheme: light;
    --eb-blue: #2f92d0;          /* logo blue — icons, accents, borders */
    --eb-btn: #1b6ea6;           /* buttons (white text stays readable) */
    --eb-btn-hover: #14557f;
    --eb-link: #1b6ea6;
    --eb-bg: #f4f6f9;
    --eb-card: #ffffff;
    --eb-raised: #f4f6f9;        /* small buttons, chips */
    --eb-text: #1d2530;
    --eb-heading: #111111;
    --eb-muted: #5b6673;
    --eb-line: #dde3ea;
    --eb-line-soft: #eef1f5;
    --eb-tint: #eaf4fb;
    --eb-tint-line: #cfe4f3;
    --eb-input: #ffffff;
    --eb-solid-bg: #111111;      /* the black "Open" button */
    --eb-solid-fg: #ffffff;
    --eb-ok-bg: #e7f6ec; --eb-ok-fg: #067647; --eb-ok-line: #b7e2c4;
    --eb-err-bg: #fdecea; --eb-err-fg: #b42318; --eb-err-line: #f4c3bd;
    --eb-shadow: rgba(17, 17, 17, 0.12);

    /* Re-point the app's original tokens */
    --primary-color: var(--eb-btn);
    --primary-dark: var(--eb-btn-hover);
    --text-primary: var(--eb-text);
    --text-secondary: var(--eb-muted);
    --bg-primary: var(--eb-card);
    --bg-secondary: var(--eb-bg);
    --border-color: var(--eb-line);
}

/* Dark theme tokens: phone in dark mode (unless Light was picked), or Dark picked */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --eb-btn: #1f7fbd;
        --eb-btn-hover: #2f92d0;
        --eb-link: #6cbcec;
        --eb-bg: #0d1117;
        --eb-card: #161c24;
        --eb-raised: #1f2731;
        --eb-text: #dfe6ee;
        --eb-heading: #f5f7fa;
        --eb-muted: #9aa7b5;
        --eb-line: #2a3441;
        --eb-line-soft: #222b36;
        --eb-tint: #11283a;
        --eb-tint-line: #1f4560;
        --eb-input: #0d1117;
        --eb-solid-bg: #f5f7fa;
        --eb-solid-fg: #111111;
        --eb-ok-bg: #0d2b1c; --eb-ok-fg: #6fd59a; --eb-ok-line: #1d5236;
        --eb-err-bg: #3a1411; --eb-err-fg: #ff9b8f; --eb-err-line: #6b241d;
        --eb-shadow: rgba(0, 0, 0, 0.5);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --eb-btn: #1f7fbd;
    --eb-btn-hover: #2f92d0;
    --eb-link: #6cbcec;
    --eb-bg: #0d1117;
    --eb-card: #161c24;
    --eb-raised: #1f2731;
    --eb-text: #dfe6ee;
    --eb-heading: #f5f7fa;
    --eb-muted: #9aa7b5;
    --eb-line: #2a3441;
    --eb-line-soft: #222b36;
    --eb-tint: #11283a;
    --eb-tint-line: #1f4560;
    --eb-input: #0d1117;
    --eb-solid-bg: #f5f7fa;
    --eb-solid-fg: #111111;
    --eb-ok-bg: #0d2b1c; --eb-ok-fg: #6fd59a; --eb-ok-line: #1d5236;
    --eb-err-bg: #3a1411; --eb-err-fg: #ff9b8f; --eb-err-line: #6b241d;
    --eb-shadow: rgba(0, 0, 0, 0.5);
}

/* Logos: black-text version on light, white-text version on dark */
.eb-logo-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .eb-logo-light { display: none !important; }
    :root:not([data-theme="light"]) .eb-logo-dark { display: block !important; }
}
:root[data-theme="dark"] .eb-logo-light { display: none !important; }
:root[data-theme="dark"] .eb-logo-dark { display: block !important; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--eb-bg) !important;
    color: var(--eb-text) !important;
}
.app-container { background: var(--eb-bg) !important; }
h1, h2, h3 { letter-spacing: -0.01em; }
a { color: var(--eb-link); }

/* Solid strip behind the iPhone status bar / Dynamic Island. Only has height when
   the app draws under the status bar (apps added to the Home Screen before v2.1,
   which iOS keeps on the "black-translucent" style with white clock/battery),
   so it stays dark in both themes to keep that white text readable. */
body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px);
    background: #0d1117; z-index: 1500; pointer-events: none;
}

/* ── Header: the full logo, clear of the status bar ── */
.app-header {
    background: var(--eb-card) !important;
    color: var(--eb-heading);
    border-bottom: 3px solid var(--eb-blue);
    box-shadow: none !important;
    padding: calc(0.9rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 0.8rem calc(1rem + env(safe-area-inset-left, 0px)) !important;
}
.app-header h1, .portal-header-text h1 { color: var(--eb-heading) !important; font-weight: 800; font-size: 1.1rem; }
.portal-subtitle { color: var(--eb-muted) !important; }
.eb-logo { height: 46px; width: auto; max-width: 68vw; margin: 0 auto; display: block; }
.eb-logo-mark { width: 36px; height: auto; flex: 0 0 auto; }
.app-logo, .app-logo-small { display: none; }
.refresh-btn, .logout-btn, .back-btn {
    background: var(--eb-raised) !important;
    color: var(--eb-heading) !important;
    border: 1px solid var(--eb-line) !important;
}
.refresh-btn svg, .logout-btn i, .back-btn i { color: var(--eb-heading) !important; }
.refresh-btn { top: auto !important; bottom: 0.8rem; transform: none; }
.refresh-btn:active { transform: scale(0.95); }

.status-widget { background: var(--eb-card) !important; border-bottom: 1px solid var(--eb-line); }

/* ── Buttons ── */
.primary-btn, .btn-primary { background: var(--eb-btn) !important; color: #fff !important; border-radius: 8px !important; font-weight: 700; }
.primary-btn:hover, .btn-primary:hover { background: var(--eb-btn-hover) !important; }
.eb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    border: 0; border-radius: 8px; padding: 0.7rem 1rem; cursor: pointer;
    font: 700 0.9rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    text-decoration: none; min-height: 44px; white-space: nowrap;
}
.eb-btn-blue { background: var(--eb-btn); color: #fff; }
.eb-btn-blue:hover { background: var(--eb-btn-hover); }
.eb-btn-dark, .eb-btn-gold { background: var(--eb-solid-bg); color: var(--eb-solid-fg); }
.eb-btn-ghost { background: transparent; color: var(--eb-link); border: 2px solid var(--eb-link); }
.eb-btn-light { background: var(--eb-card); color: var(--eb-text); border: 1px solid var(--eb-line); }
.eb-btn:disabled { opacity: 0.6; cursor: wait; }
.eb-btn-block { width: 100%; }

/* ── The original app's sections, cards and inputs ── */
section, .modal-content, .portal-nav, .portal-content, #invoicesView { background: var(--eb-card) !important; color: var(--eb-text); }
.action-card, .link-item, .item-card, .login-card, .eb-card {
    background: var(--eb-card) !important;
    border-radius: 10px !important;
    border: 1px solid var(--eb-line) !important;
    box-shadow: none !important;
    color: var(--eb-text);
}
.action-card svg, .link-item svg, .link-item i { color: var(--eb-blue) !important; }
.action-title, .link-item span { color: var(--eb-heading) !important; }
.action-subtitle { color: var(--eb-muted) !important; font-size: 0.68rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.action-text { min-width: 0; max-width: 100%; }
.search-section h2, .ticket-section h2, .links-section h3, .eb-section-title, .content-header h2, .login-card h2 { color: var(--eb-heading) !important; font-weight: 800; }
.ticket-description, .login-subtitle, .login-help p { color: var(--eb-muted) !important; }
.suggestion-btn, .filter-tab, .filter-btn { background: var(--eb-card) !important; color: var(--eb-text) !important; border: 1px solid var(--eb-line) !important; border-radius: 999px; }
.suggestion-btn:hover { background: var(--eb-tint) !important; border-color: var(--eb-tint-line) !important; }
.filter-tab.active, .filter-btn.active { background: var(--eb-solid-bg) !important; color: var(--eb-solid-fg) !important; border-color: var(--eb-solid-bg) !important; }
.form-control, .search-box input, #searchInput {
    background: var(--eb-input) !important; color: var(--eb-text) !important; border-color: var(--eb-line) !important;
}
.form-control::placeholder, #searchInput::placeholder, .eb-compose textarea::placeholder, .eb-input::placeholder { color: var(--eb-muted); opacity: 1; }
.form-group label { color: var(--eb-heading) !important; }
.alert-danger { background: var(--eb-err-bg) !important; color: var(--eb-err-fg) !important; border-color: var(--eb-err-line) !important; }
.alert-success { background: var(--eb-ok-bg) !important; color: var(--eb-ok-fg) !important; border-color: var(--eb-ok-line) !important; }
.item-card h3, .item-title h3 { color: var(--eb-heading) !important; }
.item-meta, .item-preview, .empty-state, .error-state, .loading-spinner p { color: var(--eb-muted) !important; }
.detail-modal-content { background: var(--eb-card) !important; color: var(--eb-text); }
.detail-modal-header { background: var(--eb-btn) !important; }
.install-prompt { background: var(--eb-btn) !important; }
.app-footer { color: var(--eb-muted) !important; background: transparent !important; }

.eb-section { padding: 1rem; max-width: 640px; margin: 0 auto; }
.eb-card { padding: 1.1rem; margin-bottom: 0.9rem; }
.eb-card h2, .eb-card h3 { margin: 0 0 0.35rem; color: var(--eb-heading); }
.eb-card p { margin: 0 0 0.75rem; color: var(--eb-muted); font-size: 0.92rem; line-height: 1.5; }
.eb-kicker { display: block; margin-bottom: 0.25rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eb-link); }
.eb-muted { color: var(--eb-muted); font-size: 0.85rem; }
.eb-small { font-size: 0.8rem; color: var(--eb-muted); }

/* ── Track your request (ticket PIN) ── */
.eb-pin-card { border-top: 4px solid var(--eb-blue) !important; }
.eb-pin-row { display: flex; gap: 0.5rem; }
.eb-pin-input {
    flex: 1; min-width: 0; padding: 0.65rem 0.8rem; border-radius: 8px; border: 2px solid var(--eb-line);
    font: 800 1.35rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.35em; text-align: center;
    background: var(--eb-input); color: var(--eb-heading);
}
.eb-pin-input::placeholder { color: var(--eb-muted); }
.eb-pin-input:focus { outline: none; border-color: var(--eb-blue); box-shadow: 0 0 0 3px var(--eb-tint); }
.eb-pin-error { margin: 0.6rem 0 0; font-size: 0.85rem; font-weight: 700; color: var(--eb-err-fg); }

/* ── Ticket screen ── */
.eb-ticket-top { background: var(--eb-card); border-bottom: 1px solid var(--eb-line); padding: 1rem; }
.eb-ticket-top h2 { font-size: 1.2rem; margin: 0.35rem 0 0.4rem; color: var(--eb-heading); }
.eb-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.eb-tabs { display: flex; gap: 0.25rem; overflow-x: auto; padding: 0.5rem 1rem; background: var(--eb-card); border-bottom: 1px solid var(--eb-line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; scrollbar-width: none; }
.eb-tabs::-webkit-scrollbar { display: none; }
.eb-tab { flex: 0 0 auto; border: 0; background: transparent; padding: 0.55rem 0.85rem; border-radius: 999px; font: 700 0.85rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--eb-muted); cursor: pointer; white-space: nowrap; }
.eb-tab.active { background: var(--eb-solid-bg); color: var(--eb-solid-fg); }
.eb-tab .eb-dot { display: inline-block; min-width: 1.1rem; padding: 0 0.3rem; margin-left: 0.3rem; border-radius: 999px; background: var(--eb-blue); color: #fff; font-size: 0.72rem; }
.eb-pane { padding: 1rem; max-width: 640px; margin: 0 auto; }

.eb-steps { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.eb-steps li { display: flex; gap: 0.6rem; align-items: center; font-size: 0.92rem; color: var(--eb-muted); }
.eb-steps .eb-step-mark { flex: 0 0 1.45rem; height: 1.45rem; border-radius: 50%; border: 2px solid var(--eb-line); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; background: var(--eb-card); }
.eb-steps li.done { color: var(--eb-text); }
.eb-steps li.done .eb-step-mark { background: var(--eb-blue); border-color: var(--eb-blue); color: #fff; }
.eb-steps li.current { color: var(--eb-heading); font-weight: 800; }
.eb-steps li.current .eb-step-mark { border-color: var(--eb-blue); color: var(--eb-link); }

.eb-live-banner { background: var(--eb-tint); border: 1px solid var(--eb-tint-line); border-left: 4px solid var(--eb-blue); border-radius: 10px; padding: 0.8rem 1rem; margin-bottom: 0.9rem; color: var(--eb-heading); font-weight: 700; display: flex; gap: 0.6rem; align-items: center; }
.eb-live-banner i { font-size: 1.3rem; color: var(--eb-link); }

.eb-msgs { display: grid; gap: 0.6rem; }
.eb-msg { max-width: 88%; padding: 0.7rem 0.85rem; border-radius: 12px; font-size: 0.93rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; color: var(--eb-text); }
.eb-msg.staff { background: var(--eb-card); border: 1px solid var(--eb-line); justify-self: start; border-bottom-left-radius: 4px; }
.eb-msg.you { background: var(--eb-tint); border: 1px solid var(--eb-tint-line); justify-self: end; border-bottom-right-radius: 4px; }
.eb-msg-meta { display: block; margin-bottom: 0.2rem; font-size: 0.74rem; font-weight: 700; color: var(--eb-muted); }
.eb-compose { display: grid; gap: 0.5rem; margin-top: 0.9rem; }
.eb-compose textarea, .eb-input, .eb-select {
    width: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--eb-line); border-radius: 8px; font: 400 0.95rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background: var(--eb-input); color: var(--eb-text);
}
.eb-compose textarea:focus, .eb-input:focus, .eb-select:focus { outline: none; border-color: var(--eb-blue); box-shadow: 0 0 0 3px var(--eb-tint); }

.eb-row { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--eb-line-soft); font-size: 0.92rem; color: var(--eb-muted); }
.eb-row:last-child { border-bottom: 0; }
.eb-row strong { color: var(--eb-heading); text-align: right; }
.eb-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.eb-alert { padding: 0.75rem 0.9rem; border-radius: 10px; font-size: 0.9rem; margin-bottom: 0.75rem; }
.eb-alert-ok { background: var(--eb-ok-bg); color: var(--eb-ok-fg); border: 1px solid var(--eb-ok-line); }
.eb-alert-err { background: var(--eb-err-bg); color: var(--eb-err-fg); border: 1px solid var(--eb-err-line); }
.eb-alert-info { background: var(--eb-tint); color: var(--eb-text); border: 1px solid var(--eb-tint-line); }
.eb-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.4rem; }
.eb-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in; border: 1px solid var(--eb-line); }
.eb-sig { width: 100%; height: 160px; border: 2px dashed var(--eb-line); border-radius: 8px; background: #ffffff; touch-action: none; }  /* signatures stay on white */
.eb-empty { text-align: center; padding: 1.5rem 0.5rem; color: var(--eb-muted); font-size: 0.9rem; }

/* ── News ── */
.eb-news-list { display: grid; gap: 0.6rem; }
.eb-news-item { display: grid; grid-template-columns: 72px 1fr; gap: 0.75rem; align-items: start; background: var(--eb-card); border: 1px solid var(--eb-line); border-radius: 10px; padding: 0.6rem; text-decoration: none; color: inherit; }
.eb-news-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: var(--eb-tint); }
.eb-news-item img.eb-news-fallback { object-fit: contain; padding: 10px; background: #ffffff; }
.eb-news-item strong { display: block; color: var(--eb-heading); font-size: 0.93rem; line-height: 1.3; }
.eb-news-item span { display: block; margin-top: 0.25rem; font-size: 0.78rem; color: var(--eb-muted); }
.eb-alerts-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.8rem; padding: 0.7rem 0.8rem; background: var(--eb-tint); border: 1px solid var(--eb-tint-line); border-radius: 10px; font-size: 0.88rem; color: var(--eb-text); }

/* ── EB IT Radio ── */
/* Radio strip near the top of the home and account screens */
.eb-radio-strip { max-width: 640px; margin: 0 auto; padding: 0.9rem 1rem 0.1rem; background: transparent !important; box-shadow: none !important; border: 0 !important; }
.eb-radio-strip-inner {
    display: flex; align-items: center; gap: 0.75rem;
    background: linear-gradient(135deg, #1b6ea6 0%, #2f92d0 100%); color: #fff;
    border-radius: 12px; padding: 0.75rem 0.75rem 0.75rem 0.9rem;
    box-shadow: 0 6px 18px rgba(27, 110, 166, 0.25);
}
.eb-radio-onair {
    display: inline-flex; align-items: center; gap: 0.35rem; flex: 0 0 auto;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    background: rgba(0, 0, 0, 0.22); padding: 0.3rem 0.55rem; border-radius: 999px;
}
.eb-radio-onair .eb-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4b3e; box-shadow: 0 0 0 3px rgba(255, 75, 62, 0.3); animation: eb-pulse 1.6s ease-in-out infinite; }
@keyframes eb-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 75, 62, 0); } }
@media (prefers-reduced-motion: reduce) { .eb-radio-onair .eb-live-dot { animation: none; } }
.eb-radio-strip-text { flex: 1; min-width: 0; line-height: 1.25; }
.eb-radio-strip-text strong { display: block; font-size: 1.02rem; }
.eb-radio-strip-text span { display: block; font-size: 0.8rem; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-radio-strip.is-live .eb-radio-onair { background: #e5372b; color: #fff; }
.eb-radio-strip.is-live .eb-radio-onair .eb-live-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.eb-radio-play { background: #fff; color: #14557f; flex: 0 0 auto; padding: 0.6rem 1rem; border-radius: 999px; }
.eb-radio-play i { font-size: 1.15rem; line-height: 1; }
.eb-radio-play:active { transform: scale(0.97); }
.eb-radio-quiz { margin: 0.6rem 0 0.4rem; padding: 0.85rem 0.95rem; border-radius: 14px; background: var(--eb-card); border: 2px solid var(--eb-blue); color: var(--eb-heading); }
.eb-radio-quiz-q { font-weight: 800; font-size: 1.02rem; margin: 0.35rem 0 0.15rem; }
.eb-radio-quiz-meta { font-size: 0.8rem; opacity: 0.8; margin: 0 0 0.5rem; }
.eb-radio-quiz form { display: grid; gap: 0.45rem; }
.eb-radio-quiz input { width: 100%; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid var(--eb-border, #d0d9e3); font: inherit; background: var(--eb-bg, #fff); color: inherit; }
.eb-radio-quiz small { font-size: 0.72rem; opacity: 0.75; }
.eb-radio-quiz-done { margin: 0.3rem 0 0; font-weight: 700; color: #1e7e34; }
.eb-radio-quiz [hidden], .eb-radio-quiz[hidden] { display: none !important; }
.eb-radio-quiz .eb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.eb-radio-links-row { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; align-items: center; }
.eb-radio-clip-btn { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.eb-clip-modal .detail-modal-content { max-width: 560px; background: var(--eb-card); color: var(--eb-text); }
.eb-clip-modal .detail-modal-header { background: var(--eb-btn); }
.eb-clip-modal .detail-modal-header h2 { font-size: 1.1rem; }
.eb-clip-intro { margin: 0 0 0.9rem; color: var(--eb-muted); font-size: 0.92rem; }
.eb-clip-record { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.eb-clip-rec { background: var(--eb-btn); color: #fff; }
.eb-clip-rec.is-recording { background: #e5372b; border-color: #e5372b; color: #fff; }
.eb-clip-upload { cursor: pointer; background: var(--eb-raised); color: var(--eb-heading); border: 1px solid var(--eb-line); }
.eb-clip-timer { font-weight: 700; color: #e5372b; display: inline-flex; gap: 0.4rem; align-items: center; }
.eb-clip-timer[hidden], .eb-clip-modal [hidden] { display: none !important; }
#voiceClipPreview { width: 100%; margin: 0.3rem 0; }
.eb-clip-file { font-size: 0.8rem; color: var(--eb-muted); margin: 0 0 0.6rem; min-height: 1em; }
.eb-clip-field { display: grid; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.6rem; color: var(--eb-heading); }
.eb-clip-field input { padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid var(--eb-line); background: var(--eb-input); color: var(--eb-text); font: inherit; font-weight: 400; }
.eb-clip-terms { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.78rem; color: var(--eb-muted); margin: 0.4rem 0 0.8rem; }
.eb-clip-terms input { margin-top: 0.2rem; flex: 0 0 auto; }
.eb-clip-status { padding: 0.6rem 0.75rem; border-radius: 10px; font-size: 0.88rem; margin-bottom: 0.7rem; }
.eb-clip-status.is-ok { background: var(--eb-ok-bg); color: var(--eb-ok-fg); border: 1px solid var(--eb-ok-line); }
.eb-clip-status.is-err { background: var(--eb-err-bg); color: var(--eb-err-fg); border: 1px solid var(--eb-err-line); }
.eb-clip-send { width: 100%; justify-content: center; }
.eb-clip-send:disabled { opacity: 0.55; cursor: not-allowed; }
.eb-clip-small { font-size: 0.72rem; color: var(--eb-muted); margin: 0.6rem 0 0; }
.eb-clip-modal .eb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.eb-radio-request { display: inline-block; margin: 0.4rem 0 0 0.2rem; font-size: 0.8rem; font-weight: 700; color: var(--eb-link); text-decoration: none; }
@media (max-width: 360px) { .eb-radio-onair { display: none; } }
.eb-radio-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--eb-card); color: var(--eb-heading);
    border-top: 3px solid var(--eb-blue); box-shadow: 0 -8px 24px var(--eb-shadow);
    padding-bottom: env(safe-area-inset-bottom);
}
.eb-radio-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; max-width: 640px; margin: 0 auto; }
.eb-radio-toggle {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--eb-btn); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.eb-radio-toggle:active { transform: scale(0.95); }
.eb-radio-now { flex: 1; min-width: 0; line-height: 1.25; }
.eb-radio-now strong { display: flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; }
.eb-radio-now span[role="status"] { display: block; font-size: 0.78rem; color: var(--eb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-radio-dock.is-problem .eb-radio-now span[role="status"] { color: var(--eb-err-fg); }
.eb-radio-bar .eb-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #e5372b; box-shadow: 0 0 0 4px rgba(229, 55, 43, 0.18); flex: 0 0 auto; }
.eb-radio-dock:not(.is-playing) .eb-live-dot { background: var(--eb-muted); box-shadow: none; }
.eb-radio-help, .eb-radio-x, .eb-radio-links button {
    background: var(--eb-raised); color: var(--eb-heading); border: 1px solid var(--eb-line); border-radius: 8px;
    padding: 0.45rem 0.65rem; font: 700 0.8rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; cursor: pointer; flex: 0 0 auto;
}
.eb-radio-dock.is-problem .eb-radio-help { background: var(--eb-btn); color: #fff; border-color: var(--eb-btn); }
.eb-radio-dock[data-mode="backup"] .eb-radio-toggle, .eb-radio-dock[data-mode="backup"] .eb-radio-help { display: none; }
.eb-radio-frame { width: 100%; height: 190px; border: 0; display: block; background: var(--eb-card); }
.eb-radio-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 0.4rem 0.9rem 0.6rem; font-size: 0.82rem; }
.eb-radio-links a { color: var(--eb-link); font-weight: 700; text-decoration: none; }
body.eb-radio-open { padding-bottom: 64px; }
body.eb-radio-open .toast { bottom: 5rem !important; }

/* ── Theme switch (footer) ── */
.eb-theme-switch { display: inline-flex; gap: 0.25rem; margin: 0.75rem auto 0; padding: 0.25rem; border: 1px solid var(--eb-line); border-radius: 999px; background: var(--eb-card); }
.eb-theme-switch button { border: 0; background: transparent; color: var(--eb-muted); padding: 0.4rem 0.8rem; border-radius: 999px; font: 700 0.8rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; cursor: pointer; }
.eb-theme-switch button[aria-pressed="true"] { background: var(--eb-solid-bg); color: var(--eb-solid-fg); }

/* v2.6.1: song requests + up next */
.eb-radio-next { margin: 0.35rem 0 0; font-size: 0.82rem; opacity: 0.85; }
.eb-radio-next[hidden] { display: none !important; }
.eb-radio-req { border-color: var(--eb-heading, #1a3a5c); }
.eb-req-results { max-height: 230px; overflow: auto; border-radius: 10px; }
.eb-req-results button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--eb-border, #d0d9e3); background: var(--eb-bg, #fff); color: inherit; padding: 0.5rem 0.65rem; font: inherit; font-size: 0.9rem; cursor: pointer; }
.eb-req-results button[disabled] { opacity: 0.55; cursor: not-allowed; }
.eb-req-results small { display: block; font-size: 0.75rem; opacity: 0.8; }
.eb-req-none { margin: 0.3rem 0; font-size: 0.85rem; opacity: 0.8; }
.eb-req-picked { margin: 0; padding: 0.45rem 0.65rem; border-radius: 10px; background: rgba(43, 108, 176, 0.12); font-weight: 700; }
.eb-req-picked[hidden], .eb-radio-req form[hidden] { display: none !important; }

.eb-req-manual-toggle { background: none; border: 0; padding: 0; color: var(--eb-blue, #2b6cb0); text-decoration: underline; font: inherit; font-size: 0.85rem; cursor: pointer; justify-self: start; }
.eb-req-manual { display: grid; gap: 0.45rem; }
.eb-req-manual[hidden] { display: none !important; }

/* v2.6.2: keep-it-clean notes (radio strip + voice clip form) */
.eb-radio-clean { flex-basis: 100%; margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--eb-muted); }
.eb-clip-clean { margin: 0 0 0.9rem; padding: 0.55rem 0.7rem; border-radius: 8px; background: #fff4dc; color: #7a5200; font-size: 0.88rem; }

/* v2.7.2: the EB IT Radio app (radio.eb-it.uk/listen/) */
.eb-radio-app { display: flex; align-items: center; gap: 0.75rem; margin: 0.6rem 0 0; padding: 0.65rem 0.85rem; border-radius: 12px;
  background: rgba(79, 163, 255, 0.10); border: 1px solid rgba(79, 163, 255, 0.35); color: inherit; text-decoration: none; font-size: 0.88rem; line-height: 1.35; }
.eb-radio-app:hover, .eb-radio-app:focus-visible { background: rgba(79, 163, 255, 0.18); }
.eb-radio-app > .bi:first-child { font-size: 1.5rem; color: #4fa3ff; }
.eb-radio-app span { flex: 1; }
.eb-radio-app strong { display: block; }
.eb-radio-app > .bi:last-child { color: var(--eb-muted); }

/* v2.7.4: song requests / voice clips paused by the studio */
.eb-radio-request.is-paused { opacity: .6; }
.eb-radio-request.is-paused::after { content: " · paused"; font-weight: 600; }
#voiceClipForm.is-paused .eb-clip-record, #voiceClipForm.is-paused .eb-clip-field, #voiceClipForm.is-paused .eb-clip-terms { opacity: .45; pointer-events: none; }
.eb-clip-paused { margin: 0 0 0.9rem; padding: 0.55rem 0.7rem; border-radius: 8px; background: #e7f1fb; color: #1b3a5c; font-size: 0.92rem; font-weight: 600; }
html[data-theme="dark"] .eb-clip-paused { background: #1d3550; color: #e7f1fb; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .eb-clip-paused { background: #1d3550; color: #e7f1fb; } }

/* v2.7.5: Story time radio */
.eb-story-time { margin: .7rem 0 .2rem; padding: .7rem .9rem; border-radius: 12px; background: var(--eb-surface-2, rgba(59,143,208,.08)); }
.eb-story-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.eb-story-play { padding: .35rem .9rem; font-size: .85rem; }
.eb-story-now { margin: .45rem 0 .2rem; font-size: .88rem; }
.eb-story-links { margin: 0; font-size: .8rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.eb-story-sfx { margin: .2rem 0 .35rem; padding: .3rem .55rem; border-radius: 8px; font-size: .82rem; background: #fff4dc; color: #7a4f00; border: 1px solid #e0b45a; }
.eb-story-links a { color: var(--eb-link); font-weight: 700; text-decoration: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eb-story-sfx { background: #2f250e; color: #f0c060; border-color: #8a6a2a; } }
:root[data-theme="dark"] .eb-story-sfx { background: #2f250e; color: #f0c060; border-color: #8a6a2a; }
/* v2.7.7: message for listeners */
.eb-radio-notice { margin: .5rem 0; padding: .45rem .7rem; border-radius: 10px; font-size: .88rem; font-weight: 600; background: #e8f2fb; color: #12324f; border: 1px solid #b9d6ef; }
.eb-radio-notice.lvl-warning { background: #fff4dc; color: #7a4f00; border-color: #e0b45a; }
.eb-radio-notice.lvl-problem { background: #fde8ea; color: #8a1622; border-color: #e6a1a8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eb-radio-notice { background: #16304b; color: #dbe9f7; border-color: #2a4d72; } :root:not([data-theme="light"]) .eb-radio-notice.lvl-warning { background: #2f250e; color: #f0c060; border-color: #8a6a2a; } :root:not([data-theme="light"]) .eb-radio-notice.lvl-problem { background: #3a1419; color: #ffc9ce; border-color: #8a2a33; } }
:root[data-theme="dark"] .eb-radio-notice { background: #16304b; color: #dbe9f7; border-color: #2a4d72; }
:root[data-theme="dark"] .eb-radio-notice.lvl-warning { background: #2f250e; color: #f0c060; border-color: #8a6a2a; }
:root[data-theme="dark"] .eb-radio-notice.lvl-problem { background: #3a1419; color: #ffc9ce; border-color: #8a2a33; }

/* 2.7.10: a themed show on now (the station's Show themes) */
.eb-radio-strip.is-themed .eb-radio-strip-inner { background: linear-gradient(135deg, var(--eb-show-bg2) 0%, var(--eb-show-bg) 100%); color: var(--eb-show-fg); border: 1px solid var(--eb-show-accent); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.eb-radio-strip.is-themed .eb-radio-onair { background: var(--eb-show-accent); color: var(--eb-show-on); }
.eb-radio-strip.is-themed .eb-radio-play { background: var(--eb-show-accent); color: var(--eb-show-on); }
.eb-show-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0.45rem 0 0.2rem; }
.eb-show-tag { font-size: 0.8rem; font-weight: 700; opacity: 0.85; }
.eb-show-reacts { display: flex; gap: 0.35rem; }
.eb-show-react { width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem; line-height: 1; border: 1px solid var(--eb-show-accent); background: transparent; cursor: pointer; transition: transform 0.15s; }
.eb-show-react.is-sent { transform: scale(1.25); }
.eb-show-join { font-size: 0.85rem; font-weight: 700; color: var(--eb-show-accent); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .eb-show-react { transition: none; } }

/* ── Tabs (v2.8.0): Home · Radio · Tickets · Account ── */
:root { --eb-tabbar-h: 62px; }
body { padding-bottom: calc(var(--eb-tabbar-h) + env(safe-area-inset-bottom)); }
.eb-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: flex; justify-content: center;
    background: var(--eb-card); border-top: 1px solid var(--eb-line); box-shadow: 0 -6px 18px var(--eb-shadow);
    padding-bottom: env(safe-area-inset-bottom);
}
.eb-tabbar button {
    flex: 1 1 0; max-width: 160px; height: var(--eb-tabbar-h); border: 0; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--eb-muted); font: 700 0.72rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.eb-tabbar button i { font-size: 1.35rem; line-height: 1; }
.eb-tabbar button[aria-current="page"] { color: var(--eb-blue); }
.eb-tabbar button[aria-current="page"] i { transform: translateY(-1px); }
/* The radio player sits just above the tabs. */
.eb-radio-dock { bottom: calc(var(--eb-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: 0; }
body.eb-radio-open { padding-bottom: calc(var(--eb-tabbar-h) + 64px + env(safe-area-inset-bottom)); }
body.eb-radio-open .toast { bottom: calc(var(--eb-tabbar-h) + 5rem) !important; }
.toast { bottom: calc(var(--eb-tabbar-h) + 1rem) !important; }
/* The Radio tab */
#radioView .eb-radio-strip { margin-top: 1rem; }
.eb-radio-nowcard h2 { margin: 0.2rem 0; font-size: 1.15rem; }
.eb-radio-favs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.eb-radio-footnote { font-size: 0.78rem; color: var(--eb-muted); text-align: center; margin: 1rem 1rem 2rem; }
/* The radio account (account.js) in the app's own colours */
.acct { --card: var(--eb-card); --line: var(--eb-line); --muted: var(--eb-muted); --accent: var(--eb-blue); --bg2: var(--eb-raised); --radius: 12px; color: var(--eb-text, var(--eb-heading)); }
.acct .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border: 0; border-radius: 8px; padding: 0.7rem 1rem; cursor: pointer;
    font: 700 0.9rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; min-height: 44px; background: var(--eb-btn); color: #fff; }
.acct .btn.ghost { background: transparent; color: var(--eb-link); border: 2px solid var(--eb-link); }
.acct a { color: var(--eb-link); }
.acct-card h2 { color: var(--eb-heading); }
.acct-fav { border-color: var(--eb-line); color: var(--eb-heading); background: var(--eb-raised); }