/* ═══════════════════════════════════════════════════════════════
   FACE AI TRACKER — styles.css
   Phase 4: Professional Dashboard UI
   Font: Inter (UI) + JetBrains Mono (numbers/code)
═══════════════════════════════════════════════════════════════ */

/* ── VARIABLES ──────────────────────────────────────────────── */
:root {
  --bg:           #0a0c12;
  --bg-2:         #0f1117;
  --surface:      #141820;
  --surface-2:    #1a2030;
  --border:       rgba(255,255,255,0.07);
  --border-2:     rgba(255,255,255,0.12);

  --accent:       #00e5ff;
  --accent-dim:   rgba(0,229,255,0.12);
  --accent-glow:  rgba(0,229,255,0.25);
  --green:        #00e676;
  --green-dim:    rgba(0,230,118,0.12);
  --red:          #ff5252;
  --red-dim:      rgba(255,82,82,0.12);
  --yellow:       #ffd740;
  --yellow-dim:   rgba(255,215,64,0.12);
  --purple:       #b388ff;

  --text:         #e8eaf0;
  --text-2:       #8892a4;
  --text-3:       #4a5568;

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

  --font:         'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --nav-h:        56px;
  --transition:   0.2s ease;
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: var(--font);
  background:  var(--bg);
  color:       var(--text);
  min-height:  100vh;
  overflow-x:  hidden;
}

/* ── TOP NAV ─────────────────────────────────────────────────── */
.topnav {
  position:        fixed;
  top:             0; left: 0; right: 0;
  height:          var(--nav-h);
  background:      rgba(10,12,18,0.95);
  backdrop-filter: blur(12px);
  border-bottom:   1px solid var(--border);
  display:         flex;
  align-items:     center;
  padding:         0 1.5rem;
  gap:             1.5rem;
  z-index:         100;
}

.topnav-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
}

.brand-icon {
  width:           34px;
  height:          34px;
  background:      var(--accent-dim);
  border:          1px solid rgba(0,229,255,0.3);
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--accent);
}

.brand-name {
  font-size:   0.95rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
}

.brand-version {
  font-size:        0.68rem;
  background:       var(--accent-dim);
  color:            var(--accent);
  border:           1px solid rgba(0,229,255,0.25);
  border-radius:    20px;
  padding:          2px 8px;
  font-family:      var(--font-mono);
  font-weight:      500;
}

.topnav-status {
  display:     flex;
  align-items: center;
  gap:         1rem;
  flex:        1;
}

.live-indicator {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   0.8rem;
  color:       var(--text-2);
}

.live-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--text-3);
}

.live-dot.active {
  background: var(--green);
  animation:  livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,230,118,0); }
  50%       { opacity: 0.8; box-shadow: 0 0 0 4px rgba(0,230,118,0.2); }
}

.session-timer {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   0.8rem;
}

.timer-label { color: var(--text-3); }
.timer-value {
  font-family: var(--font-mono);
  font-weight: 500;
  color:       var(--accent);
  font-size:   0.85rem;
}

.topnav-actions { margin-left: auto; }

.btn-primary {
  padding:       9px 22px;
  font-family:   var(--font);
  font-size:     0.875rem;
  font-weight:   600;
  color:         var(--bg);
  background:    var(--accent);
  border:        none;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    opacity var(--transition), transform 0.1s;
  white-space:   nowrap;
}
.btn-primary:hover   { opacity: 0.85; }
.btn-primary:active  { transform: scale(0.97); }
.btn-primary:disabled {
  background: var(--surface-2);
  color:      var(--text-3);
  cursor:     not-allowed;
  opacity:    1;
}
.btn-primary.btn-stop {
  background: transparent;
  color:      var(--red);
  border:     1px solid rgba(255,82,82,0.4);
}
.btn-primary.btn-stop:hover { background: var(--red-dim); }

/* ── DASHBOARD LAYOUT ────────────────────────────────────────── */
.dashboard {
  display:    grid;
  grid-template-columns: 1fr 1fr;
  gap:        1.25rem;
  padding:    calc(var(--nav-h) + 1.25rem) 1.25rem 2rem;
  max-width:  1280px;
  margin:     0 auto;
}

/* Stack to single column on any screen smaller than 860px */
@media (max-width: 860px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
}

