/* AutoCodabench: reorder the LOGIN form so Password appears above
   the optional Your-name field. Scope: anything matching is also
   `:not(.ac-pub-form)` so this rule never bleeds into the in-workspace
   Codabench publish form (which uses the natural username-above-password
   ordering people expect outside of a login context).

   Final order on the login form:
     [Password]          <- order 1
     [Your name (opt.)]  <- order 2
     [Sign In]           <- order 3

   Uses :has() (CSS Selectors L4; supported in all evergreen browsers
   2023+). If the browser doesn't support :has(), the form falls back
   to DOM order (name first, then password) — still functional.
*/

form:has(input[type="password"]):not(.ac-pub-form) {
    display: flex;
    flex-direction: column;
}
form:has(input[type="password"]):not(.ac-pub-form) > *:has(input[name="email"]),
form:has(input[type="password"]):not(.ac-pub-form) > *:has(input[type="email"]),
form:has(input[type="password"]):not(.ac-pub-form) > *:has(input[type="text"][autocomplete="username"]) {
    order: 2;
}
form:has(input[type="password"]):not(.ac-pub-form) > *:has(input[type="password"]) {
    order: 1;
}
form:has(input[type="password"]):not(.ac-pub-form) > button,
form:has(input[type="password"]):not(.ac-pub-form) > *:has(> button[type="submit"]) {
    order: 3;
}


/* ============================================================
 * Chat customizations — injected by web/public/chat.js.
 *
 * Tool-call activity is rendered as an inline CLI-style log by the
 * server (web/streaming.py:TurnView), so there are no tool chips to
 * style here anymore. What remains is the startup banner/lock, the
 * attach-only composer, the phase pills, and the workspace panel.
 * ============================================================ */


/* ----- init banner + input lock during session startup -----
 *
 * chat.js injects `#ac-init-banner` the moment the chat page is
 * rendered (before on_chat_start has even fired server-side) and
 * keeps it up until READY_PHRASE appears. While the banner is up,
 * the textarea also gets `.ac-input-locked`. Both go away together
 * once the agent's greeting lands.
 */

#ac-init-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;            /* above the login overlay + chat content */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 20px;
    /* Theme-adaptive, neutral — no purple gradient. Reads as a quiet system
     * notification that matches the rest of the UI in light and dark. */
    background: hsl(var(--popover));
    color: hsl(var(--muted-foreground));
    border-bottom: 1px solid hsl(var(--border));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.4;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    /* Slide-down on first appearance so it doesn't feel jarring. */
    animation: ac-banner-in 0.25s ease-out;
}
#ac-init-banner span:not(.ac-init-spinner) {
    max-width: 70ch;
}
#ac-init-banner b {
    font-weight: 600;
    color: hsl(var(--foreground));
}

.ac-init-spinner {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border: 2px solid hsl(var(--border));
    border-top-color: hsl(var(--primary));
    border-radius: 50%;
    animation: ac-spin 0.9s linear infinite;
}
@keyframes ac-spin   { to { transform: rotate(360deg); } }
@keyframes ac-banner-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* The locked textarea — greyed + progress cursor. */
textarea.ac-input-locked {
    opacity: 0.55;
    cursor: progress;
    background: rgba(127, 127, 127, 0.10);
}
textarea.ac-input-locked::placeholder {
    font-style: italic;
}


/* ============================================================
 * Persistent "📁 Files" floating toggle (chat.js).
 *
 * Anchored to the right edge of the viewport, vertically centred,
 * always reachable once at least one file chip exists. Click →
 * simulates clicking the most-recent chip → Chainlit's element
 * drawer slides open.
 * ============================================================ */

#ac-files-toggle {
    position: fixed;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9998;       /* below the init banner (99999), above chat */
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, currentColor 25%, transparent);
    background: color-mix(in oklab, Canvas 90%, currentColor 6%);
    color: CanvasText;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}
#ac-files-toggle:hover {
    transform: translateY(-50%) translateX(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
#ac-files-toggle:active {
    transform: translateY(-50%) translateX(0);
}


