/*
 * bento.css — Design system "soft UI / bento" pour Snorklee.
 * Source unique pour la DA refondue (Analytics + onglets repris par le 2e agent).
 *
 * CONTRAT DE CLASSES (verrouillé) :
 *   .bento                 — fond dégradé pastel + padding de page (racine d'onglet)
 *   .bento-grid            — grille responsive 12 colonnes, gap doux
 *   .bento-tile            — carte blanche arrondie (~20px) + ombre douce
 *     .bento-tile--ai      — variante translucide (backdrop-filter) pour AI Insights
 *     .bento-tile--kpi     — variante KPI (compacte, gros chiffre)
 *     .bento-tile--wide    — span large
 *     .bento-tile--tall    — span vertical (charts)
 *     .bento-tile--accent  — fond accent doux (hero / CTA)
 *   .bento-ask             — barre de prompt IA (hero)
 *   .bento-tile-h          — entête de tuile (titre + slot infobulle + lien d'aide)
 *   .bento-tile-title      — titre de tuile
 *   .bento-help            — petit lien d'aide
 *   .bento-kpi-*           — sous-éléments KPI (value/label/icon/trend/spark)
 *   .bento-list / .bento-row — listes à barres avec logos
 *   .bento-empty           — état vide honnête
 *
 * Tokens pastel : voir tokens.css (--bento-*). Polices : Outfit (UI) + DM Mono (chiffres).
 */

.bento {
  --bento-col-gap: 18px;
  --bento-row-gap: 18px;
  --bento-tile-radius: var(--radius-xl, 20px);

  /* Alias locaux → charte globale (tokens.css). Aucune couleur hardcodée :
     tout dérive de --ac / --chart-* / --bg* / --tx* / --ok / --dn. */
  --bento-page-bg: var(--bg);
  --bento-grad-1: rgba(79, 196, 161, 0.22);   /* menthe (--ok) */
  --bento-grad-2: rgba(183, 176, 236, 0.30);  /* lavande (--chart-3) */
  --bento-grad-3: rgba(143, 182, 242, 0.20);  /* bleu doux (--chart-4) */
  --bento-tile-bg: var(--bg2);
  --bento-tile-border: var(--bd);
  --bento-shadow: var(--shadow-1);
  --bento-shadow-ai: var(--shadow-2);
  --bento-shadow-inset: inset 0 1px 2px rgba(40, 44, 90, 0.04);
  --bento-accent-soft: var(--ac2);
  --bento-accent-border: var(--ac3);
  --bento-ai-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(245, 247, 251, 0.7) 100%);
  --bento-ai-border: var(--ac3);
  --bento-ask-grad-1: rgba(255, 255, 255, 0.9);
  --bento-ask-grad-2: rgba(232, 228, 246, 0.72);
  --bento-orb-1: var(--chart-3);
  --bento-orb-2: var(--ac);
  --bento-chip-bg: var(--bg3);
  --bento-chip-border: var(--bd);
  --bento-row-hover: var(--bg3);
  --bento-bar-1: var(--ac);
  --bento-bar-2: var(--chart-3);
  --bento-up: var(--ok);
  --bento-down: var(--dn);
  --bento-danger: var(--dn);
  --bento-danger-soft: var(--dn2);
  --bento-danger-border: var(--ac3);

  position: relative;
  padding: clamp(14px, 2vw, 28px);
  /* Dégradé de page prescrit (charte 2026) : menthe → lavande, accents radiaux doux. */
  background:
    radial-gradient(120% 120% at 0% 0%, var(--bento-grad-1) 0%, transparent 55%),
    radial-gradient(120% 120% at 100% 0%, var(--bento-grad-2) 0%, transparent 55%),
    radial-gradient(140% 140% at 100% 100%, var(--bento-grad-3) 0%, transparent 60%),
    linear-gradient(160deg, #dcece6 0%, #e8e4f6 100%);
  border-radius: var(--radius-2xl, 28px);
  min-height: 60vh;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--bento-row-gap) var(--bento-col-gap);
  align-items: stretch;
  /* Flux dans l'ordre du DOM (PAS `dense`) : `dense` rapatrie les petites tuiles
     d'une section suivante dans le trou de fin d'une section précédente, en
     franchissant les eyebrows span-12 → une carte se détache visuellement de sa
     section au breakpoint tablette. Un trou en fin de section est cosmétique et
     acceptable ; un mélange inter-sections ne l'est pas. */
  grid-auto-flow: row;
}

