/* ZooL — Custom CSS variables for theming + utility overrides.
   Tailwind CDN handles utility classes; this file adds:
   - CSS custom properties for dark/light themes
   - Scrollbar styling
   - Prose styles for generated article HTML content
   - Transition polish
*/

/* ── Theme variables ──────────────────────────────────────────────────────── */
/* Light theme: Perplexity-style warm off-white (not pure white), soft grays.
   Backgrounds use #fcfcf9 / #f7f7f5; borders are muted warm grays. */
:root {
  --brand: #20808d;          /* Perplexity teal accent */
  --brand-dark: #1a6b76;
  --bg: #fcfcf9;             /* main canvas — warm off-white */
  --bg-secondary: #f3f3ee;   /* cards / sidebar — slightly deeper off-white */
  --bg-tertiary: #ecece6;    /* hover / inset surfaces */
  --border: #e3e3db;         /* soft warm border */
  --text: #1f1f1d;           /* near-black, slightly warm */
  --text-muted: #6b6b66;     /* warm gray */
  --sidebar-width: 256px;
}

.dark {
  --brand: #2dd4bf;
  --brand-dark: #14b8a6;
  --bg: #0f1110;
  --bg-secondary: #1a1c1b;
  --bg-tertiary: #242725;
  --border: #2a2d2b;
  --text: #f5f5f0;
  --text-muted: #9c9c95;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter',
               Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar (WebKit) ───────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #374151;
}

/* ── Prose (result text HTML rendering) ────────────────────────────────────── */
.prose p {
  margin-bottom: 0.875rem;
  line-height: 1.7;
}
.prose h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.prose em {
  font-style: italic;
  color: var(--brand);
}

/* ── Transition helpers ───────────────────────────────────────────────────── */
.sidebar-transition {
  transition: transform 200ms ease-out;
}

/* ── Loading animation ────────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

/* ── Password strength bar ────────────────────────────────────────────────── */
.strength-bar {
  height: 4px;
  border-radius: 2px;
  transition: background-color 0.3s ease, width 0.3s ease;
}

/* ── Focus outline brand color ────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── Mobile: prevent content shift when drawer opens ─────────────────────── */
body.drawer-open {
  overflow: hidden;
}

/* ── Card hover lift ─────────────────────────────────────────────────────── */
.card-hover {
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.card-hover:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.12);
}

/* ── Input autofill override ─────────────────────────────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px var(--bg) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ── Perplexity-style light theme surface overrides ───────────────────────── */
/* Map Tailwind light-mode utilities to warm off-white shades instead of pure
   white. Scoped to :not(.dark) so dark mode (gray-950 etc.) is untouched. */
html:not(.dark) body { background-color: var(--bg); }

html:not(.dark) .bg-white { background-color: var(--bg) !important; }
html:not(.dark) .bg-gray-50 { background-color: var(--bg-secondary) !important; }
html:not(.dark) .bg-gray-100 { background-color: var(--bg-tertiary) !important; }

/* translucent header/cards (bg-white/80 etc.) */
html:not(.dark) [class*="bg-white/"] {
  background-color: rgba(252, 252, 249, 0.82) !important;
}

/* soften borders to the warm border token */
html:not(.dark) .border-gray-200 { border-color: var(--border) !important; }
html:not(.dark) .border-gray-100 { border-color: #ededE6 !important; }

/* hover surfaces */
html:not(.dark) .hover\:bg-gray-50:hover { background-color: var(--bg-secondary) !important; }
html:not(.dark) .hover\:bg-gray-100:hover { background-color: var(--bg-tertiary) !important; }

/* indigo brand accents → teal (covers any literal indigo utilities) */
html:not(.dark) .bg-indigo-600 { background-color: var(--brand) !important; }
html:not(.dark) .bg-indigo-500 { background-color: var(--brand) !important; }
html:not(.dark) .hover\:bg-indigo-600:hover { background-color: var(--brand-dark) !important; }
html:not(.dark) .text-indigo-600 { color: var(--brand) !important; }
html:not(.dark) .text-indigo-500 { color: var(--brand) !important; }
html:not(.dark) .bg-indigo-50 { background-color: rgba(32,128,141,0.08) !important; }
html:not(.dark) .border-indigo-500 { border-color: var(--brand) !important; }
html:not(.dark) .ring-indigo-500 { --tw-ring-color: var(--brand) !important; }

/* ── Guaranteed brand utility fallbacks ───────────────────────────────────── */
/* Tailwind CDN occasionally fails to emit custom-color utilities; pin them. */
.bg-brand { background-color: var(--brand) !important; }
.hover\:bg-brand-dark:hover { background-color: var(--brand-dark) !important; }
.text-brand { color: var(--brand) !important; }
.border-brand { border-color: var(--brand) !important; }
.bg-brand\/10 { background-color: color-mix(in srgb, var(--brand) 10%, transparent) !important; }
.bg-brand\/5 { background-color: color-mix(in srgb, var(--brand) 5%, transparent) !important; }
.hover\:bg-brand:hover { background-color: var(--brand) !important; }
.hover\:text-white:hover { color: #fff !important; }

/* ── Medium-style article editor (result-editor) ──────────────────────────── */
/* The model output is rendered as a clean, readable article. No raw markdown
   or code fences are shown; the area is contenteditable so the user can tweak
   the text directly before copying/downloading. */
.zool-article {
  font-size: 1.0625rem;            /* ~17px, comfortable reading size */
  line-height: 1.75;
  color: #1f2933;
  font-family: Georgia, 'Times New Roman', 'PT Serif', serif;
  word-break: break-word;
}
html.dark .zool-article { color: #e5e7eb; }
.zool-article h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.25; margin: 1.4em 0 0.5em; font-family: inherit; }
.zool-article h2 { font-size: 1.5rem;   font-weight: 700; line-height: 1.3;  margin: 1.3em 0 0.45em; }
.zool-article h3 { font-size: 1.25rem;  font-weight: 700; line-height: 1.35; margin: 1.2em 0 0.4em; }
.zool-article p  { margin: 0 0 1em; }
.zool-article ul, .zool-article ol { margin: 0 0 1em 1.4em; }
.zool-article li { margin: 0.25em 0; }
.zool-article blockquote {
  border-left: 3px solid var(--brand, #20808d);
  padding-left: 1em; margin: 1em 0; color: #52606d; font-style: italic;
}
html.dark .zool-article blockquote { color: #9aa5b1; }
.zool-article a { color: var(--brand, #20808d); text-decoration: underline; }
.zool-article code {
  background: rgba(0,0,0,0.05); padding: 0.1em 0.35em; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
}
html.dark .zool-article code { background: rgba(255,255,255,0.08); }
.zool-article pre {
  background: rgba(0,0,0,0.05); padding: 0.9em 1em; border-radius: 10px;
  overflow-x: auto; margin: 0 0 1em;
}
html.dark .zool-article pre { background: rgba(255,255,255,0.06); }
.zool-article pre code { background: none; padding: 0; }
.zool-article:empty::before {
  content: 'Результат появится здесь…'; color: #9aa5b1;
}
.zool-article strong { font-weight: 700; }
.zool-article hr { border: 0; border-top: 1px solid rgba(0,0,0,0.1); margin: 1.5em 0; }
html.dark .zool-article hr { border-top-color: rgba(255,255,255,0.1); }