:root {
    --al-ink: #1a1f36;
    --al-muted: #6b7280;
    --al-bg: #f7f7fb;
    --al-card: #ffffff;
    --al-accent: #5b4fe8;
    --al-accent-dark: #4338ca;
    --al-border: rgba(26, 31, 54, 0.10);
    --al-shadow: 0 4px 20px rgba(26, 31, 54, 0.08);
}

* { box-sizing: border-box; }

body {
    background: var(--al-bg);
    color: var(--al-ink);
    font-family: 'Segoe UI', 'Inter', system-ui, sans-serif;
    margin: 0;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.al-header {
    background: var(--al-card);
    border-bottom: 1px solid var(--al-border);
}

.al-header-inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.al-brand {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--al-ink);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.al-brand-mark { color: var(--al-accent); }

.header-logo {
    height: 53px;
    width: auto;
    opacity: 0.9;
    display: block;
    flex-shrink: 0;
}

/* Real text, not baked into the SVG — an embedded <text> element renders at whatever
   width the VIEWER's font substitution gives it (iOS has neither Segoe UI nor Inter
   installed, so Safari falls back to San Francisco, which is wider), so the logo would
   silently get too wide to fit on a phone's single header row no matter how tightly the
   SVG's own viewBox was cropped. Plain HTML text sizes and wraps/truncates predictably
   instead. */
.header-brand {
    gap: 10px;
    text-decoration: none;
    min-width: 0;
}

.header-wordmark {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--al-ink);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.header-wordmark-accent { color: var(--al-accent); }

#identity-chip {
    background: #fafafa;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #333;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Same #identity-chip selector/specificity as the base rule above, so this MUST come
   after it in the file — CSS breaks a specificity tie by source order, not by which
   media query is narrower, so a narrower-viewport rule placed BEFORE its unconditional
   twin loses to it at every width, media condition or not. This block sat before the
   base rule for a while, which silently made the whole mobile shrink a no-op. */
@media (max-width: 480px) {
    .header-logo { height: 34px; }
    .header-brand { gap: 6px; }
    .header-wordmark { font-size: 1.05rem; }

    #identity-chip { font-size: 0.76rem; }

    #identity-chip span.px-2 {
        padding-left: .35rem !important;
        padding-right: .35rem !important;
    }

    .navbar-toggler { padding: .2rem .5rem; }
}

#token-balance-pill {
    color: #7a5c00;
}

.identity-chip-divider {
    width: 1px;
    height: 16px;
    background: rgba(0,0,0,0.12);
    flex-shrink: 0;
}

.footer-company {
    margin-top: 18px;
    text-align: center;
}

.footer-company-logo {
    height: 56px;
    width: auto;
    display: block;
    margin: 0 auto 6px;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.footer-company-logo:hover { opacity: 1; }

.footer-company-line {
    display: block;
    color: #777;
    line-height: 1.5;
}

.footer-company-line a {
    color: #0066cc;
    text-decoration: none;
}

.footer-company-line a:hover { text-decoration: underline; }

.al-tagline {
    color: var(--al-muted);
    font-size: 0.9rem;
}

/* ── Page layout ────────────────────────────────────────────────────── */
/* Scheduled Runs used to be its own full-width section stacked below the form — every schedule
   you added pushed the rest of the page further down. Now it's a sidebar that runs alongside
   the main column instead of stacking above it. */

.al-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
    gap: 8px;
    max-width: 960px;
    margin: 0 auto;
}

.al-main { min-width: 0; }

@media (max-width: 860px) {
    .al-page {
        grid-template-columns: 1fr;
    }
}

/* ── Hero / input ───────────────────────────────────────────────────── */

.al-hero {
    max-width: 880px;
    margin: 0 auto;
    padding: 56px 24px 32px;
    text-align: center;
}

.al-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.al-hero-sub {
    color: var(--al-muted);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto 28px;
}

.al-gate {
    max-width: 620px;
    margin: 0 auto 20px;
    padding: 12px 18px;
    background: #f1effe;
    border: 1px solid rgba(91, 79, 232, 0.25);
    border-radius: 10px;
    color: var(--al-ink);
    font-size: 0.92rem;
}

.al-gate a {
    color: var(--al-accent-dark);
    font-weight: 700;
    text-decoration: none;
}

.al-gate a:hover { text-decoration: underline; }