/* ---- Tuile de base ---- */
.bento-tile {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
  background: var(--bento-tile-bg);
  border: 1px solid var(--bento-tile-border);
  border-radius: var(--bento-tile-radius);
  box-shadow: var(--bento-shadow);
  min-width: 0;
}

.bento-tile--wide { grid-column: span 6; }
.bento-tile--full { grid-column: span 12; }
.bento-tile--two-thirds { grid-column: span 8; }
.bento-tile--tall { grid-column: span 8; }
.bento-tile--half { grid-column: span 6; }
.bento-tile--third { grid-column: span 4; }

.bento-tile[data-card='page-selector'] {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
}

.bento-tile--kpi {
  grid-column: span 3;
  gap: 8px;
  padding: 18px 18px 16px;
}

/* ---- Rangée KPI : répartition à parts égales, jamais de trou ----
   La rangée est une sous-grille (.bento-grid) qui occupe les 12 colonnes.
   On lui donne son propre gabarit auto-fit : N tuiles (4 KPI, ou 5 avec le
   score présence IA) se répartissent uniformément sans déborder ni laisser
   de colonne vide. Le span-3 hérité de .bento-tile--kpi est neutralisé ici. */
.bento-kpi-row {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.bento-kpi-row > .bento-tile--kpi {
  grid-column: auto;
}

.bento-tile--accent {
  background:
    linear-gradient(135deg, var(--bento-accent-soft) 0%, var(--bento-tile-bg) 70%);
  border-color: var(--bento-accent-border);
}

/* ---- Tuile hôte d'une card autonome réutilisée (zéro double-cadre) ---- */
.bento-tile--plain { padding: 0; gap: 0; overflow: hidden; }
.bento-tile--plain > .card {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: var(--bento-tile-radius);
  margin: 0;
  width: 100%;
  height: 100%;
}
.bento-tile--plain > .card > .card-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 22px 0;
}
.bento-tile--plain > .card > .card-body { padding: 12px 22px 20px; }
.bento-tile--plain .bento-help { margin-left: auto; }
.bento-tile-logos {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}
.bento-tile-logos .brand-icon {
  display: inline-flex;
  opacity: 0.85;
}
.bento-tile--plain .card-h-lead + .bento-tile-logos { margin-left: 6px; }

/* Onglets Intégration / Conformité : tuiles spécifiques au layout bento. */
.install-optout-anchor .install-optout-anchor-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.install-optout-anchor .install-optout-anchor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  color: var(--ac);
}
.install-optout-anchor .install-optout-anchor-text {
  flex: 1 1 220px;
  margin: 0;
  font-size: 13px;
  color: var(--tx2);
}
.install-optout-anchor .install-optout-anchor-btn {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--ac3);
  background: var(--bg2);
  color: var(--ac);
  font-family: var(--font-ui, 'Outfit'), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.install-optout-anchor .install-optout-anchor-btn:hover {
  background: var(--ac);
  color: #fff;
}
.compliance-footer {
  text-align: center;
}
.bento-tile--full.compliance-footer p {
  margin: 0 auto;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tx3);
  max-width: 720px;
}
.bento-tile--full.compliance-footer strong { color: var(--tx); }

/* La barre prompt IA réutilise .dbv2-ask : on neutralise son cadre dans .bento-ask */
.bento-ask .dbv2-ask {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}
.bento-ask .dbv2-ask::after { display: none; }
.bento-ask .dbv2-ask > * { position: relative; z-index: 1; }

/* Filtres actifs + prompt Snorklee Bot : derniers styles utiles de l'ancien
   dashboard-v2, désormais scindés et bornés au système bento. */
