:root{--navy:#063447;--teal:#0f97a8;--line:#e3e8ec;--bg:#f4f7f9;--ink:#1d2b33;--mute:#6b7c86;--in:#fff;--out:#dff4f6;--note:#fff6db;--red:#c43e14;--ok:#127a45}*{box-sizing:border-box}html,body{height:100%}body{color:var(--ink);background:var(--bg);margin:0;font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button,input,select,textarea{font:inherit}.btn{background:var(--navy);color:#fff;cursor:pointer;border:0;border-radius:10px;padding:9px 14px;font-weight:600}.btn:disabled{opacity:.5;cursor:default}.btn.ghost{color:var(--navy);border:1px solid var(--line);background:#fff}.btn.warn{background:#a8620a}.field{border:1px solid var(--line);background:#fff;border-radius:10px;width:100%;padding:9px 11px}.login{border:1px solid var(--line);background:#fff;border-radius:16px;max-width:360px;margin:12vh auto;padding:28px}.login h1{color:var(--navy);margin:0 0 18px;font-size:1.3rem}.login .field{margin-bottom:12px}.err{color:var(--red);margin:8px 0;font-size:.9rem}.app{grid-template-columns:360px 1fr;height:100vh;display:grid}.side{border-right:1px solid var(--line);background:#fff;flex-direction:column;min-height:0;display:flex}.side-top{border-bottom:1px solid var(--line);gap:8px;padding:12px;display:grid}.side-top .row{align-items:center;gap:8px;display:flex}.side-top .row>*{flex:1}.who{color:var(--navy);justify-content:space-between;align-items:center;font-weight:700;display:flex}.who button{color:var(--mute);cursor:pointer;background:0 0;border:0}.list{flex:1;overflow:auto}.item{text-align:left;border:0;border-bottom:1px solid var(--line);cursor:pointer;background:#fff;width:100%;padding:11px 12px;display:block}.item:hover{background:#f7fafb}.item.sel{background:#e7f6f8}.item .t{justify-content:space-between;gap:8px;font-weight:650;display:flex}.item .t small{color:var(--mute);font-weight:400}.item .l{color:var(--mute);white-space:nowrap;text-overflow:ellipsis;font-size:.88rem;overflow:hidden}.tags{flex-wrap:wrap;gap:6px;margin-top:4px;display:flex}.tag{color:#3f5560;background:#eef2f4;border-radius:99px;padding:1px 7px;font-size:.72rem}.tag.open{color:var(--ok);background:#e2f5ea}.tag.closed{color:var(--red);background:#fde9e3}.badge{background:var(--teal);color:#fff;border-radius:99px;padding:0 7px;font-size:.75rem}.main{flex-direction:column;min-height:0;display:flex}.head{border-bottom:1px solid var(--line);background:#fff;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;display:flex}.head h2{color:var(--navy);flex:1;min-width:160px;margin:0;font-size:1.05rem}.head h2 small{color:var(--mute);font-size:.82rem;font-weight:400;display:block}.head select{width:auto}.msgs{flex-direction:column;flex:1;gap:8px;padding:16px;display:flex;overflow:auto}.m{white-space:pre-wrap;word-wrap:break-word;border-radius:12px;max-width:72%;padding:8px 11px;box-shadow:0 1px 1px #0000000d}.m.in{background:var(--in);align-self:flex-start}.m.out{background:var(--out);align-self:flex-end}.m.note{background:var(--note);border:1px dashed #e4c76b;align-self:center;max-width:85%}.m .meta{color:var(--mute);text-align:right;margin-top:3px;font-size:.72rem}.m .e{color:var(--red)}.compose{border-top:1px solid var(--line);background:#fff;gap:8px;padding:10px;display:grid}.compose textarea{resize:vertical;min-height:52px}.compose .row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.closed-box{background:#fff8e6;border:1px solid #f1d58a;border-radius:10px;padding:10px;font-size:.9rem}.empty{color:var(--mute);margin:auto}.back{display:none}.tpl{gap:8px;display:grid}.tpl pre{white-space:pre-wrap;border:1px solid var(--line);font:inherit;background:#f7fafb;border-radius:10px;margin:0;padding:8px;font-size:.9rem}@media (max-width:820px){.app{grid-template-columns:1fr}.app.chat .side,.app:not(.chat) .main{display:none}.back{display:inline-block}.m{max-width:88%}}