/* ─────────────────────────────────────────────────────────────
   CloudPhone — Executive Obsidian Dark Luxury Theme
   Bespoke Enterprise VoIP Audio & Telephony System
───────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  color-scheme: dark;
  /* Executive Obsidian Dark Luxury Palette */
  --ios-bg             : #0B0F17;
  --ios-card           : #111827;
  --ios-secondary-bg   : #162032;
  --ios-tertiary-bg    : #1E293B;
  --ios-key-bg         : #1B2436;
  --ios-key-active     : #0284C7;
  --ios-key-text       : #F8FAFC;
  
  --ios-blue           : #38BDF8;
  --ios-blue-light     : rgba(56, 189, 248, 0.15);
  --ios-green          : #10B981;
  --ios-green-light    : rgba(16, 185, 129, 0.15);
  --ios-red            : #F43F5E;
  --ios-red-light      : rgba(244, 63, 94, 0.15);
  --ios-amber          : #F59E0B;
  
  --ios-text-primary   : #F8FAFC;
  --ios-text-secondary : #94A3B8;
  --ios-text-tertiary  : #64748B;
  
  --ios-separator      : rgba(255, 255, 255, 0.08);
  --ios-shadow         : 0 10px 30px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --ios-card-shadow    : 0 20px 45px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
  
  --header-h           : 56px;
  --tabbar-h           : 64px;
  --sidebar-w          : 250px;
  
  --font-family        : "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono          : "JetBrains Mono", monospace;
}

html, body {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  background-color: var(--ios-bg);
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(56, 189, 248, 0.12) 0px, transparent 65%),
    radial-gradient(circle at 100% 100%, rgba(99, 102, 241, 0.08) 0px, transparent 50%);
  color: var(--ios-text-primary);
  font-family: var(--font-family);
  overflow: hidden;
  overflow-x: hidden;
  touch-action: pan-y;
  -webkit-font-smoothing: antialiased;
}

/* ── Screen Management ─────────────────────────────────────── */
.screen {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  height: 100dvh;
  position: fixed;
  inset: 0;
  overflow: hidden;
  overflow-x: hidden;
}
.screen.active { display: flex; }
.screen.hidden { display: none !important; }

/* ── iOS Utility Helpers ───────────────────────────────────── */
.hidden { display: none !important; }
.text-blue { color: var(--ios-blue) !important; }
.text-green { color: var(--ios-green) !important; }
.text-red { color: var(--ios-red) !important; }

/* ════════════════════════════════════════════════════════════
   1. LOGIN SCREEN (Apple iPhone iOS Light Theme)
════════════════════════════════════════════════════════════ */
#loginScreen {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ios-bg);
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(56, 189, 248, 0.16) 0px, transparent 65%),
    radial-gradient(circle at 100% 100%, rgba(99, 102, 241, 0.1) 0px, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(16, 185, 129, 0.08) 0px, transparent 50%);
  padding: max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)) 16px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.login-wrap {
  width: 100%;
  max-width: 390px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: auto 0;
  animation: iosLoginFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes iosLoginFadeUp {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.logo-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-icon-ios {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 40%, #6366F1 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(14, 165, 233, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.logo-icon-ios::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 100%);
  pointer-events: none;
}

.logo-icon-ios svg {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.login-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ios-blue);
  background: var(--ios-blue-light);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 6px;
}

.logo-box h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--ios-text-primary);
  line-height: 1.2;
}

.logo-box .subtitle {
  font-size: 14px;
  color: var(--ios-text-secondary);
  margin-top: 4px;
  font-weight: 500;
}

.ios-card {
  width: 100%;
  background: var(--ios-card);
  border-radius: 24px;
  padding: 24px 22px;
  box-shadow: var(--ios-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--ios-separator);
}

.login-card {
  border-radius: 24px;
}

.alert-error {
  background: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.25);
  color: #D70015;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ── Clean iOS Login Form Controls ── */
.login-field-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.login-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  letter-spacing: -0.2px;
  padding-left: 2px;
}

.login-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ios-secondary-bg);
  border-radius: 16px;
  padding: 0 16px;
  height: 52px;
  border: 1px solid var(--ios-separator);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.login-input-row:focus-within {
  background: var(--ios-tertiary-bg);
  border-color: var(--ios-blue);
  box-shadow: 0 0 0 3px var(--ios-blue-light);
}

.login-input-row .input-icon-ios {
  color: var(--ios-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.login-input-row:focus-within .input-icon-ios {
  color: var(--ios-blue);
}

.login-input-row input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: 16px; /* Exact 16px stops iOS mobile auto-zoom */
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--ios-text-primary) !important;
  font-family: inherit;
  padding: 0;
  height: 100%;
  line-height: 52px;
  color-scheme: dark;
}

.login-input-row input::placeholder {
  color: var(--ios-text-tertiary);
  font-weight: 400;
  letter-spacing: 0;
}

/* ── Universal Dark Form Autofill Override (Fix Chrome/Edge/Safari white boxes) ── */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #162032 inset !important;
  -webkit-text-fill-color: #F8FAFC !important;
  box-shadow: 0 0 0 1000px #162032 inset !important;
  caret-color: #F8FAFC !important;
  transition: background-color 5000s ease-in-out 0s !important;
  border-radius: 8px !important;
  color: #F8FAFC !important;
}

.login-input-row:focus-within input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1E293B inset !important;
  box-shadow: 0 0 0 1000px #1E293B inset !important;
}

input:autofill {
  background-color: #162032 !important;
  color: #F8FAFC !important;
}

/* ── Generic Inset Groups (iOS Settings Style) ── */
.ios-input-group {
  background: var(--ios-secondary-bg);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--ios-separator);
  transition: all 0.2s ease;
}

.ios-input-group:focus-within {
  background: var(--ios-tertiary-bg);
  border-color: var(--ios-blue);
  box-shadow: 0 0 0 3px var(--ios-blue-light);
}

.ios-input-row {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 12px;
}

.input-icon-ios {
  color: var(--ios-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ios-input-group:focus-within .input-icon-ios {
  color: var(--ios-blue);
}

.ios-input-row label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  width: 72px;
  flex-shrink: 0;
}

.ios-input-row input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: 16px; /* Prevents auto-zoom on iOS mobile */
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--ios-text-primary) !important;
  font-family: inherit;
  padding: 0;
  color-scheme: dark;
}

.ios-input-row input::placeholder {
  color: var(--ios-text-tertiary);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.ios-divider {
  height: 1px;
  background: var(--ios-separator);
  margin-left: 14px;
}

.pw-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
}

