/* D · Saddle + Rein: A's structure (text-only card, settings row underneath) in the current harness
   palette and a sans-serif transcript. Steer is its own labelled button with "After this run" beside
   it, and the simulated phone shows the keyboard so the row's height cost is visible.
   Loads after a.css; only the changes live here. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

.device {
  /* current harness tokens (apps/mobile/src/theme.ts) mapped onto A's variables */
  --bg: #0b0d10; --card: #14171c; --card-2: #1a1e24; --line: #262b33; --line-2: #343a44;
  --ink: #e8eaed; --mid: #c9ced6; --dim: #8b919b; --dimmer: #6f757e;
  --clay: #7aa2ff; --clay-ink: #0b1220; --clay-wash: rgba(122,162,255,.1);
  --steer: #f2c14e; --steer-ink: #2a1f05; --steer-wash: rgba(242,193,78,.12);
  --amber: #f2c14e; --bad: #ff6b6b; --ok: #34c759;
  --serif: 'Geist', system-ui, sans-serif; --sans: 'Geist', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace;
  font: 15px/1.5 var(--sans);
}

/* greeting: same place, plainer voice */
.glyph { width: 30px; height: 30px; vertical-align: -6px; background: none; -webkit-mask: none; mask: none; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--clay), 0 0 0 5px var(--clay-wash); }
.greet-title { font: 500 36px/1.1 var(--sans); letter-spacing: -.03em; }
.vp-phone .greet-title { font-size: 28px; }
.vp-phone .glyph { width: 24px; height: 24px; vertical-align: -4px; }

/* transcript: sans, code-friendly */
.msg.asst { font: 400 15.5px/1.6 var(--sans); }
.msg.user { background: var(--card-2); }
.msg.user .tag { color: var(--clay); }
.thinking { font: 13px var(--mono); }
.work { font: 12.5px/1.45 var(--mono); }
.caret { background: var(--clay); }

/* card row: + · · · [After this run] [Steer | Send | Stop] */
.composer { grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "banner banner banner banner" "attach attach attach attach" "queue queue queue queue" "input input input input" "plus . later send" "meta meta meta meta" "hint hint hint hint"; }
.card-bg { border-radius: 20px; }
.c-send { border-radius: 12px; width: auto; min-width: 40px; padding: 0 10px; transition: background .2s, color .2s, padding .2s; }
.c-send[data-mode="stop"] { background: var(--card-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.c-send[data-mode="steer"] { background: var(--steer); color: var(--steer-ink); padding: 0 14px 0 11px; }
.c-send[data-mode="steer"] .send-ic { display: flex; gap: 6px; align-items: center; }
.send-label { font: 600 14px var(--sans); }
.c-send.holding { background: var(--steer); }
.c-later { grid-area: later; align-self: end; margin: 0 6px 8px 0; height: 40px; padding: 0 12px; display: none; align-items: center; gap: 6px;
  border: 1px solid var(--line-2); background: transparent; border-radius: 12px; color: var(--mid); font: 500 13.5px var(--sans); white-space: nowrap; }
.c-later:not(:empty) { display: inline-flex; }
.c-later:hover:not(:disabled) { background: var(--card-2); color: var(--ink); }
.c-later:disabled { opacity: .45; }
.c-later svg { color: var(--dim); }

/* the queue reads in the same colours as the buttons that made it */
.q-k { color: var(--steer); }
.q-n .q-k { color: var(--mid); }
.composer.running .card-bg { border-color: var(--line-2); }
.composer.running.has-draft .card-bg { border-color: rgba(242,193,78,.35); }

/* settings row: unchanged structure, harness colours */
.m-name { color: var(--mid); }
.m-ctx .ring { background: conic-gradient(var(--clay) var(--ctx), var(--line-2) 0); }
.c-hint kbd { font-family: var(--mono); }

.pop { background: var(--card-2); }
.p-check, mark { color: var(--clay); }
.p-bar span, .pop .p-bar span { background: var(--clay); }
code.ref { font-family: var(--mono); }
.toast { font-family: var(--sans); }

/* simulated iOS keyboard (phone mockup only) */
.kb { display: none; background: #1c1f24; padding: 8px 3px 34px; gap: 11px; flex-direction: column; border-top: 1px solid #262a30; }
.kb-up .kb { display: flex; animation: kbin .28s cubic-bezier(.2,.8,.2,1); }
@keyframes kbin { from { transform: translateY(40%); opacity: 0; } }
.kb-row { display: flex; gap: 6px; justify-content: center; padding: 0 3px; }
.kb-row.inset { padding: 0 20px; }
.key { flex: 1; height: 42px; border-radius: 5px; background: #46494f; color: #fff; display: grid; place-items: center; font: 400 19px system-ui, sans-serif; box-shadow: 0 1px 0 #000; }
.key.wide { flex: 1.4; background: #2f3237; font-size: 15px; }
.kb-row.bottom .key { flex: 1.2; }
.kb-row.bottom .key:nth-child(3) { flex: 5; background: #46494f; }
.kb-row.bottom .key:last-child { flex: 2.2; }
.kb-up .dock { padding-bottom: 6px; }
.kb-up.vp-phone::after { background: rgba(255,255,255,.35); }