.voice-call-dialog[hidden] { display: none !important; }
.voice-call-dialog {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(5, 13, 24, .7);
}
.voice-call-card {
  width: min(100%, 430px);
  max-height: min(90vh, 760px);
  overflow: auto;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.voice-call-card header { display: flex; align-items: center; justify-content: space-between; }
.voice-call-card header button { display:grid; place-items:center; width:2.4rem; height:2.4rem; border:1px solid var(--line); border-radius:50%; background:var(--bg-soft); color:inherit; font-size:1.5rem; cursor:pointer; }
.voice-call-card label { display: grid; gap: .3rem; margin: .65rem 0; }
.voice-call-card input { width: 100%; padding: .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
.voice-call-notice { color: var(--muted); }
.voice-call-keypad { display: grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap: .65rem; margin: 1rem 0; }
.voice-key { min-height:3.2rem; border: 1px solid var(--line); border-radius: 14px; padding: .8rem; background: var(--bg-soft); color: var(--ink); font: inherit; font-weight:700; cursor: pointer; transition:transform .15s,border-color .15s; }
.voice-key:hover { transform:translateY(-2px); border-color:#168a68; }
.voice-call-controls { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }
.voice-call-controls button { display:grid; place-items:center; width:3.5rem; height:3.5rem; border:0; border-radius:50%; background:var(--bg-soft); color:var(--ink); cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.voice-call-controls .voice-call-hangup { background:#c43d48; color:#fff; transform:rotate(135deg); }
.voice-call-controls .voice-icon-button.is-muted { background:#e5a64b; color:#fff; }
.voice-call-controls svg { width:1.45rem; height:1.45rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.voice-call-mini[hidden] { display:none !important; }
.voice-call-mini { position:fixed; z-index:14001; inset-inline-start:1rem; bottom:1rem; display:flex; align-items:center; gap:.7rem; max-width:min(22rem,calc(100vw - 2rem)); padding:.75rem 1rem; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:#172235; color:#fff; box-shadow:0 12px 32px rgba(0,0,0,.35); font:inherit; cursor:pointer; }
.voice-call-mini-controls { display:flex; gap:.65rem; align-items:center; padding-inline-start:.6rem; border-inline-start:1px solid rgba(255,255,255,.22); font-size:.78rem; color:#b9c7da; }
.voice-call-mini-pulse { width:.6rem; height:.6rem; flex:none; border-radius:50%; background:#42cf91; box-shadow:0 0 0 5px rgba(66,207,145,.17); animation:voice-pulse 1.5s infinite; }
@keyframes voice-pulse { 50% { box-shadow:0 0 0 9px rgba(66,207,145,0); } }
.voice-agent-toast[hidden] { display:none !important; }
.voice-agent-toast { position:fixed; z-index:13999; inset-inline-end:1rem; top:1rem; width:min(24rem,calc(100vw - 2rem)); padding:.85rem; border:1px solid var(--line); border-radius:16px; background:var(--bg-elev); color:var(--ink); box-shadow:0 16px 48px rgba(0,0,0,.24); }
.voice-agent-toast-head { display:flex; align-items:center; gap:.55rem; }
.voice-agent-toast-head strong { flex:1; }
.voice-agent-toast-head button { width:2rem; height:2rem; border:0; border-radius:50%; background:var(--bg-soft); color:inherit; font-size:1.2rem; cursor:pointer; }
.voice-agent-live-dot { width:.65rem; height:.65rem; border-radius:50%; background:#db4a56; box-shadow:0 0 0 5px rgba(219,74,86,.15); animation:voice-pulse 1.2s infinite; }
.voice-agent-enable { position:fixed; z-index:13998; inset-inline-end:1rem; bottom:1rem; display:flex; align-items:center; gap:.5rem; padding:.65rem .9rem; border:1px solid var(--line); border-radius:999px; background:var(--bg-elev); color:var(--ink); box-shadow:0 8px 26px rgba(0,0,0,.18); font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; }
.voice-agent-enable[hidden] { display:none !important; }
.voice-agent-enable.is-enabled { border-color:rgba(22,138,104,.45); color:#117454; }
.voice-agent-incoming { display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:.7rem; padding:.7rem; border:1px solid var(--line); border-radius:12px; }
.voice-agent-incoming span { min-width:0; font-size:.85rem; }
.voice-agent-answer { flex:none; border:0; border-radius:999px; padding:.55rem .9rem; background:#168a68; color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.voice-agent-toast-actions { display:flex; justify-content:center; gap:.75rem; margin-top:.65rem; }
.voice-agent-icon { width:2.8rem; height:2.8rem; border:0; border-radius:50%; background:var(--bg-soft); color:var(--ink); font-size:1.15rem; cursor:pointer; }
.voice-agent-icon.is-muted, .voice-agent-icon.is-held { background:#e5a64b; color:#fff; }
.voice-agent-icon.is-end { background:#c43d48; color:#fff; transform:rotate(135deg); }
.voice-call-hangup { background: #c43d48; color: white; }
.voice-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 1rem; }
.voice-admin-card { padding: 1rem; margin: 1rem 0; }
.voice-admin-card h2 { margin-top: 0; font-size: 1.15rem; }
.voice-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 1.2rem; padding:1.25rem 1.4rem; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg,var(--bg-elev),var(--bg-soft)); }
.voice-panel-heading h1 { margin:.15rem 0; font-size:clamp(1.35rem,3vw,1.8rem); }
.voice-panel-heading p, .voice-card-heading p { margin:.2rem 0 0; color:var(--muted); font-size:.88rem; }
.voice-panel-eyebrow { color:#168a68; font-size:.78rem; font-weight:800; }
.voice-panel-state { flex:none; padding:.45rem .8rem; border-radius:999px; background:var(--bg-soft); color:var(--muted); font-size:.82rem; font-weight:700; }
.voice-panel-state.is-ready { background:rgba(22,138,104,.12); color:#117454; }
.voice-panel-alert { display:grid; gap:.25rem; margin:1rem 0; padding:.9rem 1rem; border:1px solid #e5a64b; border-radius:12px; background:rgba(245,158,11,.1); color:var(--ink); }
.voice-panel-alert span { color:var(--muted); font-size:.9rem; }
.voice-card-heading { display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.voice-card-heading h2 { margin:0; }
.voice-card-icon { display:grid; place-items:center; flex:none; width:2.5rem; height:2.5rem; border-radius:12px; background:rgba(22,138,104,.12); color:#168a68; font-size:1.25rem; }
.voice-queue-heading #voiceAgentStatus { margin-inline-start:auto; color:var(--muted); font-size:.85rem; }
.voice-admin-card form > label, .voice-admin-row label { display: grid; gap: .35rem; margin: .8rem 0; }
.voice-admin-card input:not([type=checkbox]), .voice-admin-card select { max-width: 100%; padding: .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; }
.voice-admin-card audio { display: block; width: min(100%, 400px); margin-top: .5rem; }
.voice-admin-check { display: flex !important; align-items: center; gap: .5rem; }
.voice-admin-row { display: grid; grid-template-columns: 100px 1fr; gap: .6rem; }
.voice-department-list { display: grid; gap: .5rem; margin-top: 1rem; }
.voice-department, .voice-queue-call { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .75rem; border: 1px solid var(--line); border-radius: 8px; }
.voice-department p { margin: .3rem 0; color: var(--muted); }
.voice-queue-call { margin: .5rem 0; }
.voice-queue-call button { flex: none; }
@media (max-width: 500px) {
  .voice-admin-row { grid-template-columns: 1fr; }
  .voice-queue-call { align-items: flex-start; flex-direction: column; }
  .voice-panel-heading { align-items:flex-start; flex-direction:column; padding:1rem; }
  .voice-queue-heading { flex-wrap:wrap; }
  .voice-queue-heading #voiceAgentStatus { margin-inline-start:0; width:100%; }
}