.bento-grid > .dbv2-active-filters {
  grid-column: span 12;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 0 4px 2px;
}
.dbv2-filter-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--bg3);
  color: var(--tx);
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 11px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.dbv2-filter-chip:hover { background: var(--bg4); border-color: var(--ac); }
.dbv2-filter-chip:disabled { cursor: default; opacity: 0.7; }
.dbv2-filter-x { color: var(--tx3); font-size: 12px; line-height: 1; }
.dbv2-filter-arrow { color: var(--tx3); font-family: var(--font-mono, 'DM Mono'), monospace; }
.dbv2-filter-clear {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 1px dashed var(--bd2);
  border-radius: 999px;
  background: transparent;
  color: var(--tx3);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.dbv2-filter-clear:hover { color: var(--dn); border-color: var(--dn); }

.bento-ask .dbv2-ask-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.bento-ask .dbv2-ask-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bento-ask .dbv2-ask-eyebrow {
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac);
  opacity: 0.85;
}
.bento-ask .dbv2-ask-title {
  margin: 0;
  font-family: var(--font-ui, 'Outfit'), system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--tx);
  letter-spacing: 0;
}
.bento-ask .dbv2-ask-hint {
  margin: 0;
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 11px;
  color: var(--tx3);
}
.bento-ask .dbv2-ask-log {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
  padding: 4px 2px;
}
.bento-ask .dbv2-ask-log:empty { display: none; }
.bento-ask .dbv2-ask-msg { display: flex; max-width: 100%; }
.bento-ask .dbv2-ask-msg--user { justify-content: flex-end; }
.bento-ask .dbv2-ask-msg--assistant { justify-content: flex-start; }
.bento-ask .dbv2-ask-bubble {
  max-width: 92%;
  padding: 12px 16px;
  border-radius: 14px;
  font-family: var(--font-ui, 'Outfit'), system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tx);
  overflow-wrap: anywhere;
}
.bento-ask .dbv2-ask-msg--user .dbv2-ask-bubble {
  max-width: 78%;
  background: var(--ac);
  border: 1px solid var(--ac);
  border-bottom-right-radius: 4px;
  color: #fff;
}
.bento-ask .dbv2-ask-msg--assistant .dbv2-ask-bubble {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-bottom-left-radius: 4px;
}
.bento-ask .dbv2-ask-msg--error .dbv2-ask-bubble {
  background: var(--dn2);
  border-color: color-mix(in srgb, var(--dn) 32%, var(--bd));
  color: var(--dn);
}
.bento-ask .dbv2-ask-bubble p { margin: 0 0 8px; }
.bento-ask .dbv2-ask-bubble p:last-child { margin-bottom: 0; }
.bento-ask .dbv2-ask-bubble strong { color: var(--ac); }
.bento-ask .dbv2-ask-msg--user .dbv2-ask-bubble strong { color: #fff; }
.bento-ask .dbv2-ask-bubble ul { margin: 6px 0; padding-left: 18px; }
.bento-ask .dbv2-ask-bubble li { margin: 2px 0; }
.bento-ask .dbv2-ask-bubble code {
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 12px;
  background: var(--bg3);
  padding: 1px 5px;
  border-radius: 4px;
}
.bento-ask .dbv2-ask-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 11px;
  color: var(--tx3);
  letter-spacing: 0.04em;
}
.bento-ask .dbv2-ask-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ac);
  box-shadow: 0 0 6px var(--ac);
  animation: dbv2-ask-dot 1.2s ease-in-out infinite;
}
.bento-ask .dbv2-ask-dot:nth-child(2) { animation-delay: 0.15s; }
.bento-ask .dbv2-ask-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes dbv2-ask-dot {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .bento-ask .dbv2-ask-dot { animation: none; opacity: 0.7; }
}
.bento-ask .dbv2-ask-thinking-label { color: var(--tx2); }
.bento-ask .dbv2-ask-trace {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bento-ask .dbv2-ask-trace--final {
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.18);
}
.bento-ask .dbv2-ask-trace-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 11px;
  color: var(--tx3);
  letter-spacing: 0.02em;
}
.bento-ask .dbv2-ask-trace-item.is-error { color: var(--dn); }
.bento-ask .dbv2-ask-trace-arrow { color: var(--ac); }
.bento-ask .dbv2-ask-trace-label { color: var(--tx2); }
.bento-ask .dbv2-ask-trace-chart-flag { color: var(--ac); margin-left: 2px; }
.bento-ask .dbv2-ask-answer { margin-top: 6px; }
.bento-ask .dbv2-ask-charts {
  display: grid;
  gap: 12px;
  margin: 0 0 12px;
}
.bento-ask .dbv2-ask-charts--n2,
.bento-ask .dbv2-ask-charts--n3 { grid-template-columns: 1fr 1fr; }
.bento-ask .dbv2-ask-charts--n3 .dbv2-ask-chart:nth-child(3) { grid-column: 1 / -1; }
.bento-ask .dbv2-ask-chart {
  margin: 0;
  padding: 10px 12px 12px;
  background: var(--bg3);
  border: 1px solid var(--bd);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.bento-ask .dbv2-ask-chart-title {
  font-family: var(--font-ui, 'Outfit'), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
  margin: 0;
}
.bento-ask .dbv2-ask-chart-body {
  min-height: 180px;
  width: 100%;
  position: relative;
}
.bento-ask .dbv2-ask-chart--heatmap .dbv2-ask-chart-body { min-height: 160px; }
.bento-ask .dbv2-ask-chart--donut .dbv2-ask-chart-body { min-height: 220px; }
.bento-ask .dbv2-ask-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 11px;
  color: var(--tx2);
  letter-spacing: 0.02em;
}
.bento-ask .dbv2-ask-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bento-ask .dbv2-ask-chart-legend-swatch {
  display: inline-block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
}
.bento-ask .dbv2-ask-chart-legend-swatch--primary { background: var(--ac); }
.bento-ask .dbv2-ask-chart-legend-swatch--compare {
  background: var(--tx2);
  background-image: linear-gradient(to right, var(--tx2) 60%, transparent 60%);
  background-size: 6px 100%;
}
.bento-ask .dbv2-ask-suggested {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 4px;
}
.bento-ask .dbv2-ask-log:not(:empty) ~ .dbv2-ask-suggested { display: none; }
.bento-ask .dbv2-ask-chip {
  appearance: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--bd);
  color: var(--tx2);
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.bento-ask .dbv2-ask-chip:hover {
  background: var(--bg4);
  border-color: var(--ac);
  color: var(--tx);
}
.bento-ask .dbv2-ask-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.bento-ask .dbv2-ask-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.bento-ask .dbv2-ask-input-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg2);
  border: 1px solid var(--bd);
  transition: border-color var(--t-fast);
}
.bento-ask .dbv2-ask-input-wrap:focus-within {
  border-color: var(--ac);
  box-shadow: var(--shadow-focus);
}
.bento-ask .dbv2-ask-input {
  width: 100%;
  min-height: 22px;
  max-height: 160px;
  background: transparent;
  border: none;
  color: var(--tx);
  font-family: var(--font-ui, 'Outfit'), system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  outline: none;
}
.bento-ask .dbv2-ask-input::placeholder { color: var(--tx3); }
.bento-ask .dbv2-ask-input:disabled { opacity: 0.6; cursor: progress; }
.bento-ask .dbv2-ask-send {
  appearance: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--ac);
  background: var(--ac);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter var(--t-fast), transform var(--t-fast);
}
.bento-ask .dbv2-ask-send:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.bento-ask .dbv2-ask-send:disabled { opacity: 0.4; cursor: progress; }
.bento-ask .dbv2-ask-footnote {
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 10px;
  color: var(--tx3);
  letter-spacing: 0.04em;
  text-align: right;
  padding: 0 4px;
}
@media (max-width: 720px) {
  .bento-ask .dbv2-ask-charts--n2,
  .bento-ask .dbv2-ask-charts--n3 { grid-template-columns: 1fr; }
  .bento-ask .dbv2-ask-charts--n3 .dbv2-ask-chart:nth-child(3) { grid-column: auto; }
}
@media (max-width: 640px) {
  .bento-ask { padding: 18px 16px; }
  .bento-ask .dbv2-ask-bubble { font-size: 13px; padding: 10px 12px; }
  .bento-ask .dbv2-ask-msg--user .dbv2-ask-bubble { max-width: 88%; }
}
/* Le bloc Insight (card autonome) hébergé dans une tuile --ai : pas de double cadre */
.bento-insight > .card {
  border: 0;
  box-shadow: none;
  background: transparent;
  margin: 0;
  width: 100%;
}
.bento-insight > .card > .card-h { padding: 0 0 8px; }
.bento-insight > .card > .card-body { padding: 0; }

