:root{
  --ink:#15143A;--ink-2:#211F63;--ink-3:#2C2A80;
  --cyan:#00D9C2;--cyan-dim:#0AA396;--cyan-bg:#E3FBF8;
  --coral:#FF5D73;--coral-bg:#FFEBEE;--coral-text:#C23F52;
  --amber:#E8A33D;--amber-bg:#FDF3E1;--amber-text:#8A5E10;
  --green:#1FAE7A;--green-bg:#E7F7F1;
  --page:#F4F5FA;--card:#FFFFFF;--line:#E5E6F0;
  --text:#16152E;--text-2:#65647F;--text-3:#9A99AE;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--page);color:var(--text);
  overflow:hidden;height:100vh;width:100vw;
}
.logo-font{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
button{font-family:'Inter',sans-serif;cursor:pointer;}
a{color:inherit;}
mark{background:var(--cyan-bg);color:var(--ink-3);padding:0 2px;border-radius:3px;font-weight:600;}

.app{display:flex;height:100vh;width:100vw;}
.app.col{flex-direction:column;}

/* ---- Role switch ---- */
.role-bar{
  position:fixed;bottom:16px;right:16px;z-index:100;
  display:flex;gap:4px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:4px;box-shadow:0 8px 24px rgba(21,20,58,0.12);
}
.role-btn{
  border:none;background:transparent;padding:8px 14px;border-radius:9px;
  font-size:12.5px;font-weight:500;color:var(--text-2);
}
.role-btn.active{background:var(--ink);color:#fff;}

/* ---- Sidebar ---- */
.sidebar{
  width:230px;flex-shrink:0;background:var(--ink);color:#DEDDF5;
  display:flex;flex-direction:column;padding:22px 0 18px;
}
.sidebar.wide{width:248px;}
.brand{display:flex;align-items:center;gap:10px;padding:0 20px 20px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:14px;position:relative;}
.brand-text{min-width:0;flex:1;}
.brand-name{font-size:17px;font-weight:600;color:#fff;}
.brand-ver{font-size:11px;font-weight:500;color:#A6A4CC;margin-left:4px;letter-spacing:0;}
.brand-tag{font-size:11px;color:var(--cyan);letter-spacing:0.04em;text-transform:uppercase;}
.login-card .brand-ver{color:#A6A4CC;font-size:12px;}
.hub-dd{position:relative;margin-top:4px;}
.hub-toggle{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;padding:5px 8px 5px 10px;cursor:pointer;
  font-size:11px;color:var(--cyan);letter-spacing:0.04em;text-transform:uppercase;
  font-family:'Inter',sans-serif;font-weight:500;
}
.hub-toggle:hover{background:rgba(255,255,255,0.1);}
.hub-toggle span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hub-chevron{flex-shrink:0;opacity:0.85;transition:transform .15s ease;}
.hub-toggle[aria-expanded="true"] .hub-chevron{transform:rotate(180deg);}
.hub-menu{
  display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:50;
  width:240px;max-width:calc(100vw - 40px);
  background:#1B1948;border:1px solid rgba(255,255,255,0.12);border-radius:12px;
  padding:6px;box-shadow:0 16px 40px rgba(0,0,0,0.45);
}
.hub-menu.open{display:flex;flex-direction:column;gap:2px;}
.hub-option{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;text-align:left;border:none;background:transparent;cursor:pointer;
  padding:10px 12px;border-radius:9px;color:#C4C3E0;font-family:'Inter',sans-serif;
}
.hub-option:hover{background:rgba(255,255,255,0.06);}
.hub-option.active{background:var(--ink-2);color:#fff;}
.hub-opt-label{font-size:13px;font-weight:600;}
.hub-opt-tag{font-size:10.5px;color:#8B89B8;text-transform:uppercase;letter-spacing:0.04em;}
.hub-option.active .hub-opt-tag{color:var(--cyan);}
.nav-label,.cat-label{font-size:11px;color:#7B79AD;text-transform:uppercase;letter-spacing:0.06em;padding:0 20px 8px;}
.cat-label{margin-top:8px;}
nav{display:flex;flex-direction:column;gap:1px;}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:10px 20px;
  font-size:13.5px;font-weight:500;color:#C4C3E0;text-decoration:none;
  border-left:2px solid transparent;border:none;background:transparent;width:100%;text-align:left;cursor:pointer;
  border-left:2px solid transparent;
}
.nav-item .left{display:flex;align-items:center;gap:10px;}
.nav-item .count{margin-left:auto;font-size:11.5px;color:#8B89B8;font-family:'Space Grotesk',sans-serif;}
.nav-item:hover{background:rgba(255,255,255,0.04);}
.nav-item.active{color:#fff;background:var(--ink-2);border-left-color:var(--cyan);}
.nav-item.active svg{stroke:var(--cyan);}
.nav-item.urgent .count{color:var(--coral);font-weight:600;}
.nav-item.active .count{color:var(--cyan);}
.sub-nav{display:flex;flex-direction:column;gap:1px;padding-left:20px;margin-bottom:6px;}
.sub-nav button{
  padding:6px 12px 6px 14px;font-size:12.5px;color:#9E9DC7;background:transparent;border:none;
  border-left:1px solid rgba(255,255,255,0.12);text-align:left;cursor:pointer;
}
.sub-nav button.active,.sub-nav button:hover{color:var(--cyan);border-left-color:var(--cyan);font-weight:500;}
.cat-item{
  display:flex;align-items:center;gap:9px;padding:7px 20px;font-size:13px;color:#B3B2D4;
  background:transparent;border:none;width:100%;text-align:left;cursor:pointer;
}
.cat-item .dot{width:6px;height:6px;border-radius:50%;background:#5C5A96;}
.cat-item.active{color:#fff;}
.sidebar-footer{margin-top:auto;padding:14px 20px 0;border-top:1px solid rgba(255,255,255,0.08);}
.updates-link{
  display:flex;align-items:center;gap:11px;font-size:13px;color:#A6A4CC;
  background:transparent;border:none;padding:8px 0;cursor:pointer;width:100%;text-align:left;
}
.admin-avatar,.agent-avatar,.author-avatar,.ticket-avatar,.detail-avatar{
  border-radius:50%;background:var(--ink-3);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-family:'Space Grotesk',sans-serif;flex-shrink:0;
}
.admin-avatar{width:30px;height:30px;font-size:12px;background:var(--cyan);color:var(--ink);}
.admin-name{font-size:13px;font-weight:500;color:#fff;}
.admin-role{font-size:11px;color:#8B89B8;}

/* ---- Main shell ---- */
.main{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;}
.topbar{
  display:flex;align-items:center;gap:14px;
  padding:16px 32px;border-bottom:1px solid var(--line);background:var(--card);flex-shrink:0;
}
.topbar h1{font-size:18px;font-weight:600;font-family:'Space Grotesk',sans-serif;}
.topbar .sub{font-size:12.5px;color:var(--text-2);margin-top:2px;}
.search-wrap{flex:1;position:relative;max-width:640px;}
.search-wrap svg.icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);stroke:var(--text-3);}
.search-wrap input{
  width:100%;height:42px;border-radius:10px;border:1px solid var(--line);
  background:var(--page);padding:0 40px 0 40px;font-size:14px;font-family:'Inter',sans-serif;
  color:var(--text);outline:none;
}
.search-wrap input:focus,.search-wrap.focused input{
  border-color:var(--cyan-dim);background:#fff;box-shadow:0 0 0 3px rgba(0,217,194,0.14);
}
.search-wrap .clear{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--text-3);font-size:16px;cursor:pointer;background:none;border:none;
}
.agent-chip{
  display:flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border-radius:20px;
  background:var(--page);border:1px solid var(--line);flex-shrink:0;
}
.agent-avatar{width:26px;height:26px;font-size:11px;}
.agent-chip span{font-size:13px;font-weight:500;}
.bell-btn{
  position:relative;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);
  background:var(--page);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.bell-btn:hover{background:#EFEFF6;}
.bell-btn.active-bell{border-color:var(--cyan-dim);background:rgba(0,217,194,0.08);}
.bell-badge{
  position:absolute;top:-5px;right:-5px;background:var(--coral);color:#fff;
  font-size:11px;font-weight:600;min-width:18px;height:18px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  border:2px solid var(--card);font-family:'Space Grotesk',sans-serif;
}
.back-btn{
  display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--page);
  border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:500;color:var(--text-2);
}
.back-btn:hover{background:#EFEFF6;}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-3);}
.breadcrumb b{color:var(--text-2);font-weight:500;}
.breadcrumb .num{font-family:'Space Grotesk',sans-serif;color:var(--cyan-dim);font-weight:600;}
.add-btn,.btn-primary{
  display:flex;align-items:center;gap:7px;background:var(--ink);color:#fff;
  border:none;border-radius:9px;padding:9px 15px;font-size:13px;font-weight:500;flex-shrink:0;
}
.add-btn svg,.btn-primary svg{stroke:var(--cyan);}
.add-btn:hover,.btn-primary:hover{background:var(--ink-2);}
.btn-secondary{
  display:flex;align-items:center;gap:7px;background:var(--card);color:var(--text-2);
  border:1px solid var(--line);border-radius:9px;padding:10px 16px;font-size:13px;font-weight:500;
}
.btn-secondary:hover{background:var(--page);}
.legend{display:flex;align-items:center;gap:14px;margin-left:auto;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);}
.legend-dot{width:8px;height:8px;border-radius:50%;}
.period-tabs{display:flex;gap:2px;margin-left:auto;background:var(--page);border-radius:9px;padding:3px;}
.period-tab{
  padding:7px 14px;font-size:12.5px;font-weight:500;color:var(--text-2);
  border-radius:7px;background:transparent;border:none;
}
.period-tab.active{background:var(--ink);color:#fff;}

.content-area{flex:1;min-height:0;overflow:hidden;display:flex;}

/* ---- Home ---- */
.home-content{flex:1;display:flex;gap:28px;padding:26px 32px;min-height:0;}
.content-left{flex:1.3;display:flex;flex-direction:column;min-width:0;}
.hello{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600;margin-bottom:4px;}
.hello span{color:var(--cyan-dim);}
.subhead{font-size:13px;color:var(--text-2);margin-bottom:18px;}
.faq-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.faq-head h2{font-size:13px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:0.04em;}
.section-tag{font-size:12px;color:var(--text-3);}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;flex:1;min-height:0;overflow-y:auto;}
.faq-item{
  display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--text);background:none;border-left:none;border-right:none;border-top:none;
  width:100%;text-align:left;cursor:pointer;font-family:inherit;
}
.faq-item:last-child{border-bottom:none;}
.faq-num{font-family:'Space Grotesk',sans-serif;font-size:12px;color:var(--cyan-dim);font-weight:600;width:18px;flex-shrink:0;}
.faq-item p{font-size:13.5px;line-height:1.4;}
.faq-item:hover p{color:var(--ink-3);}
.ticket-btn,.ask-btn{
  margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;
  border-radius:10px;background:var(--ink);color:#fff;font-size:14px;font-weight:500;border:none;width:100%;
}
.ticket-btn svg,.ask-btn svg{stroke:var(--cyan);}
.ticket-btn:hover,.ask-btn:hover{background:var(--ink-2);}
.content-right{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;}
.quick-card{
  background:var(--ink);border-radius:14px;padding:20px;color:#fff;display:flex;flex-direction:column;gap:10px;
}
.quick-card h3{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;}
.quick-card p{font-size:12.5px;color:#B8B7DA;line-height:1.5;}
.quick-hint{
  font-size:12px;color:var(--cyan);background:rgba(0,217,194,0.1);
  border:1px solid rgba(0,217,194,0.25);border-radius:8px;padding:8px 10px;line-height:1.4;
}
.stat-card,.filter-card,.panel,.metric-card,.depth-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
}
.stat-card .label,.filter-card .label,.depth-card .label,.metric-card .label{
  font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:10px;
}
.stat-row,.filter-chip{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:13px;}
.stat-row:not(:last-child),.filter-chip:not(:last-child){border-bottom:1px solid var(--line);}
.stat-row .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--coral);margin-right:8px;}
.stat-row .val{font-weight:600;font-family:'Space Grotesk',sans-serif;}
.filter-chip{color:var(--text-2);cursor:pointer;background:none;border:none;width:100%;text-align:left;border-bottom:1px solid var(--line);border-radius:0;}
.filter-chip.active{color:var(--ink-3);font-weight:600;}
.filter-chip .n{color:var(--text-3);font-size:12px;}

/* ---- Search ---- */
.search-content{flex:1;padding:22px 32px;overflow:hidden;display:flex;gap:24px;min-height:0;}
.results-col{flex:1.6;display:flex;flex-direction:column;min-width:0;}
.result-meta{font-size:12.5px;color:var(--text-2);margin-bottom:14px;}
.result-meta b{color:var(--text);font-weight:600;}
.quick-answer{
  display:flex;gap:12px;background:var(--ink);border-radius:14px;padding:16px 18px;color:#fff;margin-bottom:18px;
}
.quick-answer .label{font-size:11px;color:var(--cyan);text-transform:uppercase;letter-spacing:0.05em;font-weight:600;margin-bottom:5px;}
.quick-answer p{font-size:14.5px;line-height:1.55;color:#EDEDFA;}
.quick-answer .src{margin-top:9px;font-size:12px;color:#9E9DC7;}
.quick-answer .src button{color:var(--cyan);background:none;border:none;font-weight:500;cursor:pointer;font-size:12px;}
.results-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px;}
.result-item{
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  text-align:left;cursor:pointer;font-family:inherit;color:var(--text);width:100%;
}
.result-item.top{border:1.5px solid var(--cyan-dim);}
.result-item:hover{border-color:var(--cyan-dim);}
.result-top{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.match-badge{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:6px;text-transform:uppercase;}
.match-high{background:var(--green-bg);color:var(--green);}
.match-mid{background:var(--amber-bg);color:var(--amber-text);}
.cat-pill{font-size:11.5px;color:var(--text-3);}
.result-item .updated{margin-left:auto;font-size:11.5px;color:var(--text-3);}
.result-title{font-size:14.5px;font-weight:600;margin-bottom:4px;}
.result-snippet{font-size:13px;color:var(--text-2);line-height:1.5;}
.filters-col{width:260px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;}
.ask-card{background:var(--cyan-bg);border:1px solid #B7EEE7;border-radius:14px;padding:16px 18px;}
.ask-card p{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-bottom:10px;}
.ask-btn{height:38px;font-size:13px;margin-top:0;}

/* ---- Article ---- */
.article-layout{flex:1;display:flex;min-height:0;overflow:hidden;}
.article-col{flex:1.6;overflow-y:auto;padding:26px 40px 30px;min-width:0;}
.status-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.status-pub{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--green);background:var(--green-bg);padding:3px 9px;border-radius:6px;}
.meta-text{font-size:12px;color:var(--text-3);}
.article-col h1{font-size:24px;font-weight:600;font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em;margin-bottom:8px;line-height:1.25;}
.authors{display:flex;align-items:center;gap:16px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line);}
.author{display:flex;align-items:center;gap:8px;}
.author-avatar{width:26px;height:26px;font-size:10.5px;}
.author-text{font-size:12px;color:var(--text-2);}
.author-text b{color:var(--text);font-weight:500;}
.article-body{font-size:14.5px;line-height:1.75;}
.article-body h2{font-size:16px;font-weight:600;font-family:'Space Grotesk',sans-serif;margin:22px 0 10px;}
.article-body p{margin-bottom:12px;}
.article-body ul{margin:0 0 14px 20px;}
.article-body li{margin-bottom:6px;}
.callout{display:flex;gap:10px;background:var(--cyan-bg);border:1px solid #B7EEE7;border-radius:10px;padding:13px 15px;margin:16px 0;}
.callout svg{stroke:var(--cyan-dim);flex-shrink:0;margin-top:2px;}
.callout p{font-size:13px;color:var(--ink-3);margin:0;line-height:1.5;}
.table-wrap{margin:14px 0 18px;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{background:var(--page);text-align:left;padding:9px 14px;font-weight:600;color:var(--text-2);font-size:11.5px;text-transform:uppercase;}
td{padding:9px 14px;border-top:1px solid var(--line);}
.feedback-block{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);}
.feedback-block .q{font-size:13.5px;font-weight:500;margin-bottom:10px;}
.feedback-btns{display:flex;gap:10px;}
.fb-btn{
  display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card);
  border-radius:9px;padding:9px 16px;font-size:13px;font-weight:500;color:var(--text-2);
}
.fb-btn:hover{background:var(--page);}
.fb-btn.yes:hover{border-color:var(--green);color:var(--green);}
.fb-btn.no:hover{border-color:var(--coral);color:var(--coral);}
.right-col{width:280px;flex-shrink:0;border-left:1px solid var(--line);background:var(--card);overflow-y:auto;padding:24px 22px;}
.rail-block{margin-bottom:22px;}
.rail-label{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:10px;}
.rail-item{
  display:flex;align-items:center;gap:9px;padding:8px 0;font-size:13px;color:var(--text-2);
  background:none;border:none;border-bottom:1px solid var(--line);width:100%;text-align:left;cursor:pointer;
}
.rail-item:last-child{border-bottom:none;}
.rail-item .num{font-size:11.5px;color:var(--text-3);font-family:'Space Grotesk',sans-serif;width:24px;flex-shrink:0;}
.rail-item.current{color:var(--ink-3);font-weight:600;}
.history-item{display:flex;gap:9px;font-size:12px;color:var(--text-2);padding:7px 0;border-bottom:1px solid var(--line);}
.history-item:last-child{border-bottom:none;}
.history-item .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan-dim);flex-shrink:0;margin-top:5px;}
.history-item .d{color:var(--text-3);font-size:11px;}

/* ---- Notifications ---- */
.notif-app{display:flex;flex-direction:column;height:100vh;width:100vw;}
.notif-topbar{
  display:flex;align-items:center;gap:16px;padding:16px 32px;
  border-bottom:1px solid var(--line);background:var(--card);flex-shrink:0;
}
.title-block h1{font-size:16px;font-weight:600;font-family:'Space Grotesk',sans-serif;}
.title-block p{font-size:12.5px;color:var(--text-2);}
.notif-content{flex:1;display:flex;flex-direction:column;padding:22px 32px 24px;min-height:0;gap:18px;overflow:hidden;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:2px;flex-wrap:wrap;}
.section-head h2{font-size:13px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:0.04em;}
.section-head .count{font-size:12px;color:var(--coral-text);background:var(--coral-bg);padding:2px 8px;border-radius:10px;font-weight:600;}
.section-head .sub{font-size:12px;color:var(--text-3);flex:1;}
.review-list{display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding-right:4px;flex:1;min-height:0;}
.review-item{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--coral);border-radius:10px;padding:13px 16px;}
.review-item.acked{border-left-color:var(--green);opacity:0.6;}
.review-item.acked .review-q{text-decoration:line-through;text-decoration-color:var(--text-3);}
.review-meta{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap;}
.tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:0.02em;}
.tag-new{background:var(--coral-bg);color:var(--coral-text);}
.tag-cat{background:var(--page);color:var(--text-2);border:1px solid var(--line);}
.tag-source{background:var(--ink);color:var(--cyan);}
.review-date{font-size:11.5px;color:var(--text-3);}
.review-q{font-size:14px;font-weight:600;margin-bottom:3px;}
.review-a{font-size:13px;color:var(--text-2);line-height:1.5;}
.review-actions{display:flex;align-items:center;gap:10px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line);}
.ack-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;user-select:none;}
.ack-check input{width:17px;height:17px;accent-color:var(--green);cursor:pointer;}
.clarify-btn{
  display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--text-2);
  background:var(--page);border:1px solid var(--line);border-radius:8px;padding:7px 12px;margin-left:auto;
}
.clarify-box{display:none;margin-top:11px;padding-top:11px;border-top:1px solid var(--line);}
.clarify-box.open{display:block;}
.clarify-box textarea,.reply-input{
  width:100%;min-height:52px;border:1px solid var(--line);border-radius:8px;padding:9px 11px;
  font-size:13px;font-family:'Inter',sans-serif;color:var(--text);resize:none;outline:none;
}
.clarify-box textarea:focus,.reply-input:focus{border-color:var(--cyan-dim);}
.clarify-send{
  margin-top:8px;display:flex;align-items:center;gap:6px;background:var(--ink);color:#fff;
  border:none;border-radius:8px;padding:8px 14px;font-size:12.5px;font-weight:500;
}
.approved-list{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.approved-item{display:flex;align-items:center;gap:16px;padding:16px 20px;}
.approved-item:not(:last-child){border-bottom:1px solid var(--line);}
.approved-icon{width:38px;height:38px;border-radius:10px;background:var(--green-bg);color:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.approved-body .q{font-size:15px;font-weight:600;margin-bottom:2px;}
.approved-body .meta{font-size:12.5px;color:var(--text-3);}
.approved-body .meta b{color:var(--text-2);font-weight:500;}
.approved-date{font-size:12.5px;color:var(--text-3);flex-shrink:0;margin-left:auto;}

/* ---- Admin tickets ---- */
.list-col{width:400px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--card);min-height:0;}
.list-head{padding:18px 22px 12px;border-bottom:1px solid var(--line);}
.list-head h1{font-size:17px;font-weight:600;font-family:'Space Grotesk',sans-serif;margin-bottom:2px;}
.list-head p{font-size:12.5px;color:var(--text-2);}
.list-head .search-wrap{margin-top:12px;max-width:none;}
.list-head .search-wrap input{height:36px;border-radius:8px;font-size:13px;padding-left:34px;}
.ticket-list{flex:1;overflow-y:auto;padding:8px 10px;}
.ticket-row{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:10px;cursor:pointer;border:1px solid transparent;background:transparent;width:100%;text-align:left;font-family:inherit;color:var(--text);}
.ticket-row:hover{background:var(--page);}
.ticket-row.selected{background:var(--page);border-color:var(--line);}
.ticket-top{display:flex;align-items:center;gap:8px;}
.ticket-avatar{width:26px;height:26px;font-size:10.5px;}
.ticket-name{font-size:12.5px;font-weight:500;}
.ticket-time{font-size:11.5px;color:var(--text-3);margin-left:auto;}
.ticket-q{font-size:13.5px;font-weight:500;line-height:1.4;padding-left:34px;}
.ticket-meta{display:flex;align-items:center;gap:6px;padding-left:34px;}
.status{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:6px;text-transform:uppercase;}
.status-new{background:var(--coral-bg);color:var(--coral-text);}
.status-progress{background:var(--amber-bg);color:var(--amber-text);}
.status-done{background:var(--green-bg);color:var(--green);}
.detail-col{flex:1;display:flex;flex-direction:column;min-width:0;}
.detail-top{display:flex;align-items:center;gap:14px;padding:18px 28px;border-bottom:1px solid var(--line);background:var(--card);flex-shrink:0;}
.detail-avatar{width:38px;height:38px;font-size:13px;}
.detail-who .name{font-size:14.5px;font-weight:600;}
.detail-who .role{font-size:12px;color:var(--text-2);}
.detail-top .status{margin-left:auto;}
.detail-body{flex:1;padding:22px 28px;overflow-y:auto;min-height:0;}
.q-card{background:var(--page);border-radius:12px;padding:16px 18px;margin-bottom:16px;}
.q-card .tags{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.q-card .q-text{font-size:15px;font-weight:500;line-height:1.5;}
.q-card .q-ref{font-size:12px;color:var(--text-3);margin-top:8px;}
.reply-label{font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:8px;}
textarea.reply-input{min-height:110px;border-radius:10px;padding:12px 14px;font-size:13.5px;line-height:1.5;}
.publish-row{display:flex;align-items:center;gap:9px;margin-top:12px;background:var(--green-bg);border:1px solid #C9EBDD;border-radius:9px;padding:11px 14px;}
.publish-row input{width:17px;height:17px;accent-color:var(--green);cursor:pointer;flex-shrink:0;}
.publish-row .txt b{color:var(--text);font-weight:600;font-size:13px;display:block;}
.publish-row .txt span{font-size:12px;color:var(--text-2);}
.detail-footer{display:flex;align-items:center;gap:10px;padding:16px 28px;border-top:1px solid var(--line);background:var(--card);flex-shrink:0;}
.detail-footer .btn-primary{margin-left:auto;}
.toast{
  position:fixed;bottom:72px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;font-size:13px;
  z-index:200;box-shadow:0 8px 24px rgba(21,20,58,0.2);
}

/* ---- Structure ---- */
.structure-content{flex:1;padding:20px 32px 96px;overflow:hidden;display:flex;gap:26px;min-height:0;}
.outline-col{flex:1;overflow-y:auto;min-width:0;}
.section-row{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  background:var(--card);border:1px solid var(--line);margin-bottom:2px;
}
.num{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;color:var(--ink-3);width:26px;flex-shrink:0;text-align:right;}
.sub .num{color:var(--text-3);}
.sec-title{font-size:13.5px;font-weight:600;flex:1;}
.sub .sec-title{font-size:13px;font-weight:400;color:var(--text-2);}
.art-count{font-size:11.5px;color:var(--text-3);flex-shrink:0;}
.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.status-pub-dot{background:var(--green);}
.status-review{background:var(--amber);}
.status-draft{background:var(--text-3);}
.sub-list{padding-left:26px;display:flex;flex-direction:column;gap:2px;margin-bottom:6px;}
.sub{display:flex;align-items:center;gap:10px;padding:6px 12px;border-left:1px solid var(--line);}
.stats-col{width:270px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;}
.big-stat{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;}
.big-stat .n{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:600;}
.big-stat .l{font-size:12.5px;color:var(--text-2);}
.bar-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12.5px;}
.bar-row .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.bar-row span:nth-child(2){flex:1;color:var(--text-2);}
.bar-row .v{font-weight:600;font-family:'Space Grotesk',sans-serif;}
.depth-card{background:var(--ink);color:#fff;border:none;}
.depth-card .label{color:var(--cyan);}
.depth-card p{font-size:12.5px;color:#C4C3E0;line-height:1.5;}
.depth-card .mono{color:var(--cyan);font-size:12.5px;}

/* ---- Analytics ---- */
.analytics-content{flex:1;padding:20px 32px 96px;overflow:hidden;display:flex;flex-direction:column;gap:16px;min-height:0;}
.metric-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;flex-shrink:0;}
.metric-card .val-row{display:flex;align-items:baseline;gap:8px;}
.metric-card .n{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:600;}
.trend{font-size:12px;font-weight:600;}
.trend.up{color:var(--green);}
.trend.down{color:var(--coral-text);}
.metric-card .sub{font-size:11.5px;color:var(--text-3);margin-top:5px;}
.body-grid{flex:1;display:grid;grid-template-columns:1.3fr 1fr;gap:16px;min-height:0;}
.panel{display:flex;flex-direction:column;min-height:0;padding:18px 20px;}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;flex-shrink:0;}
.panel-head h2{font-size:13.5px;font-weight:600;}
.panel-head span{font-size:11.5px;color:var(--text-3);}
.q-list{display:flex;flex-direction:column;overflow-y:auto;flex:1;}
.q-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);}
.q-row:last-child{border-bottom:none;}
.q-rank{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;color:var(--text-3);width:16px;flex-shrink:0;}
.q-text{flex:1;font-size:13px;font-weight:500;min-width:0;}
.q-tag{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:6px;background:var(--page);color:var(--text-2);border:1px solid var(--line);flex-shrink:0;}
.q-count{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--ink-3);flex-shrink:0;width:28px;text-align:right;}
.q-noans{width:7px;height:7px;border-radius:50%;background:var(--coral);flex-shrink:0;}
.bar-list{display:flex;flex-direction:column;gap:11px;}
.bar-item .top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;}
.bar-item .top .name{font-weight:500;}
.bar-item .top .val{color:var(--text-2);font-family:'Space Grotesk',sans-serif;font-weight:600;}
.bar-track{height:8px;border-radius:4px;background:var(--page);overflow:hidden;}
.bar-fill{height:100%;border-radius:4px;background:var(--ink-3);}
.week-chart{display:flex;align-items:flex-end;gap:8px;height:90px;margin-top:auto;padding-top:14px;}
.week-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end;height:100%;}
.week-bar .bar{width:100%;border-radius:5px 5px 0 0;background:var(--cyan-dim);}
.week-bar .bar.peak{background:var(--ink);}
.week-bar .day{font-size:10.5px;color:var(--text-3);}
.no-answer-note{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3);margin-top:10px;}
.no-answer-note .dot{width:7px;height:7px;border-radius:50%;background:var(--coral);}

