/* AI-Agent-100 — Dark Theme Dashboard */
:root {
    --bg:#0f172a; --bg2:#1e293b; --bg3:#273548; --bgs:#0c1222;
    --bgi:#1e293b; --bdr:#334155; --tx:#e2e8f0; --txm:#94a3b8; --txd:#64748b;
    --pri:#3b82f6; --prih:#2563eb; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --pur:#8b5cf6;
    --r:8px; --rl:12px; --sw:260px; --swc:60px; --t:.2s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--tx);line-height:1.5;min-height:100vh}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}
a{color:inherit;text-decoration:none}

/* LOGIN */
.login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}
.login-card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--rl);padding:2.5rem;width:100%;max-width:400px;box-shadow:0 25px 50px rgba(0,0,0,.5)}
.login-logo{text-align:center;margin-bottom:2rem}
.logo-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--pri),var(--pur));font-size:1.1rem;font-weight:800;color:#fff;margin-bottom:.75rem;gap:1px}
.logo-icon.family-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#e8a87c,#d2738a,#9b59b6);font-size:2rem;border:3px solid rgba(255,255,255,.15)}
.logo-100{font-size:.65em;opacity:.8}
.login-card h1{font-size:1.5rem;font-weight:700}
.login-sub{color:var(--txm);font-size:.875rem;margin-top:.25rem}
.login-footer{text-align:center;color:var(--txm);font-size:.75rem;margin-top:1.5rem;opacity:.6}
.logo-sm{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--pri),var(--pur));font-size:.7rem;font-weight:800;color:#fff;flex-shrink:0;gap:1px}
.logo-sm span{font-size:.5rem;opacity:.8}

/* FORMS */
.fg{margin-bottom:1rem}
.fg label{display:block;margin-bottom:.375rem;font-size:.8125rem;font-weight:500;color:var(--txm)}
input[type="text"],input[type="password"],input[type="email"],select,textarea{width:100%;padding:.625rem .875rem;background:var(--bgi);border:1px solid var(--bdr);border-radius:var(--r);color:var(--tx);font-size:.875rem;outline:none;transition:border var(--t)}
input:focus,select:focus{border-color:var(--pri)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.5rem 1rem;border:1px solid var(--bdr);border-radius:var(--r);background:var(--bg2);color:var(--tx);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all var(--t);white-space:nowrap}
.btn:hover{background:var(--bg3)}
.btn-primary{background:var(--pri);border-color:var(--pri);color:#fff}.btn-primary:hover{background:var(--prih)}
.btn-danger{background:var(--err);border-color:var(--err);color:#fff}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#fff}.btn-ok:hover{opacity:.85}
.btn-sm{padding:.3rem .625rem;font-size:.75rem}
.w100{width:100%;padding:.75rem}
.btn-out{border-color:var(--err);color:var(--err);font-size:.75rem}.btn-out:hover{background:var(--err);color:#fff}
.err{color:var(--err);font-size:.8125rem;margin:.5rem 0;padding:.5rem;border-radius:var(--r);background:rgba(239,68,68,.1)}

/* LAYOUT */
.layout{display:flex;min-height:100vh}

/* SIDEBAR */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sw);background:var(--bgs);border-right:1px solid var(--bdr);display:flex;flex-direction:column;z-index:100;transition:width var(--t);overflow:hidden}
.sidebar.col{width:var(--swc)}
.sidebar.col .ni-l,.sidebar.col .ns,.sidebar.col .sb-title,.sidebar.col .sb-user,.sidebar.col .badge{display:none}
.sidebar.col .sb-head{justify-content:center}
.sb-head{display:flex;align-items:center;gap:.75rem;padding:1rem;border-bottom:1px solid var(--bdr);min-height:60px}
.sb-title{font-weight:700;font-size:.9375rem;white-space:nowrap}
.sb-toggle{margin-left:auto;background:none;border:none;color:var(--txm);cursor:pointer;font-size:1.125rem;padding:.25rem}.sb-toggle:hover{color:var(--tx)}
.sb-nav{flex:1;overflow-y:auto;padding:.5rem 0}
.ns{padding:1rem 1rem .375rem;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--txd)}
.ni{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;color:var(--txm);font-size:.8125rem;transition:all var(--t);border-left:3px solid transparent}
.ni:hover{color:var(--tx);background:rgba(255,255,255,.03)}
.ni.active{color:var(--pri);background:rgba(59,130,246,.08);border-left-color:var(--pri)}
.ni.soon{opacity:.45;pointer-events:none}
.ni-i{font-size:1rem;width:1.25rem;text-align:center;flex-shrink:0}
.badge{font-size:.6rem;padding:.1rem .35rem;border-radius:99px;background:var(--bdr);color:var(--txm);margin-left:auto;font-weight:600}
.sb-foot{padding:.75rem 1rem;border-top:1px solid var(--bdr);display:flex;align-items:center;gap:.5rem}
.sb-user{flex:1;min-width:0}
.u-name{display:block;font-size:.8125rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-role{display:block;font-size:.6875rem;color:var(--txd);text-transform:uppercase}

/* MAIN */
.main{margin-left:var(--sw);flex:1;padding:1.5rem 2rem;transition:margin-left var(--t);min-height:100vh}
.sidebar.col~.main{margin-left:var(--swc)}
.pg{display:none}.pg.active{display:block}
.ph{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.ph h2{font-size:1.5rem;font-weight:700}.ps{color:var(--txm);font-size:.875rem}.ph .btn{margin-left:auto}

/* CARDS */
.grid4{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mt{margin-top:1rem}.mt-s{margin-top:.5rem}
.card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--rl);overflow:hidden}
.cw{grid-column:span 1}
.cs{display:flex;align-items:center;gap:1rem;padding:1.25rem}
.ci{width:48px;height:48px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#fff;flex-shrink:0}
.cl{font-size:.75rem;color:var(--txm);margin-bottom:.125rem}
.cv{font-size:1.5rem;font-weight:700}
.ch{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--bdr)}
.ch h3{font-size:.9375rem;font-weight:600}
.cb{padding:1rem 1.25rem}
.muted{color:var(--txm)}

/* DASHBOARD KPI ROW */
.dash-kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem}
.dash-kpi{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;position:relative}
.dash-kpi-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:#fff;flex-shrink:0}
.dash-kpi-data{flex:1;min-width:0}
.dash-kpi-val{font-size:1.75rem;font-weight:700;line-height:1.1}
.dash-kpi-label{font-size:.7rem;color:var(--txm);text-transform:uppercase;letter-spacing:.03em;margin-top:.125rem}
.dash-kpi-pct{position:absolute;top:.75rem;right:.75rem;font-size:.7rem;font-weight:600;padding:.1rem .4rem;border-radius:4px}
.pct-ok{background:rgba(34,197,94,.15);color:var(--ok)}
.pct-warn{background:rgba(245,158,11,.15);color:var(--warn)}
.pct-err{background:rgba(239,68,68,.15);color:var(--err)}