/* Variante AI Insights : translucide / verre dépoli */
.bento-tile--ai {
  background: var(--bento-ai-bg);
  border-color: var(--bento-ai-border);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--bento-shadow-ai);
}

/* ---- Entête de tuile ---- */
.bento-tile-h {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
}

.bento-tile-title {
  font-family: var(--font-ui, 'Outfit'), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tx);
  margin: 0;
}

.bento-tile-sub {
  font-size: 12px;
  color: var(--tx2);
  margin: 0;
}

.bento-tile-h .tooltip-trigger { color: var(--tx3); }

.bento-help {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ac);
  text-decoration: none;
  white-space: nowrap;
}
.bento-help:hover { text-decoration: underline; }
.bento-help svg { width: 12px; height: 12px; }

/* Bouton export injecté dans une tuile bento (AI Activity / Cited /
   Distribution). Pousse à droite par défaut ; s'il suit .bento-help (qui
   prend déjà l'auto), petite marge pour les séparer. */
.bento-tile-h .card-export-btn { margin-left: auto; }
.bento-tile-h .bento-help + .card-export-btn { margin-left: 4px; }

/* ---- Barre de prompt IA (hero) ---- */
.bento-ask {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, var(--bento-ask-grad-1) 0%, var(--bento-ask-grad-2) 100%);
  border: 1px solid var(--bento-ai-border);
  box-shadow: var(--bento-shadow-ai);
}

