:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#ecece7;background:#0d0d0f;
  --bg:#0d0d0f;
  --panel:#141417;
  --panel-2:#19191d;
  --panel-3:#202027;
  --border:#2a2a31;
  --soft:#202027;
  --muted:#a0a0ab;
  --text:#ecece7;
  --text-2:#c8c8d0;
  --dark:#f5f5f7;
  --accent:#ffffff;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top, #1a1a21 0%, var(--bg) 36%);color:var(--text)}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.brand-logo{display:block;height:auto;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.login-logo{width:min(360px,100%);margin:0 auto 8px}
.sidebar-logo{width:210px;max-width:100%}
.brand-wrap{display:flex;flex-direction:column;gap:4px}
.subtitle{font-size:12px;color:var(--muted);margin-top:2px;letter-spacing:.08em;text-transform:uppercase}
.primary{border:0;border-radius:12px;padding:10px 15px;background:linear-gradient(180deg,#f8f8fb,#dbdbe3);color:#121216;font-weight:700}
.primary:hover{filter:brightness(1.02)}
.secondary{border:1px solid var(--border);border-radius:10px;padding:9px 13px;background:var(--panel-2);color:var(--text)}
.wide{width:100%}
input,textarea,select{border:1px solid var(--border);border-radius:12px;background:var(--panel-2);padding:11px 12px;outline:none;color:var(--text)}
input::placeholder,textarea::placeholder{color:#8d8d96}
input:focus,textarea:focus,select:focus{border-color:#4a4a55;box-shadow:0 0 0 3px rgba(255,255,255,.05)}
.error{color:#ff8f8f;font-size:13px;margin-top:10px}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}

.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(460px,100%);background:rgba(20,20,23,.92);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:24px;padding:30px;box-shadow:var(--shadow)}
.login-card h1{margin:12px 0 7px}.login-card p{color:var(--muted);margin:0 0 18px}.login-card input{width:100%;margin-bottom:10px}

.app{height:100vh;display:grid;grid-template-columns:350px minmax(0,1fr)}
.sidebar{background:rgba(19,19,22,.96);border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:20px 18px 14px}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--text);font-size:22px;padding:0}
.top-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 12px}
.top-tab{border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--soft);color:var(--text-2)}
.top-tab.active{background:linear-gradient(180deg,#f8f8fb,#dbdbe3);color:#121216;font-weight:700;border-color:transparent}
.search-wrap{padding:14px 12px 8px}.search-wrap input{width:100%;background:#111116}
.filters{display:flex;gap:4px;padding:0 12px 10px;overflow:auto;border-bottom:1px solid var(--border)}
.filter{border:0;background:transparent;color:var(--muted);border-radius:8px;padding:7px 9px;white-space:nowrap}
.filter.active{background:var(--soft);color:var(--text);font-weight:650}

.conversation-list{overflow:auto;min-height:0;flex:1}
.conv{display:block;width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.03);border-radius:0;background:transparent;color:var(--text);text-align:left;padding:13px 14px}
.conv:hover{background:#18181c}.conv.active{background:#1f1f25}
.conv-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.conv-name{font-weight:720;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-meta{display:flex;align-items:center;gap:6px}.conv-time{font-size:11px;color:#7c7c88;white-space:nowrap}
.preview{font-size:13px;color:#9e9eaa;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{background:#f3f3f7;color:#111;border-radius:999px;padding:2px 7px;font-size:10px;min-width:20px;text-align:center;font-weight:700}

.workspace{min-width:0;min-height:0;background:linear-gradient(180deg,#121216 0%, #0f0f12 100%)}
.empty-state{height:100%;display:grid;place-content:center;text-align:center;color:#999}
.empty-icon{font-size:42px;color:#5c5c66}.empty-title{font-size:20px;font-weight:750;color:#e3e3ea;margin-top:10px}.empty-copy{font-size:13px;margin-top:4px;color:#9c9ca5}

.chat,.otp-view{height:100%;display:flex;flex-direction:column;min-height:0}
.chat-header{background:rgba(20,20,23,.95);border-bottom:1px solid var(--border);padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.chat-person{display:flex;align-items:center;gap:12px;min-width:0}.avatar-circle{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#f8f8fb,#dbdbe3);color:#121216;font-weight:800}
.chat-person h2,.chat-header h2{margin:0;font-size:18px;color:var(--text)}.actions{display:flex;gap:8px;align-items:center}
.messages{flex:1;overflow:auto;padding:20px 24px;display:flex;flex-direction:column;gap:10px;min-height:0}
.msg-wrap{display:flex;flex-direction:column;align-items:flex-start}.msg-wrap.out{align-items:flex-end}
.msg{max-width:min(720px,76%);padding:10px 13px;border-radius:15px;background:var(--panel);border:1px solid var(--border);line-height:1.42;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 1px rgba(0,0,0,.08);color:var(--text)}
.msg-wrap.out .msg{background:linear-gradient(180deg,#f8f8fb,#dbdbe3);color:#111;border-color:transparent;border-bottom-right-radius:5px}
.msg-wrap.in .msg{border-bottom-left-radius:5px}.msg-time{font-size:10px;color:#888893;margin:4px 5px 0}
.day-separator{align-self:center;font-size:11px;color:#c1c1ca;background:#26262e;border:1px solid #2f2f37;border-radius:999px;padding:4px 10px;margin:8px 0}

.composer{background:rgba(20,20,23,.96);border-top:1px solid var(--border);padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.composer textarea{resize:none;min-height:48px;max-height:140px}.composer-actions{display:flex;align-items:center;gap:10px}.send-hint{font-size:11px;color:#8d8d96}

.otp-list{overflow:auto;padding:18px;min-height:0}.otp-card{background:var(--panel);border:1px solid var(--border);border-radius:15px;padding:15px;margin-bottom:10px;display:grid;grid-template-columns:1fr auto;gap:12px}
.otp-code{font-size:27px;font-weight:850;letter-spacing:.08em}.otp-meta{font-size:12px;color:#92929d;margin-top:4px}.otp-body{margin-top:8px;font-size:14px;word-break:break-word;color:var(--text-2)}.copy-btn{align-self:start}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.58);display:grid;place-items:center;padding:20px;z-index:50}
.modal{width:min(500px,100%);background:#15151a;border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:0 24px 80px rgba(0,0,0,.38)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.modal h3{margin:0;font-size:19px}.modal p{margin:4px 0 0;color:#8b8b94;font-size:13px}
.modal label{display:block;font-size:12px;font-weight:700;margin:12px 0 6px}.modal input,.modal textarea{width:100%}.modal textarea{resize:vertical}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

.toast{position:fixed;right:20px;bottom:20px;z-index:80;background:#efeff4;color:#111;border-radius:11px;padding:11px 14px;box-shadow:0 12px 35px rgba(0,0,0,.18);font-size:13px;max-width:360px}
.toast.error-toast{background:#8f241d;color:#fff}

@media(max-width:800px){
  .app{grid-template-columns:1fr}.sidebar{height:43vh;border-right:0;border-bottom:1px solid var(--border)}.workspace{height:57vh}
  .send-hint{display:none}.messages{padding:14px}.msg{max-width:88%}
  .sidebar-logo{width:170px}
}


.uuid-row{display:flex;align-items:center;gap:8px;min-width:0}
.uuid-row .mono{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(48vw,520px)}
.uuid-copy{border:0;background:transparent;color:#8f8f9a;font-size:11px;padding:2px 4px;border-radius:5px;white-space:nowrap}
.uuid-copy:hover{color:#fff;background:#24242b}

.login-select{width:100%;margin-bottom:10px}
.sidebar-user-actions{display:flex;align-items:center;gap:6px}
.account-pill{max-width:128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--text-2);font-size:11px;padding:8px 9px;cursor:default}
.logout-btn{font-size:16px}
.msg-agent{font-size:11px;font-weight:700;color:#aaaab4;margin:0 5px 4px}
.msg-wrap.out .msg-agent{color:#bdbdc6}


/* v2.6 account management */
.top-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.accounts-view{height:100%;display:flex;flex-direction:column;min-height:0}
.accounts-content{padding:20px;overflow:auto;min-height:0}
.account-create-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:16px}
.account-create-card h3{margin:0 0 14px}
.account-form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;gap:10px}
.accounts-list{display:flex;flex-direction:column;gap:8px}
.account-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.account-row-name{font-weight:750}
.account-row-meta{font-size:11px;color:var(--muted);margin-top:4px}
.account-row-actions{display:flex;gap:8px}
.danger{border:1px solid #63343a;border-radius:10px;padding:9px 13px;background:#321b1f;color:#ffb5bd}
.accounts-empty{color:var(--muted);text-align:center;padding:26px}
@media(max-width:800px){.account-form{grid-template-columns:1fr}.account-row{align-items:flex-start;flex-direction:column}.account-row-actions{width:100%}}


/* v2.8 helpdesk */
.conv-assignee{font-size:10px;color:#6f6f7b;margin-top:5px}
#assigneeSelect{max-width:170px}
.note-button{border:1px solid #6f5d24;border-radius:10px;padding:10px 13px;background:#2b2514;color:#ffd66b;font-weight:700}
.note-button:hover{background:#373019}
.internal-note{align-self:center;width:min(680px,82%);background:#211e13;border:1px solid #5c4d1d;border-radius:13px;padding:10px 12px;color:#efe5bd}
.note-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:#ffd66b;margin-bottom:6px}
.note-body{font-size:13px;white-space:pre-wrap;word-break:break-word}
.note-time{font-size:10px;color:#8e8462;margin-top:5px}
.msg-agent-row{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:0 4px 4px}
.mini-agent-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid #44444d}
.msg-agent-row .msg-agent{margin:0}
.account-avatar-select{min-width:140px}
@media(max-width:800px){.actions{flex-wrap:wrap;justify-content:flex-end}#assigneeSelect{max-width:140px}.internal-note{width:94%}}


/* v2.9 quick replies and notecards */
.composer-actions-v29{flex-wrap:wrap;justify-content:flex-end}
.quick-reply-select{min-width:160px;max-width:220px}
.notecard-card{align-self:stretch;display:flex;gap:12px;background:#171a22;border:1px solid #343b4d;border-radius:14px;padding:14px;margin:4px auto;width:min(760px,92%)}
.notecard-icon{flex:0 0 42px;height:42px;border-radius:10px;display:grid;place-items:center;background:#efe7c8;color:#2f2a1e;font-weight:900;font-size:12px}
.notecard-content{min-width:0;flex:1}.notecard-title{font-weight:800;color:#f3f3f7}.notecard-meta{font-size:11px;color:#9298a8;margin-top:3px}
.notecard-body{white-space:pre-wrap;word-break:break-word;font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:#d5d8e0;background:#101217;border:1px solid #282d39;border-radius:10px;padding:12px;margin:10px 0 0;max-height:360px;overflow:auto}


.quick-reply-admin-form{display:grid;gap:10px}.quick-reply-admin-form textarea{width:100%;resize:vertical}.quick-body-preview{max-width:680px;white-space:pre-wrap;line-height:1.4;margin-top:5px}.empty-list{padding:20px;color:#999;text-align:center}
@media(max-width:800px){.quick-reply-select{max-width:100%;width:100%}.notecard-card{width:96%}}


/* v2.10 — Needs Reply, Tags, Global Search */
.ticket-tags{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  padding:8px 18px;
  border-bottom:1px solid var(--border);
  background:#121216;
}
.ticket-tags-label{
  font-size:11px;
  font-weight:800;
  color:#8f8f9a;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-right:3px;
}
.tag-chip{
  border:1px solid #34343c;
  border-radius:999px;
  background:#1b1b20;
  color:#aaaab5;
  padding:5px 9px;
  font-size:11px;
}
.tag-chip:hover{border-color:#565661;color:#e7e7ed}
.tag-chip.active{
  background:#ececf1;
  color:#111116;
  border-color:#ececf1;
  font-weight:750;
}
.conv-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:5px;
}
.conv-footer .conv-assignee{margin-top:0}
.needs-reply-pill{
  flex:0 0 auto;
  border-radius:999px;
  padding:2px 7px;
  background:#5a3515;
  border:1px solid #825125;
  color:#ffca84;
  font-size:9px;
  font-weight:800;
}
.conv-tags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:6px;
}
.mini-tag{
  border:1px solid #303038;
  border-radius:999px;
  padding:2px 6px;
  color:#91919c;
  background:#17171b;
  font-size:9px;
}
.filter[data-status="needs_reply"].active{
  background:#5a3515;
  color:#ffd19a;
}


/* v2.11 operations */
.sla-pill{border:1px solid #6b5630;background:#2b2416;color:#ffd28a;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:800;white-space:nowrap}
.sla-pill.sla-warning{background:#3c2915;border-color:#8e5e28;color:#ffc576}
.sla-pill.sla-danger{background:#451d1d;border-color:#8d3939;color:#ff9d9d}
.overview-content{padding:20px;overflow:auto}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.stat-card{border:1px solid var(--border);background:var(--panel);border-radius:16px;padding:18px}
.stat-wide{grid-column:span 2}
.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.stat-value{font-size:30px;font-weight:850;margin-top:8px}
.settings-row{display:flex;align-items:center;gap:10px;margin-top:12px}.settings-row input{width:100px}
.details-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:90}
.details-drawer{position:fixed;right:0;top:0;bottom:0;width:min(420px,92vw);background:#141417;border-left:1px solid var(--border);z-index:91;box-shadow:-20px 0 70px rgba(0,0,0,.35);overflow:auto}
.details-head{position:sticky;top:0;background:#141417;border-bottom:1px solid var(--border);padding:18px;display:flex;justify-content:space-between;align-items:flex-start;z-index:2}
.details-head h3{margin:0}
.details-section{padding:16px 18px;border-bottom:1px solid var(--border)}
.details-section label{display:block;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;margin-bottom:7px}
.transaction-row{display:grid;grid-template-columns:1fr auto;gap:8px}.transaction-row input{min-width:0}
.profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.profile-stats div{background:#1a1a1f;border:1px solid #292930;border-radius:11px;padding:10px}
.profile-stats span{display:block;font-size:10px;color:#8f8f9a;text-transform:uppercase}
.profile-stats strong{display:block;margin-top:4px;font-size:14px}
.audit-section h4{margin:0 0 10px}.audit-list{display:flex;flex-direction:column;gap:8px}
.audit-row{border:1px solid #28282f;background:#19191e;border-radius:11px;padding:10px}
.audit-top{display:flex;justify-content:space-between;gap:8px;font-size:11px}.audit-top span{color:#777782}
.audit-action{margin-top:5px;font-size:12px;font-weight:800;text-transform:capitalize}
.audit-details{margin-top:4px;color:#aaaab4;font-size:12px;line-height:1.4}
@media(max-width:900px){.stats-grid{grid-template-columns:1fr 1fr}.stat-wide{grid-column:span 2}}


/* v2.12 bot health */
.bot-health{
  margin:0 12px 10px;
  min-height:30px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border:1px solid #303038;
  border-radius:10px;
  background:#17171b;
  color:#b6b6c0;
  font-size:11px;
  font-weight:750;
  cursor:default;
}
.bot-health-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 auto;
  background:#6d6d77;
  box-shadow:0 0 0 3px rgba(109,109,119,.12);
}
.bot-health-age{
  margin-left:auto;
  color:#777782;
  font-size:10px;
  font-weight:650;
}
.bot-health-online{
  border-color:#284c37;
  background:#14231a;
  color:#aee8bd;
}
.bot-health-online .bot-health-dot{
  background:#55d678;
  box-shadow:0 0 0 3px rgba(85,214,120,.13);
}
.bot-health-delayed{
  border-color:#675329;
  background:#2a2315;
  color:#f2c97a;
}
.bot-health-delayed .bot-health-dot{
  background:#e6b857;
  box-shadow:0 0 0 3px rgba(230,184,87,.13);
}
.bot-health-error,
.bot-health-offline{
  border-color:#623232;
  background:#291818;
  color:#efaaaa;
}
.bot-health-error .bot-health-dot,
.bot-health-offline .bot-health-dot{
  background:#e06666;
  box-shadow:0 0 0 3px rgba(224,102,102,.13);
}


/* v2.13 — Bot Inventory */
.inventory-content{
  padding:18px;
  overflow:auto;
  height:100%;
}
.inventory-head-actions{
  display:flex;
  gap:8px;
}
.worn-panel,
.inventory-browser{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:16px;
  overflow:hidden;
}
.worn-panel{
  margin-bottom:16px;
}
.inventory-section-title{
  padding:16px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border);
}
.inventory-section-title h3{
  margin:0 0 3px;
}
.inventory-count{
  min-width:30px;
  height:30px;
  padding:0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#222228;
  border:1px solid #33333b;
  font-size:12px;
  font-weight:800;
}
.worn-grid{
  padding:12px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:10px;
}
.worn-card{
  border:1px solid #2d2d34;
  border-radius:12px;
  background:#19191e;
  padding:11px;
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.worn-card strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.worn-kind{
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  color:#8f8f99;
}
.worn-uuid{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
}
.worn-card button{
  margin-top:5px;
  align-self:flex-start;
}

.inventory-toolbar{
  display:grid;
  grid-template-columns:auto minmax(120px,1fr) minmax(180px,320px);
  gap:10px;
  align-items:center;
  padding:12px;
  border-bottom:1px solid var(--border);
}
.inventory-path{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#b8b8c2;
  font-size:12px;
}
.inventory-items{
  display:flex;
  flex-direction:column;
}
.inventory-row{
  display:flex;
  gap:8px;
  align-items:center;
  border-bottom:1px solid #24242a;
  padding:6px 10px;
}
.inventory-row:last-child{
  border-bottom:0;
}
.inventory-row:hover{
  background:#18181d;
}
.inventory-row-worn{
  background:#172119;
}
.inventory-item-main{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 5px;
  cursor:default;
}
.inventory-folder{
  cursor:pointer;
}
.inventory-folder:hover strong{
  text-decoration:underline;
}
.inventory-item-icon{
  width:22px;
  flex:0 0 22px;
  text-align:center;
  font-size:16px;
}
.inventory-item-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.inventory-item-info strong{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.inventory-item-info span{
  font-size:10px;
  color:#80808a;
}
.inventory-worn-badge{
  margin-left:auto;
  border-radius:999px;
  background:#1d4b2c;
  border:1px solid #347848;
  color:#9de2af;
  padding:3px 7px;
  font-size:9px;
  font-weight:850;
}
.inventory-row-actions{
  display:flex;
  gap:5px;
  flex:0 0 auto;
}
.inventory-row-actions button{
  padding:5px 8px;
  font-size:10px;
}
.inventory-empty,
.inventory-error,
.inventory-loading{
  padding:22px;
  text-align:center;
}
.inventory-error{
  color:#f1a5a5;
}

@media(max-width:850px){
  .inventory-toolbar{
    grid-template-columns:auto 1fr;
  }
  .inventory-toolbar input{
    grid-column:1 / -1;
  }
  .inventory-row{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .inventory-row-actions{
    width:100%;
    padding-left:37px;
  }
}

.worn-resolve-note{
  font-size:9px;
  color:#a78d63;
  line-height:1.25;
}


/* v2.14 — Mobile UX */
.mobile-back{display:none}

@media(max-width:800px){
  html,body{width:100%;height:100%;overflow:hidden}
  body{overscroll-behavior:none}

  .app{
    display:block;
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
  }

  /* Phone = one panel at a time. Inbox/menu first, workspace after selection. */
  .sidebar{
    width:100%;
    height:100dvh;
    max-height:100dvh;
    border-right:0;
    border-bottom:0;
    overflow:hidden;
  }
  .workspace{
    display:none;
    width:100%;
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
    position:relative;
  }
  .app.mobile-workspace-open .sidebar{display:none}
  .app.mobile-workspace-open .workspace{
    display:flex;
    flex-direction:column;
  }

  .mobile-back{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    min-height:44px;
    padding:8px 14px;
    padding-top:max(8px,env(safe-area-inset-top));
    border:0;
    border-bottom:1px solid var(--border);
    border-radius:0;
    background:#111114;
    color:#d7d7df;
    font-size:14px;
    font-weight:750;
    z-index:20;
  }

  .sidebar-head{
    padding:calc(12px + env(safe-area-inset-top)) 14px 10px;
  }
  .sidebar-logo{width:132px}
  .subtitle{font-size:10px}
  .account-pill{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .bot-health{margin:0 10px 8px}

  /* Tabs become one compact horizontally scrollable row. */
  .top-tabs{
    display:flex;
    overflow-x:auto;
    gap:6px;
    padding:0 10px 8px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .top-tabs::-webkit-scrollbar{display:none}
  .top-tab{
    flex:0 0 auto;
    min-width:auto;
    padding:8px 12px;
    border-radius:10px;
    white-space:nowrap;
    font-size:13px;
  }

  .search-wrap{padding:6px 10px}
  .search-wrap input{padding:10px 11px}
  .filters{
    padding:0 10px 8px;
    gap:2px;
  }
  .filter{padding:6px 8px;font-size:12px}
  .conversation-list{padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .conv{padding:12px}

  /* Active workspace fills everything below the Back bar. */
  .chat,.otp-view,.accounts-view{
    height:auto;
    flex:1 1 auto;
    min-height:0;
    width:100%;
  }

  .chat-header{
    flex:0 0 auto;
    padding:10px 12px;
    gap:9px;
    align-items:stretch;
    flex-direction:column;
  }
  .chat-person{gap:9px}
  .avatar-circle{width:34px;height:34px;flex:0 0 34px}
  .chat-person h2,.chat-header h2{font-size:16px}
  .uuid-row{min-width:0}
  #avatarUuid{
    max-width:210px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
  }
  .uuid-copy{font-size:10px}

  /* Four ticket actions use a clean 2 × 2 grid. */
  .actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    gap:6px;
  }
  .actions>*{width:100%;min-width:0;max-width:none!important}
  .actions .sla-pill{grid-column:1 / -1;width:max-content;max-width:100%}
  #detailsBtn,#pinBtn,#assigneeSelect,#statusSelect{min-height:38px}

  /* Tags stay in one horizontal row instead of consuming 3–4 lines. */
  .ticket-tags{
    flex:0 0 auto;
    min-height:0;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:6px;
    padding:7px 10px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .ticket-tags::-webkit-scrollbar{display:none}
  .ticket-tags-label,.tag-chip{flex:0 0 auto}
  .tag-chip{padding:5px 8px}

  .messages{
    flex:1 1 auto;
    min-height:0;
    padding:12px 10px;
    gap:8px;
    overscroll-behavior:contain;
  }
  .msg{max-width:91%;font-size:14px}
  .internal-note{width:96%}
  .notecard-card{width:98%}

  /* Fix the collapsed reply box visible in the screenshot. */
  .composer{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  }
  .composer textarea{
    display:block;
    width:100%;
    min-width:0;
    min-height:62px;
    max-height:120px;
    resize:none;
  }
  .composer-actions-v29{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:7px;
    justify-content:stretch;
  }
  .quick-reply-select{
    grid-column:1 / -1;
    width:100%;
    max-width:none;
    min-width:0;
  }
  .composer-actions-v29 button{width:100%;padding:10px 6px}
  .send-hint{display:none}

  /* Other pages */
  .overview-content,.accounts-content,.inventory-content,.otp-list{
    padding:12px;
    min-height:0;
    flex:1 1 auto;
  }
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px}
  .stat-card{padding:13px}
  .stat-value{font-size:25px}
  .stat-wide{grid-column:1 / -1}

  .inventory-content{height:auto}
  .inventory-section-title{padding:12px}
  .worn-grid{grid-template-columns:1fr;padding:8px;gap:8px}
  .inventory-toolbar{
    grid-template-columns:auto 1fr;
    padding:8px;
    gap:7px;
  }
  .inventory-toolbar input{grid-column:1 / -1}
  .inventory-row{padding:7px 8px}
  .inventory-row-actions{padding-left:0;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
  .inventory-row-actions button{width:100%}

  .details-drawer{
    width:100%;
    max-width:100%;
    padding-bottom:env(safe-area-inset-bottom);
  }

  .toast{
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    max-width:none;
  }
}

@media(max-width:390px){
  .sidebar-logo{width:116px}
  .top-tab{padding:7px 10px;font-size:12px}
  .actions{grid-template-columns:1fr 1fr}
  .composer-actions-v29{grid-template-columns:1fr 1fr 1fr}
  .note-button{font-size:12px}
}


/* v2.15 — Block User */
.danger-button{
  border:1px solid #8f3434;
  background:#431d1d;
  color:#ffb0b0;
  border-radius:10px;
  padding:8px 11px;
  font-weight:800;
  cursor:pointer;
}
.danger-button:hover{
  background:#572222;
  border-color:#b64949;
  color:#ffd0d0;
}
.danger-button.is-unblock{
  background:#202126;
  border-color:#454752;
  color:#c8cad3;
}
.danger-button.is-unblock:hover{
  background:#2b2d34;
  border-color:#626571;
  color:#fff;
}
.blocked-pill{
  flex:0 0 auto;
  border-radius:999px;
  padding:2px 7px;
  background:#451d1d;
  border:1px solid #8d3939;
  color:#ff9d9d;
  font-size:9px;
  font-weight:850;
}

/* Keep the destructive action usable in the compact mobile ticket header. */
@media(max-width:850px){
  #blockUserBtn{
    min-width:0;
    width:100%;
  }
}


/* v2.16 — Global Audit Log */
.audit-page-content{
  padding:18px;
  overflow:auto;
  height:100%;
}
.audit-toolbar{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(180px,280px);
  gap:10px;
  margin-bottom:14px;
}
.audit-global-list{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:var(--panel);
}
.audit-global-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  padding:14px 16px;
  border-bottom:1px solid #28282f;
  align-items:flex-start;
}
.audit-global-row:last-child{
  border-bottom:0;
}
.audit-global-row:hover{
  background:#18181d;
}
.audit-global-main{
  min-width:0;
}
.audit-global-title{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.audit-global-title > strong{
  font-size:13px;
}
.audit-action-pill{
  border:1px solid #34343c;
  background:#1b1b20;
  color:#b7b7c0;
  border-radius:999px;
  padding:3px 8px;
  font-size:10px;
  font-weight:800;
}
.audit-global-target{
  margin-top:6px;
  color:#9c9ca6;
  font-size:11px;
  display:flex;
  gap:5px;
  align-items:center;
  flex-wrap:wrap;
}
.audit-global-target strong{
  color:#d5d5dc;
}
.audit-target-uuid{
  color:#666672;
  font-size:9px;
}
.audit-global-details{
  margin-top:6px;
  color:#b0b0ba;
  font-size:12px;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
}
.audit-global-time{
  min-width:90px;
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:10px;
  color:#74747f;
}
.audit-global-time strong{
  color:#a5a5ae;
  font-size:10px;
}
.audit-global-loading,
.audit-global-empty,
.audit-global-error{
  padding:28px;
  text-align:center;
}
.audit-global-error{
  color:#efaaaa;
}

.audit-event-danger{
  box-shadow:inset 3px 0 0 #8d3939;
}
.audit-event-danger .audit-action-pill{
  border-color:#8d3939;
  background:#451d1d;
  color:#ffaaaa;
}
.audit-event-success{
  box-shadow:inset 3px 0 0 #347848;
}
.audit-event-success .audit-action-pill{
  border-color:#347848;
  background:#172b1d;
  color:#9de2af;
}
.audit-event-closed{
  box-shadow:inset 3px 0 0 #555761;
}
.audit-event-reply{
  box-shadow:inset 3px 0 0 #596b8e;
}

@media(max-width:850px){
  .audit-page-content{
    padding:12px;
  }
  .audit-toolbar{
    grid-template-columns:1fr;
  }
  .audit-global-row{
    grid-template-columns:1fr;
    gap:8px;
    padding:12px;
  }
  .audit-global-time{
    min-width:0;
    text-align:left;
    flex-direction:row;
    gap:6px;
  }
  .audit-target-uuid{
    display:none;
  }
}