.robot{width:38px;height:38px;flex-shrink:0;}
.hidden{display:none!important;}

/* ---- Login ---- */
.login-screen{
  min-height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 20% 0%, #2C2A80 0%, var(--ink) 55%, #0D0C24 100%);
  padding:24px;
}
.login-card{
  width:100%;max-width:400px;background:var(--card);border-radius:16px;padding:28px 28px 24px;
  box-shadow:0 24px 64px rgba(0,0,0,0.35);
}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.login-brand .title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:600;}
.login-brand .tag{font-size:11px;color:var(--cyan-dim);text-transform:uppercase;letter-spacing:0.04em;}
.login-card h2{font-size:15px;font-weight:600;margin-bottom:4px;}
.login-card .login-sub{font-size:12.5px;color:var(--text-2);margin-bottom:18px;line-height:1.45;}
.field{margin-bottom:12px;}
.field label{display:block;font-size:12px;font-weight:500;color:var(--text-2);margin-bottom:6px;}
.field input{
  width:100%;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--page);
  padding:0 14px;font-size:14px;font-family:'Inter',sans-serif;color:var(--text);outline:none;
}
.field input:focus{border-color:var(--cyan-dim);background:#fff;box-shadow:0 0 0 3px rgba(0,217,194,0.14);}
.login-actions{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.login-error{font-size:12.5px;color:var(--coral-text);background:var(--coral-bg);border-radius:8px;padding:8px 10px;margin-bottom:10px;}
.login-ok{font-size:12.5px;color:var(--ink-3);background:var(--cyan-bg);border:1px solid #B7EEE7;border-radius:8px;padding:8px 10px;margin-bottom:10px;line-height:1.4;}
.login-demo{font-size:11.5px;color:var(--text-3);margin-top:14px;line-height:1.5;}
.login-demo code{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);}
.otp-row{display:flex;gap:8px;}
.otp-row input{letter-spacing:0.2em;font-weight:600;font-family:'Space Grotesk',sans-serif;text-align:center;}

.user-bar{
  position:fixed;bottom:16px;right:16px;z-index:100;
  display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:6px 8px 6px 6px;box-shadow:0 8px 24px rgba(21,20,58,0.12);
}
.user-bar .u-avatar{
  width:28px;height:28px;border-radius:50%;background:var(--ink-3);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;font-family:'Space Grotesk',sans-serif;
}
.user-bar .u-meta{display:flex;flex-direction:column;padding-right:4px;}
.user-bar .u-name{font-size:12px;font-weight:600;}
.user-bar .u-role{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.03em;}
.user-bar .logout{
  border:1px solid var(--line);background:var(--page);border-radius:8px;padding:6px 10px;
  font-size:12px;font-weight:500;color:var(--text-2);
}

/* Admin users panel */
.users-content{flex:1;padding:22px 32px 96px;overflow-y:auto;}
.user-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.user-table th{background:var(--page);text-align:left;padding:10px 14px;font-size:11.5px;text-transform:uppercase;color:var(--text-2);}
.user-table td{padding:12px 14px;border-top:1px solid var(--line);font-size:13.5px;vertical-align:middle;}
.user-table select{
  height:34px;border-radius:8px;border:1px solid var(--line);background:var(--page);
  padding:0 10px;font-size:13px;font-family:'Inter',sans-serif;
}
.role-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;text-transform:uppercase;}
.role-admin{background:var(--ink);color:var(--cyan);}
.role-manager{background:var(--cyan-bg);color:var(--ink-3);}
.role-client{background:var(--page);color:var(--text-2);border:1px solid var(--line);}
.role-agent{background:var(--green-bg);color:var(--green);}
.hub-locked{display:inline-block;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);}
.hub-checks{display:flex;flex-direction:column;gap:6px;}
.hub-check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);cursor:pointer;}
.hub-check input{width:15px;height:15px;accent-color:var(--cyan-dim);}
.lock-hint{font-size:12px;color:var(--amber-text);background:var(--amber-bg);border-radius:8px;padding:8px 12px;margin-bottom:14px;}

