/* ==========================================================================
   ZenAI Beta (DL-3640) — the one stylesheet for the launcher and the drawer.

   Everything here is scoped: every selector starts with `.zen` (or the dark-theme
   `[data-theme="dark"] .zen`), and the tokens live ON `.zen`, never on :root, so none of it
   can reach the rest of Daitalens. Keyframes are named zen-*.

   The rules are lifted from the signed-off plan mock (tomo/mocks/ZenAI-Beta_Ro.html: base
   tokens, the .z-* ZenAI kit, the drawer, the beta tabs / steps / caret / empty state), with
   the host class names kept so the two read side by side. Differences from the mock:
   - selectors gain the `.zen` scope;
   - the mock's Tabler `ti` icons are inline SVG here (class .zi), which Daitalens can draw;
   - the mock's .dl-btn is .z-btn so it cannot collide with a Daitalens class;
   - the drawer is fixed to the right edge, below the 60px top bar.
   Light is canonical. ZenAI keeps one signature colour, --zen-accent, in both themes.
   ========================================================================== */

/* ── tokens ─────────────────────────────────────────────────────────────── */
.zen {
    --z-primary: #1071B9;
    --zen-accent: #2AAAE1;
    --zen-ink: #0B5E93;
    --shadow: 0 4px 16px rgba(29, 41, 51, .10);
    --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --dl-page: #F7F9FC;
    --dl-surface: #FFFFFF;
    --dl-surface2: #F1F5F9;
    --dl-line: #E5E7EB;
    --dl-line-soft: #EEF1F4;
    --dl-ink: #111827;
    --dl-body: #4B5563;
    --dl-muted: #6B7280;
    --dl-primary: #1071B9;
    --dl-cta: #1071B9;
    --dl-pos: #116530;
    --dl-neg: #E43D40;
    --dl-ok: #2F855A;
    --dl-okbg: rgba(47, 133, 90, .10);
    --dl-warn: #B7791F;
    --dl-warnbg: rgba(183, 121, 31, .12);
    --dl-bad: #C53030;
    --dl-badbg: rgba(197, 48, 48, .08);
    --z-glow: rgba(42, 170, 225, .09);
    --z-line: rgba(42, 170, 225, .38);
}

[data-theme="dark"] .zen {
    --z-primary: #4FCAFF;
    --zen-ink: #7FC7EE;
    --shadow: 0 12px 40px rgba(0, 0, 0, .55);

    --dl-page: #0F1117;
    --dl-surface: #1A1D27;
    --dl-surface2: #222639;
    --dl-line: rgba(255, 255, 255, .10);
    --dl-line-soft: rgba(255, 255, 255, .06);
    --dl-ink: #E4E4E7;
    --dl-body: #A5ADBA;
    --dl-muted: #7B8494;
    --dl-primary: #4FCAFF;
    --dl-cta: #1071B9;
    --dl-pos: #6EE7A0;
    --dl-neg: #FC8181;
    --dl-ok: #48BB78;
    --dl-okbg: rgba(72, 187, 120, .12);
    --dl-warn: #D69E2E;
    --dl-warnbg: rgba(214, 158, 46, .14);
    --dl-bad: #FC8181;
    --dl-badbg: rgba(252, 129, 129, .10);
    --z-glow: rgba(42, 170, 225, .13);
    --z-line: rgba(42, 170, 225, .42);
}

/* ── scoped reset: the host styles bare button / input globally ─────────── */
.zen button,
.zen input,
.zen textarea {
    font: inherit;
    color: inherit;
    margin: 0;
    box-sizing: border-box;
    letter-spacing: inherit;
}

.zen button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    box-shadow: none;
    text-transform: none;
}

.zen *,
.zen *::before,
.zen *::after {
    box-sizing: border-box;
}

.zen :focus-visible {
    outline: 2px solid var(--zen-accent);
    outline-offset: 2px;
}

.zen .zi {
    display: block;
    flex: none;
}

/* ── glyph, Beta chip ───────────────────────────────────────────────────── */
.zen .zg {
    display: inline-flex;
    vertical-align: -2px;
    color: var(--zen-accent);
}

.zen .zg svg {
    display: block;
}

.zen .z-grade {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid var(--z-line);
    background: var(--z-glow);
    color: var(--zen-ink);
    white-space: nowrap;
}

