/* C · Canter: soft dusk palette, rounded type, springy motion. The composer is one floating
   capsule: + on the left, send on the right. The send button wears the context ring. Everything
   else (photos, file reference, model, thinking, context) lives in one tray behind +. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&family=Nunito:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap');

.device {
  --bg: #15121d; --bg-2: #1c1827; --cap: #262035; --cap-2: #30294a; --line: #3a3254;
  --ink: #f1ecff; --mid: #cfc6e8; --dim: #958cb2; --dimmer: #6b6388;
  --lav: #b9a4ff; --lav-ink: #1d1536; --peach: #ffb38a; --mint: #8ee3c0; --rose: #ff8fa3;
  --round: 'Fredoka', system-ui, sans-serif; --body: 'Nunito', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  background: radial-gradient(120% 60% at 50% 110%, #2a1f3f 0%, transparent 60%), var(--bg); color: var(--ink); font: 15px/1.5 var(--body);
}

/* top bar */
.topbar .ic { color: var(--mid); border-radius: 14px; }
.topbar .ic:hover { background: var(--cap); }
.t-name { font: 500 15px var(--round); }
.t-sub { font-size: 12.5px; color: var(--dim); }
.conn { font: 500 12px var(--round); color: var(--dim); background: var(--bg-2); border-radius: 999px; padding: 5px 11px; }
.conn i { background: var(--mint); }
.conn.busy i { background: var(--lav); animation: bob .9s var(--spring) infinite alternate; }
.conn.down i { background: var(--peach); }
@keyframes bob { to { transform: translateY(-3px); } }