.pw-toggle {
  background: none;
  border: none;
  color: var(--ios-text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

.btn-ios-primary {
  background: linear-gradient(135deg, #0284C7 0%, #2563EB 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 16px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.4);
  transition: all 0.15s ease;
  user-select: none;
  touch-action: manipulation;
}
.btn-ios-primary:hover {
  background: linear-gradient(135deg, #0369A1 0%, #1D4ED8 100%);
  box-shadow: 0 6px 24px rgba(2, 132, 199, 0.55);
  transform: translateY(-1px);
}
.btn-ios-primary:active {
  background: #0284C7;
  opacity: 0.88;
  transform: scale(0.98);
}
.btn-ios-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ── Login Divider ── */
.login-sep {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 4px 0 2px;
}

.login-sep::before,
.login-sep::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--ios-separator);
}

.login-sep span {
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── WhatsApp Contact Pill/Button ── */
.whatsapp-support-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(37, 211, 102, 0.25);
  border-radius: 16px;
  padding: 10px 14px;
  text-decoration: none;
  color: #000000;
  transition: all 0.15s ease;
  user-select: none;
}

.whatsapp-support-btn:hover {
  background: rgba(37, 211, 102, 0.08);
  border-color: #25D366;
}

.whatsapp-support-btn:active {
  transform: scale(0.98);
  background: rgba(37, 211, 102, 0.14);
}

.wa-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #25D366;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.32);
}

.wa-text-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.wa-title {
  font-size: 11px;
  font-weight: 600;
  color: #8E8E93;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.wa-phone {
  font-size: 15px;
  font-weight: 700;
  color: #1C1C1E;
  letter-spacing: 0.2px;
}

.wa-action-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #128C7E;
  background: rgba(37, 211, 102, 0.14);
  padding: 5px 10px;
  border-radius: 12px;
  flex-shrink: 0;
}

.login-footer {
  text-align: center;
  font-size: 11px;
  color: var(--ios-text-secondary);
  line-height: 1.4;
  margin-top: 2px;
}

.login-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
}

.ios-link-btn {
  background: none;
  border: none;
  color: var(--ios-blue);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  padding: 4px 0;
}
.ios-link-btn:hover { text-decoration: underline; }
.ios-link-btn.admin-link {
  color: var(--ios-text-secondary);
}
.ios-link-btn.admin-link:hover {
  color: var(--ios-text-primary);
}


/* ════════════════════════════════════════════════════════════
   2. MAIN APP SHELL
════════════════════════════════════════════════════════════ */
#appScreen {
  flex-direction: column;
  background: var(--ios-bg);
  height: 100%;
  height: 100dvh;
}

/* iOS Top Header / Status Bar */
.ios-header {
  height: var(--header-h);
  background: rgba(11, 15, 23, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--ios-separator);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  z-index: 20;
}

/* ── PWA Install Header Banner ─────────────────────────────── */
.pwa-banner {
  background: rgba(17, 24, 39, 0.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--ios-separator);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  animation: slideDownBanner 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 19;
  flex-shrink: 0;
}

.pwa-banner.hidden {
  display: none !important;
}

@keyframes slideDownBanner {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.pwa-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pwa-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ios-green);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(52, 199, 89, 0.35);
}

.pwa-text-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pwa-headline {
  font-size: 13px;
  font-weight: 700;
  color: var(--ios-text-primary);
  line-height: 1.2;
}

.pwa-caption {
  font-size: 11px;
  color: var(--ios-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-banner-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-pwa-action {
  background: var(--ios-green);
  color: #FFFFFF;
  border: none;
  border-radius: 16px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.35);
  transition: transform 0.1s, background 0.15s;
}

.btn-pwa-action:hover {
  background: #2ebd52;
}
.btn-pwa-action:active {
  transform: scale(0.95);
}

.btn-pwa-dismiss {
  background: none;
  border: none;
  color: var(--ios-text-tertiary);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.btn-pwa-dismiss:hover {
  color: var(--ios-text-primary);
  background: var(--ios-secondary-bg);
}
.btn-pwa-dismiss:active {
  transform: scale(0.9);
}

.header-left { display: flex; align-items: center; }
.brand-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--ios-text-primary);
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.engine-pill {
  background: var(--ios-secondary-bg);
  border-radius: 20px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ios-text-secondary);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.dot-idle   { background: var(--ios-text-secondary); }
.dot-ready  { background: var(--ios-green); box-shadow: 0 0 6px rgba(52, 199, 89, 0.6); }
.dot-busy   { background: var(--ios-amber); }
.dot-error  { background: var(--ios-red); }

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-chip {
  font-size: 13px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn-ghost {
  background: none;
  border: none;
  color: var(--ios-text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.icon-btn-ghost:hover {
  background: var(--ios-secondary-bg);
  color: var(--ios-red);
}

/* App Body Grid */
.app-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  max-width: 100vw;
  width: 100%;
}

/* Sidebar for Tablet / Desktop */
.sidebar {
  width: var(--sidebar-w);
  background: var(--ios-card);
  border-right: 1px solid var(--ios-separator);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 6px;
  flex-shrink: 0;
}

.side-btn {
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.side-btn:hover {
  background: var(--ios-tertiary-bg);
  color: var(--ios-text-primary);
}
.side-btn.active {
  background: var(--ios-blue-light);
  color: var(--ios-blue);
  font-weight: 600;
}
.side-icon {
  display: flex;
  align-items: center;
}

/* Main Content Area */
.content {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* Tabs */
.tab {
  display: none !important;
  width: 100%;
  max-width: 100%;
}
.tab.active {
  display: block !important;
}
.tab.hidden {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════
   3. iOS DIALER (KEYPAD) TAB
════════════════════════════════════════════════════════════ */
.ios-dialer-container {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 16px;
  background: linear-gradient(180deg, #131D31 0%, #0D1524 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 0 30px rgba(14, 165, 233, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Info Pill Bar */
.ios-info-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--ios-card-shadow);
  border: 1px solid var(--ios-separator);
}

.info-pill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
}

.pill-title {
  font-size: 9.5px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ios-text-secondary);
}

.pill-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--ios-text-primary);
  margin-top: 1px;
}
.pill-value.badge-green {
  color: var(--ios-green);
}

.info-pill-divider {
  width: 1px;
  height: 20px;
  background: var(--ios-separator);
}

/* Big Display Screen */
.ios-display-wrap {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 2px 0;
}

#dialInput {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 28px;
  font-weight: 600;
  color: #FFFFFF;
  text-align: center;
  letter-spacing: 1.5px;
  font-family: var(--font-mono);
  padding: 0 36px;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.2);
}
#dialInput::placeholder {
  color: var(--ios-text-tertiary);
  font-size: 20px;
  letter-spacing: 0px;
  font-family: var(--font-family);
}

