/* shadcn/ui — neutral palette, standard tokens (light + dark) */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 71% 45%;
  --warning: 38 92% 50%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --radius: 0.5rem;

  /* AI accent — the one chromatic note; overridable via tweak */
  --ai: 256 70% 58%;
  --ai-foreground: 0 0% 100%;
  --ai-soft: 256 75% 96%;

  /* channel hues */
  --ch-event: 256 70% 58%;
  --ch-resto: 199 89% 48%;
  --ch-anim: 322 80% 60%;
  --ch-coup: 142 64% 42%;
  --ch-autre: 38 92% 50%;
}

.dark {
  --background: 0 0% 7%;
  --foreground: 0 0% 98%;
  --card: 0 0% 9.5%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 9.5%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 0 0% 16.5%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 64% 48%;
  --warning: 38 92% 55%;
  --border: 0 0% 16%;
  --input: 0 0% 18%;
  --ring: 0 0% 83.1%;

  --ai: 256 85% 72%;
  --ai-foreground: 256 30% 12%;
  --ai-soft: 256 40% 18%;
}

* { box-sizing: border-box; }
/* Densité globale : dézoom de 10% de TOUTE l'interface (typo, marges,
   espacements…) — appliqué au root pour se comporter comme un zoom
   navigateur (les vh/dvh restent calés sur l'écran). Demande Mickaël. */
html { zoom: 0.9; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}
#root { height: 100%; }

/* ---- shadcn primitives ---- */
.mono { font-family: 'Geist Mono', ui-monospace, monospace; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 500; line-height: 1;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  padding: 0 12px; height: 34px; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s, opacity .14s;
  white-space: nowrap; user-select: none;
}
.btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { opacity: .9; }
.btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.btn-secondary:hover { background: hsl(var(--accent)); }
.btn-outline { border-color: hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); }
.btn-outline:hover { background: hsl(var(--accent)); }
.btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--accent)); }
.btn-ai { background: hsl(var(--ai)); color: hsl(var(--ai-foreground)); }
.btn-ai:hover { filter: brightness(1.06); }
.btn-sm { height: 28px; font-size: 12px; padding: 0 9px; }
.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 28px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; line-height: 1;
  padding: 3px 8px; border-radius: 999px; border: 1px solid transparent;
  white-space: nowrap;
}
.badge-outline { border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }

.input {
  width: 100%; height: 34px; padding: 0 10px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background)); color: hsl(var(--foreground));
  font-size: 13px; font-family: inherit;
  transition: border-color .14s, box-shadow .14s;
}
.input::placeholder { color: hsl(var(--muted-foreground)); }
.input:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .12); }

.card {
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
}

.kbd {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  padding: 2px 5px; border-radius: 4px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--muted));
  color: hsl(var(--muted-foreground)); line-height: 1;
}

.divider { height: 1px; background: hsl(var(--border)); border: 0; }

/* FEAT-111 — éditeur riche contentEditable (RichComposer) : rendu des
   blocs DANS l'éditeur ; à l'envoi le serveur pose des styles inline
   équivalents (interop clients mail). */
.rich-composer blockquote {
  margin: 4px 0 4px 8px; padding-left: 10px;
  border-left: 2px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
}
.rich-composer ul, .rich-composer ol { margin: 4px 0; padding-left: 26px; }
.rich-composer a { color: hsl(var(--primary)); }

/* scrollbars */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; }
.scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / .5); background-clip: padding-box; }

.tip { position: relative; }

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.ai-shimmer {
  background: linear-gradient(90deg, hsl(var(--ai)/.0) 0%, hsl(var(--ai)/.18) 50%, hsl(var(--ai)/.0) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
/* Page Muesli — palette « papier » façon Granola (crème chaud + encre +
   accent argile), scopée pour ne pas toucher le reste de l'app, et
   theme-aware (repli sur les tokens sombres sous .dark). */
.muesli {
  --m-bg: 40 40% 97.5%;
  --m-surface: 0 0% 100%;
  --m-ink: 28 14% 13%;
  --m-muted: 30 8% 41%;
  --m-border: 36 24% 88%;
  --m-accent: 20 46% 44%;
  --m-accent-soft: 30 48% 94%;
  background: hsl(var(--m-bg));
  color: hsl(var(--m-ink));
  font-family: var(--sp-font-text);
}
.dark .muesli {
  --m-bg: 0 0% 7%;
  --m-surface: 0 0% 10%;
  --m-ink: 0 0% 96%;
  --m-muted: 0 0% 64%;
  --m-border: 0 0% 17%;
  --m-accent: 22 55% 66%;
  --m-accent-soft: 22 30% 15%;
}
.muesli-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: hsl(var(--m-accent));
}
.muesli-card {
  background: hsl(var(--m-surface)); border: 1px solid hsl(var(--m-border));
  border-radius: 16px;
}
.muesli-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px;
  border-radius: 11px; font-weight: 700; font-size: 14px; text-decoration: none;
  background: hsl(var(--m-ink)); color: hsl(var(--m-bg)); border: 1px solid hsl(var(--m-ink));
  transition: transform .12s ease, opacity .12s ease;
}
.muesli-btn:hover { opacity: .9; transform: translateY(-1px); }
.muesli-btn-ghost {
  background: transparent; color: hsl(var(--m-ink)); border-color: hsl(var(--m-border));
}
.muesli-btn-ghost:hover { background: hsl(var(--m-accent-soft)); opacity: 1; }
.muesli-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; border: 1px solid hsl(var(--m-border));
  color: hsl(var(--m-muted)); background: hsl(var(--m-surface));
}

/* 🎈 Pop de la barre d'activité (08/07) : la pastille flyToDock atterrit,
   la barre rebondit — transform-origin en bas à droite (ancrage du dock). */
