:root{
  --bg1:#eef3ff;
  --bg2:#e7efff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --muted2:#94a3b8;
  --border:rgba(15,23,42,.10);
  --primary:#4f46e5;
  --primary2:#7c3aed;
  --shadow: 0 18px 60px rgba(15,23,42,.10);
}

/* Always respect hidden attribute */
[hidden]{display:none !important;}

/* App view layout */
.appRoot{width:100%; max-width:none;}

/* When in app mode, remove the big login padding */
body.isApp #pageRoot{
  width:100%;
  max-width:none;
  padding:16px;
  display:block;
}

/* Also disable the login page centering grid in app mode */
body.isApp .page{
  display:block;
  min-height:auto;
  padding:16px;
}

.topbar{
  width:100%;
  display:grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items:center;
  column-gap:14px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}

.appBrand{display:flex; align-items:center; gap:10px; min-width:0}
.appBrandLogo{
  width: 132px;
  height: 30px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  padding: 0;
  border: 0;
}
.appBrandName{
  font-weight:900;
  letter-spacing:-.02em;
  font-size:18px;
  line-height:1.1;
  color: rgba(15,23,42,.96);
}
.appBrandSub{
  margin-top:2px;
  font-size:12px;
  color:rgba(15,23,42,.55);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 34vw;
}

.appActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  padding:6px;
  border-radius:999px;
  background: rgba(255,255,255,.60);
  border:1px solid rgba(15,23,42,.08);
}
.appActions{justify-self:end;}

.phoneStatus{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,1) 100%);
  box-shadow: 0 10px 22px rgba(15,23,42,.05);
  font-weight:950;
  font-size:13px;
  color: rgba(15,23,42,.78);
}
.mediaBadge{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,1) 100%);
  box-shadow: 0 10px 22px rgba(15,23,42,.05);
  font-weight:900;
  font-size:12px;
  color:rgba(15,23,42,.78);
  line-height:1;
  white-space:nowrap;
}
.mediaBadge.isOk{
  border-color: rgba(16,185,129,.28);
  color:#065f46;
  background: linear-gradient(135deg, rgba(16,185,129,.14) 0%, rgba(16,185,129,.08) 62%, rgba(255,255,255,1) 100%);
}
.mediaBadge.isWarn{
  border-color: rgba(245,158,11,.30);
  color:#92400e;
  background: linear-gradient(135deg, rgba(245,158,11,.16) 0%, rgba(251,191,36,.10) 62%, rgba(255,255,255,1) 100%);
}
.mediaBadge.isBad{
  border-color: rgba(239,68,68,.30);
  color:#991b1b;
  background: linear-gradient(135deg, rgba(239,68,68,.15) 0%, rgba(244,63,94,.10) 62%, rgba(255,255,255,1) 100%);
}
.mediaBadge.isIdle{
  border-color: rgba(15,23,42,.10);
  color:rgba(15,23,42,.70);
}
.phoneDot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#9ca3af;
  box-shadow: 0 0 0 6px rgba(156,163,175,.14);
}
.phoneStatus.isOnline .phoneDot{
  background:#10b981;
  box-shadow: 0 0 0 6px rgba(16,185,129,.14);
}
.phoneStatus.isConnecting .phoneDot{
  background:#f59e0b;
  box-shadow: 0 0 0 6px rgba(245,158,11,.14);
  animation: dotPulse 1.0s ease-in-out infinite;
}
.phoneStatus.isOffline .phoneDot{
  background:#ef4444;
  box-shadow: 0 0 0 6px rgba(239,68,68,.14);
}
@keyframes dotPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.18)}
  100%{transform:scale(1)}
}
.chip--soft{
  border-color: rgba(79,70,229,.18);
  background: linear-gradient(135deg, rgba(79,70,229,.10) 0%, rgba(124,58,237,.06) 55%, rgba(255,255,255,1) 100%);
  color:#3730a3;
}

/* Colorful metric pills */
.metrics{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px;
  border-radius:999px;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.08);
  color:rgba(15,23,42,.70);
  font-size:12px;
}
.metric{
  display:flex;
  gap:6px;
  white-space:nowrap;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,1) 100%);
  box-shadow: 0 10px 22px rgba(15,23,42,.05);
}
.metric:nth-child(1){background: linear-gradient(135deg, rgba(59,130,246,.14) 0%, rgba(99,102,241,.10) 70%, rgba(255,255,255,1) 100%);}
.metric:nth-child(2){background: linear-gradient(135deg, rgba(16,185,129,.14) 0%, rgba(34,197,94,.10) 70%, rgba(255,255,255,1) 100%);}
.metric:nth-child(3){background: linear-gradient(135deg, rgba(245,158,11,.16) 0%, rgba(251,191,36,.10) 70%, rgba(255,255,255,1) 100%);}
.metric:nth-child(4){background: linear-gradient(135deg, rgba(124,58,237,.14) 0%, rgba(167,139,250,.10) 70%, rgba(255,255,255,1) 100%);}
.metricKey{color:rgba(15,23,42,.50); font-weight:900}
.metricVal{color:rgba(15,23,42,.80); font-weight:980}

.chip{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,1) 100%);
  cursor:pointer; font-weight:950; font-size:13px;
  box-shadow: 0 10px 22px rgba(15,23,42,.05);
}
.chipState{font-size:12px; color:rgba(15,23,42,.55)}
.chip.isOn{
  border-color: rgba(239,68,68,.26);
  background: linear-gradient(135deg, rgba(239,68,68,.14) 0%, rgba(244,63,94,.10) 60%, rgba(255,255,255,1) 100%);
}

