:root {
  /* Light theme. Panels are white and lift off a warm chat background, the way
     WhatsApp Web's light mode reads — borders alone look flat at this scale. */
  --bg:#eae6df; --panel:#ffffff; --panel2:#f0f2f5; --line:#e9edef; --line2:#d1d7db;
  --acc:#00a884; --acc-ink:#ffffff; --txt:#111b21; --mut:#667781;
  --out:#d9fdd3; --in:#ffffff; --err:#c62828;
  --warnbg:#fff8e1; --warnline:#f0c040; --warntxt:#7a5c00;
  --shadow:0 1px 2px rgba(11,20,26,.08); --shadow-lg:0 8px 28px rgba(11,20,26,.18);
}
* { box-sizing:border-box; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
body { margin:0; background:var(--bg); color:var(--txt); height:100vh; overflow:hidden; }
.hidden { display:none !important; }

/* --- login --- */
.center { min-height:100vh; display:grid; place-items:center; background:var(--panel2); }
.card { background:var(--panel); padding:32px; border-radius:12px; width:340px; box-shadow:var(--shadow-lg); }
.card h2 { margin:0 0 12px; }
.card input { width:100%; padding:10px; margin:8px 0; border-radius:8px; border:1px solid var(--line2); background:var(--panel); color:var(--txt); }
.card input:focus { outline:none; border-color:var(--acc); }
.card button { width:100%; padding:11px; background:var(--acc); border:0; border-radius:8px; color:var(--acc-ink); font-weight:600; cursor:pointer; }
.err { color:var(--err); font-size:13px; min-height:18px; margin:8px 0 0; }

/* --- shell --- */
.app { display:grid; grid-template-columns:340px 1fr; height:100vh; }

/* --- sidebar --- */
.sidebar { background:var(--panel); border-right:1px solid var(--line2); display:flex; flex-direction:column; min-height:0; }
.side-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); }
.head-right { display:flex; align-items:center; gap:8px; }
.live-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.live-dot.online  { background:var(--acc); box-shadow:0 0 0 3px rgba(0,168,132,.18); }
.live-dot.offline { background:var(--mut); opacity:.45; }
.ghost { background:transparent; border:1px solid var(--line2); color:var(--mut); padding:6px 11px; border-radius:6px; cursor:pointer; font-size:13px; }
.ghost:hover { color:var(--txt); border-color:var(--mut); background:var(--panel2); }
.side-search { padding:10px 12px; }
.side-search input { width:100%; padding:8px 12px; border-radius:8px; border:1px solid var(--line2); background:var(--panel2); color:var(--txt); font-size:14px; }
.side-search input:focus { outline:none; border-color:var(--acc); background:var(--panel); }