.bento-ask-head { display: flex; align-items: center; gap: 12px; }

.bento-ask-orb {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff 0%, var(--bento-orb-1) 45%, var(--bento-orb-2) 100%);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
}

.bento-ask-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bento-ask-eyebrow {
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac);
}
.bento-ask-title {
  margin: 0;
  font-family: var(--font-ui, 'Outfit'), system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--tx);
}
.bento-ask-hint { margin: 0; font-size: 12.5px; color: var(--tx2); }

.bento-ask-form { display: flex; flex-direction: column; gap: 10px; }

.bento-ask-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bento-tile-bg);
  border: 1px solid var(--bento-tile-border);
  border-radius: 16px;
  padding: 8px 8px 8px 16px;
  box-shadow: var(--bento-shadow-inset);
}
.bento-ask-input-wrap:focus-within {
  border-color: var(--ac);
  box-shadow: var(--shadow-focus);
}

.bento-ask-input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--tx);
  font-family: var(--font-ui, 'Outfit'), system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  padding: 6px 0;
  max-height: 160px;
}
.bento-ask-input::placeholder { color: var(--tx3); }

.bento-ask-send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 13px;
  background: var(--ac);
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.bento-ask-send:hover { filter: brightness(1.05); transform: translateY(-1px); }
.bento-ask-send:disabled { opacity: 0.5; cursor: default; transform: none; }

.bento-ask-suggested { display: flex; flex-wrap: wrap; gap: 8px; }
.bento-ask-chip {
  border: 1px solid var(--bento-chip-border);
  background: var(--bento-chip-bg);
  color: var(--tx2);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.bento-ask-chip:hover { border-color: var(--ac); color: var(--ac); background: var(--bento-accent-soft); }

.bento-ask-footnote { font-size: 11px; color: var(--tx3); }

.bento-ask-log { display: flex; flex-direction: column; gap: 12px; }
.bento-ask-log:empty { display: none; }
.bento-ask-msg { display: flex; }
.bento-ask-msg--user { justify-content: flex-end; }
.bento-ask-bubble {
  max-width: 88%;
  padding: 12px 15px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tx);
}
.bento-ask-msg--user .bento-ask-bubble {
  background: var(--ac);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.bento-ask-msg--assistant .bento-ask-bubble {
  background: var(--bento-tile-bg);
  border: 1px solid var(--bento-tile-border);
  border-bottom-left-radius: 6px;
}
.bento-ask-msg--error .bento-ask-bubble {
  background: var(--bento-danger-soft);
  border: 1px solid var(--bento-danger-border);
  color: var(--tx);
}
.bento-ask-answer p { margin: 0 0 8px; }
.bento-ask-answer p:last-child { margin-bottom: 0; }
.bento-ask-answer ul { margin: 6px 0; padding-left: 18px; }
.bento-ask-answer code {
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 12px;
  background: var(--bg4);
  padding: 1px 5px;
  border-radius: 5px;
}
.bento-ask-thinking { display: inline-flex; align-items: center; gap: 6px; }
.bento-ask-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ac);
  animation: bento-pulse 1.2s ease-in-out infinite;
}
.bento-ask-dot:nth-child(2) { animation-delay: 0.18s; }
.bento-ask-dot:nth-child(3) { animation-delay: 0.36s; }
.bento-ask-thinking-label { font-size: 12px; color: var(--tx2); }
.bento-ask-trace {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.bento-ask-trace-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 10.5px;
  color: var(--tx3);
}
.bento-ask-trace-item.is-error { color: var(--bento-danger); }