.al-form {
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.al-subject-input {
    border-radius: 10px;
    border: 1px solid var(--al-border);
    padding: 12px 16px;
    font-size: 1rem;
    font-family: inherit;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
}

.al-subject-count {
    align-self: flex-end;
    font-size: 0.78rem;
    color: var(--al-muted);
    margin-top: -4px;
}

/* Two clearly separate zones for "run now" vs "schedule for later" — these used to be a
   cramped input+button row directly above another one, which made it easy to hit Submit when
   you meant Schedule. Distinct cards with their own icon/heading fix that and give the page
   some actual visual shape instead of one flat stack of controls. */
.al-action-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 14px;
    margin-top: 6px;
}

.al-action-card {
    background: var(--al-card);
    border: 1px solid var(--al-border);
    border-top: 3px solid var(--al-accent);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--al-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* space-between (not a plain gap) so the button is always the last thing pinned to the
       bottom of the card — that's what keeps Submit and Schedule level with each other even
       though the "later" card has an extra datetime field the "now" card doesn't. */
    justify-content: space-between;
    gap: 10px;
    text-align: center;
}

.al-action-later { border-top-color: #94a3b8; }

.al-action-icon { font-size: 1.7rem; }
.al-action-title { font-weight: 700; font-size: 1.02rem; color: var(--al-ink); }

.al-action-divider {
    align-self: center;
    color: var(--al-muted);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.al-go-btn {
    background: var(--al-accent);
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    font-weight: 600;
    white-space: nowrap;
    width: 100%;
}

.al-go-btn:hover { background: var(--al-accent-dark); }
.al-go-btn:disabled { opacity: 0.6; }

@media (max-width: 560px) {
    .al-action-grid { grid-template-columns: 1fr; }
    .al-action-divider { padding: 2px 0; }
}

/* ── Run page header ────────────────────────────────────────────────── */
/* /Home/Run/{id} — what a "Cover it now" submit navigates straight to: the story appears here
   as soon as it is ready (see the result placeholder below). */

.al-run-hero {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 24px 8px;
    text-align: center;
}

.al-run-back {
    display: inline-block;
    color: var(--al-muted);
    font-size: 0.85rem;
    text-decoration: none;
    margin-bottom: 14px;
}

.al-run-back:hover { color: var(--al-accent-dark); }

.al-run-subject {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}

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

/* ── Result-pending placeholder ────────────────────────────────────── */
/* Holds the result's spot at the top of the page while the run is still going — swapped out
   for the real thing the instant RunComplete/renderResult fires (see newsagent-run.js). Reuses
   al-spin for the spinner itself; the pulse is its own keyframe. */

.al-result-pending {
    max-width: 480px;
    margin: 40px auto 48px;
    padding: 44px 24px;
    text-align: center;
    background: var(--al-card);
    border: 1px solid var(--al-border);
    border-radius: 18px;
    box-shadow: var(--al-shadow);
    animation: al-result-pending-pulse 1.8s ease-in-out infinite;
}

.al-result-pending-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 18px;
    border: 4px solid rgba(91, 79, 232, 0.15);
    border-top-color: var(--al-accent);
    border-radius: 50%;
    animation: al-spin 0.9s linear infinite;
}

.al-result-pending-text {
    margin: 0;
    color: var(--al-muted);
    font-size: 1rem;
    font-weight: 600;
}

@keyframes al-result-pending-pulse {
    0%, 100% { box-shadow: var(--al-shadow); }
    50% { box-shadow: 0 4px 28px rgba(91, 79, 232, 0.35); }
}

/* ── Result (news story) ────────────────────────────────────────────── */
/* The finished run reads like a news article, since the audience is newsroom people: serif
   headline and body in one narrow column, sans-serif for the metadata (kicker, byline, box
   titles, captions). Optional blocks (key facts, timeline, related coverage...) are
   `hidden` by newsagent-run.js unless the run has that data, so older runs still render. */

.al-story {
    --al-serif: Georgia, 'Source Serif 4', 'Times New Roman', serif;
    max-width: 700px;
    margin: 0 auto 48px;
    padding: 0 24px;
}

.al-kicker {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--al-accent-dark);
}

.al-story h2 {
    font-family: var(--al-serif);
    font-size: 2.3rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin: 0 0 12px;
}

.al-dek {
    font-family: var(--al-serif);
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 400;
    color: #4b5165;
    margin: 0 0 16px;
}

.al-byline {
    margin: 0 0 22px;
    padding: 10px 0;
    border-top: 1px solid var(--al-border);
    border-bottom: 1px solid var(--al-border);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--al-muted);
}

.al-figure {
    margin: 0 0 24px;
}

/* Natural aspect ratio, never cropped: a photo of a person kept losing heads to any fixed crop
   box (see the history in git log), and a news photo shouldn't be cropped by the layout anyway.
   Capped in height so a tall portrait doesn't push the story off the screen. */
.al-result-hero {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 460px;
    height: auto;
    border-radius: 4px;
}