/* ── launcher (lives in the Daitalens top bar) ──────────────────────────── */
.zen.z-launch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px 0 9px;
    margin: 0 8px 0 0;
    border-radius: 999px;
    border: 1px solid var(--z-line);
    background: var(--z-glow);
    color: var(--zen-ink);
    font: inherit;
    font-weight: 700;
    font-size: 11.5px;
    position: relative;
    white-space: nowrap;
    flex: none;
    cursor: pointer;
    transition: box-shadow .16s ease-out, background-color .16s ease-out;
}

.zen.z-launch:hover {
    background: rgba(42, 170, 225, .16);
}

.zen.z-launch.on {
    background: rgba(42, 170, 225, .18);
    box-shadow: 0 0 0 3px var(--z-glow);
}

.zen.z-launch:focus-visible {
    outline: 2px solid var(--zen-accent);
    outline-offset: 2px;
}

.zen.z-launch .z-beta {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    opacity: .8;
}

/* ── drawer ─────────────────────────────────────────────────────────────── */
.zen.zd {
    background: var(--dl-surface);
    border-left: 1px solid var(--dl-line);
    box-shadow: -14px 0 34px rgba(15, 23, 42, .16);
    display: flex;
    flex-direction: column;
    color: var(--dl-body);
    font-size: 12px;
}

[data-theme="dark"] .zen.zd {
    box-shadow: -14px 0 34px rgba(0, 0, 0, .5);
}

.zen.zdr {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    width: min(380px, 92vw);
    z-index: 1030;
    min-height: 0;
    animation: zen-slide .22s ease-out both;
}

.zen .zd-h {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--dl-line-soft);
    flex: none;
}

.zen .zd-h .nm {
    font-size: 13px;
    font-weight: 800;
    color: var(--dl-ink);
    letter-spacing: -.01em;
}

.zen .zd-x {
    margin-left: auto;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dl-muted);
}

.zen .zd-x:hover {
    background: var(--dl-surface2);
    color: var(--dl-ink);
}

.zen .zdr-tabs {
    flex: none;
    display: flex;
    gap: 2px;
    padding: 4px 10px 0;
    border-bottom: 1px solid var(--dl-line-soft);
    background: var(--dl-surface);
}

.zen .zdr-tab {
    padding: 6px 12px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dl-muted);
    border-bottom: 2px solid transparent;
}

.zen .zdr-tab:hover {
    color: var(--dl-ink);
}

.zen .zdr-tab.on {
    color: var(--zen-ink);
    border-bottom-color: var(--zen-accent);
}

.zen .zd-b {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--dl-page);
}

.zen .zd-f {
    flex: none;
    padding: 8px 10px;
    border-top: 1px solid var(--dl-line-soft);
    background: var(--dl-surface);
}

.zen .zd-f .ctx {
    font-size: 10px;
    color: var(--dl-muted);
    margin-bottom: 5px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.zen .zd-f .ctx b {
    color: var(--zen-ink);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── buttons (the mock's .dl-btn) ───────────────────────────────────────── */
.zen .z-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 13px;
    border-radius: 999px;
    background: var(--dl-cta);
    color: #fff;
    font-weight: 600;
    font-size: 11.5px;
    white-space: nowrap;
    border: 1px solid transparent;
    font-family: inherit;
    cursor: pointer;
}

.zen .z-btn:hover {
    filter: brightness(1.08);
}

.zen .z-btn.ghost {
    background: transparent;
    color: var(--dl-body);
    border-color: var(--dl-line);
}

.zen .z-btn.ghost:hover {
    background: var(--dl-surface2);
    filter: none;
}

/* ── the brief document ─────────────────────────────────────────────────── */
.zen .z-doc {
    background: var(--dl-surface);
    border: 1px solid var(--dl-line);
    border-radius: 12px;
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zen .z-doc.rise {
    animation: zen-rise .32s ease-out both;
}

.zen .z-doc .kick {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--dl-muted);
}

.zen .z-doc .kick b {
    color: var(--zen-ink);
    font-weight: 800;
    letter-spacing: .01em;
}

.zen .z-lede {
    font-size: 14px;
    font-weight: 700;
    color: var(--dl-ink);
    line-height: 1.35;
    letter-spacing: -.005em;
}

.zen .z-sec h5 {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--zen-ink);
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0 0 5px;
}

.zen .z-sec h5 .cnt {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--dl-muted);
    font-size: 10.5px;
}

.zen .z-li {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--dl-line);
    font-size: 12px;
    line-height: 1.45;
    color: var(--dl-ink);
    align-items: flex-start;
}

.zen .z-li:last-child {
    border-bottom: none;
}

.zen .z-li .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zen-accent);
    flex: none;
    margin-top: 6px;
}

