/* ── APP 3D ──────────────────────────────────────────────────────────────────────────────
   The futuristic HUD look (home3d.css) carried through the rest of the app: looks only,
   no layout or behaviour changes. Loaded after main.css and home3d.css.
   - the 3D background (home3d.js's .h3d-bg) stays behind chats too, dimmer and still
   - glass top bar, input area and sidebar with a neon edge
   - 3D glowing primary buttons (glossy top, thickness edge, glow, press-to-sink)
   - glass pop-ups with a gradient rim, blurred backdrops
   - glowing avatars, chat items, data cards */

/* ── Background behind chats ── */
.main:not(.home-mode) .h3d-bg { opacity: 0.55; }
.main:not(.home-mode) .h3d-floor::before { animation: none; opacity: 0.35; filter: none; }
.main:not(.home-mode) .h3d-horizon { opacity: 0.18; }
.main .chat-area, .main .input-area { position: relative; z-index: 1; }

/* ── Top bar + input area: glass ── */
.topbar {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 55%, transparent), color-mix(in srgb, var(--brand2) 55%, transparent), transparent) 1;
}
.topbar-title {
  background: linear-gradient(90deg, var(--text), var(--brand-lt, var(--brand)));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.02em;
}
.input-area {
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 92%, transparent) 55%, transparent);
  border-top-color: transparent;
}
.input-wrap {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 50%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand2) 50%, transparent)) border-box;
  border: 1.2px solid transparent;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--brand) 55%, transparent);
}
.input-wrap:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent),
              0 12px 36px -10px color-mix(in srgb, var(--brand) 75%, transparent);
}
.btn-send {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 -1px color-mix(in srgb, var(--brand2) 40%, #05070f),
              0 0 16px color-mix(in srgb, var(--brand2) 60%, transparent);
}

/* ── Sidebar: glass panel with a neon edge ── */
.sidebar {
  background:
    radial-gradient(120% 50% at 0% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 60%),
    radial-gradient(120% 40% at 100% 100%, color-mix(in srgb, var(--brand2) 8%, transparent), transparent 60%),
    var(--sidebar);
  border-right: 1px solid transparent;
  border-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 60%, transparent), color-mix(in srgb, var(--brand2) 40%, transparent) 60%, transparent) 1;
  box-shadow: 1px 0 24px -6px color-mix(in srgb, var(--brand) 35%, transparent);
}
.chat-item { transition: background 0.12s, box-shadow 0.15s, transform 0.15s; }
.chat-item:hover { transform: translateX(2px); }
.chat-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 22%, transparent), color-mix(in srgb, var(--brand) 4%, transparent));
  box-shadow: inset 2px 0 0 var(--brand), 0 0 18px -6px color-mix(in srgb, var(--brand) 60%, transparent);
}
.btn-new {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 26%, transparent), color-mix(in srgb, var(--brand) 8%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 0 -1px color-mix(in srgb, var(--brand) 28%, #05070f),
              0 0 14px -4px color-mix(in srgb, var(--brand) 60%, transparent);
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.btn-new:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 0 -1px color-mix(in srgb, var(--brand) 28%, #05070f); }

/* ── Primary buttons: 3D HUD ── */
.login-submit, .gate-submit, .action-btn-primary, .wb-save-btn, .pw-gen-btn, .mp-btn-move,
.settings-garmin-btn, .garmin-prompt-btn, .zones-calc-confirm-btn, .zones-save-btn,
.btn-settings-save, .tv-bundle-buy, .wc-comment-send, .tw-add-btn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -10px 18px -10px rgba(0, 0, 0, 0.35),
    0 4px 0 -1px color-mix(in srgb, var(--brand) 35%, #05070f),
    0 8px 22px -8px color-mix(in srgb, var(--brand) 70%, transparent);
  transition: transform 0.1s, box-shadow 0.15s, filter 0.15s, opacity 0.15s;
}
.login-submit:hover, .gate-submit:hover, .action-btn-primary:hover, .wb-save-btn:hover, .pw-gen-btn:hover,
.mp-btn-move:hover, .settings-garmin-btn:hover, .garmin-prompt-btn:hover, .zones-calc-confirm-btn:hover,
.zones-save-btn:hover, .btn-settings-save:hover, .tv-bundle-buy:hover, .tw-add-btn:hover { filter: brightness(1.12); }
.login-submit:active, .gate-submit:active, .action-btn-primary:active, .wb-save-btn:active, .pw-gen-btn:active,
.mp-btn-move:active, .settings-garmin-btn:active, .garmin-prompt-btn:active, .zones-calc-confirm-btn:active,
.zones-save-btn:active, .btn-settings-save:active, .tv-bundle-buy:active, .wc-comment-send:active, .tw-add-btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 -1px color-mix(in srgb, var(--brand) 35%, #05070f),
              0 3px 10px -6px color-mix(in srgb, var(--brand) 70%, transparent);
}

/* ── Pop-ups: glass with a gradient rim; blurred backdrop ── */
.login-overlay, .gate-overlay, .settings-overlay, .ap-wizard-overlay, .garmin-prompt-overlay,
.zones-calc-overlay, .tv-checkout-overlay, .tc-modal-overlay, .sidebar-backdrop {
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.login-box, .gate-box, .settings-modal, .tc-modal {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 30%) padding-box,
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, var(--brand), color-mix(in srgb, var(--brand2) 60%, transparent) 50%, color-mix(in srgb, var(--brand) 30%, transparent)) border-box;
  border: 1.3px solid transparent;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 50px -10px color-mix(in srgb, var(--brand) 45%, transparent);
}

/* ── Messages ── */
.msg-avatar.ai, .msg-avatar.user {
  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--brand) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.msg-avatar.ai { box-shadow: 0 0 14px -2px color-mix(in srgb, var(--brand2) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.msg-name.ai {
  background: linear-gradient(90deg, var(--brand2), var(--brand));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Data cards in chat: a lit top edge and a little lift ── */
.stat-card, .action-card {
  box-shadow: 0 0 40px var(--b1-07, transparent), 0 10px 30px -10px rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent);
}
.ap-card, .cal-cell { transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.ap-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--brand) 60%, transparent); }
.cal-cell:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent), 0 6px 16px -8px color-mix(in srgb, var(--brand) 60%, transparent); }

/* ── Scrollbars: thin neon ── */
.chat-area::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 45%, transparent), color-mix(in srgb, var(--brand2) 35%, transparent));
}

/* ── Light theme: keep it clean ── */
body.light .topbar { background: color-mix(in srgb, var(--bg) 82%, transparent); }
body.light .input-area { background: linear-gradient(to top, var(--bg) 55%, transparent); }
body.light .sidebar { box-shadow: 1px 0 16px -8px color-mix(in srgb, var(--brand) 35%, transparent); }
body.light .topbar-title { background: none; -webkit-text-fill-color: currentColor; }
body.light .main:not(.home-mode) .h3d-bg { opacity: 0.3; }

@media (prefers-reduced-motion: reduce) {
  .chat-item:hover, .ap-card:hover { transform: none; }
}