.al-figcaption {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--al-muted);
}

/* Boxes: Key Facts, Timeline, What we couldn't confirm, Related coverage */

.al-box {
    margin: 26px 0;
    padding: 16px 20px;
    background: var(--al-card);
    border: 1px solid var(--al-border);
    border-left: 4px solid var(--al-accent);
    border-radius: 4px;
}

.al-box-title {
    margin: 0 0 12px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--al-accent-dark);
}

.al-box p {
    margin: 0;
    font-family: var(--al-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: #33384a;
}

.al-unconfirmed {
    border-left-color: #d97706;
    background: #fffbeb;
}

.al-unconfirmed .al-box-title { color: #b45309; }

.al-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px 20px;
}

.al-stat-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--al-ink);
}

.al-stat-label {
    font-size: 0.8rem;
    color: var(--al-muted);
    margin-top: 2px;
}

/* Body: plain flowing prose with optional subheads */

.al-item {
    margin-bottom: 22px;
}

.al-item h3 {
    font-family: var(--al-serif);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.al-item p {
    font-family: var(--al-serif);
    font-size: 1.08rem;
    line-height: 1.7;
    color: #262b3d;
    margin: 0 0 14px;
}

.al-item-date {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--al-muted);
    margin-bottom: 4px;
}

.al-cite {
    font-family: 'Segoe UI', 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--al-accent-dark);
    text-decoration: none;
    vertical-align: super;
    line-height: 0;
}

.al-cite:hover { text-decoration: underline; }

.al-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.al-timeline li {
    display: flex;
    gap: 14px;
    padding: 6px 0;
    font-family: var(--al-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: #33384a;
    border-top: 1px solid var(--al-border);
}

.al-timeline li:first-child { border-top: none; }

.al-timeline-date {
    flex: 0 0 96px;
    font-family: 'Segoe UI', 'Inter', system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--al-accent-dark);
    padding-top: 2px;
}

.al-related {
    list-style: none;
    margin: 0;
    padding: 0;
}

.al-related li {
    padding: 6px 0;
    font-family: var(--al-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: #33384a;
}

.al-related a {
    font-family: 'Segoe UI', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    color: var(--al-accent-dark);
    text-decoration: none;
}

.al-related a:hover { text-decoration: underline; }

/* Copy toolbar */

.al-copy-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
}

.al-copy-btn {
    border: 1px solid var(--al-border);
    background: var(--al-card);
    color: var(--al-ink);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.al-copy-btn:hover { border-color: var(--al-accent); color: var(--al-accent-dark); }

.al-copy-status {
    font-size: 0.82rem;
    color: var(--al-muted);
}

/* ── Sources / feedback ─────────────────────────────────────────────── */

.al-ai-note {
    margin: 20px 0 0;
    font-size: 0.8rem;
    color: var(--al-muted);
}

.al-sources-title {
    margin: 14px 0 6px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--al-muted);
}

.al-sources {
    margin: 0;
    padding-left: 22px;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--al-muted);
}

.al-sources a {
    color: var(--al-accent-dark);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.al-sources a:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .al-story h2 { font-size: 1.75rem; }
    .al-timeline li { flex-direction: column; gap: 2px; }
    .al-timeline-date { flex-basis: auto; }
}

.al-feedback-thanks { color: var(--al-accent-dark); font-weight: 600; }

.al-email-row {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.al-share-block {
    margin-top: 28px;
    padding: 20px;
    border: 1px solid var(--al-border);
    border-radius: 14px;
    background: var(--al-card);
    box-shadow: var(--al-shadow);
}

.al-share-title {
    margin: 0 0 14px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--al-ink);
}

.al-share-message {
    width: 100%;
    resize: vertical;
    border-radius: 10px;
    border: 1px solid var(--al-border);
    padding: 10px 14px;
    font-size: 0.92rem;
    font-family: inherit;
    margin-bottom: 16px;
}

.al-share-label {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--al-ink);
    margin-bottom: 6px;
}

/* Relative wrapper so the clear button can sit inside the input's right edge, the way
   WebShare's own recipient field does (see SendImage.cshtml's .input-clear-wrapper). */
.al-share-input-wrap {
    position: relative;
    max-width: 400px;
}

.al-share-input {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--al-border);
    padding: 10px 34px 10px 14px;
    font-size: 0.92rem;
}

.al-share-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 15px;
    line-height: 1;
    color: var(--al-muted);
    cursor: pointer;
    padding: 4px;
}

.al-share-clear:hover { color: var(--al-ink); }