/* On very wide screens give more space to the video */
@media (min-width: 1100px) {
  .dashboard {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* ── VIDEO COLUMN ────────────────────────────────────────────── */
.video-col {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  /* Removed sticky — it caused scroll-to-top issues on small screens */
  align-self:     start;
}

.status-bar {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       8px 14px;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size:     0.82rem;
}

.status-fps {
  margin-left:  auto;
  font-family:  var(--font-mono);
  font-size:    0.78rem;
  color:        var(--text-2);
}

.dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
}
.dot--waiting { background: var(--yellow); }
.dot--running { background: var(--green); animation: livePulse 2s infinite; }
.dot--error   { background: var(--red); }

/* VIDEO WRAPPER */
.video-wrapper {
  position:      relative;
  width:         100%;
  background:    #000;
  border-radius: var(--radius);
  overflow:      hidden;
  border:        1px solid var(--border);
  aspect-ratio:  4 / 3;
}

video#webcam {
  width:       100%;
  height:      100%;
  object-fit:  contain; /* contain = no cropping = landmarks always match */
  display:     block;
  transform:   scaleX(-1);
}

canvas#overlay-canvas {
  position:       absolute;
  top: 0; left: 0;
  width:          100%;
  height:         100%;
  pointer-events: none;
  transform:      scaleX(-1);
}

/* Stat overlay on top of video */
.video-overlay-stats {
  position:      absolute;
  bottom:        10px;
  left:          50%;
  transform:     translateX(-50%);
  display:       flex;
  align-items:   center;
  gap:           0;
  background:    rgba(10,12,18,0.75);
  backdrop-filter: blur(8px);
  border:        1px solid var(--border-2);
  border-radius: 30px;
  overflow:      hidden;
  padding:       0;
}

.vos-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        7px 16px;
  gap:            1px;
}

