@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE BOOTH — Premium Fintech Light Theme
   Inspired by PayPal · Clean · Trustworthy · Animated · Professional
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  --bg:            #f0f4ff;
  --card:          #ffffff;
  --card-border:   rgba(59,130,246,0.12);
  --card-glass:    rgba(255,255,255,0.88);

  --text:          #0f172a;
  --text-soft:     #1e3a5f;
  --muted:         #4b6080;
  --subtle:        #94a3b8;
  --divider:       rgba(148,163,184,0.22);

  --primary:       #2563eb;
  --primary-dark:  #1d4ed8;
  --primary-mid:   #3b82f6;
  --primary-light: rgba(37,99,235,0.08);

  --success:       #16a34a;
  --success-dark:  #15803d;
  --success-light: rgba(22,163,74,0.10);

  --danger:        #dc2626;
  --danger-dark:   #b91c1c;
  --danger-light:  rgba(220,38,38,0.10);

  --accent:        #0ea5e9;
  --accent-light:  rgba(14,165,233,0.10);

  --warning:       #d97706;
  --warning-dark:  #b45309;
  --warning-light: rgba(217,119,6,0.10);

  --purple:        #7c3aed;
  --purple-light:  rgba(124,58,237,0.08);

  --shadow-sm: 0 1px 4px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow:    0 4px 24px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.04);
  --shadow-lg: 0 20px 60px rgba(15,23,42,0.12), 0 8px 24px rgba(15,23,42,0.06);
  --shadow-blue:  0 8px 32px rgba(37,99,235,0.22);
  --shadow-green: 0 8px 32px rgba(22,163,74,0.35);
  --shadow-red:   0 8px 32px rgba(220,38,38,0.35);

  --radius:    22px;
  --radius-sm: 14px;
  --radius-xs: 8px;

  /* Mouse-parallax offsets – updated by JS */
  --px: 0px;
  --py: 0px;
}