.switch{display:flex; align-items:center; gap:8px; user-select:none; cursor:pointer; font-size:13px; color:rgba(15,23,42,.65); padding:6px 10px; border-radius:999px; border:1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.72)}
.switch input{position:absolute; opacity:0; width:1px; height:1px}
.slider{width:40px; height:22px; border-radius:999px; background:rgba(15,23,42,.14); position:relative; display:inline-block; flex:0 0 auto; border:1px solid rgba(15,23,42,.08)}
.slider::after{content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:999px; background:#fff; box-shadow:0 4px 10px rgba(15,23,42,.18); transition: transform .18s ease}
.switch input:checked + .slider{background: linear-gradient(135deg, rgba(16,185,129,.65) 0%, rgba(34,197,94,.55) 60%, rgba(99,102,241,.35) 100%); border-color: rgba(16,185,129,.25)}
.switch input:checked + .slider::after{transform:translateX(18px)}
.switchLabel{font-weight:700}

.selectWrap{display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.72); box-shadow: 0 10px 22px rgba(15,23,42,.05)}
.presenceDot{width:8px; height:8px; border-radius:999px; background:#10b981}
.presence{border:none; outline:none; background:transparent; font-weight:900; font-size:13px; color:rgba(15,23,42,.78); cursor:pointer}

.iconBtn{width:38px; height:38px; border-radius:14px; border:1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.80); display:grid; place-items:center; cursor:pointer; box-shadow: 0 10px 22px rgba(15,23,42,.05)}
.iconBtn svg{width:18px; height:18px; color:rgba(15,23,42,.65)}

.logoutBtn{border:1px solid rgba(239,68,68,.30); background: rgba(239,68,68,.06); color:#b91c1c; border-radius:14px; padding:8px 12px; font-weight:950; cursor:pointer}

.layout{margin-top:14px; display:grid; grid-template-columns: 320px 1fr minmax(300px, 380px) minmax(300px, 360px); gap:14px; align-items:start}
.queuePanel{align-self:stretch}
.queueHead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px}
.queueHead .panelTitle{
  font-size:15px;
  font-weight:950;
  letter-spacing:-.02em;
  margin:0;
  color:rgba(15,23,42,.92);
}
.queueBadge{
  min-width:26px; height:26px; padding:0 8px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:950;
  background: linear-gradient(135deg, rgba(79,70,229,.18) 0%, rgba(124,58,237,.14) 55%, rgba(255,255,255,.95) 100%);
  border:1px solid rgba(79,70,229,.28);
  color:#3730a3;
}
.queueList{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:min(520px, 62vh);
  overflow:auto;
  padding:2px 4px 6px 2px;
}
.queueList::-webkit-scrollbar{width:8px}
.queueList::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(79,70,229,.45), rgba(124,58,237,.30));
  border-radius:999px;
}
.queueEmpty{
  margin:10px 2px 0;
  font-size:13px;
  color:rgba(15,23,42,.48);
  line-height:1.45;
}

/* Queue — compact row, caller details readable */
.queueCard.queueCard--compact{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
  padding:9px 10px 9px 8px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.98) 100%);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 20px rgba(79,70,229,.07);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.queueCard.queueCard--compact:hover{
  border-color: rgba(79,70,229,.22);
  box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 12px 26px rgba(79,70,229,.11);
}
.queueCardMedia{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:11px;
  display:grid;
  place-items:center;
  margin-top:2px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 72%, #a855f7 100%);
  box-shadow: 0 4px 12px rgba(79,70,229,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.queueCardInitial{
  font-weight:950;
  font-size:16px;
  color:#fff;
  line-height:1;
  text-shadow: 0 1px 2px rgba(15,23,42,.25);
}
.queueCardBody{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  line-height:1.3;
}
.queueCardTopBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:1px;
}
.queueCardKicker{
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(15,23,42,.45);
}
.queueCardWaitBadge{
  flex-shrink:0;
  font-size:10px;
  font-weight:850;
  letter-spacing:.02em;
  padding:3px 8px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(79,70,229,.11) 0%, rgba(124,58,237,.08) 100%);
  color:rgba(67,56,163,.95);
  border:1px solid rgba(79,70,229,.2);
  font-variant-numeric: tabular-nums;
}
.queueCardTitle{
  font-size:14px;
  font-weight:950;
  color:rgba(15,23,42,.96);
  line-height:1.35;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  word-break:break-word;
}
.queueCardNumber{
  font-size:12px;
  font-weight:750;
  color:rgba(51,65,85,.98);
  font-variant-numeric: tabular-nums;
  line-height:1.4;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.queueCardNumber--note{
  font-size:11px;
  font-weight:650;
  font-style:italic;
  color:rgba(100,116,139,.88);
}
.queueCardActions{
  flex:0 0 auto;
  display:flex;
  flex-direction:row;
  align-items:center;
  align-self:center;
  gap:6px;
}
.queueCardBtn{
  border:none;
  border-radius:8px;
  padding:6px 10px;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  line-height:1.2;
  white-space:nowrap;
  transition: transform .08s ease, filter .08s ease;
}
.queueCardBtn:active{transform: scale(.97)}
.queueCardBtn--decline{
  color:#fff;
  background: linear-gradient(180deg, #f43f5e 0%, #e11d48 100%);
  box-shadow: 0 2px 8px rgba(225,29,72,.28);
}
.queueCardBtn--accept{
  color:#fff;
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 2px 8px rgba(22,163,74,.28);
}
.queueCardBtn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 4px rgba(79,70,229,.45);
}
.queueCardBtn--decline:focus-visible{box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 4px rgba(244,63,94,.45)}
.queueCardBtn--accept:focus-visible{box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 4px rgba(34,197,94,.45)}

@media (max-width: 360px){
  .queueCard.queueCard--compact{
    flex-wrap:wrap;
  }
  .queueCardActions{
    width:100%;
    justify-content:flex-end;
    padding-top:2px;
  }
}

@media (prefers-reduced-motion: reduce){
  .queueCard.queueCard--compact{transition:none}
  .queueCardBtn{transition:none}
}

.panel{background:rgba(255,255,255,.84); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); backdrop-filter: blur(10px); padding:14px}
.panelTitle{font-weight:950; font-size:14px; margin-bottom:10px}

