/* ============================================================
   ForensAI — Navy / Cyan Theme  (styles-theme-navy.css)
   Toggle: add class "theme-navy" to .landing-page wrapper.
   To go global: add "theme-navy" to <body> instead.
   Zero impact when class is absent.
   ============================================================ */

/* ── Custom properties (available anywhere inside .theme-navy) ── */
.theme-navy {
  --tn-bg:          #0A1428;
  --tn-surface:     #1a2540;
  --tn-surface-2:   #243047;
  --tn-sidebar-bg:  #101d33;
  --tn-accent:      #00D4FF;
  --tn-accent-dim:  #00BFFF;
  --tn-accent-rgb:  0, 212, 255;
  --tn-text:        #F8FAFC;
  --tn-text-sec:    #E2E8F0;
  --tn-text-muted:  #64748B;
  --tn-border:      rgba(255,255,255,0.08);
  --tn-success:     #22C55E;
  --tn-danger:      #FF3B5C;
}

/* ══════════════════════════════════════════════════════════════
   BODY + ROOT
   Use !important to beat the inline <style> in landing.js
   which appears later in the cascade (same specificity without it)
   ══════════════════════════════════════════════════════════════ */
body:has(.landing-page.theme-navy) {
  background-color: #0A1428 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%231a2540' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'/%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  color: #F8FAFC;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR  (.hp-sidebar and children)
   ══════════════════════════════════════════════════════════════ */
.theme-navy .hp-sidebar {
  background: var(--tn-sidebar-bg) !important;
  border-right-color: rgba(255,255,255,0.07) !important;
}
.theme-navy .hp-sidebar-rail-top {
  border-bottom: none;
}
/* Brand mark SVG — cyan in navy theme */
.theme-navy .hp-sidebar-icon-mark {
  color: var(--tn-accent) !important;
}
.theme-navy .hp-sidebar-icon-btn .hp-icon-hover {
  color: rgba(255,255,255,0.7) !important;
}
.theme-navy .hp-sidebar-toggle {
  color: var(--tn-text-muted) !important;
}
.theme-navy .hp-sidebar-toggle:hover {
  background: rgba(255,255,255,0.07) !important;
  color: var(--tn-text) !important;
}
.theme-navy .hp-sidebar-link {
  color: #94A3B8 !important;
}
.theme-navy .hp-sidebar-link:hover {
  background: rgba(255,255,255,0.07) !important;
  color: var(--tn-text) !important;
}
.theme-navy .hp-sidebar-nav-divider {
  background: rgba(255,255,255,0.07) !important;
}
.theme-navy .hp-sidebar-bottom {
  border-top-color: rgba(255,255,255,0.07) !important;
}
.theme-navy .hp-sidebar-email {
  color: var(--tn-text-muted) !important;
}
.theme-navy .hp-sidebar-legal-link {
  color: var(--tn-text-muted) !important;
}
.theme-navy .hp-sidebar-legal-link:hover {
  color: #94A3B8 !important;
}
.theme-navy .hp-sidebar-search-input {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: var(--tn-text) !important;
}
.theme-navy .hp-sidebar-search-input:focus {
  border-color: var(--tn-accent) !important;
}
.theme-navy .hp-sidebar-search-input::placeholder {
  color: var(--tn-text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════════════════════ */
.theme-navy .hp-topbar-login {
  color: #94A3B8 !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.theme-navy .hp-topbar-login:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.25) !important;
  color: var(--tn-text) !important;
}
.theme-navy .hp-topbar-signup {
  background: var(--tn-accent) !important;
  border-color: var(--tn-accent) !important;
  color: #0A1428 !important;
}
.theme-navy .hp-topbar-signup:hover {
  background: var(--tn-accent-dim) !important;
  border-color: var(--tn-accent-dim) !important;
}
.theme-navy .hp-mobile-menu-btn {
  color: #94A3B8 !important;
}
.theme-navy .hp-mobile-menu-btn:hover {
  color: var(--tn-text) !important;
}

/* Brand dropdown — already dark by default, no overrides needed for navy */
.theme-navy .hp-topbar-brand-btn:hover { background: rgba(255,255,255,0.07) !important; }
.theme-navy .hp-brand-chevron { color: rgba(255,255,255,0.35) !important; }

/* Rail icons — navy */
.theme-navy .hp-rail-icon-btn { color: #64748b !important; }
.theme-navy .hp-rail-icon-btn:hover { background: rgba(255,255,255,0.07) !important; color: var(--tn-text) !important; }

/* Mobile fixed input zone — navy */
@media (max-width: 768px) {
  .theme-navy .hp-input-zone {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   LOGO + TAGLINE
   ══════════════════════════════════════════════════════════════ */
.theme-navy .hp-logo-serif {
  color: var(--tn-text) !important;
}
.theme-navy .hp-tagline {
  color: var(--tn-text) !important;
}
.theme-navy .hp-social-proof {
  color: var(--tn-text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════
   CHAT INPUT + SEND BUTTON
   ══════════════════════════════════════════════════════════════ */
.theme-navy .hp-input {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: var(--tn-text) !important;
  caret-color: var(--tn-accent) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3) !important;
}
.theme-navy .hp-input:focus {
  border-color: rgba(0,212,255,0.5) !important;
  background: rgba(255,255,255,0.09) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.4), 0 0 0 2px rgba(0,212,255,0.15) !important;
}
.theme-navy .hp-input::placeholder {
  color: #94A3B8 !important;
}
.theme-navy .hp-send-btn {
  background: var(--tn-accent) !important;
  color: #0A1428 !important;
}
.theme-navy .hp-send-btn:hover {
  background: var(--tn-accent-dim) !important;
}

/* ══════════════════════════════════════════════════════════════
   SUGGESTION PILLS
   ══════════════════════════════════════════════════════════════ */
.theme-navy .hp-pill {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: #94A3B8 !important;
  box-shadow: none !important;
}
.theme-navy .hp-pill:hover {
  border-color: rgba(0,212,255,0.45) !important;
  color: var(--tn-accent) !important;
  background: rgba(0,212,255,0.07) !important;
}

/* ══════════════════════════════════════════════════════════════
   INTRO MODAL
   ══════════════════════════════════════════════════════════════ */
.theme-navy .hp-intro-backdrop {
  background: rgba(0,0,0,0.6) !important;
}
.theme-navy .hp-intro-card {
  background: #1a2540 !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(255,255,255,0.08);
}
.theme-navy .hp-intro-close {
  background: rgba(255,255,255,0.08) !important;
  color: #94A3B8 !important;
}
.theme-navy .hp-intro-close:hover {
  background: rgba(255,255,255,0.14) !important;
  color: var(--tn-text) !important;
}
.theme-navy .hp-intro-headline {
  color: var(--tn-text) !important;
}
.theme-navy .hp-intro-body {
  color: var(--tn-text-sec) !important;
}
.theme-navy .hp-intro-price {
  color: var(--tn-accent) !important;
}
.theme-navy .hp-intro-cta {
  background: var(--tn-accent) !important;
  color: #0A1428 !important;
}
.theme-navy .hp-intro-cta:hover {
  background: var(--tn-accent-dim) !important;
}

/* ══════════════════════════════════════════════════════════════
   + BUTTON + DROPDOWN MENU
   ══════════════════════════════════════════════════════════════ */
.theme-navy .hp-plus-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.4) !important;
}
.theme-navy .hp-plus-btn:hover {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.75) !important;
}
.theme-navy .hp-plus-btn.active {
  background: transparent !important;
  border: none !important;
  color: var(--tn-accent) !important;
}
.theme-navy .hp-plus-menu {
  background: #1a2540 !important;
  border-color: rgba(255,255,255,0.1) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
.theme-navy .hp-plus-option {
  color: #94A3B8 !important;
}
.theme-navy .hp-plus-option:hover {
  background: rgba(255,255,255,0.07) !important;
  color: var(--tn-text) !important;
}
.theme-navy .hp-plus-option svg {
  color: var(--tn-text-muted) !important;
}

/* Auth gate — navy overrides */
.theme-navy .hp-auth-gate {
  background: #1a2540 !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.theme-navy .hp-auth-gate-headline { color: var(--tn-text) !important; }
.theme-navy .hp-auth-gate-sub { color: var(--tn-text-muted) !important; }
.theme-navy .hp-auth-gate-login {
  background: transparent !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: var(--tn-text) !important;
}
.theme-navy .hp-auth-gate-login:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.35) !important;
}
.theme-navy .hp-auth-gate-signup {
  background: var(--tn-accent, #00d4ff) !important;
  color: #0a0f1e !important;
}
.theme-navy .hp-auth-gate-signup:hover { opacity: 0.9 !important; }

/* ══════════════════════════════════════════════════════════════
   MESSAGES + CHAT BUBBLES
   ══════════════════════════════════════════════════════════════ */
/* AI message bubble */
.theme-navy .hp-msg-text {
  background: rgba(255,255,255,0.07) !important;
  color: var(--tn-text-sec) !important;
}
/* User message bubble */
.theme-navy .hp-msg-user .hp-msg-text {
  background: var(--tn-accent) !important;
  color: #0A1428 !important;
}
/* Avatar */
.theme-navy .hp-avatar {
  color: var(--tn-accent) !important;
}
/* Scrollbar in messages */
.theme-navy .hp-messages {
  scrollbar-color: rgba(255,255,255,0.12) transparent !important;
}
.theme-navy .hp-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12) !important;
}
/* Typing dots */
.theme-navy .hp-typing-dots {
  background: rgba(255,255,255,0.07) !important;
}

/* ══════════════════════════════════════════════════════════════
   QUICK REPLY BUTTONS (inside AI messages)
   ══════════════════════════════════════════════════════════════ */
.theme-navy .hp-reply-btn {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #94A3B8 !important;
}
.theme-navy .hp-reply-btn:hover {
  border-color: var(--tn-accent) !important;
  color: var(--tn-accent) !important;
}

/* ══════════════════════════════════════════════════════════════
   SCAN FINDINGS CARDS
   ══════════════════════════════════════════════════════════════ */
.theme-navy .hp-finding {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.theme-navy .hp-finding-title {
  color: var(--tn-text) !important;
}
.theme-navy .hp-finding-meta {
  color: var(--tn-text-muted) !important;
}
.theme-navy .hp-unlock-btn {
  background: var(--tn-accent) !important;
  color: #0A1428 !important;
  border-color: var(--tn-accent) !important;
}
.theme-navy .hp-unlock-btn:hover {
  background: var(--tn-accent-dim) !important;
}

/* ══════════════════════════════════════════════════════════════
   BOTTOM DISCLAIMER BAR
   ══════════════════════════════════════════════════════════════ */
.theme-navy .hp-bottom-bar {
  background: rgba(10,20,40,0.92) !important;
  color: var(--tn-text-muted) !important;
  border-top: none !important;
}
@media (max-width: 768px) {
  .theme-navy .hp-bottom-bar {
    border-top: none !important;
    background: transparent !important;
  }
}
.theme-navy .hp-bottom-bar a {
  color: #475569 !important;
}
.theme-navy .hp-bottom-bar a:hover {
  color: #94A3B8 !important;
}

/* ══════════════════════════════════════════════════════════════
   HOME SCAN DROP ZONE  (orange refs → cyan)
   ══════════════════════════════════════════════════════════════ */
.theme-navy .home-scan-zone:hover,
.theme-navy .home-scan-zone.drag-over {
  border-color: var(--tn-accent) !important;
  background: rgba(0,40,60,0.6) !important;
}
.theme-navy .home-scan-click-link {
  color: var(--tn-accent) !important;
}
.theme-navy .home-scan-file-icon svg {
  stroke: var(--tn-accent) !important;
}

/* ══════════════════════════════════════════════════════════════
   LEGACY LANDING SECTIONS (hero, three-steps, justice, footer)
   These appear when scrolled below the chat zone
   ══════════════════════════════════════════════════════════════ */

/* Header */
.theme-navy .forensai-header {
  background: transparent;
}
.theme-navy .forensai-header.forensai-header-solid {
  background: rgba(10,20,40,0.93) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.theme-navy .forensai-logo {
  color: var(--tn-text) !important;
}
.theme-navy .forensai-logo-icon,
.theme-navy .forensai-logo .forensai-logo-forens,
.theme-navy .forensai-logo .logo-ai {
  color: var(--tn-accent) !important;
}
.theme-navy .forensai-nav-link {
  color: #94A3B8 !important;
}
.theme-navy .forensai-nav-link:hover {
  color: var(--tn-text) !important;
}
.theme-navy .forensai-header .forensai-header-actions .forensai-btn-secondary {
  border-color: var(--tn-accent) !important;
  color: var(--tn-accent) !important;
}
.theme-navy .forensai-header .forensai-header-actions .forensai-btn-secondary:hover {
  background: rgba(var(--tn-accent-rgb),0.1) !important;
}
.theme-navy .hp-header-signin {
  color: #94A3B8 !important;
}
.theme-navy .hp-header-signin:hover {
  color: var(--tn-text) !important;
}

/* Primary buttons everywhere */
.theme-navy .forensai-btn-primary {
  background: var(--tn-accent) !important;
  color: #0A1428 !important;
  border-color: var(--tn-accent) !important;
}
.theme-navy .forensai-btn-primary:hover {
  background: var(--tn-accent-dim) !important;
  border-color: var(--tn-accent-dim) !important;
}

/* Secondary buttons */
.theme-navy .forensai-btn-secondary {
  border-color: var(--tn-accent) !important;
  color: var(--tn-accent) !important;
  background: transparent !important;
}
.theme-navy .forensai-btn-secondary:hover {
  background: rgba(0,212,255,0.08) !important;
}

/* Hero text */
.theme-navy .forensai-hero-tagline,
.theme-navy .forensai-headline,
.theme-navy .forensai-headline-brand {
  color: var(--tn-text) !important;
}
.theme-navy .forensai-hero-subtitle,
.theme-navy .forensai-subheadline,
.theme-navy .forensai-detect-lead,
.theme-navy .forensai-section-lead {
  color: var(--tn-text-sec) !important;
}
.theme-navy .forensai-hero-cta {
  border-color: var(--tn-accent) !important;
}
.theme-navy .forensai-status {
  color: var(--tn-accent) !important;
  border-color: rgba(0,212,255,0.3) !important;
  background: rgba(0,212,255,0.06) !important;
}

/* Three-steps section */
.theme-navy #how-it-works .landing-three-steps-wrap {
  background-color: var(--tn-surface) !important;
}
.theme-navy #how-it-works .landing-three-steps-wrap .forensai-headline,
.theme-navy #how-it-works .landing-three-steps-wrap .forensai-detect-lead {
  color: var(--tn-text) !important;
}
.theme-navy #how-it-works .landing-three-steps-wrap .forensai-step-title {
  color: var(--tn-text) !important;
}
.theme-navy #how-it-works .landing-three-steps-wrap .forensai-step-description {
  color: var(--tn-text-sec) !important;
}
.theme-navy #how-it-works .landing-three-steps-wrap .forensai-step-number {
  color: var(--tn-accent) !important;
  border-color: rgba(0,212,255,0.4) !important;
  background: rgba(0,212,255,0.08) !important;
}
.theme-navy .landing-three-steps-cta {
  background: var(--tn-accent) !important;
  color: #0A1428 !important;
  border-color: var(--tn-accent) !important;
}