/* DASHBOARD SECTIONS (collapsible) */
.dash-section{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--rl);overflow:hidden}
.dash-section-head{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;cursor:pointer;user-select:none;transition:background var(--t)}
.dash-section-head:hover{background:rgba(255,255,255,.02)}
.dash-section-head h3{font-size:.9375rem;font-weight:600;flex:1}
.dash-section-arrow{font-size:.6rem;color:var(--txm);transition:transform .2s;display:inline-block;transform:rotate(90deg)}
.dash-section-arrow.rotated{transform:rotate(0deg)}
.dash-section-tools{display:flex;align-items:center;gap:.5rem;font-size:.8125rem}
.dash-section-tools select{width:auto;font-size:.75rem;padding:.25rem .5rem}
.dash-section-tools input[type="date"]{width:auto;font-size:.75rem;padding:.25rem .5rem}
.dash-section-body{padding:0 1.25rem 1.25rem;display:none}
.dash-section-body.open{display:block}
.dash-live-tables{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.dash-report-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem}

/* ENGINE STATUS BADGE */
.dash-engine-badge{padding:.2rem .5rem;border-radius:4px;font-size:.7rem;font-weight:600;background:var(--bdr);color:var(--txm)}

/* EVENT BADGES */
.ev-badge{display:inline-block;padding:.1rem .4rem;border-radius:4px;font-size:.7rem;font-weight:500}
.ev-enter{background:rgba(59,130,246,.15);color:var(--pri)}
.ev-connect,.ev-agent_connect{background:rgba(34,197,94,.15);color:var(--ok)}
.ev-abandon{background:rgba(239,68,68,.15);color:var(--err)}
.ev-timeout{background:rgba(245,158,11,.15);color:var(--warn)}
.ev-transfer{background:rgba(139,92,246,.15);color:var(--pur)}
.ev-agent_ring{background:rgba(245,158,11,.15);color:var(--warn)}

/* TABLE */
.tw{overflow-x:auto}
.dt{width:100%;border-collapse:collapse;background:var(--bg2);border-radius:var(--rl);overflow:hidden;border:1px solid var(--bdr)}
.dt th{padding:.75rem 1rem;text-align:left;font-size:.75rem;font-weight:600;color:var(--txm);text-transform:uppercase;letter-spacing:.03em;background:var(--bgs);border-bottom:1px solid var(--bdr)}
.dt td{padding:.625rem 1rem;font-size:.8125rem;border-bottom:1px solid rgba(51,65,85,.5)}
.dt tbody tr:hover{background:rgba(255,255,255,.02)}

/* AUDIT ENTRIES */
.ae{padding:.5rem 0;border-bottom:1px solid rgba(51,65,85,.3);font-size:.8125rem}
.ae:last-child{border-bottom:none}
.at{color:var(--txd);font-size:.75rem}
.aa{color:var(--pri);font-weight:500}

/* MODAL */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6)}
.modal.active{display:flex}
.mo{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.mc,.modal-content{position:relative;background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--rl);padding:1.5rem;width:100%;max-width:480px;box-shadow:0 25px 50px rgba(0,0,0,.5)}
.mh,.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.mh h3,.modal-header h3{font-size:1.125rem;font-weight:700}
.mx,.btn-close{background:none;border:none;color:var(--txm);font-size:1.5rem;cursor:pointer;line-height:1}.mx:hover,.btn-close:hover{color:var(--tx)}
.modal-body{max-height:70vh;overflow-y:auto}
.ma,.modal-footer{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.25rem}