/* ─── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes pb-entrance {
  from { opacity:0; transform: translateY(18px) scale(0.98); }
  to   { opacity:1; transform: translateY(0)    scale(1); }
}
@keyframes pb-status-pulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(22,163,74,.55); }
  60%     { box-shadow: 0 0 0 8px rgba(22,163,74,0);   }
}
@keyframes pb-spin { to { transform: rotate(360deg); } }
@keyframes pb-toast-in {
  from { opacity:0; transform: translateY(20px) scale(.93); }
  to   { opacity:1; transform: translateY(0)    scale(1);  }
}
@keyframes pb-toast-out {
  from { opacity:1; transform: translateY(0); }
  to   { opacity:0; transform: translateY(10px); }
}
@keyframes pb-log-new {
  from { background: rgba(37,99,235,.08); }
  to   { background: #f8faff; }
}
@keyframes pb-digit-added {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); color: var(--primary); }
  100% { transform: scale(1); color: var(--text); }
}
@keyframes pb-key-press {
  0%   { box-shadow: var(--shadow-sm); }
  40%  { box-shadow: 0 0 0 5px rgba(37,99,235,.20), var(--shadow); }
  100% { box-shadow: var(--shadow-sm); }
}
@keyframes pb-call-btn-pulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(22,163,74,.55), var(--shadow-green); }
  55%     { box-shadow: 0 0 0 16px rgba(22,163,74,0),  var(--shadow-green); }
}
@keyframes pb-call-ringing {
  0%,100% { box-shadow: 0 0 0 0   rgba(217,119,6,.30), var(--shadow); }
  50%     { box-shadow: 0 0 0 10px rgba(217,119,6,.08), var(--shadow); }
}
@keyframes pb-call-active {
  0%,100% { border-color: rgba(22,163,74,.20); }
  50%     { border-color: rgba(22,163,74,.50); }
}
@keyframes pb-modal-in {
  from { opacity:0; transform: translateY(24px) scale(.96); }
  to   { opacity:1; transform: translateY(0)    scale(1);   }
}

/* Background blob animations – embed parallax offsets */
@keyframes blob-1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(7vw,5vh)  scale(1.08); }
  66%     { transform: translate(-3vw,9vh) scale(0.94); }
}
@keyframes blob-2 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(-9vw,7vh)  scale(1.10); }
  72%     { transform: translate(-5vw,-4vh) scale(0.95); }
}
@keyframes blob-3 {
  0%,100% { transform: translate(0,0) scale(1); }
  30%     { transform: translate(5vw,-7vh)  scale(1.07); }
  65%     { transform: translate(-6vw,-3vh) scale(0.93); }
}
@keyframes blob-4 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(10vw,-6vh) scale(1.12); }
}
@keyframes blob-5 {
  0%,100% { transform: translate(0,0) scale(1); }
  35%     { transform: translate(-5vw,8vh) scale(0.90); }
  70%     { transform: translate(4vw,4vh)  scale(1.05); }
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
body,p,h1,h2 { margin:0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
button,input,select,textarea { font: inherit; }
button {
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:active:not(:disabled) { transform: translateY(1px) scale(.99); }
label {
  display: block;
  margin-bottom: .45rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATED BACKGROUND
   ═══════════════════════════════════════════════════════════════════════════ */
.bg-anim {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(140deg,
    #f0f4ff  0%,
    #e8f0fe 28%,
    #ede9fe 52%,
    #e0f2fe 72%,
    #f0fdf4 100%);
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  filter: blur(85px);
  opacity: .65;
}
.bg-blob-1 {
  width: 55vmax; height: 55vmax;
  background: radial-gradient(circle at center,
    rgba(59,130,246,.38) 0%, rgba(99,102,241,.20) 45%, transparent 70%);
  top: -20%; left: -14%;
  animation: blob-1 26s ease-in-out infinite;
}
.bg-blob-2 {
  width: 42vmax; height: 42vmax;
  background: radial-gradient(circle at center,
    rgba(167,139,250,.30) 0%, rgba(124,58,237,.15) 50%, transparent 70%);
  top: -12%; right: -12%;
  animation: blob-2 30s ease-in-out infinite;
}
.bg-blob-3 {
  width: 46vmax; height: 46vmax;
  background: radial-gradient(circle at center,
    rgba(14,165,233,.22) 0%, rgba(6,182,212,.12) 50%, transparent 70%);
  bottom: -15%; left: 24%;
  animation: blob-3 28s ease-in-out infinite;
}
.bg-blob-4 {
  width: 30vmax; height: 30vmax;
  background: radial-gradient(circle at center,
    rgba(22,163,74,.16) 0%, transparent 65%);
  top: 55%; left: -8%;
  animation: blob-4 34s ease-in-out infinite;
}
.bg-blob-5 {
  width: 28vmax; height: 28vmax;
  background: radial-gradient(circle at center,
    rgba(245,158,11,.13) 0%, transparent 65%);
  top: 8%; right: 18%;
  animation: blob-5 36s ease-in-out infinite;
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.app-shell {
  position: relative;
  z-index: 1;
  width: min(1200px,100%);
  margin: 0 auto;
  padding: clamp(.75rem,3vw,1.5rem);
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 1rem;
}

/* ─── Card ───────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-glass);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.90);
  padding: clamp(1rem,4vw,1.5rem);
  transition: box-shadow .3s ease, transform .3s ease;
}
.card:hover {
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.90);
}
.status-card  { animation: pb-entrance .45s cubic-bezier(.22,1,.36,1) .00s both; }
.dialer-card  { animation: pb-entrance .45s cubic-bezier(.22,1,.36,1) .06s both; }
.log-card     { animation: pb-entrance .45s cubic-bezier(.22,1,.36,1) .12s both; }
.history-card { animation: pb-entrance .45s cubic-bezier(.22,1,.36,1) .18s both; }
.device-card  { animation: pb-entrance .45s cubic-bezier(.22,1,.36,1) .22s both; }

/* ─── Headings ───────────────────────────────────────────────────────────── */
.brand-row,.section-heading,.log-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.eyebrow {
  color: var(--primary);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
h1 {
  margin-top: .2rem;
  font-size: clamp(2rem,8vw,3.4rem);
  line-height: .95;
  letter-spacing: -.04em;
  font-weight: 800;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 35%, #7c3aed 70%, #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
h2 {
  margin-top: .2rem;
  font-size: clamp(1.05rem,3.5vw,1.35rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}

/* ─── Status pill ────────────────────────────────────────────────────────── */
.status-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: .32rem .85rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 1px solid transparent;
  transition: all .2s ease;
}
.status-loading { color: var(--accent);   background: var(--accent-light);   border-color: rgba(14,165,233,.25); }
.status-ready   { color: var(--success);  background: var(--success-light);  border-color: rgba(22,163,74,.25); }
.status-ready::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  margin-right: 5px;
  vertical-align: middle;
  animation: pb-status-pulse 2s ease-in-out infinite;
}
.status-error,.status-offline { color: var(--danger);  background: var(--danger-light);  border-color: rgba(220,38,38,.25); }
.status-calling               { color: var(--warning); background: var(--warning-light); border-color: rgba(217,119,6,.25); }

/* ─── Client name strip ──────────────────────────────────────────────────── */
.client-name {
  margin-top: .9rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg,rgba(37,99,235,.06),rgba(124,58,237,.06));
  border: 1px solid rgba(37,99,235,.14);
  color: var(--text-soft);
  font-size: .875rem;
  line-height: 1.5;
  font-weight: 500;
}
.client-name strong { color: var(--primary-dark); font-weight: 700; }

/* ─── Wallet summary ─────────────────────────────────────────────────────── */
.wallet-summary {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .65rem;
  margin-top: .9rem;
}
.wallet-summary > div,.wallet-summary > button { min-height: 3.8rem; }
.wallet-summary button { grid-column: span 1; }
.wallet-summary > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg,#f8faff,#f0f4ff);
  padding: .7rem .9rem;
}
.wallet-summary .logout-action {
  color: var(--danger);
  border: 1.5px solid rgba(220,38,38,.25);
  background: var(--danger-light);
}
.wallet-label {
  color: var(--subtle);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
}
.wallet-summary strong {
  margin-top: .18rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
}

/* ─── Number entry ───────────────────────────────────────────────────────── */
#output-selection,#volume-indicators { display: none; }
.number-entry {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: .55rem;
  margin: 1rem 0 .85rem;
}
#phone-number {
  min-width: 0; width: 100%;
  min-height: 3.6rem;
  border: 2px solid rgba(37,99,235,.15);
  border-radius: var(--radius-sm);
  outline: none;
  color: var(--text);
  background: #ffffff;
  padding: 0 1.1rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .08em;
  caret-color: var(--primary);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: inset 0 1px 4px rgba(37,99,235,.06), 0 1px 0 #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
#phone-number::placeholder { color: var(--subtle); font-size: 1rem; font-weight: 500; letter-spacing: .02em; }
#phone-number:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12), inset 0 1px 4px rgba(37,99,235,.04);
}
#phone-number.digit-added { animation: pb-digit-added .18s ease both; }

/* ─── Dialpad ────────────────────────────────────────────────────────────── */
.dialpad {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .6rem;
}

.dial-key {
  position: relative;
  overflow: hidden;
  height: clamp(62px,19vw,80px);
  border-radius: 16px;
  background: #ffffff;
  border: 1.5px solid rgba(148,163,184,.22);
  box-shadow: var(--shadow-sm), inset 0 1px 0 #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  cursor: pointer;
  transition: background .14s ease, box-shadow .14s ease,
              border-color .14s ease, transform .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.dial-key::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center,
    rgba(37,99,235,.18) 0%, transparent 65%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.dial-digit {
  display: block;
  font-size: clamp(1.55rem,6.5vw,2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--text);
  pointer-events: none;
  transition: color .14s ease;
}
.dial-sub {
  display: block;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-top: 2px;
  line-height: 1;
  pointer-events: none;
}
.dial-key:hover {
  background: rgba(37,99,235,.05);
  border-color: rgba(37,99,235,.30);
  box-shadow: 0 4px 18px rgba(37,99,235,.15), inset 0 1px 0 #fff;
  transform: translateY(-2px);
}
.dial-key:hover .dial-digit { color: var(--primary); }
.dial-key:hover .dial-sub   { color: var(--primary-mid); }
.dial-key:active:not(:disabled) {
  transform: translateY(1px) scale(.95);
  background: rgba(37,99,235,.10);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
  animation: pb-key-press .25s ease forwards;
}
.dial-key:active::after { opacity:1; transition: opacity 0s; }
.dial-key-sym .dial-digit { font-size: clamp(1.15rem,5vw,1.5rem); color: var(--muted); }
.dial-key-sym:hover .dial-digit { color: var(--primary); }

/* ─── Backspace button ───────────────────────────────────────────────────── */
.backspace-btn {
  width: 3.6rem;
  min-height: 3.6rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1.5px solid rgba(148,163,184,.22);
  color: var(--muted);
  padding: 0;
  box-shadow: var(--shadow-sm);
  transition: all .14s ease;
}
.backspace-btn:hover {
  background: var(--danger-light);
  color: var(--danger);
  border-color: rgba(220,38,38,.30);
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(220,38,38,.20);
}
.backspace-btn:active:not(:disabled) { transform: scale(.93) !important; }

/* ─── Call action buttons ────────────────────────────────────────────────── */
.call-actions {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4.5rem;
  margin-top: 1.5rem;
  padding-bottom: 1.75rem;
}
.dial-action-btn {
  width: 72px; height: 72px;
  min-height: unset;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  letter-spacing: normal;
  font-size: 0;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.dial-action-icon { width:30px; height:30px; flex-shrink:0; pointer-events:none; }
.dial-action-label {
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
  text-transform: uppercase;
}

.call-actions #button-call {
  background: linear-gradient(145deg,#34d058,#22c55e 45%,#16a34a 100%);
  box-shadow: 0 6px 28px rgba(22,163,74,.50), 0 2px 8px rgba(22,163,74,.30),
              inset 0 1px 0 rgba(255,255,255,.30);
}
.call-actions #button-hangup {
  background: linear-gradient(145deg,#f87171,#ef4444 45%,#dc2626 100%);
  box-shadow: 0 6px 28px rgba(220,38,38,.50), 0 2px 8px rgba(220,38,38,.30),
              inset 0 1px 0 rgba(255,255,255,.30);
}
.dial-action-btn:not(:disabled):hover { transform: translateY(-4px) scale(1.07); }
.call-actions #button-call:not(:disabled):hover {
  box-shadow: 0 14px 38px rgba(22,163,74,.60), 0 4px 14px rgba(22,163,74,.35),
              inset 0 1px 0 rgba(255,255,255,.35);
}
.call-actions #button-hangup:not(:disabled):hover {
  box-shadow: 0 14px 38px rgba(220,38,38,.60), 0 4px 14px rgba(220,38,38,.35),
              inset 0 1px 0 rgba(255,255,255,.35);
}
.dial-action-btn:not(:disabled):active { transform: scale(.93)!important; transition: transform .07s ease!important; }

#button-call:not(:disabled) { animation: pb-call-btn-pulse 2.4s ease-in-out infinite; }
body.call-connecting #button-call,
body.call-ringing    #button-call,
body.call-active     #button-call { animation: none; }

/* ─── General Buttons ────────────────────────────────────────────────────── */
.primary-action,.danger-action,.secondary-action,.icon-button {
  min-height: 3rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: .01em;
  transition: all .18s ease;
}

.primary-action {
  min-height: 3.25rem;
  border-radius: 14px;
  font-size: .95rem;
  background: linear-gradient(135deg,var(--primary),var(--primary-dark));
  color: #fff;
  box-shadow: var(--shadow-blue);
}
.primary-action:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(37,99,235,.35); }
.primary-action:not(:disabled):active { transform: translateY(1px) scale(.98); }

.danger-action {
  display: none;
  min-height: 3.25rem;
  border-radius: 14px;
  font-size: .95rem;
  background: linear-gradient(135deg,var(--danger),var(--danger-dark));
  color: #fff;
  box-shadow: var(--shadow-red);
}
.danger-action:not(:disabled):hover  { transform: translateY(-1px); }
.danger-action:not(:disabled):active { transform: translateY(1px) scale(.98); }

.secondary-action {
  color: var(--text-soft);
  border: 1.5px solid var(--divider);
  background: #ffffff;
  border-radius: 12px;
  font-size: .9rem;
}
.secondary-action:not(:disabled):hover {
  background: var(--primary-light);
  border-color: rgba(37,99,235,.30);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,99,235,.12);
}

.icon-button { color: var(--muted); border: 1.5px solid var(--divider); background: #fff; }
.icon-button:not(:disabled):hover { background: #f8faff; color: var(--text); border-color: rgba(37,99,235,.25); }
button:disabled { cursor:not-allowed; opacity:.50; transform:none!important; box-shadow:none!important; }

#button-clear { background: #ffffff; border-radius: var(--radius-sm); }

/* ─── Login form ─────────────────────────────────────────────────────────── */
.login-form { display: grid; gap: .9rem; margin-top: 1rem; }
.login-form input[type="text"],
.login-form input[type="tel"],
.login-form input[type="number"] {
  width: 100%;
  min-height: 3rem;
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-sm);
  outline: none;
  color: var(--text);
  background: #f8faff;
  padding: 0 1rem;
  font-weight: 600;
  transition: all .18s ease;
}
.login-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
  background: #ffffff;
}
.login-form input::placeholder { color: var(--subtle); font-weight: 500; }
.terms-check { display:flex; align-items:flex-start; gap:.65rem; line-height:1.45; color:var(--muted); font-size:.9rem; }
.terms-check input { width:1.1rem; height:1.1rem; margin-top:.12rem; accent-color:var(--primary); flex-shrink:0; }
.link-button { color:var(--primary); background:transparent; padding:0; font-weight:700; text-decoration:underline; }

/* ─── Device card ────────────────────────────────────────────────────────── */
.device-card select {
  width:100%; min-height:4.2rem; margin-bottom:1rem;
  border:1.5px solid var(--divider); border-radius:var(--radius-sm);
  color:var(--text); background:#f8faff; padding:.6rem; outline:none;
}

/* ─── Meter ──────────────────────────────────────────────────────────────── */
.meter-card {
  margin-top:1rem; padding:.9rem 1rem;
  border-radius:var(--radius-sm);
  background: linear-gradient(135deg,#f8faff,#eff4ff);
  border:1px solid var(--divider);
}
.meter-row + .meter-row { margin-top:.75rem; }
.meter-row label { font-size:.78rem; margin-bottom:.3rem; }
.meter-track { width:100%; height:.55rem; overflow:hidden; border-radius:999px; background:#e2e8f0; }
.meter-bar { width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--success),#22c55e); transition:width 120ms ease,background 120ms ease; }

/* ─── Log ────────────────────────────────────────────────────────────────── */
.log-card { min-height: 16rem; }
#log {
  height: min(38vh,22rem);
  margin-top: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: #f8faff;
  padding: .65rem;
}
#log p {
  padding: .42rem .65rem;
  border-radius: var(--radius-xs);
  color: var(--muted);
  background: #ffffff;
  font-family: 'SF Mono','Fira Code','Roboto Mono',monospace;
  font-size: .78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  border: 1px solid rgba(148,163,184,.15);
}
#log p + p { margin-top:.3rem; }
#log p:last-child { animation: pb-log-new 1.8s ease-out forwards; }

/* ─── History ────────────────────────────────────────────────────────────── */
.history-list { display:grid; gap:.6rem; margin-top:1rem; }
.history-item {
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: #ffffff;
  padding: .85rem;
  display: grid;
  gap: .3rem;
  box-shadow: var(--shadow-sm);
  transition: all .18s ease;
}
.history-item:hover {
  border-color: rgba(37,99,235,.25);
  transform: translateX(3px);
  box-shadow: 0 4px 16px rgba(37,99,235,.10);
}
.history-main { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-weight:700; color:var(--text); }
.history-meta { color:var(--muted); font-size:.78rem; line-height:1.4; }
.empty-state {
  border: 1px dashed rgba(37,99,235,.20);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg,#f8faff,#eff4ff);
  padding: 1.5rem;
  color: var(--subtle);
  text-align: center;
  font-size: .9rem;
}

/* ─── Call timer ─────────────────────────────────────────────────────────── */
.call-timer {
  display: none;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--warning);
  letter-spacing: .05em;
  margin-top: .75rem;
  padding: .55rem;
  border-radius: var(--radius-sm);
  background: var(--warning-light);
  border: 1px solid rgba(217,119,6,.22);
}
.call-timer.active { display:block; }
body.call-active .call-timer { color:var(--success); background:var(--success-light); border-color:rgba(22,163,74,.22); font-size:1.5rem; }

/* ─── Modals ─────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15,23,42,.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-backdrop.open { display:flex; }
.modal-card {
  position: relative;
  width: min(520px,100%);
  border: 1px solid rgba(37,99,235,.14);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-lg), var(--shadow-blue);
  padding: clamp(1.25rem,5vw,1.85rem);
  animation: pb-modal-in .32s cubic-bezier(.34,1.56,.64,1) both;
}
.modal-card p { margin-top:.8rem; color:var(--muted); line-height:1.6; font-size:.925rem; }
.modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1.25rem; }
.modal-actions.single-action { grid-template-columns:1fr; }
.modal-footnote { margin-top:1rem!important; font-size:.8rem; text-align:center; }
.modal-close-btn {
  position: absolute;
  top: .85rem; right: .85rem;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--divider);
  background: #f8faff;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all .15s ease;
}
.modal-close-btn:hover { background:var(--danger-light); color:var(--danger); border-color:rgba(220,38,38,.30); transform:scale(1.1); }
.auth-modal-card { text-align:center; }
.maintenance-modal .modal-card { border-color:rgba(217,119,6,.30); background:#fffbeb; }

/* ─── Google Sign-In ─────────────────────────────────────────────────────── */
.google-signin-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  width: 100%;
  min-height: 3.1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--divider);
  background: #ffffff;
  color: var(--text);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all .18s ease;
}
.google-signin-button:not(:disabled):hover {
  background: #f8faff;
  border-color: rgba(37,99,235,.35);
  box-shadow: var(--shadow-blue);
  transform: translateY(-1px);
}
.google-signin-button:disabled { opacity:.55; cursor:not-allowed; }