/* Justice / CTA section */
.theme-navy #justice-section .landing-justice-wrap {
  background-color: var(--tn-surface) !important;
}
.theme-navy #justice-section .landing-justice-wrap .forensai-headline,
.theme-navy #justice-section .landing-justice-wrap .forensai-headline-brand,
.theme-navy #justice-section .landing-justice-wrap .forensai-subheadline {
  color: var(--tn-text) !important;
}
.theme-navy #justice-section .landing-justice-wrap .forensai-access-card-headline {
  color: var(--tn-text) !important;
}
.theme-navy #justice-section .landing-justice-wrap .forensai-access-card-body {
  color: var(--tn-text-sec) !important;
}
.theme-navy #justice-section .landing-justice-wrap .forensai-access-card {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.theme-navy #justice-section .forensai-access-card-ghost {
  border-color: rgba(0,212,255,0.35) !important;
  color: var(--tn-accent) !important;
  background: transparent !important;
}
.theme-navy #justice-section .forensai-access-card-ghost:hover {
  border-color: var(--tn-accent) !important;
  background: rgba(0,212,255,0.08) !important;
}

/* Quiz card (hero) — selected → cyan */
.theme-navy .landing-quiz-hero-option.selected {
  border-color: var(--tn-accent) !important;
  background: rgba(0,212,255,0.1) !important;
}
.theme-navy .landing-quiz-hero-option.selected .landing-quiz-hero-check {
  background: var(--tn-accent) !important;
  border-color: var(--tn-accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230A1428' stroke-width='3'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") !important;
  background-size: 14px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.theme-navy .forensai-access-card-trust .upload-check {
  color: var(--tn-accent) !important;
}

/* Quiz progress / options (inline quiz) */
.theme-navy .landing-quiz-progress-fill {
  background: var(--tn-accent) !important;
}
.theme-navy .landing-quiz-option.selected-single {
  border-color: var(--tn-accent) !important;
  background: rgba(0,212,255,0.1) !important;
}
.theme-navy .landing-quiz-option.selected-single .landing-quiz-option-check {
  background: var(--tn-accent) !important;
  border-color: var(--tn-accent) !important;
}
.theme-navy .landing-quiz-option:hover {
  border-color: rgba(0,212,255,0.5) !important;
  background: rgba(0,212,255,0.06) !important;
}
.theme-navy .landing-quiz-next-btn {
  background: var(--tn-accent) !important;
  color: #0A1428 !important;
}

/* Footer */
.theme-navy .forensai-footer {
  background: #060e1c !important;
  color: var(--tn-text-muted) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.theme-navy .forensai-footer .forensai-logo-forens,
.theme-navy .forensai-footer .logo-ai,
.theme-navy .forensai-footer-logo {
  color: var(--tn-text-muted) !important;
}
.theme-navy .forensai-footer-logo-icon {
  filter: none !important;
  opacity: 0.4;
}
.theme-navy .forensai-footer-nav a {
  color: var(--tn-text-muted) !important;
}
.theme-navy .forensai-footer-nav a:hover {
  color: var(--tn-text-sec) !important;
}
.theme-navy .forensai-footer-bottom,
.theme-navy .forensai-footer-bottom-left,
.theme-navy .forensai-footer-usage,
.theme-navy .forensai-footer-bottom-right a,
.theme-navy .forensai-footer-alternatives-label {
  color: #2d3a52 !important;
}
.theme-navy .forensai-footer-bottom-right a:hover {
  color: var(--tn-text-muted) !important;
}
.theme-navy .forensai-footer-bottom {
  border-top-color: rgba(255,255,255,0.05) !important;
}