.zen .z-prov {
    font-size: 10.5px;
    color: var(--dl-muted);
    background: var(--dl-surface2);
    border-radius: 8px;
    padding: 8px 10px;
    line-height: 1.6;
    display: flex;
    gap: 8px;
}

.zen .z-prov .zi {
    margin-top: 2px;
}

.zen .z-prov b {
    color: var(--dl-body);
}

/* ── run steps ──────────────────────────────────────────────────────────── */
.zen .z-run {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.zen .z-step {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 11.5px;
    color: var(--dl-ink);
    line-height: 1.4;
}

.zen .z-step .tk {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--dl-okbg);
    color: var(--dl-ok);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-top: 1px;
}

.zen .z-step .tk svg {
    width: 10px;
    height: 10px;
}

.zen .z-step .tm {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--dl-muted);
    white-space: nowrap;
}

.zen .z-step .s {
    color: var(--dl-muted);
}

.zen .z-step .tk.spin {
    background: transparent;
    border: 2px solid rgba(42, 170, 225, .25);
    border-top-color: var(--zen-accent);
    animation: zen-spin .9s linear infinite;
}

.zen .z-step .tk.wait {
    background: transparent;
    border: 2px solid var(--dl-line);
}

.zen .z-step.wait {
    opacity: .7;
}

/* ── notes ──────────────────────────────────────────────────────────────── */
.zen .z-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11.5px;
    line-height: 1.45;
    background: var(--z-glow);
    border: 1px solid var(--z-line);
    color: var(--zen-ink);
}

.zen .z-note .zi {
    margin-top: 1px;
}

.zen .z-note.ok {
    background: var(--dl-okbg);
    border-color: rgba(47, 133, 90, .3);
    color: var(--dl-ok);
}

.zen .z-note.warn {
    background: var(--dl-warnbg);
    border-color: rgba(183, 121, 31, .35);
    color: var(--dl-warn);
}

.zen .z-note.bad {
    background: var(--dl-badbg);
    border-color: rgba(197, 48, 48, .3);
    color: var(--dl-bad);
}

.zen .z-note b {
    font-weight: 700;
}

.zen .z-note .body {
    color: var(--dl-body);
}

/* ── chat ───────────────────────────────────────────────────────────────── */
.zen .z-pin {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid var(--z-line);
    background: var(--z-glow);
    font-size: 11px;
    color: var(--dl-ink);
    text-align: left;
    width: 100%;
}

.zen .z-pin .t {
    font-weight: 700;
}