/* ─── Spinner ────────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pb-spin .65s linear infinite;
  vertical-align: -.15em;
  margin-right: .35em;
  flex-shrink: 0;
}
.spinner-dark { border-color:rgba(15,23,42,.15); border-top-color:var(--text); }

/* ─── Toast notifications ────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(400px,calc(100% - 2rem));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  background: #0f172a;
  color: #f8faff;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
  animation: pb-toast-in .3s cubic-bezier(.34,1.56,.64,1) both;
  pointer-events: all;
  border-left: 4px solid transparent;
}
.toast-success { background:#052e16; border-left-color:#22c55e; }
.toast-error   { background:#450a0a; border-left-color:#f87171; }
.toast-info    { background:#0c4a6e; border-left-color:#38bdf8; }
.toast-warning { background:#451a03; border-left-color:#fbbf24; }
.toast.toast-hiding { animation: pb-toast-out .3s ease forwards; }
.toast-icon { font-size:1rem; flex-shrink:0; margin-top:.05rem; }

/* ─── Call state – body class hooks ─────────────────────────────────────── */
body.call-connecting .dialer-card {
  border-color: rgba(14,165,233,.35);
  box-shadow: 0 0 0 3px rgba(14,165,233,.08), var(--shadow);
  transition: border-color .3s, box-shadow .3s;
}
body.call-ringing .dialer-card { animation: pb-call-ringing 1.2s ease-in-out infinite; }
body.call-ringing #button-call   { display:none!important; }
body.call-ringing #button-hangup { display:flex!important; }
body.call-active  .dialer-card {
  border-color: rgba(22,163,74,.35);
  box-shadow: 0 0 0 3px rgba(22,163,74,.10), var(--shadow);
  animation: pb-call-active 2.5s ease-in-out infinite;
}