.ios-country-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(14, 165, 233, 0.35);
  color: #38BDF8;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 2px;
  animation: fadeInCountry 0.15s ease-out;
}
.ios-country-badge.hidden {
  display: none !important;
}
@keyframes fadeInCountry {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.backspace-btn {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: var(--ios-text-secondary);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.1s, color 0.15s;
  z-index: 5;
}
.backspace-btn:hover {
  color: #F8FAFC;
}
.backspace-btn:active {
  transform: scale(0.9);
  color: var(--ios-blue);
}

/* Authentic iOS Dial Pad Grid (3 Columns) */
.ios-keypad {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px 18px !important;
  width: 100%;
  max-width: 270px;
  margin: 4px auto 0 auto;
}

.ios-key {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(180deg, #202B3E 0%, #151F30 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.12s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ios-key:hover {
  background: linear-gradient(180deg, #2A3952 0%, #1C2A40 100%);
  border-color: rgba(56, 189, 248, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 0 14px rgba(56, 189, 248, 0.2);
}

.ios-key:active {
  background: #0284C7;
  border-color: #38BDF8;
  transform: scale(0.94);
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.5);
}

.ios-key .digit {
  font-size: 27px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  font-family: var(--font-family);
}

.ios-key .digit.star {
  font-size: 32px;
  line-height: 0.9;
  margin-top: 3px;
}

.ios-key .letters {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #94A3B8;
  margin-top: 2px;
  text-transform: uppercase;
}

/* Call Action Button Row */
.ios-call-action-row {
  width: 100%;
  max-width: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}

.action-spacer {
  width: 66px;
}

.btn-call-ios {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-call-ios:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

.btn-call-ios:active {
  transform: scale(0.94);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
.btn-call-ios:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Utility Bar */
.ios-util-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
  width: 100%;
}

.ios-chip-btn {
  background: var(--ios-card);
  border: 1px solid var(--ios-separator);
  border-radius: 16px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: var(--ios-card-shadow);
  transition: all 0.15s;
}
.ios-chip-btn:hover {
  background: var(--ios-secondary-bg);
  color: var(--ios-text-primary);
}

.ios-status-text {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  min-height: 16px;
  margin-top: 2px;
}


/* ════════════════════════════════════════════════════════════
   4. iOS RECENTS & SETTINGS PAGES
════════════════════════════════════════════════════════════ */
.ios-tab-page {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
}

.ios-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 8px 4px;
}

.ios-page-header h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.ios-btn-text {
  background: none;
  border: none;
  color: var(--ios-blue);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Grouped Lists (iOS Settings & Contacts style) */
.ios-section-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--ios-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px 2px 12px;
}

.ios-grouped-card, .ios-grouped-list {
  background: var(--ios-card);
  border-radius: 12px;
  border: 1px solid var(--ios-separator);
  box-shadow: var(--ios-card-shadow);
  overflow: hidden;
}

.ios-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--ios-separator);
  font-size: 15px;
}
.ios-row:last-child {
  border-bottom: none;
}

.row-label {
  font-weight: 500;
  color: var(--ios-text-primary);
}

.row-value {
  font-weight: 400;
  color: var(--ios-text-secondary);
  text-align: right;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ios-separator);
  gap: 12px;
  transition: background 0.15s;
}
.history-item:last-child { border-bottom: none; }
.history-item:hover {
  background: var(--ios-tertiary-bg);
}

.h-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.h-number {
  font-size: 16px;
  font-weight: 600;
  color: var(--ios-text-primary);
  letter-spacing: -0.2px;
}

.h-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}

.h-time {
  color: var(--ios-text-secondary);
}

.h-duration {
  font-weight: 600;
  color: var(--ios-text-primary);
  background: var(--ios-secondary-bg);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11px;
}

.h-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.h-badge.answered {
  background: var(--ios-green-light);
  color: var(--ios-green);
}
.h-badge.failed {
  background: var(--ios-red-light);
  color: var(--ios-red);
}
.h-badge.calling {
  background: var(--ios-blue-light);
  color: var(--ios-blue);
}

.h-error-msg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #DC2626;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  padding: 3px 8px;
  border-radius: 8px;
  font-weight: 500;
  margin-top: 4px;
  max-width: 100%;
  word-break: break-word;
  line-height: 1.3;
}

/* Floating iOS Toast Notification Banner */
.ios-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  background: rgba(15, 23, 42, 0.92);
  color: #FFFFFF;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  padding: 10px 18px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  z-index: 2500;
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
  pointer-events: none;
  max-width: 88%;
  text-align: center;
  box-sizing: border-box;
}

.ios-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.ios-toast.error {
  background: rgba(220, 38, 38, 0.94);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.35);
}

.ios-toast.success {
  background: rgba(22, 163, 74, 0.94);
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
}

.ios-toast.warn {
  background: rgba(217, 119, 6, 0.94);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.35);
}


.btn-recents-call {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ios-green);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.35);
  flex-shrink: 0;
  transition: transform 0.08s, opacity 0.1s;
}
.btn-recents-call:active {
  transform: scale(0.92);
  opacity: 0.9;
}
.btn-recents-call svg {
  width: 18px;
  height: 18px;
}


.empty-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--ios-text-secondary);
}
.empty-icon { font-size: 36px; margin-bottom: 8px; }

.ios-logout-wrap {
  margin-top: 12px;
  padding: 0 4px;
}

.ios-logout-btn {
  width: 100%;
  background: var(--ios-card);
  border: 1px solid var(--ios-separator);
  border-radius: 12px;
  color: var(--ios-red);
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--ios-card-shadow);
  transition: background 0.15s;
}
.ios-logout-btn:active {
  background: var(--ios-red-light);
}

/* ════════════════════════════════════════════════════════════
   5. iOS BOTTOM TAB BAR (MOBILE ONLY)
════════════════════════════════════════════════════════════ */
.bottomnav {
  display: none;
  height: var(--tabbar-h);
  background: rgba(11, 15, 23, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--ios-separator);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 30;
}

.bot-btn {
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ios-text-secondary);
  font-size: 10px;
  font-weight: 500;
  padding: 6px 0;
  transition: color 0.15s, transform 0.1s;
}

.bot-btn:active { transform: scale(0.95); }
.bot-btn.active {
  color: var(--ios-blue);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   6. TRANSPARENT CONNECTING CALL MODAL (FROSTED GLASS)
════════════════════════════════════════════════════════════ */
.connecting-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeInConnecting 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.connecting-overlay.hidden {
  display: none !important;
}

@keyframes fadeInConnecting {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

.connecting-card {
  width: 100%;
  max-width: 340px;
  background: rgba(17, 24, 39, 0.94);
  backdrop-filter: blur(40px) saturate(190%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 24px 22px 22px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(16, 185, 129, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  box-sizing: border-box;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.connecting-pill-bar {
  display: none;
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: #cbd5e1;
  margin-bottom: 2px;
}

.connecting-header {
  width: 100%;
  display: flex;
  justify-content: center;
}

.connecting-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 4px 12px;
  border-radius: 99px;
  text-transform: uppercase;
}

.pulse-dot-green {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulseDotGreen 1.6s infinite;
}

@keyframes pulseDotGreen {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.connecting-loader-wrap {
  position: relative;
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
}

.pulsing-halo {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.35) 0%, rgba(34, 197, 94, 0) 70%);
  animation: pulseHalo 1.8s ease-in-out infinite;
}

.pulsing-halo.halo-delay {
  animation-delay: 0.9s;
}

@keyframes pulseHalo {
  0% { transform: scale(0.9); opacity: 0.5; }
  50% { transform: scale(1.22); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.5; }
}

.spinning-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3.5px solid rgba(34, 197, 94, 0.16);
  border-top-color: #22c55e;
  border-right-color: #22c55e;
  animation: spinHalo 0.85s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

@keyframes spinHalo {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.connecting-center-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.42);
  z-index: 2;
}

.connecting-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.connecting-phone-text {
  font-size: 22px;
  font-weight: 800;
  color: #F8FAFC;
  letter-spacing: -0.4px;
  word-break: break-word;
  line-height: 1.25;
}

.connecting-status-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.connecting-sub-status {
  font-size: 14px;
  font-weight: 600;
  color: #94A3B8;
  letter-spacing: -0.2px;
}

.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.typing-indicator span {
  width: 4px;
  height: 4px;
  background: #22c55e;
  border-radius: 50%;
  animation: bounceDot 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounceDot {
  0%, 80%, 100% { transform: scale(0.3); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.connecting-security-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  margin-top: 2px;
}

.btn-cancel-connecting {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  padding: 13px 22px;
  border-radius: 99px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.32);
}

.btn-cancel-connecting:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 8px 22px rgba(239, 68, 68, 0.42);
}

.btn-cancel-connecting:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.28);
}

.hangup-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

