*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#282c34;--bg2:#21252b;--bg3:#2c313a;--bg4:#3b4048;
  --fg:#abb2bf;--fg2:#5c6370;--accent:#61afef;--accent2:#528bff;
  --green:#98c379;--red:#e06c75;--orange:#e5c07b;--blue:#61afef;--purple:#c678dd;
  --border:rgba(255,255,255,0.07);--radius:6px;
  --sidebar-w:210px;--sub-sidebar-w:200px;
}
body{font-family:-apple-system,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--fg);height:100vh;overflow:hidden}
a{color:var(--accent);text-decoration:none}
button{cursor:pointer;font-family:inherit}
input,select{font-family:inherit}
.input,input.input,textarea.input{width:100%;padding:8px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);color:var(--fg);font-size:13px;outline:none;box-sizing:border-box}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(97,175,239,.15)}

/* ── Login ── */
.auth-page{display:none;align-items:center;justify-content:center;min-height:100dvh;padding:24px 16px;background:var(--bg);background-image:linear-gradient(rgba(140,160,200,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(140,160,200,.012) 1px,transparent 1px);background-size:56px 56px;position:relative;overflow:hidden}
.auth-page::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(152,195,121,.06) 0%,rgba(97,175,239,.03) 40%,transparent 70%);pointer-events:none}
#login-page{composes:auth-page}
.auth-wrap{display:flex;flex-direction:column;align-items:center;gap:28px;width:100%;max-width:400px;animation:authFadeUp .5s cubic-bezier(.4,0,.2,1) both}
@keyframes authFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.auth-logo{display:flex;align-items:center;gap:0;font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;letter-spacing:-.03em}
.auth-logo .nw-dot{width:8px;height:8px;border-radius:50%;background:#98c379;box-shadow:0 0 8px rgba(152,195,121,.5);margin-right:10px;animation:nwPulse 2.5s infinite}
.auth-logo .nw-node{color:#d7dae0}
.auth-logo .nw-watch{color:#98c379}
.login-card{background:var(--bg3);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:36px 32px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 80px rgba(152,195,121,.03);font-family:'DM Sans',sans-serif}
.login-card h2{font-family:'Space Grotesk',sans-serif;font-size:20px;margin-bottom:4px;color:#d7dae0;font-weight:700;letter-spacing:-.02em}
.login-card p{color:var(--fg2);margin-bottom:24px;font-size:13px;line-height:1.5}
.login-card label{display:block;font-size:11px;color:var(--fg2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px;font-weight:500}
.login-card input{width:100%;padding:10px 12px;background:var(--bg2);border:1px solid rgba(255,255,255,.07);border-radius:6px;color:var(--fg);font-size:14px;margin-bottom:14px;outline:none;transition:border .2s,box-shadow .2s}
.login-card input:focus{border-color:#98c379;box-shadow:0 0 0 3px rgba(152,195,121,.1)}
.login-card button[type="submit"],.login-card button.auth-btn{width:100%;padding:12px;background:#98c379;color:#21252b;border:none;border-radius:6px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 0 20px rgba(152,195,121,.15)}
.login-card button[type="submit"]:hover,.login-card button.auth-btn:hover{background:#a9d08e;box-shadow:0 0 28px rgba(152,195,121,.25);transform:translateY(-1px)}
.login-error{color:#e06c75;font-size:13px;margin-bottom:12px;display:none}
.login-card .link-row{text-align:center;margin-top:18px;font-size:13px;color:var(--fg2)}
.login-card .link-row a{color:#98c379;cursor:pointer;text-decoration:none;font-weight:500;transition:color .15s}
.login-card .link-row a:hover{color:#a9d08e;text-decoration:underline}
.slug-preview{font-size:12px;color:var(--fg2);margin:-10px 0 14px;font-family:'JetBrains Mono',monospace}
.login-card select{width:100%;padding:10px 12px;background:var(--bg2);border:1px solid rgba(255,255,255,.07);border-radius:6px;color:var(--fg);font-size:14px;margin-bottom:14px;outline:none;transition:border .2s}
.login-card select:focus{border-color:#98c379}
.invite-link-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;font-family:monospace;font-size:12px;color:var(--fg);word-break:break-all;margin:12px 0}
.copy-btn{font-size:12px;padding:4px 12px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);cursor:pointer}
#tenant-switcher{display:none;margin-left:auto;align-items:center;gap:8px;font-size:12px}
#tenant-switcher select{padding:4px 8px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);color:var(--fg);font-size:12px;max-width:200px}
#tenant-switcher .impersonate-badge{background:var(--orange);color:#000;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600}

/* ── Dashboard Shell ── */
#dashboard{display:none;height:100dvh;flex-direction:row}

/* ── Primary Sidebar ── */
#sidebar{width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;height:100dvh;overflow:hidden}
#sidebar .logo{padding:16px 16px 12px 24px;display:flex;align-items:center;gap:0;font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.03em}
.nw-dot{width:6px;height:6px;border-radius:50%;background:#98c379;box-shadow:0 0 6px rgba(152,195,121,.5);margin-right:8px;animation:nwPulse 2.5s infinite}
.nw-node{color:#d7dae0}
.nw-watch{color:#98c379}
@keyframes nwPulse{0%,100%{opacity:.4}50%{opacity:1}}
#sidebar nav{flex:1;overflow-y:auto;padding:4px 8px}
.nav-section{margin-bottom:16px}
.nav-section-label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--fg2);padding:8px 8px 4px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--radius);color:var(--fg2);font-size:13px;cursor:pointer;transition:all .15s;border:none;background:none;width:100%;text-align:left}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--fg)}
.nav-item.active{background:rgba(97,175,239,.1);color:#fff}
.nav-item svg{width:18px;height:18px;fill:currentColor;flex-shrink:0;opacity:.7}
.nav-item.active svg{opacity:1;fill:var(--accent)}
.nav-item .nav-label{flex:1}
.nav-badge{font-size:10px;font-weight:700;background:var(--accent);color:#fff;padding:1px 6px;border-radius:10px;min-width:20px;text-align:center}

/* Sidebar bottom */
#sidebar-bottom{border-top:1px solid var(--border);padding:8px}
#sidebar-bottom .nav-item{font-size:12px;padding:6px 10px}
.user-card{display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--border);margin-top:4px}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.user-card-info{flex:1;min-width:0}
.user-card-info .uname{font-size:13px;color:#fff;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-card-info .urole{font-size:11px;color:var(--fg2)}
.user-card .logout-btn{background:none;border:none;color:var(--fg2);cursor:pointer;padding:4px}
.user-card .logout-btn:hover{color:#e06c75}
.user-card .logout-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

/* ── Sidebar Collapse ── */
#sidebar{transition:width .2s ease}
#sidebar-collapse-btn{display:flex;align-items:center;justify-content:center;width:100%;height:32px;border:none;background:none;color:var(--fg2);cursor:pointer;border-top:1px solid var(--border);transition:all .15s}
#sidebar-collapse-btn:hover{background:rgba(255,255,255,.05);color:var(--fg)}
#sidebar-collapse-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
#sidebar.collapsed{width:56px;overflow:visible}
#sidebar.collapsed .logo span{display:none}
#sidebar.collapsed .logo{padding:16px 0 12px;justify-content:center}
#sidebar.collapsed .logo .nw-dot{margin-right:0}
#sidebar.collapsed .nav-label,
#sidebar.collapsed .nav-badge,
#sidebar.collapsed .nav-section-label{display:none}
#sidebar.collapsed .nav-item{justify-content:center;padding:7px 0;position:relative}
#sidebar.collapsed .nav-item::after{content:attr(data-tip);position:fixed;left:62px;padding:6px 12px;background:#18191c;color:#dcddde;font-size:14px;font-weight:500;white-space:nowrap;border-radius:6px;z-index:10000;pointer-events:none;box-shadow:0 8px 16px rgba(0,0,0,.24);opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}
#sidebar.collapsed .nav-item::before{content:'';position:fixed;left:54px;border:6px solid transparent;border-right-color:#18191c;z-index:10000;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}
#sidebar.collapsed .nav-item:hover::after,#sidebar.collapsed .nav-item:hover::before{opacity:1;visibility:visible}
#sidebar.collapsed nav{padding:4px 6px}
#sidebar.collapsed #sidebar-bottom .nav-item{justify-content:center;padding:6px 0}
#sidebar.collapsed .user-card-info,
#sidebar.collapsed .user-card .logout-btn{display:none}
#sidebar.collapsed .user-card{justify-content:center;padding:10px 0}
#sidebar.collapsed #sidebar-collapse-btn svg{transform:rotate(180deg)}

/* ── Ticket Filter Sidebar ── */
#ticket-filter-sidebar{width:0;background:var(--bg);border-right:1px solid var(--border);overflow:hidden;transition:width .2s;flex-shrink:0;display:flex;flex-direction:column}
#ticket-filter-sidebar.open{width:var(--sub-sidebar-w)}
#ticket-filter-sidebar .sub-header{height:44px;padding:0 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);flex-shrink:0}
#ticket-filter-sidebar .sub-header .back-btn{background:none;border:none;color:var(--fg2);cursor:pointer;display:flex;align-items:center;padding:2px}
#ticket-filter-sidebar .sub-header .back-btn:hover{color:var(--fg)}
#ticket-filter-sidebar .sub-header .back-btn svg{width:18px;height:18px;fill:currentColor}
#ticket-filter-sidebar .sub-header .sub-title{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ticket-filter-sidebar nav{flex:1;padding:8px;overflow-y:auto}
#ticket-filter-sidebar .filter-section{margin-bottom:12px}
#ticket-filter-sidebar .filter-section-label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--fg2);padding:8px 12px 4px;font-weight:600}

/* ── Filter Sub-Sidebar (device groups) ── */
#filter-sidebar{width:0;background:var(--bg);border-right:1px solid var(--border);overflow:hidden;transition:width .2s;flex-shrink:0;display:flex;flex-direction:column}
#filter-sidebar.open{width:var(--sub-sidebar-w)}
#filter-sidebar .sub-header{height:44px;padding:0 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);flex-shrink:0}
#filter-sidebar .sub-header .back-btn{background:none;border:none;color:var(--fg2);cursor:pointer;display:flex;align-items:center;padding:2px}
#filter-sidebar .sub-header .back-btn:hover{color:var(--fg)}
#filter-sidebar .sub-header .back-btn svg{width:18px;height:18px;fill:currentColor}
#filter-sidebar .sub-header .sub-title{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#filter-sidebar nav{flex:1;padding:8px;overflow-y:auto}
#filter-sidebar .filter-section{margin-bottom:12px}
#filter-sidebar .filter-section-label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--fg2);padding:8px 12px 4px;font-weight:600}
.filter-item{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--radius);color:var(--fg2);font-size:13px;cursor:pointer;transition:all .15s;border:none;background:none;width:100%;text-align:left}
.filter-item:hover{background:rgba(255,255,255,.05);color:var(--fg)}
.filter-item.active{background:rgba(97,175,239,.1);color:#fff}
.filter-item svg{width:16px;height:16px;fill:currentColor;flex-shrink:0;opacity:.7}
.filter-item.active svg{opacity:1;fill:var(--accent)}
.filter-item .filter-count{margin-left:auto;font-size:11px;color:var(--fg2);background:var(--bg3);padding:1px 6px;border-radius:8px;min-width:20px;text-align:center}

/* ── Sub Sidebar (agent detail) ── */
#sub-sidebar{width:0;background:var(--bg);border-right:1px solid var(--border);overflow:hidden;transition:width .2s;flex-shrink:0;display:flex;flex-direction:column}
#sub-sidebar.open{width:var(--sub-sidebar-w)}
#sub-sidebar .sub-header{height:44px;padding:0 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);flex-shrink:0}
#sub-sidebar .sub-header .back-btn{background:none;border:none;color:var(--fg2);cursor:pointer;display:flex;align-items:center;padding:2px}
#sub-sidebar .sub-header .back-btn:hover{color:var(--fg)}
#sub-sidebar .sub-header .back-btn svg{width:18px;height:18px;fill:currentColor}
#sub-sidebar .sub-header .sub-title{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sub-sidebar nav{flex:1;padding:8px;overflow-y:auto}
.sub-nav-item{display:block;padding:7px 12px;border-radius:var(--radius);color:var(--fg2);font-size:13px;cursor:pointer;transition:all .15s;border:none;background:none;width:100%;text-align:left}
.sub-nav-item:hover{background:rgba(255,255,255,.05);color:var(--fg)}
.sub-nav-item.active{background:rgba(97,175,239,.1);color:#fff}
.dash-tab{padding:8px 16px;border:none;background:none;color:var(--fg2);font-size:13px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.dash-tab:hover{color:var(--fg)}
.dash-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.dash-card{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:16px}
.dash-card h4{margin:0 0 12px;font-size:14px;color:var(--fg)}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:16px}
.dash-stat{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:16px;text-align:center}
.dash-stat .label{font-size:11px;color:var(--fg2);text-transform:uppercase;margin-bottom:4px}
.dash-stat .value{font-size:28px;font-weight:700;color:#fff}
.dash-stat .sub{font-size:11px;color:var(--fg2);margin-top:2px}
.dash-bar-chart{display:flex;flex-direction:column;gap:6px}
.dash-bar-row{display:flex;align-items:center;gap:8px;font-size:12px}
.dash-bar-label{width:120px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-bar-track{flex:1;height:18px;background:var(--bg2);border-radius:3px;overflow:hidden}
.dash-bar-fill{height:100%;border-radius:3px;transition:width .3s}
.dash-bar-val{width:50px;text-align:right;color:var(--fg);font-size:11px}

/* ── Main Content ── */
#main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}

/* Breadcrumb bar */
#breadcrumb-bar{height:44px;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:8px;flex-shrink:0}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--fg2)}
.breadcrumb a{color:var(--fg2);cursor:pointer}
.breadcrumb a:hover{color:var(--fg)}
.breadcrumb svg{width:14px;height:14px;fill:var(--fg2);flex-shrink:0}
.breadcrumb .current{color:var(--fg)}

/* Content area */
#content{flex:1;overflow-y:auto;padding:0}
.page{display:none;padding:24px 28px}

/* ── AI Drawer ── */
#global-ai-fab{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:6px;background:linear-gradient(135deg,#61afef,#528bff);border:none;color:#fff;cursor:pointer;flex-shrink:0;transition:all .15s;box-shadow:0 2px 8px rgba(0,0,0,.3);margin-left:auto}
#global-ai-fab:hover{transform:scale(1.05)}
#global-ai-fab.active{box-shadow:0 0 0 2px rgba(97,175,239,.4),0 2px 8px rgba(0,0,0,.3)}
#global-ai-overlay{display:none;flex-direction:column;overflow:hidden;background:var(--bg2);border-left:1px solid var(--border);flex-shrink:0;z-index:9999;position:relative}
#global-ai-overlay.open{display:flex}
#global-ai-overlay.mode-push{width:0;border-left-width:0;transition:width .25s,border-left-width .25s}
#global-ai-overlay.mode-push.open{width:var(--ai-drawer-w,380px);border-left-width:1px}
#global-ai-overlay.mode-overlay{position:fixed;top:0;right:0;bottom:0;width:var(--ai-drawer-w,380px);transform:translateX(100%);transition:transform .25s;box-shadow:-4px 0 24px rgba(0,0,0,.4)}
#global-ai-overlay.mode-overlay.open{transform:translateX(0)}
#global-ai-resize-handle{position:absolute;left:0;top:0;bottom:0;width:6px;cursor:col-resize;z-index:2;transition:background .15s}
#global-ai-resize-handle:hover{background:rgba(97,175,239,.3)}
.page.active{display:block}
#content:has(#page-ai-chat.active){overflow:hidden}
#page-ai-chat.active{display:flex;flex-direction:column;height:100%;padding:0;box-sizing:border-box;overflow:hidden}

/* ── Agent Header (detail view) ── */
.agent-hero{display:flex;align-items:center;gap:16px;padding:20px 28px;border-bottom:1px solid var(--border)}
.agent-icon{width:56px;height:56px;background:var(--bg3);border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.agent-icon:hover{background:rgba(97,175,239,.25);border-color:var(--accent)!important;transform:scale(1.05)}
.agent-icon.pending{background:rgba(229,192,123,.15);border:1px solid rgba(229,192,123,.3)}
.agent-icon svg{width:28px;height:28px;fill:var(--fg2)}
.agent-hero-info{flex:1}
.agent-hero-info .hero-top{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.agent-hero-info .hero-name{font-size:20px;font-weight:700;color:#fff}
.status-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600}
.status-pill.online{background:rgba(152,195,121,.15);color:var(--green)}
.status-pill.offline{background:rgba(92,99,112,.2);color:var(--fg2)}
.status-pill.pending{background:rgba(229,192,123,.15);color:var(--yellow)}
.status-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.type-badge{padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;background:rgba(198,120,221,.15);color:var(--purple);text-transform:uppercase}
.hero-actions{display:flex;gap:8px}

/* ── Buttons ── */
.btn{padding:7px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg3);color:var(--fg);font-size:13px;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:rgba(255,255,255,.2);color:#fff}
.btn svg{width:14px;height:14px;fill:currentColor}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2);border-color:var(--accent2)}
.btn-danger{border-color:var(--red);color:var(--red)}
.btn-danger:hover{background:rgba(224,108,117,.1)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-icon{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:var(--bg3);border:1px solid var(--border);color:var(--fg2)}
.btn-icon:hover{border-color:rgba(255,255,255,.2);color:var(--fg)}
.small-btn{padding:3px 8px;font-size:11px;background:var(--bg4);border:1px solid var(--border);border-radius:4px;color:var(--fg);cursor:pointer}
.small-btn:hover{border-color:rgba(255,255,255,.2);color:#fff}
.small-btn.danger{border-color:var(--red);color:var(--red)}
.small-btn.danger:hover{background:rgba(224,108,117,.1)}

/* ── Agent List (table-style like Level) ── */
.list-toolbar{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--border)}
.search-box{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:6px 12px;flex:0 1 280px}
.search-box svg{width:16px;height:16px;fill:var(--fg2);flex-shrink:0}
.search-box input{border:none;background:none;color:var(--fg);font-size:13px;outline:none;width:100%}
.search-box input::placeholder{color:var(--fg2)}
.toolbar-spacer{flex:1}

/* Agent table */
.agent-table{width:100%;border-collapse:collapse}
.agent-table th{text-align:left;padding:10px 12px;font-size:11px;font-weight:500;color:var(--fg2);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
.agent-table th:hover{color:var(--fg)}
.agent-table th svg{width:12px;height:12px;fill:currentColor;vertical-align:middle;margin-left:2px}
.agent-table td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px}
.agent-table tr{cursor:pointer;transition:background .1s}
.agent-table tr:hover td{background:rgba(255,255,255,.03)}
.agent-table .agent-name-cell{display:flex;align-items:center;gap:10px}
.agent-table .agent-name-cell .a-icon{width:32px;height:32px;background:var(--bg3);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:all .15s;position:relative}
.agent-table .agent-name-cell .a-icon svg{width:16px;height:16px;fill:var(--fg2);transition:fill .15s}
.agent-table .agent-name-cell .a-icon.online{background:rgba(97,175,239,.15);border:1px solid rgba(97,175,239,.3)}
.agent-table .agent-name-cell .a-icon.online svg{fill:var(--accent)}
.agent-table .agent-name-cell .a-icon:hover{background:rgba(97,175,239,.25);border:1px solid var(--accent);transform:scale(1.08)}
.agent-table .agent-name-cell .a-icon:hover svg{fill:#fff}
.agent-table .agent-name-cell .a-icon.pending{background:rgba(229,192,123,.15);border:1px solid rgba(229,192,123,.3);cursor:not-allowed}
.agent-table .agent-name-cell .a-icon.pending svg{fill:var(--yellow)}
.agent-table .agent-name-cell .a-name{font-weight:500;color:#fff}
.agent-table .agent-name-cell .a-id{font-size:11px;color:var(--fg2)}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.status-dot.online{background:var(--green);box-shadow:0 0 4px var(--green)}
.status-dot.offline{background:var(--fg2)}
.status-dot.pending{background:var(--yellow);box-shadow:0 0 4px var(--yellow)}
.status-text{font-size:12px;display:flex;align-items:center;gap:6px}

/* Context menu */
.ctx-menu{position:fixed;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:4px 0;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:1000;font-size:13px}
.ctx-menu-item{display:flex;align-items:center;gap:8px;padding:7px 14px;color:var(--fg);cursor:pointer;transition:background .1s;border:none;background:none;width:100%;text-align:left;font-size:13px;font-family:inherit}
.ctx-menu-item:hover{background:rgba(255,255,255,.05)}
.ctx-menu-item svg{width:14px;height:14px;fill:currentColor;flex-shrink:0}
.ctx-menu-item.danger{color:var(--red)}
.ctx-menu-item.danger:hover{background:rgba(224,108,117,.1)}
.ctx-menu-sep{height:1px;background:var(--border);margin:4px 0}
.alert-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;overflow:hidden;transition:border-color .15s}
.alert-card.severity-critical{border-left:3px solid var(--red)}
.alert-card.severity-warning{border-left:3px solid var(--orange)}
.alert-card.resolved{opacity:.6;border-left-color:var(--fg2)}
.alert-header{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;user-select:none}
.alert-header:hover{background:rgba(255,255,255,.03)}
.alert-severity{font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:3px;flex-shrink:0}
.alert-severity.critical{background:rgba(224,108,117,.15);color:var(--red)}
.alert-severity.warning{background:rgba(229,192,123,.15);color:var(--orange)}
.alert-severity.resolved{background:rgba(255,255,255,.06);color:var(--fg2)}
.alert-message{flex:1;font-size:13px;color:var(--fg)}
.alert-hostname{font-size:12px;color:var(--fg2);font-family:monospace}
.alert-time{font-size:12px;color:var(--fg2);white-space:nowrap}
.alert-chevron{width:16px;height:16px;color:var(--fg2);transition:transform .15s;flex-shrink:0}
.alert-card.expanded .alert-chevron{transform:rotate(90deg)}
.alert-detail{display:none;padding:0 16px 14px 16px;font-size:12px;color:var(--fg2)}
.alert-card.expanded .alert-detail{display:block}
.alert-detail-grid{display:grid;grid-template-columns:120px 1fr;gap:6px 12px}
.alert-detail-grid dt{color:var(--fg2);font-weight:600}
.alert-detail-grid dd{color:var(--fg);margin:0}
.dismiss-dropdown-wrap{position:relative;display:inline-block}
.dismiss-dropdown{display:none;position:absolute;bottom:100%;left:0;margin-bottom:4px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);min-width:180px;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.dismiss-dropdown-wrap.open .dismiss-dropdown{display:block}
.dismiss-option{padding:8px 14px;font-size:12px;color:var(--fg);cursor:pointer;white-space:nowrap}
.dismiss-option:hover{background:var(--bg3)}

/* Cards */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.card h3{font-size:14px;margin-bottom:12px;color:var(--fg);font-weight:600}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.card-header h3{margin-bottom:0}

/* Stat grid */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.stat-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.stat-box .label{font-size:11px;color:var(--fg2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.stat-box .value{font-size:24px;font-weight:600;color:#fff}
.stat-box .sub{font-size:12px;color:var(--fg2);margin-top:2px}

/* Tables (generic) */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);color:var(--fg2);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
td{padding:10px 12px;border-bottom:1px solid var(--border)}
tr:hover td{background:rgba(255,255,255,.02)}
.role-badge{padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}
.role-badge.admin,.role-badge.super_admin{background:rgba(97,175,239,.12);color:var(--accent)}
.role-badge.viewer{background:rgba(152,195,121,.12);color:var(--green)}

/* Chart area */
.chart-area{background:var(--bg3);border-radius:var(--radius);padding:16px;min-height:180px;position:relative}
.chart-area canvas{width:100%!important}

/* ── Detail Tabs ── */

/* Detail content panels */
.detail-panel{display:none;padding:24px 28px}
.detail-panel.active{display:block}
.manage-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin:-24px -28px 20px -28px;padding:0 28px}
.manage-tab{padding:10px 16px;font-size:13px;color:var(--fg2);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:all .15s;font-family:inherit}
.manage-tab:hover{color:var(--fg)}
.manage-tab.active{color:#fff;border-bottom-color:var(--accent)}
.manage-panel{display:none}
.manage-panel.active{display:block}
.mon-subtab{padding:10px 16px;font-size:13px;color:var(--fg2);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:all .15s;font-family:inherit}
.mon-subtab:hover{color:var(--fg)}
.mon-subtab.active{color:#fff;border-bottom-color:var(--accent)}
.mon-subpanel{display:none}
.mon-subpanel.active{display:block}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.settings-label{font-size:13px;color:var(--fg);font-weight:500}
.settings-desc{font-size:12px;color:var(--fg2);margin-top:2px}
.toggle{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--bg4);border-radius:22px;transition:.2s}
.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked+.toggle-slider{background:var(--accent)}
.toggle input:checked+.toggle-slider:before{transform:translateX(18px)}
.update-row{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid var(--border)}
.update-row:last-child{border-bottom:none}
.update-row:hover{background:rgba(255,255,255,.02)}
.update-name{font-size:13px;color:var(--fg);font-weight:500;min-width:200px}
.update-ver{font-size:12px;color:var(--fg2);font-family:monospace}
.update-arrow{color:var(--green);font-size:12px;margin:0 4px}
.policy-pill{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600;text-transform:capitalize}
.policy-pill.approved{background:rgba(158,206,106,.15);color:var(--green)}
.policy-pill.held{background:rgba(224,175,104,.15);color:var(--yellow)}
.policy-pill.rejected{background:rgba(247,118,142,.15);color:var(--red)}
.policy-pill.none{background:rgba(192,202,245,.08);color:var(--fg2)}
.deploy-agent-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px;cursor:pointer}
.deploy-agent-row:last-child{border-bottom:none}
.deploy-agent-row:hover{background:rgba(255,255,255,.02);margin:0 -12px;padding:8px 12px}
.deploy-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.deploy-status-dot.pending{background:var(--fg2)}
.deploy-status-dot.installing{background:var(--accent);animation:pulse 1s infinite}
.deploy-status-dot.success{background:var(--green)}
.deploy-status-dot.failed{background:var(--red)}
.deploy-status-dot.offline{background:var(--fg2);opacity:.4}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.pulse-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pulse 1.5s ease-in-out infinite;vertical-align:middle;margin-left:4px}
.day-pills{display:flex;gap:6px;flex-wrap:wrap}
.day-pill{position:relative}
.day-pill input{position:absolute;opacity:0;pointer-events:none}
.day-pill span{display:block;padding:6px 14px;font-size:12px;color:var(--fg2);background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .15s;user-select:none}
.day-pill span:hover{border-color:var(--accent);color:var(--fg)}
.day-pill input:checked+span{background:rgba(97,175,239,.15);border-color:var(--accent);color:#fff}
.path-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;min-height:32px}
.path-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 8px 4px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);font-size:12px;color:var(--fg);font-family:'SF Mono',monospace}
.path-tag .path-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:none;background:none;color:var(--fg3);cursor:pointer;border-radius:3px;padding:0;font-size:14px;line-height:1}
.path-tag .path-remove:hover{background:rgba(224,108,117,.2);color:var(--red)}
.path-add-row{display:flex;gap:6px}
.deploy-history-item{padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:6px;cursor:pointer;font-size:12px}
.deploy-history-item:hover{border-color:var(--accent)}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:100}
.modal-overlay.show{display:flex}
.modal{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:24px;width:420px;max-width:calc(100vw - 32px);max-height:80vh;overflow-y:auto}
.modal h3{margin-bottom:16px;font-size:16px;color:#fff;font-weight:600}
.modal label{display:block;font-size:12px;color:var(--fg2);margin-bottom:4px}
.modal input:not([type=checkbox]):not([type=radio]),.modal select{width:100%;padding:8px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);color:var(--fg);font-size:13px;margin-bottom:12px;outline:none}
.modal input:not([type=checkbox]):not([type=radio]):focus,.modal select:focus{border-color:var(--accent)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

/* Token display */
.token-display{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;font-family:'SF Mono',Consolas,monospace;font-size:12px;word-break:break-all;margin:12px 0;user-select:all;cursor:text;color:var(--green)}

/* Empty state */
.empty{text-align:center;padding:60px 20px;color:var(--fg2)}
.empty svg{width:48px;height:48px;fill:var(--fg2);margin-bottom:12px;opacity:.5}
.empty h4{margin-bottom:6px;font-size:15px;color:var(--fg)}
.empty p{font-size:13px}

/* Prompt modal */
.prompt-modal-message{font-size:13px;color:var(--fg);line-height:1.5;margin-bottom:4px;white-space:pre-wrap}

/* Toast */
.toast{position:fixed;bottom:20px;right:20px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:10px 18px;font-size:13px;z-index:200;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}
.toast.error{border-color:var(--red);color:var(--red)}
.toast.success{border-color:var(--green);color:var(--green)}

/* Password */
.password-section{max-width:400px}
.password-section input{width:100%;padding:8px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);color:var(--fg);font-size:13px;margin-bottom:12px;outline:none}
.password-section label{display:block;font-size:12px;color:var(--fg2);margin-bottom:4px}

/* Enroll OS tabs */
.enroll-os-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:none;border:none;border-bottom:2px solid transparent;color:var(--fg2);font-size:13px;cursor:pointer;transition:all .15s}
.enroll-os-tab:hover{color:var(--fg)}
.enroll-os-tab.active{color:#fff;border-bottom-color:var(--accent)}
.enroll-os-tab svg{fill:currentColor}
.enroll-os-btn{display:flex;align-items:center;gap:10px;padding:8px 12px;background:none;border:1px solid transparent;border-radius:var(--radius);color:var(--fg2);font-size:13px;cursor:pointer;text-align:left;transition:all .15s;width:100%;box-sizing:border-box}
.enroll-os-btn:hover{background:var(--bg3);color:var(--fg)}
.enroll-os-btn.active{background:var(--bg3);border-color:var(--accent);color:var(--fg)}
.enroll-client-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius);cursor:pointer;font-size:13px;color:var(--fg2);transition:all .1s;flex-shrink:0}
.enroll-client-item:hover{background:var(--bg3);color:var(--fg)}
.enroll-client-item.selected{background:var(--bg4);color:var(--fg);font-weight:500}

/* Scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.15)}

/* Online status indicator for sidebar */
.sidebar-status{display:flex;align-items:center;gap:6px}
.sidebar-status .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.sidebar-status .slabel{font-size:11px;color:var(--green);font-weight:600}
.terminal-ai-wrap{display:flex;gap:0;height:500px}
.terminal-ai-wrap .term-side{flex:1;min-width:0;position:relative}
#manage-terminal-container{height:100%;background:#0d1117;border-radius:var(--radius) 0 0 var(--radius);overflow:hidden}
#manage-terminal-container .xterm{height:100%;padding:8px}
.terminal-ai-wrap:not(.ai-open) #manage-terminal-container{border-radius:var(--radius)}
.terminal-ai-wrap:not(.ai-open) .ai-side{display:none}
.ai-toggle-btn{position:absolute;top:8px;right:8px;z-index:5;width:32px;height:32px;border:none;border-radius:6px;background:rgba(97,175,239,.15);color:#61afef;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.ai-toggle-btn:hover{background:rgba(97,175,239,.3)}
.ai-toggle-btn.active{background:#61afef;color:#fff}
.ai-side{width:380px;flex-shrink:0;display:flex;flex-direction:column;border-left:1px solid var(--border);background:#1a1d23;border-radius:0 var(--radius) var(--radius) 0}
.ai-side-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600;color:var(--fg)}
.ai-side-header button{background:none;border:none;color:var(--fg2);cursor:pointer;padding:2px}
.ai-side-header button:hover{color:var(--fg)}
.mobile-only{display:none}
#mobile-hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:var(--radius);background:var(--bg3);border:1px solid var(--border);color:var(--fg);cursor:pointer;flex-shrink:0}
#mobile-hamburger svg{width:20px;height:20px;fill:currentColor}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:149}
#mobile-detail-tabs{display:none}
#mobile-term-keys{display:none}
.mtk{padding:6px 10px;font-size:12px;font-family:monospace;background:var(--bg3);border:1px solid var(--border);border-radius:4px;color:var(--fg);cursor:pointer;white-space:nowrap;flex-shrink:0;touch-action:manipulation}
.mtk:active{background:var(--accent);color:#fff}
.mtk-toggle{transition:all .15s}
.mtk-toggle.held{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Network device detail page */
#content:has(#page-network-device-detail.active){overflow:hidden}
#page-network-device-detail.active{display:flex!important;flex-direction:column;height:100%;overflow:hidden;padding:0}
#page-network-device-detail .nd-hero{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border);background:var(--bg2)}
#page-network-device-detail .nd-hero .nd-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid var(--border)}
#page-network-device-detail .nd-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0}
#page-network-device-detail .nd-tab{padding:10px 20px;font-size:13px;color:var(--fg2);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;font-family:inherit}
#page-network-device-detail .nd-tab:hover{color:var(--fg)}
#page-network-device-detail .nd-tab.active{color:#fff;border-bottom-color:var(--accent)}
#page-network-device-detail .nd-panel{display:none;overflow-y:auto;flex:1;min-height:0;padding:20px 24px}
#page-network-device-detail .nd-panel.active{display:block}

/* Knowledge base page */
.kb-tab{padding:10px 16px;font-size:13px;color:var(--fg2);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;font-family:inherit}
.kb-tab:hover{color:var(--fg)}
.kb-tab.active{color:#fff;border-bottom-color:var(--accent)}
.kb-panel{display:none}
.kb-panel.active{display:block}
/* Knowledge base page */
.kb-tab{padding:10px 16px;font-size:13px;color:var(--fg2);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;font-family:inherit}
.kb-tab:hover{color:var(--fg)}
.kb-tab.active{color:#fff;border-bottom-color:var(--accent)}
.kb-panel{display:none}
.kb-panel.active{display:block}
/* Client detail page */
#page-client-detail{display:none;flex-direction:column;height:100%;overflow:hidden}
#page-client-detail.active{display:flex!important}
#page-client-detail .cd-hero{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border);background:var(--bg2)}
#page-client-detail .cd-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--fg2)}
#page-client-detail .cd-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0}
#page-client-detail .cd-tab{padding:10px 20px;font-size:13px;color:var(--fg2);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;font-family:inherit}
#page-client-detail .cd-tab:hover{color:var(--fg)}
#page-client-detail .cd-tab.active{color:#fff;border-bottom-color:var(--accent)}
#page-client-detail .cd-panel{display:none;overflow-y:auto;flex:1;min-height:0;padding:20px 24px}
#page-client-detail .cd-panel.active{display:block}
.doc-card{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;margin-bottom:8px;transition:border-color .15s}
.doc-card:hover{border-color:var(--accent)}

/* Document editor */
#page-doc-editor{display:none}
#page-doc-editor.active{display:flex!important;flex-direction:column;height:100%}
.doc-editor-header{display:flex;align-items:center;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0}
.doc-editor-body{flex:1;display:flex;min-height:0;overflow:hidden}
.doc-editor-textarea{flex:1;width:100%;padding:20px 24px;background:var(--bg);border:none;color:var(--fg);font-family:'SF Mono','Fira Code',monospace;font-size:13px;line-height:1.6;resize:none;outline:none;overflow-y:auto}
.doc-editor-preview{flex:1;padding:20px 24px;overflow-y:auto;color:var(--fg);font-size:14px;line-height:1.7}
.doc-editor-preview h1,.doc-editor-preview h2,.doc-editor-preview h3{color:#fff;margin:20px 0 8px}
.doc-editor-preview h1{font-size:24px;border-bottom:1px solid var(--border);padding-bottom:8px}
.doc-editor-preview h2{font-size:20px}
.doc-editor-preview h3{font-size:16px}
.doc-editor-preview p{margin:0 0 12px}
.doc-editor-preview code{background:var(--bg3);padding:2px 6px;border-radius:3px;font-size:12px;font-family:'SF Mono','Fira Code',monospace}
.doc-editor-preview pre{background:var(--bg3);padding:16px;border-radius:var(--radius);overflow-x:auto;margin:0 0 16px}
.doc-editor-preview pre code{background:none;padding:0}
.doc-editor-preview ul,.doc-editor-preview ol{margin:0 0 12px;padding-left:24px}
.doc-editor-preview table{width:100%;border-collapse:collapse;margin:0 0 16px}
.doc-editor-preview th,.doc-editor-preview td{padding:8px 12px;border:1px solid var(--border);text-align:left}
.doc-editor-preview th{background:var(--bg3);color:#fff;font-weight:600}
.doc-editor-preview blockquote{border-left:3px solid var(--accent);margin:0 0 12px;padding:8px 16px;color:var(--fg2)}
.doc-editor-preview a{color:var(--accent)}
.doc-editor-preview img{max-width:100%;border-radius:var(--radius)}

/* Ticket detail page */
#content:has(#page-ticket-detail.active){overflow:hidden}
#page-ticket-detail.active{display:flex!important;flex-direction:column;height:100%;overflow:hidden;padding:0}
.tk-hero{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border);background:var(--bg2)}
.tk-hero .tk-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid var(--border)}
.tk-hero .tk-icon svg{width:24px;height:24px;stroke:var(--fg2);fill:none;stroke-width:2}
.tk-hero-info{flex:1;min-width:0}
.tk-hero-info .tk-hero-top{display:flex;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.tk-hero-info .tk-number{font-size:20px;font-weight:700;color:#fff}
.tk-hero-info .tk-title{font-size:14px;color:var(--fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-state-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;cursor:pointer;border:none;font-family:inherit}
.tk-state-pill.open{background:rgba(152,195,121,.15);color:var(--green)}
.tk-state-pill.pending,.tk-state-pill.pending_reminder,.tk-state-pill.pending_close{background:rgba(229,192,123,.15);color:var(--yellow)}
.tk-state-pill.closed{background:rgba(92,99,112,.2);color:var(--fg2)}
.tk-priority-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;cursor:pointer;border:none;font-family:inherit}
.tk-priority-pill.low{background:rgba(92,99,112,.2);color:var(--fg2)}
.tk-priority-pill.normal{background:rgba(97,175,239,.12);color:var(--accent)}
.tk-priority-pill.high{background:rgba(229,192,123,.15);color:var(--yellow)}
.tk-priority-pill.urgent{background:rgba(224,108,117,.15);color:var(--red)}
.tk-hero-actions{display:flex;gap:8px}
/* Batch drag overlay */
.batch-overlay{display:none;position:fixed;inset:0;z-index:9999;pointer-events:none}
.batch-overlay.active{display:flex;flex-direction:column;pointer-events:all}
.batch-overlay-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);opacity:0;transition:opacity .3s}
.batch-overlay.active .batch-overlay-backdrop{opacity:1}
.batch-zone{position:relative;flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;padding:24px;z-index:1;overflow-y:auto}
.batch-zone-label{position:absolute;left:50%;transform:translateX(-50%);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.4);pointer-events:none}
.batch-zone.top .batch-zone-label{bottom:12px}
.batch-zone.bottom .batch-zone-label{top:12px}
.batch-divider{height:1px;background:rgba(255,255,255,.1);flex-shrink:0;z-index:1;position:relative}
.batch-target{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 16px;border-radius:12px;cursor:pointer;transition:all .15s;min-width:80px;text-align:center}
.batch-target:hover,.batch-target.hovered{background:rgba(255,255,255,.12);transform:scale(1.08)}
.batch-target .bt-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff}
.batch-target .bt-label{font-size:11px;color:rgba(255,255,255,.8);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.batch-dragger{position:fixed;z-index:10000;pointer-events:none;transition:none}
.batch-dragger-item{background:var(--bg2);border:1px solid var(--accent);border-radius:6px;padding:6px 14px;font-size:12px;color:var(--fg);white-space:nowrap;margin-bottom:2px;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.batch-dragger-count{position:absolute;top:-8px;right:-8px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.tk-checkbox{width:16px;height:16px;accent-color:var(--accent);color-scheme:dark;cursor:pointer;flex-shrink:0}
.nt-type-tab.active{background:var(--bg3)!important;color:var(--fg)!important}
.tk-body{display:flex;flex:1;min-height:0;overflow:hidden}
.tk-conversation{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.tk-sidebar{width:280px;flex-shrink:0;border-left:1px solid var(--border);overflow-y:auto;background:var(--bg2);padding:20px}
.tk-sidebar-section{margin-bottom:20px}
.tk-sidebar-section h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--fg3);margin-bottom:8px;font-weight:600}
.tk-sidebar-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px}
.tk-sidebar-row .tk-label{color:var(--fg2)}
.tk-sidebar-row .tk-value{color:var(--fg);font-weight:500}
.tk-sidebar-row select{padding:3px 6px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;color:var(--fg);font-size:12px;font-family:inherit;cursor:pointer}
.tk-sidebar-select{width:100%;padding:8px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--fg);font-size:13px;font-family:inherit;cursor:pointer;outline:none;color-scheme:dark}
.tk-sidebar-select:focus{border-color:var(--accent)}
.tk-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:11px;background:var(--bg3);color:var(--fg);border:1px solid var(--border)}
.tk-tag .tk-tag-rm{cursor:pointer;color:var(--fg3);font-size:13px;line-height:1}
.tk-tag .tk-tag-rm:hover{color:var(--red)}
.tk-open-item{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--radius);color:var(--fg2);font-size:13px;cursor:pointer;transition:all .15s;overflow:hidden}
.tk-open-item:hover{background:rgba(255,255,255,.05);color:var(--fg)}
.tk-open-item.active{background:rgba(229,192,123,.25);color:#fff}
.tk-open-item .tk-open-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tk-open-item .tk-open-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-open-item .tk-open-close{display:none;background:none;border:none;color:var(--fg3);cursor:pointer;font-size:14px;padding:0 2px;line-height:1;flex-shrink:0}
.tk-open-item:hover .tk-open-close{display:block}
.tk-open-item .tk-open-close:hover{color:var(--red)}
.tk-articles{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.tk-article{max-width:85%;position:relative}
.tk-article.customer{align-self:flex-start}
.tk-article.agent{align-self:flex-end}
.tk-article-bubble{border-radius:12px;padding:14px 18px;position:relative}
.tk-article.customer .tk-article-bubble{background:rgba(171,178,191,.08);border:1px solid rgba(171,178,191,.12)}
.tk-article.agent .tk-article-bubble{background:rgba(97,175,239,.1);border:1px solid rgba(97,175,239,.18)}
.tk-article.internal .tk-article-bubble{background:rgba(229,192,123,.06);border:1px solid rgba(229,192,123,.15)}
.tk-article-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:11px;color:var(--fg3)}
.tk-article-header .tk-sender{font-weight:600;color:var(--fg2)}
.tk-article.internal .tk-article-header .tk-sender::after{content:'Internal Note';margin-left:6px;padding:1px 6px;border-radius:3px;background:rgba(229,192,123,.2);color:var(--yellow);font-size:10px;font-weight:600}
.tk-article-body{font-size:13px;line-height:1.7;color:var(--fg);word-wrap:break-word;overflow-wrap:break-word}
.tk-article-body blockquote{margin:8px 0;padding:4px 12px;border-left:3px solid var(--border);color:var(--fg2)}
.tk-reply{flex-shrink:0;border-top:1px solid var(--border);background:var(--bg2)}
.tk-reply-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 16px}
.tk-reply-tab{padding:10px 16px;font-size:12px;font-weight:600;color:var(--fg2);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;font-family:inherit}
.tk-reply-tab:hover{color:var(--fg)}
.tk-reply-tab.active{color:#fff;border-bottom-color:var(--accent)}
.tk-reply-tab.active.note{color:var(--yellow);border-bottom-color:var(--yellow)}
.tk-reply-body{padding:12px 16px}
.tk-reply-body textarea{width:100%;min-height:80px;max-height:200px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--fg);font-size:13px;font-family:inherit;resize:vertical;outline:none}
.tk-reply-body textarea:focus{border-color:var(--accent)}
.tk-reply-actions{display:flex;justify-content:space-between;align-items:center;padding:8px 16px 12px}
.tk-reply-to{font-size:12px;color:var(--fg2)}
.tk-reply-to strong{color:var(--fg)}

@media(max-width:900px){
  .mobile-only{display:inline-block}
  .ai-side{display:none!important}
  .ai-toggle-btn{display:none!important}

  /* Hamburger button */
  #mobile-hamburger{display:flex}

  /* Sidebar: hidden by default on mobile, slide-over when toggled */
  #sidebar{display:none;position:fixed;left:0;top:0;bottom:0;width:250px;z-index:200}
  #sidebar.mobile-open{display:flex}
  #sidebar.collapsed{width:250px}
  #sidebar-collapse-btn{display:none}
  #sidebar-overlay.show{display:block;z-index:149}

  /* Hide sub-sidebars entirely on mobile */
  #ticket-filter-sidebar,#ticket-filter-sidebar.open{display:none!important}
  #filter-sidebar,#filter-sidebar.open{display:none!important}
  #sub-sidebar,#sub-sidebar.open{display:none!important}

  /* Mobile terminal key bar */
  #mobile-term-keys{display:flex;gap:6px;padding:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0}

  /* Agent detail page: pin hero + tabs, scroll panels below */
  #content:has(#page-agent-detail.active){overflow:hidden}
  #page-agent-detail.active{display:flex!important;flex-direction:column;height:100%;overflow:hidden;padding:0}

  .agent-hero{flex-shrink:0}
  #mobile-detail-tabs{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--border);background:var(--bg2);gap:0;flex-shrink:0}
  .detail-panel.active{overflow-y:auto;flex:1;min-height:0}
  .mdt-btn{padding:10px 16px;font-size:13px;color:var(--fg2);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0;font-family:inherit;transition:all .15s}
  .mdt-btn:hover{color:var(--fg)}
  .mdt-btn.active{color:#fff;border-bottom-color:var(--accent)}

  /* Mobile header — hamburger lives inside breadcrumb bar */
  #breadcrumb-bar{height:56px;padding:0 12px;display:flex!important;visibility:visible!important}
  #mobile-hamburger{display:flex!important;visibility:visible!important}
  .breadcrumb{display:flex!important;visibility:visible!important}

  /* Pages: reduce padding */
  .page{padding:16px 12px}
  .detail-panel{padding:16px 12px}

  /* Agent hero: stack on mobile */
  .agent-hero{flex-wrap:wrap;padding:16px 12px;gap:12px}
  .hero-actions{width:100%;justify-content:flex-start}

  /* Ticket detail: hide sidebar on mobile, stack layout */
  .tk-sidebar{display:none}
  .tk-hero{padding:12px;gap:10px;flex-wrap:wrap}
  .tk-hero-actions{width:100%}
  .tk-article{max-width:95%}

  /* Tables: hide less important columns, enable horizontal scroll as fallback */
  .agent-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Hide Tags (5th), Client (6th), Version (7th), Last Seen (8th) columns on mobile */
  .agent-table th:nth-child(5),.agent-table td:nth-child(5),
  .agent-table th:nth-child(6),.agent-table td:nth-child(6),
  .agent-table th:nth-child(7),.agent-table td:nth-child(7),
  .agent-table th:nth-child(8),.agent-table td:nth-child(8){display:none}
  .proc-table,.svc-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Search box: full width */
  .search-box{flex:1 1 auto;min-width:0}
  .list-toolbar{flex-wrap:wrap;gap:8px;padding:12px 0}

  /* Modals: fit viewport */
  .modal{width:calc(100vw - 32px)!important;max-width:420px}

  /* Login card: fit small screens */
  .login-card{padding:28px 20px}
  .auth-logo{font-size:24px}
  .auth-wrap{gap:20px}

  /* Stat grid: fewer columns */
  .stat-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}

  /* Tabs: scroll horizontally */
  .manage-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:0;margin-left:-12px;margin-right:-12px;padding:0 12px}
  .manage-tab{white-space:nowrap;flex-shrink:0}

  /* Terminal AI wrap: stack vertically */
  .terminal-ai-wrap{flex-direction:column;height:auto}
  .terminal-ai-wrap .term-side{min-height:300px}
  .ai-side{width:100%!important;height:300px}

  /* Toast: centered bottom */
  .toast{left:16px;right:16px;bottom:12px;text-align:center}

  /* Update rows: wrap */
  .update-row{flex-wrap:wrap;gap:8px}
  .update-name{min-width:auto;flex:1 1 100%}

  /* User card in sidebar */
  .user-card{padding:10px 12px}

  /* Tenant switcher */
  #tenant-switcher{flex-wrap:wrap}
  #tenant-switcher select{max-width:150px}

  /* Settings rows: stack */
  .settings-row{flex-direction:column;align-items:flex-start;gap:8px}

  /* Sessions table */
  .sessions-table{font-size:12px}
  /* Hide IP(5) on mobile */
  .sessions-table th:nth-child(5),.sessions-table td:nth-child(5){display:none}

  /* Alert cards */
  .alert-header{flex-wrap:wrap;gap:8px}
  .alert-time{width:100%;text-align:left}
  .alert-detail-grid{grid-template-columns:1fr;gap:4px}
  .alert-detail-grid dt{font-size:11px;color:var(--fg2)}

  /* Audit log */
  .audit-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:12px}
  /* Hide Target(3) and IP(5) on mobile */
  .audit-table th:nth-child(3),.audit-table td:nth-child(3),
  .audit-table th:nth-child(5),.audit-table td:nth-child(5){display:none}

  /* Network devices page */
  #page-network .list-toolbar{flex-wrap:wrap;gap:8px}
  #page-network .list-toolbar .toolbar-spacer{display:none}
  #page-network .list-toolbar .btn{order:-1}
  #page-network .list-toolbar > div:nth-child(2){flex-wrap:wrap;gap:6px;width:100%;order:10}
  #page-network .list-toolbar .search-box{order:5;width:100%}
  #page-network .list-toolbar select{font-size:12px;padding:5px 8px;flex:1 1 auto;min-width:0}
  .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Hide Type(5), Bastion(6), Ping(7), Last Seen(8) on mobile */
  .data-table th:nth-child(5),.data-table td:nth-child(5),
  .data-table th:nth-child(6),.data-table td:nth-child(6),
  .data-table th:nth-child(7),.data-table td:nth-child(7),
  .data-table th:nth-child(8),.data-table td:nth-child(8){display:none}

  /* Users page */
  #page-users .card-header{flex-wrap:wrap;gap:8px}
  #page-users .card-header > div{width:100%;justify-content:flex-start}
  .users-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:12px}
  /* Hide LastName(2), Username(4), Sudo(6), SSH Keys(7), Last Login(8) on mobile */
  #page-users .users-table th:nth-child(2),#page-users .users-table td:nth-child(2),
  #page-users .users-table th:nth-child(4),#page-users .users-table td:nth-child(4),
  #page-users .users-table th:nth-child(6),#page-users .users-table td:nth-child(6),
  #page-users .users-table th:nth-child(7),#page-users .users-table td:nth-child(7),
  #page-users .users-table th:nth-child(8),#page-users .users-table td:nth-child(8){display:none}

  /* SSH Access page tables */
  #page-ssh-access table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:12px}
  #page-ssh-access .card > div:first-child{flex-wrap:wrap;gap:8px}

  /* Network device detail */
  #page-network-device-detail .nd-hero{flex-wrap:wrap;padding:16px 12px;gap:10px}
  #page-network-device-detail .nd-hero .nd-icon{width:40px;height:40px}
  #page-network-device-detail .nd-hero > div:last-child{width:100%;display:flex;gap:8px}
  #page-network-device-detail .nd-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #page-network-device-detail .nd-tab{white-space:nowrap;flex-shrink:0;padding:10px 14px;font-size:12px}
  #page-network-device-detail .nd-panel{padding:16px 12px}
  #page-network-device-detail .nd-panel[style*="padding:0"]{padding:0!important}
  .dash-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .dash-stat .value{font-size:22px}
  #page-dashboards [style*="grid-template-columns: 1fr 1fr"],
  #page-dashboards [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}

  /* Global AI chat: mobile full-screen slide-in from right */
  #global-ai-overlay{position:fixed;top:0;right:0;bottom:0;width:100%;height:100%;transform:translateX(100%);border-radius:0;border:none;border-left:none;transition:transform .3s}
  #global-ai-overlay.mode-push.open, #global-ai-overlay.mode-overlay.open{width:100%;transform:translateX(0)}
  #global-ai-resize-handle{display:none}
  #global-ai-overlay > div:first-child{padding:10px 12px!important}
  #global-ai-messages{padding:10px!important}
  #global-ai-overlay .ai-msg{max-width:96%!important;font-size:14px!important}
  #global-ai-overlay > div:last-child{padding-bottom:max(8px, env(safe-area-inset-bottom))!important}
}
.proc-table,.svc-table{width:100%;font-size:12px}
.proc-table td,.svc-table td{padding:4px 8px;border-bottom:1px solid var(--border);font-family:monospace}
.proc-table th,.svc-table th{padding:6px 8px;text-align:left;font-size:11px;color:var(--fg2);font-weight:600;border-bottom:1px solid var(--border)}
.fs-entry{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;border-bottom:1px solid var(--border);font-size:13px}
.fs-entry:hover{background:rgba(255,255,255,.03)}
.fs-entry svg{width:16px;height:16px;flex-shrink:0}
.fs-breadcrumb{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--fg2);flex-wrap:wrap}
.fs-breadcrumb span{cursor:pointer;color:var(--accent)}
.fs-breadcrumb span:hover{text-decoration:underline}
.fs-size{color:var(--fg2);font-size:11px;margin-left:auto;font-family:monospace}
/* AI Chat Panel */
#ai-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;background:#0d1117}
.ai-scroll-bottom-btn{position:absolute;bottom:12px;right:16px;width:32px;height:32px;border-radius:50%;background:#2c313a;border:1px solid rgba(255,255,255,.15);color:#abb2bf;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:5;font-size:16px;transition:opacity .15s;opacity:.85;pointer-events:all}.ai-scroll-bottom-btn:hover{background:#3a3f4a;opacity:1}
.ai-msg{max-width:90%;padding:8px 12px;border-radius:8px;font-size:13px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;word-break:break-word;font-family:system-ui,sans-serif;min-width:0;box-sizing:border-box}
.ai-msg.user{align-self:flex-end;background:#61afef;color:#fff}
.ai-msg.assistant{align-self:flex-start;background:#2c313a;color:#abb2bf}
.ai-msg.status{align-self:center;color:#666;font-size:11px;font-style:italic}
.ai-msg.tool-status{align-self:flex-start;color:#5c6370;font-size:11px;font-style:italic;padding:2px 10px;background:none;border-left:2px solid #61afef;margin:2px 0}
.ai-msg.tool-status::before{content:'\2699\00a0'}
.ai-msg.ai-thinking-block,.ai-msg.ai-thinking-done{display:block;align-self:flex-start;color:#5c6370;font-size:11px;font-style:italic;padding:4px 10px;background:rgba(97,175,239,.06);border-left:2px solid #5c6370;margin:2px 0;border-radius:3px;max-width:95%;width:fit-content;height:auto;max-height:none;overflow:visible;white-space:pre-wrap;word-break:break-word;min-height:24px;flex-shrink:0;box-sizing:border-box}.ai-msg.ai-thinking-block:empty{display:none}
.ai-msg.bash-cmd{align-self:flex-start;font-family:'SF Mono','Cascadia Code','Consolas',monospace;font-size:11px;color:#e5c07b;padding:3px 10px;background:rgba(0,0,0,.3);border-left:2px solid #e5c07b;margin:2px 0;border-radius:3px;max-width:95%;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.ai-msg.bash-output{align-self:flex-start;font-family:'SF Mono','Cascadia Code','Consolas',monospace;font-size:10px;color:#98c379;padding:3px 10px;background:rgba(0,0,0,.2);margin:1px 0 2px;border-radius:3px;max-width:95%;overflow-x:auto;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;flex-shrink:0}
.ai-msg.tool-card{align-self:flex-start;padding:0;background:rgba(97,175,239,.04);border:1px solid rgba(97,175,239,.2);border-radius:6px;max-width:95%;overflow:hidden}
.ai-msg.tool-card>summary.tool-card-summary{cursor:pointer;padding:6px 10px;font-size:11px;color:#e5c07b;font-family:'SF Mono','Cascadia Code','Consolas',monospace;list-style:none;user-select:none;background:rgba(0,0,0,.2);border-bottom:1px solid rgba(97,175,239,.15);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-msg.tool-card>summary.tool-card-summary::before{content:'\25BE\00a0';display:inline-block;width:14px;color:#5c6370}
.ai-msg.tool-card:not([open])>summary.tool-card-summary::before{content:'\25B8\00a0'}
.ai-msg.tool-card>summary.tool-card-summary::-webkit-details-marker{display:none}
.ai-msg.tool-card>.tool-card-body{padding:6px 8px;display:flex;flex-direction:column;gap:2px}
.ai-msg.tool-card .bash-cmd{font-family:'SF Mono','Cascadia Code','Consolas',monospace;font-size:11px;color:#e5c07b;padding:2px 6px;background:rgba(0,0,0,.25);border-left:2px solid #e5c07b;border-radius:3px;white-space:pre-wrap;word-break:break-all}
.ai-msg.tool-card .bash-output{font-family:'SF Mono','Cascadia Code','Consolas',monospace;font-size:10px;color:#98c379;padding:3px 6px;background:rgba(0,0,0,.15);border-radius:3px;white-space:pre-wrap;word-break:break-all;max-height:300px;overflow-y:auto}
.ai-agent-name-red{color:var(--red);font-weight:500}
@keyframes pulse-dots{0%,80%,100%{opacity:.3}40%{opacity:1}}
.ai-thinking-dots span{animation:pulse-dots 1.4s infinite;display:inline-block}
.ai-thinking-dots span:nth-child(2){animation-delay:.2s}
.ai-thinking-dots span:nth-child(3){animation-delay:.4s}
.ai-divider{align-self:stretch;display:flex;align-items:center;gap:8px;margin:10px 0;color:#5c6370;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;font-weight:600}
.ai-divider::before,.ai-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,#3a3f4a,transparent)}
.ai-divider .ai-divider-summary{flex-basis:100%;color:#7d8590;font-size:10px;font-style:italic;text-transform:none;letter-spacing:normal;font-weight:400;margin-top:4px;padding:6px 10px;background:rgba(97,175,239,.04);border-left:2px solid #5c6370;border-radius:3px;max-height:120px;overflow-y:auto;white-space:pre-wrap}
.slash-menu{position:absolute;bottom:60px;left:12px;background:#1e2127;border:1px solid rgba(255,255,255,.15);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.4);min-width:240px;max-width:360px;padding:4px;z-index:100;display:none}
.slash-menu.visible{display:block}
.slash-menu-item{padding:6px 10px;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.slash-menu-item:hover,.slash-menu-item.active{background:rgba(97,175,239,.18)}
.slash-menu-item .slash-cmd{color:#61afef;font-family:'SF Mono','Cascadia Code','Consolas',monospace;font-size:12px;font-weight:600}
.slash-menu-item .slash-desc{color:#abb2bf;font-size:11px}
.mention-menu{position:absolute;bottom:60px;left:12px;background:#1e2127;border:1px solid rgba(255,255,255,.15);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.4);min-width:240px;max-width:360px;padding:4px;z-index:100;display:none;max-height:280px;overflow-y:auto}
.mention-menu.visible{display:block}
.mention-menu-section{font-size:10px;color:#5c6370;text-transform:uppercase;letter-spacing:.6px;padding:6px 10px 4px;font-weight:700}
.mention-menu-item{padding:6px 10px;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.mention-menu-item:hover,.mention-menu-item.active{background:rgba(97,175,239,.18)}
.mention-menu-item .mention-name{color:#abb2bf;font-size:13px}
.mention-menu-item .mention-name .agent-host{color:#abb2bf}
.mention-menu-item .mention-name .agent-client{color:#5c6370;margin-left:4px}
.mention-menu-item .mention-meta{color:#5c6370;font-size:11px}
.mention-pill{display:inline;color:#61afef;background:rgba(97,175,239,.55);border-radius:3px}
.mention-pill.client{color:#e5c07b;background:rgba(229,192,123,.55)}
#fp-ai-mirror{position:absolute;inset:0;padding:8px 10px;font-size:13px;font-family:system-ui,sans-serif;line-height:1.4;color:#eee;white-space:pre-wrap;overflow:hidden;pointer-events:none;background:transparent;border:1px solid transparent;border-radius:6px;box-sizing:border-box;overflow-y:auto}
#fp-ai-input{position:relative;background:transparent!important;line-height:1.4;color:transparent!important;caret-color:#eee}
#fp-ai-input::placeholder{color:rgba(255,255,255,.35)}
.ai-msg.assistant code{background:rgba(255,255,255,.08);padding:1px 4px;border-radius:3px;font-family:'SF Mono','Cascadia Code','Consolas',monospace;font-size:12px}
.ai-msg.assistant pre{background:rgba(0,0,0,.4);padding:8px;border-radius:4px;overflow-x:auto;margin:4px 0}
.ai-msg.assistant pre code{background:none;padding:0}
.ai-msg.assistant p{margin:4px 0}
.ai-msg.assistant table{border-collapse:collapse;margin:6px 0;font-size:12px;width:100%}
.ai-msg.assistant th,.ai-msg.assistant td{border:1px solid rgba(255,255,255,.15);padding:4px 8px;text-align:left}
.ai-msg.assistant th{background:rgba(255,255,255,.06);font-weight:600}
.ai-msg.assistant ul,.ai-msg.assistant ol{margin:4px 0;padding-left:20px}
.ai-msg.assistant blockquote{border-left:3px solid rgba(255,255,255,.2);margin:4px 0;padding:2px 8px;color:#999}
.ai-token-bar{display:flex;align-items:center;gap:8px;padding:4px 10px;background:#0d1117;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}
.ai-token-track{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.ai-token-progress{height:100%;width:0%;background:#61afef;border-radius:3px;transition:width .3s ease,background .3s ease}
.ai-token-label{font-size:10px;color:var(--fg2);white-space:nowrap;font-variant-numeric:tabular-nums}
#ai-input-bar{display:flex;gap:6px;padding:8px;border-top:1px solid rgba(255,255,255,.1);background:#21252b}
#ai-input{flex:1;background:#1e2127;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:8px 10px;color:#eee;font-size:13px;font-family:system-ui,sans-serif;resize:none;min-height:36px;max-height:120px}
#ai-input:focus{outline:none;border-color:#1f6feb}
#ai-send-btn{width:36px;height:36px;border:none;border-radius:6px;background:#61afef;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-end}
#ai-send-btn:hover{background:#388bfd}
#ai-send-btn:disabled{opacity:.4;cursor:not-allowed}
#ai-stop-btn{width:36px;height:36px;border:none;border-radius:6px;background:#e06c75;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-end}
#ai-stop-btn:hover{background:#d04050}
.ai-code-wrap{position:relative;margin:4px 0;cursor:pointer;border-left:3px solid #2ea043;border-radius:4px;transition:border-color .15s}
.ai-code-wrap:hover{border-left-color:#3fb950}
.ai-code-wrap pre{margin:0 !important;padding:8px 10px 8px 24px !important;background:rgba(0,0,0,.3) !important}
.ai-run-btn{position:absolute;top:50%;left:5px;transform:translateY(-50%);background:none;color:#3fb950;border:none;padding:0;cursor:pointer;display:flex;align-items:center;line-height:1;opacity:.6}
.ai-code-wrap:hover .ai-run-btn{opacity:1}
.ai-chat-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s}
.ai-chat-item:hover{background:rgba(255,255,255,.05)}
.ai-chat-item:last-child{border-bottom:none}
.ai-side{position:relative}
/* AI Command Approval Widget */
.ai-msg.approval-request{align-self:stretch;background:#1c2128;border:1px solid #e3b341;border-radius:8px;padding:12px;max-width:100%;box-sizing:border-box}
.ai-approval-label{font-size:11px;color:#e3b341;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.ai-approval-cmd{font-family:'SF Mono','Cascadia Code','Consolas',monospace;font-size:11px;color:#e5c07b;background:rgba(0,0,0,.4);padding:6px 10px;border-radius:4px;margin-bottom:8px;white-space:pre-wrap;word-break:break-all;max-height:120px;overflow-y:auto}
.ai-approval-cmd.expandable{cursor:pointer;user-select:none}
.ai-approval-cmd.expandable:hover{background:rgba(0,0,0,.55);color:#f0c674}
.ai-approval-expand-hint{color:#888;font-style:italic;font-size:10px}
.ai-approval-drawer{font-family:'SF Mono','Cascadia Code','Consolas',monospace;font-size:11px;color:#abb2bf;background:rgba(0,0,0,.55);border:1px solid rgba(229,192,123,.25);padding:10px 12px;border-radius:4px;margin:0 0 8px;white-space:pre-wrap;word-break:break-word;max-height:400px;overflow-y:auto}
.ai-approval-context{width:100%;background:#0d1117;border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:6px 8px;color:#ccc;font-size:12px;font-family:system-ui,sans-serif;resize:none;margin-bottom:8px;box-sizing:border-box;min-height:36px;max-height:80px}
.ai-approval-context:focus{outline:none;border-color:#e3b341}
.ai-approval-context::placeholder{color:#555}
.ai-approval-btns{display:flex;gap:8px}
.ai-approval-allow{background:#2ea043;border:none;border-radius:4px;color:#fff;padding:5px 16px;font-size:12px;cursor:pointer;font-weight:500}
.ai-approval-allow:hover{background:#3fb950}
.ai-approval-deny{background:#da3633;border:none;border-radius:4px;color:#fff;padding:5px 16px;font-size:12px;cursor:pointer;font-weight:500}
.ai-approval-deny:hover{background:#f85149}
.ai-approval-result{font-size:11px;font-style:italic}
.ai-approval-result.allowed{color:#3fb950}
.ai-approval-result.denied{color:#f85149}