/* ============================================================
 * Phase pills — slim, black-background indicators that sit in the
 * Chainlit header strip, same row as Readme / New chat. Just three
 * pills (Plan / Competition Creation); per-turn context-% and cost
 * are surfaced in each assistant turn's footer, not in the header.
 *
 * Click an active pill: no-op (you're already there).
 * Click a locked  pill: confirm → revert (discards downstream).
 * Click the pending phase that's eligible to advance (state.next +
 *   can_advance): triggers advance.
 *
 * The cl.Action buttons that actually trigger phase transitions
 * live in a hidden chat message — chat.js click-simulates them.
 * ============================================================ */

.ac-phase-pills {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    margin-right: 8px;
    border-radius: 999px;
    background: #0b0b0c;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    line-height: 1;
}

.ac-pp {
    appearance: none;
    border: 1px solid transparent;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    cursor: default;
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    white-space: nowrap;
    transition: background 0.12s ease-out, color 0.12s ease-out,
                transform 0.10s ease-out;
}

/* Current phase: bright pill, accent ring. */
.ac-pp-active {
    background: #ffffff;
    color: #0b0b0c;
    border-color: #ffffff;
    font-weight: 700;
}

/* Completed phase (artifact produced). Progress-only — not clickable. */
.ac-pp-done {
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.30);
}

/* Skipped phase (user started later in the pipeline, e.g. validate-only). */
.ac-pp-skipped {
    color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.04);
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.14);
}

/* Upcoming phase. */
.ac-pp-pending {
    color: rgba(255, 255, 255, 0.40);
}

/* Non-active pills are progress-only; clicking flashes the Readme. */
.ac-pp-hint { cursor: help; }

/* Red-outline pulse on the Readme button. Triggered by chat.js when the user
 * clicks a progress-only phase pill — the nudge to read how the bar works.
 * 3 short pulses over ~3 s, then auto-stripped by chat.js. */
@keyframes ac-readme-flash-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.8); outline-color: #dc2626; }
    40%  { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);  outline-color: #dc2626; }
    50%  { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);    outline-color: #dc2626; }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);    outline-color: #dc2626; }
}
.ac-readme-flash {
    outline: 2px solid #dc2626 !important;
    outline-offset: 2px !important;
    border-radius: 6px !important;
    animation: ac-readme-flash-pulse 1s ease-out 3 !important;
}

/* Attach-only composer (Option B — validate an existing bundle): typing is
 * disabled (readOnly) but the file-attach + send buttons stay usable. */
textarea.ac-attach-only {
    opacity: 0.75;
    cursor: not-allowed;
    background: rgba(127, 127, 127, 0.06);
}


/* ============================================================
 * Persistent right workspace panel (sci-space style).
 *
 * Always visible during a chat. Top tab strip switches between
 * notebook / transcript / cost / specs. Body of the chat is
 * pushed left via padding-right so the panel doesn't overlap.
 * ============================================================ */

/* Open state — `data-state="open"` (default after JS init).
 *
 * Width-based transitions (not transform) so the collapsed state is
 * actually 44 px wide on the page rather than a translated-off-screen
 * 40 vw element; this avoids the "the panel still exists at 40 vw,
 * just offscreen, and might intercept clicks" failure mode. */
#ac-side-panel {
    position: fixed !important;
    /* Start BELOW the header so the workspace panel/sliver never overlaps the
     * phase bar (it used to cover the right edge and cut off "3. Validation"). */
    top: 56px !important;
    right: 0 !important;
    bottom: 0 !important;
    /* 55vw clamped to [480, 900] px so the notebook has real reading
     * room on wide monitors without devouring the chat on narrow ones. */
    width: 55vw !important;
    min-width: 480px !important;
    max-width: 900px !important;
    z-index: 10000 !important;             /* above Chainlit chrome */
    display: flex !important;
    flex-direction: column !important;
    background: color-mix(in oklab, Canvas 96%, currentColor 2%) !important;
    border-left: 1px solid color-mix(in oklab, currentColor 18%, transparent) !important;
    box-shadow: -6px 0 22px rgba(0, 0, 0, 0.10);
    transition: width 0.22s ease-out, min-width 0.22s ease-out,
                max-width 0.22s ease-out !important;
}

/* COLLAPSED — sliver on the right edge, fully clickable to open.
 * data-state="collapsed" is the source of truth; `.ac-collapsed` class
 * is the legacy hook (kept in sync by chat.js). */