.dialInput{width:100%; height:44px; border-radius:12px; border:1px solid rgba(15,23,42,.14); padding:0 12px; outline:none; background:#fff}
.dialInput:focus{border-color: rgba(79,70,229,.45); box-shadow:0 0 0 3px rgba(79,70,229,.16)}

.pad{margin-top:10px; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.key{border:1px solid rgba(15,23,42,.10); background:#fff; border-radius:14px; padding:10px 8px; cursor:pointer}
.kMain{font-weight:950; font-size:18px; line-height:18px; color:var(--primary)}
.kSub{margin-top:4px; font-size:10px; color:rgba(15,23,42,.55); letter-spacing:.08em; font-weight:800}

.callBtn{margin-top:12px; width:100%; height:44px; border:none; border-radius:14px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary2) 100%); color:#fff; font-weight:950; cursor:pointer}

.activeTop{border-radius:16px; padding:18px; text-align:center; color:#fff;
  background: linear-gradient(90deg, #2563eb 0%, #4f46e5 55%, #7c3aed 100%);
}
.avatar{width:56px; height:56px; border-radius:999px; margin:0 auto 10px; background:rgba(255,255,255,.92); color:#111827; display:grid; place-items:center; font-weight:950}
.activeName{font-weight:950; font-size:18px}
.activeSub{margin-top:6px; font-size:13px; opacity:.9}
.activeTimer{margin-top:10px; font-size:13px; font-weight:950; letter-spacing:.06em; opacity:.95}

.audioIndicators{margin-top:10px; display:flex; align-items:center; justify-content:center; gap:10px}
.audInd{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.10) 100%);
  border:1px solid rgba(255,255,255,.26);
  box-shadow: 0 18px 38px rgba(15,23,42,.16);
  backdrop-filter: blur(10px);
}
.audIcon{
  width:28px; height:28px;
  border-radius:999px;
  display:grid; place-items:center;
  color: rgba(255,255,255,.88);
  background:
    radial-gradient(80% 80% at 30% 30%, rgba(255,255,255,.40) 0%, rgba(255,255,255,.12) 45%, rgba(255,255,255,.08) 100%),
    linear-gradient(135deg, rgba(79,70,229,.55) 0%, rgba(124,58,237,.40) 55%, rgba(16,185,129,.28) 100%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 16px 30px rgba(79,70,229,.18);
}
.audIcon svg{width:16px; height:16px}
.audTxt{font-size:12px; font-weight:980; letter-spacing:.04em; text-transform:uppercase; opacity:.92}
.audPct{font-size:11px; font-weight:980; opacity:.92; min-width:34px; text-align:right}
.audBar{
  width:90px; height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
  position:relative;
  border:1px solid rgba(255,255,255,.16);
}
.audFill{
  display:block;
  height:100%;
  width:100%;
  transform-origin:left;
  transform:scaleX(var(--lvl,0));
  background:linear-gradient(90deg, rgba(52,211,153,.95) 0%, rgba(99,102,241,.92) 50%, rgba(167,139,250,.92) 100%);
  filter:saturate(1.1) brightness(1.02);
}
.audInd.isOn .audIcon{
  box-shadow: 0 18px 34px rgba(79,70,229,.20), 0 0 0 6px rgba(52,211,153,.12);
}
.audInd.isMuted .audIcon{
  background:
    radial-gradient(80% 80% at 30% 30%, rgba(255,255,255,.38) 0%, rgba(255,255,255,.10) 45%, rgba(255,255,255,.08) 100%),
    linear-gradient(135deg, rgba(239,68,68,.55) 0%, rgba(244,63,94,.38) 60%, rgba(255,255,255,.08) 100%);
  box-shadow: 0 18px 34px rgba(239,68,68,.18), 0 0 0 6px rgba(252,165,165,.10);
}
.audInd.isOn.isActive .audIcon{animation: audGlow 1.0s ease-in-out infinite}
.audInd.isMuted .audFill{background:linear-gradient(90deg, rgba(252,165,165,.85) 0%, rgba(248,113,113,.88) 100%)}
@keyframes audPulse{
  0%{transform:scale(1); filter:brightness(1)}
  50%{transform:scale(1.12); filter:brightness(1.1)}
  100%{transform:scale(1); filter:brightness(1)}
}
@keyframes audGlow{
  0%{filter:brightness(1); transform:translateY(0)}
  50%{filter:brightness(1.1); transform:translateY(-.5px)}
  100%{filter:brightness(1); transform:translateY(0)}
}

/* DTMF keypad overlay */
.dtmf{position:fixed; inset:0; display:grid; place-items:end center; padding:18px; z-index:85; pointer-events:none}
.dtmfCard{width:min(360px, calc(100% - 28px)); border-radius:18px; overflow:hidden; border:1px solid rgba(15,23,42,.16); box-shadow:0 26px 70px rgba(15,23,42,.32); background:rgba(255,255,255,.92); backdrop-filter: blur(10px); pointer-events:auto}
.dtmfHead{display:flex; align-items:center; justify-content:space-between; padding:12px 12px; border-bottom:1px solid rgba(15,23,42,.10)}
.dtmfTitle{font-weight:980}
.dtmfHeadActions{display:flex; align-items:center; gap:10px}
.dtmfClose{width:36px; height:36px; border-radius:14px; border:1px solid rgba(15,23,42,.12); background:#fff; cursor:pointer; font-weight:980}
.dtmfDetach{
  height:36px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(79,70,229,.22);
  background: linear-gradient(135deg, rgba(79,70,229,.12) 0%, rgba(124,58,237,.08) 60%, rgba(255,255,255,1) 100%);
  color:rgba(55,48,163,.92);
  font-weight:950;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.dtmfDetach:active{transform: translateY(1px)}
.dtmfDisplay{
  margin:12px 12px 0;
  padding:10px 12px;
  min-height:42px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background: linear-gradient(135deg, rgba(79,70,229,.10) 0%, rgba(124,58,237,.08) 45%, rgba(16,185,129,.06) 100%);
  font-weight:980;
  letter-spacing:.12em;
  font-size:14px;
  color:rgba(15,23,42,.82);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.dtmfKeys{padding:12px; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.dtmfKey{height:48px; border-radius:16px; border:1px solid rgba(15,23,42,.10); background:#fff; font-weight:980; font-size:16px; cursor:pointer; transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease, background .08s ease}
.dtmfKey:active{transform: translateY(1px)}
.dtmfKey.isPressed{
  border-color: rgba(79,70,229,.26);
  background: linear-gradient(135deg, rgba(79,70,229,.12) 0%, rgba(124,58,237,.08) 55%, rgba(255,255,255,1) 100%);
  box-shadow: 0 14px 30px rgba(79,70,229,.16);
}
.dtmfHint{padding:0 12px 12px; font-size:12px; color:rgba(15,23,42,.55); font-weight:800}

.controls{margin-top:12px; display:grid; grid-template-columns: repeat(3, 1fr); gap:10px}
.ctl{
  height:44px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,1) 100%);
  font-weight:950;
  cursor:pointer;
  color: rgba(15,23,42,.80);
  box-shadow: 0 10px 22px rgba(15,23,42,.05);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}
.ctl:hover{transform: translateY(-1px); border-color: rgba(79,70,229,.18); box-shadow: 0 16px 30px rgba(15,23,42,.08)}
.ctl:active{transform: translateY(0px)}
.ctl.isOn{
  color:#fff;
  border-color: rgba(79,70,229,.22);
  background: linear-gradient(135deg, rgba(79,70,229,1) 0%, rgba(124,58,237,1) 55%, rgba(167,139,250,1) 100%);
  box-shadow: 0 18px 34px rgba(79,70,229,.25);
}
.ctl.isDanger{
  color:#fff;
  border-color: rgba(239,68,68,.24);
  background: linear-gradient(135deg, rgba(239,68,68,1) 0%, rgba(244,63,94,1) 55%, rgba(251,113,133,1) 100%);
  box-shadow: 0 18px 34px rgba(239,68,68,.18);
}
.ctl:disabled{opacity:.55; cursor:not-allowed}
.endBtn{margin-top:12px; width:100%; height:44px; border:none; border-radius:14px; background:#ef4444; color:#fff; font-weight:950; cursor:pointer}
.endBtn:disabled{opacity:.55; cursor:not-allowed}

.history{
  position:relative;
  overflow:visible;
}
.history::before{
  content:'';
  position:absolute;
  inset:-40px -20px auto -20px;
  height:120px;
  background: radial-gradient(60% 120% at 25% 30%, rgba(79,70,229,.14) 0%, rgba(124,58,237,.08) 45%, rgba(255,255,255,0) 100%);
  pointer-events:none;
  z-index:0;
}
.historyHead{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  position:relative;
  z-index:1;
  margin-bottom:2px;
}
.historyHead .panelTitle{
  margin:0;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight:950;
  color:rgba(15,23,42,.92);
}
.tabs{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  align-items:center;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 6px 0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.tabs::-webkit-scrollbar{height:5px}
.tabs::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg, rgba(79,70,229,.35), rgba(124,58,237,.28));
  border-radius:999px;
}
.tab{
  flex:0 0 auto;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.96);
  border-radius:999px;
  padding:7px 14px;
  font-size:12px;
  cursor:pointer;
  font-weight:900;
  color:rgba(15,23,42,.72);
  box-shadow: 0 4px 12px rgba(15,23,42,.06);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
  text-align:center;
  line-height:1.25;
  white-space:nowrap;
}
.tab:hover{
  border-color: rgba(79,70,229,.2);
  box-shadow: 0 6px 16px rgba(79,70,229,.1);
}
.tab.isActive{
  color:#fff;
  border-color: rgba(79,70,229,.25);
  background: linear-gradient(135deg, rgba(79,70,229,1) 0%, rgba(124,58,237,1) 55%, rgba(167,139,250,1) 100%);
  box-shadow: 0 18px 34px rgba(79,70,229,.22);
}
.tab:focus{outline:none; box-shadow:0 0 0 4px rgba(79,70,229,.16), 0 10px 22px rgba(15,23,42,.05)}
.historyList{
  position:relative;
  z-index:1;
  margin-top:8px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  max-height:min(440px, 58vh);
  overflow-x:hidden;
  overflow-y:auto;
  padding:4px 6px 8px 4px;
}
.historyList::-webkit-scrollbar{width:8px}
.historyList::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(79,70,229,.35), rgba(124,58,237,.28));
  border-radius:999px;
}
.histRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-shrink:0;
  min-height:min-content;
  padding:10px 10px 10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.1);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,1) 100%);
  cursor:pointer;
  position:relative;
  overflow:visible;
  box-shadow: 0 2px 8px rgba(15,23,42,.06);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.histRow::before{
  content:'';
  position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:999px;
  background: linear-gradient(180deg, rgba(79,70,229,1) 0%, rgba(124,58,237,1) 55%, rgba(16,185,129,1) 100%);
  opacity:.75;
}
.histRow:hover{
  border-color: rgba(79,70,229,.22);
  box-shadow: 0 8px 22px rgba(15,23,42,.1);
}
.histLeft{
  min-width:0;
  flex:1 1 auto;
  padding-left:6px;
}
.histRight{
  flex:0 0 auto;
  align-self:flex-start;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  gap:4px;
  min-width:100px;
  max-width:46%;
}
.histName{
  font-weight:900;
  font-size:14px;
  line-height:1.25;
  letter-spacing:-.01em;
  color: rgba(15,23,42,.95);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.histSub{
  color:rgba(15,23,42,.52);
  font-size:11px;
  line-height:1.3;
  margin-top:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.histTime{
  color:rgba(15,23,42,.48);
  font-size:10px;
  font-weight:750;
  line-height:1.2;
  white-space:nowrap;
}
.histStatus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,1) 100%);
  box-shadow: 0 4px 10px rgba(15,23,42,.04);
  font-size:10px;
  font-weight:850;
  color:rgba(15,23,42,.72);
  line-height:1;
  white-space:nowrap;
}
.histDur{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(79,70,229,.22);
  background: linear-gradient(135deg, rgba(79,70,229,.12) 0%, rgba(124,58,237,.08) 60%, rgba(255,255,255,1) 100%);
  box-shadow: 0 4px 10px rgba(15,23,42,.05);
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  color:rgba(55,48,163,.92); /* indigo-800-ish */
  line-height:1;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
}

