/* ============================================================================
   1bot · base: reset, app shell (sidebar · main · inspector), shared components.
   Screens add their own file in css/screens/ and only use these classes + tokens.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-0); color: var(--t-1);
  font: var(--w-ui) var(--fs-13)/1.5 var(--f-ui); font-feature-settings: var(--ff-ui);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow: hidden; cursor: default; user-select: none;
}
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: default; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: rgba(139, 131, 255, 0.35); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-ctl); }
.sel { user-select: text; }

/* scrollbars: thin, only on hover */
.scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.scroll:hover { scrollbar-color: rgba(255,255,255,.12) transparent; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
.scroll:hover::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.12); }

/* ---------- ambient: aurora + grain behind the glass layer ---------- */
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ambient i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
.ambient i:nth-child(1) { width: 520px; height: 520px; left: -160px; top: -200px; background: radial-gradient(circle, rgba(99,102,241,.55), transparent 65%); animation: drift1 26s var(--ease-std) infinite alternate; }
.ambient i:nth-child(2) { width: 420px; height: 420px; left: 40px; bottom: -220px; background: radial-gradient(circle, rgba(34,211,238,.32), transparent 65%); animation: drift2 32s var(--ease-std) infinite alternate; }
.ambient i:nth-child(3) { width: 360px; height: 360px; right: -140px; top: 30%; background: radial-gradient(circle, rgba(168,85,247,.28), transparent 65%); animation: drift1 38s var(--ease-std) infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(60px, 40px) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-30px, -50px) scale(.92); } }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- app shell ---------- */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: var(--sb-w, 248px) minmax(0, 1fr) var(--in-w, 0px);
  height: 100vh; transition: grid-template-columns var(--d-4) var(--ease-out); }
.app.insp-on { --in-w: 360px; }

/* sidebar: glass, dimmer than content */
.sb { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 0 10px 10px;
  background: linear-gradient(180deg, rgba(10,11,14,.55), rgba(10,11,14,.72)); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--line-1); }
.sb-top { height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 6px; -webkit-app-region: drag; }
.lights { display: flex; gap: 8px; margin-right: auto; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #3A3C44; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.4); }
.app:hover .lights i:nth-child(1) { background: #FF5F57; } .app:hover .lights i:nth-child(2) { background: #FEBC2E; } .app:hover .lights i:nth-child(3) { background: #28C840; }
.lights i { transition: background var(--d-2) var(--ease-out); }

.presence { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; margin: 0 0 6px; border-radius: var(--r-card); transition: background var(--d-1); }
.presence:hover { background: rgba(255,255,255,.035); }
.presence .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.presence .who b { font: var(--w-semi) 14px/1.2 var(--f-display); letter-spacing: -0.01em; }
.presence .who span { font-size: var(--fs-12); color: var(--t-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presence .who span em { font-style: normal; color: var(--t-2); }

.sb-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 10px; margin: 0 0 10px; border-radius: var(--r-ctl);
  background: rgba(255,255,255,.04); border: 1px solid var(--line-1); color: var(--t-3); transition: background var(--d-1), border-color var(--d-1); }
.sb-search:hover { background: rgba(255,255,255,.06); border-color: var(--line-2); }
.sb-search > span:first-of-type { flex: 1; text-align: left; }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-i { position: relative; display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px; border-radius: var(--r-ctl);
  color: var(--t-2); font-size: var(--fs-13); transition: background var(--d-1), color var(--d-1); }
.nav-i svg { color: var(--t-3); flex: none; transition: color var(--d-1); }
.nav-i:hover { background: rgba(255,255,255,.04); color: var(--t-1); }
.nav-i.on { background: rgba(255,255,255,.075); color: var(--t-1); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.nav-i.on svg { color: var(--t-1); }
.nav-i .n { margin-left: auto; font: 500 11px/1 var(--f-mono); color: var(--t-3); }
.nav-i .n.red { color: var(--red); }
.nav-i .badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center;
  font: 600 10.5px/1 var(--f-mono); color: #fff; background: var(--red); box-shadow: 0 0 12px rgba(255,97,102,.45); }
.sb-sec { margin: 16px 0 4px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; }
.sb-scroll { flex: 1; min-height: 0; margin: 0 -10px; padding: 0 10px; }
.sb-foot { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line-1); margin: 6px -10px 0; padding: 10px 10px 0; }

.sync { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-ctl); font-size: var(--fs-12); color: var(--t-3); }
.sync:hover { background: rgba(255,255,255,.035); }
.sync b { color: var(--t-2); font-weight: var(--w-ui); }
.pulse { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green); }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--green); opacity: 0; animation: ping 2.4s var(--ease-out) infinite; }
@keyframes ping { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.minibar { height: 3px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 5px; }
.minibar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--orb-a), var(--orb-c)); position: relative; overflow: hidden; }
.minibar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-100%); animation: sweep 1.8s var(--ease-std) infinite; }
@keyframes sweep { to { transform: translateX(100%); } }
.me-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-ctl); }
.me-row:hover { background: rgba(255,255,255,.035); }
.me-row .nm { flex: 1; font-size: var(--fs-13); color: var(--t-2); }

