/* AI Voice Reservation Agent — module styles (scoped `voice-*`).
   Additive: no existing selector is overridden. */

/* ── Visibility gate ──────────────────────────────────────────────────────
   The nav entry is HIDDEN for everyone by default and only revealed once the
   /can-access probe adds `body.voice-enabled`. `!important` beats the inline
   `display` that app.js's applyPermissionGate writes onto every .nav-item, so
   a non-allowlisted account can never see the entry (no flash, no override).
   Until the operator flips VOICE_MODULE_PUBLIC, that means Maya only. */
.nav-item[data-view="ai-receptionist"] { display: none !important; }
body.voice-enabled .nav-item[data-view="ai-receptionist"] { display: flex !important; }

/* ── Layout ───────────────────────────────────────────────────────────── */
.voice-wrap { max-width: 1100px; margin: 0 auto; padding: 4px 2px 40px; }
.voice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.voice-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--olive, #7c9a3b); }
.voice-title { font-size: 26px; font-weight: 800; margin: 2px 0 2px; color: var(--text-1, #e8ecf7); }
.voice-sub { font-size: 13px; color: var(--text-2, #aab4d4); margin: 0; }
.voice-badge { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  background: rgba(124,154,59,.16); color: var(--olive, #9cc24a); border: 1px solid rgba(124,154,59,.35); white-space: nowrap; }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.voice-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border, #26304d); margin-bottom: 20px; }
.voice-tab { appearance: none; background: none; border: none; cursor: pointer; padding: 10px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--text-2, #aab4d4); border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.voice-tab:hover { color: var(--text-1, #e8ecf7); }
.voice-tab.active { color: var(--text-1, #fff); border-bottom-color: var(--olive, #9cc24a); }

/* ── Cards / grid ─────────────────────────────────────────────────────── */
.voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.voice-card { background: var(--surface-2, #141b2e); border: 1px solid var(--border, #26304d); border-radius: 14px; padding: 16px; }
.voice-stat .n { font-size: 26px; font-weight: 800; color: var(--text-1, #e8ecf7); line-height: 1.1; }
.voice-stat .l { font-size: 12px; color: var(--text-2, #aab4d4); margin-top: 4px; }

.voice-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; margin-bottom: 18px;
  background: rgba(214,158,46,.10); border: 1px solid rgba(214,158,46,.35); color: var(--text-1, #e8ecf7); font-size: 13px; line-height: 1.5; }
.voice-banner .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: #d69e2e; }

/* ── Health list ──────────────────────────────────────────────────────── */
.voice-health { display: grid; gap: 10px; }
.voice-hrow { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  background: var(--surface-2, #141b2e); border: 1px solid var(--border, #26304d); border-radius: 12px; }
.voice-hrow .name { font-weight: 600; font-size: 13.5px; color: var(--text-1, #e8ecf7); }
.voice-hrow .detail { font-size: 12px; color: var(--text-2, #8b96b8); margin-top: 2px; }
.voice-pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.voice-pill.ok { background: rgba(56,161,105,.16); color: #48bb78; border: 1px solid rgba(56,161,105,.4); }
.voice-pill.warn { background: rgba(214,158,46,.14); color: #ecc94b; border: 1px solid rgba(214,158,46,.4); }
.voice-pill.off { background: rgba(160,174,192,.12); color: #a0aec0; border: 1px solid rgba(160,174,192,.3); }

/* ── Config form ──────────────────────────────────────────────────────── */
.voice-form { display: grid; gap: 16px; }
.voice-fieldset { background: var(--surface-2, #141b2e); border: 1px solid var(--border, #26304d); border-radius: 14px; padding: 18px; }
.voice-fieldset h3 { font-size: 14px; font-weight: 700; margin: 0 0 14px; color: var(--text-1, #e8ecf7); }
.voice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.voice-field { display: flex; flex-direction: column; gap: 6px; }
.voice-field label { font-size: 12px; font-weight: 600; color: var(--text-2, #aab4d4); }
.voice-field input[type="text"], .voice-field input[type="tel"], .voice-field input[type="number"],
.voice-field select, .voice-field textarea {
  background: var(--surface-1, #0e1524); border: 1px solid var(--border, #2c374f);
  border-radius: 10px; padding: 9px 11px; color: var(--text-1, #e8ecf7); font-size: 13.5px; font-family: inherit; width: 100%; }
.voice-field textarea { min-height: 74px; resize: vertical; }
.voice-hint { font-size: 11px; color: var(--text-3, #6b7799); }
.voice-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-1, #e8ecf7); cursor: pointer; }
.voice-check input { width: 16px; height: 16px; accent-color: var(--olive, #7c9a3b); }
.voice-actions { display: flex; align-items: center; gap: 12px; }
.voice-btn { appearance: none; border: none; cursor: pointer; border-radius: 10px; padding: 10px 18px; font-size: 13.5px; font-weight: 700;
  background: var(--olive, #7c9a3b); color: #0b1120; transition: filter .15s; }
.voice-btn:hover { filter: brightness(1.08); }
.voice-btn:disabled { opacity: .5; cursor: default; }
.voice-btn.ghost { background: transparent; color: var(--text-2, #aab4d4); border: 1px solid var(--border, #2c374f); }
.voice-savemsg { font-size: 12.5px; font-weight: 600; }
.voice-savemsg.ok { color: #48bb78; }
.voice-savemsg.err { color: #fc8181; }
.voice-muted { color: var(--text-2, #8b96b8); font-size: 13px; }