/* ─────────────────────────────────────────────────────────────
   figAIro — gold & ink theme (v0.1 · 2026-07-06 · Claude+OEB)

   Overrides the legacy indigo palette with the gold-and-ink system by
   redefining the CSS custom properties. Loads AFTER style.css so its
   :root wins — this reskins every component that uses the variables.

   Palette: paper · iron-gall ink · Seville orange (the ONE accent) ·
   gilt (drafts, "not yet real") · verdigris (done).
   Serif speaks (figAIro's voice), sans works (humans + UI).
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&display=swap');

:root {
    /* surfaces */
    --bg:            #FAF7F2;   /* paper */
    --bg-surface:    #FFFDF9;   /* warm white card */
    --bg-input:      #F2ECE1;   /* parchment field */
    /* the one accent + meaning colours */
    --accent:        #E8621C;   /* Seville orange — figAIro's mark */
    --accent-soft:   #C9A227;   /* gilt */
    --accent-glow:   #E4C97A;   /* soft gilt (no glow) */
    --gilt:          #C9A227;   /* proposed / not yet real */
    --seville:       #E8621C;
    --verdigris:     #3E7C6B;   /* committed / done */
    /* ink + text */
    --text:          #1E242B;   /* iron-gall */
    --text-muted:    #6B6459;   /* warm gray */
    --text-secondary:#6B6459;
    /* structure */
    --border:        #D8D2C6;   /* parchment line */
    --success:       #3E7C6B;   /* verdigris */
    --danger:        #B5462B;   /* warm terracotta */
    /* voice */
    --font-voice:    'Fraunces', Georgia, 'Times New Roman', serif;
    /* flat — no gloss, no glow */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
}

body { background: var(--bg); color: var(--text); }

/* figAIro is set in serif; only ever set, never drawn. */
.fig-voice { font-family: var(--font-voice); font-style: italic; }

/* ── Gilt proposal card — the Countersign hero ─────────────────── */
.gilt-card {
    background: var(--bg-surface);
    border: 1.5px dashed var(--gilt);
    border-radius: 12px;
    transition: border-color 300ms ease, transform 300ms ease;
    transform: translateY(-1px);
}
.gilt-card.signed { border: 1.5px solid var(--text); transform: translateY(0); }
.gilt-card.set-aside { opacity: 0.5; }

.gilt-label { font-size: 11px; letter-spacing: 0.02em; color: var(--gilt); }
.gilt-card.signed .gilt-label { color: var(--verdigris); }

/* the proposal text: gold draft with an ink overlay that sweeps in on sign */
.prop-voice { position: relative; font-family: var(--font-voice); font-style: italic;
              font-size: 15px; line-height: 1.6; }
.prop-voice-gilt { color: var(--gilt); }
.prop-voice-ink  { position: absolute; inset: 0; color: var(--text);
                   clip-path: inset(0 100% 0 0); transition: clip-path 900ms ease-out; }
.gilt-card.signed .prop-voice-ink { clip-path: inset(0 0 0 0); }

/* ── Buttons: Countersign / Edit / Set aside (never red-X/green-✓) ── */
.ink-btn { font-family: inherit; font-size: 13px; padding: 6px 14px; border-radius: 8px;
           border: 0.5px solid var(--border); background: transparent; color: var(--text);
           cursor: pointer; transition: background 200ms, border-color 200ms, transform 120ms;
           display: inline-flex; align-items: center; gap: 6px; }