/* ---- Knowledge base editor ---- */
.kb-content{flex:1;padding:18px 28px 96px;overflow-y:auto;min-height:0;}
.kb-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.kb-filters{display:flex;gap:6px;flex-wrap:wrap;}
.kb-chip{
  border:1px solid var(--line);background:var(--card);border-radius:8px;padding:7px 12px;
  font-size:12.5px;font-weight:500;color:var(--text-2);
}
.kb-chip.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.kb-count{font-size:12.5px;color:var(--text-3);}
.kb-list{display:flex;flex-direction:column;gap:8px;}
.kb-row{
  display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;
}
.kb-main{flex:1;min-width:0;}
.kb-title{font-size:14.5px;font-weight:600;margin-bottom:6px;}
.kb-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--text-3);}
.kb-badge{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:6px;text-transform:uppercase;}
.kb-st-pub{background:var(--green-bg);color:var(--green);}
.kb-st-review{background:var(--amber-bg);color:var(--amber-text);}
.kb-st-draft{background:var(--page);color:var(--text-2);border:1px solid var(--line);}
.kb-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.kb-actions .btn-secondary{padding:8px 12px;font-size:12.5px;}
.kb-del{color:var(--coral-text)!important;border-color:#f0c4cb!important;}
.kb-empty{padding:28px;text-align:center;color:var(--text-3);background:var(--card);border:1px dashed var(--line);border-radius:12px;}
.kb-edit{flex:1;padding:18px 28px 96px;overflow-y:auto;min-height:0;}
.kb-form{max-width:820px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;}
.kb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.kb-form .field select{
  width:100%;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--page);
  padding:0 12px;font-size:14px;font-family:'Inter',sans-serif;color:var(--text);outline:none;
}
.kb-body{
  width:100%;min-height:280px;border-radius:10px;border:1px solid var(--line);background:var(--page);
  padding:12px 14px;font-size:14px;font-family:'Inter',sans-serif;color:var(--text);line-height:1.55;
  resize:vertical;outline:none;
}
.kb-body:focus,.kb-form .field input:focus,.kb-form .field select:focus{
  border-color:var(--cyan-dim);background:#fff;box-shadow:0 0 0 3px rgba(0,217,194,0.14);
}
.kb-form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.kb-hint{font-size:12px;color:var(--text-3);margin-top:14px;line-height:1.45;}