@media (max-width: 600px) {
  .connecting-overlay {
    padding: 20px;
    align-items: center;
    justify-content: center;
  }
  .connecting-card {
    max-width: min(88vw, 330px);
    width: 100%;
    margin: auto;
    border-radius: 26px;
    padding: 24px 20px;
    gap: 16px;
    animation: scaleInConnecting 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .connecting-pill-bar {
    display: none;
  }
  .connecting-phone-text {
    font-size: 21px;
  }
  .btn-cancel-connecting {
    padding: 13px 20px;
    font-size: 15px;
  }
}

@keyframes scaleInConnecting {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════
   7. ACTIVE CALL SCREEN (iOS IN-CALL EXPERIENCE)
════════════════════════════════════════════════════════════ */
.call-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 15, 23, 0.96);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}


.ios-incall-view {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.incall-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.caller-avatar-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--ios-card);
  border: 1px solid var(--ios-separator);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ios-text-secondary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}

.incall-name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--ios-text-primary);
}

.incall-status {
  font-size: 14px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  margin-top: 4px;
}

.ios-listen-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 149, 0, 0.15);
  border: 1px solid rgba(255, 149, 0, 0.35);
  color: #ff9500;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-top: 6px;
  letter-spacing: -0.1px;
  animation: pulseListenBadge 2s infinite ease-in-out;
}

@keyframes pulseListenBadge {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.98); }
}

.ios-listen-badge.hidden {
  display: none !important;
}

.incall-timer {
  font-size: 32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ios-green);
  margin-top: 8px;
}

.incall-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;
  width: 100%;
  max-width: 290px;
  margin: 0 auto;
  justify-items: center;
}

.incall-circle-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ios-text-primary);
  user-select: none;
}

.btn-bubble {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ios-card);
  border: 1px solid var(--ios-separator);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ios-text-primary);
  box-shadow: var(--ios-card-shadow);
  transition: all 0.15s;
}

.incall-circle-btn:active .btn-bubble {
  transform: scale(0.92);
  background: var(--ios-secondary-bg);
}

.incall-circle-btn.active .btn-bubble {
  background: #1C1C1E;
  color: #FFFFFF;
  border-color: #1C1C1E;
}

.incall-circle-btn.speaker-on .btn-bubble {
  background: var(--ios-blue);
  color: #FFFFFF;
  border-color: var(--ios-blue);
}

.incall-circle-btn.silenced .btn-bubble {
  background: var(--ios-red);
  color: #FFFFFF;
  border-color: var(--ios-red);
}


.btn-endcall-ios {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ios-red);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(255, 59, 48, 0.4);
  transition: transform 0.08s;
}
.btn-endcall-ios:active {
  transform: scale(0.92);
}

/* ════════════════════════════════════════════════════════════
   7. MINIMALIST TERMINAL LOG SHEET
════════════════════════════════════════════════════════════ */
#logToggleWrap {
  position: fixed;
  bottom: 74px;
  right: 14px;
  z-index: 50;
}

#logToggleBtn {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ios-separator);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ios-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--ios-card-shadow);
}

.log-panel {
  position: fixed;
  bottom: 124px;
  right: 14px;
  width: 340px;
  max-height: 250px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--ios-separator);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  z-index: 99;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ios-separator);
  font-size: 12px;
  font-weight: 600;
}

.log-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ios-green);
}

.log-btn-mini {
  background: none;
  border: none;
  color: var(--ios-blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
}

.log-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #FAFAFC;
}

.log-line { color: var(--ios-text-secondary); }
.log-line.ok   { color: var(--ios-green); font-weight: 600; }
.log-line.err  { color: var(--ios-red); font-weight: 600; }
.log-line.warn { color: var(--ios-amber); font-weight: 600; }
.log-line.info { color: var(--ios-blue); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   8. MOBILE RESPONSIVE MEDIA QUERIES (BALANCED iOS PROPORTIONS)
════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .sidebar { display: none; }
  .bottomnav { display: flex; }
  
  .content {
    padding: 10px 14px;
    padding-bottom: calc(var(--tabbar-h) + 14px);
  }
  
  #logToggleWrap {
    bottom: calc(var(--tabbar-h) + 12px);
    right: 12px;
  }
  
  .log-panel {
    bottom: calc(var(--tabbar-h) + 48px);
    right: 12px;
    left: 12px;
    width: auto;
  }

  .ios-dialer-container {
    padding-top: 4px;
    gap: 8px;
    padding-bottom: 8px;
    max-width: 350px;
  }

  .ios-info-card {
    padding: 8px 12px;
  }

  .ios-display-wrap {
    min-height: 44px;
    margin: 2px 0;
  }

  #dialInput {
    font-size: 27px;
  }

  .ios-util-bar {
    margin-top: 2px;
    gap: 8px;
  }

  .ios-chip-btn {
    padding: 5px 12px;
    font-size: 12px;
  }

  .ios-keypad {
    gap: 10px 20px !important;
    max-width: 280px;
    margin: 6px auto 0 auto;
  }

  .ios-key {
    width: 66px;
    height: 66px;
  }

  .ios-key .digit {
    font-size: 28px;
  }

  .ios-key .digit.star {
    font-size: 32px;
    margin-top: 2px;
  }

  .ios-key .letters {
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  .ios-call-action-row {
    margin-top: 6px;
    max-width: 280px;
  }

  .action-spacer {
    width: 66px;
  }

  .btn-call-ios {
    width: 66px;
    height: 66px;
    box-shadow: 0 4px 16px rgba(52, 199, 89, 0.45);
  }

  .btn-call-ios svg {
    width: 28px;
    height: 28px;
  }

  .ios-status-text {
    font-size: 12px;
    min-height: 16px;
    margin-top: 2px;
  }
}

/* Fallback only for extremely short landscape/small viewports (< 580px height) */
@media (max-height: 580px) and (max-width: 680px) {
  .ios-header {
    height: 42px;
    padding: 0 10px;
  }
  .content {
    padding: 4px 8px;
    padding-bottom: calc(var(--tabbar-h) + 6px);
  }
  .ios-dialer-container {
    gap: 4px;
  }
  .ios-info-card {
    padding: 4px 8px;
  }
  .ios-display-wrap {
    min-height: 34px;
  }
  #dialInput {
    font-size: 22px;
  }
  .ios-keypad {
    gap: 6px 14px !important;
    max-width: 250px;
  }
  .ios-key {
    width: 58px;
    height: 58px;
  }
  .ios-key .digit {
    font-size: 24px;
  }
  .btn-call-ios {
    width: 58px;
    height: 58px;
  }
}

@media (min-width: 681px) {
  #logToggleWrap {
    bottom: 16px;
  }
}

/* ── Login Mobile Responsiveness ── */
@media (max-width: 400px) {
  #loginScreen {
    padding: max(16px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom)) 12px;
  }
  .login-card {
    padding: 20px 16px;
    border-radius: 20px;
  }
  .logo-icon-ios {
    width: 68px;
    height: 68px;
    border-radius: 19px;
  }
  .logo-box h1 {
    font-size: 24px;
  }
  .wa-phone {
    font-size: 14px;
  }
  .whatsapp-support-btn {
    padding: 8px 12px;
    gap: 10px;
  }
}

/* ════════════════════════════════════════════════════════════
   COMMERCIAL SUITE STYLING (Auth Switcher, Rates, Header Badges)
════════════════════════════════════════════════════════════ */