#ac-side-panel[data-state="collapsed"],
#ac-side-panel.ac-collapsed {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    cursor: pointer !important;
}

/* Hide everything inside the panel except the vertical "📁 Workspace"
 * tab button when collapsed. We use visibility:hidden + width tricks
 * rather than display:none so Chainlit's React reconciler doesn't
 * fight us on the layout each turn. */
#ac-side-panel[data-state="collapsed"] .ac-tabs,
#ac-side-panel[data-state="collapsed"] #ac-side-iframe,
#ac-side-panel[data-state="collapsed"] .ac-side-footer,
#ac-side-panel[data-state="collapsed"] .ac-side-title,
#ac-side-panel[data-state="collapsed"] #ac-side-refresh,
#ac-side-panel.ac-collapsed .ac-tabs,
#ac-side-panel.ac-collapsed #ac-side-iframe,
#ac-side-panel.ac-collapsed .ac-side-footer,
#ac-side-panel.ac-collapsed .ac-side-title,
#ac-side-panel.ac-collapsed #ac-side-refresh {
    display: none !important;
}

#ac-side-panel[data-state="collapsed"] .ac-side-header,
#ac-side-panel.ac-collapsed .ac-side-header {
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    border-bottom: none !important;
    background: transparent !important;
}
#ac-side-panel[data-state="collapsed"] .ac-side-actions,
#ac-side-panel.ac-collapsed .ac-side-actions {
    flex: 1 !important;
    width: 44px !important;
    height: 100% !important;
}
#ac-side-panel[data-state="collapsed"] #ac-side-collapse,
#ac-side-panel.ac-collapsed #ac-side-collapse {
    flex: 1 !important;
    width: 44px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Theme tokens (not system Canvas) so the strip matches the app in dark
     * mode instead of showing as a jarring light bar; centered label. */
    border: none !important;
    border-left: 1px solid hsl(var(--border)) !important;
    border-radius: 0 !important;
    background: hsl(var(--popover)) !important;
    color: hsl(var(--muted-foreground)) !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    padding: 16px 0 !important;
    line-height: 1.3 !important;
    transition: background 0.12s ease-out, color 0.12s ease-out !important;
}
#ac-side-panel[data-state="collapsed"]:hover #ac-side-collapse,
#ac-side-panel.ac-collapsed:hover #ac-side-collapse {
    background: hsl(var(--accent)) !important;
    color: hsl(var(--foreground)) !important;
}

.ac-side-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid color-mix(in oklab, currentColor 14%, transparent);
    background: color-mix(in oklab, Canvas 92%, currentColor 4%);
}
.ac-side-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: CanvasText;
}
.ac-side-actions {
    display: flex;
    gap: 6px;
}
.ac-side-actions button {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid color-mix(in oklab, currentColor 22%, transparent);
    background: Canvas;
    color: CanvasText;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.ac-side-actions button:hover {
    background: color-mix(in oklab, Canvas 85%, currentColor 6%);
}

.ac-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid color-mix(in oklab, currentColor 12%, transparent);
    overflow-x: auto;
    background: color-mix(in oklab, Canvas 98%, currentColor 1%);
}
.ac-tab {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: CanvasText;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.ac-tab:hover {
    background: color-mix(in oklab, Canvas 88%, currentColor 4%);
}
.ac-tab-active {
    background: color-mix(in oklab, Canvas 80%, currentColor 8%) !important;
    border-color: color-mix(in oklab, currentColor 20%, transparent);
    font-weight: 700;
}

#ac-side-iframe {
    flex: 1;
    width: 100%;
    border: none;
    background: Canvas;
}

/* ----------- Workspace footer (downloads) -----------
 * Always present in the DOM; CSS toggles visibility via data-state on
 * the footer. Downloads appear as soon as anything downloadable lives
 * in the manifest. The footer also disappears when the right panel is
 * collapsed (handled lower down with the other collapsed-state hides). */