/* greeting: a bouncing blob */
.is-empty .thread { display: flex; align-items: center; justify-content: center; }
.greet { padding-bottom: 40px; }
.glyph { display: block; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%;
  background: radial-gradient(circle at 35% 30%, #fff8 0 8%, transparent 9%), linear-gradient(140deg, var(--peach), var(--lav)); animation: blob 4s ease-in-out infinite; box-shadow: 0 16px 40px -10px rgba(185,164,255,.5); }
@keyframes blob { 50% { border-radius: 55% 45% 45% 55% / 45% 55% 45% 55%; transform: translateY(-4px) rotate(6deg); } }
.greet-title { font: 500 34px/1.1 var(--round); margin: 0; letter-spacing: -.01em; }
.greet-sub { margin: 8px 0 0; color: var(--dim); }
.greet-sub b { color: var(--lav); font-weight: 600; }

/* messages */
.msgs { gap: 16px; }
.msg.user { background: linear-gradient(135deg, #3b2f63, #4a3a7a); border-radius: 22px 22px 6px 22px; padding: 10px 16px; }
.msg.user .tag { font: 500 11px var(--round); color: var(--peach); }
.msg.asst { background: var(--bg-2); border-radius: 22px 22px 22px 6px; padding: 12px 16px; align-self: flex-start; max-width: 92%; }
.work { font-size: 13px; color: var(--dim); }
.work li { display: flex; gap: 8px; align-items: center; }
.work li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex: none; opacity: .7; }
.work li.now::before { background: var(--lav); animation: bob .6s var(--spring) infinite alternate; opacity: 1; }
.thinking { color: var(--dim); font-family: var(--round); }
.caret { background: var(--lav); border-radius: 4px; }
.stopped { margin-top: 6px !important; font: 500 13px var(--round); color: var(--peach); }
.msg.note { align-self: center; font: 500 12.5px var(--round); color: var(--mint); background: rgba(142,227,192,.08); border-radius: 999px; padding: 5px 14px; }
code.ref { font: .85em var(--mono); background: rgba(185,164,255,.16); color: var(--lav); border-radius: 8px; padding: 1px 6px; }

/* composer: floating capsule */
.dock { padding: 0 16px 18px; }
.composer { max-width: 680px; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "banner banner banner" "attach attach attach" "queue queue queue" "plus input send" "hint hint hint"; }
.card-bg { grid-area: 2 / 1 / 5 / -1; background: var(--cap); border-radius: 28px; box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 18px 40px -16px rgba(0,0,0,.8); transition: transform .3s var(--spring); }
.composer:focus-within .card-bg { box-shadow: 0 0 0 2px rgba(185,164,255,.35), 0 18px 40px -16px rgba(0,0,0,.8); }
.c-meta { display: none; }
.c-banner { justify-self: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 6px 3px 12px; margin-bottom: 10px; font: 500 13px var(--round); color: var(--mid); animation: popup .4s var(--spring); max-width: 100%; }
@keyframes popup { from { transform: translateY(10px) scale(.9); opacity: 0; } }
.b-dot.warn { background: var(--peach); } .b-dot.bad { background: var(--rose); } .b-dot.run { background: var(--lav); animation: bob .6s var(--spring) infinite alternate; }
.b-ic { color: var(--lav); }
.b-act { background: var(--lav); color: var(--lav-ink); border-radius: 999px; padding: 0 12px; min-height: 28px; font-weight: 600; margin-left: 4px; }
.b-x { color: var(--dim); width: 28px; font-size: 17px; }
.c-attach { padding: 12px 14px 2px; }
.att { animation: popup .45s var(--spring); }
.att .thumb { border-radius: 18px; }
.att-x { background: var(--cap-2); color: var(--ink); border: 2px solid var(--cap); }
.att.bad .thumb { outline: 2px solid var(--rose); outline-offset: -2px; }
.c-queue { padding: 10px 18px 0; gap: 6px; }
.q { font-size: 13px; }
.q-k { font: 600 11px var(--round); background: var(--lav); color: var(--lav-ink); border-radius: 999px; padding: 0 8px; flex: none; }
.q-n .q-k { background: var(--peach); }
.q-t { color: var(--mid); }
.c-input { align-self: center; padding: 13px 4px; font: 16px/1.45 var(--body); color: var(--ink); }
.c-input::placeholder { color: var(--dimmer); }
.c-plus { align-self: end; margin: 6px 0 6px 6px; border-radius: 50%; background: var(--cap-2); color: var(--lav); transition: transform .35s var(--spring), background .2s; }
.c-plus:hover { background: var(--line); }
.tray-open .c-plus { transform: rotate(45deg); background: var(--lav); color: var(--lav-ink); }

/* send wears the context ring */
.c-send { align-self: end; margin: 4px 4px 4px 0; width: 48px; height: 48px; }
.send-ring { display: block; width: 48px; height: 48px; border-radius: 50%;
  background: conic-gradient(var(--mint) calc(var(--ctxn) * 1%), rgba(255,255,255,.08) 0);
  -webkit-mask: radial-gradient(circle, transparent 0 20.5px, #000 21.5px); mask: radial-gradient(circle, transparent 0 20.5px, #000 21.5px); transition: background .4s; }
.ctx-warn .send-ring { background: conic-gradient(var(--peach) calc(var(--ctxn) * 1%), rgba(255,255,255,.08) 0); }
.compacting .send-ring { background: conic-gradient(var(--lav) 25%, rgba(255,255,255,.08) 0); animation: spin 1s linear infinite; }
.send-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--lav); color: var(--lav-ink); transition: transform .35s var(--spring), background .2s; }
.c-send:disabled .send-ic { background: var(--cap-2); color: var(--dimmer); transform: scale(.92); }
.c-send[data-mode="stop"] .send-ic { background: var(--peach); color: #3a1d10; animation: breathe 1.4s ease-in-out infinite; }
.c-send[data-mode="steer"] .send-ic { background: var(--mint); color: #0f2a20; }
@keyframes breathe { 50% { transform: scale(.9); } }
.c-send.holding .send-ic { background: var(--peach); }
.c-hint { text-align: center; font: 500 12.5px var(--round); color: var(--dim); padding-top: 8px; }
.c-hint kbd { color: var(--mid); background: var(--bg-2); border-radius: 6px; padding: 0 5px; }

/* files popover */
.pop { background: var(--bg-2); border: 1px solid var(--line); border-radius: 22px; padding: 8px; bottom: calc(100% + 4px); box-shadow: 0 20px 50px -14px rgba(0,0,0,.8); animation: popup .35s var(--spring); }
.vp-desktop .pop { left: max(16px, calc(50% - 340px)); width: 420px; }

/* the tray: one place for every option */
.scrim { background: rgba(10,6,18,.55); backdrop-filter: blur(2px); }
.tray { display: block; position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 100%; max-height: 82%; overflow: auto;
  background: var(--bg-2); border-radius: 30px 30px 0 0; padding: 8px 16px 28px; transform: translateY(105%); transition: transform .45s var(--spring); box-shadow: 0 -20px 60px -20px rgba(0,0,0,.8); }
.tray-open .tray { transform: none; }
.vp-desktop .tray { bottom: 96px; border-radius: 30px; width: 460px; }
.tray-open .dock { z-index: 26; }
.tr-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 12px; }
.tr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.tr-act { border: 0; background: var(--cap); border-radius: 20px; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: 500 14px var(--round); color: var(--ink); transition: transform .3s var(--spring); }
.tr-act svg { color: var(--lav); width: 24px; height: 24px; }
.tr-act:active { transform: scale(.95); }
.tr-sec { background: var(--cap); border-radius: 22px; padding: 6px; margin-bottom: 10px; }
.tr-sec.locked .p-list, .tr-sec.locked .p-seg { opacity: .45; pointer-events: none; }
.p-head { font: 500 13px var(--round); color: var(--dim); padding: 8px 12px 4px; }
.p-val { color: var(--mid); }
.p-row { padding: 0 12px; border-radius: 16px; font-size: 15px; }
.p-row:hover { background: rgba(255,255,255,.04); }
.p-row.sel { background: rgba(185,164,255,.14); }
.p-note { font-size: 12.5px; color: var(--dim); }
.p-check { color: var(--lav); }
.p-path { font: 12.5px var(--mono); }
.p-path .dir { color: var(--dim); }
.p-row.file svg { color: var(--lav); flex: none; }
.p-seg { margin: 4px 6px 6px; background: var(--bg-2); border-radius: 999px; padding: 4px; gap: 2px; }
.p-seg button { background: transparent; border-radius: 999px; color: var(--dim); font: 500 13.5px var(--round); transition: background .3s var(--spring); }
.p-seg button.on { background: var(--lav); color: var(--lav-ink); }
.p-bar { margin: 6px 12px; height: 10px; border-radius: 6px; background: var(--bg-2); }
.p-bar span { background: linear-gradient(90deg, var(--mint), var(--lav)); border-radius: 6px; }
.p-metrics { padding: 4px 12px; }
.p-metrics small { font-size: 11.5px; color: var(--dim); }
.p-metrics b { font: 500 15px var(--round); }
.p-note2 { font-size: 12.5px; color: var(--dim); margin: 6px 12px; }
.p-btn { background: var(--lav); color: var(--lav-ink); border-radius: 999px; font: 600 14px var(--round); margin: 4px 0 2px; }
.p-btn:disabled { background: var(--bg-2); color: var(--dimmer); }
.p-x { color: var(--dim); }
.p-empty { padding: 4px 12px; color: var(--dim); }
mark { color: var(--lav); }

.toast { background: var(--lav); color: var(--lav-ink); font: 500 13.5px var(--round); padding: 9px 18px; border-radius: 999px; box-shadow: 0 12px 30px -10px rgba(185,164,255,.5); }
.toast.show { transition: .45s var(--spring); }

/* phone */
.vp-phone .dock { padding: 0 12px 28px; }