:root {
  color-scheme: light;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #29242c;
  background: #f6f3ef;
  --canvas:#f6f3ef; --paper:#fffcf8; --line:#e0d8d1; --quiet:#655c65;
  --sidebar:#251e2c; --sidebar-text:#f9f3fb; --sidebar-muted:#c8bccc; --sidebar-line:#504356;
  --accent:#dff79b; --accent-hover:#d3ef81; --action:#30213b; --focus:#8755a9;
}
:root[data-palette=pino] { --sidebar:#172b24; --sidebar-text:#f3faf4; --sidebar-muted:#b9cfc1; --sidebar-line:#41594e; --accent:#c4edb7; --accent-hover:#afe59e; --action:#204334; --focus:#307953; }
:root[data-palette=tinta] { --sidebar:#20283a; --sidebar-text:#f2f5fd; --sidebar-muted:#bdc8e0; --sidebar-line:#48546d; --accent:#d9e7ff; --accent-hover:#c7daff; --action:#283858; --focus:#4c6eaa; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; }
button,input,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.54; }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.app { display:grid; grid-template: minmax(0,1fr) / 276px minmax(0,1fr); height:100vh; height:100dvh; }
aside { min-height:0; display:flex; flex-direction:column; padding:24px 16px 14px; background:var(--sidebar); color:var(--sidebar-text); }
aside :focus-visible { outline-color:var(--accent); }
.sidebar-top { display:flex; align-items:center; gap:11px; padding:0 5px; margin-bottom:27px; }
.brand-mark { display:grid; place-items:center; width:37px; height:37px; flex:none; border-radius:11px; background:var(--accent); color:var(--sidebar); }
.brand-mark svg { width:32px; height:32px; }
.wordmark { font-size:24px; font-weight:750; letter-spacing:-.04em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tools { display:flex; gap:7px; }
.icon,.pill,.solid,.send,.new-button { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--paper); border-radius:9px; }
.icon { width:38px; height:38px; flex:none; }
.icon svg,.send svg,.profile-icon svg,#new-icon svg { width:17px; height:17px; display:block; }
.icon:hover,.pill:hover { background:#ede7e2; }
.tools .icon { background:transparent; color:inherit; border-color:var(--sidebar-line); }
.tools .icon:hover { background:var(--sidebar-line); }
.new-button { flex:1; gap:7px; color:var(--sidebar); background:var(--accent); border-color:var(--accent); font-size:13px; font-weight:680; }
.new-button:hover { background:var(--accent-hover); }
#search-wrap { margin:10px 0 0; }
#search { width:100%; border:1px solid var(--sidebar-line); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; }
#search::placeholder { color:var(--sidebar-muted); }
#primary { margin:23px 0 24px; }
.lead,.thread,.profile { width:100%; display:flex; align-items:center; gap:10px; text-align:left; border:1px solid transparent; border-radius:10px; background:transparent; color:inherit; padding:8px; }
.lead { border-color:var(--sidebar-line); padding:10px 8px; }
.lead.current,.thread.current,.profile[aria-current] { background:#ffffff1c; border-color:var(--sidebar-line); }
.lead:hover,.thread:hover,.profile:hover { background:#ffffff15; }
.lead .avatar { width:37px; height:37px; }
.lead-label,.thread>span:nth-child(2),.profile-label { min-width:0; flex:1; }
.avatar,.initials { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:10px; background:var(--color); color:white; }
.avatar svg { width:71%; height:71%; }
.nav-label { color:var(--sidebar-muted); font-weight:650; font-size:12px; margin:0 8px 5px; }
#agents { overflow:auto; min-height:0; }
.nav-empty { font-size:13px; color:var(--sidebar-muted); margin:10px 8px; }
.lead strong,.thread strong,.profile strong,.lead small,.thread small,.profile small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lead strong,.thread strong,.profile strong { font-weight:650; font-size:14px; }
.lead small,.thread small,.profile small { font-size:12px; color:var(--sidebar-muted); }
.profile { margin-top:auto; border-top-color:var(--sidebar-line); border-radius:0 0 10px 10px; padding-top:13px; }
.initials { background:var(--sidebar-line); color:inherit; font-weight:700; font-size:12px; }
.profile-icon { color:var(--sidebar-muted); }
main { min-height:0; min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.top { display:flex; align-items:center; gap:12px; justify-content:space-between; padding:16px clamp(16px,4vw,55px); min-height:77px; border-bottom:1px solid var(--line); background:var(--paper); }
.active { display:flex; align-items:center; gap:11px; min-width:0; }
.active .avatar { width:41px; height:41px; }
.active-label { min-width:0; }
.active h1 { font-size:20px; letter-spacing:-.025em; line-height:1.2; margin:0 0 2px; }
.active h1,.active p { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.active p { margin:0; color:var(--quiet); font-size:13px; }
.header-tools { display:flex; align-items:center; gap:13px; flex:none; }
.mode { font-size:12px; color:var(--quiet); white-space:nowrap; }
.pill { padding:6px 11px; font-size:13px; font-weight:600; }
#menu { display:none; }
.scroll { overflow-y:auto; scrollbar-gutter:stable; }
.messages,.footer { width:min(100% - 56px,850px); margin:auto; }
.messages { display:flex; flex-direction:column; align-items:flex-start; gap:13px; padding:24px 0 32px; }
.bubble,.approval { max-width:min(650px,100%); overflow-wrap:anywhere; }
.bubble { background:var(--paper); border:1px solid var(--line); border-radius:4px 13px 13px 13px; padding:11px 14px; white-space:pre-wrap; }
.bubble.user { align-self:flex-end; color:#fff; background:var(--action); border-color:var(--action); border-radius:13px 4px 13px 13px; max-width:90%; }
.bubble.intro { white-space:normal; }
.intro p,.intro ol { margin:0 0 9px; }
.intro p:last-child { margin-bottom:0; }
.intro ol { padding-left:20px; }
.intro li+li { margin-top:4px; }
.intro ul { padding-left:17px; }
.demo-label { font-size:12px; font-weight:650; color:var(--quiet); }
.approval { width:min(100%,650px); border:1px solid var(--line); background:var(--paper); border-radius:14px; padding:15px; }
.approval h2 { font-size:16px; margin:0; }
.approval p { color:var(--quiet); margin:1px 0 11px; font-size:13px; }
.option { display:flex; align-items:center; gap:9px; padding:5px 8px; min-height:34px; margin:3px 0; cursor:pointer; border-radius:8px; }
.option:hover,.option:has(:checked) { background:#eee9e3; }
.option input { margin:0; width:17px; height:17px; accent-color:var(--action); flex:none; }
.card-actions { display:flex; justify-content:flex-end; margin-top:12px; }
.solid,.send { background:var(--action); color:white; border-color:var(--action); }
.solid:hover,.send:hover { filter:brightness(1.22); }
.solid { padding:8px 13px; font-size:13px; font-weight:650; }
.footer { padding:9px 0 max(15px,env(safe-area-inset-bottom)); }
#error:not(:empty) { padding:5px 8px; color:#a12636; font-size:13px; }
#composer { display:flex; align-items:flex-end; gap:8px; border:1px solid var(--line); background:var(--paper); border-radius:13px; padding:6px 6px 6px 13px; }
#composer:focus-within { border-color:var(--focus); }
#message { width:100%; max-height:130px; resize:none; border:0; background:transparent; outline:none; padding:5px 2px; field-sizing:content; }
#message::placeholder { color:var(--quiet); }
.send { width:34px; height:34px; flex:none; }
dialog { width:min(470px,calc(100% - 28px)); border:1px solid var(--line); background:var(--paper); border-radius:14px; padding:19px; color:inherit; }
dialog::backdrop { background:#241b2b65; }
.panel-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.panel-header h2 { font-size:19px; margin:0; }
.panel-copy { color:var(--quiet); margin:12px 0; }
.memory-form { display:flex; gap:8px; }
.memory-form input,.memory-form select,.setting-field input,.setting-field select,.setting-field textarea { min-width:0; width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:var(--paper); }
.memory-item { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin:10px 0; overflow-wrap:anywhere; }
.memory-item button { flex:none; }
main.configuring { display:block; overflow:auto; }
.configuring>.top,.configuring>.scroll,.configuring>.footer { display:none; }
#settings-view { width:min(100% - 56px,790px); margin:0 auto; padding:36px 0 44px; }
.settings-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.settings-heading h1 { font-size:32px; letter-spacing:-.035em; line-height:1.16; margin:0 0 7px; }
.settings-heading p,.section-intro p { color:var(--quiet); margin:0; }
.settings-heading button { white-space:nowrap; }
.settings-nav { display:flex; flex-wrap:wrap; gap:5px 17px; border-bottom:1px solid var(--line); }
.settings-tab { background:none; border:0; border-bottom:2px solid transparent; padding:8px 5px; color:var(--quiet); }
.settings-tab:hover,.settings-tab[aria-pressed=true] { color:var(--action); border-bottom-color:var(--action); }
.settings-tab[aria-pressed=true] { font-weight:700; }
#settings-content { max-width:560px; }
.section-intro { margin:24px 0 18px; }
.section-intro h2 { margin:0 0 4px; font-size:20px; }
.setting-field { display:grid; gap:5px; margin-bottom:14px; }
.field-title { font-weight:650; font-size:13px; }
.field-hint { color:var(--quiet); font-size:12px; margin:0 0 12px; }
.setting-field .field-hint { margin:0; }
.setting-field textarea { resize:vertical; }
.setting-toggle { display:flex; align-items:center; gap:8px; margin:16px 0 4px; }
.setting-toggle input { width:17px; height:17px; margin:0; accent-color:var(--action); }
.config-actions { display:flex; align-items:center; gap:12px; margin-top:21px; }
.save-status { font-size:13px; color:var(--quiet); }
@media(max-width:740px) {
  .app { grid-template-columns:minmax(0,1fr); }
  aside { display:none; position:fixed; inset:0 auto 0 0; width:min(290px,86vw); z-index:2; box-shadow:0 0 0 100vmax #241b2b72; }
  aside.open { display:flex; }
  #menu { display:inline-flex; }
  .top { justify-content:flex-start; padding:12px; gap:8px; min-height:64px; }
  .header-tools { margin-left:auto; }
  .active .avatar,.mode { display:none; }
  .active h1 { font-size:17px; }
  .active p { font-size:12px; }
  .messages,.footer,#settings-view { width:calc(100% - 26px); }
  .messages { padding-top:14px; }
  #settings-view { padding-top:22px; }
  .settings-heading h1 { font-size:25px; }
  .settings-heading { flex-wrap:wrap; gap:10px; }
  .bubble { font-size:14px; }
}

@media (any-hover:hover) and (any-pointer:fine) and (prefers-reduced-motion:no-preference) {
  :root[data-motion=on] .avatar-eyes {
    transition:transform 140ms cubic-bezier(0.23,1,0.32,1);
  }
}