/* Brand direction D "Open Air" (flop-j6u). Colours, spacing, radii and type come from design/tokens.css (pinned
   from the wallet repo). Only roles here, never hex: light by default, dark with <html data-theme="dark">.
     you            your own messages (bubble)          primary   main buttons, selected controls
     accent         things you tap to check: links, receipts, certificate links, the verified tick
     ask            something needs your yes: approvals, memory suggestions, a spend waiting
     ok/warn/error  results of checks; scrim behind overlays */
:root {
  --radius: var(--radius-card);
  /* Brand type (flop-dka): Figtree for text, Geist Mono for code, keys and hashes; both bundled in design/fonts. */
  --mono: var(--font-family-mono);
  font: var(--font-body)/1.5 var(--font-family-text);
}
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; display: grid; grid-template-columns: 264px 1fr; background: var(--bg); color: var(--text); }
a { color: var(--accent); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- buttons: pills. Neutral by default; primary for the main action; danger for forget/deny ---- */
.btn { background: var(--panel); color: var(--text); border: 0; border-radius: var(--radius-button); padding: 8px 16px; font-size: var(--font-footnote); font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--line); }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.primary:hover { opacity: .9; }
.btn.danger { color: var(--error); }
.btn.small { padding: 5px 12px; font-size: var(--font-caption); }
.btn:disabled { opacity: .45; cursor: default; }
.small { font-size: var(--font-caption); } .muted { color: var(--dim); } .warn { color: var(--warn); }
.error { color: var(--error); font-size: var(--font-caption); min-height: 0; } .error:empty { display: none; }
.err { color: var(--error); }