.zen .z-pin .s {
    color: var(--dl-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.zen .z-me {
    align-self: flex-end;
    max-width: 82%;
    background: rgba(16, 113, 185, .12);
    color: var(--dl-ink);
    border-radius: 12px 12px 3px 12px;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.zen .z-ai {
    background: var(--dl-surface);
    border: 1px solid var(--dl-line);
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 12px;
    color: var(--dl-ink);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.zen .z-ai .sig {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--zen-ink);
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 4px;
}

.zen .z-ai .z-txt {
    white-space: pre-wrap;
}

/* ── ask bar ────────────────────────────────────────────────────────────── */
.zen .z-ask {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--dl-line);
    border-radius: 10px;
    padding: 6px 6px 6px 10px;
    background: var(--dl-page);
    color: var(--dl-muted);
    font-size: 12px;
    margin: 0;
}

.zen .z-ask.typing {
    color: var(--dl-ink);
    border-color: #1071B9;
}

.zen .z-ask.quiet {
    background: var(--dl-surface2);
}

.zen .z-ask .z-in {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0;
    color: var(--dl-ink);
    font-size: 12px;
}

.zen .z-ask .z-in::placeholder {
    color: var(--dl-muted);
}

.zen .z-ask:focus-within {
    border-color: #1071B9;
    box-shadow: 0 0 0 3px rgba(16, 113, 185, .15);
}

.zen .z-ask .snd {
    margin-left: auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1071B9;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.zen .z-ask .snd:disabled {
    opacity: .6;
    cursor: default;
}

.zen .z-ask .snd.stop {
    background: var(--dl-surface2);
    color: var(--dl-ink);
    border: 1px solid var(--dl-line);
}

.zen .z-ask :focus-visible {
    outline: none;
}

.zen .z-ask .snd:focus-visible {
    outline: 2px solid var(--zen-accent);
    outline-offset: 2px;
}

/* ── beta additions: caret, meta, actions, empty state, support details ─── */
.zen .bx-caret {
    display: inline-block;
    width: 6px;
    height: 12px;
    background: var(--zen-accent);
    vertical-align: -2px;
    margin-left: 2px;
    animation: zen-blink 1s steps(1) infinite;
}

.zen .bx-meta {
    font-size: 10.5px;
    color: var(--dl-muted);
    line-height: 1.5;
}

.zen .bx-acts {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.zen .bx-ro {
    font-size: 10px;
    color: var(--dl-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.zen .bx-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 12px 8px;
}

.zen .bx-empty .big {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--dl-surface2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dl-muted);
}

.zen .bx-empty .big.zen-tint {
    background: var(--z-glow);
    color: var(--zen-accent);
}

.zen .bx-empty .h {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dl-ink);
}

.zen .bx-empty .s {
    font-size: 11.5px;
    color: var(--dl-body);
    line-height: 1.5;
    max-width: 240px;
}

.zen .bx-sup {
    font-size: 10px;
    color: var(--dl-muted);
    border-top: 1px dashed var(--dl-line);
    padding-top: 7px;
    width: 100%;
    text-align: left;
}

.zen .bx-sup summary {
    cursor: pointer;
}

/* ── motion ─────────────────────────────────────────────────────────────── */
@keyframes zen-spin {
    to { transform: rotate(360deg); }
}

@keyframes zen-blink {
    50% { opacity: 0; }
}

@keyframes zen-slide {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes zen-rise {
    from { transform: translateY(6px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .zen .bp-spin,
    .zen .z-step .tk.spin,
    .zen .bx-caret {
        animation: none;
    }

    .zen.zdr,
    .zen .z-doc.rise {
        animation: none;
    }
}

/* ── acceptance fixes, 20 Oct 2026 ──────────────────────────────────────── */

/* B1: the answer's time and its source chip (ZenCitationChip, C09), as in the mock. */
.zen .z-ai .sig .when {
    font-weight: 500;
    color: var(--dl-muted);
}

.zen .z-ai .cites {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 7px;
}

.zen .z-cite {
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 9.5px;
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid var(--dl-line);
    color: var(--dl-body);
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* B1: before the first word, say what is happening instead of an empty card. */
.zen .z-ai .z-think {
    color: var(--dl-muted);
}

/* B2(b): the empty and failure states sit near the top of the drawer, as in the mock. */
.zen.zdr .bx-empty {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding-top: 28px;
}

/* Dark mode: Daitalens' global dark rule for text inputs (dl-effects.css) paints a raised grey box
   and a focus ring inside the ask field. The field itself carries the look; the input stays clear. */
[data-theme="dark"] .zen .z-ask .z-in,
[data-theme="dark"] .zen .z-ask .z-in:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--dl-ink) !important;
}

/* ── scheduled briefs (DL-3639) ─────────────────────────────────────────────
   Lifted from tomo/mocks/ZenAI-Brief-Pitch_Ro.html (A1/A2/A3/B1): the .zn card, the .zv pill row
   (on buttons here, not the mock's <b>), and the .bp-* list / form / read pieces. The mock's --z-*
   tokens map onto this file's --dl-* ones, so dark mode follows the token block above. */
.zen .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* launcher: the unread badge */
.zen.z-launch .z-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--zen-accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .02em;
    margin-left: 2px;
}

/* list */
.zen .bp-tabhd {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.zen .bp-tabhd .h {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--dl-ink);
}

.zen .bp-tabhd .c {
    font-size: 11px;
    font-weight: 700;
    background: var(--dl-surface2);
    color: var(--dl-body);
    border-radius: 9px;
    padding: 1px 7px;
}

.zen .bp-newbtn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--z-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

[data-theme="dark"] .zen .bp-newbtn,
[data-theme="dark"] .zen .bp-primary,
[data-theme="dark"] .zen .zv button.bp-askpill {
    background: var(--dl-cta);
    border-color: var(--dl-cta);
}

.zen .zn {
    background: var(--dl-surface);
    border: 1px solid var(--dl-line);
    border-radius: 10px;
    padding: 12px 14px 10px;
    margin-bottom: 7px;
    position: relative;
}

[data-theme="dark"] .zen .zn {
    background: var(--dl-surface2);
}

.zen .zn.bp-fresh {
    box-shadow: 0 0 0 3px rgba(42, 170, 225, .30);
    border-color: var(--zen-accent);
}

.zen .zn-sig {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--zen-ink);
    letter-spacing: .01em;
    margin-bottom: 6px;
}

.zen .zn-head {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.28;
    color: var(--dl-ink);
    letter-spacing: -.005em;
    margin-bottom: 9px;
}

.zen .zn .bp-fear {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zen .bp-qlabel {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--dl-muted);
    margin-bottom: 5px;
    white-space: nowrap;   /* "You asked:" stays on one line at phone width; only the question wraps */
}

.zen .bp-qlabel s {
    white-space: normal;
    min-width: 0;
    text-decoration: none;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11.5px;
    color: var(--zen-ink);
}

.zen .bp-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--zen-accent);
    align-self: center;
}

/* the pill row: flat, wrapping, one outline per button */
.zen .zv.bp-flat {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.zen .zv.bp-flat button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--dl-line);
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dl-body);
    cursor: pointer;
}

