/* A · Saddle: warm and editorial, closest to Claude. The card holds only what you type and send;
   project, model, thinking and context sit in a quiet row underneath. On desktop the empty session
   centers the composer under the greeting; it docks after the first message. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&family=Hanken+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

.device {
  --bg: #1a1918; --card: #262523; --card-2: #2f2d2a; --line: #393632; --line-2: #4a4641;
  --ink: #ece8e1; --mid: #c8c2b8; --dim: #9a948a; --dimmer: #6f6a62;
  --clay: #d97757; --clay-ink: #1e120c; --clay-wash: rgba(217,119,87,.12);
  --amber: #e3a857; --bad: #e5776b; --ok: #8fb38a;
  --serif: 'Newsreader', Georgia, serif; --sans: 'Hanken Grotesk', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans);
}

/* top bar */
.topbar { padding: 12px 14px; }
.topbar .ic { color: var(--mid); }
.topbar .ic:hover { background: var(--card); }
.t-name { font: 500 14.5px var(--sans); color: var(--ink); }
.t-sub { font-size: 12.5px; color: var(--dim); }
.is-empty .title { visibility: hidden; }
.conn { font-size: 12.5px; color: var(--dim); padding: 0 8px; }
.conn i { background: var(--ok); }
.conn.busy i { background: var(--clay); animation: dot 1.2s infinite; }
.conn.down i { background: var(--amber); }

/* greeting */
.greet { padding: 0 20px 36px; }
.glyph { display: inline-block; width: 34px; height: 34px; vertical-align: -5px; margin-right: 12px;
  background: repeating-conic-gradient(var(--clay) 0 7deg, transparent 7deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 19% 66%, transparent 67%); mask: radial-gradient(circle, transparent 0 18%, #000 19% 66%, transparent 67%); }
.greet-title { display: inline; font: 400 44px/1.1 var(--serif); letter-spacing: -.015em; margin: 0; font-variation-settings: 'opsz' 72; }
.greet-sub { margin: 14px 0 0; color: var(--dim); font-size: 14.5px; }
.greet-sub b { color: var(--mid); font-weight: 500; }

/* desktop empty: composer sits under the greeting, centered */
.vp-desktop.is-empty { grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1.25fr); }
.vp-desktop.is-empty .thread { display: flex; align-items: flex-end; justify-content: center; overflow: visible; }
.vp-desktop.is-empty .dock { padding-bottom: 0; }
/* phone empty: greeting floats mid-screen like Claude */
.vp-phone.is-empty .thread { display: flex; align-items: center; justify-content: center; }
.vp-phone .greet-title { font-size: 34px; }
.vp-phone .glyph { width: 28px; height: 28px; margin-right: 10px; }

/* messages */
.msgs { gap: 22px; }
.msg.user { background: var(--card-2); border-radius: 18px; padding: 10px 15px; font-size: 15.5px; }
.msg.user .tag { font: 500 11px var(--sans); letter-spacing: .02em; color: var(--clay); margin-bottom: 2px; }
.msg.asst { font: 400 17.5px/1.55 var(--serif); color: var(--ink); }
.work { font: 13px/1.4 var(--sans); color: var(--dim); }
.work li { display: flex; gap: 9px; align-items: center; }
.work li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--dimmer); flex: none; }
.work li.now { color: var(--mid); }
.work li.now::before { background: var(--clay); animation: dot 1.2s infinite; }
.thinking { font: italic 16px var(--serif); color: var(--dim); }
.caret { background: var(--clay); width: 8px; border-radius: 2px; }
.stopped { margin-top: 8px !important; font: 13px var(--sans); color: var(--dim); }
.msg.note { align-self: center; font-size: 12.5px; color: var(--dim); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 14px; }
code.ref { font: 500 .82em var(--mono); color: var(--clay); background: var(--clay-wash); padding: 1px 5px; border-radius: 5px; }

/* composer: Claude-like card + meta row underneath */
.dock { padding: 4px 18px 14px; }
.composer { grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "banner banner banner" "attach attach attach" "queue queue queue" "input input input" "plus . send" "meta meta meta" "hint hint hint"; }
.card-bg { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 8px 28px -14px rgba(0,0,0,.6); transition: border-color .2s; }
.composer:focus-within .card-bg { border-color: var(--line-2); }
.composer.offline .card-bg { border-style: dashed; }
.c-banner { margin: 10px 14px 0; padding: 0 0 9px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--mid); }
.b-dot.warn { background: var(--amber); } .b-dot.bad { background: var(--bad); } .b-dot.run { background: var(--clay); animation: dot 1.2s infinite; }
.b-ic { color: var(--clay); }
.b-act { color: var(--clay); font-weight: 600; padding: 0 6px; }
.b-x { color: var(--dim); font-size: 18px; width: 30px; }
.c-attach { padding: 12px 16px 0; }
.att-x { background: #111; border: 1px solid var(--line-2); color: var(--ink); }
.att.bad .thumb { outline: 2px solid var(--bad); outline-offset: -2px; }
.c-queue { padding: 10px 18px 0; font-size: 13.5px; }
.q-k { font: 600 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--clay); flex: none; }
.q-n .q-k { color: var(--mid); }
.q-t { color: var(--dim); }
.c-input { padding: 16px 18px 4px; color: var(--ink); font: 16.5px/1.45 var(--sans); }
.c-input::placeholder { color: var(--dimmer); }
.c-plus { margin: 0 0 6px 6px; color: var(--mid); border-radius: 12px; }
.c-plus:hover { background: var(--card-2); }
.c-send { margin: 0 8px 8px 0; width: 40px; height: 40px; align-self: end; border-radius: 12px; background: var(--clay); color: var(--clay-ink); transition: background .2s, opacity .2s, transform .1s; }
.c-send:disabled { background: var(--card-2); color: var(--dimmer); }
.c-send[data-mode="stop"] { background: var(--ink); color: var(--bg); }
.c-send:not(:disabled):active { transform: scale(.94); }
.c-send.holding { background: var(--mid); }

