/* ==========================================================================
   OUESK IA - Palettes UI v2 (refonte)
   Tokens repris VERBATIM du prototype de design (design_handoff_refonte_oia).
   Portée : uniquement les conteneurs `.oia` (chat_v2 / login_v2). Inerte pour
   l'UI historique - aucun `.oia` n'est rendu tant que le flag `ui_v2` est OFF.

   3 palettes (littoral / refonte / ardoise) × 2 thèmes (light / dark).
   Le thème est piloté par [data-theme] (Alpine → darkMode), la palette par
   [data-palette] (Alpine → chatApp().palette, persisté localStorage `oiaPalette`).
   ========================================================================== */

.oia a { color: var(--accent); text-decoration: none; }
.oia a:hover { color: var(--accent-deep); text-decoration: underline; }
.oia input::placeholder { color: inherit; opacity: .5; }

/* ---- Palettes (tokens du prototype, inchangés) ---------------------------- */
.oia,
.oia[data-palette="littoral"][data-theme="light"] {
  --bg-app: #f5f3ee; --bg-surface: #fdfdfb; --bg-input: #fdfdfb; --bg-hover: #edeae1;
  --accent: #0f6f9c; --accent-soft: #e3f1f6; --accent-stroke: #bcdde9; --accent-deep: #0b5578; --on-accent: #ffffff;
  --teal: #0f6e56; --teal-soft: #e6f6f0; --teal-stroke: #9adec6;
  --border: #e6e2d7; --border-strong: #d0cabb;
  --tx-1: #2b3138; --tx-2: #6e7370; --tx-3: #a5a79d;
  --shadow-card: 0 1px 2px rgba(70,60,40,.05), 0 8px 24px rgba(70,60,40,.06);
  --shadow-pop: 0 2px 6px rgba(70,60,40,.06), 0 16px 40px rgba(70,60,40,.12);
}
.oia[data-palette="littoral"][data-theme="dark"] {
  --bg-app: #151411; --bg-surface: #1d1c18; --bg-input: #232119; --bg-hover: #282720;
  --accent: #63b6d6; --accent-soft: #173540; --accent-stroke: #28566a; --accent-deep: #9ed3ea; --on-accent: #151411;
  --teal: #5cc9a3; --teal-soft: #14302a; --teal-stroke: #23594a;
  --border: #2e2c25; --border-strong: #474437;
  --tx-1: #eceae3; --tx-2: #a09b8d; --tx-3: #6e6a5d;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-pop: 0 2px 6px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
}
.oia[data-palette="refonte"][data-theme="light"] {
  --bg-app: #f6f7f9; --bg-surface: #ffffff; --bg-input: #ffffff; --bg-hover: #eef1f5;
  --accent: #0e5bb5; --accent-soft: #e9f1fb; --accent-stroke: #c3d9f2; --accent-deep: #0a4a96; --on-accent: #ffffff;
  --teal: #0f6e56; --teal-soft: #e6f6f0; --teal-stroke: #9adec6;
  --border: #e4e8ee; --border-strong: #cfd6e0;
  --tx-1: #16233b; --tx-2: #5c6b82; --tx-3: #9aa7b8;
  --shadow-card: 0 1px 2px rgba(22,35,59,.05), 0 8px 24px rgba(22,35,59,.06);
  --shadow-pop: 0 2px 6px rgba(22,35,59,.06), 0 16px 40px rgba(22,35,59,.12);
}
.oia[data-palette="refonte"][data-theme="dark"] {
  --bg-app: #0e1118; --bg-surface: #161a23; --bg-input: #1b2029; --bg-hover: #1f2531;
  --accent: #6ba6e8; --accent-soft: #1a2c45; --accent-stroke: #2c4a73; --accent-deep: #9cc4f0; --on-accent: #0e1118;
  --teal: #5cc9a3; --teal-soft: #14302a; --teal-stroke: #23594a;
  --border: #262c39; --border-strong: #364155;
  --tx-1: #e6eaf1; --tx-2: #8d99ac; --tx-3: #5a6577;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-pop: 0 2px 6px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
}
.oia[data-palette="ardoise"][data-theme="light"] {
  --bg-app: #eef0f4; --bg-surface: #ffffff; --bg-input: #ffffff; --bg-hover: #e7eaf1;
  --accent: #2445c4; --accent-soft: #e8ecfb; --accent-stroke: #c5cff4; --accent-deep: #182f8f; --on-accent: #ffffff;
  --teal: #0f6e56; --teal-soft: #e6f6f0; --teal-stroke: #9adec6;
  --border: #e0e4ec; --border-strong: #c8cfdc;
  --tx-1: #16233b; --tx-2: #5c6b82; --tx-3: #9aa7b8;
  --shadow-card: none;
  --shadow-pop: 0 4px 14px rgba(22,35,59,.10);
}
.oia[data-palette="ardoise"][data-theme="dark"] {
  --bg-app: #0e1118; --bg-surface: #161a23; --bg-input: #1b2029; --bg-hover: #1f2531;
  --accent: #8ea8f2; --accent-soft: #1c2547; --accent-stroke: #31417c; --accent-deep: #b4c6f7; --on-accent: #0e1118;
  --teal: #5cc9a3; --teal-soft: #14302a; --teal-stroke: #23594a;
  --border: #262c39; --border-strong: #364155;
  --tx-1: #e6eaf1; --tx-2: #8d99ac; --tx-3: #5a6577;
  --shadow-card: none;
  --shadow-pop: 0 4px 14px rgba(0,0,0,.5);
}
/* Ardoise : sidebar bicolore (clair ET sombre) - tokens surchargés sur la sidebar */
.oia[data-palette="ardoise"] .oia-side {
  --bg-app: #131a2b; --bg-surface: #1c2438; --bg-input: #1c2438; --bg-hover: #232d46;
  --border: #273250; --border-strong: #364469;
  --tx-1: #e8ecf5; --tx-2: #95a1bb; --tx-3: #616e8a;
  --accent-soft: #1e2a52; --accent-stroke: #33427e; --accent-deep: #4f6ce8;
  --shadow-card: none; --on-accent: #ffffff;
}

