: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: 0;
    text-decoration: none;
    min-width: 0;
}

.header-wordmark {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1da0df;
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
}

.header-wordmark-accent { color: #f0a800; }

.header-tagline {
    font-size: 0.72rem;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-top: 1px;
    white-space: nowrap;
}

#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: 0; }
    .header-wordmark { font-size: 1.05rem; }
    .header-tagline { font-size: 0.62rem; }

    #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-logo {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
}

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

/* Logo and headline share one row at every width; both scale down so it never wraps. */
.al-hero-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2.5vw, 16px);
    margin-bottom: 12px;
}

.al-hero-title .al-hero-logo {
    width: clamp(36px, 10vw, 64px);
    height: clamp(36px, 10vw, 64px);
    margin: 0;
    flex-shrink: 0;
}

.al-hero-title h1 {
    color: #1da0df;
    font-size: clamp(1.1rem, 5.5vw, 2rem);
    white-space: nowrap;
    margin: 0;
}

.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;
    padding: 20px;
    background: var(--al-card);
    border: 1px solid var(--al-border);
    border-radius: 18px;
    box-shadow: var(--al-shadow);
}

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

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

.al-subject-hint {
    align-self: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid rgba(180, 83, 9, 0.25);
    border-radius: 8px;
    padding: 5px 12px;
    margin-top: -2px;
    text-align: center;
}

/* Two clearly separate zones for "run now" vs "schedule for later" — distinct cards so it's
   hard to hit Submit when you meant Schedule. "Now" is the filled primary card in the logo's
   blue; "later" is a quiet white card. */
.al-action-grid {
    display: grid;
    /* minmax(0, 1fr), not bare 1fr — a bare 1fr track won't shrink past its content's
       min-content, so the native datetime-local control would force the grid wider than
       the screen instead of letting the cards get thinner. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    margin: 4px auto 0;
    max-width: 480px;
}

.al-action-card {
    position: relative;
    min-width: 0;
    background: var(--al-card);
    border: 1px solid var(--al-border);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(26, 31, 54, 0.04), 0 6px 16px rgba(26, 31, 54, 0.07);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: space-between;
    gap: 10px;
    text-align: left;
}

.al-action-now {
    background: linear-gradient(145deg, #38bdf8 0%, #0284c7 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.18), 0 8px 18px rgba(2, 132, 199, 0.28);
}

.al-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0f2fe;
    color: #0284c7;
}

.al-action-now .al-action-icon {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.al-action-icon svg { width: 18px; height: 18px; }
.al-action-title { font-weight: 800; font-size: 0.98rem; letter-spacing: -0.01em; color: var(--al-ink); }
.al-action-now .al-action-title { color: #fff; }

.al-action-sub { display: none; }

/* margin-top:auto on the first control pins the controls to the bottom of each card, which
   keeps Submit and Schedule level even though the "later" card has an extra datetime field. */
.al-action-card > .al-go-btn,
.al-action-card > .al-schedule-time-wrap,
.al-action-card > .al-schedule-btn { grid-column: 1 / -1; }

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

.al-go-btn {
    background: #fff;
    color: #0369a1;
    border: none;
    border-radius: 10px;
    padding: 7px 16px;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    width: 100%;
    box-shadow: 0 1px 4px rgba(3, 105, 161, 0.18);
}

.al-go-btn:hover { background: #fff; color: #075985; }
.al-go-btn:disabled { opacity: 0.6; }

/* Keep the two cards side by side at phone widths (matching desktop) by shrinking them
   down instead of stacking — a narrow phone has less width to split between two cards,
   not less need to see both at once. */
@media (max-width: 560px) {
    .al-action-card { padding: 8px; gap: 6px; border-radius: 12px; }
    .al-action-icon { width: 24px; height: 24px; border-radius: 8px; }
    .al-action-icon svg { width: 14px; height: 14px; }
    .al-action-title { font-size: 0.78rem; }
    .al-action-divider { padding: 0 2px; font-size: 0.62rem; }
    .al-go-btn, .al-schedule-btn { padding: 6px 8px; font-size: 0.76rem; }
    .al-schedule-time { padding: 4px 6px 4px 20px; font-size: 0.7rem; }
    .al-schedule-time-icon { left: 6px; width: 11px; height: 11px; }
}

/* ── 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-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-original-subject {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--al-border);
    font-size: 0.8rem;
    font-style: italic;
    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 ─────────────────────────────────────────────── */

/* Safari on iOS renders <input type="datetime-local"> as plain text with no built-in calendar
   glyph (unlike Chrome/Edge, which draw their own picker-indicator icon), so without this the
   field gives iOS visitors no visual cue that tapping it opens a date/time picker. The icon is
   purely decorative and sits under pointer-events:none, so taps still land on the input below
   it and open whichever picker the browser provides on its own. */
.al-schedule-time-wrap {
    position: relative;
}

.al-schedule-time-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--al-muted);
    pointer-events: none;
}

.al-schedule-time {
    width: 100%;
    min-width: 0;
    border-radius: 10px;
    border: 1px solid var(--al-border);
    background: #f8fafc;
    padding: 5px 10px 5px 28px;
    font-size: 0.85rem;
}

.al-schedule-time:disabled {
    opacity: 0.6;
    cursor: default;
}

.al-schedule-time:focus {
    background: #fff;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
    outline: none;
}

.al-schedule-btn {
    width: 100%;
    background: var(--al-ink);
    border: none;
    border-radius: 10px;
    padding: 7px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.al-schedule-btn:hover { background: #0f172a; }
.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 .al-scheduled-subject { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.al-scheduled-runlink { color: inherit; text-decoration: underline; text-decoration-color: var(--al-border); text-underline-offset: 3px; }
.al-scheduled-runlink:hover { text-decoration-color: currentColor; }

.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; }