.ac-side-footer {
    border-top: 1px solid color-mix(in oklab, currentColor 16%, transparent);
    background: color-mix(in oklab, Canvas 96%, currentColor 3%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    color: CanvasText;
    max-height: 45vh;
    overflow-y: auto;
}
.ac-side-footer[data-state="hidden"] {
    display: none;
}

.ac-foot-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: color-mix(in oklab, CanvasText 65%, transparent);
    padding: 10px 14px 6px 14px;
    user-select: none;
}

.ac-dl-section {
    padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in oklab, currentColor 10%, transparent);
}
.ac-dl-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px 4px;
}
.ac-dl-btn {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid color-mix(in oklab, currentColor 22%, transparent);
    background: Canvas;
    color: CanvasText !important;
    text-decoration: none !important;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.1s ease-out, border-color 0.1s ease-out,
                transform 0.1s ease-out;
}
.ac-dl-btn:hover {
    background: color-mix(in oklab, Canvas 84%, currentColor 8%);
    border-color: color-mix(in oklab, currentColor 34%, transparent);
    transform: translateY(-0.5px);
}
.ac-dl-btn[data-kind="bundle"]:not(.ac-dl-disabled) {
    border-color: #0969da;
    background: color-mix(in oklab, #0969da 8%, Canvas);
}
.ac-dl-btn[data-kind="bundle"]:not(.ac-dl-disabled):hover {
    background: color-mix(in oklab, #0969da 16%, Canvas);
}

/* Disabled (not-ready) state — rendered as <div> not <a>, so it's
 * non-interactive by construction. Visually grayed but the row keeps
 * its slot so the user sees the "competition bundle (.zip)" button
 * exists and what it'll look like once Phase 2 finishes. */
.ac-dl-btn.ac-dl-disabled {
    opacity: 0.55;
    cursor: not-allowed !important;
    background: color-mix(in oklab, Canvas 92%, currentColor 4%) !important;
    border-color: color-mix(in oklab, currentColor 18%, transparent) !important;
    color: color-mix(in oklab, CanvasText 60%, transparent) !important;
}
.ac-dl-btn.ac-dl-disabled:hover {
    transform: none !important;
    background: color-mix(in oklab, Canvas 92%, currentColor 4%) !important;
    border-color: color-mix(in oklab, currentColor 18%, transparent) !important;
}
.ac-dl-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ac-dl-btn .ac-dl-label { flex: 1; min-width: 0; }
.ac-dl-btn .ac-dl-size {
    flex: 0 0 auto;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 11px;
    font-weight: 500;
    color: color-mix(in oklab, CanvasText 55%, transparent);
}
.ac-dl-btn .ac-dl-pending {
    color: color-mix(in oklab, CanvasText 40%, transparent);
    font-style: italic;
}
.ac-dl-btn .ac-dl-desc {
    font-size: 11px;
    font-weight: 400;
    color: color-mix(in oklab, CanvasText 60%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The "Publish to Codabench" footer form was removed (not maintained for
 * now); its styles lived here. */

/* Reserve room on the right of the page so chat content isn't
 * underneath the panel. Keep this in sync with #ac-side-panel
 * `width` above (55vw, clamped to 480-900px). Toggle is added /
 * removed by chat.js as the panel opens/collapses. */
body.ac-side-active {
    padding-right: min(900px, 55vw);
}
@media (max-width: 900px) {
    body.ac-side-active { padding-right: 0; }
    #ac-side-panel {
        width: 100vw !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 60vh;
        top: auto;
        bottom: 0;
        border-top: 1px solid color-mix(in oklab, currentColor 18%, transparent);
        border-left: none;
    }
}


/* ============================================================
 * Top-right Settings menu (injected by chat.js).
 *
 * Consolidates Chainlit's two separate native header controls — the
 * standalone theme toggle (#theme-toggle) and the avatar/user menu
 * (#user-nav-button, which held Settings + Logout) — into a single
 * gear dropdown holding the Light/Dark/System theme switch + Logout.
 * The natives are hidden in favour of this one menu. Colors use
 * Chainlit's own shadcn CSS variables so the menu tracks the active
 * theme automatically in both light and dark.
 * ============================================================ */

/* Fold the native controls into our single gear menu. The theme toggle and
 * user/avatar menu are redundant; Readme moves INTO the gear menu but stays
 * in the DOM (display:none) so it remains the click target + layout anchor. */
#theme-toggle,
#user-nav-button,
#readme-button { display: none !important; }

/* Gear button — injected into the header flow just LEFT of "Readme"
 * (chat.js). That keeps it clear of both the workspace sliver on the far
 * right and Readme itself, and it inherits the header's vertical alignment.
 * Matches Chainlit's 36px icon-button chrome. */
#ac-settings-btn {
    /* relative + z-index so the gear always renders ABOVE the fixed workspace
     * sliver (z 10000) even if layout pushes it near the right edge. */
    position: relative;
    z-index: 10001;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 6px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: background 0.12s ease-out, color 0.12s ease-out;
}
#ac-settings-btn:hover,
#ac-settings-btn[aria-expanded="true"] {
    background: hsl(var(--accent));
    color: hsl(var(--foreground));
}
#ac-settings-btn svg { width: 18px; height: 18px; }

/* Dropdown card (mounted on <body>, fixed-positioned under the gear). */
#ac-settings-menu {
    position: fixed;
    z-index: 100000;
    min-width: 248px;
    padding: 8px;
    border-radius: 12px;
    background: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    border: 1px solid hsl(var(--border));
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    animation: ac-menu-in 0.12s ease-out;
}
#ac-settings-menu[hidden] { display: none; }
@keyframes ac-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Signed-in-as header. */
.ac-set-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid hsl(var(--border));
}
.ac-set-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--primary));
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}
.ac-set-user-meta { display: flex; flex-direction: column; min-width: 0; }
.ac-set-user-name {
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--popover-foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-set-user-sub { font-size: 11px; color: hsl(var(--muted-foreground)); }

.ac-set-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: hsl(var(--muted-foreground));
    padding: 2px 8px 6px;
}