/* Auth Segmented Switch */
.auth-segmented-switch {
  display: flex;
  background: var(--ios-secondary-bg, #e5e5ea);
  padding: 3px;
  border-radius: 12px;
  margin-bottom: 8px;
  gap: 2px;
}

.auth-segment-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.86rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--ios-text-secondary, #64748b);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-segment-btn.active {
  background: var(--ios-tertiary-bg);
  color: var(--ios-blue);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Header User Balance & Expiry Pills */
.user-balance-pill, .user-expiry-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.user-balance-pill {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34D399;
}
.user-balance-pill:hover {
  background: rgba(16, 185, 129, 0.25);
  transform: translateY(-1px);
}
.user-balance-pill.pill-low-balance {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.35);
  color: #FB7185;
}

.user-expiry-pill {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #A5B4FC;
}
.user-expiry-pill.pill-expired {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.35);
  color: #FB7185;
}

/* Rate Cost & Mins Pill under dialer */
.rate-cost-pill, .rate-mins-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 6px;
}

.rate-cost-pill {
  background: rgba(56, 189, 248, 0.15);
  color: #38BDF8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.rate-mins-pill {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Rates Tab & List */
.rates-search-box {
  display: flex;
  align-items: center;
  background: var(--ios-secondary-bg);
  border: 1px solid var(--ios-separator);
  border-radius: 14px;
  padding: 10px 14px;
  gap: 10px;
  margin-bottom: 16px;
  box-shadow: var(--ios-shadow);
}

.rates-search-box input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.95rem;
  color: var(--ios-text-primary);
}

.rates-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  padding-bottom: 20px;
}

.rate-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ios-card);
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--ios-separator);
  box-shadow: var(--ios-card-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.rate-card-item:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.rate-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rate-flag {
  font-size: 1.6rem;
  line-height: 1;
}

.rate-country {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ios-text-primary);
}

.rate-prefix code {
  background: var(--ios-blue-light);
  color: var(--ios-blue);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
}

.rate-item-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rate-amount {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ios-green);
  font-family: var(--font-mono);
}

.rate-unit {
  font-size: 0.72rem;
  color: var(--ios-text-secondary);
  font-weight: 600;
}

.rate-call-btn {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #ffffff;
  border: none;
  padding: 7px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
  transition: all 0.15s ease;
}

.rate-call-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.5);
}

.loading-state-pill {
  text-align: center;
  padding: 30px;
  color: #64748b;
  font-size: 0.9rem;
}

/* ════════════════════════════════════════════════════════════
   EXECUTIVE DESKTOP & TABLET RESPONSIVE ENHANCEMENTS
════════════════════════════════════════════════════════════ */