@keyframes dock-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  65%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.dock-pop { animation: dock-pop .55s cubic-bezier(.34,1.56,.64,1); transform-origin: bottom right; }

/* 🔎 Chercheur de la Recherche IA (08/07) : la loupe balaie la page. */
@keyframes seek {
  0%   { transform: translateX(-34px) rotate(-10deg); }
  50%  { transform: translateX(34px) rotate(10deg); }
  100% { transform: translateX(-34px) rotate(-10deg); }
}
.ai-seeker { animation: seek 2.4s ease-in-out infinite; }

/* Barre de chargement (skeleton) — panneau contexte chargé en asynchrone. */
.skel {
  border-radius: 6px;
  background: linear-gradient(90deg, hsl(var(--muted)/.55) 25%, hsl(var(--muted)/.9) 50%, hsl(var(--muted)/.55) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.live-dot { animation: pulse-dot 1.6s ease-in-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }
/* pastille de synchro (topbar) pendant la synchro : légère pulsation */
.sync-pulse { animation: pulse-dot 1.1s ease-in-out infinite; }

@keyframes fade-up { from { transform: translateY(8px); } to { transform: none; } }
.fade-up {
  animation: fade-up .26s cubic-bezier(0.22,1,0.36,1) both;
}

/* Documentaliste (FEAT-042) : la loupe balaye les livres qui sautillent
   pendant la recherche ; la réponse arrive avec un petit pop. */
@keyframes doc-scan { 0%, 100% { transform: translateX(-16px) rotate(-10deg); }
  50% { transform: translateX(16px) rotate(10deg); } }
@keyframes doc-bounce { 0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); } }
@keyframes doc-pop { 0% { transform: scale(.97) translateY(6px); opacity: 0; }
  60% { transform: scale(1.01) translateY(-1px); opacity: 1; }
  100% { transform: none; opacity: 1; } }
.doc-pop { animation: doc-pop .5s cubic-bezier(0.22,1,0.36,1) both; }

/* ---- Responsive (≤768px) ---------------------------------------------- */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  /* tables des vues KB / Stats / Réglages : scroll horizontal plutôt que
     débordement — le contenu reste intégral. */
  .scroll-x-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wrap-mobile { flex-wrap: wrap !important; }
  /* Page Muesli : hero et piliers passent en une colonne, la note repasse
     sous le propos. */
  .muesli-hero { grid-template-columns: 1fr !important; gap: 28px !important; }
  .muesli-pillars { grid-template-columns: 1fr !important; }
  /* Réglages : la sidebar de sections (2e niveau) passe en bandeau
     horizontal scrollable au-dessus du contenu. */
  .settings-layout { flex-direction: column !important; }
  .settings-nav { flex-direction: row !important; width: 100% !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .settings-nav button { white-space: nowrap; }
  /* Templates : la colonne dossiers passe au-dessus de la liste. */
  .tpl-layout { flex-direction: column !important; }
  .tpl-folders { flex-direction: row !important; width: 100% !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tpl-folders button { white-space: nowrap; }
}

@media (max-width: 768px) {
  /* En-tête de conversation compact : titre sur toute la largeur, actions
     en dessous — l'en-tête ne mange plus le tiers de l'écran. */
  .thread-head { padding: 8px 10px !important; }
  .thread-head-row { flex-wrap: wrap; gap: 6px !important; align-items: center !important; }
  .thread-head-title { flex: 1 1 auto; }
  .thread-head-title h1 { font-size: 14.5px !important; }
  .thread-head-title > div:first-child { margin-bottom: 2px !important; }
  .thread-head-actions { flex: 1 1 100%; justify-content: flex-end; }
}

/* Rows de la liste de conversations — le hover vit en CSS, PAS en mutation
   DOM (l'ancien onMouseEnter posait style.background à la main : React ne
   le nettoyait pas au re-render → une row gardait son fond « hover » quand
   on naviguait au clavier, façon double sélection). */
.conv-row { background: transparent; }
.conv-row-active { background: hsl(var(--secondary)); }
.conv-row-selected { background: hsl(var(--ai) / .08); }
.conv-row:not(.conv-row-active):not(.conv-row-selected):hover {
  background: hsl(var(--accent));
}
/* Même famille de bug (08/07) : le focus ring du navigateur restait sur la
   carte CLIQUÉE pendant que j/k déplaçait la carte active → double sélection.
   Le clic ne prend plus le focus (onMouseDown preventDefault) ; ceinture ici,
   en gardant l'outline pour la navigation Tab (a11y). */
.conv-row:focus:not(:focus-visible) { outline: none; }
.conv-row:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }

/* Annuaire Base contact (14/07) : rangées jointives dans UNE carte (au lieu
   de 100 cartes empilées), pouls de fraîcheur, chevron qui glisse au hover.
   Même règle que .conv-row : le hover vit en CSS, jamais en mutation DOM. */
.dir-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 12px; overflow: hidden; }
.dir-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none; background: transparent; padding: 11px 16px; cursor: pointer; color: hsl(var(--foreground)); border-bottom: 1px solid hsl(var(--border) / .55); }
.dir-row:last-child { border-bottom: none; }
.dir-row:hover { background: hsl(var(--accent) / .6); }
.dir-row:focus:not(:focus-visible) { outline: none; }
.dir-row:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
.dir-go { color: hsl(var(--muted-foreground)); transition: transform .15s ease, color .15s ease; flex-shrink: 0; }
.dir-row:hover .dir-go { transform: translateX(3px); color: hsl(var(--foreground)); }
.dir-live { animation: pulse-dot 2.2s infinite; }
@media (max-width: 760px) { .dir-chans { display: none; } }