/* main column */
.main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-2); }
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 20; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 20px;
  -webkit-app-region: drag; }
.topbar::before { content: ""; position: absolute; inset: 0 0 -20px 0; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, var(--bg-2) 40%, rgba(13,14,18,0)); }
.topbar.scrolled::before { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); background: linear-gradient(180deg, rgba(13,14,18,.86) 30%, rgba(13,14,18,0)); }
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-13); color: var(--t-3); }
.crumbs a { padding: 3px 6px; margin: 0 -2px; border-radius: 6px; transition: color var(--d-1), background var(--d-1); }
.crumbs a:hover { color: var(--t-1); background: rgba(255,255,255,.05); }
.crumbs .cur { color: var(--t-1); font-weight: var(--w-med); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs svg { color: var(--t-5); }
.tb-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; -webkit-app-region: no-drag; }
.view { position: relative; flex: 1; min-height: 0; }
.view > .page { position: absolute; inset: 0; }

/* inspector */
.insp { position: relative; min-width: 0; overflow: hidden; background: var(--bg-1); border-left: 1px solid var(--line-1); }
.insp-in { position: absolute; top: 0; bottom: 0; right: 0; width: 360px; display: flex; flex-direction: column; }
.insp-head { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--line-1); }
.insp-head b { font-weight: var(--w-med); }
.insp-body { flex: 1; min-height: 0; padding: 14px 14px 24px; }

/* ---------- type ---------- */
.eyebrow { font: 500 var(--fs-11)/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--t-3); }
.h-display { font: 500 var(--fs-44)/1.06 var(--f-display); letter-spacing: -0.035em; color: var(--t-1); margin: 0; }
.h-page { font: 600 var(--fs-26)/1.15 var(--f-display); letter-spacing: -0.025em; margin: 0; }
.h-sec { font: 600 var(--fs-15)/1.3 var(--f-display); letter-spacing: -0.01em; margin: 0; color: var(--t-1); }
.h-card { font: 600 var(--fs-13)/1.35 var(--f-ui); margin: 0; color: var(--t-1); }
.meta { font-size: var(--fs-12); color: var(--t-3); }
.mono { font-family: var(--f-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }
.dim { color: var(--t-3); } .dimmer { color: var(--t-4); }
.two-tone b { color: var(--t-1); font-weight: inherit; } .two-tone { color: var(--t-3); }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.num { font-family: var(--f-display); font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }

/* ---------- surfaces ---------- */
.card { position: relative; background: var(--e-1); border: 1px solid var(--line-1); border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 var(--rim); }
.card.hov { transition: background var(--d-2) var(--ease-out), border-color var(--d-2), transform var(--d-2) var(--ease-out); }
.card.hov:hover { background: var(--e-2); border-color: var(--line-2); }
.card.hov:active { transform: scale(.992); }
.glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line-2); box-shadow: var(--glass-edge), var(--lift); }
.well { background: rgba(0,0,0,.22); border: 1px solid var(--line-1); border-radius: var(--r-card); }
.hr { height: 1px; background: var(--line-1); border: 0; margin: 0; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-ctl);
  background: var(--e-2); border: 1px solid var(--line-2); color: var(--t-1); font-size: var(--fs-13); font-weight: var(--w-ui); white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: background var(--d-1), border-color var(--d-1), opacity var(--d-1), transform var(--d-1) var(--ease-out); }
.btn:hover { background: var(--e-3); border-color: var(--line-3); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--paper); color: var(--ink); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 20px -6px rgba(238,240,244,.35); }
.btn.primary:hover { background: #fff; }
.btn.accent { background: var(--accent); color: #0B0A1A; border-color: transparent; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--t-2); }
.btn.ghost:hover { background: rgba(255,255,255,.06); color: var(--t-1); }
.btn.sm { height: 26px; padding: 0 9px; font-size: var(--fs-12); border-radius: 7px; }
.btn.icon { width: 30px; padding: 0; } .btn.icon.sm { width: 26px; }
.btn.danger { color: var(--red); }
.btn svg { flex: none; }
.kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; font: 500 10.5px/1 var(--f-mono); color: var(--t-3);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid var(--line-2); box-shadow: 0 1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }
.kbds { display: inline-flex; gap: 3px; }

.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-chip); font-size: var(--fs-12); font-weight: var(--w-ui);
  color: var(--t-2); background: rgba(255,255,255,.05); border: 1px solid var(--line-1); white-space: nowrap; }