/* ROLE BADGE */
.rb{display:inline-block;padding:.125rem .5rem;border-radius:99px;font-size:.7rem;font-weight:600;color:#fff}
.rb-admin{background:var(--err)}.rb-supervisor{background:var(--pur)}.rb-agent{background:var(--pri)}.rb-reseller{background:var(--warn)}.rb-viewer{background:var(--txd)}

/* AGENT CARDS */
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.agent-card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--rl);padding:1.25rem;cursor:pointer;transition:all var(--t)}
.agent-card:hover{border-color:var(--pri);transform:translateY(-1px)}
.ac-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.ac-name{font-size:1rem;font-weight:600}
.ac-status{display:inline-block;padding:.15rem .5rem;border-radius:99px;font-size:.65rem;font-weight:600;text-transform:uppercase}
.st-draft{background:var(--bdr);color:var(--txm)}
.st-active{background:rgba(34,197,94,.15);color:var(--ok)}
.st-paused{background:rgba(245,158,11,.15);color:var(--warn)}
.st-archived{background:rgba(239,68,68,.15);color:var(--err)}
.ac-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.ac-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .5rem;background:var(--bg3);border-radius:var(--r);font-size:.7rem;color:var(--txm)}
.ac-desc{font-size:.8125rem;color:var(--txm);margin-bottom:.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ac-foot{display:flex;align-items:center;justify-content:space-between;padding-top:.75rem;border-top:1px solid var(--bdr);flex-wrap:wrap;gap:.5rem}
.ac-kb{font-size:.75rem;color:var(--txd)}
.ac-actions{display:flex;gap:.375rem;flex-wrap:wrap}

/* MODAL WIDE */
.mc-wide{max-width:640px}

/* FORM ROWS */
.fg-row{display:flex;gap:1rem;margin-bottom:0}
.fg-half{flex:1;min-width:0}
.fg-third{flex:1;min-width:0}

/* KB TABS */
.kb-head{margin-bottom:1rem}
.kb-tabs{display:flex;gap:.25rem;margin-bottom:.5rem}
.kb-tab{padding:.5rem 1rem;background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r) var(--r) 0 0;color:var(--txm);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all var(--t)}
.kb-tab:hover{color:var(--tx)}
.kb-tab.active{background:var(--bg3);color:var(--pri);border-bottom-color:var(--bg3)}
.kb-pane{display:none}.kb-pane.active{display:block}

/* UPLOAD ZONE */
.upload-zone{border:2px dashed var(--bdr);border-radius:var(--rl);padding:2rem;text-align:center;cursor:pointer;transition:all var(--t)}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--pri);background:rgba(59,130,246,.05)}
.uz-icon{font-size:2rem;margin-bottom:.5rem}

/* KB ENTRIES */
.kb-entry{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);margin-bottom:.5rem}
.kb-entry:hover{border-color:var(--bg3)}
.kb-type{display:inline-block;padding:.1rem .4rem;border-radius:4px;font-size:.65rem;font-weight:600;text-transform:uppercase;flex-shrink:0}
.kb-type-text{background:rgba(59,130,246,.15);color:var(--pri)}
.kb-type-url{background:rgba(139,92,246,.15);color:var(--pur)}
.kb-type-file{background:rgba(34,197,94,.15);color:var(--ok)}
.kb-info{flex:1;min-width:0}
.kb-name{font-size:.8125rem;font-weight:500}
.kb-val{font-size:.75rem;color:var(--txd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.kb-date{font-size:.7rem;color:var(--txd);flex-shrink:0}

/* CALLFLOW BUILDER */
.cf-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem;background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);margin-bottom:.5rem;flex-wrap:wrap}
.cf-nodes{display:flex;gap:.25rem;flex-wrap:wrap}
.cf-actions{display:flex;gap:.25rem}
.cf-workspace{position:relative;background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden}
.cf-workspace canvas{display:block;width:100%;height:calc(100vh - 280px);min-height:400px}
.cf-props{position:absolute;top:0;right:0;width:280px;height:100%;background:var(--bgs);border-left:1px solid var(--bdr);padding:1rem;overflow-y:auto}
.cf-props h4{font-size:.875rem;font-weight:600;margin-bottom:.75rem;color:var(--pri)}
.cf-add{font-size:.7rem!important;cursor:grab}
.cf-add:active{cursor:grabbing}
.cf-workspace.drag-over{outline:2px dashed var(--pri);outline-offset:-2px}
.cf-cond-row select,.cf-cond-row input{font-size:.75rem;padding:.2rem .3rem}

