:root{
    --cab:#ffc400; --ink:#14151a; --night:#181b23; --night-2:#212530;
    --ok:#2fae6b; --danger:#e04f4f; --radius:14px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--night);color:#e8e9ee;min-height:100vh;padding:24px 20px}
  button{font-family:inherit;cursor:pointer;border:none}
  input{font-family:inherit}
  .inner{max-width:1100px;margin:0 auto}
  .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
  .top h2{font-size:20px;font-weight:700;display:flex;align-items:center;gap:10px}
  .chip{background:var(--cab);color:var(--ink);font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px;letter-spacing:.05em}
  .controls{display:flex;gap:14px;align-items:center;font-size:13px;flex-wrap:wrap}
  .controls label{display:flex;gap:6px;align-items:center;color:#9fa2ad;cursor:pointer}
  .notif-btn{background:#2c3140;color:#e8e9ee;border:1px solid #3a4050;padding:8px 14px;border-radius:9px;font-size:13px;font-weight:600}
  .notif-btn.granted{background:#1f3b2d;border-color:var(--ok);color:#8fe0b4;cursor:default}
  .cols{display:grid;grid-template-columns:320px 1fr;gap:16px;height:calc(100vh - 130px);min-height:440px}
  @media(max-width:760px){.cols{grid-template-columns:1fr;height:auto}.thread{min-height:60vh}}
  .convo-list{background:var(--night-2);border-radius:var(--radius);overflow-y:auto}
  .convo-list .empty{padding:30px 20px;font-size:14px;color:#8b8d96;line-height:1.6}
  .convo{padding:14px 16px;border-bottom:1px solid #2b303c;cursor:pointer;display:flex;gap:10px;align-items:center}
  .convo:hover{background:#262b37}
  .convo.sel{background:#2c3140;border-left:3px solid var(--cab)}
  .convo .init{width:36px;height:36px;border-radius:10px;border:1.5px solid #4a5163;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--cab);flex-shrink:0}
  .convo .meta{flex:1;min-width:0}
  .convo .meta b{display:block;font-size:14px}
  .convo .meta small{display:block;font-size:12px;color:#9fa2ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .convo .unread{background:var(--danger);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 6px}
  .thread{background:var(--night-2);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden}
  .thread-head{padding:14px 18px;border-bottom:1px solid #2b303c;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .thread-head b{font-size:15px}
  .thread-head small{color:#9fa2ad;font-size:12.5px;display:block;margin-top:2px}
  .thread-head a{color:var(--cab);text-decoration:none;font-weight:700}
  .thread-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
  .msg{max-width:82%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
  .msg .tag{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-bottom:3px}
  .msg.visitor{align-self:flex-start;background:#39405a;color:#fff;border-bottom-left-radius:4px}
  .msg.system{align-self:flex-start;background:#2c3140;border:1px solid #3a4050;color:#dfe1e8;border-bottom-left-radius:4px}
  .msg.operator{align-self:flex-end;background:var(--cab);color:var(--ink);border-bottom-right-radius:4px}
  .thread-foot{border-top:1px solid #2b303c;padding:12px;display:flex;gap:8px}
  .thread-foot input{flex:1;background:#181b23;border:1px solid #3a4050;color:#fff;border-radius:10px;padding:11px 13px;font-size:14px;outline:none}
  .thread-foot input:focus{border-color:var(--cab)}
  .send{background:var(--cab);color:var(--ink);border-radius:10px;width:44px;display:flex;align-items:center;justify-content:center}
  .send svg{width:18px;height:18px}
  .placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:#767a86;font-size:14px;text-align:center;padding:30px;line-height:1.6}
  .banner{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:var(--cab);color:var(--ink);font-weight:700;font-size:13px;padding:10px 18px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:950;display:none}
  .setup-warn{position:fixed;top:12px;left:50%;transform:translateX(-50%);background:#e04f4f;color:#fff;font-size:13px;font-weight:600;padding:10px 16px;border-radius:10px;z-index:999;display:none}