.c-meta { padding: 4px 6px 0 10px; font-size: 14px; color: var(--dim); }
.m-project { color: var(--mid); padding: 0 8px; margin-right: auto; border-radius: 10px; }
.m-project svg:first-child { display: none; }
.m-model { padding: 0 8px; border-radius: 10px; gap: 7px !important; }
.m-name { color: var(--mid); }
.m-level { color: var(--dim); }
.m-caret { color: var(--dimmer); display: none; }
.m-model.open, .m-model:hover:not(:disabled), .m-project:hover, .m-ctx:hover, .m-ctx.open { background: var(--card); }
.m-model:disabled { opacity: .55; }
.m-ctx { padding: 0 8px; border-radius: 10px; color: var(--dim); }
.m-ctx .ring { background: conic-gradient(var(--mid) var(--ctx), var(--line-2) 0); -webkit-mask: radial-gradient(circle, transparent 0 4.5px, #000 5px); mask: radial-gradient(circle, transparent 0 4.5px, #000 5px); }
.ctx-warn .m-ctx { color: var(--amber); }
.ctx-warn .m-ctx .ring { background: conic-gradient(var(--amber) var(--ctx), var(--line-2) 0); }
.compacting .m-ctx .ring { animation: spin 1.2s linear infinite; background: conic-gradient(var(--clay) 30%, var(--line-2) 0); }
.c-hint { padding: 2px 18px 0; font-size: 12.5px; color: var(--dim); text-align: right; }
.c-hint kbd { color: var(--mid); background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; font-size: 11.5px; }

/* popovers */
.pop { background: var(--card-2); border: 1px solid var(--line-2); border-radius: 16px; padding: 8px; box-shadow: 0 18px 50px -12px rgba(0,0,0,.7); bottom: calc(100% + 2px); }
.pop-model, .pop-usage { left: auto; right: 16px; width: 330px; }
.composer { max-width: 760px; }
.vp-desktop .pop-model, .vp-desktop .pop-usage { right: max(16px, calc(50% - 380px)); }
.vp-desktop .pop-files { left: max(16px, calc(50% - 380px)); width: 420px; }
.p-head { font: 500 12px var(--sans); color: var(--dim); padding: 8px 10px 4px; }
.p-val { color: var(--mid); }
.p-row { padding: 0 10px; border-radius: 10px; font-size: 14.5px; }
.p-row:hover, .p-row.sel { background: rgba(255,255,255,.05); }
.p-note { font-size: 12.5px; color: var(--dim); }
.p-check { color: var(--clay); }
.p-path { font: 13px var(--mono); color: var(--ink); }
.p-path .dir { color: var(--dim); }
.p-row.file svg { color: var(--dim); flex: none; }
.p-seg { margin: 4px 6px 6px; background: var(--card); border-radius: 10px; padding: 3px; gap: 2px; }
.p-seg button { background: transparent; border-radius: 8px; color: var(--dim); font-size: 13px; }
.p-seg button.on { background: var(--card-2); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 1px 3px rgba(0,0,0,.4); }
.p-bar { margin: 6px 10px; background: var(--line); }
.p-bar span { background: var(--mid); }
.ctx-warn ~ * .p-bar span, .pop .p-bar span { background: linear-gradient(90deg, var(--mid), var(--clay)); }
.p-metrics { padding: 6px 10px; }
.p-metrics small { font-size: 11.5px; color: var(--dim); }
.p-metrics b { font-weight: 500; }
.p-note2 { font-size: 12.5px; color: var(--dim); margin: 6px 10px; }
.p-btn { background: var(--clay); color: var(--clay-ink); border-radius: 10px; font-weight: 600; margin: 4px 0 2px; }
.p-btn:disabled { background: var(--card); color: var(--dimmer); }
.p-x { color: var(--dim); }
.p-empty { padding: 4px 10px; color: var(--dim); font-size: 13.5px; }
mark { color: var(--clay); }

.toast { background: var(--card-2); color: var(--ink); border: 1px solid var(--line-2); padding: 9px 16px; border-radius: 999px; font-size: 13.5px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }

/* phone */
.vp-phone .dock { padding: 0 12px 26px; }
.vp-phone .c-meta { font-size: 13.5px; }
.vp-phone .pop-model, .vp-phone .pop-usage, .vp-phone .pop-files { left: 12px; right: 12px; width: auto; }
.vp-phone .c-hint { text-align: center; }