@import "tailwindcss";
@import "katex/dist/katex.min.css";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  /* Identité Immbot AI — héritée des couleurs institutionnelles UQO, raffinée */
  --color-brand-50: #eef4fb;
  --color-brand-100: #d9e6f5;
  --color-brand-200: #b3cdeb;
  --color-brand-300: #7dabdc;
  --color-brand-400: #4585c9;
  --color-brand-500: #1d64b0;
  --color-brand-600: #0d4f95;
  --color-brand-700: #003e7e;
  --color-brand-800: #063361;
  --color-brand-900: #0a2a4d;
  --color-brand-950: #081c33;

  --color-gold-300: #eed484;
  --color-gold-400: #dcb94f;
  --color-gold-500: #c6a300;
  --color-gold-600: #a08300;

  --color-surface-0: #ffffff;
  --color-surface-1: #f7f9fc;
  --color-surface-2: #eef2f7;
  --color-surface-3: #e3e9f1;

  --font-sans: var(--font-inter), ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --radius-xl2: 0.75rem;

  --animate-fade-up: fade-up 0.35s ease both;
  --animate-fade-in: fade-in 0.25s ease both;
  --animate-pulse-soft: pulse-soft 2s ease-in-out infinite;

  @keyframes fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }
}

:root {
  --bg: #f4f6f9;
  --fg: #0e1a28;
  --muted: #51606f;
  --card: #ffffff;
  --border: #d4dce6;
  --sidebar: #ffffff;
}
.dark {
  --bg: #0b1320;
  --fg: #e7edf5;
  --muted: #94a5ba;
  --card: #101b2c;
  --border: #22314a;
  --sidebar: #0d1626;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* Empêche le zoom automatique iOS sur les champs (< 16px) sans grossir le rendu desktop */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Utilitaires sémantiques */
.bg-app { background: var(--bg); }
.bg-card { background: var(--card); }
.bg-sidebar { background: var(--sidebar); }
.text-fg { color: var(--fg); }
.text-muted { color: var(--muted); }
.border-app { border-color: var(--border); }

::selection { background: color-mix(in srgb, var(--color-brand-500) 25%, transparent); }

/* Scrollbars discrètes */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 35%, transparent) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 30%, transparent); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Focus accessible */
:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Markdown (réponses du chat, résumés) */
.prose-immbot {
  line-height: 1.65;
  font-size: 0.9375rem;
  overflow-wrap: break-word;
}
.prose-immbot > * + * { margin-top: 0.7em; }
.prose-immbot h1, .prose-immbot h2, .prose-immbot h3, .prose-immbot h4 {
  font-weight: 650; line-height: 1.3; margin-top: 1.2em;
}
.prose-immbot h1 { font-size: 1.2em; }
.prose-immbot h2 { font-size: 1.12em; }
.prose-immbot h3 { font-size: 1.05em; }
.prose-immbot ul { list-style: disc; padding-left: 1.4em; }
.prose-immbot ol { list-style: decimal; padding-left: 1.4em; }
.prose-immbot li + li { margin-top: 0.25em; }
.prose-immbot strong { font-weight: 650; }
.prose-immbot a { color: var(--color-brand-500); text-decoration: underline; text-underline-offset: 2px; }
.prose-immbot code {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border-radius: 5px; padding: 0.12em 0.35em; font-family: var(--font-mono); font-size: 0.86em;
}
.prose-immbot pre {
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 0.8em 1em; overflow-x: auto;
}
.prose-immbot pre code { background: none; padding: 0; }
.prose-immbot table {
  width: 100%; border-collapse: collapse; font-size: 0.92em;
  display: block; overflow-x: auto;
}
.prose-immbot th, .prose-immbot td {
  border: 1px solid var(--border); padding: 0.45em 0.7em; text-align: left;
}
.prose-immbot th { background: color-mix(in srgb, var(--muted) 8%, transparent); font-weight: 600; }
.prose-immbot blockquote {
  border-left: 3px solid var(--color-brand-400); padding-left: 0.9em; color: var(--muted);
}
.prose-immbot .katex { font-size: 1.05em; }
.prose-immbot .katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.2em 0; }

/* Citation inline [S1] */
.citation-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; height: 1.15rem; padding: 0 0.3rem; margin: 0 0.12rem;
  border-radius: 0.45rem; font-size: 0.68rem; font-weight: 650;
  background: color-mix(in srgb, var(--color-brand-500) 14%, transparent);
  color: var(--color-brand-500);
  border: 1px solid color-mix(in srgb, var(--color-brand-500) 25%, transparent);
  cursor: pointer; vertical-align: baseline; transition: background 0.15s ease;
  user-select: none;
}
.citation-chip:hover { background: color-mix(in srgb, var(--color-brand-500) 26%, transparent); }
.dark .citation-chip { color: var(--color-brand-300); }

/* Curseur de streaming */
.stream-cursor::after {
  content: "▍"; color: var(--color-brand-400);
  animation: pulse-soft 1s ease-in-out infinite; margin-left: 1px;
}

/* Skeletons */
.skeleton {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--muted) 10%, transparent) 25%,
    color-mix(in srgb, var(--muted) 18%, transparent) 50%,
    color-mix(in srgb, var(--muted) 10%, transparent) 75%);
  background-size: 200% 100%;
  animation: skeleton-slide 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skeleton-slide { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}