/* Shell rules (topbar, login card, buttons, pills) come from shell.css, which
   every page loads first. This file used to repeat them verbatim — so a fix in
   shell.css was silently overridden here by an identical-but-stale copy. Only
   genuine page overrides remain below. */
/* Sohbet — Human inbox UI. Brand palette mirrors ../api (Ekspertizi) app.css:
   emerald/ink, warm-expert, Turkish. Kept dependency-free (no CDN fonts either —
   falls back to system fonts so the page loads with zero external hosts, matching
   the strict-CSP posture of the socket.io-only asset story). */
/* Tokens come from shell.css, which every page loads first. This file used to
   repeat the whole :root block verbatim; four copies meant four places to
   change and three chances to drift. */
input,textarea,select{font-family:inherit}

/* ---- login ---- */
#login{display:flex;align-items:center;justify-content:center;height:100vh;padding:18px}
input,textarea,select{width:100%;border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;font-size:14px;color:var(--text);background:var(--surface);outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-050)}
.btn.on{background:var(--emerald-050);border-color:var(--emerald);color:var(--emerald-700);opacity:1}

/* ---- app shell ---- */
#app{display:none;grid-template-rows:auto 1fr;height:100vh}
/* topbar base now provided by shell.css (shared responsive app nav) */
.topbar .who{font-size:12.5px;color:#AEC2CE}
.wsdot{width:9px;height:9px;border-radius:50%;background:#8695A0;display:inline-block;margin-right:6px;vertical-align:middle}
.wsdot.on{background:var(--b-good);box-shadow:0 0 0 3px rgba(30,158,90,.25)}
.wsdot.off{background:var(--b-critical)}

.cols{display:grid;grid-template-columns:320px 1fr 300px;min-height:0}
.col{min-height:0;overflow-y:auto;border-right:1px solid var(--line);background:var(--surface)}
.col.center{background:var(--surface-alt);display:flex;flex-direction:column;border-right:1px solid var(--line)}
.col.right{border-right:none}

/* list */
.filters{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 12px;z-index:2}
.searchRow{position:relative;margin-bottom:8px}
.searchRow input{width:100%;padding:8px 30px 8px 12px;border:1px solid var(--line-strong);border-radius:9px;font-size:13.5px;background:var(--surface-alt)}
.searchRow input:focus{outline:none;border-color:var(--emerald);background:var(--surface);box-shadow:0 0 0 3px var(--emerald-050)}
.searchClear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--text-3);font-size:18px;line-height:1;cursor:pointer;padding:2px 6px}
.searchClear:hover{color:var(--text)}
.channelFilter{width:100%;margin-bottom:8px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:9px;font-size:13px;background:var(--surface-alt);color:var(--text);cursor:pointer}
.channelFilter:focus{outline:none;border-color:var(--emerald);background:var(--surface);box-shadow:0 0 0 3px var(--emerald-050)}
/* quota-blocked live banner (bot stopped mid-conversation) */
.quotaBar{background:#FCECEC;color:#B3312F;border-bottom:1px solid #F0B4B3;padding:10px 16px;font-size:13.5px;text-align:center}
.quotaBar a{color:#B3312F;font-weight:700;text-decoration:underline}
.tabs{display:flex;gap:4px}
.tab{flex:1;text-align:center;padding:7px 4px;font-size:12.5px;font-weight:500;color:var(--text-2);cursor:pointer;border-radius:7px;border:1px solid transparent}
.tab.on{background:var(--emerald-050);color:var(--emerald-700);border-color:#CDE9E2;font-weight:600}
.filtRow{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:12.5px;color:var(--text-2)}
.filtRow label{margin:0;display:flex;align-items:center;gap:6px}
.filtRow input[type=checkbox]{width:auto}
.convItem{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);padding:12px 14px;cursor:pointer}
.convItem:hover{background:var(--surface-alt)}
.convItem.on{background:var(--emerald-050)}
.convTop{display:flex;align-items:center;gap:8px}
.convName{font-weight:600;font-size:14px;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convTime{font-size:11px;color:var(--text-3);font-family:var(--fn)}
.convBot{font-size:12.5px;color:var(--text-2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.badge{font-size:10px;font-weight:700;color:#fff;border-radius:5px;padding:1px 6px;letter-spacing:.02em}
.badge.wa{background:var(--wa);color:#053}
.badge.instagram{background:var(--ig)}
.badge.messenger{background:var(--ms)}
.unread{margin-left:auto;background:var(--emerald);color:#fff;font-size:11px;font-weight:700;border-radius:20px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.stat{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.stat.open{color:var(--emerald-700)}.stat.pending{color:var(--brass)}.stat.closed{color:var(--text-3)}

/* thread */
.threadHead{background:var(--surface);border-bottom:1px solid var(--line);padding:12px 16px}
.threadHead .r1{display:flex;align-items:center;gap:10px}
.threadHead h2{font-family:var(--fd);font-weight:500;font-size:17px;margin:0}
.threadHead .actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.threadHead select{width:auto;padding:6px 9px;font-size:12.5px;border-radius:7px}
.pausePill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--brass-050);color:var(--brass)}
.msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px}
.bubbleWrap{max-width:74%;display:flex;flex-direction:column}
.bubbleWrap.in{align-self:flex-start;align-items:flex-start}
.bubbleWrap.out{align-self:flex-end;align-items:flex-end}
.who-lbl{font-size:10.5px;color:var(--text-3);margin:0 4px 3px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.bubble{padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.in .bubble{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--text)}
.out.bot .bubble{background:var(--ink-700);color:#EAF1F5;border-bottom-right-radius:5px}
.out.agent .bubble{background:var(--emerald);color:#fff;border-bottom-right-radius:5px}
.bubble.blocked{opacity:.7;outline:1px dashed var(--b-critical)}
.msgTime{font-size:10.5px;color:var(--text-3);margin:3px 4px 0;font-family:var(--fn)}
.composer{background:var(--surface);border-top:1px solid var(--line);padding:12px 16px}
.composer .cRow{display:flex;gap:8px;align-items:flex-end}
.composer textarea{flex:1;min-height:44px;max-height:140px}
.cannedBar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cannedChip{font-size:12px;padding:5px 10px;border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);cursor:pointer;color:var(--text-2)}
.cannedChip:hover{border-color:var(--emerald);color:var(--emerald-700)}
.windowWarn{font-size:12px;color:var(--b-critical);margin-bottom:8px;display:none}

/* right panel */
.panel{padding:16px}
.panel h3{font-family:var(--fd);font-weight:500;font-size:15px;margin:0 0 4px}
.panel .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);font-weight:600;margin:14px 0 5px}
.panel .v{font-size:14px;color:var(--text)}
.tagList{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tag{background:var(--emerald-050);color:var(--emerald-700);font-size:12px;font-weight:500;padding:3px 10px;border-radius:16px;display:inline-flex;align-items:center;gap:6px}
.tag button{background:none;border:none;color:var(--emerald-700);cursor:pointer;font-size:13px;padding:0;line-height:1}

@media(max-width:900px){
  .cols{grid-template-columns:1fr}
  .col.right{display:none}
  .col:not(.center){display:none}
  .cols.showThread .col.center{display:flex}
  .cols.showList .col.list{display:block}
}