.histMetaRow{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px 6px;
  width:100%;
  flex-wrap:wrap;
  row-gap:4px;
}
.histEmpty{color:rgba(15,23,42,.55); font-size:12px; padding:8px}

@media (max-width: 540px){
  .tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:8px;
  }
  .tab{padding:6px 12px; font-size:11px}
  .historyHead .panelTitle{font-size:15px}
  .tab{font-size:11px; padding:6px 8px}
  .histName{font-size:13px}
  .histSub{font-size:11px}
  .histTime{font-size:10px}
  .histRight{min-width: 132px}
}

/* Call waiting (second incoming while on a call) */
.callWaitingBar{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  width:min(560px, calc(100% - 24px));
  z-index:85;
  pointer-events:none; /* let the call UI remain tappable; buttons enable pointer-events */
}

.callWaitingInner{
  pointer-events:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(79,70,229,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.86) 100%);
  box-shadow: 0 18px 55px rgba(15,23,42,.12);
  backdrop-filter: blur(10px);
  position:relative;
  overflow:hidden;
  animation: callWaitingIn .20s ease-out both;
}

.callWaitingInner::before{
  content:'';
  position:absolute;
  left:-2px;
  top:-1px;
  bottom:-1px;
  width:4px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(79,70,229,1) 0%, rgba(124,58,237,1) 55%, rgba(16,185,129,1) 100%);
  opacity:.85;
  pointer-events:none;
}