@media (min-width: 681px) {
  /* Enhanced Obsidian Luxury Sidebar */
  .sidebar {
    width: 260px;
    background: #0B101B;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 16px;
    z-index: 10;
  }

  .sidebar-top {
    margin-bottom: 24px;
    padding: 0 8px;
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .sidebar-brand-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 40%, #6366F1 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  }

  .sidebar-brand-name {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #F8FAFC;
    letter-spacing: -0.3px;
  }

  .sidebar-brand-sub {
    display: block;
    font-size: 11px;
    color: #94A3B8;
    font-weight: 600;
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }

  .side-btn {
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 600;
    color: #94A3B8;
    transition: all 0.2s ease;
  }

  .side-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #F8FAFC;
    transform: translateX(3px);
  }

  .side-btn.active {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.18) 0%, rgba(99, 102, 241, 0.06) 100%);
    color: #38BDF8;
    border-left: 3px solid #38BDF8;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  .sidebar-footer {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .sidebar-user-card:hover {
    background: #162032;
    border-color: rgba(56, 189, 248, 0.35);
    transform: translateY(-1px);
  }

  .sidebar-user-avatar {
    width: 36px;
    height: 36px;
    background: #1E293B;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #38BDF8;
  }

  .sidebar-user-name {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #F8FAFC;
  }

  .sidebar-user-role {
    display: block;
    font-size: 11px;
    color: #94A3B8;
  }

  /* Desktop Header Styling */
  .ios-header {
    height: 64px;
    padding: 0 28px;
    background: rgba(11, 16, 27, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .brand-title {
    font-size: 20px;
    color: #F8FAFC;
    font-weight: 800;
  }

  .user-balance-pill {
    padding: 7px 16px;
    font-size: 0.88rem;
  }
  .user-expiry-pill {
    padding: 7px 16px;
    font-size: 0.88rem;
  }

  /* Desktop Content Area */
  .content {
    padding: 36px 48px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: #0B0F17;
    background-image: 
      radial-gradient(ellipse 70% 40% at 50% -10%, rgba(14, 165, 233, 0.12) 0px, transparent 60%),
      radial-gradient(circle at 100% 100%, rgba(99, 102, 241, 0.07) 0px, transparent 40%);
  }

  .tab {
    display: none !important;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
  }

  .tab.active {
    display: block !important;
  }

  .tab.hidden {
    display: none !important;
  }

  #ratesTab {
    max-width: 840px;
  }

  #historyTab, #settingsTab {
    max-width: 680px;
  }

  .ios-tab-page {
    max-width: 100%;
  }

  /* Center Console Luxury Dialer Card */
  .ios-dialer-container {
    max-width: 420px;
    background: linear-gradient(180deg, #131D31 0%, #0D1524 100%);
    padding: 28px 32px 24px 32px;
    border-radius: 32px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 40px rgba(14, 165, 233, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .ios-keypad {
    gap: 16px 26px !important;
    max-width: 320px;
    margin: 14px auto 8px auto;
  }

  .ios-key {
    width: 76px;
    height: 76px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .ios-key:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 18px rgba(56, 189, 248, 0.25);
  }

  .ios-key .digit {
    font-size: 32px;
  }

  .btn-call-ios {
    width: 76px;
    height: 76px;
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  }

  .btn-call-ios:hover {
    transform: scale(1.06);
    box-shadow: 0 14px 36px rgba(16, 185, 129, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  }

  .btn-call-ios svg {
    width: 34px;
    height: 34px;
  }
}



/* ── MOBILE HEADER FIX 2026-11-02 ──
   On <=680px the header held brand + balance + expiry + engine + name +
   logout in one 56px row, so the name and logout were pushed off-screen.
   Wrap to two rows: brand + name/logout on row 1, pills on row 2. */
@media (max-width: 680px) {
  .ios-header {
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    padding: 8px 12px;
    gap: 8px;
    row-gap: 8px;
  }
  .header-left { flex: 0 1 auto; min-width: 0; }
  .header-center {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }
  .header-right { margin-left: auto; flex-shrink: 0; }
  .user-chip { max-width: 110px; }
  .engine-pill, .user-balance-pill, .user-expiry-pill { flex-shrink: 0; white-space: nowrap; }
  .pwa-banner { flex-wrap: wrap; }
  .pwa-banner-left { min-width: 0; flex: 1; }
  /* Login support button: phone was near-black (#1C1C1E) on a dark card, unreadable */
  .wa-phone { color: var(--ios-text-primary); line-height: 1.3; }
  .whatsapp-support-btn { align-items: flex-start; }
  .wa-icon-box { margin-top: 2px; }
}
@media (max-width: 400px) {
  .user-chip { max-width: 80px; }
  .brand-title { font-size: 16px; }
}

/* ── USER INDEX REDESIGN 2026-11-03 (new design look, old functionality untouched) ──
   Scoped under #appScreen so the login screen, overlays and call screen keep
   their existing styles. Demo-only pieces were NOT carried over: the demo
   call-screen, demo JS alerts, hardcoded username/balance/expiry. */
#appScreen {
  background:
    radial-gradient(ellipse at 10% 10%, #102e59 0%, transparent 40%),
    radial-gradient(ellipse at 90% 40%, #29134d 0%, transparent 38%),
    #080f20;
  color: #f5f8ff;
  min-height: 100vh;
}
#appScreen .header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px; padding: 20px 16px 0;
}
#appScreen .logo { font-size: 27px; font-weight: 850; letter-spacing: -1px; color: #f5f8ff; }
#appScreen .logo span { color: #08bfff; }
#appScreen .profile { display: flex; align-items: center; gap: 12px; color: #91a3bd; }
#appScreen .profile .user-chip { font-size: 14px; font-weight: 600; color: #f5f8ff; }
#appScreen .avatar {
  width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg,#1269b7,#8a37e9); font-size: 20px; color: #fff;
}
#appScreen .stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
  margin: 0 16px 20px; padding: 0;
}
#appScreen .stat {
  background: linear-gradient(135deg,#102d48,#121a38);
  border: 1px solid rgba(8,191,255,.35); border-radius: 20px;
  padding: 15px 8px; text-align: center;
  box-shadow: inset 0 0 18px rgba(8,191,255,.07); cursor: default;
}
#appScreen .stat:nth-child(2) { border-color: rgba(164,60,255,.5); }
#appScreen .stat .value { font-size: clamp(14px,3.5vw,21px); font-weight: 800; color: #08bfff; }
#appScreen .stat:nth-child(2) .value { color: #bd9aff; }
#appScreen .stat:nth-child(3) .value { color: #08d69a; }
#appScreen .stat small { display: block; color: #91a3bd; margin-top: 5px; font-size: 11px; }
#appScreen .stat .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
#appScreen .install {
  display: flex; align-items: center; gap: 12px; padding: 13px;
  border: 1px solid rgba(8,191,255,.35); border-radius: 19px;
  background: linear-gradient(110deg,#112b53,#251447); margin: 0 16px 22px;
}
#appScreen .install-icon {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px;
  background: linear-gradient(135deg,#08bfff,#a43cff); font-size: 23px; color: #fff; flex-shrink: 0;
}
#appScreen .install-info { flex: 1; min-width: 0; }
#appScreen .install-info strong { display: block; font-size: 15px; color: #f5f8ff; }
#appScreen .install-info small { color: #91a3bd; font-size: 11px; }
#appScreen .install-btn {
  padding: 11px 16px; border-radius: 30px; border: none; cursor: pointer;
  background: linear-gradient(110deg,#00bfff,#6045ff); font-weight: 750; color: #fff; font-size: 13px;
}
#appScreen .close-install { background: transparent; border: none; color: #91a3bd; font-size: 22px; cursor: pointer; }
#appScreen .panel {
  background: linear-gradient(145deg,rgba(17,34,62,.96),rgba(8,16,35,.98));
  border: 1px solid rgba(90,155,255,.3); border-radius: 30px;
  padding: 22px 16px 25px; margin: 0 16px 20px;
  box-shadow: 0 0 35px rgba(0,130,255,.08), inset 0 0 35px rgba(105,65,255,.06);
  min-height: 550px;
}
#appScreen .number-row { display: flex; align-items: center; gap: 8px; margin: 8px 0 24px; }
#appScreen #dialInput {
  width: 100%; min-width: 0; background: transparent; border: 0; color: #fff;
  font-size: clamp(24px,6vw,39px); font-weight: 800; letter-spacing: 2px;
  text-align: center; outline: none;
}
#appScreen #dialInput::placeholder { color: #91a3bd; font-weight: 600; }
#appScreen .clear-btn { background: transparent; border: none; color: #91a3bd; font-size: 25px; padding: 5px; cursor: pointer; }
#appScreen .tools { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-bottom: 27px; }
#appScreen .tool {
  background: #192945; border: 1px solid rgba(117,160,255,.17); border-radius: 30px;
  padding: 11px 15px; color: #b5c7e5; font-size: 13px; cursor: pointer;
}
#appScreen .tool:hover { border-color: #08bfff; color: #08bfff; }
#appScreen .dialpad { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px 10px; max-width: 420px; margin: auto; }
#appScreen .cp-digit {
  width: clamp(75px,22vw,112px); height: clamp(75px,22vw,112px); max-width: 100%;
  justify-self: center; border-radius: 50%;
  background: linear-gradient(145deg,#263653,#111c32);
  border: 1px solid rgba(163,190,255,.18); color: #f5f8ff;
  box-shadow: 0 5px 14px rgba(0,0,0,.3), inset 0 1px 8px rgba(255,255,255,.04);
  font-size: 38px; font-weight: 750; cursor: pointer; transition: .15s; font-family: inherit;
}
#appScreen .cp-digit:active { transform: scale(.93); border-color: #08bfff; box-shadow: 0 0 20px rgba(0,191,255,.35); }
#appScreen .cp-digit small { display: block; font-size: 10px; color: #a3b5d1; letter-spacing: 4px; margin-top: 0; }
#appScreen .call-actions { display: flex; align-items: center; justify-content: center; gap: 35px; margin-top: 27px; }
#appScreen .call-btn {
  width: 105px; height: 105px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(145deg,#12ed9d,#00a96f);
  box-shadow: 0 0 0 8px rgba(0,220,140,.09), 0 0 35px rgba(0,220,140,.35);
  font-size: 39px; color: #fff;
}
#appScreen .page-title { font-size: 24px; font-weight: 800; margin-bottom: 7px; color: #f5f8ff; }
#appScreen .page-subtitle { color: #91a3bd; font-size: 13px; margin-bottom: 23px; }
#appScreen .search {
  width: 100%; padding: 14px; border-radius: 14px; background: #192945;
  border: 1px solid rgba(117,160,255,.17); outline: none; color: #fff; margin-bottom: 17px; font-size: 14px;
}
#appScreen .search::placeholder { color: #91a3bd; }
/* Bottom nav: new look, old buttons/handlers (bot-btn + switchTabMob) */
#appScreen .bottomnav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 650px; display: grid; grid-template-columns: repeat(4,1fr);
  padding: 12px 8px calc(12px + env(safe-area-inset-bottom));
  background: rgba(7,14,29,.96); backdrop-filter: blur(20px);
  border-top: 1px solid rgba(105,160,255,.2); z-index: 10;
}
#appScreen .bot-btn {
  background: transparent; border: none; color: #8496b3; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; padding: 7px 2px;
}
#appScreen .bot-btn svg { width: 23px; height: 23px; }
#appScreen .bot-btn.active { color: #08bfff; }
/* Recents / rates generated items: new look via their existing classes */
#appScreen .history-item {
  display: flex; align-items: center; gap: 13px; padding: 15px 10px;
  border-bottom: 1px solid rgba(117,160,255,.17); background: transparent;
}
#appScreen .history-item .h-number { font-size: 14px; font-weight: 700; color: #f5f8ff; }
#appScreen .history-item .h-meta-row { color: #91a3bd; font-size: 12px; }
#appScreen .history-item .btn-recents-call {
  background: #1b3153; border: 1px solid rgba(8,191,255,.35); color: #08bfff;
  border-radius: 20px; padding: 9px 14px; cursor: pointer;
}
#appScreen .rate-card-item {
  background: linear-gradient(130deg,#142d51,#21183f);
  border: 1px solid rgba(117,160,255,.17); border-radius: 18px; padding: 17px; margin-bottom: 12px;
}
#appScreen .rate-card-item .rate-country { font-size: 17px; font-weight: 700; color: #f5f8ff; }
#appScreen .rate-card-item .rate-prefix { color: #91a3bd; font-size: 12px; margin-top: 7px; }
#appScreen .rate-card-item .rate-amount { color: #08d69a; font-size: 20px; font-weight: 800; }
#appScreen .rate-card-item .rate-call-btn {
  background: #1b3153; border: 1px solid rgba(8,191,255,.35); color: #08bfff;
  border-radius: 20px; padding: 9px 14px; cursor: pointer;
}
/* Settings cards: new panel feel, same rows/IDs */
#appScreen .ios-grouped-card {
  background: linear-gradient(130deg,#142d51,#21183f);
  border: 1px solid rgba(117,160,255,.17); border-radius: 18px;
}
#appScreen .ios-section-header { color: #91a3bd; }
@media(max-width:900px) {
  #appScreen .content { max-width: 650px; margin: 0 auto; width: 100%; }
  #appScreen .app-body { padding-bottom: 90px; }
}
@media(max-width:390px) {
  #appScreen .header { padding: 15px 11px 0; }
  #appScreen .stats { gap: 6px; margin: 0 11px 20px; }
  #appScreen .stat { padding: 12px 4px; }
  #appScreen .install { gap: 7px; margin: 0 11px 22px; }
  #appScreen .install-btn { padding: 10px 12px; font-size: 12px; }
  #appScreen .panel { padding: 17px 10px 22px; margin: 0 11px 20px; }
  #appScreen .tools { gap: 6px; }
  #appScreen .tool { padding: 10px 11px; font-size: 12px; }
  #appScreen .call-actions { gap: 25px; }
}
/* Scroll-chain fix 2026-11-03: header+stats sit above .content in the fixed
   #appScreen column, so the flex items must be allowed to shrink, otherwise
   the tall new panel pushes the call button under the fixed bottom nav. */