@keyframes bento-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

/* ---- AI Insights bloc ---- */
.bento-insight { gap: 12px; }
.bento-insight-orb {
  width: 30px; height: 30px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff 0%, var(--bento-orb-1) 45%, var(--bento-orb-2) 100%);
  box-shadow: 0 3px 10px rgba(var(--accent-rgb), 0.3);
  flex: 0 0 auto;
}
/* ---- Mascotte Snorklee Bot (remplace les orbes ask + insight) ---- */
.snorklee-mascot { display: inline-flex; flex: 0 0 auto; line-height: 0; }
.snorklee-mascot-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.snorklee-mascot--ask { width: 46px; height: 46px; }
.snorklee-mascot--insight { width: 38px; height: 38px; }

.snorklee-mascot .bot-body { transform-origin: center; }
.snorklee-mascot .eye { transform-origin: 100px 95px; }

@media (prefers-reduced-motion: no-preference) {
  .snorklee-mascot .bot-body { animation: snorklee-mascot-float 3s ease-in-out infinite; }
  .snorklee-mascot .eye { animation: snorklee-mascot-blink 4s infinite; }
  .snorklee-mascot .bubble-1 { animation: snorklee-mascot-bubble 2s infinite ease-in; }
  .snorklee-mascot .bubble-2 { animation: snorklee-mascot-bubble 2.5s infinite ease-in 0.8s; }
  .snorklee-mascot .bubble-3 { animation: snorklee-mascot-bubble 1.8s infinite ease-in 0.3s; }
  /* Pendant la réflexion, les bulles s'accélèrent (le robot « travaille »). */
  .dbv2-ask.is-thinking .snorklee-mascot .bubble-1,
  .dbv2-ask.is-thinking .snorklee-mascot .bubble-2,
  .dbv2-ask.is-thinking .snorklee-mascot .bubble-3 { animation-duration: 0.9s; }
}
@keyframes snorklee-mascot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes snorklee-mascot-bubble {
  0% { transform: translateY(20px) scale(0.8); opacity: 0; }
  50% { opacity: 0.8; }
  100% { transform: translateY(-60px) scale(1.2); opacity: 0; }
}
@keyframes snorklee-mascot-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

.bento-insight-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tx);
  margin: 0;
}
.bento-insight-text p { margin: 0 0 8px; }
.bento-insight-text p:last-child { margin-bottom: 0; }
.bento-insight-text ul { margin: 6px 0; padding-left: 18px; }
.bento-insight-meta {
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 11px;
  color: var(--tx3);
}
.bento-insight-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bento-btn {
  border: 1px solid var(--bento-chip-border);
  background: var(--bento-chip-bg);
  color: var(--tx2);
  border-radius: 11px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
}
.bento-btn:hover { border-color: var(--ac); color: var(--ac); }
.bento-btn--primary { background: var(--ac); color: #fff; border-color: var(--ac); }
.bento-btn--primary:hover { filter: brightness(1.05); color: #fff; }
.bento-btn:disabled { opacity: 0.55; cursor: default; }

/* ---- KPI ---- */
.bento-kpi-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx2);
}
.bento-kpi-icon {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--bento-accent-soft);
  color: var(--ac);
}
.bento-kpi-icon svg { width: 15px; height: 15px; }
.bento-kpi-value {
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  line-height: 1;
  color: var(--tx);
  letter-spacing: -0.02em;
}
.bento-kpi-suffix { font-size: 14px; color: var(--tx3); margin-left: 3px; }
.bento-kpi-spark { height: 30px; margin-top: 2px; overflow: hidden; }
/* La sparkline (viewBox sans width/height) doit être bornée à sa case, sinon
   elle déborde et chevauche le sous-texte « Confiance faible… » en dessous. */
