:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg:#f7f8fa;--surface:#fff;--text:#1a1d23;--text-muted:#6b7280;--border:#0f172a14;--shadow:0 1px 2px #0f172a0a, 0 8px 24px -12px #0f172a2e;--radius:14px;--radius-sm:8px;--gap:.85rem;--transition:.18s ease;--accent:#4f46e5;--accent-soft:#4f46e51f;--green:#16a34a;--green-soft:#16a34a24;--amber:#d97706;--amber-soft:#d9770624;--red:#dc2626;--red-soft:#dc262624}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#0f1115;--surface:#171a21;--text:#e5e7eb;--text-muted:#9aa1ac;--border:#ffffff14;--shadow:0 1px 2px #0000004d, 0 12px 28px -14px #0009;--accent-soft:#818cf82e;--green-soft:#4ade8029;--amber-soft:#fbbf2429;--red-soft:#f8717129}}*{box-sizing:border-box}body{font-family:var(--font);background:var(--bg);color:var(--text);margin:0;padding:2rem clamp(1rem,4vw,3rem);line-height:1.5}.page-header{border-bottom:1px solid var(--border);flex-direction:row;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;padding-bottom:1rem;display:flex}.page-header h1{letter-spacing:-.01em;margin:0 0 .35rem;font-size:1.6rem}.page-header p{max-width:60ch;color:var(--text-muted);margin:0}.page-header code{background:var(--accent-soft);color:var(--accent);border-radius:4px;padding:.1rem .4rem;font-size:.9em}.repo-link{color:var(--accent);margin-top:.6rem;font-size:.8rem;text-decoration:none;display:inline-block}.repo-link:hover{text-decoration:underline}.setup,.webhook-setup{align-items:flex-end;gap:var(--gap);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);flex-wrap:wrap;margin:.75rem 0;padding:1rem 1.25rem;display:flex}.field{color:var(--text-muted);flex-direction:column;gap:.3rem;font-size:.8rem;display:flex}input,select,button{font:inherit;color:inherit}input,select{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);transition:border-color var(--transition), box-shadow var(--transition);padding:.5rem .7rem}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.webhook-setup .field{flex:1}.webhook-setup input{width:100%}.add-user-form{gap:var(--gap);display:flex}button{border-radius:var(--radius-sm);cursor:pointer;background:var(--accent);color:#fff;transition:transform var(--transition), box-shadow var(--transition), background var(--transition);border:none;padding:.5rem .9rem;font-weight:500}button:hover{box-shadow:0 4px 14px -4px var(--accent-soft);transform:translateY(-1px)}button:active{transform:translateY(0)}.sessions{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:1.25rem;display:grid}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:.85rem;padding:1.1rem 1.25rem;display:flex}.card-header{align-items:center;gap:.6rem;display:flex}.card-title-group{flex-direction:column;flex:1;gap:.15rem;min-width:0;display:flex}.card-header h2{align-items:center;gap:.4rem;margin:0;font-size:1.05rem;font-weight:600;display:flex}.presence-icon{flex-shrink:0;font-size:.7rem;line-height:1}.card-pbx-address{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:.75rem;overflow:hidden}.status-message{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:.8rem;overflow:hidden}.status-badge{text-transform:uppercase;letter-spacing:.04em;transition:background-color var(--transition), color var(--transition);border-radius:999px;padding:.2rem .7rem;font-size:.7rem;font-weight:600}.status-connecting,.status-reconnecting{background:var(--amber-soft);color:var(--amber)}.status-connected{background:var(--green-soft);color:var(--green)}.status-error{background:var(--red-soft);color:var(--red)}.remove-btn{color:var(--text-muted);border:1px solid var(--border);background:0 0;padding:.3rem .7rem;font-size:.8rem}.remove-btn:hover{color:var(--red);border-color:var(--red);box-shadow:none;transform:none}.error-banner{background:var(--red-soft);color:var(--red);border-radius:var(--radius-sm);padding:.55rem .8rem;font-size:.85rem}.error-banner:not([hidden]){justify-content:space-between;align-items:center;gap:.5rem;display:flex}.error-dismiss{color:inherit;opacity:.7;background:0 0;padding:0;font-size:1rem;line-height:1}.error-dismiss:hover{opacity:1;box-shadow:none;transform:none}.card>section,.card>form,.card>details{border-top:1px solid var(--border);padding-top:.75rem}.event-log-list{max-height:8rem;color:var(--text-muted);margin:.5rem 0 0;padding-left:1.1rem;font-size:.78rem;overflow-y:auto}summary{cursor:pointer;color:var(--text-muted);font-size:.85rem}.call-row{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);flex-direction:column;gap:.5rem;padding:.65rem .85rem;display:flex}.call-info{align-items:center;gap:.5rem;font-weight:600;display:flex}.call-state{color:var(--accent);background:var(--accent-soft);border-radius:999px;margin-left:auto;padding:.1rem .55rem;font-size:.75rem;font-weight:500}.call-actions{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.call-actions button{background:var(--surface);color:var(--text);border:1px solid var(--border);padding:.35rem .7rem;font-size:.8rem}.call-actions button:hover{border-color:var(--accent);color:var(--accent);box-shadow:none;transform:none}.call-actions input,.call-actions select{flex:6rem;min-width:0;padding:.35rem .6rem;font-size:.8rem}button:disabled,input:disabled,select:disabled{opacity:.4;cursor:not-allowed}.call-actions button:disabled:hover{border-color:var(--border);color:var(--text);box-shadow:none;transform:none}.make-call-form{gap:2rem;width:100%;display:flex}.make-call-form .make-call-device{flex:1;min-width:0}.make-call-form .make-call-destination-group{gap:.5rem;display:flex}.make-call-form .make-call-destination{width:8rem}.devices h3{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin:0 0 .4rem;font-size:.75rem}.devices-list{margin:0;padding-left:1.1rem;font-size:.85rem}.card{animation:.22s card-in}#webhook-url{width:100%}@keyframes card-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (width<=480px){.setup,.webhook-setup,.add-user-form{flex-direction:column;align-items:stretch;width:100%}.sessions{grid-template-columns:1fr}}
