*{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --bg:#0b1017; --bg2:#0e1521; --panel:#131c2b; --panel2:#1a2537; --panel3:#22314a;
  --line:#243149; --line2:#2e3f5c;
  --text:#e8eef6; --muted:#8a9bb4; --faint:#5f7291;
  --accent:#14c98a; --accent-ink:#022417; --accent2:#3b93ff; --accent2-ink:#001327;
  --danger:#f0556b; --warn:#f5b544;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --font:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
body{ font-family:var(--font); background:
  radial-gradient(1200px 600px at 80% -10%, rgba(59,147,255,.06), transparent 60%),
  radial-gradient(900px 500px at -10% 110%, rgba(20,201,138,.06), transparent 60%),
  var(--bg); color:var(--text); font-size:14px; -webkit-font-smoothing:antialiased; }
.hidden{ display:none !important; }
.muted{ color:var(--muted); }
.pad{ padding:22px; }
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; }

/* ---------- Login ---------- */
.login-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.login-card{ background:linear-gradient(180deg,var(--panel),var(--bg2)); padding:38px 34px; border-radius:20px; width:360px; display:flex; flex-direction:column; gap:14px; border:1px solid var(--line); box-shadow:var(--shadow); }
.login-logo{ font-size:26px; font-weight:800; text-align:center; letter-spacing:-.3px; }
.login-sub{ text-align:center; color:var(--muted); margin-bottom:6px; }
.login-card input{ padding:13px 14px; border-radius:11px; border:1px solid var(--line2); background:var(--bg2); color:var(--text); outline:none; transition:border-color .15s; }
.login-card input:focus{ border-color:var(--accent); }
.login-card button{ padding:13px; border:0; border-radius:11px; background:linear-gradient(180deg,var(--accent),#0fa876); color:var(--accent-ink); font-weight:800; cursor:pointer; font-size:15px; }
.login-err{ color:var(--danger); text-align:center; min-height:18px; font-size:13px; }

/* ---------- Layout ---------- */
body:not(.login-body){ display:flex; min-height:100vh; }
.sidebar{ width:250px; background:linear-gradient(180deg,var(--bg2),var(--bg)); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:20px 14px; position:sticky; top:0; height:100vh; }
.brand{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; padding:6px 10px 20px; letter-spacing:-.3px; }
.brand-logo{ font-size:22px; }
.sidebar nav{ display:flex; flex-direction:column; gap:3px; }
.sidebar nav a{ display:flex; align-items:center; gap:11px; padding:11px 12px; color:var(--muted); cursor:pointer; border-radius:11px; font-weight:600; transition:background .15s,color .15s; }
.sidebar nav a .ic{ width:20px; text-align:center; font-size:15px; }
.sidebar nav a:hover{ background:var(--panel); color:var(--text); }
.sidebar nav a.active{ background:linear-gradient(90deg,rgba(20,201,138,.16),rgba(20,201,138,.04)); color:var(--text); box-shadow:inset 2px 0 0 var(--accent); }
.nav-badge{ margin-left:auto; min-width:20px; padding:0 6px; font-size:11px; line-height:20px; text-align:center; background:var(--danger); color:#fff; border-radius:12px; font-weight:700; }

.user-card{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px; background:var(--panel); border:1px solid var(--line); border-radius:14px; }
.avatar{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent2),var(--accent)); color:#00121f; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex-shrink:0; }
.user-meta{ flex:1; min-width:0; }
.user-name{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role{ font-size:11px; color:var(--accent); }
.icon-btn{ background:none; border:0; color:var(--muted); font-size:18px; cursor:pointer; padding:4px; border-radius:8px; }
.icon-btn:hover{ color:var(--danger); background:var(--panel2); }

.content{ flex:1; padding:30px 34px; overflow-y:auto; max-height:100vh; }
.page-head{ margin-bottom:22px; }
.page-head.with-action{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.page-head h1{ font-size:22px; font-weight:800; letter-spacing:-.4px; }
.page-head .sub{ color:var(--muted); margin-top:5px; font-size:13px; }

/* ---------- Buttons ---------- */
.btn-ghost{ background:var(--panel2); border:1px solid var(--line2); color:var(--text); padding:8px 14px; border-radius:10px; cursor:pointer; font-weight:600; font-size:13px; }
.btn-ghost:hover{ background:var(--panel3); }
.link-btn{ background:none; border:0; color:var(--accent2); cursor:pointer; font-size:13px; font-weight:600; }
.link-btn.danger{ color:var(--danger); }
.btn-claim{ background:linear-gradient(180deg,var(--accent),#0fa876); color:var(--accent-ink); border:0; padding:8px 15px; border-radius:9px; font-weight:800; cursor:pointer; font-size:13px; }
.btn-live{ background:linear-gradient(180deg,var(--accent2),#2f7fe6); color:var(--accent2-ink); border:0; padding:8px 15px; border-radius:9px; font-weight:800; cursor:pointer; font-size:13px; }
.btn-claim:hover,.btn-live:hover{ filter:brightness(1.08); }

/* ---------- Cards / stats ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-bottom:18px; }
.card{ background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.stat{ position:relative; overflow:hidden; }
.stat .stat-ic{ position:absolute; right:14px; top:14px; font-size:20px; opacity:.5; }
.stat .card-val{ font-size:30px; font-weight:800; letter-spacing:-1px; }
.stat .card-label{ color:var(--muted); margin-top:4px; font-size:13px; }
.stat.accent{ box-shadow:inset 0 0 0 1px rgba(20,201,138,.25); }
.stat.blue{ box-shadow:inset 0 0 0 1px rgba(59,147,255,.25); }
.stat.warn .card-val{ color:var(--warn); }

.dev-box{ margin-top:14px; padding:14px 16px; background:var(--panel); border:1px dashed var(--line2); border-radius:12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* ---------- Konuşmalar ---------- */
.chat-layout{ display:grid; grid-template-columns:330px 1fr; gap:16px; height:calc(100vh - 150px); }
.conv-list{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow-y:auto; }
.conv-item{ padding:13px 15px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s; }
.conv-item:hover{ background:var(--panel2); }
.conv-item.locked-other{ opacity:.7; }
.conv-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.conv-last{ color:var(--muted); font-size:13px; margin:4px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-meta{ color:var(--faint); font-size:11px; }
.chat-panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; overflow:hidden; }
.chat-empty{ margin:auto; color:var(--muted); }
.chat-head{ padding:14px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.chat-actions{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.chat-msgs{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:9px; background:
  linear-gradient(180deg, rgba(255,255,255,.012), transparent 120px), var(--bg2); }
.msg{ max-width:74%; padding:10px 13px; border-radius:14px; position:relative; white-space:pre-wrap; word-break:break-word; line-height:1.45; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.msg-in{ align-self:flex-start; background:var(--panel3); border-bottom-left-radius:5px; }
.msg-out{ align-self:flex-end; background:linear-gradient(180deg,#12402b,#0e3323); border-bottom-right-radius:5px; }
.msg-agent{ align-self:flex-end; background:linear-gradient(180deg,#173a63,#12305180); border-bottom-right-radius:5px; }
.msg-who{ display:block; font-size:11px; color:var(--muted); margin-bottom:3px; font-weight:600; }
.msg-time{ display:block; font-size:10px; color:var(--faint); margin-top:4px; }
.msg-img{ max-width:230px; max-height:230px; border-radius:10px; display:block; }
.msg.typing{ opacity:.6; font-style:italic; }
.chat-input{ display:flex; gap:9px; padding:12px; border-top:1px solid var(--line); background:var(--panel); }
.chat-input input{ flex:1; padding:11px 13px; border-radius:10px; border:1px solid var(--line2); background:var(--bg2); color:var(--text); outline:none; }
.chat-input input:focus{ border-color:var(--accent); }
.chat-input input:disabled{ opacity:.55; cursor:not-allowed; }
.chat-input button[type=submit]{ padding:11px 20px; border:0; border-radius:10px; background:linear-gradient(180deg,var(--accent),#0fa876); color:var(--accent-ink); font-weight:800; cursor:pointer; }
.attach-btn{ display:flex; align-items:center; justify-content:center; padding:0 13px; font-size:19px; cursor:pointer; border:1px solid var(--line2); border-radius:10px; background:var(--panel2); }
.attach-btn:hover{ background:var(--panel3); }
.attach-btn.recording{ background:var(--danger); color:#fff; animation:pulse 1s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
select{ background:var(--panel2); color:var(--text); border:1px solid var(--line2); border-radius:9px; padding:8px 10px; outline:none; }

/* ---------- Badges / lock ---------- */
.badge{ font-size:11px; padding:3px 9px; border-radius:20px; font-weight:600; white-space:nowrap; }
.badge-bot{ background:#0f2e20; color:#5fe0a6; }
.badge-human{ background:#16324f; color:#7cc4fd; }
.badge-closed{ background:#26314a; color:var(--muted); }
.badge-appt{ background:var(--panel3); }
.lock-mine{ background:#0f2e20; color:#5fe0a6; font-size:11px; padding:4px 10px; border-radius:20px; font-weight:700; }
.lock-other{ background:#3a2c12; color:var(--warn); font-size:11px; padding:4px 10px; border-radius:20px; font-weight:700; }
.unread-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:6px; }
.unread-n{ color:var(--accent); }
.conv-item.has-unread{ background:rgba(20,201,138,.05); }
.conv-item.flash{ animation:flashRow 1.6s ease-out; }
@keyframes flashRow{ 0%{ background:rgba(20,201,138,.4); } 100%{ background:rgba(20,201,138,.05); } }

/* ---------- Tablo ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
.tbl{ width:100%; border-collapse:collapse; background:var(--panel); min-width:720px; }
.tbl th,.tbl td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); }
.tbl th{ color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.4px; background:var(--bg2); }
.tbl tr:last-child td{ border-bottom:0; }

/* ---------- KB / Agents cards ---------- */
.kb-form{ display:flex; flex-direction:column; gap:9px; max-width:680px; margin-bottom:20px; }
.kb-form.card{ padding:16px; }
.kb-form input,.kb-form textarea,.kb-form select{ padding:11px 12px; border-radius:10px; border:1px solid var(--line2); background:var(--bg2); color:var(--text); font-family:inherit; outline:none; }
.kb-form input:focus,.kb-form textarea:focus{ border-color:var(--accent); }
.kb-form button{ align-self:flex-start; padding:10px 18px; border:0; border-radius:10px; background:linear-gradient(180deg,var(--accent),#0fa876); color:var(--accent-ink); font-weight:800; cursor:pointer; }
.kb-list{ display:flex; flex-direction:column; gap:11px; max-width:760px; }
.kb-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:15px; }
.kb-card.disabled{ opacity:.5; }
.kb-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:7px; }
.kb-body{ color:var(--muted); white-space:pre-wrap; font-size:13px; line-height:1.5; }

/* ---------- Settings ---------- */
.settings-form{ display:flex; flex-direction:column; gap:16px; max-width:720px; }
.settings-form.card{ padding:22px; }
.settings-form label{ display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:13px; }
.settings-form input,.settings-form textarea{ padding:11px 12px; border-radius:10px; border:1px solid var(--line2); background:var(--bg2); color:var(--text); font-family:inherit; outline:none; }
.settings-form input:focus,.settings-form textarea:focus{ border-color:var(--accent); }
.switch-row{ flex-direction:row !important; align-items:center; gap:10px !important; color:var(--text) !important; }
.form-actions{ display:flex; align-items:center; gap:14px; }
.settings-form button{ padding:11px 22px; border:0; border-radius:10px; background:linear-gradient(180deg,var(--accent),#0fa876); color:var(--accent-ink); font-weight:800; cursor:pointer; }
.saved-msg{ color:var(--accent); font-weight:600; }

/* ---------- Test ---------- */
.test-chat{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; height:calc(100vh - 210px); overflow:hidden; max-width:800px; }
.test-appt{ align-self:flex-start; max-width:82%; background:#16324f; border:1px solid #234b73; border-radius:12px; padding:11px 13px; font-size:13px; line-height:1.5; }

/* ---------- CRM ---------- */
.nav-badge.warn{ background:var(--warn); color:#241a02; }
.crm-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.crm-tab{ background:var(--panel2); border:1px solid var(--line2); color:var(--muted); padding:7px 13px; border-radius:20px; cursor:pointer; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.crm-tab:hover{ background:var(--panel3); color:var(--text); }
.crm-tab.active{ background:linear-gradient(90deg,rgba(20,201,138,.22),rgba(20,201,138,.06)); border-color:var(--accent); color:var(--text); }
.crm-tab.wait.active{ background:linear-gradient(90deg,rgba(245,181,68,.22),rgba(245,181,68,.06)); border-color:var(--warn); }
.crm-tab .cnt{ background:var(--bg); border:1px solid var(--line2); border-radius:10px; padding:0 7px; font-size:11px; min-width:18px; text-align:center; }
#crmTable td{ vertical-align:middle; }
#crmTable .sm{ font-size:11px; }
#crmTable tr.lead-wait{ background:rgba(245,181,68,.06); }
.chip-wait{ display:inline-block; margin-top:4px; font-size:10px; background:#3a2c12; color:var(--warn); padding:2px 7px; border-radius:10px; font-weight:700; }
.cell-msg{ max-width:220px; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-stage,.crm-note,.crm-follow{ background:var(--bg2); color:var(--text); border:1px solid var(--line2); border-radius:8px; padding:6px 8px; font-family:inherit; font-size:12px; outline:none; }
.crm-note{ width:150px; } .crm-note:focus,.crm-follow:focus,.crm-stage:focus{ border-color:var(--accent); }
.crm-follow[data-overdue="1"]{ border-color:var(--danger); color:var(--danger); }

/* ---------- Toast ---------- */
#toastBox{ position:fixed; top:20px; right:20px; display:flex; flex-direction:column; gap:10px; z-index:9999; }
.toast{ background:var(--panel2); border:1px solid var(--line2); border-left:4px solid var(--accent); color:var(--text); padding:13px 16px; border-radius:12px; box-shadow:var(--shadow); max-width:340px; opacity:0; transform:translateX(40px); transition:opacity .3s,transform .3s; font-size:13px; }
.toast.show{ opacity:1; transform:translateX(0); }

@media(max-width:820px){
  .sidebar{ width:64px; } .brand-name,.sidebar nav a .lbl,.user-meta{ display:none; }
  .chat-layout{ grid-template-columns:1fr; height:auto; } .conv-list{ max-height:38vh; }
}