/* ============================================================================
 * SuperAndy — onglet « IA » (socle IA multi-tenant). Styles du module
 * assets/ai/* : encarts d'aide, cartes KPI, graphes maison (barres SVG +
 * barres horizontales), graphe d'infrastructure zoomable et journal.
 * S'appuie sur les tokens SuperAndy de styles.css (--panel/--soft/--accent…) :
 * sombre par défaut, le mode clair est porté par les variables :root.
 * ========================================================================== */

/* ---- Encart d'aide ---- */
.ai-help{ background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:18px; }
.ai-help-t{ font-weight:700; font-size:13.5px; margin-bottom:6px; }
.ai-help-p{ margin:0 0 6px; color:var(--soft); font-size:12.5px; line-height:1.5; }
.ai-help-p:last-child{ margin-bottom:0; }

/* ---- KPI (jour / mois / année / all-time) ---- */
.ai-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.ai-metric{ background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius); padding:12px; text-align:center; }
.ai-metric-v{ font-size:19px; font-weight:800; line-height:1.15; }
.ai-metric-s{ font-size:11.5px; color:var(--soft); margin-top:3px; }
.ai-metric-l{ font-size:11px; color:var(--soft); margin-top:5px; text-transform:uppercase; letter-spacing:.4px; }
.ai-metric.warn .ai-metric-v{ color:var(--warn); }
.ai-metric.ko .ai-metric-v{ color:var(--ko); }

/* ---- Graphe à barres quotidien (SVG) + légende ---- */
.ai-chart{ width:100%; height:auto; display:block; }
.ai-leg{ display:flex; gap:12px; flex-wrap:wrap; }
.ai-leg-i{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--soft); }
.ai-dot{ width:10px; height:10px; border-radius:2px; display:inline-block; }
.ai-dot--round{ border-radius:50%; width:8px; height:8px; }

/* ---- Barres horizontales (ventilations) ---- */
.ai-hbars{ display:flex; flex-direction:column; gap:7px; }
.ai-hbar{ display:flex; align-items:center; gap:8px; }
.ai-hbar-label{ width:150px; font-size:12px; text-align:right; color:var(--soft); flex:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai-hbar-track{ flex:1; background:var(--panel2); border-radius:5px; height:16px; overflow:hidden; }
.ai-hbar-fill{ height:100%; background:var(--accent); border-radius:5px; min-width:2px; }
.ai-hbar-val{ width:62px; font-size:12px; font-weight:700; text-align:right; }

.ai-three{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:1100px){ .ai-three{ grid-template-columns:1fr; } }
.ai-two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:900px){ .ai-two{ grid-template-columns:1fr; } .ai-hbar-label{ width:110px; } }

/* ---- Graphe d'infrastructure zoomable ---- */
.ai-gviewport{ position:relative; overflow:hidden; height:430px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--panel2); touch-action:none; cursor:grab;
  user-select:none; -webkit-user-select:none; }
.ai-gviewport:active{ cursor:grabbing; }
.ai-gworld{ position:absolute; left:0; top:0; transform-origin:0 0; }
.ai-glinks{ position:absolute; left:0; top:0; pointer-events:none; }
.ai-gcolh{ position:absolute; top:0; text-align:center; font-size:12px; font-weight:700; color:var(--soft);
  text-transform:uppercase; letter-spacing:.6px; }
.ai-gcard{ position:absolute; background:var(--panel); border:1px solid var(--border); border-radius:9px;
  padding:9px 11px; cursor:pointer; overflow:hidden; box-shadow:var(--shadow); }
.ai-gcard:hover{ border-color:var(--accent); }
.ai-gcard-t{ font-weight:700; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai-gcard-s{ font-size:11px; color:var(--soft); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai-gcard--feature{ border-left:3px solid var(--accent); }
.ai-gcard--model{ border-left:3px solid #8b5cf6; }
.ai-gcard--provider{ border-left:3px solid var(--ok); }
.ai-gcard.is-off{ opacity:.45; filter:grayscale(.6); }
.ai-gctrls{ position:absolute; top:10px; right:10px; display:flex; gap:6px; z-index:2; }
.ai-gbtn{ width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--panel);
  color:var(--text); font-size:16px; line-height:1; padding:0; }
.ai-gbtn:hover{ border-color:var(--accent); }
.ai-glegend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--soft); }
.ai-glegend .ai-leg-i{ font-size:12px; }
.ai-leg-line{ display:inline-block; width:22px; border-top:2px solid var(--accent); vertical-align:middle; }
.ai-leg-line.is-fallback{ border-top-style:dashed; border-top-color:var(--warn); }
.ai-leg-line.is-wire{ border-top-width:1.5px; border-top-color:var(--soft); }
.ai-leg-card{ display:inline-block; width:16px; height:11px; border-radius:3px; background:var(--panel);
  border:1px solid var(--border); opacity:.45; }

/* ---- Journal : détail d'une requête ---- */
.ai-reqDetail{ display:flex; flex-direction:column; gap:12px; }
.ai-detailJson-h{ font-weight:700; font-size:13px; margin-bottom:8px; }
.ai-json{ background:var(--bg); border-radius:6px; padding:8px 10px; font-size:11.5px; margin:0;
  overflow-x:auto; max-height:40vh; overflow-y:auto; white-space:pre-wrap; word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* ---- Test de provider ---- */
.ai-testResult{ margin-top:6px; }