#appScreen .app-body { min-height: 0; }
#appScreen .content { min-height: 0; }
/* ── DIALPAD MOBILE FIT 2026-11-03 ──
   Problem measured: at 360x740 the panel needed 312px of inner scroll and the
   call button sat fully behind the fixed bottom nav; at 390x844 it was 234px.
   Fix: digits now size from BOTH width and viewport height (so the whole
   dialer fits one phone screen), spacing is compacted, and the earlier
   .app-body padding-bottom:90px is removed (it only shrank the scroll area;
   .content already carries its own nav clearance padding). Digits never go
   below 56px: on very short screens (old/small phones) the panel scrolls
   instead of shrinking buttons below tap size. */
@media(max-width:900px) {
  #appScreen .app-body { padding-bottom: 0; }
  #appScreen .header { padding-top: 12px; margin-bottom: 14px; }
  #appScreen .stats { margin-bottom: 14px; }
  #appScreen .stat { padding: 10px 8px; }
  #appScreen .stat small { margin-top: 3px; }
  #appScreen .panel { padding: 18px 16px 20px; min-height: 0; }
  #appScreen .number-row { margin: 4px 0 14px; }
  #appScreen .tools { margin-bottom: 16px; }
  #appScreen .dialpad { gap: 12px 10px; }
  #appScreen .cp-digit {
    width: clamp(56px, min(22vw, calc((100dvh - 540px) / 4)), 86px);
    height: clamp(56px, min(22vw, calc((100dvh - 540px) / 4)), 86px);
  }
  #appScreen .call-actions { margin-top: 16px; }
  #appScreen .call-btn { width: 96px; height: 96px; font-size: 34px; }
}
/* Dialpad fit polish 2026-11-03: trim ~30px of vertical chrome so the panel
   itself (not just the call button) fits the content area on normal phones. */
@media(max-width:900px) {
  #appScreen .header { margin-bottom: 10px; }
  #appScreen .stats { margin-bottom: 10px; }
  #appScreen .panel { padding: 14px 16px 16px; margin-bottom: 0; }
  #appScreen .number-row { margin: 4px 0 10px; }
  #appScreen .tools { margin-bottom: 12px; }
  #appScreen .dialpad { gap: 10px 10px; }
  #appScreen .call-actions { margin-top: 12px; }
  #appScreen .call-btn { width: 84px; height: 84px; font-size: 32px; }
}
/* ── DIALPAD TYPOGRAPHY FIX 2026-11-03 ──
   Bug seen on the user phone screenshot: ABC/DEF/... letters rendered BELOW
   their circular buttons, and the call button was half under the bottom nav.
   Cause: digit font stayed 38px (from the demo, where buttons were 75-112px)
   while the mobile-fit fix shrank buttons to 56-65px, so digit line-height +
   letters (~58px) no longer fit inside the button. Headless Chromium masked
   it (its font metrics are a few px smaller). Fix: digit font now scales with
   the button, line-height is 1, letters are smaller/tighter, and the button
   centres its content as a flex column. Stylesheet bumped v27 -> v28 in
   index.html so phones holding a cached v27 fetch this fresh. */
@media(max-width:900px) {
  #appScreen .cp-digit {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1; font-size: clamp(28px, 8.5vw, 38px);
  }
  #appScreen .cp-digit small {
    font-size: 9px; letter-spacing: 2px; margin-top: 3px; line-height: 1;
  }
}
/* ── DIAL BUTTON SHORT-SCREEN FIX 2026-11-03 ──
   Measured on the user phone screenshot: with browser chrome the real
   viewport is ~640-670px tall, and the call button hid 16-36px under the
   fixed bottom nav (panel height is constant once digits hit their 56px
   floor, while the nav sits at viewport-bottom). On viewports up to 700px
   tall, trim ~60px of vertical chrome so the button clears the nav. */
@media(max-width:900px) and (max-height:700px) {
  #appScreen .header { padding-top: 8px; }
  #appScreen .logo { font-size: 24px; }
  #appScreen .avatar { width: 36px; height: 36px; font-size: 17px; }
  #appScreen .stats { margin-bottom: 10px; }
  #appScreen .stat { padding: 7px 8px; }
  #appScreen .panel { padding: 10px 16px 12px; }
  #appScreen .number-row { margin: 4px 0 6px; }
  #appScreen .tools { margin-bottom: 8px; }
  #appScreen .cp-digit {
    width: clamp(50px, min(20vw, calc((100dvh - 500px) / 4)), 64px);
    height: clamp(50px, min(20vw, calc((100dvh - 500px) / 4)), 64px);
  }
  #appScreen .call-actions { margin-top: 8px; }
  #appScreen .call-btn { width: 72px; height: 72px; font-size: 30px; }
}

/* ── HISTORY + SETTINGS PAGES 2026-11-03 ──
   History renamed from Recents, restyled to the new index design; Settings
   made mobile responsive (CALL PREFERENCES section was removed from the
   markup). Scoped under #appScreen so login/overlays are untouched. */