/* ─── Auth state visibility ──────────────────────────────────────────────── */
.guest-only { display:block; }
.auth-only  { display:none;  }
body.signed-in .guest-only { display:none;  }
body.signed-in .auth-only  { display:block; }
.auth-guest-panel { margin-top:.12rem; }
.auth-hint {
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg,rgba(37,99,235,.06),rgba(124,58,237,.06));
  border: 1px solid rgba(37,99,235,.14);
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.6;
  margin: 0;
}

/* ─── Misc ───────────────────────────────────────────────────────────────── */
.required-star { color:var(--danger); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ─── Premium card overrides ─────────────────────────────────────────────── */
.dialer-card {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(37,99,235,.10);
  box-shadow:
    0 8px 40px rgba(37,99,235,.08),
    0 2px 10px rgba(15,23,42,.05),
    inset 0 1px 0 #fff;
}
.status-card {
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(37,99,235,.10);
  box-shadow:
    0 6px 32px rgba(37,99,235,.06),
    0 2px 8px rgba(15,23,42,.04),
    inset 0 1px 0 #fff;
}

/* ─── Responsive – tablet ────────────────────────────────────────────────── */
@media (min-width: 820px) {
  .app-shell {
    grid-template-columns: minmax(360px,1.15fr) minmax(300px,.85fr);
    grid-template-areas:
      "dialer  status"
      "dialer  history"
      "dialer  devices"
      "logs    logs";
    align-items: start;
  }
  .status-card  { grid-area: status;  }
  .dialer-card  { grid-area: dialer;  }
  .device-card  { grid-area: devices; }
  .log-card     { grid-area: logs;    }
  .history-card { grid-area: history; }
}
@media (min-width: 1080px) {
  .app-shell {
    grid-template-columns: minmax(380px,440px) 300px minmax(280px,1fr);
    grid-template-areas:
      "dialer  status  logs"
      "dialer  history logs"
      "dialer  devices logs";
  }
  .log-card { min-height: calc(100vh - 4rem); }
  #log       { height: calc(100vh - 14rem); }
}
@media (max-width: 420px) {
  .brand-row { flex-direction:column; align-items:flex-start; }
  .number-entry { grid-template-columns:1fr; }
  .dialpad { gap:.45rem; }
  .dial-key { height:clamp(58px,20vw,70px); border-radius:14px; }
  .dial-digit { font-size:clamp(1.4rem,6.5vw,1.7rem); }
  .call-timer { font-size:1.2rem; }
  .dial-action-btn { width:64px; height:64px; }
  .dial-action-icon { width:26px; height:26px; }
  .call-actions { gap:3rem; }
}

/* ─── Safe-area ──────────────────────────────────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  .app-shell       { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  .toast-container { bottom:         max(1.5rem, env(safe-area-inset-bottom)); }
}

/* ─── Terms page ─────────────────────────────────────────────────────────── */
.terms-page { max-width:820px; margin:0 auto; padding:clamp(1.5rem,5vw,3rem) clamp(1rem,4vw,2rem); }
.terms-page h1 { font-size:clamp(1.8rem,5vw,2.6rem); margin-bottom:.5rem; -webkit-text-fill-color:var(--primary); color:var(--primary); }
.terms-page .terms-lead { color:var(--muted); margin-bottom:2rem; font-size:1rem; line-height:1.6; }
.terms-page h2 { font-size:1.1rem; margin-top:2rem; margin-bottom:.5rem; color:var(--primary); }
.terms-page p,.terms-page li { color:var(--muted); line-height:1.65; font-size:.95rem; margin-bottom:.5rem; }
.terms-page ul,.terms-page ol { padding-left:1.4rem; }
.terms-page .back-link { display:inline-flex; align-items:center; gap:.4rem; color:var(--primary); font-weight:700; text-decoration:none; margin-bottom:2rem; font-size:.9rem; }
.terms-page .back-link:hover { text-decoration:underline; }

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bg-blob,#button-call,.modal-card,
  .status-card,.dialer-card,.log-card,.history-card,.device-card,
  .dial-key,.dial-action-btn,.history-item { animation:none!important; transition:none!important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERMISSIONS BUTTON & MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Mic permission check button (in dialer heading) ───────────────────── */
.perm-check-btn {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--divider);
  background: #ffffff;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  transition: all .18s ease;
}
.perm-check-btn:hover {
  background: var(--primary-light);
  border-color: rgba(37,99,235,.35);
  color: var(--primary);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(37,99,235,.18);
}
.perm-check-btn:active:not(:disabled) { transform: scale(.92) !important; }

/* Status dot on the button */
.perm-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  background: var(--subtle);
  transition: background .25s ease;
}
.perm-dot.perm-dot-granted { background: var(--success); }
.perm-dot.perm-dot-denied  { background: var(--danger); }
.perm-dot.perm-dot-prompt  { background: var(--warning); }