.sec-ops{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;}
.sec-ops .btn-secondary{padding:5px 8px;font-size:11.5px;}
.sec-form{
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;
}
.ai-answer{
  margin-top:12px;padding:12px;border-radius:10px;background:rgba(0,217,194,0.1);
  border:1px solid rgba(0,217,194,0.25);
}
.ai-answer .label{font-size:11px;color:var(--cyan);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;font-weight:600;}
.ai-answer p{font-size:13px;color:#E8E7F8;line-height:1.5;margin-bottom:8px;}
.ai-src{
  display:block;width:100%;text-align:left;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  color:var(--cyan);border-radius:8px;padding:7px 10px;font-size:12px;margin-top:4px;cursor:pointer;
}
.ai-mode{font-size:10.5px;color:#8B89B8;margin-top:8px;text-transform:uppercase;}
.section-row{flex-wrap:wrap;}

.search-row{display:flex;align-items:center;gap:8px;flex:1;min-width:0;max-width:720px;}
.search-row .search-wrap{flex:1;max-width:none;}
.ai-toggle{
  display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 12px;flex-shrink:0;
  border-radius:10px;border:1px solid var(--line);background:var(--page);
  color:var(--text-2);font-size:13px;font-weight:600;font-family:'Inter',sans-serif;
}
.ai-toggle svg{stroke:currentColor;}
.ai-toggle:hover{background:#EFEFF6;color:var(--ink);}
.ai-toggle.active{
  background:var(--ink);color:#fff;border-color:var(--ink);
}
.ai-toggle.active svg{stroke:var(--cyan);}

.ai-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(13,12,36,0.45);
  display:flex;align-items:flex-end;justify-content:flex-end;padding:16px;
}
.ai-dialog{
  width:min(420px,100%);height:min(640px,calc(100dvh - 32px));
  background:var(--card);border-radius:16px;border:1px solid var(--line);
  box-shadow:0 24px 64px rgba(21,20,58,0.28);
  display:flex;flex-direction:column;overflow:hidden;
}
.ai-dialog-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;background:var(--ink);color:#fff;flex-shrink:0;
}
.ai-dialog-brand{display:flex;align-items:center;gap:10px;min-width:0;}
.ai-dialog-title{font-size:16px;font-weight:600;}
.ai-dialog-sub{font-size:11px;color:#A6A4CC;margin-top:2px;}
.ai-dialog-close{
  width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.06);color:#fff;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ai-dialog-body{
  flex:1;overflow-y:auto;padding:16px;background:var(--page);
  display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch;
}
.ai-empty{text-align:center;padding:28px 12px;color:var(--text-2);}
.ai-empty p{margin-top:12px;font-size:13.5px;line-height:1.45;}
.ai-bubble{max-width:92%;padding:10px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;}
.ai-bubble-user{
  align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px;
}
.ai-bubble-bot{
  align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px;
}
.ai-bubble-label{font-size:10.5px;font-weight:600;color:var(--cyan-dim);text-transform:uppercase;margin-bottom:4px;}
.ai-bubble-text{white-space:pre-wrap;word-break:break-word;}
.ai-src-chip{
  display:block;width:100%;text-align:left;margin-top:6px;padding:7px 9px;
  border-radius:8px;border:1px solid var(--line);background:var(--page);
  color:var(--ink-3);font-size:12px;cursor:pointer;
}
.ai-src-chip:hover{border-color:var(--cyan-dim);}
.ai-typing{font-size:12.5px;color:var(--text-3);padding:4px 2px;}
.ai-dialog-foot{
  display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);
  background:var(--card);flex-shrink:0;
}
.ai-dialog-foot input{
  flex:1;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--page);
  padding:0 12px;font-size:14px;font-family:'Inter',sans-serif;outline:none;
}
.ai-dialog-foot input:focus{border-color:var(--cyan-dim);background:#fff;box-shadow:0 0 0 3px rgba(0,217,194,0.14);}
.ai-send{flex-shrink:0;height:42px;padding:0 14px;}

.ai-float-badge{
  position:fixed;right:16px;bottom:16px;z-index:290;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  max-width:min(420px,calc(100vw - 24px));
  padding:10px 12px;border-radius:12px;
  background:var(--ink);color:#fff;font-size:12.5px;
  box-shadow:0 12px 32px rgba(21,20,58,0.28);
}
.ai-float-badge .btn-secondary{
  height:32px;padding:0 10px;font-size:12px;
  background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);color:#fff;
}
.ai-float-badge .btn-secondary:hover{background:rgba(255,255,255,0.18);}