.callWaitingInner::after{
  content:'';
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(circle at 10% 50%, rgba(124,58,237,.24), transparent 58%),
    radial-gradient(circle at 90% 15%, rgba(16,185,129,.14), transparent 52%);
  opacity:.15;
  animation: callWaitingBreath 2.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes callWaitingIn{
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes callWaitingBreath{
  0%,100%{ opacity:.08; }
  50%{ opacity:.55; }
}

.callWaitingAvatar{
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background: linear-gradient(180deg, rgba(79,70,229,.14) 0%, rgba(124,58,237,.06) 100%);
  border:1px solid rgba(79,70,229,.18);
  box-shadow: 0 10px 24px rgba(79,70,229,.10);
  position:relative;
  z-index:1;
}
.callWaitingAvatar span{
  font-weight:950;
  font-size:16px;
  color:#0f172a;
}

.callWaitingText{
  flex:1 1 auto;
  min-width:0;
  position:relative;
  z-index:1;
}
.callWaitingLabel{
  font-size:11px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(79,70,229,.90);
}
.callWaitingLine{
  margin-top:3px;
  font-size:14px;
  font-weight:900;
  color:rgba(15,23,42,.96);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:44vw;
}

.callWaitingActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  position:relative;
  z-index:1;
}

.callWaitingBtn{
  border-radius:12px;
  padding:10px 14px;
  font-weight:950;
  font-size:12px;
  cursor:pointer;
  border:1px solid rgba(15,23,42,.12);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  user-select:none;
}

.callWaitingBtnText{ display:inline-block; }
.callWaitingBtnX{
  font-size:14px;
  line-height:1;
  opacity:.75;
  transform: translateY(-1px);
}

.callWaitingBtn:focus-visible{
  outline: 3px solid rgba(79,70,229,.30);
  outline-offset: 2px;
}

.callWaitingBtn--ignore{
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,1) 100%);
  color: rgba(71,85,105,.95);
}
.callWaitingBtn--ignore:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
  border-color: rgba(79,70,229,.22);
}
.callWaitingBtn--ignore:active{
  transform: translateY(0);
}

.callWaitingBtn--answer{
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color:#fff;
  border-color: rgba(22,163,74,.35);
  box-shadow: 0 14px 34px rgba(22,163,74,.20);
}
.callWaitingBtn--answer:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 45px rgba(22,163,74,.25);
}
.callWaitingBtn--answer:active{
  transform: translateY(0);
}

