:root{--ink:#231f20;--muted:#57534e;--faint:#78716c;--bg:#fff;--surface:#f8f8f8;--s2:#efefef;--border:#e4e4e4;--strong:#8a8586;--yellow:#facc15;--pine:#3b453e;--agent:#f1efe9;--human:#e8ece9;--ok:#15803d;--okbg:#dcfce7;--warn:#854d0e;--warnbg:#fef3c7;--bad:#b91c1c;--badbg:#fee2e2;--me:#231f20}
@media (prefers-color-scheme:dark){:root{--ink:#f5f3f3;--muted:#b3adae;--faint:#8f898a;--bg:#121011;--surface:#1c1a1b;--s2:#262324;--border:#353132;--strong:#6b6566;--pine:#8fb39a;--agent:#24211d;--human:#1d2420;--okbg:#12301c;--ok:#4ade80;--warnbg:#3a2c0a;--warn:#fbbf24;--badbg:#3b1414;--bad:#f87171;--me:#f5f3f3}}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.btn{min-height:40px;padding:0 14px;border-radius:6px;border:1px solid var(--strong);background:var(--bg);font-weight:600}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.accent{background:var(--yellow);color:#231f20;border-color:var(--yellow)}
.btn:disabled{opacity:.5;cursor:default}
input,select,textarea{min-height:40px;padding:8px 10px;border:1px solid var(--strong);border-radius:6px;background:var(--bg);width:100%}
textarea{resize:vertical}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.layout{display:flex;height:100vh;height:100dvh}
.side{width:260px;flex-shrink:0;border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;overflow:auto}
.brand{padding:16px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--border)}
.logo{width:34px;height:34px;border-radius:8px;background:var(--yellow);color:#231f20;display:flex;align-items:center;justify-content:center;font-weight:800}
.brand small{display:block;color:var(--muted);font-size:12px}
.sect{padding:14px 16px 6px;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;border:0;background:none;width:100%;text-align:left;font-weight:500}
.nav.on{background:var(--s2);font-weight:700}
.dot{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--yellow);color:#231f20;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.side .foot{margin-top:auto;padding:12px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.head{height:60px;flex-shrink:0;padding:0 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.head h1{margin:0;font-size:17px}
.head .meta{color:var(--muted);font-size:12px}
.back{display:none}
.scroll{flex:1;overflow:auto;padding:16px;background:var(--surface)}
.msgs{display:flex;flex-direction:column;gap:8px}
.msg{max-width:min(620px,86%);padding:8px 11px;border-radius:8px;background:var(--human);line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.msg.agent{background:var(--agent);border:1px solid var(--border)}
.msg.mine{align-self:flex-end;background:var(--me);color:var(--bg)}
.msg.mention{box-shadow:0 0 0 2px var(--yellow)}
.msg .who{display:block;font-size:11px;font-weight:700;color:var(--pine);margin-bottom:2px}
.msg.agent .who{color:var(--ink);letter-spacing:.06em}
.msg.mine .who{color:var(--yellow)}
.msg time{display:block;text-align:right;font-size:11px;opacity:.7;margin-top:2px}
.compose{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--bg)}
.compose textarea{min-height:42px;max-height:140px;border-radius:20px;padding:10px 14px}
.cards{display:grid;gap:10px}
.card{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.card.click{cursor:pointer;text-align:left}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--s2)}
.pill.ok{background:var(--okbg);color:var(--ok)}.pill.warn{background:var(--warnbg);color:var(--warn)}.pill.bad{background:var(--badbg);color:var(--bad)}
.muted{color:var(--muted)}.small{font-size:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.form{display:grid;gap:8px;max-width:520px}
.err{color:var(--bad);font-size:13px;min-height:18px}
.center{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--surface)}
.box{width:100%;max-width:380px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:24px;display:grid;gap:10px}
table{width:100%;border-collapse:collapse;background:var(--bg)}
td,th{padding:8px;border-bottom:1px solid var(--border);text-align:left;font-size:13px}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;z-index:9}
@media (max-width:760px){
 .side{width:100%;border-right:0}
 .layout.inview .side{display:none}
 .layout:not(.inview) .main{display:none}
 .back{display:inline-flex}
 .grid2{grid-template-columns:1fr}
}
/* v1.1 design pass */
body{-webkit-font-smoothing:antialiased}
.navl{display:inline-flex;align-items:center;gap:10px}
.nav{border-radius:8px;margin:1px 8px;width:calc(100% - 16px);padding:9px 10px;color:var(--muted)}
.nav:hover{background:var(--s2)}
.nav.on{background:var(--ink);color:var(--bg)}
.nav.on .dot{background:var(--yellow);color:#231f20}
.icon-btn{width:40px;padding:0;justify-content:center;align-items:center}
.msgs{gap:2px}
.daysep{display:flex;justify-content:center;margin:14px 0 8px}
.daysep span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--s2);padding:3px 10px;border-radius:999px}
.mrow{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.mrow.cont{margin-top:2px}
.mrow.mine{justify-content:flex-end}
.mrow .msg{max-width:min(620px,80%)}
.av{width:30px;height:30px;flex-shrink:0;border-radius:999px;background:var(--human);color:var(--pine);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.av.bot{background:var(--agent);color:var(--ink);border:1.5px solid var(--ink)}
.av.ghost{visibility:hidden}
.msg{border-radius:14px;padding:8px 12px;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.mrow:not(.mine) .msg{border-bottom-left-radius:4px}
.mrow.mine .msg{border-bottom-right-radius:4px}
.msg time{display:inline;float:right;margin:6px 0 0 10px;font-size:10.5px}
.compose{align-items:flex-end}
.send{width:44px;height:44px;padding:0;border-radius:999px;display:flex;align-items:center;justify-content:center}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg);font-weight:600;font-size:13px}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.card.trip{transition:border-color .15s}
.card.trip:hover{border-color:var(--strong)}
.card.urgent{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow)}
.empty{text-align:center;color:var(--muted);padding:40px 16px;font-size:13px}
.head{background:var(--bg)}
.head h1{font-size:16px}
.box{box-shadow:0 12px 32px rgba(35,31,32,.10);border-radius:16px;padding:28px}
.logo{box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
details>summary{cursor:pointer;list-style:none}
details>summary::-webkit-details-marker{display:none}
@media (max-width:760px){.mrow .msg{max-width:84%}}