/* ═══════════════════════════════════════
   ExamineAI — base.css
   Matches the same dark navy + blue/gold/violet theme used across
   Library, Templates, Collections, Video Lessons, and Newsletter, so
   every page in the app (including Account, AI Agent, Settings, Credits,
   AI Models, About) reads as one consistent product.
   ═══════════════════════════════════════ */
:root { /* Default and only theme: Dark */
  /* Backgrounds */
  --bg:       #070B12;
  --bg2:      #0D1420;
  --surface:  rgba(255,255,255,0.05);
  --surface2: rgba(255,255,255,0.08);
  --surface3: rgba(255,255,255,0.12);
  --glass:    rgba(255,255,255,0.06);
  --glass2:   rgba(255,255,255,0.10);

  /* Borders */
  --border:   rgba(255,255,255,0.08);
  --border2:  rgba(255,255,255,0.14);
  --border3:  rgba(255,255,255,0.20);

  /* Text */
  --text:     #F8FAFC;
  --text2:    rgba(248,250,252,0.70);
  --text3:    rgba(248,250,252,0.40);

  /* Accents — blue/gold/violet, matching the drawer nav's Library/AI
     Agent/Templates color mapping used site-wide */
  --accent:        #FFFFFF;
  --accent-dim:    rgba(255,255,255,0.07);
  --accent-border: rgba(255,255,255,0.20);
  --accent-blue:        rgba(37,99,235,0.25);
  --accent-blue-border: rgba(59,130,246,0.35);
  --gold:        #C9A84C;
  --gold-border: rgba(201,168,76,0.4);
  --violet:        #8B5CF6;
  --violet-border: rgba(139,92,246,0.4);

  /* Semantics */
  --red:   #F87171;
  --green: #6EE7B7;
  --amber: #FCD34D;

  /* Drawer button gradient (light→dark, no glow) */
  --btn-grad: linear-gradient(150deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 100%);
  --btn-grad-hover: linear-gradient(150deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.04) 100%);

  /* Radii */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 24px;  --r-pill: 9999px;

  /* Transitions */
  --t-fast: 0.14s ease;
  --t-med:  0.24s ease;
  --t-slow: 0.36s cubic-bezier(0.4,0,0.2,1);
}

/* Light mode styles removed as theme is no longer changeable */

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; }
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Same shared background image + overlay used on every other page —
     no blur on the image itself, per earlier direction. */
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(7,11,18,0.55), rgba(7,11,18,0.55)),
    url('https://files.catbox.moe/vwi2rg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:2px; height:2px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border3); border-radius:1px; }

/* ── ELEMENTS ── */
button {
  cursor:pointer; border:none; background:none;
  font-family:inherit; font-size:inherit; color:inherit;
  transition:opacity var(--t-fast), transform var(--t-fast);
  -webkit-tap-highlight-color:transparent;
}
button:active { transform:scale(0.96); opacity:0.8; }

input,select,textarea {
  font-family:inherit; font-size:inherit;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border2); border-radius:var(--r-md);
  outline:none; transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
input:focus,select:focus,textarea:focus {
  border-color:var(--accent-border);
  box-shadow:0 0 0 2px var(--accent-dim);
}
a { color:inherit; text-decoration:none; }

/* ── GLASS SURFACES ── */
.glass {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--border);
}
.glass2 {
  background: var(--glass2);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid var(--border2);
}

/* ── BACKGROUND LAYER ── */
#bg-layer {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
#bg-media-wrap {
  position: absolute; inset: -10px;
  /* Will be shown when user sets a background */
  display: none;
}
#bg-media-wrap img,
#bg-media-wrap video {
  width:100%; height:100%; object-fit:cover;
  filter: blur(12px) brightness(0.22) saturate(0.5);
}
#bg-layer.has-media #bg-media-wrap { display:block; }

/* ── APP SHELL ── */
#app {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ── VIEWS (SPA pages) ── */
.app-view { display:none; flex:1; flex-direction:column; overflow:hidden; min-height:0; }
.app-view.active { display:flex; }