.conv-list { list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; min-height:0; }
.conv { display:flex; gap:12px; padding:12px 16px; cursor:pointer; border-bottom:1px solid var(--line); }
.conv:hover { background:var(--panel2); }
.conv.active { background:#e7f3ef; }
.avatar { width:40px; height:40px; border-radius:50%; background:var(--panel2); color:var(--mut);
          display:grid; place-items:center; font-weight:600; font-size:15px; flex:none; }
.conv-main { flex:1; min-width:0; }
.conv-top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.conv-name { font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-time { color:var(--mut); font-size:11.5px; flex:none; }
.conv-preview { color:var(--mut); font-size:13px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-bottom { display:flex; justify-content:space-between; gap:8px; align-items:center; }
/* without min-width:0 the preview refuses to shrink and shoves the badge out of the row */
.conv-bottom .conv-preview { flex:1; min-width:0; }
.conv.unread .conv-name, .conv.unread .conv-preview { color:var(--txt); font-weight:600; }
.badge { background:var(--acc); color:var(--acc-ink); font-size:11px; font-weight:700; line-height:1;
         min-width:19px; height:19px; padding:0 6px; border-radius:10px; display:grid; place-items:center; flex:none; }
/* Someone else already has this thread open — the collision cue in the list. */
.seat { color:var(--warntxt); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; max-width:60%; }
.empty-note { color:var(--mut); font-size:13px; padding:24px 16px; text-align:center; }

/* --- thread --- */
.thread-pane { display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--bg); }
.placeholder { flex:1; display:grid; place-items:center; color:var(--mut); font-size:14px; }
.thread-head { display:flex; align-items:center; gap:12px; padding:12px 20px; background:var(--panel); border-bottom:1px solid var(--line2); }
.who { display:flex; flex-direction:column; min-width:0; }
.who b { font-size:15px; }
.who span { color:var(--mut); font-size:12.5px; }
.presence { margin-left:auto; color:var(--warntxt); font-size:12.5px; background:var(--warnbg);
            border:1px solid var(--warnline); padding:5px 11px; border-radius:14px; }

.messages { flex:1; overflow-y:auto; padding:20px 24px; display:flex; flex-direction:column; gap:6px; min-height:0; }
.msg { max-width:min(68%,560px); padding:7px 11px 5px; border-radius:9px; font-size:14.5px;
       line-height:1.4; word-wrap:break-word; box-shadow:var(--shadow); }
.msg.in  { background:var(--in);  align-self:flex-start; border-top-left-radius:2px; }
.msg.out { background:var(--out); align-self:flex-end;  border-top-right-radius:2px; }
.msg-body { white-space:pre-wrap; }
.meta { display:flex; gap:5px; justify-content:flex-end; align-items:center; margin-top:3px; font-size:11px; color:var(--mut); }
.tick.read { color:#53bdeb; }
.tick.failed { color:var(--err); font-weight:600; }
.day { align-self:center; background:var(--panel); color:var(--mut); font-size:11.5px; box-shadow:var(--shadow);
       padding:4px 12px; border-radius:12px; margin:10px 0 4px; }

/* A removed message leaves a marker rather than closing the gap, so the thread
   still reads as a record of what happened. */
.msg.gone { background:var(--panel2); box-shadow:none; border:1px dashed var(--line2); }
.msg-gone { color:var(--mut); font-size:13.5px; font-style:italic; }

/* Kept out of the way until the pointer is on the message it belongs to. */
.msg-del { background:none; border:0; padding:0 0 0 4px; cursor:pointer; color:var(--mut);
           font-size:11px; font-family:inherit; opacity:0; transition:opacity .12s; }
.msg:hover .msg-del { opacity:1; }
.msg-del:hover { color:var(--err); text-decoration:underline; }

/* --- media in the thread --- */
.msg-media { display:block; margin:-2px 0 4px; border-radius:6px; overflow:hidden; background:var(--panel2); }
.msg-media img, .msg-media video { display:block; width:100%; max-width:340px; max-height:400px;
                                   object-fit:cover; border-radius:6px; cursor:pointer; }
.msg-media video { object-fit:contain; background:#000; cursor:default; }
/* Anything we can't show inline (documents, audio) still has to be reachable. */
.msg-file { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; margin:2px 0 4px;
            background:var(--panel2); border-radius:8px; color:var(--txt); text-decoration:none; font-size:13.5px; }
.msg-file:hover { background:var(--line); }
.media-failed { padding:14px; color:var(--mut); font-size:12.5px; text-align:center; }

/* Full-size viewer for an image clicked in the thread. */
.lightbox { position:fixed; inset:0; background:rgba(11,20,26,.9); display:grid; place-items:center; z-index:20; padding:32px; }
.lightbox img { max-width:100%; max-height:100%; border-radius:6px; }

/* --- 24h window notice --- */
.warn { background:var(--warnbg); border-top:1px solid var(--warnline); color:var(--warntxt);
        padding:10px 20px; font-size:13px; line-height:1.45; display:flex; align-items:center; gap:12px; }
.warn span { flex:1; }
.warn button { flex:none; background:var(--warntxt); color:#fff; border:0; padding:6px 12px;
               border-radius:6px; font-size:12.5px; cursor:pointer; font-weight:600; }

/* --- modals --- */
.modal { position:fixed; inset:0; background:rgba(11,20,26,.45); display:grid; place-items:center; z-index:10; padding:20px; }
.modal-card { background:var(--panel); border-radius:12px; box-shadow:var(--shadow-lg);
              padding:24px; width:420px; max-width:100%; max-height:90vh; overflow-y:auto; }
.modal-card.wide { width:600px; }
.modal-card h3 { margin:0 0 14px; }
.modal-card label { display:block; font-size:12.5px; color:var(--mut); margin:12px 0 5px; }
.modal-card input, .modal-card select, .modal-card textarea {
  width:100%; padding:9px 11px; border-radius:8px; border:1px solid var(--line2);
  background:var(--panel); color:var(--txt); font-size:14px; font-family:inherit; }
.modal-card input:focus, .modal-card select:focus, .modal-card textarea:focus { outline:none; border-color:var(--acc); }
.modal-card textarea { resize:vertical; }
#newTemplateManual { display:grid; grid-template-columns:2fr 1fr; gap:8px; }
.hint { color:var(--mut); font-size:12px; line-height:1.5; margin:6px 0 0; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.modal-actions button { width:auto; padding:9px 20px; background:var(--acc); border:0;
                        border-radius:8px; color:var(--acc-ink); font-weight:600; cursor:pointer; }
.modal-actions .ghost { background:transparent; border:1px solid var(--line2); color:var(--mut); font-weight:400; }
.modal-actions button:disabled { opacity:.5; cursor:not-allowed; }

/* Text vs template, so neither one is buried behind the other. */
.tabs { display:flex; gap:4px; background:var(--panel2); padding:4px; border-radius:8px; margin:14px 0 4px; }
.tab { flex:1; padding:7px 10px; border:0; background:transparent; color:var(--mut);
       border-radius:6px; font-size:13.5px; cursor:pointer; font-family:inherit; }
.tab.on { background:var(--panel); color:var(--txt); font-weight:600; box-shadow:var(--shadow); }

/* --- user management --- */
.user-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.user-main { flex:1; min-width:0; }
.user-email { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-sub { color:var(--mut); font-size:12px; margin-top:2px; }
.pill { font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.3px; }
.pill.admin { background:#e7f3ef; color:#00674f; }
.pill.agent { background:var(--panel2); color:var(--mut); }
.pill.off   { background:#fdecea; color:var(--err); }
.row-actions { display:flex; gap:6px; flex:none; }
.btn-sm { background:transparent; border:1px solid var(--line2); color:var(--mut); font-size:12px;
          padding:4px 9px; border-radius:6px; cursor:pointer; font-family:inherit; }
.btn-sm:hover { color:var(--txt); border-color:var(--mut); background:var(--panel2); }
.btn-sm.danger:hover { color:var(--err); border-color:var(--err); background:#fdecea; }
.section-head { display:flex; justify-content:space-between; align-items:baseline; margin:22px 0 2px; }
.section-head h4 { margin:0; font-size:13px; text-transform:uppercase; letter-spacing:.4px; color:var(--mut); }
.new-user-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ok { color:#00674f; font-size:13px; min-height:18px; margin:8px 0 0; }

/* --- activity log --- */
#auditList { margin-top:6px; max-height:46vh; overflow-y:auto; }
.audit-row { display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; align-items:baseline; }
.audit-when { color:var(--mut); font-size:11.5px; flex:none; width:112px; }
.audit-what { flex:1; min-width:0; }
.audit-what b { font-weight:600; }
.audit-actor { color:var(--mut); }
.audit-detail { color:var(--mut); font-size:11.5px; margin-top:2px; word-break:break-word; }
.audit-ip { color:var(--mut); font-size:11px; flex:none; }
/* Failures are the rows worth spotting in a wall of routine activity. */
.audit-row.bad b { color:var(--err); }

/* --- composer --- */
.composer { display:flex; gap:10px; align-items:flex-end; padding:12px 20px; background:var(--panel); border-top:1px solid var(--line2); }
.composer textarea { flex:1; resize:none; max-height:140px; padding:10px 12px; border-radius:8px;
                     border:1px solid var(--line2); background:var(--panel); color:var(--txt);
                     font-size:14.5px; line-height:1.4; font-family:inherit; }
.composer textarea:focus { outline:none; border-color:var(--acc); }
.composer button { padding:10px 22px; background:var(--acc); border:0; border-radius:8px;
                   color:var(--acc-ink); font-weight:600; cursor:pointer; flex:none; }
.composer button:disabled { opacity:.5; cursor:not-allowed; }
.attach { flex:none; width:40px; height:40px; padding:0; display:grid; place-items:center;
          background:transparent; border:1px solid var(--line2); border-radius:8px;
          color:var(--mut); font-size:18px; cursor:pointer; }
.attach:hover { color:var(--txt); border-color:var(--mut); background:var(--panel2); }

/* Picked file sits above the composer until it's sent or cleared. */
.attach-bar { display:flex; align-items:center; gap:12px; padding:10px 20px; background:var(--panel2); border-top:1px solid var(--line); }
.attach-bar img, .attach-bar video { width:44px; height:44px; object-fit:cover; border-radius:6px; flex:none; background:#000; }
.attach-info { flex:1; min-width:0; font-size:13px; }
.attach-info b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.attach-info span { color:var(--mut); font-size:12px; }
.attach-bar .btn-sm { flex:none; }