.al-share-btn {
    display: block;
    margin-top: 14px;
    background: var(--al-accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 24px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.al-share-btn:hover { background: var(--al-accent-dark); }
.al-share-btn:disabled { opacity: 0.6; cursor: default; }

.al-share-status { display: inline-block; margin-top: 10px; font-size: 0.85rem; font-weight: 600; }
.al-share-status.al-share-success { color: var(--al-accent-dark); }
.al-share-status.al-share-error { color: #dc2626; }

/* ── Schedule for later ─────────────────────────────────────────────── */

.al-schedule-time {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--al-border);
    padding: 8px 12px;
    font-size: 0.92rem;
}

.al-schedule-btn {
    width: 100%;
    background: #475569;
    border: none;
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}

.al-schedule-btn:hover { background: #334155; }
.al-schedule-btn:disabled { opacity: 0.6; cursor: default; }

.al-schedule-message {
    margin-top: 14px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
}

.al-schedule-message.al-schedule-ok { color: var(--al-accent-dark); }
.al-schedule-message.al-schedule-err { color: #b91c1c; }

.al-scheduled {
    margin: 56px 0 32px;
    padding: 18px;
    background: #f1f0f9;
    border: 1px solid var(--al-border);
    border-radius: 14px;
    position: sticky;
    top: 16px;
}

.al-scheduled h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 12px;
}

@media (max-width: 860px) {
    .al-scheduled {
        margin: 0 24px 32px;
        position: static;
    }
}

.al-scheduled-item {
    background: var(--al-card);
    border: 1px solid var(--al-border);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.al-scheduled-subject { font-weight: 600; font-size: 0.86rem; line-height: 1.35; }

.al-scheduled-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.al-scheduled-time { color: var(--al-muted); font-size: 0.75rem; white-space: nowrap; }

.al-scheduled-status {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.al-scheduled-status.status-pending { background: #f1effe; color: var(--al-accent-dark); }
.al-scheduled-status.status-processing { background: #fef3c7; color: #92400e; }
.al-scheduled-status.status-done { background: #dcfce7; color: #166534; }
.al-scheduled-status.status-error { background: #fee2e2; color: #b91c1c; }

.al-scheduled-cancel {
    background: none;
    border: none;
    color: var(--al-muted);
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: underline;
    padding: 0;
}

.al-scheduled-cancel:hover { color: #b91c1c; }

.al-scheduled-empty {
    color: var(--al-muted);
    font-size: 0.85rem;
    margin: 0;
}

.al-scheduled-error {
    font-size: 0.78rem;
    color: #b91c1c;
    background: #fee2e2;
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 2px;
}

.al-scheduled-viewall {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--al-accent-dark);
    text-decoration: none;
}

.al-scheduled-viewall:hover { text-decoration: underline; }

/* The full-history page (Home/ScheduledRuns) isn't a 280px sidebar widget — give its list room
   to breathe at the same width as the rest of the page's content. */
.al-scheduled-list-full {
    max-width: 620px;
    margin: 0 auto;
    text-align: left;
}

/* ── Out of tokens popup ────────────────────────────────────────────── */

.al-zero-tokens-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 31, 54, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 2000;
}

.al-zero-tokens-card {
    position: relative;
    background: var(--al-card);
    border-radius: 14px;
    box-shadow: var(--al-shadow);
    max-width: 420px;
    width: 100%;
    padding: 34px 28px;
    text-align: center;
}

.al-zero-tokens-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--al-bg);
    color: var(--al-muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.al-zero-tokens-close:hover {
    background: var(--al-border);
    color: var(--al-ink);
}

.al-zero-tokens-emoji {
    font-size: 42px;
    margin-bottom: 10px;
}

.al-zero-tokens-card h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--al-ink);
    margin-bottom: 12px;
}

.al-zero-tokens-card p {
    font-size: 14.5px;
    color: var(--al-muted);
    line-height: 1.6;
    margin-bottom: 24px;
}

.al-zero-tokens-btn {
    display: inline-block;
    background: var(--al-accent);
    color: #fff;
    padding: 12px 26px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: background 0.15s;
}

.al-zero-tokens-btn:hover {
    background: var(--al-accent-dark);
}

/* ── Error / footer ─────────────────────────────────────────────────── */

.al-error {
    max-width: 620px;
    margin: 0 auto 32px;
    padding: 14px 18px;
    background: #fff2f2;
    border: 1px solid #f3b4b4;
    border-radius: 10px;
    color: #8a1f1f;
}

.al-footer {
    text-align: center;
    color: var(--al-muted);
    padding: 24px;
    border-top: 1px solid var(--al-border);
}

.al-footer a { color: var(--al-accent-dark); text-decoration: none; }
.al-footer a:hover { text-decoration: underline; }