@media (max-width: 600px){
  .callWaitingBar{ bottom:10px; width:calc(100% - 16px); }
  .callWaitingInner{ flex-wrap:wrap; justify-content:center; text-align:center; }
  .callWaitingText{ width:100%; text-align:center; }
  .callWaitingLine{ max-width:100%; }
  .callWaitingActions{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .callWaitingInner{ animation:none; }
  .callWaitingInner::after{ animation:none; }
}

/* Incoming popup */
.incoming{position:fixed; inset:0; display:grid; place-items:center; background:rgba(15,23,42,.35); backdrop-filter: blur(6px); z-index:80}
.incomingCard{width:min(420px, calc(100% - 28px)); border-radius:14px; overflow:hidden; border:1px solid rgba(15,23,42,.14); box-shadow:0 28px 80px rgba(15,23,42,.35); background:#fff}
.incomingTop{padding:22px 18px 18px; text-align:center; color:#fff; background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 60%, #a21caf 100%);} 
.incomingAvatar{width:64px; height:64px; border-radius:999px; margin:0 auto 10px; background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:0 14px 34px rgba(0,0,0,.18);} 
.incomingAvatar span{font-weight:950; font-size:22px; color:#111827}
.incomingHeading{font-weight:900; font-size:15px; opacity:.98}
.incomingName{margin-top:6px; font-weight:950; font-size:18px; letter-spacing:-.01em}
.incomingNumber{margin-top:4px; font-size:13px; opacity:.92}
.incomingBottom{padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:14px; background:#fff}
.incomingBtn{border:none; border-radius:12px; padding:14px 12px; cursor:pointer; font-weight:950; color:#fff; min-height:64px}
.incomingBtn--decline{background:#ef233c}
.incomingBtn--accept{background:#16a34a}

@media (max-width: 1100px){
  .layout{grid-template-columns: 340px 1fr;}
  .queuePanel{grid-column: 1 / -1;}
  .history{grid-column: 1 / -1;}
}
@media (max-width: 820px){
  body.isApp #pageRoot{padding:10px}
  body.isApp .page{padding:10px}
  .topbar{
    grid-template-columns: 1fr;
    row-gap:8px;
    padding:10px;
    border-radius:14px;
  }
  .appBrand{gap:8px}
  .appBrandLogo{width:116px; height:28px}
  .appBrandName{font-size:16px}
  .appBrandSub{max-width: 82vw; font-size:11px}
  .appActions{
    justify-self:stretch;
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    padding:6px;
    border-radius:14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .appActions > *{flex:0 0 auto}
  .appActions::-webkit-scrollbar{height:6px}
  .appActions::-webkit-scrollbar-thumb{
    background: linear-gradient(90deg, rgba(79,70,229,.35), rgba(124,58,237,.30));
    border-radius:999px;
  }
  .phoneStatus,
  .mediaBadge,
  .chip,
  .switch,
  .selectWrap{
    min-height:38px;
  }
  .layout{
    margin-top:10px;
    grid-template-columns: 1fr;
    gap:10px;
  }
  .active{order:1}
  .queuePanel{order:2}
  .dialer{order:3}
  .history{order:4}
  .panel{
    border-radius:14px;
    padding:12px;
  }
  .history{grid-column:auto}
  .switchLabel{display:none}
  .metrics{display:none}
}

/* On phones we hide topbar switch labels to save space, but inside Settings we must show them. */
@media (max-width: 820px){
  .modal .switchLabel{display:inline !important;}
}

@media (max-width: 600px){
  :root{
    --shadow: 0 10px 24px rgba(15,23,42,.08);
  }
  .topbar{
    position: sticky;
    top: 8px;
    z-index: 30;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
  }
  .appActions{
    justify-self:stretch;
    width:100%;
    flex-wrap:wrap;
    overflow:visible;
    gap:8px;
    background: rgba(248,250,252,.9);
  }
  .phoneStatus,
  .mediaBadge,
  .chip,
  .logoutBtn{
    min-height:36px;
    padding:7px 10px;
    font-size:12px;
  }
  .iconBtn{
    width:36px;
    height:36px;
    border-radius:10px;
  }
  /* Keep only essential controls visible on phones */
  #dndBtn,
  .switch,
  .selectWrap{
    display:none !important;
  }
  .historyHead{
    gap:8px;
    margin-bottom:0;
  }
  .historyHead .panelTitle{
    font-size:15px;
    line-height:1.2;
  }
  .tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:6px;
    padding-bottom:6px;
  }
  .tab{
    flex:0 0 auto;
    font-size:11px;
    padding:6px 12px;
  }
  .historyList{
    gap:6px;
    max-height:320px;
  }
  .histRow{
    border-radius:11px;
    padding:8px 10px;
    gap:8px;
  }
  .histName{
    font-size:13px;
  }
  .histSub{
    font-size:11px;
    margin-top:1px;
  }
  .histTime{
    font-size:10px;
  }
  .dialInput{
    height:48px;
    border-radius:12px;
    font-size:16px; /* avoid iOS zoom */
  }
  .pad{
    gap:8px;
  }
  .key{
    min-height:56px;
    border-radius:12px;
    padding:8px 6px;
  }
  .kMain{font-size:22px; line-height:1}
  .kSub{font-size:10px}
  .callBtn{
    height:50px;
    border-radius:12px;
    font-size:16px;
  }
  .controls{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  .ctl{
    height:48px;
    border-radius:12px;
    font-size:14px;
  }
  .endBtn{
    height:52px;
    border-radius:12px;
    font-size:16px;
  }
  .activeTop{
    padding:14px 12px;
    border-radius:14px;
  }
  .avatar{
    width:50px;
    height:50px;
    margin-bottom:8px;
  }
  .activeName{font-size:16px}
  .activeSub{font-size:12px}
  .audioIndicators{
    flex-wrap:wrap;
    gap:8px;
  }
  .audInd{
    width:100%;
    justify-content:space-between;
  }
  .audBar{width:40vw; max-width:140px}
  .incoming{
    align-items:end;
    padding:10px;
    background:rgba(15,23,42,.42);
  }
  .incomingCard{
    width:100%;
    border-radius:16px 16px 12px 12px;
  }
  .incomingBottom{
    gap:10px;
    padding:12px;
  }
  .incomingBtn{
    min-height:56px;
    border-radius:12px;
  }
  .modal{
    align-items:end;
    padding:10px;
  }
  .modalCard{
    width:100%;
    max-height:94vh;
    border-radius:16px 16px 12px 12px;
  }
  .modalBody{
    max-height:none;
    overflow:auto;
  }
  .modalFoot{
    background:#fff;
    flex-wrap:wrap;
  }
  .modalBtns{
    width:100%;
    justify-content:flex-end;
  }
}

/* Media permission error modal */
.mediaErrorHead{
  background: radial-gradient(120% 120% at 0% 0%, rgba(239,68,68,.65) 0%, rgba(124,58,237,.12) 60%, rgba(255,255,255,.0) 70%),
              linear-gradient(135deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.70) 60%, rgba(15,23,42,.55) 100%);
}
.mediaErrorTitle{
  font-weight:980;
  font-size:15px;
  color:#fff;
  letter-spacing:-.01em;
}
.mediaErrorSub{
  margin-top:4px;
  font-size:12px;
  color:rgba(255,255,255,.82);
  font-weight:700;
}
.mediaErrorMessage{
  font-size:14px;
  font-weight:950;
  color:#991b1b;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.22);
  border-radius:16px;
  padding:12px 12px;
  line-height:1.35;
  white-space:pre-wrap;
}
.mediaErrorModal .modalCard{
  max-width: 680px;
}

/* Settings modal */
.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(15,23,42,.35);
  backdrop-filter: blur(6px);
  z-index:90;
  padding:12px;
}
.modalCard{
  width:min(760px, calc(100% - 24px));
  max-height:min(94vh, 920px);
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.14);
  box-shadow:0 32px 90px rgba(15,23,42,.28);
  overflow:hidden;
}
.modalHead{display:flex; align-items:flex-start; justify-content:space-between; padding:16px 16px; border-bottom:1px solid rgba(255,255,255,.18);
  background: radial-gradient(120% 120% at 0% 0%, rgba(79,70,229,.55) 0%, rgba(124,58,237,.35) 35%, rgba(255,255,255,.0) 70%),
              linear-gradient(135deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.70) 60%, rgba(15,23,42,.55) 100%);
  color:#fff;
}
.modalTitle{font-weight:980; letter-spacing:-.02em; font-size:16px}
.modalSub{margin-top:4px; font-size:12px; color:rgba(255,255,255,.78); font-weight:700}
.modalClose{width:38px; height:38px; border-radius:14px; border:1px solid rgba(15,23,42,.12); background:#fff; cursor:pointer; font-weight:950}
.modalBody{
  padding:14px;
  display:grid;
  gap:10px;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  background: linear-gradient(180deg, rgba(248,250,252,1) 0%, rgba(255,255,255,1) 55%, rgba(248,250,252,1) 100%);
}
.sectionTitle{margin-top:6px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(15,23,42,.42); font-weight:950}
.kv{display:grid; grid-template-columns: 180px 1fr; gap:10px; align-items:center; padding:12px; border:1px solid rgba(15,23,42,.08); border-radius:16px; background:#fff; box-shadow: 0 10px 28px rgba(15,23,42,.05)}
.k{color:rgba(15,23,42,.55); font-weight:950; font-size:12px}
.v{color:rgba(15,23,42,.80); font-weight:900; font-size:13px; overflow-wrap:anywhere}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;}
.miniBtn{height:40px; padding:0 12px; border-radius:14px; border:1px solid rgba(15,23,42,.12); background:#fff; font-weight:950; cursor:pointer}
.diagActions{display:flex; gap:8px; flex-wrap:wrap}
.diagPanel{
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  background:#fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.05);
  padding:12px;
  display:grid;
  gap:10px;
}
.diagGrid{display:grid; gap:8px}
.diagItem{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; font-weight:900; color:rgba(15,23,42,.72)}
.diagPill{
  border-radius:999px;
  padding:4px 10px;
  font-size:11px;
  font-weight:950;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:rgba(15,23,42,.68);
}
.diagPill.isOk{
  border-color: rgba(16,185,129,.26);
  background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(16,185,129,.08));
  color:#065f46;
}
.diagPill.isWarn{
  border-color: rgba(245,158,11,.28);
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(251,191,36,.08));
  color:#92400e;
}
.diagPill.isBad{
  border-color: rgba(239,68,68,.30);
  background: linear-gradient(135deg, rgba(239,68,68,.15), rgba(244,63,94,.08));
  color:#991b1b;
}
.diagPill.isIdle{
  border-color: rgba(15,23,42,.12);
  background:#fff;
  color:rgba(15,23,42,.62);
}
.diagMeterWrap{display:grid; gap:6px}
.diagMeterLabel{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(15,23,42,.46); font-weight:950}
.diagMeter{
  height:10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(241,245,249,1), rgba(255,255,255,1));
  overflow:hidden;
}
.diagMeterFill{
  width:0%;
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, #22c55e 0%, #14b8a6 45%, #4f46e5 100%);
  transition: width .12s linear;
}
.diagLog{
  border-radius:12px;
  border:1px dashed rgba(15,23,42,.14);
  background: rgba(248,250,252,.8);
  padding:10px;
  min-height:76px;
  max-height:140px;
  overflow:auto;
  white-space:pre-wrap;
  font-size:12px;
  line-height:1.4;
  color:rgba(15,23,42,.72);
  font-weight:700;
}
.sel{width:100%; height:40px; border-radius:14px; border:1px solid rgba(15,23,42,.12); background:#fff; font-weight:900; padding:0 10px; outline:none}
.sel:focus{border-color: rgba(79,70,229,.45); box-shadow:0 0 0 3px rgba(79,70,229,.14)}
.modalFoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-top:1px solid rgba(15,23,42,.08);
  background:#fff;
  flex:0 0 auto;
}
.modalHint{font-size:12px; color:rgba(15,23,42,.55); font-weight:800}
.modalBtns{display:flex; gap:10px; align-items:center}
.ghostBtn{height:40px; padding:0 14px; border-radius:14px; border:1px solid rgba(15,23,42,.12); background:#fff; font-weight:950; cursor:pointer}
.primaryBtn{height:40px; padding:0 16px; border-radius:14px; border:none; background: linear-gradient(135deg, var(--primary) 0%, var(--primary2) 100%); color:#fff; font-weight:980; cursor:pointer; box-shadow: 0 14px 30px rgba(79,70,229,.22)}
.primaryBtn:disabled{opacity:.6; cursor:not-allowed; box-shadow:none}

@media (max-width: 420px){
  .kv{grid-template-columns: 1fr;}
  .modal{
    align-items:end;
    padding:8px;
  }
  .modalCard{
    width:100%;
    max-height:94vh;
    border-radius:16px 16px 12px 12px;
  }
  .modalHead{padding:12px 12px}
  .modalBody{padding:10px}
  .modalFoot{
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:10px;
  }
  .modalBtns{
    width:100%;
    justify-content:flex-end;
  }
}

/* Mobile-first "real phone" experience (desktop unaffected) */
@media (max-width: 600px){
  body.isApp{
    background:
      radial-gradient(140% 90% at 0% -10%, rgba(79,70,229,.14) 0%, transparent 55%),
      radial-gradient(120% 80% at 100% 0%, rgba(16,185,129,.10) 0%, transparent 52%),
      linear-gradient(180deg, #eef2ff 0%, #f8fafc 42%, #eef2ff 100%);
  }

  body.isApp #pageRoot{
    padding:8px;
  }

  body.isApp .page{
    padding:8px;
  }

  .topbar{
    border-radius:18px;
    border:1px solid rgba(79,70,229,.16);
    box-shadow: 0 14px 34px rgba(15,23,42,.10);
    padding:10px;
  }

  .appBrand{
    justify-content:space-between;
    width:100%;
  }

  .appBrandSub{
    max-width:56vw;
    font-size:10px;
    font-weight:800;
  }

  .appActions{
    border-radius:14px;
    padding:6px;
    border-color: rgba(79,70,229,.14);
  }

  .phoneStatus{
    flex:1 1 auto;
    justify-content:center;
    min-width:126px;
    border-radius:12px;
    font-size:12px;
    padding:7px 10px;
  }

  .mediaBadge{
    border-radius:12px;
    font-size:11px;
    font-weight:950;
  }

  .layout{
    gap:10px;
    margin-top:8px;
  }

  .panel{
    border-radius:18px;
    border:1px solid rgba(79,70,229,.14);
    box-shadow: 0 14px 34px rgba(15,23,42,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  }

  .panelTitle{
    font-size:16px;
    letter-spacing:-.01em;
  }

  .dialInput{
    height:52px;
    border-radius:14px;
    font-size:17px;
    font-weight:900;
    border-color: rgba(79,70,229,.20);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
  }

  .pad{
    gap:10px;
  }

  .key{
    min-height:60px;
    border-radius:16px;
    border:1px solid rgba(79,70,229,.16);
    box-shadow: 0 8px 20px rgba(79,70,229,.08);
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,.96));
  }

  .key:active{
    transform: scale(.98);
  }

  .kMain{
    font-size:24px;
    font-weight:980;
  }

  .kSub{
    font-size:10px;
    letter-spacing:.08em;
    font-weight:900;
  }

  .callBtn{
    height:56px;
    border-radius:16px;
    font-size:18px;
    font-weight:980;
    box-shadow: 0 14px 32px rgba(79,70,229,.24);
  }

  .activeTop{
    border-radius:16px;
    padding:16px 14px;
    background:
      radial-gradient(130% 120% at 0% 0%, rgba(79,70,229,.82) 0%, rgba(124,58,237,.74) 36%, rgba(30,41,59,.92) 100%);
  }

  .avatar{
    width:56px;
    height:56px;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.26);
  }

  .activeName{
    font-size:17px;
    font-weight:980;
  }

  .activeSub{
    font-size:12px;
    opacity:.92;
  }

  .activeTimer{
    font-size:14px;
    letter-spacing:.08em;
  }

  .controls{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:9px;
  }

  .ctl{
    min-height:52px;
    border-radius:14px;
    font-weight:950;
    font-size:14px;
    border-color: rgba(79,70,229,.15);
  }

  .endBtn{
    height:58px;
    border-radius:16px;
    font-size:18px;
    font-weight:980;
    box-shadow: 0 14px 30px rgba(239,68,68,.22);
  }

  .historyList{
    max-height:300px;
  }

  .histRow{
    border-radius:14px;
  }

  .incoming{
    align-items:end;
    padding:8px;
    background: rgba(15,23,42,.48);
  }

  .incomingCard{
    width:100%;
    border-radius:18px 18px 12px 12px;
    border-color: rgba(79,70,229,.18);
    box-shadow: 0 26px 60px rgba(2,6,23,.45);
  }

  .incomingTop{
    padding:20px 14px 14px;
  }

  .incomingAvatar{
    width:66px;
    height:66px;
  }

  .incomingName{
    font-size:20px;
  }

  .incomingBottom{
    gap:10px;
    padding:12px;
  }

  .incomingBtn{
    min-height:58px;
    border-radius:14px;
    font-size:16px;
    font-weight:980;
  }

  .callWaitingBar{
    width:calc(100% - 12px);
    bottom:8px;
  }

  .callWaitingInner{
    border-radius:16px;
    padding:10px;
  }

  .callWaitingBtn{
    min-height:42px;
    border-radius:12px;
    font-size:13px;
    font-weight:980;
  }
}