.chip.sm { height: 20px; padding: 0 6px; font-size: 11px; }
.chip.red { color: var(--red-tx); background: var(--red-bg); border-color: var(--red-line); }
.chip.amber { color: var(--amber-tx); background: var(--amber-bg); border-color: var(--amber-line); }
.chip.green { color: var(--green-tx); background: var(--green-bg); border-color: var(--green-line); }
.chip.accent { color: var(--accent-2); background: var(--accent-bg); border-color: var(--accent-line); }
.chip.ghost { background: transparent; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0; }

.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid var(--line-1); }
.seg button { height: 24px; padding: 0 10px; border-radius: 7px; font-size: var(--fs-12); color: var(--t-3); transition: background var(--d-2) var(--ease-out), color var(--d-1); }
.seg button:hover { color: var(--t-1); }
.seg button.on { background: var(--e-3); color: var(--t-1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.4); }

.row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: var(--r-ctl); transition: background var(--d-1); }
.row:hover { background: rgba(255,255,255,.04); }

/* marks */
.orgmark { display: inline-grid; place-items: center; flex: none; width: var(--sz, 20px); height: var(--sz, 20px); border-radius: calc(var(--sz, 20px) * .28);
  font: 650 calc(var(--sz, 20px) * .42)/1 var(--f-display); letter-spacing: -0.02em; color: #0B0C10;
  background: linear-gradient(145deg, color-mix(in oklab, var(--c) 100%, #fff 18%), var(--c)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(0,0,0,.25); }
.orgmark.soft { color: var(--c); background: color-mix(in oklab, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 34%, transparent); }
.avatar { display: inline-grid; place-items: center; flex: none; width: var(--sz, 24px); height: var(--sz, 24px); border-radius: 50%; overflow: hidden;
  font: 600 calc(var(--sz, 24px) * .38)/1 var(--f-display); color: rgba(255,255,255,.92);
  background: radial-gradient(circle at 30% 25%, hsl(var(--h) 70% 68% / .9), hsl(var(--h) 55% 38%)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.thumb { position: relative; overflow: hidden; border-radius: var(--r-ctl); background: var(--e-2); border: 1px solid var(--line-1); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.lock::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); background: rgba(10,11,14,.35); }
.src-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid var(--line-1); color: var(--t-3); flex: none; }

/* ---------- the orb ---------- */
.orb { --sz: 28px; position: relative; flex: none; width: var(--sz); height: var(--sz); border-radius: 50%; isolation: isolate;
  background: radial-gradient(circle at 72% 78%, rgba(34,211,238,.95), transparent 52%), radial-gradient(circle at 20% 80%, rgba(236,72,153,.85), transparent 46%), linear-gradient(135deg, #6366F1, #A855F7);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 calc(var(--sz) * .7) rgba(99,102,241,.35);
  animation: breathe 5.5s var(--ease-std) infinite; }
.orb::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; z-index: -1; filter: blur(calc(var(--sz) * .08)); mix-blend-mode: screen; opacity: .9;
  background: conic-gradient(from 0deg, rgba(34,211,238,.0), rgba(34,211,238,.75), rgba(236,72,153,.0) 40%, rgba(255,181,71,.55) 60%, rgba(99,102,241,0) 80%);
  animation: spin 14s linear infinite; }
.orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.9), rgba(255,255,255,.2) 17%, transparent 40%); }
.orb[data-s="think"] { animation: breathe 1.4s var(--ease-std) infinite; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 0 calc(var(--sz) * 1.2) rgba(139,131,255,.6); }
.orb[data-s="think"]::before { animation-duration: 1.6s; opacity: 1; }
.orb[data-s="listen"] { animation: listen 0.9s var(--ease-std) infinite alternate; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes listen { to { transform: scale(1.1); } }

/* AI presence ring (only while thinking / listening) */
.ai-ring { position: relative; }
.ai-ring::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: var(--ai-sweep); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--d-3) var(--ease-out); }
.ai-ring::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; pointer-events: none; opacity: 0; z-index: -1;
  background: var(--ai-sweep); filter: blur(18px); transition: opacity var(--d-3) var(--ease-out); }
.ai-ring.live::before { opacity: 1; animation: ai-rot 2.4s linear infinite; }
.ai-ring.live::after { opacity: .38; animation: ai-rot 2.4s linear infinite; }
@keyframes ai-rot { to { --ai-angle: 360deg; } }