/* ---- Alias de compatibilité ----------------------------------------------
   Les overlays secondaires (modales de confirmation, etc.) réutilisent des
   classes Tailwind mappées sur les tokens historiques (--text-primary,
   --accent-light, --shadow-md…). On les fait pointer sur les tokens v2 pour
   qu'ils héritent de la palette active à l'intérieur d'un conteneur `.oia`.
   Défini sur `.oia` (chaque valeur référence un token résolu par palette). --- */
.oia {
  --text-primary: var(--tx-1);
  --text-secondary: var(--tx-2);
  --text-tertiary: var(--tx-3);
  --text-on-accent: var(--on-accent);
  --accent-light: var(--accent-soft);
  --accent-dark: var(--accent-deep);
  --accent-hover: var(--accent-deep);
  --border-hover: var(--border-strong);
  --border-focus: var(--accent);
  --bg-card: var(--bg-hover);
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-pop);
}

/* ---- Keyframes (prototype) ------------------------------------------------ */
@keyframes oia-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes oia-slide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes oia-fade  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Placeholder de l'éditeur contenteditable du composer (parité chat_area.html) */
.oia [data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--tx-3);
  pointer-events: none;
}

/* ==========================================================================
   Interactions v2 - états hover/focus (impossibles en style inline).
   Classes utilitaires consommées par login_v2 / chat_v2. Tout est tokenisé.
   ========================================================================== */
