/* ── GLOBAL ─────────────────────────────────────────────────────────────── */
body { font-family:'Manrope',sans-serif; min-height:max(884px,100dvh); background-color:#001523; color:#c8e6ff; }
.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; }
.fill-icon { font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }
.editorial-gradient { background:linear-gradient(135deg,#87ffc8 0%,#00e8a4 100%); }
.text-gradient { background:linear-gradient(135deg,#87ffc8 0%,#00e8a4 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.glass-card { background:rgba(17,56,79,0.4); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.hero-glow { background:radial-gradient(ellipse 60% 50% at 70% 40%,rgba(0,232,164,0.08) 0%,transparent 70%); }
.toggle-on { background:#87ffc8; }
.toggle-off { background:#11384f; }
.avatar-tilt { transform:rotate(3deg); transition:transform 0.5s ease; }
.avatar-tilt:hover { transform:rotate(0deg); }
.progress-ring { transform:rotate(-90deg); }

/* ── SPA PAGE TRANSITIONS ───────────────────────────────────────────────── */
.page { display:none; }
.page.active { display:block; animation:pageIn 0.3s ease both; }
@keyframes pageIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.anim-1{animation:fadeSlideUp 0.5s ease both}
.anim-2{animation:fadeSlideUp 0.5s 0.08s ease both}
.anim-3{animation:fadeSlideUp 0.5s 0.16s ease both}
.anim-4{animation:fadeSlideUp 0.5s 0.24s ease both}
.anim-5{animation:fadeSlideUp 0.5s 0.32s ease both}
.anim-6{animation:fadeSlideUp 0.5s 0.40s ease both}

/* ── AUTH PAGES ─────────────────────────────────────────────────────────── */
.auth-page { display:none; }
.auth-page.active { display:flex; animation:pageIn 0.35s ease both; }

.input-field {
  width:100%;
  background:rgba(1,45,67,0.6);
  border:1.5px solid rgba(0,232,164,0.15);
  border-radius:12px;
  padding:14px 16px;
  color:#f0f8ff;
  font-family:'Manrope',sans-serif;
  font-size:14px;
  outline:none;
  transition:border-color 0.2s, background 0.2s;
}
.input-field::placeholder { color:#bacbbf; }
.input-field:focus { border-color:rgba(0,232,164,0.5); background:rgba(1,45,67,0.9); }
.input-field.error { border-color:rgba(255,180,171,0.5); }

.google-btn {
  width:100%;
  background:rgba(255,255,255,0.07);
  border:1.5px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:13px 16px;
  color:#f0f8ff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:all 0.2s;
}
.google-btn:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.2); }
.google-btn:active { transform:scale(0.98); }

.auth-btn {
  width:100%;
  background:linear-gradient(135deg,#87ffc8 0%,#00e8a4 100%);
  border:none;
  border-radius:12px;
  padding:15px;
  color:#003825;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  transition:opacity 0.2s, transform 0.15s;
}
.auth-btn:hover { opacity:0.9; }
.auth-btn:active { transform:scale(0.98); }
.auth-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ── COLD START ─────────────────────────────────────────────────────────── */
.cs-dot { width:8px; height:8px; border-radius:50%; background:rgba(0,232,164,0.2); transition:all 0.3s; }
.cs-dot.active { background:#00e8a4; transform:scale(1.2); }
.cs-dot.done   { background:#00e8a4; }
.cs-tile {
  padding:12px 10px;
  background:rgba(1,45,67,0.5);
  border:1.5px solid rgba(0,232,164,0.12);
  border-radius:12px;
  cursor:pointer;
  text-align:center;
  transition:all 0.2s;
}
.cs-tile:hover  { border-color:rgba(0,232,164,0.35); background:rgba(1,45,67,0.8); }
.cs-tile.picked { border-color:#00e8a4; background:rgba(0,232,164,0.12); }

.divider-line { display:flex; align-items:center; gap:12px; margin:8px 0; }
.divider-line::before, .divider-line::after { content:''; flex:1; height:1px; background:rgba(0,232,164,0.12); }

@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.shake { animation:shake 0.4s ease; }

/* ── SIDE DRAWER ────────────────────────────────────────────────────────── */
.drawer-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,21,35,0.7);
  backdrop-filter:blur(4px);
  opacity:0; pointer-events:none;
  transition:opacity 0.3s ease;
}
.drawer-overlay.open { opacity:1; pointer-events:all; }

.drawer-panel {
  position:fixed; top:0; left:0; bottom:0; z-index:201;
  width:min(320px, 85vw);
  background:#001e2f;
  border-right:1px solid rgba(0,232,164,0.12);
  transform:translateX(-100%);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.drawer-panel.open { transform:translateX(0); }

.drawer-nav-item {
  display:flex; align-items:center; gap:14px;
  padding:13px 20px;
  border-radius:12px;
  cursor:pointer;
  transition:all 0.18s;
  color:#bacbbf;
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  margin:0 8px;
}
.drawer-nav-item:hover { background:rgba(0,232,164,0.08); color:#f0f8ff; }
.drawer-nav-item.active { background:rgba(0,232,164,0.12); color:#00e8a4; }
.drawer-nav-item .drawer-icon { font-size:20px; width:20px; }

.drawer-section-label {
  font-family:'Manrope',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:rgba(186,203,191,0.5);
  padding:16px 20px 6px;
}

/* ── WATCHLIST CARD TRANSITION ──────────────────────────────────────────── */
.watchlist-card { transition:transform 0.2s ease,opacity 0.2s ease; }
.watchlist-card.removing { transform:translateX(100%); opacity:0; }

/* ── AUTH PAGE ENTRY ANIMATION ─────────────────────────────────────────── */
@keyframes authIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Input placeholder color for redesigned auth fields */
#auth-signin input::placeholder,
#auth-register input::placeholder {
  color: rgba(186, 203, 191, 0.35);
}

/* ── MOBILE COMPATIBILITY ──────────────────────────────────────────────── */

/* Safe area insets for notched phones (iPhone, etc.) */
body {
  padding-bottom: max(7rem, calc(5rem + env(safe-area-inset-bottom)));
}

header {
  padding-top: max(1rem, env(safe-area-inset-top));
}

nav {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* AI drawer — fix the giant empty gap */
/* The messages flex-1 area now fills remaining space properly */
#askAiDrawer > div:nth-child(2) {
  height: 88dvh;
  height: 88vh; /* fallback */
  display: flex;
  flex-direction: column;
}

/* Settings sheet — cap height on small phones */
#settingsSheet .overflow-y-auto {
  max-height: min(65vh, calc(100dvh - 200px));
}

/* Prevent font scaling on iOS rotation */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Prevent double-tap zoom on buttons */
button, a {
  touch-action: manipulation;
}

/* Smooth momentum scrolling on iOS */
.overflow-y-auto, .overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Bottom nav — larger tap targets on mobile */
.nav-btn {
  min-height: 56px;
  padding-bottom: 4px;
}

/* Tap highlight removal */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Input zoom prevention on iOS — font-size must be >= 16px */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="search"],
textarea {
  font-size: 16px !important;
}

/* Auth pages — ensure proper centering on all screen sizes */
.auth-page {
  min-height: 100dvh;
  min-height: 100vh;
  display: none;
}
.auth-page.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Auth card — scroll on very small phones (< 600px tall) */
.auth-page > div {
  max-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}