/* Segmented Light / Dark / System control. */
.ac-theme-seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 3px;
    margin: 0 4px 6px;
    background: hsl(var(--accent));
    border-radius: 9px;
}
.ac-theme-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    border-radius: 7px;
    cursor: pointer;
    color: hsl(var(--muted-foreground));
    font-size: 11px;
    font-weight: 600;
    transition: background 0.1s ease-out, color 0.1s ease-out;
}
.ac-theme-opt svg { width: 16px; height: 16px; }
.ac-theme-opt:hover { color: hsl(var(--foreground)); }
.ac-theme-opt.ac-active {
    background: hsl(var(--popover));
    color: hsl(var(--foreground));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
}

.ac-set-sep { height: 1px; background: hsl(var(--border)); margin: 6px 4px; }

/* Action rows (Logout). */
.ac-set-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 8px);
    margin: 0 4px;
    padding: 9px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: hsl(var(--popover-foreground));
    font-size: 13px;
    font-weight: 500;
}
.ac-set-row svg { flex: 0 0 auto; width: 16px; height: 16px; }
.ac-set-row:hover { background: hsl(var(--accent)); }
.ac-set-row.ac-set-danger { color: hsl(var(--destructive)); }
.ac-set-row.ac-set-danger:hover {
    background: color-mix(in oklab, hsl(var(--destructive)) 14%, transparent);
}


/* ============================================================
 * Landing chooser cards (chat.js tags the two entry buttons
 * data-ac-entry="create|validate"). The cl.Action label is the
 * card title; the icon (::before) + description (::after) are
 * added here so the first screen reads like a product chooser
 * rather than two emoji chat buttons.
 * ============================================================ */

/* Lay the two cards out side by side, centered. Chainlit wraps the
 * AskActionMessage buttons in a flex container — promote whichever
 * element directly holds them to a centered, wrapping row. */
div:has(> button[data-ac-entry]),
div:has(> * > button[data-ac-entry]) {
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: stretch;
    margin: 10px 0 6px;
}

button[data-ac-entry] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 300px !important;
    max-width: 44vw !important;
    min-height: 158px !important;
    padding: 22px 22px 20px !important;
    border-radius: 16px !important;
    border: 1px solid hsl(var(--border)) !important;
    background: hsl(var(--popover)) !important;
    color: hsl(var(--foreground)) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    white-space: normal !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.13s ease-out, box-shadow 0.13s ease-out,
                border-color 0.13s ease-out !important;
}
button[data-ac-entry]:hover {
    transform: translateY(-2px) !important;
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16) !important;
}