/* ---- sidebar ---- */
.sidebar { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: var(--space-lg); gap: var(--space-md); min-height: 0; }
.brand { display: flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: .02em; font-size: var(--font-title); }
.brand-mark { flex: none; }
.new-chat { background: var(--primary); color: var(--on-primary); border: 0; border-radius: var(--radius-button); padding: 11px; font-weight: 600; cursor: pointer; }
.new-chat:hover { opacity: .9; }
nav { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
nav a { color: var(--dim); text-decoration: none; padding: 8px 12px; border-radius: var(--radius-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--font-footnote); }
nav a:hover, nav a.active { background: var(--bg); color: var(--text); }
.account { font-size: var(--font-caption); color: var(--dim); border-top: 1px solid var(--line); padding-top: 10px; line-height: 1.6; }
.account b { color: var(--text); font-weight: 600; }
/* Paying for replies (read-only; set up on the phone). */
.payments { font-size: var(--font-caption); color: var(--text); border-top: 1px solid var(--line); padding-top: 10px; line-height: 1.6; display: flex; flex-direction: column; gap: 2px; }
.payments .payments-title { font-weight: 600; }
.payments .muted { color: var(--dim); }
.payments.expired, .payments.tooBroad, .payments.usedUp, .payments.needsFees { color: var(--warn); }
.chips .paid { color: var(--dim); }
.gov-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-btn { text-align: left; background: var(--bg); color: var(--text); border: 1px solid transparent; padding: 10px 12px; border-radius: var(--radius-md); font-size: var(--font-footnote); cursor: pointer; }
.nav-btn:hover { border-color: var(--line); }
/* Approvals waiting for your OK */
.nav-btn.alert { background: var(--ask-soft); border-color: var(--ask); color: var(--ask-ink); font-weight: 600; }
.flag { font-size: 11px; color: var(--error); border: 1px solid var(--error); border-radius: var(--radius-pill); padding: 0 6px; margin-left: 4px; }

/* ---- chat column ---- */
.chat { display: grid; grid-template-rows: auto 1fr auto auto; min-height: 0; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding: 10px 20px; border-bottom: 1px solid var(--line); font-size: var(--font-footnote); color: var(--dim); }
.badge { border: 1px solid var(--line); color: var(--dim); border-radius: var(--radius-pill); padding: 2px 10px; font-size: var(--font-caption); }
.badge:empty { display: none; }
.badge.mock { border-color: var(--warn); color: var(--warn); }
.model-pick select { margin-left: 6px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 8px; font: inherit; }
.caps { font-size: var(--font-caption); }

/* Mode switch: Verifiable · FLOP / Capable · Claude */
.mode { display: inline-flex; background: var(--panel); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.mode button { background: transparent; color: var(--dim); border: 1px solid transparent; border-radius: var(--radius-pill); padding: 5px 16px; font-size: var(--font-footnote); font-weight: 600; cursor: pointer; }
.mode button:hover:not(:disabled) { color: var(--text); }
.mode button[aria-checked="true"] { background: var(--bg); border-color: var(--line); color: var(--text); }
.mode button:disabled { opacity: .45; cursor: not-allowed; }

.messages { overflow: auto; padding: 24px max(20px, calc((100% - 760px) / 2)); display: flex; flex-direction: column; gap: var(--space-xl); }
.empty { margin: auto; text-align: center; color: var(--dim); max-width: 420px; }
.empty h1 { color: var(--text); font-size: var(--font-display); margin-bottom: 6px; }

/* Chat priority: your messages are the bubbles; the agent's replies are plain text with one quiet line under them. */
.msg { display: flex; flex-direction: column; gap: 6px; }
.msg.user { align-items: flex-end; }
.bubble { white-space: pre-wrap; word-wrap: break-word; }
.msg.user .bubble { background: var(--you); color: var(--on-you); padding: 10px 16px; border-radius: var(--radius-card); max-width: 80%; }
.msg.assistant .bubble { white-space: normal; max-width: 85%; align-self: flex-start; background: var(--agent); color: var(--on-agent); padding: 10px 16px; border-radius: var(--radius-card); font-size: calc(var(--font-body) + 1px); }
.msg.assistant:not(.pending) .bubble:empty { display: none; }
/* Replies: a safe markdown subset (web/markdown.js) */
.msg.assistant .bubble > :first-child { margin-top: 0; }
.msg.assistant .bubble > :last-child { margin-bottom: 0; }
.bubble p, .bubble ul, .bubble ol, .bubble pre { margin: 0 0 8px; }
.bubble ul, .bubble ol { padding-left: 20px; }
.bubble code { font-family: var(--mono); font-size: 0.9em; background: var(--panel); border-radius: 4px; padding: 0 3px; }
.bubble pre { white-space: pre-wrap; background: var(--panel); border-radius: var(--radius-md); padding: 10px 12px; }
.bubble pre code { background: none; padding: 0; }
.bubble a { color: var(--accent); }
.bubble sup.cite a { text-decoration: none; font-size: 0.8em; }
.msg.assistant.pending .bubble:empty::after { content: "…"; color: var(--dim); }
.msg.error .bubble { color: var(--dim); }

/* Reply metadata: one quiet line in --dim, no fills or borders. */
.meta { font-size: var(--font-caption); color: var(--dim); display: flex; flex-direction: column; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.chips > * { white-space: nowrap; }
/* Items read "a · b · c" like the apps; the dot trails its item so a wrapped line never starts with one. */
.chips > :not(:last-child)::after { content: "·"; content: "·" / ""; margin-left: 8px; color: var(--dim); }
.chips span.err { color: var(--error); }
.chips .label { cursor: help; }
/* FLOP's verifiable / private labels carry the verified tick. */
.chips .label.flopVerifiable::before, .chips .label.flopDirect::before, .chips .label.flopPrivate::before { content: "✓"; content: "✓" / ""; color: var(--accent); font-weight: 700; margin-right: 4px; }
/* Receipt: tap to check, so it's accent. */
.receipt-chip { font-size: var(--font-caption); font-weight: 600; border: 0; background: none; color: var(--accent); padding: 0; cursor: pointer; }
.receipt-chip::after { content: " ↗"; content: " ↗" / ""; }
.receipt-chip:hover { text-decoration: underline; }
.receipt-chip:disabled { opacity: .6; cursor: default; }

/* ---- receipt (flop-74w.1.3) and certificate checks ---- */
.receipt { padding: 12px 14px; background: var(--panel); border-radius: var(--radius-md); font-size: var(--font-footnote); color: var(--text); max-width: 640px; }
.receipt-head { font-weight: 700; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.receipt-head::before { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; flex: none; }
.receipt-head.verified::before { content: "✓"; content: "✓" / ""; background: var(--ok); color: var(--on-ok); }
.receipt-head.partial::before { content: "!"; content: "!" / ""; border: 1.5px solid var(--warn); color: var(--warn); }
.receipt-head.failed::before { content: "✕"; content: "✕" / ""; border: 1.5px solid var(--error); color: var(--error); }
.checks { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; line-height: 1.4; }
.checks .icon { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; font-size: 10px; font-weight: 700; border: 1.5px solid currentColor; }
.checks li.ok .icon { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.checks li.warn .icon { color: var(--warn); }
.checks li.fail .icon { color: var(--error); }
.checks li.pending .icon, .checks li.info .icon { color: var(--dim); }
.receipt .links { margin: 6px 0; }
.receipt .links a, .receipt a { color: var(--accent); text-decoration: none; font-weight: 600; }
.receipt .links a:hover { text-decoration: underline; }
.receipt details summary { cursor: pointer; color: var(--dim); }
.receipt pre { white-space: pre-wrap; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; overflow: auto; font: 11px/1.4 var(--mono); }

/* Status line: errors in --error; a spend waiting for your OK in the ask colours. */
.status { text-align: center; font-size: var(--font-footnote); color: var(--error); padding: 6px 12px; margin: 0 max(20px, calc((100% - 760px) / 2)); }
.status.ask { background: var(--ask-soft); color: var(--ask-ink); border: 1px solid var(--ask); border-radius: var(--radius-md); }

.composer { display: flex; gap: 10px; align-items: flex-end; padding: 14px max(20px, calc((100% - 760px) / 2)) 20px; }
.composer textarea { flex: 1; resize: none; max-height: 200px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 11px 16px; font: inherit; }
.composer textarea::placeholder { color: var(--dim); }
.composer textarea:focus { outline: none; border-color: var(--dim); }
.composer button { background: var(--primary); color: var(--on-primary); font-weight: 600; border: 0; border-radius: var(--radius-button); min-height: var(--size-button); padding: 0 20px; cursor: pointer; }
.composer button:disabled { opacity: .4; cursor: default; }

@media (max-width: 720px) { body { grid-template-columns: 1fr; } .sidebar { display: none; } }

/* ---- side panel: approvals, activity, rules, memory ---- */
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--bg); border-left: 1px solid var(--line); display: flex; flex-direction: column; z-index: 5; }
.panel[hidden] { display: none; }
/* Narrow screens: the panel covers the chat, over a scrim. */
@media (max-width: 1099px) { body.panel-open::after { content: ""; position: fixed; inset: 0; background: var(--scrim); z-index: 4; } }
@media (min-width: 1100px) { body.panel-open .chat { margin-right: min(420px, 100vw); } }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.tabs { display: inline-flex; background: var(--panel); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.tabs button { background: transparent; border: 1px solid transparent; color: var(--dim); font-size: var(--font-footnote); padding: 5px 12px; border-radius: var(--radius-pill); cursor: pointer; }
.tabs button.active { background: var(--bg); border-color: var(--line); color: var(--text); font-weight: 600; }
.panel-body { padding: var(--space-lg); overflow: auto; display: flex; flex-direction: column; gap: var(--space-md); }
.panel h3 { font-size: var(--font-footnote); margin: 8px 0 0; }

/* Something needs your yes: ask border, soft fill, ask ink; the main answer is a primary button inside. */
.approval { background: var(--ask-soft); border: 1px solid var(--ask); border-radius: var(--radius-card); padding: var(--space-lg); display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.approval .small, .approval .muted { color: var(--ask-ink); }
.approval.strong { border-width: 2px; }
.approval .warn { color: var(--warn); font-weight: 600; }
.choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.approval .btn:not(.primary), .mem-card .btn:not(.primary), .a2-approval .btn:not(.primary) { background: var(--bg); }

.acts { display: flex; flex-direction: column; } .act { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--font-footnote); }
.act.denied span, .act.blocked span, .act.failed span { color: var(--error); } .act.expired span { color: var(--warn); }
.budget { font-size: var(--font-caption); }
.budget .bar { height: var(--size-step-bar); background: var(--panel); border-radius: var(--radius-pill); overflow: hidden; margin-top: 6px; }
.budget .fill { height: 100%; background: var(--primary); } .budget .fill.warn { background: var(--warn); } .budget .fill.bad { background: var(--error); }
.field { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-caption); color: var(--dim); }
.field input, .mem-input { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 10px; font: inherit; }
.field input:focus, .mem-input:focus { outline: none; border-color: var(--dim); }
.rules-freeze { background: var(--panel); border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rules-freeze p { margin: 0; }

/* ---- pool and search-first (A5 / P3, contract 2.3) ---- */
.pool { font-size: var(--font-caption); color: var(--dim); }
.pool.flopPoolFull { color: var(--warn); }
.search-first { font-size: var(--font-caption); color: var(--dim); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.search-first[hidden] { display: none; }
.search-first input { accent-color: var(--primary); margin: 0; }
/* "Use Sonnet" (contract 2.9): the same switch for Claude chats; its line warns once this month's replies are used up. */
.pool.usedUp { color: var(--warn); }
/* Open chats (contract 2.10): what choosing Open means, and the replies left today, on their own row. */
.open-info { flex-basis: 100%; font-size: var(--font-caption); color: var(--dim); }
.open-info[hidden] { display: none; }

/* ---- memory (A3) ---- */
/* A suggestion waits for your yes (ask); once saved it goes quiet (panel). */
.mem-card { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin: 0 0 4px; padding: var(--space-md) var(--space-lg); background: var(--ask-soft); border: 1px solid var(--ask); border-radius: var(--radius-card); font-size: var(--font-footnote); color: var(--text); max-width: 640px; }
.mem-card > .muted { color: var(--ask-ink); font-weight: 600; flex-basis: 100%; }
.mem-card.saved { background: var(--panel); border-color: transparent; color: var(--dim); }
.mem-card.saved > .muted { color: var(--dim); font-weight: 400; flex-basis: auto; }
.mem { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-card); display: flex; flex-direction: column; gap: 6px; }
.mem.proposed { background: var(--ask-soft); border-color: var(--ask); }
.mem.proposed .muted { color: var(--ask-ink); }
.mem .choices { margin-top: 0; }
.mem-add { display: flex; gap: var(--space-sm); }
.mem-input { flex: 1; }

/* ---- agent UI cards (A2UI, flop-74w.18): drawn by cards.js with the app's own widgets and roles ---- */
.cards { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 640px; }
.a2-card { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; padding: var(--space-md) var(--space-lg); background: var(--panel); border: 1px solid transparent; border-radius: var(--radius-card); font-size: var(--font-footnote); }
.a2-col { display: flex; flex-direction: column; gap: var(--space-xs); }
.a2-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.a2-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; }
.a2-text { margin: 0; }
.a2-text.caption { font-size: var(--font-caption); color: var(--dim); }
.a2-text.title { font-size: var(--font-body); }
.a2-field { display: flex; gap: var(--space-sm); align-items: baseline; }
.a2-choice { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.a2-option { background: var(--bg); border-radius: var(--radius-pill); padding: 2px 10px; font-size: var(--font-caption); }
.a2-option.chosen { background: var(--primary); color: var(--on-primary); }
.a2-cost { font-size: var(--font-caption); color: var(--dim); }
/* FLOP's pool is full: a quiet panel card with the main action. */
.a2-avail > span:first-child { flex-basis: 100%; }
/* Certificate: the level as a mark; "View" is tap-to-check, so accent. */
.a2-cert .a2-cert-level::before { margin-right: 4px; }
.a2-cert.verified .a2-cert-level::before { content: "✓"; content: "✓" / ""; color: var(--accent); }
.a2-cert.partial .a2-cert-level, .a2-cert.pending .a2-cert-level { color: var(--warn); }
.a2-cert.failed .a2-cert-level { color: var(--error); }
.a2-cert .btn { background: none; color: var(--accent); padding: 0; }
.a2-cert .btn::after { content: " ↗"; content: " ↗" / ""; }
.a2-cert .btn:hover { text-decoration: underline; }
.a2-approval { background: var(--ask-soft); border-color: var(--ask); }
.a2-approval > .muted { color: var(--ask-ink); font-weight: 600; flex-basis: 100%; }
.a2-sources { flex-direction: column; align-items: flex-start; }
.a2-sources a { color: var(--accent); text-decoration: none; }
.a2-sources a:hover { text-decoration: underline; }
.a2-fallback { margin: 0; color: var(--dim); }
.cards .mem-card { margin: 0; }