.oia-input {
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.oia-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.oia-btn-accent { transition: background .15s ease; }
.oia-btn-accent:hover:not(:disabled) { background: var(--accent-deep) !important; }
.oia-btn-accent:disabled { opacity: .4; cursor: not-allowed; }

.oia-btn-outline { display: inline-flex; flex-direction: row; align-items: center; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.oia-btn-outline:hover { background: var(--bg-hover) !important; color: var(--tx-1) !important; }

.oia-ghost { transition: background .15s ease, color .15s ease; }
.oia-ghost:hover { background: var(--bg-hover) !important; color: var(--tx-1) !important; }

.oia-row:hover { background: var(--bg-hover) !important; }

/* Actions révélées au survol (conversations, documents) - sans dépendre de Tailwind */
.oia-conv-actions, .oia-file-actions { opacity: 0; transition: opacity .15s ease; }
.oia-conv:hover .oia-conv-actions,
.oia-file:hover .oia-file-actions,
.oia-file-actions:focus-within { opacity: 1; }

.oia-src { transition: border-color .15s ease, color .15s ease, background .15s ease; }
.oia-src:hover {
  border-color: var(--accent-stroke) !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  text-decoration: none;
}

.oia-drop { transition: border-color .15s ease, color .15s ease, background .15s ease; }
.oia-drop:hover {
  border-color: var(--accent-stroke) !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* ---- Administration v2 (sidebar nav, tabs segmentés, pill rôle, switch) --- */
.oia-tab { transition: background .15s ease, color .15s ease; }
.oia-tab:hover { color: var(--tx-1) !important; }

/* Item de navigation latérale admin (liste verticale). L'état actif est rendu
   côté Jinja (classe .is-active) ; le hover ne s'applique qu'aux items inactifs
   pour ne pas écraser le fond accentué de l'item courant. */
.oia-nav-item { transition: background .15s ease, color .15s ease; }
.oia-nav-item:not(.is-active):hover { background: var(--bg-hover) !important; color: var(--tx-1) !important; }

.oia-pill-role { transition: border-color .15s ease; }
.oia-pill-role:hover { border-color: var(--border-strong) !important; }

.oia-switch-track { transition: background .15s ease; }
.oia-switch-thumb { transition: left .15s ease; }

.oia-icon-danger { transition: background .15s ease, color .15s ease; }
.oia-icon-danger:hover { background: var(--bg-hover) !important; color: #e05252 !important; }

/* Barres de défilement discrètes dans les zones v2 */
.oia-scroll { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.oia-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.oia-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
.oia-scroll::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   Shell unifié chat + workspace (Phase 1) - lanceur, modal profil, mode sidebar.
   ⚠️ Piège Alpine : un `:style` string écrase le `style=` statique, et `x-show`
   remet `display` à vide. Parade appliquée ici : les éléments à ÉTAT (tuiles
   module/Créer, swatchs, items workspace) ne portent AUCUN style inline visuel
   - toute leur présentation (structure, couleurs, état actif/désactivé, hover)
   vit dans ces classes, et l'état bascule via `:class` (jamais `:style`).
   `:class` ne touche ni le `style=` ni le `display` géré par `x-show`, donc
   zéro collision possible. Entièrement tokenisé.
   ========================================================================== */

/* Lanceur - tuiles module (grille 3 colonnes) */
.oia-launch-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 4px 10px; border: 1px solid transparent; border-radius: 12px;
  background: transparent; cursor: pointer; font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.oia-launch-tile:not(.is-disabled):hover { background: var(--bg-hover); }
.oia-launch-tile.is-active { background: var(--accent-soft); border-color: var(--accent-stroke); }
.oia-launch-tile.is-disabled { cursor: not-allowed; opacity: .45; }
.oia-launch-ico {
  width: 34px; height: 34px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center;
  background: var(--accent-soft); border: 1px solid var(--accent-stroke); color: var(--accent-deep);
}
.oia-launch-ico.is-teal { background: var(--teal-soft); border-color: var(--teal-stroke); color: var(--teal); }
.oia-launch-label { font-size: 11px; font-weight: 600; color: var(--tx-1); text-align: center; line-height: 1.25; }

/* Lanceur - tuiles « Créer » (dashed, rangée flex) */
.oia-create-tile {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 2px 8px; border: 1px dashed var(--border-strong); border-radius: 10px;
  background: transparent; cursor: pointer; font-family: inherit; color: var(--tx-2);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.oia-create-tile:not(.is-disabled):hover {
  border-color: var(--accent-stroke); color: var(--accent); background: var(--accent-soft);
}
.oia-create-tile.is-disabled { cursor: not-allowed; opacity: .45; }
.oia-create-label { font-size: 10.5px; font-weight: 600; }

/* Swatch de palette (déplacé du popover utilisateur vers le modal profil) */
.oia-swatch {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 4px; border: 1px solid var(--border); border-radius: 10px;
  background: transparent; cursor: pointer; font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.oia-swatch:not(.is-active):hover { border-color: var(--accent-stroke); }
.oia-swatch.is-active { background: var(--accent-soft); border-color: var(--accent-stroke); }

/* Mode Workspace - item de contenu de la sidebar contextuelle */
.oia-ws-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border: none; border-radius: 9px; background: transparent;
  cursor: pointer; font-family: inherit; text-align: left; transition: background .15s ease;
}
.oia-ws-item:not(.is-static):hover { background: var(--bg-hover); }
.oia-ws-item.is-static { cursor: default; }