.bento-kpi-spark .ai-sparkline { width: 100%; height: 100%; display: block; }
.bento-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-family: var(--font-mono, 'DM Mono'), monospace;
}
.bento-kpi-trend.is-up { color: var(--bento-up); }
.bento-kpi-trend.is-down { color: var(--bento-down); }
.bento-kpi-trend.is-flat { color: var(--tx3); }
.bento-kpi-trend-vs { color: var(--tx3); }
.bento-kpi-sub { font-size: 11.5px; color: var(--tx3); }
.bento-kpi-tile--low-volume .bento-kpi-value { color: var(--tx2); }

.bento-live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--tx3);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5);
}
.bento-tile--kpi.is-live .bento-live-dot {
  background: var(--bento-up);
  animation: bento-live 1.8s ease-out infinite;
}
@keyframes bento-live {
  0% { box-shadow: 0 0 0 0 rgba(79, 196, 161, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(79, 196, 161, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 196, 161, 0); }
}

/* ---- Listes à barres avec logos ---- */
.bento-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bento-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 11px;
  position: relative;
}
.bento-row:hover { background: var(--bento-row-hover); }
.bento-row-icon {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.bento-row-icon .brand-icon { display: inline-flex; }
.bento-row-icon img, .bento-row-icon svg { width: 100%; height: 100%; object-fit: contain; }
.bento-row-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bento-row-name {
  font-size: 13px;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bento-row-sub { font-size: 11px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bento-row-val {
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 12.5px;
  color: var(--tx2);
  text-align: right;
  flex: 0 0 auto;
}
.bento-row-bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background: var(--bg4);
  overflow: hidden;
  margin-top: 1px;
}
.bento-row-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bento-bar-1), var(--bento-bar-2));
}
.bento-row-rank {
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 11px;
  color: var(--tx3);
  width: 18px;
  flex: 0 0 auto;
}

.bento-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bento-accent-soft);
  color: var(--ac);
  white-space: nowrap;
}

/* ---- Activité IA (tuile pleine largeur, layout natif sans clipping) ---- */
.bento-ai-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.bento-ai-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bento-ai-col-head { display: flex; align-items: center; gap: 8px; }
.bento-ai-col-icon {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bento-accent-soft);
  color: var(--ac);
  flex: 0 0 auto;
}
.bento-ai-col-icon svg { width: 14px; height: 14px; }
.bento-ai-col-title {
  margin: 0;
  font-family: var(--font-ui, 'Outfit'), system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx);
}
.bento-ai-col-empty { margin: 4px 0 0; font-size: 12.5px; color: var(--tx3); }
.bento-ai-list { gap: 2px; }

.bento-ai-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--bento-tile-border);
}
.bento-ai-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bento-ai-stat-val {
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 16px;
  font-weight: 500;
  color: var(--tx);
  letter-spacing: -0.01em;
}
.bento-ai-stat-label { font-size: 11.5px; color: var(--tx3); }

@media (max-width: 720px) {
  .bento-ai-cols { grid-template-columns: 1fr; gap: 18px; }
}

/* Donut + legend layouts */
.bento-split {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) 1.2fr;
  gap: 16px;
  align-items: center;
}
.bento-chart-box { width: 100%; }

/* Courbe de trafic : le chart remplit toute la hauteur de la tuile pour
   s'aligner verticalement sur la tuile sources (donut) voisine. La grille
   étant en align-items:stretch, les deux tuiles ont déjà la même hauteur ;
   on fait grandir body + chart-box pour occuper l'espace, et le SVG
   (preserveAspectRatio:none) s'étire sans distordre. Reste responsive :
   en colonne empilée (≤720px) le min-height tient lieu de plancher. */
.bento-tile[data-card='bento-traffic'] .bento-tile-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bento-chart-box--fill {
  flex: 1 1 auto;
  min-height: 260px;
  display: flex;
}
.bento-chart-box--fill > svg { width: 100%; height: 100%; }

/* Le SVG de courbe est focusable (tabindex=0) pour la navigation clavier,
   mais au tap sur mobile le navigateur affiche un cadre noir disgracieux.
   On supprime l'outline par défaut et on ne rétablit un repère (doux, accent)
   qu'au focus clavier via :focus-visible — qui ne se déclenche pas au toucher. */
