/* ==========================================================================
   RESET & BASE
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* ==========================================================================
   THEME SHELLS & GLOBAL BACKGROUND
   (Do NOT put a text color on .site alone—theme modifiers handle it)
   ========================================================================== */
.site {
  background: url("../static/bg.jpg") no-repeat center center fixed;
  background-size: cover;
  background-attachment: fixed;
}

.site.theme-dark  { color: #eaeaea; }
.site.theme-light { color: #0e141b; }

/* ==========================================================================
   HEADER / NAV / FOOTER
   ========================================================================== */
.site-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid; position:sticky; top:0; z-index:10;
}
.theme-dark .site-header { background:#0e121a; border-color:#1f2937; }
.theme-light .site-header { background:#ffffff; border-color:#e5e7eb; }

.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.logo-dot { width:10px; height:10px; border-radius:50%; background:#ef4444; display:inline-block; }

.nav { display:flex; align-items:center; gap:10px; }
.nav a { text-decoration:none; color:inherit; padding:6px 8px; border-radius:8px; }
.theme-dark .nav a:hover { background:rgba(255,255,255,.06); }
.theme-light .nav a:hover { background:rgba(0,0,0,.06); }

.btn { border:0; border-radius:.6rem; cursor:pointer; }
.btn.primary { background:#2563eb; color:#fff; padding:.55rem .9rem; font-weight:700; }
.btn.subtle { background:transparent; color:inherit; padding:.5rem .6rem; border:1px solid transparent; }
.btn.subtle:hover { border-color:rgba(255,255,255,.15); }
.btn.xl { font-size:1.05rem; padding:.8rem 1.2rem; }
.btn.ghost {
  background: transparent; border:1px solid; padding:.7rem 1rem; border-radius:.65rem; text-decoration:none;
}
.theme-dark .btn.ghost { border-color:#273244; color:#eaeaea; }
.theme-light .btn.ghost { border-color:#cbd5e1; color:#0e141b; }
.btn.ghost:hover { transform: translateY(-1px); }

.site-footer {
  text-align:center; padding:20px 10px; border-top:1px solid;
}
.theme-dark .site-footer { background:#0b0b12; color:#cfcfcf; border-color:rgba(255,255,255,0.1); }
.theme-light .site-footer { background:#f1f5f9; color:#333; border-color:#e5e7eb; }

.site-footer a {
  text-decoration:none; font-weight:500; margin:0 6px; transition: color .2s ease;
}
.theme-dark .site-footer a { color:#60a5fa; }
.theme-dark .site-footer a:hover { color:#93c5fd; }
.theme-light .site-footer a { color:#2563eb; }
.theme-light .site-footer a:hover { color:#1d4ed8; }

/* ==========================================================================
   LANDING PAGE BACKGROUND (full-page hero)
   ========================================================================== */
.landing {
  position: relative;
  min-height: 100vh;
  display: grid;
  gap: 40px;
  padding: 28px 16px 64px;
  text-align: center;

  /* Static path (CSS cannot use Jinja) */
  background: url("../static/landing-bg.jpg") no-repeat center center;
  background-size: cover;
}

/* Readability overlay */
.landing::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
}
.landing > * { position: relative; z-index: 1; }

/* Hero */
.hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding: 64px 18px;
  border: 1px solid;
}
.theme-dark .hero {
  background:
    radial-gradient(800px 400px at -10% -20%, #1f2937 0%, transparent 50%),
    radial-gradient(900px 360px at 110% 10%, #0b1220 0%, transparent 60%),
    linear-gradient(180deg, #0e1016, #0a0c12 70%);
  border-color: #1f2937;
}
.theme-light .hero {
  background:
    radial-gradient(800px 400px at -10% -20%, #e6eeff 0%, transparent 50%),
    radial-gradient(900px 360px at 110% 10%, #f3f7ff 0%, transparent 60%),
    linear-gradient(180deg, #ffffff, #f7f9ff 70%);
  border-color: #e5e7eb;
}
.hero-inner { max-width: 1080px; margin: 0 auto; }
.hero h1 { margin: 0 0 6px; font-size: clamp(28px, 5vw, 54px); line-height: 1.05; }
.hero h2 { margin: 0 0 14px; font-weight: 600; opacity: .85; font-size: clamp(16px, 2.4vw, 22px); }
.sub { margin: 10px 0 22px; opacity: .9; font-size: clamp(15px, 2.6vw, 18px); }
.hero-cta { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.hero-art { margin-top: 26px; }
.hero-card { height: 200px; border-radius: 16px; border: 1px solid; backdrop-filter: blur(6px); }
.theme-dark .hero-card { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border-color:#273244; }
.theme-light .hero-card { background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.015)); border-color:#e5e7eb; }

.hero h1, .feature h3 { position:relative; }
.hero h1::after, .feature h3::after {
  content:""; position:absolute; left:0; bottom:-6px; width:84px; height:3px; border-radius:3px;
  background: linear-gradient(90deg, #2563eb, #22d3ee); opacity:.85;
}

/* Features */
.features {
  max-width:1080px; margin:0 auto;
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }

.feature {
  border-radius:16px; border:1px solid; padding:18px 16px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.theme-dark .feature { background:#0f1117; border-color:#1f2937; }
.theme-light .feature { background:#fff;    border-color:#e5e7eb; }
.feature:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(0,0,0,.14); }

.cta-strip {
  max-width:1080px; margin:4px auto 0;
  border:1px solid; border-radius:16px; padding:16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.theme-dark .cta-strip { background:#101522; border-color:#273244; }
.theme-light .cta-strip { background:#f8fafc; border-color:#e5e7eb; }
.cta-strip p { margin:0; opacity:.92; }
.cta-strip .btn { white-space: nowrap; }

/* ==========================================================================
   COOKIE BANNER
   ========================================================================== */
.cookie-banner {
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
}
.cookie-banner .cookie-inner {
  margin: 0 auto 12px; max-width: 960px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid; border-radius:12px; padding:12px;
}
.theme-dark .cookie-banner .cookie-inner { background:#111; border-color:#1f2937; color:#e5e7eb; }
.theme-light .cookie-banner .cookie-inner { background:#fff; border-color:#e5e7eb; color:#0e141b; }
.cookie-banner a { text-decoration:underline; }
.cookie-banner .btn.primary { padding:8px 14px; border-radius:10px; }
.cookie-banner[hidden] { display:none; }

/* ==========================================================================
   AGE GATE (shared)
   ========================================================================== */
.age-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: none; /* toggled by JS */
  align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  background: rgba(8,10,18,0.72);
}
.age-gate:not([hidden]) { display:flex; }

.age-gate-inner {
  width: min(560px, 92vw);
  background: linear-gradient(180deg, #0b0f19 0%, #111827 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px; padding: 28px 22px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.age-gate-inner h2 { margin:0 0 8px; color:#f8fafc; font-size:1.6rem; letter-spacing:.2px; }
.age-gate-inner p  { margin:0 0 18px; color:#cbd5e1; }
.age-gate-inner .btn.primary {
  background:#10b981; color:#061017; border:0;
  padding:10px 16px; border-radius:12px; font-weight:700;
  box-shadow:0 6px 18px rgba(16,185,129,.35);
}
.noscript-warn { display:block; margin-top:12px; color:#ffb4b4; }
body.agelock { overflow:hidden; }

/* ==========================================================================
   CARDS / ALERTS / LOGIN
   ========================================================================== */
.card { border:1px solid; border-radius:12px; padding:24px; }
.theme-dark .card { background:#111; border-color:#1f2937; }
.theme-light .card { background:#fff;  border-color:#e5e7eb; }

.alert { background:#2a1010; border:1px solid #6b1d1d; color:#ffe1e1; padding:12px; border-radius:8px; margin-top:12px; }

.login-card { max-width:560px; margin:48px auto; }
.login-branding { text-align:center; padding:8px 12px 20px; }
.login-branding h1 { margin:0 0 8px; }
.form-grid { display:grid; gap:10px; }
.form-grid input, .form-grid select { padding:.6rem; border-radius:.5rem; border:1px solid; }
.theme-dark .form-grid input, .theme-dark .form-grid select { background:#0b0f1a; color:#fff; border-color:#273244; }
.theme-light .form-grid input, .theme-light .form-grid select { background:#fff;   color:#0e141b; border-color:#cbd5e1; }
.btn.full { width:100%; }

/* ==========================================================================
   CHAT LAYOUT
   ========================================================================== */
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid;
  position: sticky; top: 0; z-index: 5;
}
.theme-dark .topbar { background:#0e121a; border-color:#1f2937; }
.theme-light .topbar { background:#ffffff; border-color:#e5e7eb; }

.layout { display:grid; grid-template-columns: 260px 1fr; gap:16px; padding:16px; }
.panel { border:1px solid; border-radius:12px; overflow:hidden; }
.theme-dark .panel { background:#0f1117; border-color:#1f2937; }
.theme-light .panel { background:#ffffff; border-color:#e5e7eb; }
.panel > h2 { margin:0; padding:10px 12px; border-bottom:1px solid; font-size:14px; opacity:.9; }
.theme-dark .panel > h2 { border-color:#1f2937; }
.theme-light .panel > h2 { border-color:#e5e7eb; }

.users { list-style:none; margin:0; padding:8px; max-height: calc(100vh - 220px); overflow:auto; }
.users li { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; cursor:pointer; }
.theme-dark .users li:hover, .theme-light .users li:hover { background:rgba(37,99,235,.08); }
.users .user-name { display:flex; align-items:center; gap:8px; }
.badge-mod {
  margin-left:auto; font-size:.7rem; padding:2px 6px; border-radius:999px; background:#e11d48; color:#fff; font-weight:700;
}

/* Messages */
.messages { list-style:none; margin:0; padding:12px; height: calc(100vh - 240px); overflow:auto; display:flex; flex-direction:column; gap:10px; }
.messages li { border-radius:12px; padding:10px 12px; border:1px solid; }
.theme-dark .messages li { background:#0f1117; border-color:#1f2937; }
.theme-light .messages li { background:#fff; border-color:#e5e7eb; }
.msg-row { display:flex; align-items:center; gap:8px; }
.msg-time { margin-left:auto; font-size:12px; opacity:.7; }
.msg-text { margin-top:6px; white-space:pre-wrap; word-wrap:break-word; line-height:1.4; }

/* PM variants (optional) */
.messages li.pm { border-color:#334155; background:#0f1522; }
.theme-light .messages li.pm { background:#f3f6ff; border-color:#c7d2fe; }

/* Composer */
.send { display:flex; gap:10px; padding:10px; border-top:1px solid; }
#msgInput { flex:1; padding:.7rem .8rem; border-radius:.6rem; border:1px solid; }
.theme-dark #msgInput { background:#0b0f1a; color:#fff; border-color:#273244; }
.theme-light #msgInput { background:#fff; color:#0e141b; border-color:#cbd5e1; }
.send button[type="submit"] { background:#2563eb; color:#fff; border:0; border-radius:.6rem; padding:.6rem 1rem; cursor:pointer; }
.send button[type="submit"]:hover { filter:brightness(1.08); }

/* Avatars */
.avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; display:inline-block; border:1px solid rgba(255,255,255,.15); }
.theme-light .avatar { border-color: rgba(0,0,0,.1); }
.avatar-fallback { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.85rem; }

/* Typing indicator */
.typing { display:flex; align-items:center; gap:8px; padding:6px 12px; color:#94a3b8; font-size:12px; }
.typing .who { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 60vw; }
.typing .dots { display:inline-flex; gap:4px; align-items:flex-end; }
.typing .dot { width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.6; animation: typing-bounce 1s infinite ease-in-out; }
.typing .dot:nth-child(2){ animation-delay: .12s; }
.typing .dot:nth-child(3){ animation-delay: .24s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity:.45; } 30% { transform: translateY(-4px); opacity:.95; } }

/* Responsive (chat) */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .users { max-height: initial; }
  .messages { height: auto; max-height: 60vh; }
}

/* ==========================================================================
   LEGAL PAGES (privacy, terms, cookies)
   ========================================================================== */
.legal {
  max-width: 900px; margin: 32px auto 80px; padding: 0 16px;
  line-height: 1.7; font-size: 1.02rem;
}

.legal-header {
  position: relative; padding: 28px 22px; border-radius: 16px; margin-bottom: 22px; overflow: hidden; border: 1px solid;
}
.theme-dark .legal-header { background: radial-gradient(1200px 400px at -10% 0%, #1f2937 0%, #0f1117 55%); border-color:#1f2937; }
.theme-light .legal-header { background: radial-gradient(1200px 400px at -10% 0%, #eef2ff 0%, #ffffff 55%); border-color:#e5e7eb; }

.legal-title { margin: 0 0 6px; font-size: 2rem; letter-spacing: .2px; }
.legal-sub   { margin: 0; opacity: .8; font-size: .95rem; }

.legal-toc { margin: 18px 0 28px; border-radius: 14px; border: 1px solid; padding: 14px 16px; }
.theme-dark .legal-toc { background:#0f1117; border-color:#1f2937; }
.theme-light .legal-toc { background:#fff;    border-color:#e5e7eb; }
.legal-toc h2 { margin: 0 0 8px; font-size: 1rem; opacity: .9; text-transform: uppercase; letter-spacing: .06em; }
.legal-toc ol, .legal-toc ul { margin: 0; padding-left: 18px; }
.legal-toc a { text-decoration: none; }
.theme-dark .legal-toc a { color:#93c5fd; }
.theme-light .legal-toc a { color:#2563eb; }
.legal-toc a:hover { text-decoration: underline; }

.legal-section {
  border: 1px solid; border-radius: 14px; padding: 18px 18px 14px; margin-bottom: 18px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.theme-dark .legal-section { background:#0f1117; border-color:#1f2937; }
.theme-light .legal-section { background:#fff;    border-color:#e5e7eb; }
.legal-section:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0,0,0,.10); }

.legal-section h2 { margin: 0 0 8px; font-size: 1.25rem; }
.legal-section h3 { margin: 14px 0 6px; font-size: 1.05rem; }
.legal-section p { margin: 8px 0 12px; }
.legal-section ul, .legal-section ol { padding-left: 20px; margin: 6px 0 12px; }
.legal-section li + li { margin-top: 6px; }

.legal a { text-decoration: underline; text-underline-offset: 2px; }
.theme-dark .legal a { color:#93c5fd; }
.theme-light .legal a { color:#2563eb; }
.legal a:hover { opacity:.9; }

.callout {
  border: 1px dashed; border-radius: 12px; padding: 12px 14px; margin: 12px 0;
  display:flex; gap:10px; align-items:flex-start;
}
.callout i { margin-top:2px; opacity:.9; }
.theme-dark .callout { background:#0b0f1a; border-color:#273244; color:#eaeaea; }
.theme-light .callout { background:#f8fafc; border-color:#cbd5e1; color:#0e141b; }

.legal-dl { display:grid; grid-template-columns: 200px 1fr; gap: 8px 16px; }
.legal-dl dt { font-weight:600; opacity:.95; }
.legal-dl dd { margin: 0 0 10px; opacity:.92; }
@media (max-width: 700px) { .legal-dl { grid-template-columns: 1fr; } }

.chip { display:inline-block; font-size:.75rem; padding:2px 8px; border-radius:999px; border:1px solid; vertical-align: middle; }
.theme-dark .chip { background:#0b0f1a; border-color:#273244; color:#cbd5e1; }
.theme-light .chip { background:#fff;    border-color:#cbd5e1; color:#0e141b; }
.chip.success { border-color:#16a34a; color:#16a34a; }
.chip.info    { border-color:#2563eb; color:#2563eb; }
.chip.warn    { border-color:#eab308; color:#eab308; }
.chip.danger  { border-color:#ef4444; color:#ef4444; }

.legal-table {
  width:100%; border-collapse:separate; border-spacing:0; border:1px solid; border-radius:12px; overflow:hidden; font-size:.98rem;
}
.theme-dark .legal-table { border-color:#273244; background:#0f1117; }
.theme-light .legal-table { border-color:#e5e7eb; background:#fff; }
.legal-table th, .legal-table td { padding:10px 12px; border-bottom:1px solid; }
.theme-dark .legal-table th, .theme-dark .legal-table td { border-color:#1f2937; }
.theme-light .legal-table th, .theme-light .legal-table td { border-color:#e5e7eb; }
.legal-table th { text-align:left; font-weight:700; opacity:.95; }
.legal-table tr:last-child td { border-bottom:0; }

.legal code {
  padding:1px 6px; border-radius:6px; border:1px solid;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.9rem;
}
.theme-dark .legal code { background:#0b0f1a; border-color:#273244; }
.theme-light .legal code { background:#f8fafc; border-color:#cbd5e1; }

.legal pre {
  padding:12px; border-radius:12px; border:1px solid; overflow:auto;
}
.theme-dark .legal pre { background:#0b0f1a; border-color:#273244; }
.theme-light .legal pre { background:#f8fafc; border-color:#cbd5e1; }

.legal-updated { text-align:right; opacity:.75; font-size:.9rem; margin-top:8px; }

.legal [id] { scroll-margin-top: 96px; }

a.anchor { text-decoration:none; position:relative; }
a.anchor::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  transform: scaleX(0); transform-origin:left; transition: transform .18s ease;
  background: currentColor; opacity:.7;
}
a.anchor:hover::after { transform: scaleX(1); }

.legal-hr {
  height:1px; margin:24px 0; border:0;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,.5), transparent);
}