.zen .zv.bp-flat button.on {
    background: rgba(42, 170, 225, .12);
    border-color: var(--zen-accent);
    color: var(--zen-ink);
}

.zen .zv.bp-flat button.bp-danger {
    color: var(--dl-bad);
}

.zen .zv.bp-flat button.bp-askpill {
    background: var(--z-primary);
    border-color: var(--z-primary);
    color: #fff;
}

/* "Brief me now": an off-schedule run. Outlined in the ZenAI accent so it reads as a ZenAI action,
   quieter than Open. While it runs: a small spinner and one honest line under the headline. */
.zen .zv.bp-flat button.bp-now {
    border-color: var(--zen-accent);
    color: var(--zen-ink);
}

.zen .zv.bp-flat button.bp-now[aria-busy="true"] {
    background: rgba(42, 170, 225, .12);
}

.zen .bp-spin {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid rgba(42, 170, 225, .25);
    border-top-color: var(--zen-accent);
    animation: zen-spin .9s linear infinite;
}

.zen .bp-nowline {
    font-size: 12px;
    color: var(--dl-muted);
    margin: 4px 0 8px;
}

.zen .zn .z-note {
    margin: 6px 0 8px;
}

.zen .zv.bp-flat button:disabled {
    opacity: .5;
    cursor: default;
}

/* read / form navigation */
.zen .bp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: var(--z-primary);
    cursor: pointer;
    margin-bottom: 8px;
}

.zen .bp-createhd {
    font-size: 15px;
    font-weight: 800;
    color: var(--dl-ink);
    margin-bottom: 10px;
}

/* the New brief form */
.zen .bp-form {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.zen .bp-fl {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--dl-muted);
    margin-bottom: 5px;
}

.zen .bp-pinned {
    border: 1px solid rgba(42, 170, 225, .35);
    background: rgba(42, 170, 225, .07);
    border-radius: 10px;
    padding: 9px 11px;
}

.zen .bp-pinned .lb {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--zen-ink);
    margin-bottom: 6px;
}

.zen .bp-ctxline {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dl-ink);
    line-height: 1.35;
}

.zen .bp-ctxsub {
    font-size: 11px;
    color: var(--dl-muted);
    margin-top: 2px;
}

.zen .bp-ta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 72px;
    resize: vertical;
    padding: 9px 11px;
    border: 1px solid var(--dl-line);
    border-radius: 8px;
    background: var(--dl-surface);
    color: var(--dl-ink);
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 8px;
}

.zen .bp-ta:focus {
    outline: none;
    border-color: var(--zen-accent);
    box-shadow: 0 0 0 3px var(--z-glow);
}

[data-theme="dark"] .zen .bp-ta,
[data-theme="dark"] .zen .bp-ta:focus {
    background: var(--dl-page);
    color: var(--dl-ink);
}

.zen .bp-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(42, 170, 225, .10);
    border: 1px solid rgba(42, 170, 225, .30);
    color: var(--zen-ink);
    font-size: 12.5px;
    line-height: 1.45;
}

.zen .bp-preview .zi,
.zen .bp-perm .zi {
    flex: none;
}

.zen .bp-perm {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    background: rgba(42, 170, 225, .08);
    border: 1px solid rgba(42, 170, 225, .30);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--zen-ink);
    line-height: 1.5;
}

.zen .bp-fear {
    font-size: 12px;
    color: var(--dl-muted);
    line-height: 1.5;
}

.zen .bp-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.zen .bp-primary {
    background: var(--z-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 18px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.zen .bp-primary.off,
.zen .bp-primary:disabled {
    opacity: .45;
    cursor: default;
}

.zen .bp-ghost {
    background: transparent;
    color: var(--dl-body);
    border: 1px solid var(--dl-line);
    border-radius: 8px;
    padding: 11px 18px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}