/* Icon chip at the top of each card (monochrome, product-style). */
button[data-ac-entry]::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: hsl(var(--primary));
    background: color-mix(in oklab, hsl(var(--primary)) 14%, transparent);
}
button[data-ac-entry="create"]::before { content: "+"; }
button[data-ac-entry="validate"]::before { content: "\2713"; }  /* ✓ */

/* Description line under the title. */
button[data-ac-entry]::after {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: hsl(var(--muted-foreground));
    white-space: normal;
}
button[data-ac-entry="create"]::after {
    content: "Design a new competition bundle from a one-line idea or a PDF proposal.";
}
button[data-ac-entry="validate"]::after {
    content: "Check an existing bundle against the pre-launch validation criteria.";
}


/* ============================================================
 * Codabench rebrand — blue accents + light-blue tints to match
 * codabench.org (brand blue #06649e, link #4183c4, tint #f2faff).
 * Overrides Chainlit's shadcn theme variables. login.css loads after
 * Chainlit's bundle, so these win in both light and dark.
 * ============================================================ */
/* `:root:not(.dark)` (light) and `html.dark` are deliberately MORE specific
 * than Chainlit's own `:root` / `.dark` so these win the cascade tie. */
:root:not(.dark) {
    --primary: 203 88% 34%;          /* Codabench blue */
    --primary-foreground: 0 0% 100%;
    --ring: 203 88% 34%;
    --accent: 205 80% 93%;           /* light-blue tint */
    --accent-foreground: 203 80% 26%;
    --secondary: 205 70% 95%;
    --secondary-foreground: 203 70% 26%;
    --background: 208 45% 98.5%;     /* faint light-blue page tint */
}
html.dark {
    --primary: 203 85% 56%;          /* brighter blue on dark */
    --primary-foreground: 0 0% 100%;
    --ring: 203 85% 56%;
    --accent: 203 42% 22%;           /* deep blue-tinted accent */
    --accent-foreground: 0 0% 96%;
    --secondary: 203 28% 20%;
    --secondary-foreground: 0 0% 96%;
}


/* ============================================================
 * Persistent cost / context widget (chat.js) — bottom-left,
 * always-visible session spend + context use with a budget bar.
 * ============================================================ */
#ac-cost-widget {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 9000;
    min-width: 152px;
    padding: 8px 11px;
    border-radius: 10px;
    background: hsl(var(--popover));
    border: 1px solid hsl(var(--border));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: hsl(var(--foreground));
    user-select: none;
    pointer-events: none;          /* informational; never blocks clicks */
}
.ac-cost-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ac-cost-budget { font-weight: 600; white-space: nowrap; }
.ac-cost-bar {
    flex: 1;
    height: 5px;
    min-width: 36px;
    border-radius: 999px;
    background: hsl(var(--accent));
    overflow: hidden;
}
.ac-cost-bar > i {
    display: block;
    height: 100%;
    width: 0%;
    background: hsl(var(--primary));
    transition: width 0.4s ease-out, background 0.3s ease-out;
}
.ac-cost-ctx {
    margin-top: 4px;
    font-size: 11px;
    color: hsl(var(--muted-foreground));
}


/* ============================================================
 * Phase-pill custom tooltip + clickable "advance" pill (chat.js).
 * ============================================================ */
#ac-pill-tip {
    position: fixed;
    z-index: 100002;
    max-width: 280px;
    padding: 8px 11px;
    border-radius: 8px;
    background: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    border: 1px solid hsl(var(--border));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-line;          /* render the \n\n in the tip text */
    pointer-events: none;
}
#ac-pill-tip[hidden] { display: none; }

/* The next-phase pill, once it can be entered: blue, pulsing, clickable. */
.ac-pp-advance {
    cursor: pointer !important;
    color: #fff !important;
    background: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary)) !important;
    font-weight: 700 !important;
    animation: ac-pp-advance-pulse 1.8s ease-in-out infinite;
}
.ac-pp-advance:hover { filter: brightness(1.12); }
@keyframes ac-pp-advance-pulse {
    0%, 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.55); }
    70%      { box-shadow: 0 0 0 6px hsl(var(--primary) / 0); }
}