/* Copilot (orb) styles — lifted verbatim from index.html so the panel can be dropped onto
   another board unchanged. Load AFTER the board's own styles and BEFORE its second style
   block, exactly where the <link> sits in index.html; the board provides --sans/--card/
   --hair/--terracotta and the .wrap/.toast it docks against. */
  #orbBtn{position:fixed;right:22px;bottom:22px;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;z-index:80;background:url("linda-orb.jpeg") center/cover no-repeat, radial-gradient(circle at 34% 30%,#ff7a5c 0%,#e23b26 42%,#9b1c10 100%);box-shadow:0 6px 20px rgba(155,45,32,.35);transition:transform .15s}
  #orbBtn:hover{transform:scale(1.06)} #orbBtn.open{transform:scale(.9)}
  @keyframes orbThink{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.09);filter:brightness(1.14) drop-shadow(0 0 12px rgba(226,59,38,.55))}}
  #orbBtn.thinking{animation:orbThink 1.1s ease-in-out infinite}
  #orbPanel.thinking .orb-head .dot{animation:orbThink 1.1s ease-in-out infinite}
  .orb-msg.linda ul,.orb-msg.linda ol{margin:8px 0;padding-left:20px} .orb-msg.linda li{margin:5px 0}
  /* a slash command reads as a chip, not as the instruction behind it */
  .orb-msg.me.cmd{font-size:13.5px}
  .orb-cmd{display:inline-block;background:rgba(251,244,228,.22);border:1px solid rgba(251,244,228,.42);border-radius:6px;padding:1px 7px;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.01em}
  .orb-msg.linda code{background:var(--parchment);border:1px solid var(--hair);border-radius:4px;padding:0 4px;font-family:var(--mono);font-size:12.5px} .orb-msg.linda strong{font-weight:700}
  /* Copilot is a DOCKED right rail (full height), collapsible + drag-resizable. --orb-w is set
     from localStorage on load; the collapse chevron toggles body.orb-docked. */
  :root{--orb-w:420px}
  #orbPanel{font-family:var(--sans);position:fixed;top:0;right:0;bottom:0;width:var(--orb-w);height:100dvh;z-index:80;display:flex;flex-direction:column;background:var(--panel,var(--card));border-left:1px solid var(--hair);box-shadow:-12px 0 36px rgba(0,0,0,.16);overflow:hidden;opacity:0;visibility:hidden;transform:translateX(100%);pointer-events:none;transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .18s ease,visibility 0s .24s}
  #orbPanel.open{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .18s ease,visibility 0s}
  /* Docked rail: the board content sits BESIDE the panel (shrinks) rather than under it. */
  body.orb-docked .wrap{margin-right:var(--orb-w);transition:margin-right .24s cubic-bezier(.4,0,.2,1)}
  /* Drag the rail's left edge to set its width (clamped + remembered in localStorage). */
  #orbResize{position:absolute;left:0;top:0;bottom:0;width:7px;cursor:col-resize;touch-action:none;z-index:3;background:transparent}
  #orbResize:hover,#orbResize.dragging{background:var(--terracotta,#9B2D20);opacity:.3}
  body.orb-resizing{user-select:none;cursor:col-resize}
  body.orb-resizing *{cursor:col-resize!important}
  body.orb-resizing .wrap{transition:none}
  /* M2: keep the toast centred over the CONTENT, not the whole viewport, while docked. */
  body.orb-docked .toast{left:calc(50% - (var(--orb-w) / 2));max-width:min(560px,calc(100vw - var(--orb-w) - 32px))}
  /* Mobile: the rail becomes a full-screen overlay (no squeeze, no drag-resize), and text scales
     UP for readability — the 9-11px labels are genuinely hard to read on a phone. The 16px input
     also stops iOS auto-zooming on focus. */
  @media (max-width:640px){
    #orbPanel{left:0;right:0;top:0;bottom:0;width:auto;height:100dvh;border-left:none}
    body.orb-docked .wrap{margin-right:0}
    #orbResize{display:none}
    #orbBtn{width:46px;height:46px;right:14px;bottom:14px}
    .orb-msg{font-size:15.5px}
    .orb-foot textarea{font-size:16px}
    .orb-run>summary,.orb-tool>summary,.orb-meter,.orb-msg.linda code,.orb-msg.linda pre,.orb-msg.linda table,.orb-card pre,.orb-card textarea{font-size:13px}
    .orb-slash-item .cmd{font-size:14px} .orb-slash-item .desc{font-size:12.5px}
    .orb-head .sub,.orb-card button,.orb-head button{font-size:13.5px}
    body.orb-docked .toast{left:50%;max-width:min(92vw,560px)}   /* rail is an overlay here — reset the desktop content-relative left+width */
  }
  .orb-head{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--hair);background:var(--card)}
  .orb-head .dot{width:28px;height:28px;border-radius:50%;flex:0 0 auto;background:url("linda-orb.jpeg") center/cover no-repeat, radial-gradient(circle at 34% 30%,#ff7a5c,#e23b26 45%,#9b1c10)}
  .orb-head b{font-family:var(--serif);font-size:15px;color:var(--ink)} .orb-head .sub{font-size:10.5px;color:var(--muted)} .orb-head .spacer{flex:1}
  .orb-head button{border:1px solid var(--hair);background:transparent;color:var(--muted);border-radius:8px;padding:4px 9px;cursor:pointer;font:inherit;font-size:12px}
  .orb-msgs{flex:1;overflow-y:auto;padding:13px;display:flex;flex-direction:column;gap:9px}
  .orb-msg{max-width:86%;padding:10px 14px;border-radius:12px;font-size:15px;line-height:1.62;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
  .orb-msg.me{align-self:flex-end;background:var(--terracotta,#9B2D20);color:#FBF4E4;border-bottom-right-radius:4px}
  /* A message the backend never received: faded + dashed, so it can't be mistaken for sent. */
  .orb-msg.me.unsent{opacity:.5;outline:1px dashed rgba(251,244,228,.6);outline-offset:-3px}
  .orb-msg.linda{align-self:flex-start;background:var(--card);border:1px solid var(--hair);color:var(--ink);border-bottom-left-radius:4px}
  /* ── Run groups: a contiguous run of tool calls folds into ONE collapsed row that expands into the
     threaded list of what she actually did. A single-step run reads as the step itself ("reading a
     note"); two or more read as the count ("Ran 4 commands, used 29 tools"). Text between calls closes
     the group, so the shape of the turn survives. */
  /* `flex:0 0 auto` is load-bearing, not tidiness. `.orb-msgs` is a flex COLUMN, and a flex item is
     normally protected from being squashed below its own content by the automatic minimum size — which
     applies ONLY while `overflow` is `visible`. These two set `overflow:hidden` (rounded corners / a
     clipped label), which forfeits that protection: once the conversation overflows the panel, the group
     is crushed flat with its rows unreachable and the meter collapses into a sliver the bubbles overlap. */
  .orb-run{flex:0 0 auto;align-self:stretch;max-width:100%;border:1px solid var(--hair);border-radius:10px;background:var(--card);overflow:hidden}
  .orb-run>summary{display:flex;align-items:center;gap:7px;padding:7px 11px;cursor:pointer;font-size:12.5px;color:var(--muted);list-style:none;user-select:none}
  .orb-run>summary::-webkit-details-marker{display:none}
  .orb-run>summary:hover{color:var(--ink)}
  .orb-run .tw{flex:0 0 auto;width:9px;transition:transform .15s ease;opacity:.7}
  .orb-run[open] .tw{transform:rotate(90deg)}
  .orb-run .lbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .orb-run.live .lbl{font-style:italic}
  /* A big turn is 20-30 calls; opened, that would fill the panel and bury the reply. Scroll it in place. */
  .orb-run-body{border-top:1px solid var(--hair);padding:3px 0;max-height:46vh;overflow-y:auto;overscroll-behavior:contain}
  /* One step. Collapsed: what it was + the argument that identifies it. Expanded: every argument
     and a preview of what came back — enough to check the call without leaving the panel. */
  .orb-tool>summary{display:flex;align-items:baseline;gap:7px;padding:5px 11px 5px 20px;cursor:pointer;font-size:12.5px;list-style:none}
  .orb-tool>summary::-webkit-details-marker{display:none}
  .orb-tool>summary:hover{background:rgba(0,0,0,.03)}
  .orb-tool .nm{flex:0 0 auto;color:var(--ink)}
  .orb-tool .hint{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-family:var(--mono,ui-monospace,monospace);font-size:11.5px}
  .orb-tool .bad{flex:0 0 auto;color:var(--terracotta)}
  .orb-tool-body{padding:2px 11px 9px 20px;font-size:12px}
  .orb-tool-body dl{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin:0 0 6px}
  .orb-tool-body dt{color:var(--muted);font-family:var(--mono,ui-monospace,monospace);font-size:11.5px}
  .orb-tool-body dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
  .orb-tool-note{padding:5px 11px 5px 20px;font-size:12px;color:var(--faint);font-style:italic}
  .orb-tool-body pre{margin:0;padding:6px 8px;border-radius:6px;background:var(--ground);color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;max-height:190px;overflow:auto}
  /* Live per-run meter — what it's doing / tokens this run / elapsed, amber when "running away".
     It sits INLINE at the foot of the message flow (not pinned to the panel), so each turn leaves its
     own cost behind it in the scrollback the way Claude Code does. */
  @keyframes meterPulse{0%,100%{opacity:.3}50%{opacity:1}}
    /* ── Context window gauge ────────────────────────────────────────────────
     Session state, not turn state, so it lives in the header rather than the inline meter. The
     numbers are the SDK's own accounting (system tools / memory / skills / messages), read at the
     end of each turn — not an estimate summed from usage deltas. */
  .orb-ctx{display:flex;align-items:center;gap:6px;margin-top:3px;cursor:default}
  .orb-ctx[hidden]{display:none}
  .orb-ctx .bar{position:relative;width:64px;height:4px;border-radius:2px;background:var(--parchment-2);border:1px solid var(--hair);overflow:hidden;flex:0 0 auto}
  .orb-ctx .bar i{position:absolute;inset:0 auto 0 0;background:var(--brown);opacity:.6;border-radius:2px;transition:width .4s ease}
  .orb-ctx.warn .bar i{background:var(--terracotta);opacity:.85}
  .orb-ctx .lbl{font-family:var(--mono);font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
  .orb-ctx.warn .lbl{color:var(--terracotta)}
  /* A compaction boundary: everything above it is now a summary, so the flow should say so. */
  .orb-compact{align-self:stretch;display:flex;align-items:center;gap:9px;margin:4px 0;color:var(--faint);font-size:11.5px;font-family:var(--mono)}
  .orb-compact::before,.orb-compact::after{content:"";flex:1 1 auto;height:1px;background:var(--hair)}
  .orb-meter{flex:0 0 auto;align-self:flex-start;display:flex;align-items:center;gap:8px;padding:2px 4px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;max-width:100%}
  .orb-meter[hidden]{display:none}
  .orb-meter .sep{flex:0 0 auto;opacity:.5}
  .orb-meter .act{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-style:italic}
  .orb-meter .tok{flex:0 0 auto;color:var(--ink);font-weight:600}
  .orb-meter .el{flex:0 0 auto}
  .orb-meter .dotlive{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--faint)}
  .orb-meter.live .dotlive{background:var(--brown);animation:meterPulse 1.2s ease-in-out infinite}
  .orb-meter.idle{opacity:.62}
  .orb-meter.warn{color:var(--terracotta)}
  .orb-meter.warn .tok{color:var(--terracotta)}
  .orb-meter.warn.live .dotlive{background:var(--terracotta)}
  /* in-chat "thinking" cue — small, lives in the message stream (replaces the big floating-orb pulse) */
  .orb-typing{align-self:flex-start;display:flex;gap:4px;padding:9px 12px}
  .orb-typing i{width:6px;height:6px;border-radius:50%;background:var(--terracotta,#9B2D20);opacity:.5;animation:orbDot 1.1s ease-in-out infinite}
  .orb-typing i:nth-child(2){animation-delay:.16s} .orb-typing i:nth-child(3){animation-delay:.32s}
  /* a turn that was cut short — says so, so it can't be mistaken for a short answer */
  .orb-interrupted{align-self:flex-start;font-size:12px;color:var(--muted);font-style:italic;padding:1px 4px 3px;border-left:2px solid var(--terracotta);padding-left:8px}
  @keyframes orbDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
  /* rich markdown in Linda's replies — code blocks, tables, links */
  .orb-msg.linda pre{background:var(--parchment);border:1px solid var(--hair);border-radius:8px;padding:9px 11px;margin:9px 0;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.4;white-space:pre}
  .orb-msg.linda pre code{background:none;border:none;padding:0;font-size:inherit}
  .orb-msg.linda a{color:var(--terracotta,#9B2D20);text-decoration:underline;word-break:break-all}
  .orb-msg.linda table{border-collapse:collapse;margin:9px 0;font-size:12px;display:block;overflow-x:auto;max-width:100%}
  .orb-msg.linda th,.orb-msg.linda td{border:1px solid var(--hair);padding:6px 9px;text-align:left;vertical-align:top}
  .orb-msg.linda th{background:var(--parchment);font-weight:700;white-space:nowrap}
  .orb-card{align-self:stretch;border:1px solid var(--terracotta,#9B2D20);border-radius:12px;padding:11px 12px;background:var(--card)}
  .orb-card h4{margin:0 0 4px;font-size:12.5px;color:var(--ink);font-weight:600}
  .orb-card pre{margin:6px 0 0;background:var(--parchment);border:1px solid var(--hair);border-radius:8px;padding:8px;font-family:var(--mono);font-size:11px;max-height:150px;overflow:auto;white-space:pre-wrap;word-break:break-word}
  .orb-card textarea{width:100%;box-sizing:border-box;font-family:var(--mono);font-size:11px;border:1px solid var(--hair);border-radius:8px;padding:8px;min-height:90px;display:none;margin-top:6px}
  .orb-card .btns{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
  .orb-card button{border-radius:8px;padding:6px 12px;cursor:pointer;font:inherit;font-size:12px;font-weight:600;border:1px solid var(--hair);background:transparent;color:var(--ink)}
  .orb-card button.ok{background:var(--terracotta,#9B2D20);color:#FBF4E4;border-color:var(--terracotta,#9B2D20)}
  .orb-card.resolved{opacity:.6} .orb-card.resolved .btns{display:none}
  /* Slash-command menu — floats above the input when the box holds a lone "/word". Replaces the old preset chips. */
  .orb-slash{position:absolute;left:10px;right:10px;bottom:calc(100% + 6px);z-index:6;background:var(--card);border:1px solid var(--hair);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.20);overflow:hidden auto;max-height:44vh}
  .orb-slash-item{display:flex;flex-direction:column;gap:1px;padding:9px 13px;cursor:pointer;border-bottom:1px solid var(--hair)}
  .orb-slash-item:last-child{border-bottom:none}
  .orb-slash-item.sel,.orb-slash-item:hover{background:var(--parchment)}
  .orb-slash-item .cmd{font-weight:700;color:var(--terracotta,#9B2D20);font-size:13.5px}
  .orb-slash-item .desc{font-size:12px;color:var(--muted,#7A6E5D)}
  /* Proposal widget — a structured card Linda emits (```linda-proposal) whenever she proposes changes,
     one row per target with the REAL tool logo (orb-logos.js data-URIs). */
  .orb-proposal{align-self:stretch;border:1px solid var(--hair);border-left:3px solid var(--terracotta,#9B2D20);border-radius:12px;padding:10px 12px;background:var(--card);margin:3px 0}
  .orb-proposal .pp-title{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
  .orb-proposal .pp-title::before{content:"PROPOSAL";display:inline-block;font-size:9px;font-weight:800;letter-spacing:.09em;color:var(--terracotta,#9B2D20);border:1px solid var(--terracotta,#9B2D20);border-radius:5px;padding:1px 5px;margin-right:7px;vertical-align:1.5px}
  .pp-item{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--hair)}
  .pp-item:first-of-type{border-top:none}
  .pp-logo{width:20px;height:20px;flex:0 0 20px;margin-top:1px;border-radius:4px;object-fit:contain}
  span.pp-logo{display:inline-flex;align-items:center;justify-content:center;background:var(--parchment);color:var(--muted,#7A6E5D);font-weight:700;font-size:12px}
  .pp-body{flex:1;min-width:0}
  .pp-line{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}
  .pp-target{font-weight:600;font-size:12.5px;color:var(--ink);word-break:break-word}
  .pp-action{font-size:11px;color:var(--terracotta,#9B2D20);background:var(--parchment);border-radius:5px;padding:1px 6px;white-space:nowrap}
  .pp-sum{font-size:12px;color:var(--muted,#7A6E5D);margin-top:2px}
  .pp-prev{margin-top:5px}
  .pp-prev summary{font-size:11px;color:var(--muted,#7A6E5D);cursor:pointer;user-select:none}
  .pp-prev pre{margin:5px 0 0;background:var(--parchment);border:1px solid var(--hair);border-radius:8px;padding:8px;font-family:var(--mono);font-size:11px;max-height:180px;overflow:auto;white-space:pre-wrap;word-break:break-word}
  .pp-foot{display:flex;gap:10px;align-items:center;margin-top:9px;flex-wrap:wrap}
  .pp-approve{border:none;background:var(--terracotta,#9B2D20);color:#FBF4E4;border-radius:8px;padding:6px 13px;cursor:pointer;font:inherit;font-size:12px;font-weight:600}
  .pp-or{font-size:11px;color:var(--muted,#7A6E5D)}
  /* keep / drop / edit controls */
  .pp-pick{flex:0 0 auto;display:flex;align-items:center;padding-top:2px}
  .pp-pick input{width:16px;height:16px;accent-color:var(--terracotta,#9B2D20);cursor:pointer}
  .pp-item.off{opacity:.42}
  .pp-item.off .pp-target{text-decoration:line-through}
  /* the card numbers each row, because his comments refer to them ("3: use tomorrow's note") */
  .pp-num{flex:0 0 auto;min-width:15px;text-align:right;font-size:11px;font-weight:700;color:var(--muted,#7A6E5D);font-variant-numeric:tabular-nums;margin-top:2px}
  .pp-item.off .pp-num{text-decoration:none}
  /* every row: comment in prose (always there) OR edit the content yourself (behind the toggle) */
  .pp-note{width:100%;box-sizing:border-box;margin-top:6px;font:inherit;font-size:12px;border:1px solid var(--hair);border-radius:7px;padding:5px 8px;background:var(--parchment);color:var(--ink);resize:vertical;min-height:30px}
  .pp-note::placeholder{color:var(--muted,#7A6E5D);opacity:.7}
  .pp-note:focus{outline:none;border-color:var(--terracotta,#9B2D20)}
  .pp-edit{border:none;background:none;color:var(--muted,#7A6E5D);font:inherit;font-size:11px;text-decoration:underline;cursor:pointer;padding:0 2px}
  .pp-edit:hover{color:var(--terracotta,#9B2D20)}
  .pp-edited{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--terracotta,#9B2D20);border:1px solid var(--terracotta,#9B2D20);border-radius:5px;padding:0 5px}
  .pp-editor{margin-top:7px;display:flex;flex-direction:column;gap:6px}
  .pp-editor label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--muted,#7A6E5D)}
  .pp-editor input,.pp-editor textarea{font:inherit;font-size:12px;border:1px solid var(--hair);border-radius:7px;padding:6px 8px;background:var(--parchment);color:var(--ink);width:100%;box-sizing:border-box}
  .pp-editor textarea{font-family:var(--mono);font-size:11px;resize:vertical;white-space:pre-wrap}
  .pp-e-foot{display:flex;gap:7px}
  .pp-e-foot button{border:1px solid var(--hair);background:var(--parchment);color:var(--ink);border-radius:7px;padding:4px 10px;font:inherit;font-size:11px;cursor:pointer}
  .pp-e-foot .pp-e-done{background:var(--terracotta,#9B2D20);color:#FBF4E4;border-color:var(--terracotta,#9B2D20);font-weight:600}
  .pp-approve:disabled{opacity:.45;cursor:default}
  /* the outbound-send card gets the same comment affordance */
  .orb-approve .oa-note{width:100%;box-sizing:border-box;margin-top:8px;font:inherit;font-size:12px;border:1px solid var(--hair);border-radius:7px;padding:6px 8px;background:var(--parchment);color:var(--ink);resize:vertical;min-height:32px}
  .orb-approve .oa-note:focus{outline:none;border-color:var(--terracotta,#9B2D20)}
  /* a proposal we refused to render — explains itself instead of dumping raw JSON */
  .orb-proposal.pp-broken{border-left-color:var(--muted,#7A6E5D)}
  .orb-proposal.pp-broken .pp-title::before{content:"UNREADABLE";color:var(--muted,#7A6E5D);border-color:var(--muted,#7A6E5D)}
  @media (pointer: coarse){
    .pp-pick input{width:20px;height:20px}
    .pp-note,.pp-editor input,.pp-editor textarea,.orb-approve .oa-note{font-size:16px} /* iOS won't zoom on focus */
    .pp-edit{font-size:12.5px;padding:4px 6px}
  }
  .orb-proposal.resolved{opacity:.55} .orb-proposal.resolved .pp-foot{display:none}
  .orb-proposal.pp-pending{color:var(--muted,#7A6E5D);font-size:12px;display:flex;align-items:center;gap:8px;border-left-color:var(--hair)}
  .pp-spin{width:11px;height:11px;border:2px solid var(--hair);border-top-color:var(--terracotta,#9B2D20);border-radius:50%;display:inline-block;animation:pp-sp .7s linear infinite}
  @keyframes pp-sp{to{transform:rotate(360deg)}}
  /* Outbound-send / tool approval gate, restyled to match the proposal card — logo + plain-English verb +
     readable message instead of raw JSON. */
  .orb-approve{border-left:3px solid var(--terracotta,#9B2D20)}
  .orb-approve .oa-head{display:flex;gap:9px;align-items:center;margin-bottom:8px}
  .orb-approve .oa-head .pp-logo{width:24px;height:24px;flex:0 0 24px}
  .orb-approve .oa-verb{font-weight:700;font-size:12.5px;color:var(--ink)}
  .orb-approve .oa-to{font-size:11.5px;color:var(--muted,#7A6E5D);margin-top:1px}
  .orb-approve .oa-body{background:var(--parchment);border:1px solid var(--hair);border-radius:8px;padding:9px 11px;font-size:12.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto;color:var(--ink)}
  .orb-foot{position:relative;display:flex;gap:8px;padding:10px;border-top:1px solid var(--hair);background:var(--card);align-items:flex-end}
  .orb-foot textarea{flex:1;resize:none;border:1px solid var(--hair);border-radius:10px;padding:9px 11px;font:inherit;font-size:14px;max-height:50vh;background:var(--parchment);color:var(--ink)}
  .orb-foot button{border:none;background:var(--terracotta,#9B2D20);color:#FBF4E4;border-radius:10px;padding:0 15px;cursor:pointer;font:inherit;font-weight:600;min-height:40px;flex:0 0 auto}
  .orb-foot button.stop{background:#6E3A22}
  .orb-foot button:disabled{opacity:.5;cursor:default}
  /* Dictate. Secondary next to Send (parchment, not terracotta) so the primary action stays
     obvious; it turns terracotta + breathes only while it is actually listening. */
  .orb-foot .mic{background:var(--parchment);color:var(--ink);border:1px solid var(--hair);padding:0 11px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1}
  .orb-foot .mic:hover:not(:disabled){background:var(--hair)}
  /* The glyph is inline SVG on currentColor, so it stays crisp and picks up the button's ink
     (dark on parchment when idle, light on terracotta while recording). */
  .orb-foot .mic .ic{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px}
  .orb-foot .mic .ic svg{display:block}
  /* Clip (attach) shares the mic's secondary look — one visual family for composer actions. */
  .orb-foot .clip{background:var(--parchment);color:var(--ink);border:1px solid var(--hair);padding:0 11px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
  .orb-foot .clip:hover:not(:disabled){background:var(--hair)}
  .orb-foot .clip svg{display:block}
  /* The composer wraps so the chips row can take a full line of its own ABOVE the input
     (order:-1), and so three buttons never squeeze the textarea to nothing on a narrow rail. */
  .orb-foot{flex-wrap:wrap}
  .orb-atts{order:-1;width:100%;display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 8px}
  .orb-att{position:relative;display:inline-flex;align-items:center;gap:7px;background:var(--parchment);border:1px solid var(--hair);border-radius:9px;padding:6px 9px;max-width:210px;font-size:12px;color:var(--ink)}
  .orb-att.img{padding:0;border:none;background:none}
  .orb-att.img img{width:54px;height:54px;object-fit:cover;border-radius:9px;border:1px solid var(--hair);display:block}
  .orb-att .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .orb-att .sz{color:var(--muted,#7A6E5D);font-size:11px;flex:0 0 auto}
  .orb-att.up{opacity:.55}
  .orb-att.err{border-color:var(--terracotta,#9B2D20);color:var(--terracotta,#9B2D20)}
  .orb-att .rm{position:absolute;top:-7px;right:-7px;width:21px;height:21px;border-radius:50%;border:1px solid var(--parchment);background:var(--ink);color:var(--parchment);font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;min-height:0}
  .orb-att .rm:hover{background:var(--terracotta,#9B2D20)}
  /* Drag-and-drop is a desktop affordance; the overlay only ever shows mid-drag. */
  .orb-drop{position:absolute;inset:0;z-index:6;display:none;align-items:center;justify-content:center;background:rgba(251,244,228,.93);border:2px dashed var(--terracotta,#9B2D20);border-radius:12px;color:var(--terracotta,#9B2D20);font-weight:700;font-size:14px;pointer-events:none;text-align:center;padding:20px}
  #orbPanel.dragover .orb-drop{display:flex}
  /* Touch: a 21px close target is too small for a thumb, and the chips need more room to breathe. */
  @media (pointer: coarse){
    .orb-att .rm{width:28px;height:28px;font-size:16px;top:-9px;right:-9px}
    .orb-att{font-size:13px;padding:8px 11px}
    .orb-att.img img{width:62px;height:62px}
  }
  .orb-foot .mic .t{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
  .orb-foot .mic.rec{background:var(--terracotta,#9B2D20);color:#FBF4E4;border-color:var(--terracotta,#9B2D20);animation:micPulse 1.6s ease-in-out infinite}
  .orb-foot .mic.busy .ic{display:inline-block;animation:micSpin 1s linear infinite}
  @keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(155,45,32,.45)}50%{box-shadow:0 0 0 6px rgba(155,45,32,0)}}
  @keyframes micSpin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion: reduce){ .orb-foot .mic.rec,.orb-foot .mic.busy .ic{animation:none} }