/* ─── Permissions modal ──────────────────────────────────────────────────── */
.permissions-modal-card { max-width: 440px; }

/* Status row inside modal */
.perm-status-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg,#f8faff,#eff4ff);
  border: 1px solid var(--divider);
}
.perm-row-icon  { flex-shrink: 0; color: var(--muted); }
.perm-row-label { flex: 1; font-weight: 600; font-size: .9rem; color: var(--text-soft); }

/* Status badge */
.perm-badge {
  flex-shrink: 0;
  padding: .22rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  border: 1px solid transparent;
  transition: all .2s ease;
}
.perm-badge-checking { color: var(--accent);   background: var(--accent-light);   border-color: rgba(14,165,233,.25); }
.perm-badge-granted  { color: var(--success);  background: var(--success-light);  border-color: rgba(22,163,74,.25); }
.perm-badge-denied   { color: var(--danger);   background: var(--danger-light);   border-color: rgba(220,38,38,.25); }
.perm-badge-prompt   { color: var(--warning);  background: var(--warning-light);  border-color: rgba(217,119,6,.25); }

/* Hint text */
.perm-hint {
  margin-top: .6rem !important;
  padding: .6rem .85rem;
  border-radius: var(--radius-xs);
  font-size: .85rem !important;
  line-height: 1.5 !important;
  border: 1px solid var(--divider);
  background: #f8faff;
  color: var(--muted) !important;
}

/* Denied instructions box */
.perm-denied-box {
  margin-top: .85rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--danger-light);
  border: 1px solid rgba(220,38,38,.20);
  font-size: .85rem;
  color: var(--text-soft);
  line-height: 1.55;
}
.perm-denied-box strong { color: var(--danger-dark); display: block; margin-bottom: .45rem; }
.perm-denied-box ol { margin: 0; padding-left: 1.3rem; }
.perm-denied-box li { margin-bottom: .3rem; color: var(--text-soft); }
.perm-denied-box li + li { margin-top: .2rem; }

/* Hide "Allow" button when mic is already granted */
.perm-modal-actions.mic-granted #btn-request-mic { display: none; }
.perm-modal-actions.mic-granted { grid-template-columns: 1fr; }