.bento-chart-box svg:focus { outline: none; }
.bento-chart-box svg:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Infobulle de courbe interactive (survol timeline) */
.bento-chart-tip {
  position: absolute;
  z-index: 5;
  transform: translateX(-50%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 10px;
  box-shadow: var(--shadow-2, 0 4px 14px rgba(0, 0, 0, 0.12));
  font-size: var(--text-xs, 12px);
  color: var(--tx);
  white-space: nowrap;
}
.bento-chart-tip-date {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--tx2);
  margin-bottom: 1px;
}
.bento-chart-tip-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bento-chart-tip-row i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.bento-chart-tip-row b {
  font-weight: 600;
  margin-left: 2px;
}

/* Légende de courbe multi-séries */
.bento-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: var(--text-xs, 12px);
  color: var(--tx2);
}
.bento-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bento-chart-legend i {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.bento-chart-legend i.is-dashed {
  background-image: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px);
}

/* Donut « Répartition des IA » (buildBotDonut) + pastille fournisseur.
   Déplacés depuis ai-analytics.css (supprimé) : seules ces classes y restaient
   vivantes après le retrait de l'ancienne page Présence IA. */
.ai-donut-svg { width: 100%; max-width: 240px; height: auto; display: block; }
.ai-donut-center-value {
  font-family: var(--font-ui);
  font-size: 26px;
  font-weight: 600;
}
.ai-donut-center-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ai-donut-seg { transition: opacity var(--t-fast); }
.ai-donut-seg:hover { opacity: 0.7; }
.ai-provider-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ac);
  box-shadow: 0 0 8px var(--ac);
}

/* Pays / pills */
.bento-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bento-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 13px;
  background: var(--bento-chip-bg);
  border: 1px solid var(--bento-tile-border);
}
.bento-pill-flag {
  font-family: var(--font-mono, 'DM Mono'), monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
}
.bento-pill-val { font-family: var(--font-mono, 'DM Mono'), monospace; font-size: 12px; color: var(--tx2); }

/* ---- État vide honnête ---- */
.bento-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 0;
  color: var(--tx3);
  font-size: 13px;
}
.bento-empty-title { color: var(--tx2); font-weight: 500; }

/* État d'erreur (panne d'endpoint) — distinct du vide honnête */
.bento-error .bento-empty-title { color: var(--bento-danger, var(--tx)); }
.bento-error-retry {
  margin-top: 4px;
  padding: 5px 12px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--bg2);
  color: var(--ac);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.bento-error-retry:hover { border-color: var(--ac); background: var(--bento-accent-soft, var(--bg3)); }

/* ---- Placeholders de chargement ---- */
.bento-skeleton {
  background: linear-gradient(90deg, var(--bg4) 25%, var(--bg3) 50%, var(--bg4) 75%);
  background-size: 200% 100%;
  animation: bento-shimmer 1.4s ease infinite;
  border-radius: 8px;
}
.bento-tile--placeholder { min-height: 110px; }
.bento-tile--placeholder::after {
  content: '';
  display: block;
  height: 100%;
  min-height: 80px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--bg4) 25%, var(--bg3) 50%, var(--bg4) 75%);
  background-size: 200% 100%;
  animation: bento-shimmer 1.4s ease infinite;
}
@keyframes bento-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Section eyebrow (regroupe des tuiles) ---- */
.bento-section-eyebrow {
  grid-column: span 12;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 8px 2px -4px;
}
.bento-section-eyebrow h2 {
  margin: 0;
  font-family: var(--font-ui, 'Outfit'), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
}
.bento-section-eyebrow span { font-size: 12px; color: var(--tx2); }

/* ---- Fade-in ---- */
.bento-tile, .bento-ask { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .bento-fade .bento-tile, .bento-fade .bento-ask {
    animation: bento-rise 0.4s ease both;
  }
}
@keyframes bento-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .bento-tile, .bento-tile--wide, .bento-tile--two-thirds, .bento-tile--tall, .bento-tile--half, .bento-tile--third { grid-column: span 6; }
  .bento-tile--kpi { grid-column: span 6; }
  .bento-tile--full, .bento-ask, .bento-section-eyebrow { grid-column: span 12; }
}
@media (max-width: 720px) {
  .bento-grid { gap: 14px; }
  .bento-tile, .bento-tile--wide, .bento-tile--two-thirds, .bento-tile--tall, .bento-tile--half,
  .bento-tile--third, .bento-tile--kpi, .bento-tile--full { grid-column: span 12; }
  .bento-split { grid-template-columns: 1fr; }
}