/* ---- Mobile ---- */
.mobile-menu-btn,
.sidebar-mobile-head,
.nav-scrim,
.mobile-only,
.mobile-dock{display:none;}

@media (max-width: 900px){
  body{overflow:auto;-webkit-text-size-adjust:100%;}
  .app{
    height:100dvh;min-height:100vh;
    width:100%;
  }
  .main{height:100dvh;min-height:100vh;padding-bottom:calc(64px + env(safe-area-inset-bottom));}

  .mobile-menu-btn{
    display:inline-flex !important;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:10px;border:1px solid var(--line);
    background:var(--page);color:var(--ink);flex-shrink:0;z-index:5;position:relative;
  }
  .mobile-only{display:inline-flex !important;}
  .mobile-back{display:inline-flex !important;flex-shrink:0;}

  .mobile-dock{
    display:flex !important;position:fixed;left:0;right:0;bottom:0;z-index:200;
    height:calc(56px + env(safe-area-inset-bottom));
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:var(--card);border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(21,20,58,0.08);
    justify-content:space-around;align-items:flex-start;gap:4px;
  }
  .mobile-dock-btn{
    flex:1;max-width:120px;border:none;background:transparent;
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:6px 4px;color:var(--ink-3);font-size:10.5px;font-weight:600;
    font-family:'Inter',sans-serif;
  }
  .mobile-dock-btn svg{stroke:currentColor;}
  .mobile-dock-btn:active{color:var(--cyan-dim);}

  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:220;
    width:min(300px,86vw)!important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    pointer-events:none;
    visibility:hidden;
  }
  .app.nav-open .sidebar{
    transform:translateX(0);box-shadow:8px 0 32px rgba(21,20,58,0.35);
    pointer-events:auto;visibility:visible;
  }

  .nav-scrim{
    display:none;position:fixed;inset:0;z-index:210;
    background:rgba(13,12,36,0.45);border:none;padding:0;
    pointer-events:auto;
  }
  .app.nav-open .nav-scrim{display:block;}

  .sidebar-mobile-head{
    display:flex !important;align-items:center;justify-content:space-between;
    padding:14px 16px 8px;color:#fff;font-size:15px;font-weight:600;
  }
  .sidebar-close{
    width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.06);color:#fff;font-size:22px;line-height:1;
    display:flex;align-items:center;justify-content:center;
  }

  .topbar{
    padding:12px 14px;gap:10px;flex-wrap:wrap;
  }
  .topbar h1{font-size:16px;}
  .search-row{max-width:none;flex:1 1 100%;order:2;width:100%;}
  .topbar .agent-chip{order:3;}
  .ai-toggle span{display:none;}
  .ai-toggle{width:42px;padding:0;justify-content:center;}
  .ai-overlay{padding:0;align-items:stretch;justify-content:stretch;}
  .ai-dialog{
    width:100%;height:100%;max-height:none;border-radius:0;
    min-height:100dvh;
  }
  .breadcrumb{display:none;}
  .legend{display:none;}
  .period-tabs{margin-left:0;width:100%;overflow-x:auto;}

  .home-content{
    flex-direction:column;padding:16px 14px 88px;overflow-y:auto;
    gap:16px;
  }
  .faq-grid{grid-template-columns:1fr;overflow:visible;}
  .content-right{width:100%;}

  .search-content{
    flex-direction:column;padding:14px;overflow-y:auto;gap:14px;
  }
  .filters-col{width:100%;order:2;}
  .results-col{order:1;}
  .results-list{overflow:visible;}

  .article-layout{flex-direction:column;overflow-y:auto;}
  .article-col{padding:16px 14px 24px;overflow:visible;}
  .article-col h1{font-size:20px;}
  .right-col{
    width:100%;border-left:none;border-top:1px solid var(--line);
    padding:16px 14px 88px;overflow:visible;
  }
  .authors{flex-wrap:wrap;}
  .feedback-btns{flex-direction:column;}
  .fb-btn{justify-content:center;width:100%;}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

  .notif-app{height:100dvh;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;}
  .notif-topbar{padding:12px 14px;flex-wrap:wrap;gap:8px;}
  .notif-topbar .title-block{flex:1;min-width:140px;}
  .notif-topbar .title-block h1{font-size:16px;}
  .notif-topbar .title-block p{font-size:11.5px;}
  .notif-content{padding:12px 14px 88px;overflow-y:auto;}
  .notif-brand-mobile{display:none;}

  /* tickets: list OR detail */
  .app.ticket-mode{flex-direction:row;}
  .app.ticket-mode .list-col{width:100%;max-width:none;}
  .app.ticket-mode.show-detail .list-col{display:none;}
  .app.ticket-mode:not(.show-detail) .detail-col{display:none;}
  .app.ticket-mode.show-detail .detail-col{display:flex;width:100%;}
  .list-head{padding:14px;}
  .list-head-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;}
  .list-head-row h1{font-size:17px;}
  .detail-top{padding:12px 14px;flex-wrap:wrap;}
  .detail-body{padding:14px;}
  .detail-footer{padding:12px 14px;flex-wrap:wrap;}
  .detail-footer .btn-primary{margin-left:0;width:100%;justify-content:center;}
  .detail-footer .btn-secondary{flex:1;justify-content:center;}

  .structure-content,.analytics-content,.users-content,.kb-content,.kb-edit{
    flex-direction:column;padding:14px 14px max(100px, calc(env(safe-area-inset-bottom) + 84px));overflow-y:auto;gap:14px;
  }
  .stats-col{width:100%;}
  .metric-row{grid-template-columns:1fr 1fr;}
  .body-grid{grid-template-columns:1fr;overflow:visible;}
  .kb-row{flex-direction:column;align-items:stretch;}
  .kb-actions{width:100%;}
  .kb-actions .btn-secondary{flex:1;justify-content:center;}
  .kb-grid{grid-template-columns:1fr;}
  .kb-form{padding:16px;}
  .user-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}

  .user-bar{
    left:12px;right:12px;bottom:calc(64px + env(safe-area-inset-bottom));
    justify-content:space-between;
  }
  .toast{bottom:calc(120px + env(safe-area-inset-bottom));left:12px;right:12px;transform:none;text-align:center;}
  .list-col,.detail-col{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  .home-content,.search-content,.notif-content,.structure-content,.analytics-content,.kb-content,.kb-edit,.users-content{
    padding-bottom:calc(88px + env(safe-area-inset-bottom));
  }
  .login-card{padding:22px 18px 18px;max-width:100%;}
  .login-demo{font-size:11px;word-break:break-word;}
}

@media (max-width: 480px){
  .metric-row{grid-template-columns:1fr;}
  .hello{font-size:19px;}
  .period-tab{padding:7px 10px;font-size:12px;}
}