/* WORKFLOW STEPS (einfache Liste) */
.wf-steps{display:flex;flex-direction:column;gap:0}
.wf-step{position:relative;padding:.75rem 1rem .75rem 2.5rem;background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);margin-bottom:0}
.wf-step+.wf-step{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}
.wf-step:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}
.wf-step:hover{border-color:var(--pri);z-index:1}
.wf-step::before{content:attr(data-num);position:absolute;left:.75rem;top:.75rem;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--pri);color:#fff;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.wf-step-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.wf-step-type{font-size:.7rem;font-weight:600;padding:.1rem .4rem;border-radius:4px;text-transform:uppercase}
.wf-step-type-greeting{background:rgba(34,197,94,.15);color:#22c55e}
.wf-step-type-question{background:rgba(59,130,246,.15);color:#3b82f6}
.wf-step-type-llm_response{background:rgba(139,92,246,.15);color:#8b5cf6}
.wf-step-type-decision{background:rgba(236,72,153,.15);color:#ec4899}
.wf-step-type-transfer_human{background:rgba(239,68,68,.15);color:#ef4444}
.wf-step-type-end{background:rgba(100,116,139,.15);color:#64748b}
.wf-step-type-knowledge{background:rgba(16,185,129,.15);color:#10b981}
.wf-step-type-integration{background:rgba(245,158,11,.15);color:#f59e0b}
.wf-step-body textarea,.wf-step-body input,.wf-step-body select{width:100%;font-size:.8rem;padding:.35rem .5rem;background:var(--bg);border:1px solid var(--bdr);border-radius:4px;color:var(--tx);margin-top:.25rem}
.wf-step-body textarea{resize:vertical;min-height:2.5rem}
.wf-step-body label{font-size:.7rem;color:var(--txm);font-weight:500}
.wf-step-actions{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.25rem}
.wf-step-actions button{font-size:.65rem;padding:.15rem .35rem;opacity:.5}
.wf-step:hover .wf-step-actions button{opacity:1}
.wf-connector{text-align:center;color:var(--txd);font-size:.7rem;padding:.15rem 0;position:relative}
.wf-connector::before{content:'';position:absolute;left:1.45rem;top:0;bottom:0;width:2px;background:var(--bdr)}

/* DRAG & DROP FEEDBACK */
.dragging{opacity:.5}
.drag-over{background:var(--bg3)!important}
.drag-placeholder{border:2px dashed var(--pri);border-radius:var(--r);min-height:40px;margin:.25rem 0}

/* TEST CHAT MODAL */
.test-chat-box{display:flex;flex-direction:column;height:400px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden}
.test-chat-messages{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}
.test-chat-bubble{max-width:80%;padding:.5rem .75rem;border-radius:var(--rl);font-size:.85rem;line-height:1.4;word-wrap:break-word}
.test-chat-bubble.bot{align-self:flex-start;background:var(--bg2);color:var(--tx);border-bottom-left-radius:4px}
.test-chat-bubble.user{align-self:flex-end;background:var(--pri);color:#fff;border-bottom-right-radius:4px}
.test-chat-input-row{display:flex;gap:.5rem;padding:.5rem;border-top:1px solid var(--bdr);background:var(--bg2)}
.test-chat-input-row input{flex:1}

/* SOFTPHONE */
.dial-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:240px;margin:0 auto}
.dial-btn{padding:.75rem;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r);color:var(--tx);font-size:1.125rem;font-weight:600;cursor:pointer;transition:all var(--t)}
.dial-btn:hover{background:var(--pri);border-color:var(--pri);color:#fff}
.call-btn{background:var(--ok)!important;border-color:var(--ok)!important;color:#fff!important;padding:.625rem 1.5rem!important}
.call-btn:hover{opacity:.9}
.hangup-btn{background:var(--err)!important;border-color:var(--err)!important;color:#fff!important;padding:.625rem 1.5rem!important}
.hangup-btn:hover{opacity:.9}

/* Voice-Chat */
.vc-status{text-align:center;padding:.5rem;border-radius:var(--r);font-weight:600;margin-bottom:.75rem}
.vc-idle{color:var(--txm)}
.vc-listening{color:var(--err);animation:vc-pulse 1s infinite}
.vc-processing{color:var(--warn)}
.vc-speaking{color:var(--ok)}
.vc-error{color:var(--err)}
.vc-offline{color:var(--txd)}
@keyframes vc-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.vc-messages{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding:.5rem;background:var(--bgs);border-radius:var(--r);min-height:100px}
.chat-bubble{max-width:80%;padding:.5rem .75rem;border-radius:var(--r);font-size:.875rem;line-height:1.4;word-wrap:break-word}
.cb-user{align-self:flex-end;background:var(--pri);color:#fff;border-bottom-right-radius:2px}
.cb-bot{align-self:flex-start;background:var(--bg3);color:var(--tx);border-bottom-left-radius:2px}
.voice-btn{width:80px;height:80px;border-radius:50%;background:var(--pri);border:3px solid var(--pri);color:#fff;font-size:.75rem;font-weight:700;cursor:pointer;transition:all var(--t);user-select:none;-webkit-user-select:none}
.voice-btn:hover{background:var(--prih);border-color:var(--prih)}
.voice-btn.recording{background:var(--err);border-color:var(--err);animation:vc-pulse 1s infinite}
.voice-btn:disabled{opacity:.4;cursor:not-allowed;animation:none}
.sp-subtab{}
.mb-s{margin-bottom:.5rem}

/* SIP SOFTPHONE */
.sip-status{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:var(--r);margin-bottom:1rem;font-size:.875rem;font-weight:500}
.sip-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.sip-status-offline{background:var(--bgs);color:var(--txd)}.sip-status-offline .sip-dot{background:var(--txd)}
.sip-status-online{background:#05966920;color:#059669}.sip-status-online .sip-dot{background:#059669}
.sip-status-call{background:#3b82f620;color:#3b82f6}.sip-status-call .sip-dot{background:#3b82f6;animation:vc-pulse 1.5s infinite}
.sip-status-incoming{background:#f59e0b20;color:#f59e0b}.sip-status-incoming .sip-dot{background:#f59e0b;animation:vc-pulse .8s infinite}
.sip-status-hold{background:#8b5cf620;color:#8b5cf6}.sip-status-hold .sip-dot{background:#8b5cf6}
.sip-status-error{background:var(--errbg);color:var(--err)}.sip-status-error .sip-dot{background:var(--err)}

.sip-incoming-banner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#f59e0b15;border:1px solid #f59e0b40;border-radius:var(--r);margin-bottom:1rem;animation:vc-pulse 2s infinite}
.sip-incoming-info{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.sip-incoming-icon{font-size:1.25rem}
.sip-incoming-actions{display:flex;gap:.5rem}
.sip-accept-btn{background:#059669!important;color:#fff!important;border:none!important}
.sip-accept-btn:hover{background:#047857!important}
.sip-reject-btn{background:var(--err)!important;color:#fff!important;border:none!important}
.sip-reject-btn:hover{background:#dc2626!important}

.sip-call-controls{display:flex;gap:.5rem;justify-content:center;margin-top:.75rem}
.sip-ctrl-btn{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;padding:.375rem .75rem;border-radius:var(--r);background:var(--bgs);border:1px solid var(--brd);color:var(--tx);cursor:pointer;transition:all var(--t)}
.sip-ctrl-btn:hover{background:var(--pri);color:#fff;border-color:var(--pri)}
.sip-ctrl-btn.active{background:var(--pri);color:#fff;border-color:var(--pri)}

/* QUEUE GRID + STATUS */
.queue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.25rem;vertical-align:middle}
.sd-available{background:var(--ok)}.sd-oncall{background:var(--pri)}.sd-paused{background:var(--warn)}.sd-wrapup{background:var(--pur)}.sd-loggedoff{background:var(--txd)}.sd-ringing{background:#f59e0b;animation:pulse-live 1s infinite}
.badge{display:inline-block;padding:.1rem .4rem;border-radius:4px;background:var(--card);border:1px solid var(--border);font-size:.75rem}

/* NUMBER INPUT */
input[type="number"]{width:100%;padding:.625rem .875rem;background:var(--bgi);border:1px solid var(--bdr);border-radius:var(--r);color:var(--tx);font-size:.875rem;outline:none;transition:border var(--t)}
input[type="number"]:focus{border-color:var(--pri)}

/* PLAN CARDS (Billing) */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.plan-card{background:var(--bg2);border:2px solid var(--bdr);border-radius:var(--r);padding:1.5rem;text-align:center;transition:border var(--t),transform var(--t)}
.plan-card:hover{transform:translateY(-2px);border-color:var(--pri)}
.plan-card.featured{border-color:var(--pri);position:relative}
.plan-card.featured::before{content:'Beliebt';position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);background:var(--pri);color:#fff;padding:.15rem .75rem;border-radius:1rem;font-size:.7rem;font-weight:600}
.plan-card.active-plan{border-color:var(--ok);background:rgba(34,197,94,.08)}
.plan-card h3{font-size:1.1rem;margin-bottom:.5rem}
.plan-price{font-size:2rem;font-weight:700;color:var(--pri);margin:.5rem 0}
.plan-price span{font-size:.85rem;color:var(--txm);font-weight:400}
.plan-card ul{list-style:none;padding:0;margin:.75rem 0;text-align:left}
.plan-card li{padding:.25rem 0;font-size:.85rem;color:var(--txm)}
.plan-card li::before{content:'\2713 ';color:var(--ok);font-weight:700}
.btn-block{width:100%;margin-top:.75rem}

/* USAGE BARS */
.usage-grid{display:grid;gap:1rem}
.usage-bar{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-top:.35rem}
.usage-fill{height:100%;background:var(--pri);border-radius:4px;transition:width .5s ease}
.usage-fill.warning{background:var(--warn)}

/* TRANSCRIPT VIEW */
.transcript-view{max-height:500px;overflow-y:auto;padding:.5rem}
.transcript-bubble{padding:.6rem .9rem;border-radius:.75rem;margin-bottom:.5rem;max-width:85%;font-size:.85rem;line-height:1.4}
.transcript-bot{background:var(--bg3);border-bottom-left-radius:.15rem;margin-right:auto}
.transcript-human{background:rgba(59,130,246,.15);border-bottom-right-radius:.15rem;margin-left:auto}
.transcript-bubble strong{font-size:.75rem;color:var(--txm);display:block;margin-bottom:.2rem}

/* SENTIMENT */
.sentiment{font-size:.75rem;padding:.15rem .5rem;border-radius:1rem}
.sentiment.positive{background:rgba(34,197,94,.15);color:var(--ok)}
.sentiment.negative{background:rgba(239,68,68,.15);color:var(--err)}
.sentiment.neutral{background:rgba(148,163,184,.15);color:var(--txm)}

/* LIVE DOT */
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--txd);margin-right:.35rem}
.live-dot.active{background:var(--err);animation:pulse-live 1.5s infinite}
@keyframes pulse-live{0%,100%{opacity:1}50%{opacity:.3}}

/* CUSTOMER GRID */
.customer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}

/* ACD FLOW VISUALIZATION */
.acd-flow{display:flex;align-items:flex-start;gap:.5rem;padding:1.25rem;background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--rl);overflow-x:auto}
.acd-flow-step{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:100px;text-align:center}
.acd-flow-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.acd-flow-label{font-size:.875rem;font-weight:600}
.acd-flow-desc{font-size:.7rem;color:var(--txm)}
.acd-flow-arrow{font-size:1.25rem;color:var(--txd);padding-top:1rem;flex-shrink:0}
.acd-flow-branch{min-width:auto}
.acd-flow-targets{display:flex;flex-direction:column;gap:.375rem;margin-top:.25rem}
.acd-target{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r);font-size:.75rem;cursor:default;transition:all var(--t);white-space:nowrap}
.acd-target:hover{border-color:var(--pri);background:rgba(59,130,246,.08)}
.acd-target-icon{font-size:1rem;flex-shrink:0}
.acd-target-ai{border-left:3px solid var(--pri)}
.acd-target-ring{border-left:3px solid var(--warn)}
.acd-target-human{border-left:3px solid var(--ok)}
.acd-target-time{border-left:3px solid var(--pur)}

/* ROUTING RULES */
.routing-rules{display:flex;flex-direction:column;gap:.75rem}
.routing-rule{padding:1rem;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r)}

/* TIME ROUTING */
.time-routing-grid{display:flex;flex-direction:column;gap:.75rem}
.time-routing-row{display:flex;align-items:center;gap:1rem;padding:.625rem .875rem;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r)}
.time-day-label{font-size:.8125rem;font-weight:500;min-width:160px;flex-shrink:0}
.time-routing-row input[type="time"]{padding:.375rem .5rem;font-size:.8125rem}

/* FLEX HELPERS */
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}

/* ZOOM CONTROLS */
.cf-zoom-controls{display:flex;align-items:center;gap:.375rem;margin-bottom:.5rem}
.cf-zoom-controls span{font-size:.8125rem;color:var(--txm);min-width:40px;text-align:center}

/* ACD QUEUE CARD STATUS BAR */
.acd-queue-card{position:relative;overflow:hidden}
.acd-queue-bar{position:absolute;top:0;left:0;right:0;height:3px}

/* AGENT MODAL WIDE */
.mc-wide{max-width:700px}

/* WISSENSFELD — Sektionen-Accordion */
.ws-section{border:1px solid var(--bdr);border-radius:6px;margin-bottom:.5rem;background:var(--bg2);overflow:hidden}
.ws-section.ws-filled{border-left:3px solid var(--ok)}
.ws-section-header{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;cursor:pointer;user-select:none;background:var(--bg3);transition:background .15s}
.ws-section-header:hover{background:var(--bgi)}
.ws-arrow{font-size:.7rem;color:var(--txm);transition:transform .2s;display:inline-block}
.ws-section.ws-open .ws-arrow{transform:rotate(90deg)}
.ws-title{flex:1;font-weight:600;font-size:.9rem;color:var(--tx)}
.ws-badge{font-size:.8rem;color:var(--ok)}
.ws-section-actions{display:flex;gap:.25rem}
.ws-section-body{display:none;padding:.75rem}
.ws-section.ws-open .ws-section-body{display:block}
.ws-section-body textarea{width:100%;min-height:80px;resize:vertical;background:var(--bgi);border:1px solid var(--bdr);border-radius:4px;color:var(--tx);padding:.5rem;font-family:inherit;font-size:.85rem;line-height:1.5}
.ws-section-body textarea::placeholder{color:var(--txd);white-space:pre-line}
.ws-section-body textarea:focus{border-color:var(--pri);outline:none}

/* Voice Grid */
.voice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem;margin-top:.25rem}
.voice-card{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.6rem .5rem;border:2px solid var(--bdr);border-radius:8px;cursor:pointer;transition:all .15s;background:var(--bg2);user-select:none}
.voice-card:hover{border-color:var(--pri);background:var(--bgi)}
.voice-card.voice-active{border-color:var(--pri);background:rgba(99,102,241,.12);box-shadow:0 0 0 2px rgba(99,102,241,.25)}
.voice-card .vc-icon{font-size:1.4rem}
.voice-card .vc-name{font-size:.78rem;font-weight:600;color:var(--tx);text-align:center;line-height:1.2}
.voice-card .vc-info{font-size:.65rem;color:var(--txm);text-align:center}
.voice-card .vc-play{margin-top:.25rem;padding:.15rem .5rem;font-size:.7rem;border-radius:4px;background:var(--bg3);color:var(--tx);border:1px solid var(--bdr);cursor:pointer;transition:all .15s}
.voice-card .vc-play:hover{background:var(--pri);color:#fff;border-color:var(--pri)}
.voice-card.voice-active .vc-name{color:var(--pri)}

/* ACD SEKTIONEN */
.acd-section{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1.25rem}
.acd-section-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:.75rem;border-bottom:1px solid var(--border);margin-bottom:.75rem}
.acd-section-header h3{font-size:1.0625rem;font-weight:600;margin:0}

/* SKILLGRUPPEN */
.sg-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.shift-grid{display:flex;flex-direction:column;gap:.25rem}
.shift-grid .fg-row{align-items:center}
.shift-grid label{font-size:.8125rem;font-weight:600;min-width:40px}

/* AGENTEN-ARBEITSPLATZ */
.agent-statusbar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--rl);margin-bottom:1rem;gap:1rem;flex-wrap:wrap}
.agent-statusbar-left{display:flex;align-items:center;gap:.75rem}
.agent-statusbar-right{display:flex;align-items:center;gap:1.5rem}
.agent-avail-select{width:auto;font-size:.8125rem;padding:.375rem .75rem;background:var(--bgi);border:1px solid var(--bdr);border-radius:var(--r);color:var(--tx)}
.agent-stat{display:flex;flex-direction:column;align-items:center;gap:.1rem}
.agent-stat-val{font-size:1.125rem;font-weight:700}
.agent-stat-lbl{font-size:.65rem;color:var(--txm);text-transform:uppercase;letter-spacing:.03em}

/* Eingehender Anruf Banner */
.ap-incoming{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:rgba(245,158,11,.08);border:2px solid rgba(245,158,11,.4);border-radius:var(--rl);margin-bottom:1rem;animation:ap-pulse 2s infinite}
@keyframes ap-pulse{0%,100%{border-color:rgba(245,158,11,.4)}50%{border-color:rgba(245,158,11,.8)}}
.ap-incoming-pulse{width:12px;height:12px;border-radius:50%;background:#f59e0b;animation:pulse-live 1s infinite;flex-shrink:0}
.ap-incoming-info{display:flex;align-items:center;gap:.75rem;flex:1}
.ap-incoming-icon{font-size:1.5rem}
.ap-incoming-title{font-weight:600;font-size:.9375rem}
.ap-incoming-caller{font-size:1.125rem;font-weight:700;color:var(--tx)}
.ap-incoming-from{font-size:.75rem;color:var(--txm)}
.ap-incoming-actions{display:flex;gap:.5rem}

/* Arbeitsplatz Grid */
.ap-workspace{display:grid;grid-template-columns:1fr 320px;gap:1rem;min-height:calc(100vh - 220px)}
.ap-call-panel{display:flex;flex-direction:column}
.ap-sidebar-panel{display:flex;flex-direction:column;gap:.75rem}

/* Idle State: Dialer */
.ap-idle-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:1.5rem}
.ap-dialer{width:100%;max-width:300px;text-align:center}
.ap-dial-input{text-align:center;font-size:1.5rem;font-weight:600;letter-spacing:.05em;padding:.75rem;margin-bottom:1rem;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r);color:var(--tx);width:100%}
.ap-dial-input:focus{border-color:var(--pri);outline:none}
.ap-dialpad{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem}
.ap-dialpad .dial-btn{position:relative;padding:.75rem .5rem;display:flex;flex-direction:column;align-items:center;line-height:1}
.ap-dialpad .dial-btn span{font-size:.5rem;color:var(--txd);letter-spacing:.1em;margin-top:.1rem}
.ap-dial-actions{display:flex;gap:.5rem;justify-content:center;margin-bottom:.75rem}
.ap-dial-actions .call-btn,.ap-dial-actions .hangup-btn{min-width:140px;padding:.75rem 1.5rem;font-size:1rem}
.ap-dial-hint{font-size:.75rem;margin-top:.5rem}

/* Aktiver Anruf */
#ap-active{flex-direction:column;flex:1;min-height:0}

/* Anruf Header */
.ap-call-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--bdr);gap:1rem;flex-wrap:wrap}
.ap-call-caller{font-size:1.25rem;font-weight:700}
.ap-call-meta{display:flex;gap:.75rem;font-size:.75rem;color:var(--txm);margin-top:.25rem;flex-wrap:wrap}
.ap-call-timer{font-family:monospace;font-size:.875rem;font-weight:700;color:var(--pri);background:rgba(59,130,246,.1);padding:.15rem .5rem;border-radius:4px}

/* Call Controls Bar */
.ap-controls-bar{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.75rem 1rem;background:var(--bgs);border-bottom:1px solid var(--bdr)}
.ap-ctrl-btn{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.5rem .75rem;background:none;border:1px solid transparent;border-radius:var(--r);color:var(--txm);cursor:pointer;transition:all var(--t);min-width:64px}
.ap-ctrl-btn:hover{background:var(--bg3);color:var(--tx);border-color:var(--bdr)}
.ap-ctrl-btn.active{background:rgba(59,130,246,.15);color:var(--pri);border-color:var(--pri)}
.ap-ctrl-icon{font-size:1.25rem}
.ap-ctrl-label{font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em}
.ap-ctrl-hangup{color:var(--err)}
.ap-ctrl-hangup:hover{background:rgba(239,68,68,.15);color:var(--err);border-color:var(--err)}

/* DTMF Pad im Anruf */
.ap-dtmf-pad{padding:.75rem 1rem;border-bottom:1px solid var(--bdr);display:flex;justify-content:center}
.ap-dialpad-sm{max-width:200px;gap:.375rem}
.ap-dialpad-sm .dial-btn{padding:.5rem;font-size:.9rem}

/* Transkript Bereich */
.ap-transcript{flex:1;display:flex;flex-direction:column;min-height:0}
.ap-transcript-label{padding:.5rem 1.25rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--txd);border-bottom:1px solid rgba(51,65,85,.3)}
.ap-transcript-msgs{flex:1;overflow-y:auto;padding:.75rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;max-height:calc(100vh - 450px);min-height:200px}
.transcript-agent{background:rgba(34,197,94,.1);border-bottom-left-radius:.15rem;margin-right:auto}

/* Agent Eingabe */
.ap-agent-input{padding:.75rem 1.25rem;border-top:1px solid var(--bdr)}

/* Queue Items */
.ap-queue-item{padding:.5rem 0;border-bottom:1px solid rgba(51,65,85,.3)}
.ap-queue-item:last-child{border-bottom:none}
.ap-queue-caller{font-size:.8125rem;font-weight:600}
.ap-queue-meta{font-size:.7rem;color:var(--txm);margin-top:.125rem}

/* Letzte Anrufe */
.ap-recent-item{padding:.5rem 0;border-bottom:1px solid rgba(51,65,85,.3)}
.ap-recent-item:last-child{border-bottom:none}
.ap-recent-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.ap-recent-num{font-size:.8125rem;font-weight:500}
.ap-recent-status{font-size:.65rem;padding:.1rem .4rem;border-radius:4px}
.st-ok{background:rgba(34,197,94,.15);color:var(--ok)}
.st-err{background:rgba(239,68,68,.15);color:var(--err)}
.st-pri{background:rgba(59,130,246,.15);color:var(--pri)}
.ap-recent-meta{font-size:.7rem;color:var(--txm);margin-top:.125rem}

/* AP IDLE STATE */
.ap-idle{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:3rem 1.5rem;text-align:center}
.ap-idle-icon{font-size:3rem;margin-bottom:.75rem;opacity:.4}
.ap-idle-text{font-size:1.125rem;font-weight:600;margin-bottom:.25rem}
.ap-idle-sub{font-size:.8125rem;color:var(--txm)}

/* SUPERVISOR ACTIONS */
.ap-super-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.ap-super-actions .btn{flex:1;min-width:0;justify-content:center}

/* IVR CARDS */
.ivr-card{margin-bottom:.75rem}
.ivr-option-row{padding:.5rem 0;border-bottom:1px solid rgba(51,65,85,.3)}
.ivr-option-row:last-child{border-bottom:none}
.ivr-option-row .fg-row{align-items:flex-end;gap:.5rem}
.ivr-option-row input,.ivr-option-row select{font-size:.8125rem}

/* ACD QUEUE BAR */
.acd-queue-card{position:relative;overflow:hidden}
.acd-queue-bar{position:absolute;top:0;left:0;right:0;height:3px}

/* AGENT AVAILABILITY SELECT */
.agent-avail-select{padding:.35rem .5rem;font-size:.8125rem;background:var(--bgi);border:1px solid var(--bdr);border-radius:var(--r);color:var(--tx)}
.agent-stat{text-align:center}
.agent-stat-val{font-size:1rem;font-weight:700;display:block}
.agent-stat-lbl{font-size:.65rem;color:var(--txm);text-transform:uppercase;letter-spacing:.03em}

/* IVR Tree */
.ivr-tree{margin-top:.5rem;border:1px solid var(--bdr);border-radius:8px;overflow:hidden}
.ivr-tree-root{background:var(--primary);color:#fff;padding:.375rem .75rem;font-weight:600;font-size:.8125rem}
.ivr-tree-branches{padding:.25rem}
.ivr-tree-branch{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-bottom:1px solid var(--bdr);font-size:.8125rem}
.ivr-tree-branch:last-child{border-bottom:none}
.ivr-tree-key{background:var(--primary);color:#fff;width:1.5rem;height:1.5rem;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;flex-shrink:0}
.ivr-tree-label{flex:1;color:var(--tx)}
.ivr-tree-action{color:var(--txm);font-size:.75rem}
/* Reject badge */
.ev-reject{background:rgba(239,68,68,.15);color:#ef4444}

/* RESPONSIVE */
@media(max-width:1024px){.grid2{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}.fg-row{flex-direction:column}.plan-grid{grid-template-columns:1fr}.dash-live-tables{grid-template-columns:1fr}.ap-workspace{grid-template-columns:1fr}}
@media(max-width:768px){.sidebar{width:var(--swc)}.sidebar .ni-l,.sidebar .ns,.sidebar .sb-title,.sidebar .sb-user,.sidebar .badge{display:none}.main{margin-left:var(--swc);padding:1rem}.agent-grid{grid-template-columns:1fr}}