.ink-btn:hover  { background: #F2ECE1; border-color: #B7A986; }
.ink-btn:active { transform: scale(0.98); }
.ink-btn:disabled { opacity: 0.5; cursor: default; }
.ink-btn-sign  { border-color: var(--text); }
.ink-btn-aside { color: var(--text-muted); }

.signed-stamp { display: inline-flex; align-items: center; gap: 6px;
                font-size: 13px; color: var(--verdigris); }

/* ── Status chips + thread dots (shared vocabulary) ────────────── */
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot-human { background: var(--text); }
.dot-figairo { background: var(--seville); }
.dot-done { background: var(--verdigris); }
.chip { font-size: 12px; padding: 1px 8px; border-radius: 20px; }
.chip-needs { background: #FBE9D9; color: #B5462B; }
.chip-done  { background: #E4EFE9; color: var(--verdigris); }

/* ── Brand: figAIro is set in serif (never drawn) ──────────────── */
.logo { font-family: var(--font-voice); font-style: italic; letter-spacing: -0.01em; }
.logo .accent, .accent { color: var(--seville); }

/* ── More vocabulary: record card (ink) · metric tile · list row ─ */
.ink-card { background: var(--bg-surface); border: 0.5px solid var(--border);
            border-radius: 12px; padding: 14px 16px; }
.metric-tile { background: var(--bg-input); border-radius: 10px; padding: 12px 14px; }
.metric-tile .metric-label { font-size: 12px; color: var(--text-muted); }
.metric-tile .metric-value { font-size: 24px; font-weight: 500; color: var(--text); }
.list-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
            border-bottom: 0.5px solid var(--border); }
.list-row:hover { background: var(--bg-input); }

/* ── Command palette — "ask the box" (⌘K) ──────────────────────── */
.cmdk-trigger { display: inline-flex; align-items: center; gap: 8px; height: 34px;
    padding: 0 12px; border: 0.5px solid var(--border); border-radius: 10px;
    background: var(--bg-surface); color: var(--text-muted); cursor: pointer;
    font-family: inherit; font-size: 13px; min-width: 240px; }
.cmdk-trigger:hover { border-color: #B7A986; }
.cmdk-trigger kbd { margin-left: auto; font-size: 11px; border: 0.5px solid var(--border);
    border-radius: 5px; padding: 1px 6px; color: var(--text-muted); background: transparent; }
.cmdk-overlay { position: fixed; inset: 0; background: rgba(30,36,43,0.32);
    display: none; align-items: flex-start; justify-content: center;
    padding-top: 12vh; z-index: 1000; }
.cmdk-overlay.open { display: flex; }
.cmdk-panel { width: 560px; max-width: 92vw; background: var(--bg-surface);
    border: 0.5px solid var(--border); border-radius: 14px; overflow: hidden; }
.cmdk-input { width: 100%; border: none; outline: none; background: transparent;
    padding: 16px 18px; font-family: inherit; font-size: 16px; color: var(--text);
    border-bottom: 0.5px solid var(--border); }
.cmdk-input::placeholder { color: var(--text-muted); }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: 8px; }
.cmdk-group { font-size: 11px; color: var(--text-muted); padding: 8px 10px 2px; }
.cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--text); }
.cmdk-item.active, .cmdk-item:hover { background: #F2ECE1; }
.cmdk-item .cmdk-hint { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.cmdk-ask { font-family: var(--font-voice); font-style: italic; color: var(--seville); }

/* ── Flatten the indigo-era gloss — gold-and-ink is flat + warm ── */
.home-card, .pp-card, .pp-kg-card, .compose-tile, .card, .contact-card { box-shadow: none; }
.home-card:hover, .pp-kg-card:hover, .compose-tile:hover, .contact-card:hover {
    box-shadow: none; border-color: var(--accent); }
/* focus rings: Seville, not indigo */
input:focus, textarea:focus, select:focus, .chat-input:focus, .modal-input:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,98,28,0.14); }
/* active tab: quiet ink underline, not a solid gilt fill */
.tab.active { background: transparent; color: var(--text);
    border-color: transparent; border-bottom: 2px solid var(--seville); }
/* neutral mood badge → warm, flat */
.badge.mood-neutral { background: var(--bg-input); color: var(--text-muted); }

/* ── Reach the HARDCODED legacy surfaces that variable-override can't ── */
/* Warm paper page background even where a body class hardcodes #FAFAFA */
body, body[class] { background: var(--bg); }
/* figAIro wordmark: kill the indigo gradient text-fill → solid Seville, serif */
.logo .accent, h1 .accent, .accent {
    background: none !important;
    background-image: none !important;
    -webkit-text-fill-color: var(--seville) !important;
    color: var(--seville) !important;
}
#app-header h1, .header-left h1, .sidebar-header .logo, .logo {
    font-family: var(--font-voice); font-style: italic; letter-spacing: -0.01em; }