/* ── PAGE HEADER (shared across views) ── */
.page-header {
  flex-shrink: 0;
  height: 54px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 0 60px;
  background: var(--glass);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}
.page-header-title {
  font-size: 14px; font-weight: 600; color: var(--text);
}
.page-header-meta {
  font-size: 11px; color: var(--text3);
  display: flex; align-items: center; gap: 8px;
}
.model-chip {
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--surface2); border: 1px solid var(--border2);
  font-size: 11px; color: var(--text2); white-space: nowrap;
}
.credits-chip {
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--surface2); border: 1px solid var(--border2);
  font-size: 11px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: background var(--t-fast);
}
.credits-chip:hover { background: var(--surface3); }
.credits-chip.low   { color: var(--amber); border-color: rgba(252,211,77,0.3); }
.credits-chip.empty { color: var(--red);   border-color: rgba(248,113,113,0.3); }

/* ── MENU TOGGLE ── */
#menu-btn {
  position: fixed; top: 11px; left: 12px; z-index: 600;
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--glass); backdrop-filter: blur(16px);
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text2);
}
#menu-btn:hover { background: var(--surface2); color: var(--text); }
#menu-btn svg { width: 17px; height: 17px; }

/* ── ICON BUTTON ── */
.icon-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text2); transition: all var(--t-fast); flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface2); color: var(--text); }
.icon-btn svg { width: 15px; height: 15px; }

/* ── SPINNER ── */
.spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--border2); border-top-color: var(--text);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── TOAST ── (top of viewport, below header — never overlaps input) */
#toast-wrap {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 62px); left: 50%; transform: translateX(-50%);
  z-index: 1200; display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; width: 100%; max-width: 420px; padding: 0 12px; box-sizing: border-box;
}
.toast {
  padding: 9px 16px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(30,30,30,0.95); border: 1px solid var(--border3);
  backdrop-filter: blur(20px); white-space: nowrap;
  animation: toastIn 0.22s cubic-bezier(0.34,1.5,0.64,1);
}
.toast.error   { background: rgba(100,20,20,0.95); }
.toast.success { background: rgba(20,60,40,0.95); }
.toast.warning { background: rgba(80,60,10,0.95); }
.toast.info { background: rgba(30,30,30,0.95); }
.toast.fadeout { opacity:0; transition:opacity 0.25s; transform: translateY(-8px); }
@keyframes toastIn { from{opacity:0;transform:translateY(-8px) scale(0.94)} to{opacity:1;transform:none} }

/* ── DOCUMENT GENERATION PROGRESS PILL ── */
.gen-progress-pill {
  width: 100%; box-sizing: border-box;
  padding: 10px 14px; border-radius: 16px;
  background: rgba(20,20,24,0.92); border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(24px); pointer-events: auto;
  animation: toastIn 0.25s cubic-bezier(0.34,1.5,0.64,1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.gen-progress-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
}
.gen-progress-emoji { font-size: 15px; flex-shrink: 0; animation: genPulse 1.6s ease-in-out infinite; }
@keyframes genPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.gen-progress-label { font-size: 12px; font-weight: 700; color: #F2F2F2; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-progress-pct { font-size: 11px; font-weight: 700; color: rgba(242,242,242,0.55); flex-shrink: 0; }
.gen-progress-track { height: 4px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.gen-progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #3B82F6, #8B5CF6);
  transition: width 0.35s cubic-bezier(0.4,0,0.2,1);
}
.gen-progress-pill.fadeout { opacity: 0; transform: translateY(-8px); transition: all 0.3s; }

/* ── PAGE LOADER ── */
#page-loader {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(12,12,12,0.85); backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
}
#page-loader.show { display: flex; }
#page-loader-text { font-size: 13px; color: var(--text2); }

/* ── THINKING DOTS ── */
.thinking-dots { display:flex; gap:5px; align-items:center; padding:12px 14px; }
.thinking-dots span {
  width:7px; height:7px; border-radius:50%; background:var(--text3);
  animation: dotBounce 1.1s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay:.15s; }
.thinking-dots span:nth-child(3) { animation-delay:.30s; }
@keyframes dotBounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-7px)} }