:root{--brand: #ea7317;--brand-dark: #c85f0d;--brand-contrast: #ffffff;--bg: #16181d;--bg-panel: #1f232b;--bg-raised: #272c36;--border: #353b48;--text: #eceef2;--text-dim: #9aa1ad;--ok: #3fb26f;--busy: #e05252;--paused: #d9a23c;--radius: 10px;--font: "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body{overflow-x:hidden;max-width:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px}a{color:var(--brand);text-decoration:none}button{font:inherit;border:none;border-radius:calc(var(--radius) - 4px);padding:8px 14px;cursor:pointer;background:var(--bg-raised);color:var(--text)}button.primary{background:var(--brand);color:var(--brand-contrast);font-weight:600}button.primary:hover{background:var(--brand-dark)}button:disabled{opacity:.5;cursor:default}input,select{font:inherit;background:var(--bg-raised);color:var(--text);border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);padding:8px 10px}input:focus,select:focus{outline:2px solid var(--brand);outline-offset:0}.layout{display:flex;min-height:100vh}.sidebar{width:220px;background:var(--bg-panel);border-right:1px solid var(--border);padding:20px 14px;display:flex;flex-direction:column;gap:6px}.logo{display:flex;align-items:center;gap:10px;margin-bottom:24px;font-size:19px;font-weight:700}.logo .mark{width:34px;height:34px;border-radius:9px;background:var(--brand);color:var(--brand-contrast);display:grid;place-items:center;font-size:18px}.sidebar-head{display:flex;align-items:center;justify-content:space-between}.sidebar-head .logo{margin-bottom:24px}.drawer-close{display:none;background:transparent;color:var(--text-dim);font-size:30px;line-height:1;padding:0 6px;margin-bottom:24px}.sidebar a{color:var(--text-dim);padding:9px 12px;border-radius:calc(var(--radius) - 4px)}.sidebar a.active,.sidebar a:hover{background:var(--bg-raised);color:var(--text)}.sidebar a.active{color:var(--brand);font-weight:600}.sidebar .spacer{flex:1}.sidebar .nav-logout{color:var(--text-dim)}.topbar,.hamburger,.nav-overlay{display:none}.content{flex:1;padding:26px 32px;max-width:1200px}h1{font-size:22px;margin:0 0 4px}.subtitle{color:var(--text-dim);margin:0 0 22px}.banner-mock{background:color-mix(in srgb,var(--paused) 18%,transparent);border:1px solid var(--paused);color:var(--paused);border-radius:var(--radius);padding:8px 14px;margin-bottom:18px;font-size:13px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.agent-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.agent-name{font-weight:600}.pill{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px}.pill.READY{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}.pill.INCALL{background:color-mix(in srgb,var(--busy) 20%,transparent);color:var(--busy)}.pill.PAUSED{background:color-mix(in srgb,var(--paused) 20%,transparent);color:var(--paused)}.agent-meta{color:var(--text-dim);font-size:13px;line-height:1.7}.monitor-row{display:flex;gap:8px;margin-top:12px}.monitor-row button{flex:1;font-size:13px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}th{color:var(--text-dim);font-size:13px;font-weight:600}audio{height:32px;max-width:240px}.toolbar{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center}.login-wrap{min-height:100vh;display:grid;place-items:center}.login-card{width:340px;display:flex;flex-direction:column;gap:12px}.error{color:var(--busy);font-size:13px}.success{color:var(--ok)}.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:26px;text-align:center;color:var(--text-dim)}.chat-layout{display:flex;height:100vh}.chat-side{width:280px;background:var(--bg-panel);border-right:1px solid var(--border);padding:16px 14px;display:flex;flex-direction:column}.chat-convos{flex:1;overflow-y:auto;margin-top:6px}.chat-convo{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:calc(var(--radius) - 4px);cursor:pointer}.chat-convo:hover{background:var(--bg-raised)}.chat-convo.active{background:var(--brand);color:var(--brand-contrast)}.chat-convo-name{font-weight:600}.chat-del{background:transparent;color:inherit;opacity:.55;padding:2px 6px;font-size:12px;min-height:0}.chat-del:hover{opacity:1;background:#e0525233}.chat-main{flex:1;display:flex;flex-direction:column;min-width:0}.chat-empty{display:grid;place-items:center;height:100%}.chat-header{padding:16px 20px;border-bottom:1px solid var(--border);font-weight:600;font-size:16px;display:flex;align-items:center;gap:8px}.chat-back{display:none;background:transparent;font-size:22px;padding:0 6px;line-height:1}.chat-messages{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:10px}.chat-msg{max-width:72%;align-self:flex-start}.chat-msg.mine{align-self:flex-end}.chat-bubble{position:relative;background:var(--bg-raised);padding:9px 13px;border-radius:12px;word-break:break-word;display:flex;align-items:flex-start;gap:8px}.chat-msg.mine .chat-bubble{background:var(--brand);color:var(--brand-contrast)}.chat-msg.mine .chat-bubble a{color:#fff;text-decoration:underline}.chat-bubble .chat-del{position:static;flex-shrink:0}.chat-time{font-size:11px;color:var(--text-dim);margin-top:3px;padding:0 4px}.chat-msg.mine .chat-time{text-align:right}.chat-input{display:flex;gap:8px;padding:14px 16px;border-top:1px solid var(--border)}.chat-input input[type=text],.chat-input>input:not([type]){flex:1}.chat-input input{flex:1}.chat-input button{flex-shrink:0}@media (max-width: 820px){.layout{flex-direction:column}.topbar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40;padding-top:max(10px,env(safe-area-inset-top))}.topbar .logo{margin:0;font-size:17px}.topbar .logo .mark{width:30px;height:30px;font-size:16px}.hamburger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;background:transparent;border-radius:8px}.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px}.sidebar{position:fixed;top:0;left:0;bottom:0;width:min(280px,82vw);z-index:60;transform:translate(-100%);transition:transform .25s ease;overflow-y:auto;padding:max(16px,env(safe-area-inset-top)) 16px 20px;gap:4px;box-shadow:2px 0 24px #0006}.sidebar.open{transform:translate(0)}.drawer-close{display:inline-block}.sidebar a{padding:13px 12px;font-size:15.5px}.nav-overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#00000080;opacity:0;pointer-events:none;transition:opacity .25s ease}.nav-overlay.show{opacity:1;pointer-events:auto}.content{padding:16px 14px;max-width:100%}h1{font-size:20px}.subtitle{margin-bottom:16px}.grid{grid-template-columns:1fr}.card{overflow-x:auto;-webkit-overflow-scrolling:touch}.toolbar{flex-direction:column;align-items:stretch}.toolbar input,.toolbar select,.toolbar button{width:100%!important}.toolbar label{display:flex;align-items:center;justify-content:space-between;gap:8px}button,input,select,textarea,a.nav-logout{min-height:44px}button{padding:11px 16px}.monitor-row{flex-wrap:wrap}.monitor-row button{min-height:42px}audio{width:100%;max-width:none}table{min-width:520px}th,td{padding:10px;font-size:14px}.login-card{width:min(340px,92vw)}.chat-layout{flex-direction:column;height:100vh;height:100dvh}.chat-side{width:auto;border-right:none;border-bottom:1px solid var(--border);padding:10px 12px;max-height:34vh;overflow-y:auto}.chat-main,.chat-messages{min-height:0}.chat-msg{max-width:85%}.chat-layout.has-active .chat-side{display:none}.chat-layout.has-active .chat-main{height:100vh;height:100dvh}.chat-back{display:inline-block}.chat-input{padding:10px 12px}.chat-input input,.chat-input button{min-height:44px}}h2{font-size:16px;margin:0 0 12px}.nav-icon{display:inline-block;width:22px;opacity:.8}.whoami{font-size:12px;color:var(--text-dim);padding:6px 10px}.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:110px;padding:10px 14px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;text-align:left}.stat b{font-size:22px;line-height:1}.stat span{font-size:12px;color:var(--text-dim)}.stat.active{outline:2px solid var(--brand)}.stat.ok b{color:var(--ok)}.stat.busy b{color:var(--busy)}.stat.dim b{color:var(--text-dim)}.field{display:inline-flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-dim)}.field.check{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--text)}.inline{margin:0;align-self:center}.table-card{padding:0;overflow-x:auto}table.kv th{text-align:left;white-space:nowrap;padding-right:14px;color:var(--text-dim);font-weight:500}table.kv td{padding:4px 0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}.modal{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;width:min(520px,100%);box-shadow:0 20px 60px #00000080}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}.modal-head h2{margin:0}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.chips{list-style:none;padding:0;margin:12px 0;display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-raised);border:1px solid var(--border);border-radius:999px;padding:4px 6px 4px 12px;font-size:13px}.chip small{color:var(--text-dim)}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--text-dim);vertical-align:middle}.dot.ok{background:var(--ok)}.dot.busy{background:var(--busy)}.dot.dim{background:var(--border)}button.link{background:none;padding:0;color:var(--brand);text-decoration:underline dotted}button.icon{background:none;padding:2px 6px;font-size:14px;line-height:1}button.danger{background:transparent;border:1px solid var(--busy);color:var(--busy)}button.danger:hover{background:var(--busy);color:#fff}.btn{display:inline-block;background:var(--bg-raised);color:var(--text);padding:8px 14px;border-radius:calc(var(--radius) - 4px);font-size:14px}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;align-items:center}.form-grid input,.form-grid select{width:100%}tr.muted td,.card.muted{opacity:.55}.call-line{display:flex;align-items:baseline;gap:10px;margin:10px 0 2px;flex-wrap:wrap}.call-number{font-weight:600;font-size:16px}.call-dur{font-variant-numeric:tabular-nums;color:var(--brand);font-weight:600}td.actions{white-space:nowrap}td.actions>*{margin-right:6px}.progress{height:8px;background:var(--bg-raised);border-radius:999px;overflow:hidden;margin:10px 0 6px}.progress>div{height:100%;background:var(--brand);transition:width .4s}.card.agent.INCALL{border-color:var(--busy)}.card.agent.READY{border-color:var(--ok)}.pill.PAUSED{background:var(--paused);color:#000}@media (max-width: 820px){.form-grid{grid-template-columns:1fr}.stats{gap:8px}.stat{min-width:44%;flex:1}}
