:root{--bg:#f6f7f9;--panel:#fff;--line:#e3e6ea;--text:#1d2329;--muted:#6b7680;--accent:#1f6feb;--accent-soft:#e8f0fe;--ok:#2f7d4f;--read:#1f6feb;--warn:#9a6700;--warn-soft:#fff6db;--bad:#c62828;--bad-soft:#fdecea;--mine:#dcf3e4;--radius:8px;--font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.45 var(--font)}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:6px 12px}button:hover:not(:disabled){border-color:#c6ccd2}button:disabled{cursor:not-allowed;opacity:.5}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.danger{color:var(--bad)}input,textarea,select{border:1px solid var(--line);background:var(--panel);border-radius:6px;width:100%;padding:7px 10px}input:focus,textarea:focus,select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}.muted{color:var(--muted)}.small{font-size:12px}.error{color:var(--bad);background:var(--bad-soft);border-radius:6px;padding:8px 10px}.notice{color:var(--warn);background:var(--warn-soft);border-radius:6px;padding:8px 10px}.shell{grid-template-rows:auto auto 1fr;height:100vh;display:grid}.topbar{background:var(--panel);border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:10px 16px;display:flex}.topbar .brand{margin-right:auto;font-weight:600}.topbar a{color:var(--accent);text-decoration:none}.banner{border-bottom:1px solid var(--line);padding:8px 16px;font-size:13px}.banner.bad{background:var(--bad-soft);color:var(--bad)}.banner.warn{background:var(--warn-soft);color:var(--warn)}.panes{grid-template-columns:320px 1fr 300px;min-height:0;display:grid}.pane{background:var(--panel);flex-direction:column;min-height:0;display:flex}.pane+.pane{border-left:1px solid var(--line)}.empty{color:var(--muted);text-align:center;margin:auto;padding:24px}.tabs{border-bottom:1px solid var(--line);display:flex}.tabs button{color:var(--muted);background:0 0;border:0;border-bottom:2px solid #0000;border-radius:0;flex:1;padding:10px 4px}.tabs button.on{color:var(--text);border-bottom-color:var(--accent);font-weight:600}.count{background:var(--line);min-width:18px;color:var(--text);border-radius:9px;margin-left:4px;padding:0 5px;font-size:11px;display:inline-block}.list{flex:1;overflow-y:auto}.row{text-align:left;border:0;border-bottom:1px solid var(--line);background:0 0;border-radius:0;width:100%;padding:10px 14px;display:block}.row:hover{background:var(--bg)}.row.on{background:var(--accent-soft)}.row .top{justify-content:space-between;gap:8px;display:flex}.row .name{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.row .preview{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.thread-head{border-bottom:1px solid var(--line);padding:12px 16px}.thread-head .name{font-size:15px;font-weight:600}.messages{background:var(--bg);flex-direction:column;flex:1;gap:6px;padding:16px;display:flex;overflow-y:auto}.bubble{background:var(--panel);border:1px solid var(--line);white-space:pre-wrap;word-wrap:break-word;border-radius:10px;max-width:70%;padding:7px 10px}.bubble.out{background:var(--mine);border-color:#c4e8d1;align-self:flex-end}.bubble.phone{border-style:dashed}.bubble .meta{color:var(--muted);justify-content:flex-end;gap:6px;margin-top:2px;font-size:11px;display:flex}.status.ok{color:var(--ok)}.status.read{color:var(--read)}.status.warn{color:var(--warn)}.status.bad{color:var(--bad)}.status-note{margin-top:2px;font-size:11px}.status-note.warn{color:var(--warn)}.status-note.bad{color:var(--bad)}.composer{border-top:1px solid var(--line);align-items:flex-end;gap:8px;padding:10px;display:flex}.composer textarea{resize:none;min-height:40px;max-height:140px}.composer .attach-btn{padding:6px 10px;font-size:18px}.file-chip{border:1px solid var(--line);border-radius:var(--radius);background:var(--accent-soft);align-items:center;gap:8px;margin:8px 10px 0;padding:6px 10px;display:flex}.file-chip .link{cursor:pointer;color:var(--muted);background:0 0;border:none;margin-left:auto}.att-img{cursor:zoom-in;border-radius:6px;max-width:260px;max-height:260px;margin-bottom:4px;display:block}.att-doc{border:1px solid var(--line);background:var(--panel);cursor:pointer;text-align:left;border-radius:6px;align-items:center;gap:8px;margin-bottom:4px;padding:6px 10px;display:flex}.att-icon{font-size:18px}.att-name{text-overflow:ellipsis;white-space:nowrap;max-width:220px;overflow:hidden}.composer-note{border-top:1px solid var(--line);color:var(--muted);padding:12px 16px}.details{flex-direction:column;gap:14px;padding:16px;display:flex;overflow-y:auto}.details h3{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 4px;font-size:12px}.kv{grid-template-columns:80px 1fr;gap:4px 8px;display:grid}.actions{flex-wrap:wrap;gap:8px;display:flex}.pill{background:var(--line);border-radius:10px;padding:1px 8px;font-size:12px;display:inline-block}.pill.active{background:var(--mine)}.pill.unassigned{background:var(--warn-soft)}.dot{background:#b8c0c8;border-radius:50%;width:8px;height:8px;margin-right:6px;display:inline-block}.dot.online{background:#2fb36a}.dot.away{background:#e0a82e}.overlay{background:#141a2059;place-items:center;display:grid;position:fixed;inset:0}.dialog{background:var(--panel);border-radius:var(--radius);flex-direction:column;gap:12px;width:420px;padding:20px;display:flex;box-shadow:0 10px 30px #00000026}.dialog h2{margin:0;font-size:16px}.dialog .buttons{justify-content:flex-end;gap:8px;display:flex}label{color:var(--muted);flex-direction:column;gap:4px;font-size:13px;display:flex}.login{place-items:center;min-height:100vh;display:grid}.login form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:14px;width:340px;padding:28px;display:flex}.login h1{margin:0;font-size:18px}.page{flex-direction:column;gap:20px;padding:20px;display:flex;overflow-y:auto}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}.card h2{margin:0 0 12px;font-size:15px}table{border-collapse:collapse;width:100%}th,td{text-align:left;border-bottom:1px solid var(--line);vertical-align:top;padding:8px 6px}th{color:var(--muted);font-size:12px;font-weight:600}.inline{align-items:flex-end;gap:8px;display:flex}.inline label{flex:1}