#appScreen .ios-tab-page { padding: 0 16px 20px; }
#appScreen .ios-page-header { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
#appScreen .ios-page-header .page-title { margin-bottom: 0; }
#appScreen .ios-page-header .page-subtitle { margin-bottom: 0; flex-basis: 100%; }
#appScreen .ios-btn-text {
  background: #192945; border: 1px solid rgba(117,160,255,.17); border-radius: 30px;
  padding: 9px 14px; color: #b5c7e5; font-size: 13px; cursor: pointer;
}
#appScreen .ios-btn-text.text-red { color: #f04455; border-color: rgba(240,68,85,.4); }
/* History items as new-design cards (generated markup classes kept) */
#appScreen .history-item {
  background: linear-gradient(130deg,#142d51,#21183f);
  border: 1px solid rgba(117,160,255,.17); border-radius: 18px;
  padding: 15px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 13px;
}
#appScreen .history-item .h-left { flex: 1; min-width: 0; cursor: pointer; }
#appScreen .history-item .h-number { font-size: 15px; font-weight: 700; color: #f5f8ff; word-break: break-all; }
#appScreen .history-item .h-meta-row { display: flex; flex-wrap: wrap; gap: 8px; color: #91a3bd; font-size: 12px; margin-top: 5px; align-items: center; }
#appScreen .history-item .h-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
#appScreen .history-item .h-badge.answered { color: #08d69a; background: rgba(8,214,154,.12); border: 1px solid rgba(8,214,154,.35); }
#appScreen .history-item .h-badge.calling { color: #08bfff; background: rgba(8,191,255,.12); border: 1px solid rgba(8,191,255,.35); }
#appScreen .history-item .h-badge.failed { color: #f04455; background: rgba(240,68,85,.12); border: 1px solid rgba(240,68,85,.35); }
#appScreen .history-item .h-error-msg { color: #f04455; font-size: 12px; margin-top: 6px; word-break: break-word; }
#appScreen .history-item .btn-recents-call {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(145deg,#12ed9d,#00a96f); color: #fff;
  display: grid; place-items: center;
}
#appScreen .history-item .btn-recents-call svg { width: 22px; height: 22px; }
#appScreen .empty-state { text-align: center; color: #91a3bd; padding: 30px 10px; }
#appScreen .empty-state .empty-icon { font-size: 32px; margin-bottom: 8px; }
/* Settings rows: wrap + break long values on phones; full-width logout */
#appScreen .ios-section-header { color: #91a3bd; font-size: 12px; letter-spacing: .5px; margin: 20px 0 10px; }
#appScreen .ios-grouped-card { margin-bottom: 4px; }
@media(max-width:480px) {
  #appScreen .ios-tab-page { padding: 0 12px 20px; }
  #appScreen .ios-row { flex-wrap: wrap; gap: 4px; padding: 14px 12px; }
  #appScreen .ios-row .row-label { font-size: 13px; }
  #appScreen .ios-row .row-value { font-size: 13px; text-align: left; word-break: break-all; }
  #appScreen .history-item { padding: 13px 12px; }
  #appScreen .history-item .h-number { font-size: 14px; }
  #appScreen .history-item .h-meta-row { gap: 6px; }
  #appScreen .ios-logout-btn { width: 100%; padding: 14px; }
}
/* ── CALL BUTTON PRO 2026-11-03 ──
   Before: a ☎ emoji glyph (renders differently on every phone, sometimes
   coloured/thin) at fixed px sizes per breakpoint, with no press feedback.
   Now: a crisp vector handset icon, smoothly responsive sizing from BOTH
   width and height (68-96px, so it never crowds the nav on short screens
   nor looks small on tall ones), layered professional glow + top highlight,
   tactile press shrink, and a visible focus ring for keyboard/talkback. */
#appScreen .call-btn {
  width: 84px; height: 84px;
  width: clamp(68px, min(22vw, 11dvh), 96px);
  height: clamp(68px, min(22vw, 11dvh), 96px);
  display: grid; place-items: center;
  border-radius: 50%; border: none; cursor: pointer; color: #fff;
  background: linear-gradient(145deg,#14e89b,#00a96f);
  box-shadow: 0 0 0 10px rgba(0,220,140,.08),
              0 12px 30px rgba(0,200,130,.35),
              inset 0 2px 6px rgba(255,255,255,.35),
              inset 0 -4px 10px rgba(0,90,60,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
#appScreen .call-btn svg { width: 42%; height: 42%; display: block; }
#appScreen .call-btn:active {
  transform: scale(.94);
  box-shadow: 0 0 0 6px rgba(0,220,140,.08),
              0 6px 18px rgba(0,200,130,.3),
              inset 0 2px 6px rgba(255,255,255,.3);
}
#appScreen .call-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* ── CALL BUTTON SLIGHTLY SMALLER 2026-11-03 (user request) ──
   Same pro button, just ~8px smaller everywhere: 62-82px instead of 68-91px. */
#appScreen .call-btn {
  width: 76px; height: 76px;
  width: clamp(60px, min(20vw, 10dvh), 88px);
  height: clamp(60px, min(20vw, 10dvh), 88px);
}
/* ── SETTINGS + HISTORY NO-SCROLL + HISTORY UN-NEST 2026-11-03 ──
   Settings measured scroll before: 143px @360x620, 123px @640, 83px @680,
   40px @740 (Disconnect button hidden under the nav). Compaction below
   saves ~117px (tighter gaps, rows, headers, button) so the whole page
   fits one screen on short phones; nothing removed, all rows stay.
   History: items were gradient cards INSIDE #historyList.ios-grouped-list,
   which is itself a card (bg + border + shadow) = card k ander card.
   The list container is now transparent/borderless, so items are
   single-level cards on the page background. Items also slightly
   compacted so a short history fits one screen (a long list still
   scrolls by nature, else items would shrink unreadably small). */
@media (max-width:900px) {
  #appScreen #settingsTab .ios-tab-page { gap: 10px; padding-bottom: 12px; }
  #appScreen #settingsTab .ios-page-header { padding-bottom: 4px; }
  #appScreen #settingsTab .page-subtitle { margin-bottom: 8px; }
  #appScreen #settingsTab .ios-section-header { padding-top: 4px; }
  #appScreen #settingsTab .ios-row { padding-top: 10px; padding-bottom: 10px; }
  #appScreen #settingsTab .ios-logout-wrap { margin-top: 0; }
  #appScreen #settingsTab .ios-logout-btn { padding: 11px; }
  #appScreen #historyTab .ios-tab-page { gap: 10px; padding-bottom: 12px; }
  #appScreen #historyTab .page-subtitle { margin-bottom: 8px; }
  #appScreen #historyList.ios-grouped-list { background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; }
  #appScreen .history-item { padding: 12px; margin-bottom: 10px; }
}
/* ── SETTINGS FIT ROUND 2 2026-11-03 ──
   Round 1 saved 100px (143 -> 43 @360x620, 123 -> 23 @640). Round 2
   saves ~49px more so even a 620px-tall viewport needs no scroll.
   Rows stay 38px tall, title 22px - still comfortably readable. */
@media (max-width:900px) {
  #appScreen #settingsTab .ios-tab-page { gap: 8px; padding-bottom: 6px; }
  #appScreen #settingsTab .page-title { font-size: 22px; margin-bottom: 4px; }
  #appScreen #settingsTab .ios-section-header { padding: 2px 12px 0 12px; }
  #appScreen #settingsTab .ios-row { padding-top: 8px; padding-bottom: 8px; }
}