.shimmer { background: linear-gradient(90deg, var(--t-3) 0%, var(--t-3) 40%, var(--t-1) 50%, var(--t-3) 60%, var(--t-3) 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.8s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ---------- page + reveal motion ---------- */
.page { opacity: 1; }
.page.out { animation: page-out 140ms var(--ease-std) forwards; pointer-events: none; }
@keyframes page-out { to { opacity: 0; transform: translateY(-4px); filter: blur(2px); } }
.page.in [data-r] { animation: rise var(--d-4) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 34ms + 40ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.fade-in { animation: fade var(--d-3) var(--ease-out) both; }
@keyframes fade { from { opacity: 0; } }
.pop-in { animation: pop var(--d-3) var(--ease-spring) both; }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(4px); } }

/* ---------- tooltip ---------- */
[data-tip] { position: relative; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; z-index: 50; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap;
  padding: 5px 8px; border-radius: 7px; font: 500 11.5px/1.2 var(--f-ui); color: var(--t-1); background: var(--e-4); border: 1px solid var(--line-2);
  box-shadow: var(--lift-sm); pointer-events: none; animation: pop 160ms var(--ease-out) both; animation-delay: 380ms; }
[data-tip-pos="bottom"]:hover::after { bottom: auto; top: calc(100% + 8px); }

/* ---------- command palette ---------- */
.pal-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(4,5,7,.45); opacity: 0; pointer-events: none; transition: opacity var(--d-3) var(--ease-out); }
.pal-scrim.on { opacity: 1; pointer-events: auto; }
.pal { position: fixed; z-index: 61; left: 50%; top: 12vh; width: min(820px, calc(100vw - 80px)); transform: translateX(-50%) scale(.97); opacity: 0; pointer-events: none;
  border-radius: var(--r-sheet); background: var(--glass-bg-strong); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--line-2); box-shadow: var(--glass-edge), 0 40px 120px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4);
  transition: opacity 120ms var(--ease-out), transform 160ms var(--ease-out); overflow: hidden; }
.pal.on { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }
.pal-in { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 18px; border-bottom: 1px solid var(--line-1); }
.pal-in input { flex: 1; background: none; border: 0; outline: 0; font: 450 17px/1 var(--f-ui); color: var(--t-1); letter-spacing: -0.01em; }
.pal-in input::placeholder { color: var(--t-4); }
.pal-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; height: 420px; }
.pal-list { padding: 8px; border-right: 1px solid var(--line-1); }
.pal-grp { padding: 10px 10px 4px; }
.pal-it { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 9px; color: var(--t-2); }
.pal-it .tx { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.pal-it .tx b { font-weight: var(--w-ui); color: var(--t-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-it .tx span { font-size: var(--fs-12); color: var(--t-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-it.on { background: rgba(255,255,255,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.pal-it .ret { opacity: 0; } .pal-it.on .ret { opacity: 1; }
.pal-prev { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.pal-foot { height: 38px; display: flex; align-items: center; gap: 14px; padding: 0 14px; border-top: 1px solid var(--line-1); font-size: var(--fs-12); color: var(--t-4); }
.pal-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- toast ---------- */
.toasts { position: fixed; z-index: 70; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 14px; border-radius: 12px; animation: pop var(--d-3) var(--ease-spring) both; }
.toast.bye { animation: page-out 200ms var(--ease-std) forwards; }

/* ---------- composer (shared by Today + Ask) ---------- */
.composer { position: relative; display: flex; flex-direction: column; border-radius: 18px; background: rgba(22,23,29,.78); backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--line-2); box-shadow: var(--glass-edge), 0 24px 60px -24px rgba(0,0,0,.8);
  transition: border-color var(--d-2), box-shadow var(--d-2); }
.composer:focus-within { border-color: var(--line-3); }
.composer textarea { resize: none; border: 0; outline: 0; background: none; padding: 14px 16px 6px; min-height: 48px; max-height: 180px; font: 450 var(--fs-15)/1.5 var(--f-ui); color: var(--t-1); }
.composer textarea::placeholder { color: var(--t-4); }
.composer .c-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px 10px; }
.composer .c-bar .sp { flex: 1; }
.send { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); transition: transform var(--d-1) var(--ease-out), opacity var(--d-1); }
.send:active { transform: scale(.92); }
.send[disabled] { opacity: .25; }
.scope { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 6px; border-radius: 7px; font-size: var(--fs-12); color: var(--t-2); background: rgba(255,255,255,.05); border: 1px solid var(--line-1); }