/* app chrome surfaces → warm white + hairline */
#app-header, .app-topbar { background: var(--bg-surface); border-color: var(--border); }

/* dashboard header line-icons (Lucide) — quiet, warm */
.home-card-icon { width: 15px; height: 15px; vertical-align: -2px; margin-right: 7px;
    color: var(--text-muted); stroke-width: 2; }
/* paused status badge → gilt, not blue */
.home-status-paused { background: #F3EAD0 !important; color: #8A6D1A !important; }
/* routine status dots — verdigris (ran) / muted (idle), not emoji */
.home-routine-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.home-routine-dot-on  { background: var(--verdigris); }
.home-routine-dot-off { background: #C9C2B4; }

/* ── Channel — the gold-and-ink conversation thread ───────────── */
.timeline { position: relative; padding-left: 28px; max-width: 760px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px;
    width: 2px; background: var(--border); }
.timeline-item { position: relative; margin-bottom: 18px; }
.timeline-dot { position: absolute; left: -27px; top: 3px; width: 14px; height: 14px;
    border-radius: 50%; background: var(--text); border: 2px solid var(--bg); }
.timeline-dot-success { background: var(--verdigris); }  /* committed knowledge */
.timeline-dot-danger  { background: var(--danger); }
.timeline-dot-warn    { background: var(--seville); }    /* figAIro facilitation */
.timeline-time { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.timeline-content { background: var(--bg-surface); border: 0.5px solid var(--border);
    border-radius: 12px; padding: 12px 15px; }

/* Needs-you dashboard card — the lead, accented in Seville */
.home-card-needs { border: 1.5px solid var(--seville); }
/* "is" (reference/stat) cards sink below the "does" cards — organise around
   what the system does, not what it is. Slightly quieter, too. */
.home-card-stat { order: 5; }
.home-card-stat .home-card-header { color: var(--text-muted); }
/* quiet reference numbers — Seville stays reserved for what needs action */
.home-card-stat .home-stat-value { font-size: 19px; color: var(--text); }
.home-needs-row { display: flex; align-items: baseline; gap: 8px; }
.home-needs-count { font-size: 28px; font-weight: 500; color: var(--seville); }
.home-needs-label { font-size: 13px; color: var(--text-muted); }

/* The actual pending proposals, previewed in the card — drafts, so gilt-gold. */
.home-needs-item {
    display: flex; align-items: baseline; gap: 8px;
    margin-top: 8px; padding: 6px 10px;
    border-left: 2px solid var(--gilt);
    background: rgba(201, 162, 39, 0.05);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
}
.home-needs-item:first-of-type { margin-top: 12px; }
.home-needs-verb {
    color: var(--gilt); font-weight: 500; white-space: nowrap;
    font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase;
}
.home-needs-title {
    color: var(--text); flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The project ("where") yields space to the title ("what") and truncates. */
.home-needs-proj {
    color: var(--text-muted); font-size: 12px; flex: 0 1 auto;
    max-width: 38%; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-needs-conf { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.home-needs-more { margin-top: 8px; font-size: 12px; color: var(--seville); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════
   OPERATE SURFACE — the merged stream (UI refoundation 2026-07-06)
   The home is one timeline, not a grid of cards. Needs-you leads;
   proposals are gilt (draft) until countersigned → ink (fact).
   ═══════════════════════════════════════════════════════════════════ */
.op-surface{ max-width:720px; margin:0 auto; padding:26px 30px 90px; font-family:var(--font-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif); color:var(--text); }
.op-greeting h1{ font-family:var(--font-voice); font-weight:500; font-size:28px; letter-spacing:-.01em; margin:0 0 2px; }
.op-date{ color:var(--text-muted); font-size:13.5px; margin:0; }
.op-thought{ font-family:var(--font-voice); font-style:italic; color:var(--text-muted); font-size:15px; margin:10px 0 0; }
.op-eyebrow{ display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); font-weight:600; margin:26px 0 4px; }
.op-eyebrow .op-rule{ height:1px; background:var(--border); flex:1; }
.op-lead{ font-family:var(--font-voice); font-weight:500; font-size:23px; letter-spacing:-.01em; margin:2px 0 3px; }
.op-sub{ color:var(--text-muted); font-size:13.5px; line-height:1.5; margin:0 0 18px; }

/* lens chips */
.op-lenses{ display:flex; gap:7px; flex-wrap:wrap; margin:0 0 24px; }
.op-lens{ font:inherit; font-size:12.5px; padding:6px 13px; border-radius:99px; border:1px solid var(--border); background:var(--bg-surface); color:var(--text-muted); cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .15s; }
.op-lens:hover{ border-color:var(--gilt); color:var(--text); }
.op-lens.active{ background:var(--text); color:var(--bg); border-color:var(--text); }
.op-lens .op-n{ font-variant-numeric:tabular-nums; opacity:.7; }
.op-lens .op-dot{ width:6px; height:6px; border-radius:50%; }

/* the stream + spine */
.op-stream{ position:relative; padding-left:26px; }
.op-stream::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--border); }
.op-entry{ position:relative; margin-bottom:22px; }
.op-entry::before{ content:""; position:absolute; left:-24px; top:5px; width:11px; height:11px; border-radius:50%; background:var(--bg-surface); border:2px solid var(--text-muted); }
.op-entry.op-fig::before{ border-color:var(--seville); }
.op-entry.op-done::before{ border-color:var(--verdigris); background:var(--verdigris); }
.op-entry.op-draft::before{ border-color:var(--gilt); background:var(--gilt); }
.op-entry.op-fail::before{ border-color:var(--danger); background:var(--danger); }
.op-meta{ display:flex; align-items:baseline; gap:9px; margin-bottom:5px; flex-wrap:wrap; }
.op-who{ font-size:13px; font-weight:600; color:var(--text); }
.op-who.op-fig{ font-family:var(--font-voice); font-weight:500; font-size:15px; }
.op-when{ font-size:11.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.op-badge{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:5px; font-weight:600; }
.op-b-run{ background:rgba(62,124,107,.10); color:var(--verdigris); }
.op-b-live{ background:rgba(232,98,28,.10); color:var(--seville); }
.op-b-fail{ background:rgba(181,70,43,.10); color:var(--danger); }

/* record (committed fact) */
.op-record{ background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:13px 15px; }
.op-record-done{ border-left:2px solid var(--verdigris); }
.op-r-body{ font-size:13px; color:var(--text-muted); line-height:1.5; }

/* run card */
.op-run{ background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:12px 15px; }
.op-steps{ display:flex; gap:5px; }
.op-step{ flex:1; height:5px; border-radius:3px; background:var(--bg-input); }
.op-step.ok{ background:var(--verdigris); }
.op-step.now{ background:var(--seville); animation:opPulse 1.4s ease-in-out infinite; }
@keyframes opPulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

/* proposal (gilt draft) */
.op-proposal{ position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(201,162,39,.07),transparent 60%),var(--bg-surface); border:1px solid var(--gilt); border-radius:14px; padding:15px 17px; }
.op-gilt-eyebrow{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--gilt); font-weight:700; margin-bottom:6px; position:relative; z-index:2; }
.op-p-title{ font-family:var(--font-voice); font-weight:500; font-size:17px; line-height:1.3; color:var(--text); margin-bottom:5px; position:relative; z-index:2; }
.op-p-why{ font-size:13px; color:var(--text-muted); line-height:1.5; margin-bottom:13px; position:relative; z-index:2; }
.op-p-actions{ display:flex; gap:9px; align-items:center; position:relative; z-index:2; }
.op-btn{ font:inherit; font-size:13px; font-weight:600; padding:8px 14px; border-radius:9px; cursor:pointer; border:1px solid transparent; transition:all .15s; display:flex; align-items:center; gap:7px; }
.op-btn:disabled{ opacity:.6; cursor:default; }
.op-btn-sign{ background:var(--text); color:var(--bg); }
.op-btn-sign:hover:not(:disabled){ background:#000; }
.op-btn-sign .op-kbd{ font-size:11px; opacity:.7; border:1px solid rgba(255,255,255,.25); border-radius:5px; padding:1px 5px; }
.op-btn-aside{ background:transparent; color:var(--text-muted); border-color:var(--border); }
.op-btn-aside:hover:not(:disabled){ color:var(--text); border-color:var(--text-muted); }
.op-conf{ margin-left:auto; font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
/* the ink sweep — gold becomes fact */
.op-ink-sweep{ position:absolute; inset:0; background:var(--text); transform:scaleX(0); transform-origin:left; z-index:5; pointer-events:none; }
.op-signing .op-ink-sweep{ animation:opSweep .9s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes opSweep{ to{ transform:scaleX(1); } }
.op-signed{ border-color:var(--verdigris); background:rgba(62,124,107,.08); }
.op-signed .op-gilt-eyebrow{ color:var(--verdigris); }
.op-committed{ position:absolute; top:15px; right:17px; z-index:2; color:var(--verdigris); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:0; transition:opacity .3s .5s; }
.op-signed .op-committed{ opacity:1; }

.op-msg-note{ font-size:12.5px; color:var(--text-muted); font-style:italic; padding:10px 0 0; }
.op-empty{ color:var(--text-muted); font-size:13.5px; font-style:italic; }

/* quiet context (the "where", never the lead) */
.op-context{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px; padding-top:22px; border-top:1px solid var(--border); }
.op-ctx-h{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); font-weight:600; margin-bottom:9px; }
.op-ctx-row{ display:flex; align-items:center; gap:9px; padding:6px 0; cursor:pointer; }
.op-ctx-row:hover{ color:var(--seville); }
.op-cdot{ width:7px; height:7px; border-radius:50%; flex:none; }
.op-cname{ font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.op-cmeta{ font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Moved above the stream (2026-08-08): the separator belongs BELOW it now, and
   the big top margin was spacing it away from a feed that no longer precedes it.
   Still deliberately quiet — small caps, muted, no headline weight — so it
   orients without competing with the stream for the lead. */
.op-context-top{ margin-top:18px; padding-top:0; border-top:none;
                 padding-bottom:20px; border-bottom:1px solid var(--border); }
.op-ctx-more{ font-size:11px; color:var(--text-muted); cursor:pointer; padding-top:6px; }
.op-ctx-more:hover{ color:var(--seville); }
@media (max-width:640px){ .op-context{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .op-step.now,.op-signing .op-ink-sweep{ animation:none; } }

/* ═══════════════════════════════════════════════════════════════════
   THREE-SURFACE SHELL — Operate / You / Admin (UI refoundation 2026-07-06)
   Left rail is the primary navigation; the app becomes the Operate
   surface, with You (profile+Vault) and Admin (connectors) as siblings.
   ═══════════════════════════════════════════════════════════════════ */
.op-shell{ display:flex; height:100vh; }
.op-appcol{ flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.op-rail{ width:74px; flex:none; border-right:1px solid var(--border); background:var(--bg);
    display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 0; }
.op-brand{ font-family:var(--font-voice); font-style:italic; font-size:23px; line-height:1;
    margin-bottom:16px; cursor:pointer; color:var(--text); user-select:none; }
.op-brand span{ color:var(--seville); }
.op-surf{ width:58px; padding:8px 0; border:none; background:transparent; border-radius:12px;
    display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--text-muted);
    cursor:pointer; font-family:inherit; font-size:10px; letter-spacing:.02em; transition:background .15s,color .15s; }
.op-surf svg{ width:20px; height:20px; stroke-width:1.6; }
.op-surf:hover{ background:rgba(201,162,39,.10); color:var(--text); }
.op-surf.active{ color:var(--seville); background:rgba(232,98,28,.08); }
.op-rail-sp{ flex:1; }
.op-rail-av{ width:34px; height:34px; border-radius:50%; background:var(--text); color:var(--bg);
    border:none; font-family:var(--font-voice); font-style:italic; font-size:14px; cursor:pointer; }
.op-fullsurface{ flex:1; overflow-y:auto; }

/* You / Admin surface content (same page vocabulary as Operate) */
.op-page{ max-width:820px; margin:0 auto; padding:30px 34px 90px; color:var(--text); }
.op-page-eyebrow{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
.op-page h1{ font-family:var(--font-voice); font-weight:500; font-size:29px; letter-spacing:-.015em; margin:6px 0 3px; }
.op-page-sub{ color:var(--text-muted); font-size:13.5px; line-height:1.5; margin:0 0 24px; }
.op-cardp{ background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; padding:19px 21px; margin-bottom:15px; }
.op-cardp h3{ font-family:var(--font-voice); font-weight:500; font-size:17px; margin:0 0 3px; }
.op-cardp .op-cardp-sub{ color:var(--text-muted); font-size:12.5px; margin:0 0 15px; }
.op-kv{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--bg-input); font-size:14px; }
.op-kv:first-of-type{ border-top:none; }
.op-kv .op-k{ color:var(--text-muted); }
.op-kv .op-v{ font-weight:500; display:flex; align-items:center; gap:8px; text-align:right; }
.op-mask{ letter-spacing:.12em; color:var(--text-muted); }
.op-chip{ font-size:11px; padding:2px 9px; border-radius:99px; font-weight:600; white-space:nowrap; }
.op-chip.ok{ background:rgba(62,124,107,.12); color:var(--verdigris); }
.op-chip.warn{ background:rgba(232,98,28,.10); color:var(--seville); }
.op-chip.idle{ background:var(--bg-input); color:var(--text-muted); }
.op-conn{ display:flex; align-items:center; gap:13px; padding:13px 0; border-top:1px solid var(--bg-input); }
.op-conn:first-of-type{ border-top:none; }
.op-conn-ico{ width:36px; height:36px; border-radius:9px; background:var(--bg); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; flex:none; color:var(--text); font-family:var(--font-voice); font-style:italic; font-size:15px; }
.op-conn-main{ flex:1; min-width:0; }
.op-conn-name{ font-weight:600; font-size:14px; }
.op-conn-meta{ font-size:12px; color:var(--text-muted); }
.op-askbox{ background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px;
    display:flex; gap:11px; align-items:center; cursor:text; }
.op-askbox input{ border:none; outline:none; flex:1; background:transparent; font-family:var(--font-voice);
    font-style:italic; font-size:15px; color:var(--text); }
.op-askbox input::placeholder{ color:var(--text-muted); }

/* Project page in the shell — the column scrolls naturally (server-rendered) */
.op-appcol.pp{ display:block; overflow-y:auto; }
/* Fractal tab nav: the four shapes lead, then a divider, then PM detail */
.pp-tab-divider{ width:1px; align-self:stretch; margin:6px 10px; background:var(--border); }
.pp-fractal-eyebrow{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);
    font-weight:600; margin:2px 0 0; }
.pp-fractal-eyebrow b{ color:var(--seville); font-weight:600; }

/* Messages in the Operate stream + the composer (substrate wired 2026-07-07) */
.op-msg{ font-size:14px; line-height:1.5; color:var(--text); }
.op-msg-fig{ font-family:var(--font-voice); font-size:15px; }
.op-lane-priv{ font-size:11px; color:var(--gilt); font-weight:600; }
.op-promote{ margin-top:9px; display:flex; align-items:center; gap:11px; padding:8px 11px;
    border-left:2px solid var(--gilt); background:rgba(201,162,39,.06); border-radius:0 8px 8px 0; }
.op-btn-post{ background:var(--text); color:var(--bg); font-size:12px; padding:6px 12px; }
.op-btn-post:hover:not(:disabled){ background:#000; }
.op-promote-note{ font-size:11.5px; color:var(--text-muted); }
.op-composer{ display:flex; align-items:center; gap:12px; margin-top:20px;
    background:var(--bg-surface); border:1px solid var(--border); border-radius:13px; padding:7px 7px 7px 13px; }
.op-composer:focus-within{ border-color:var(--seville); box-shadow:0 0 0 3px rgba(232,98,28,.12); }
.op-composer-ctx{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
    color:var(--text-muted); white-space:nowrap; padding-right:11px; border-right:1px solid var(--border); }
.op-composer-ctx .op-cc-dot{ width:7px; height:7px; border-radius:50%; background:var(--text-muted); }
.op-composer-ctx.shared{ color:var(--seville); }
.op-composer-ctx.shared .op-cc-dot{ background:var(--seville); }
.op-composer input{ flex:1; border:none; outline:none; background:transparent; font-family:inherit;
    font-size:14px; color:var(--text); }
.op-composer input::placeholder{ color:var(--text-muted); }
.op-composer-send{ background:var(--text); color:var(--bg); border:none; border-radius:9px;
    padding:9px 16px; font-weight:600; font-size:13px; cursor:pointer; }
.op-composer-send:hover{ background:#000; }

/* Unified composer — channel chip + share-to-channel (left chatter, 2026-07-07) */
.chat-target{ display:inline-flex; align-items:center; font-size:11px; font-weight:600;
    color:var(--text-muted); background:var(--bg-input); border:1px solid var(--border);
    border-radius:8px; padding:4px 9px; white-space:nowrap; margin-right:6px; }
.chat-target.chat-target-channel{ color:var(--seville); border-color:var(--seville);
    background:rgba(232,98,28,.07); }
.msg-share{ display:inline-block; margin-left:10px; font-size:11px; font-weight:600;
    color:var(--text-muted); background:transparent; border:1px solid var(--border);
    border-radius:7px; padding:1px 8px; cursor:pointer; vertical-align:middle; }
.msg-share:hover:not(:disabled){ color:var(--seville); border-color:var(--seville); }
.msg-share:disabled{ color:var(--verdigris); border-color:var(--verdigris); cursor:default; }
.msg.msg-channel{ border-left:2px solid var(--seville); }
.msg.msg-channel::before{ content:attr(data-channel); display:block; font-size:10px;
    letter-spacing:.04em; text-transform:uppercase; font-weight:700; color:var(--seville);
    margin-bottom:2px; }

/* Chat bubbles → gold & ink (retire the legacy indigo). figAIro speaks in its
   serif voice; you speak in sans on warm parchment. (2026-07-07) */
#chat-messages .msg{ max-width:84%; font-size:14.5px; line-height:1.55; border-radius:12px; }
#chat-messages .msg.user{ background:var(--bg-input); color:var(--text);
    border-bottom-right-radius:3px; }
#chat-messages .msg.bot{ background:transparent; color:var(--text);
    font-family:var(--font-voice); font-size:15.5px; padding-left:2px; padding-right:2px; }
#chat-messages .msg.thinking{ background:transparent; color:var(--text-muted);
    font-family:var(--font-voice); font-style:italic; }
#chat-messages .msg.system{ color:var(--text-muted); }
/* a channel post reads as a broadcast — left-aligned, Seville-marked (badge already set) */
#chat-messages .msg.msg-channel{ align-self:flex-start; background:var(--bg-surface);
    color:var(--text); border-bottom-right-radius:12px; }

/* Active-context switcher — header pill + menu (2026-07-07) */
.ctx-switcher{ position:relative; margin-left:14px; }
.ctx-pill{ display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:12.5px;
    font-weight:600; color:var(--text); background:var(--bg-surface); border:1px solid var(--border);
    border-radius:9px; padding:5px 11px; cursor:pointer; }
.ctx-pill:hover{ border-color:var(--seville); }
.ctx-dot{ width:8px; height:8px; border-radius:50%; }
.ctx-dot-explore{ background:var(--gilt); }
.ctx-dot-proj{ background:var(--seville); }
.ctx-caret{ color:var(--text-muted); font-size:10px; }
.ctx-menu{ position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:230px;
    background:var(--bg-surface); border:1px solid var(--border); border-radius:11px;
    box-shadow:0 8px 28px rgba(30,36,43,.10); padding:6px; }
.ctx-item{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px;
    font-size:13.5px; color:var(--text); cursor:pointer; }
.ctx-item:hover{ background:var(--bg-input); }
.ctx-item .ctx-sub{ margin-left:auto; font-size:11px; color:var(--text-muted); }

/* Vault CRUD (You surface, 2026-07-07) */
.vault-del{ font-size:11px; font-weight:600; color:var(--text-muted); background:transparent;
    border:1px solid var(--border); border-radius:7px; padding:2px 9px; cursor:pointer; margin-left:4px; }
.vault-del:hover:not(:disabled){ color:var(--danger); border-color:var(--danger); }
.vault-del:disabled{ opacity:.5; cursor:default; }
.vault-add{ display:flex; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--bg-input); flex-wrap:wrap; }
.vault-add input{ flex:1; min-width:160px; border:1px solid var(--border); border-radius:9px;
    padding:8px 11px; font-family:inherit; font-size:13.5px; background:var(--bg); color:var(--text); outline:none; }
.vault-add input:focus{ border-color:var(--seville); box-shadow:0 0 0 3px rgba(232,98,28,.12); }
.vault-add button{ background:var(--text); color:var(--bg); border:none; border-radius:9px;
    padding:8px 15px; font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap; }
.vault-add button:hover{ background:#000; }
.vault-msg{ font-size:12.5px; color:var(--danger); margin-top:8px; min-height:1em; }

/* connector add-form selects reuse the vault-add field styling */
.vault-add select{ border:1px solid var(--border); border-radius:9px; padding:8px 10px;
    font-family:inherit; font-size:13.5px; background:var(--bg); color:var(--text); outline:none; cursor:pointer; }
.vault-add select:focus{ border-color:var(--seville); box-shadow:0 0 0 3px rgba(232,98,28,.12); }

/* inline "Replace" field for rotating a vault secret in place */
.vault-inline{ display:inline-flex; align-items:center; gap:6px; margin-left:6px; }
.vault-inline input{ border:1px solid var(--seville); border-radius:7px; padding:3px 8px;
    font-family:inherit; font-size:12.5px; background:var(--bg); color:var(--text); outline:none; width:150px; }

/* connector health: last-checked time + an error chip */
.op-conn-when{ font-size:11px; color:var(--text-muted); margin:0 6px; white-space:nowrap; }
.op-chip.err{ background:rgba(181,70,43,.12); color:var(--danger); }

/* install-command chip in the local-model advisor */
.op-code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
    background:var(--bg-input); color:var(--text); padding:2px 8px; border-radius:6px; }

/* Ask the memory — project-scoped KG query, LLM-interpreted (2026-07-07) */
.kg-ask-section{ margin-bottom:22px; }
.kg-ask-head h4{ font-family:var(--font-voice); font-weight:500; font-size:18px; margin:0 0 3px; color:var(--text); }
.kg-ask-sub{ color:var(--text-muted); font-size:13px; margin:0 0 12px; }
.kg-ask-box{ display:flex; gap:10px; }
.kg-ask-box input{ flex:1; border:1px solid var(--border); border-radius:12px; padding:12px 15px;
    font-family:var(--font-voice); font-size:16px; background:var(--bg-surface); color:var(--text); outline:none; }
.kg-ask-box input:focus{ border-color:var(--seville); box-shadow:0 0 0 3px rgba(232,98,28,.12); }
.kg-ask-box button{ background:var(--text); color:var(--bg); border:none; border-radius:11px;
    padding:0 22px; font-weight:600; font-size:14px; cursor:pointer; }
.kg-ask-box button:hover:not(:disabled){ background:#000; }
.kg-ask-box button:disabled{ opacity:.6; cursor:default; }
.kg-ask-suggest{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.kg-ask-suggest span{ font-size:12.5px; color:var(--text-muted); background:var(--bg-input);
    border:1px solid var(--border); border-radius:99px; padding:4px 12px; cursor:pointer; }
.kg-ask-suggest span:hover{ color:var(--seville); border-color:var(--seville); }
.kg-ask-result{ margin-top:16px; }
.kg-ask-thinking{ color:var(--text-muted); font-style:italic; font-family:var(--font-voice); }
.kg-ask-err{ color:var(--danger); font-size:14px; }
.kg-ask-answer{ background:var(--bg-surface); border:1px solid var(--border); border-left:2px solid var(--seville);
    border-radius:0 12px 12px 0; padding:16px 18px; font-family:var(--font-voice); font-size:15.5px;
    line-height:1.6; color:var(--text); }
.kg-ask-answer p{ margin:0 0 10px; } .kg-ask-answer p:last-child{ margin:0; }
.kg-ask-sources{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:11px; }
.kg-ask-sources-h{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
.kg-ask-source{ font-size:12px; color:var(--verdigris); background:rgba(62,124,107,.10); border-radius:6px; padding:2px 9px; }