.vos-label {
  font-size:  0.62rem;
  color:      var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vos-value {
  font-family: var(--font-mono);
  font-size:   0.85rem;
  font-weight: 500;
  color:       var(--accent);
}

.vos-divider {
  width:      1px;
  height:     28px;
  background: var(--border);
}

/* Feedback banner */
.feedback-banner {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 16px;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-left:   3px solid var(--accent);
  border-radius: var(--radius-sm);
  min-height:    52px;
}

.feedback-icon { font-size: 1.2rem; flex-shrink: 0; }

.feedback-text {
  font-size:   0.875rem;
  color:       var(--text);
  line-height: 1.4;
}

/* ── PANELS COLUMN ───────────────────────────────────────────── */
.panels-col {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

/* ── CARD ────────────────────────────────────────────────────── */
.card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       1.1rem 1.25rem;
}

.card-compact { padding: 0.9rem 1.25rem; }

.card-header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.card-title {
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:          var(--text-2);
}

.card-badge {
  font-size:     0.62rem;
  font-weight:   600;
  padding:       2px 8px;
  border-radius: 20px;
  letter-spacing:0.3px;
}
.badge-ai {
  background: var(--accent-dim);
  color:      var(--accent);
  border:     1px solid rgba(0,229,255,0.25);
}

.card-note {
  font-size:  0.72rem;
  color:      var(--text-3);
  margin-top: 10px;
  text-align: center;
}

/* ── EMOTION CARD ────────────────────────────────────────────── */
.emotion-hero {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.emotion-emoji-large {
  font-size:   2.4rem;
  line-height: 1;
  transition:  all 0.4s ease;
}

.emotion-name-large {
  font-size:      1.1rem;
  font-weight:    700;
  text-transform: capitalize;
  color:          var(--text);
}

.emotion-conf-text {
  font-size: 0.75rem;
  color:     var(--text-2);
  margin-top:3px;
}

.emotion-grid {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.emotion-row {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.er-label {
  font-size:  0.75rem;
  color:      var(--text-2);
  width:      82px;
  flex-shrink:0;
}

.er-track {
  flex:          1;
  height:        6px;
  background:    var(--surface-2);
  border-radius: 3px;
  overflow:      hidden;
}

.er-fill {
  height:        100%;
  border-radius: 3px;
  width:         0%;
  transition:    width 0.35s ease, opacity 0.3s;
}

.fill-happy     { background: #00e676; }
.fill-neutral   { background: #00e5ff; }
.fill-sad       { background: #7986cb; }
.fill-angry     { background: #ff5252; }
.fill-surprised { background: #ffd740; }
.fill-fearful   { background: #ff6d00; }
.fill-disgusted { background: #b2ff59; }

.er-pct {
  font-family:          var(--font-mono);
  font-size:            0.72rem;
  color:                var(--text-2);
  width:                32px;
  text-align:           right;
  flex-shrink:          0;
  font-variant-numeric: tabular-nums;
}

/* ── FOCUS RING ──────────────────────────────────────────────── */
.focus-ring-wrap {
  position:        relative;
  width:           130px;
  height:          130px;
  margin:          0 auto 0.5rem;
}

.focus-ring {
  width:     100%;
  height:    100%;
  transform: rotate(-90deg);
}

.ring-bg {
  fill:         none;
  stroke:       var(--surface-2);
  stroke-width: 10;
}

.ring-fill {
  fill:               none;
  stroke:             var(--accent);
  stroke-width:       10;
  stroke-linecap:     round;
  transition:         stroke-dashoffset 0.5s ease, stroke 0.5s ease;
}

.ring-fill.ring-medium { stroke: var(--yellow); }
.ring-fill.ring-low    { stroke: var(--red); }

.focus-ring-center {
  position:        absolute;
  top: 50%; left: 50%;
  transform:       translate(-50%, -50%);
  text-align:      center;
}

.focus-ring-number {
  display:     block;
  font-family: var(--font-mono);
  font-size:   1.8rem;
  font-weight: 700;
  color:       var(--text);
  line-height: 1;
}

.focus-ring-label {
  font-size: 0.72rem;
  color:     var(--text-3);
}

.focus-score-badge {
  font-family: var(--font-mono);
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--accent);
}

/* ── METRIC TILES ────────────────────────────────────────────── */
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     8px;
}

.metric-tile {
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       12px 14px;
  display:       flex;
  flex-direction:column;
  gap:           3px;
  transition:    border-color var(--transition);
}

.metric-tile.tile-warn { border-color: rgba(255,215,64,0.35); }
.metric-tile.tile-good { border-color: rgba(0,230,118,0.25); }

.metric-tile-label {
  font-size:  0.68rem;
  color:      var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.metric-tile-value {
  font-family: var(--font-mono);
  font-size:   1rem;
  font-weight: 600;
  color:       var(--text);
}

.metric-tile-sub {
  font-size: 0.65rem;
  color:     var(--text-3);
}

/* ── SESSION STATS ───────────────────────────────────────────── */
.session-stats {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.stat-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         7px 0;
  border-bottom:   1px solid var(--border);
  font-size:       0.83rem;
}
.stat-row:last-child { border-bottom: none; }

.stat-label { color: var(--text-2); }
.stat-value {
  font-family:          var(--font-mono);
  font-size:            0.82rem;
  font-weight:          500;
  color:                var(--text);
  font-variant-numeric: tabular-nums;
}

/* Coloured stat values */
.val-good    { color: var(--green) !important; }
.val-warn    { color: var(--yellow) !important; }
.val-bad     { color: var(--red) !important; }
.val-accent  { color: var(--accent) !important; }

/* ── PHASE LIST ──────────────────────────────────────────────── */
.phase-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }

.phase-item {
  font-size:   0.78rem;
  padding:     6px 10px;
  border-radius: var(--radius-xs);
  background:  var(--surface-2);
  color:       var(--text-3);
  border-left: 3px solid transparent;
}
.phase-done { color: var(--green);  border-left-color: var(--green);  }
.phase-next { color: var(--yellow); border-left-color: var(--yellow); }

/* ── CALIBRATION OVERLAY ─────────────────────────────────────── */
.calib-overlay {
  position:        absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:      rgba(10,12,18,0.9);
  backdrop-filter: blur(4px);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         20;
  border-radius:   var(--radius);
}

.calib-content {
  text-align:     center;
  padding:        2rem;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
}

.calib-icon {
  font-size:  2.8rem;
  line-height:1;
  animation:  calibPulse 1s ease-in-out infinite;
}

@keyframes calibPulse {
  0%, 100% { transform: scale(1);    opacity: 1;  }
  50%       { transform: scale(1.18); opacity: 0.7;}
}

.calib-label {
  font-size:  0.95rem;
  font-weight:700;
  color:      var(--accent);
  margin:     0;
}

.calib-bar-track {
  width:         240px;
  height:        6px;
  background:    rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow:      hidden;
}

.calib-bar-fill {
  height:     100%;
  width:      0%;
  background: var(--accent);
  border-radius:3px;
  transition: width 0.15s linear;
}

.calib-hint {
  font-size:  0.8rem;
  color:      var(--text-2);
  margin:     0;
  max-width:  200px;
  line-height:1.5;
}

.calib-hint strong { color: var(--accent); font-weight: 600; }

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 3px; }


/* ═══════════════════════════════════════════════════════════
   PHASE 5 — AI CHAT STYLES
═══════════════════════════════════════════════════════════ */

.chat-card { padding-bottom: 0.75rem; }

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

.chat-server-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--text-3);
}
.chat-server-dot.dot-online  { background: var(--green); animation: livePulse 2s infinite; }
.chat-server-dot.dot-offline { background: var(--red); }

/* Messages container */
.chat-messages {
  max-height:    260px;
  overflow-y:    auto;
  padding:       4px 0 8px;
  display:       flex;
  flex-direction:column;
  gap:           10px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-2) transparent;
}

/* Individual message rows */
.chat-msg {
  display:    flex;
  gap:        8px;
  align-items:flex-start;
}

.chat-msg--user  { flex-direction: row-reverse; }
.chat-msg--system {
  justify-content:center;
  font-size:  0.74rem;
  color:      var(--text-3);
  text-align: center;
  padding:    4px 0;
}
.chat-msg--system p { margin: 0; }

/* AI avatar badge */
.chat-avatar {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      var(--accent-dim);
  border:          1px solid rgba(0,229,255,0.25);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.62rem;
  font-weight:     700;
  color:           var(--accent);
  flex-shrink:     0;
}

/* Chat bubble */
.chat-bubble {
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: 0 10px 10px 10px;
  padding:       9px 12px;
  max-width:     88%;
}

.chat-bubble--user {
  background:    var(--accent-dim);
  border-color:  rgba(0,229,255,0.2);
  border-radius: 10px 0 10px 10px;
}

.chat-bubble p {
  font-size:   0.82rem;
  color:       var(--text);
  line-height: 1.5;
  margin:      0;
}

.chat-time {
  display:    block;
  font-size:  0.65rem;
  color:      var(--text-3);
  margin-top: 4px;
  text-align: right;
}

/* Auto-analysis toggle row */
.chat-auto-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 0 8px;
  border-top:      1px solid var(--border);
  border-bottom:   1px solid var(--border);
  margin:          6px 0;
}

.chat-toggle-label {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
  font-size:   0.75rem;
  color:       var(--text-2);
  user-select: none;
}

.chat-toggle-label input { display: none; }

.chat-toggle-track {
  width:         34px;
  height:        18px;
  background:    var(--surface-2);
  border:        1px solid var(--border-2);
  border-radius: 9px;
  position:      relative;
  transition:    background var(--transition);
}

.chat-toggle-thumb {
  position:      absolute;
  top:           2px;
  left:          2px;
  width:         12px;
  height:        12px;
  border-radius: 50%;
  background:    var(--text-3);
  transition:    transform var(--transition), background var(--transition);
}

.chat-toggle-label input:checked + .chat-toggle-track {
  background: var(--accent-dim);
  border-color: rgba(0,229,255,0.4);
}
.chat-toggle-label input:checked + .chat-toggle-track .chat-toggle-thumb {
  transform:  translateX(16px);
  background: var(--accent);
}

.chat-status-text {
  font-size: 0.68rem;
  color:     var(--text-3);
}

/* Input row */
.chat-input-row {
  display:     flex;
  gap:         8px;
  padding-top: 4px;
  align-items: flex-end;
}

.chat-input {
  flex:          1;
  padding:       10px 14px;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  color:         var(--text);
  font-family:   var(--font);
  font-size:     16px;
  outline:       none;
  transition:    border-color var(--transition);
  resize:        none;
  overflow-y:    hidden;
  min-height:    42px;
  max-height:    160px;
  line-height:   1.5;
  display:       block;
  width:         100%;
  -webkit-appearance: none;
}
.chat-input:focus        { border-color: var(--accent); }
.chat-input::placeholder { color: var(--text-3); }

.chat-send-btn {
  width:           36px;
  height:          36px;
  background:      var(--accent);
  border:          none;
  border-radius:   var(--radius-sm);
  color:           var(--bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  flex-shrink:     0;
  transition:      opacity var(--transition);
}
.chat-send-btn:hover { opacity: 0.85; }

/* Typing indicator dots */
.typing-dots {
  display:     flex;
  gap:         4px;
  align-items: center;
  padding:     2px 0;
}
.typing-dots span {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--accent);
  animation:     typingBounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

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

/* Value colour helpers (referenced in chat JS) */
.val-good   { color: var(--green)  !important; }
.val-warn   { color: var(--yellow) !important; }
.val-bad    { color: var(--red)    !important; }
.val-accent { color: var(--accent) !important; }


/* ═══════════════════════════════════════════════════════════
   PHASE 6 — PWA INSTALL BUTTON
   Appears in the nav bar when the browser allows installation
═══════════════════════════════════════════════════════════ */

.btn-install {
  padding:       8px 16px;
  font-family:   var(--font);
  font-size:     0.8rem;
  font-weight:   600;
  color:         var(--accent);
  background:    var(--accent-dim);
  border:        1px solid rgba(0,229,255,0.3);
  border-radius: var(--radius-sm);
  cursor:        pointer;
  margin-right:  8px;
  transition:    all var(--transition);
  white-space:   nowrap;
}

.btn-install:hover {
  background: rgba(0,229,255,0.2);
  border-color: var(--accent);
}

/* Mobile responsive improvements for PWA */
@media (max-width: 480px) {
  .topnav { padding: 0 0.75rem; gap: 0.5rem; }
  .brand-name { display: none; }
  .session-timer .timer-label { display: none; }
  .btn-primary { padding: 8px 14px; font-size: 0.8rem; }
  .btn-install  { padding: 7px 10px; font-size: 0.75rem; }
  .dashboard {
    padding: calc(var(--nav-h) + 0.75rem) 0.75rem 2rem;
    gap: 0.75rem;
  }
  .card { padding: 0.9rem 1rem; }
  .focus-ring-wrap { width: 110px; height: 110px; }
  .metric-grid { gap: 6px; }
  .chat-messages { max-height: 200px; }

  /* Video portrait ratio on mobile */
  .video-wrapper { aspect-ratio: 3 / 4; }

  /* Feedback banner smaller on mobile */
  .feedback-banner { padding: 10px 12px; min-height: 44px; }
  .feedback-text { font-size: 0.82rem; }

  /* Video overlay stats smaller on mobile */
  .vos-item { padding: 5px 10px; }
  .vos-value { font-size: 0.78rem; }
  .vos-label { font-size: 0.58rem; }
}

@media (max-width: 360px) {
  .brand-version { display: none; }
  .video-overlay-stats { display: none !important; }
}

/* Performance hints for smooth rendering */
canvas#overlay-canvas {
  will-change: contents;
}

video#webcam {
  will-change: auto;
}

/* Prevent scroll jumping when typing in chat input on mobile */
.chat-card {
  -webkit-overflow-scrolling: touch;
}

.chat-messages {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Mobile install button — clean card at bottom of panels, not floating */
@media (max-width: 600px) {
  .install-card {
    position:  relative;
    bottom:    auto;
    left:      auto;
    right:     auto;
    z-index:   1;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    margin:    0;
  }

  .install-btn-main {
    padding:   13px;
    font-size: 0.95rem;
  }
}


/* Prevent any text input from triggering iOS zoom */
input, textarea, select {
  font-size: 16px !important;
}

/* Prevent any text input from triggering iOS zoom */
input, textarea, select {
  font-size: 16px !important;
  -webkit-appearance: none;
}

/* ── PROFESSIONAL INSTALL CARD ───────────────────────────── */
.install-card {
  border-color: rgba(0,229,255,0.35);
  background:   linear-gradient(135deg, var(--surface) 0%, rgba(0,229,255,0.06) 100%);
  padding:      1.1rem 1.25rem;
}

.install-card-header {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom: 14px;
}

.install-icon-wrap {
  width:           44px;
  height:          44px;
  background:      var(--accent-dim);
  border:          1px solid rgba(0,229,255,0.3);
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.install-card-text {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.install-card-text strong {
  font-size:  0.9rem;
  font-weight:700;
  color:      var(--text);
}

.install-card-text span {
  font-size: 0.75rem;
  color:     var(--text-2);
}

.install-close-btn {
  background:  transparent;
  border:      none;
  color:       var(--text-3);
  font-size:   1.1rem;
  cursor:      pointer;
  padding:     4px 6px;
  line-height: 1;
  flex-shrink: 0;
  transition:  color var(--transition);
}
.install-close-btn:hover { color: var(--text); }

/* The big install button for Android/Desktop */
.install-btn-main {
  width:         100%;
  padding:       13px;
  background:    var(--accent);
  color:         var(--bg);
  border:        none;
  border-radius: var(--radius-sm);
  font-family:   var(--font);
  font-size:     0.95rem;
  font-weight:   700;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           8px;
  transition:    opacity 0.2s, transform 0.1s;
}
.install-btn-main:hover  { opacity: 0.85; }
.install-btn-main:active { transform: scale(0.98); }

/* iOS step-by-step instructions */
.install-ios-steps {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.install-step {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-size:   0.82rem;
  color:       var(--text-2);
  line-height: 1.5;
}

.install-step strong { color: var(--text); }

.install-step-num {
  width:           22px;
  height:          22px;
  background:      var(--accent-dim);
  border:          1px solid rgba(0,229,255,0.3);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.72rem;
  font-weight:     700;
  color:           var(--accent);
  flex-shrink:     0;
  margin-top:      1px;
}