/* Bubble Immersive Patch V1
   Objectif : rendu plus "bulle" (doux, immersif) sans modifier la structure.
   Conserve la palette, ajoute dégradés subtils + surfaces vitrées.
*/

:root{
  --mbf-bg-1:#fde7f4;
  --mbf-bg-2:#f7e9ff;
  --mbf-accent:#ff4fb3;
  --mbf-accent-2:#7c3aed;
  --mbf-text:#0f172a;
  --mbf-muted:rgba(15,23,42,.68);

  --mbf-surface:rgba(255,255,255,.78);
  --mbf-surface-2:rgba(255,255,255,.64);
  --mbf-border:rgba(255,255,255,.55);

  --mbf-shadow:0 18px 46px rgba(17,24,39,.12);
  --mbf-shadow-soft:0 10px 28px rgba(17,24,39,.10);
  --mbf-radius:22px;
  --mbf-radius-sm:16px;
}

/* 8 thèmes : classes body.theme-... */
body.theme-rose{
  --mbf-bg-1:#fde7f4;
  --mbf-bg-2:#f7e9ff;
  --mbf-accent:#ff4fb3;
  --mbf-accent-2:#8b5cf6;
}
body.theme-lavande{
  --mbf-bg-1:#f3e8ff;
  --mbf-bg-2:#e0f2fe;
  --mbf-accent:#7c3aed;
  --mbf-accent-2:#22c55e;
}
body.theme-pivoine{
  --mbf-bg-1:#ffe4f1;
  --mbf-bg-2:#fff1f2;
  --mbf-accent:#fb7185;
  --mbf-accent-2:#a855f7;
}
body.theme-satin{
  --mbf-bg-1:#fff7ed;
  --mbf-bg-2:#fdf2f8;
  --mbf-accent:#f59e0b;
  --mbf-accent-2:#ec4899;
}
body.theme-ocean{
  --mbf-bg-1:#e0f2fe;
  --mbf-bg-2:#dcfce7;
  --mbf-accent:#0ea5e9;
  --mbf-accent-2:#22c55e;
}
body.theme-menthe{
  --mbf-bg-1:#dcfce7;
  --mbf-bg-2:#ecfeff;
  --mbf-accent:#10b981;
  --mbf-accent-2:#06b6d4;
}
body.theme-peche{
  --mbf-bg-1:#ffedd5;
  --mbf-bg-2:#ffe4e6;
  --mbf-accent:#fb923c;
  --mbf-accent-2:#f43f5e;
}
body.theme-nuit{
  /* Compatibilité : l'ancien thème sauvegardé 'nuit' est désormais rendu comme 'Rose doux'. */
  --mbf-bg-1:#fde7f4;
  --mbf-bg-2:#f7e9ff;
  --mbf-accent:#ff4fb3;
  --mbf-accent-2:#8b5cf6;
}

/* Background "bulle" */
body{
  background:
    radial-gradient(1000px 700px at 15% 10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(135deg, var(--mbf-bg-1), var(--mbf-bg-2));
  color: var(--mbf-text);
}

/* Lisibilité globale : certains textes secondaires héritent d'opacités trop faibles dans le CSS historique */
.muted, .hint, .sub, .caption, .small, .small-text{
  color: var(--mbf-muted);
}

a{ color: color-mix(in srgb, var(--mbf-accent) 78%, #0f172a); }
a:hover{ color: var(--mbf-accent); }

body::before{
  content:"";
  position: fixed;
  inset: -40px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(140px 140px at 18% 18%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(180px 180px at 76% 22%, rgba(255,255,255,.18), transparent 72%),
    radial-gradient(220px 220px at 85% 78%, rgba(255,255,255,.14), transparent 74%),
    radial-gradient(160px 160px at 12% 76%, rgba(255,255,255,.16), transparent 72%);
  filter: blur(0.2px);
  opacity: .85;
}

/* Rehausse "verre" sur les panneaux, sans toucher au layout */
.app, #appInner{ position: relative; z-index: 1; }

.card, .left-panel, .right-panel, .center-panel, .summary-block, .modal, .player, .card-lite{
  background: var(--mbf-surface);
  border: 1px solid var(--mbf-border);
  border-radius: var(--mbf-radius);
  box-shadow: var(--mbf-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal{ box-shadow: 0 28px 72px rgba(0,0,0,.18); }

/* Micro-douceur sur boutons/inputs */
.btn-small, .btn, .chip, .profile-btn{
  border-radius: 999px;
}

.field-input, .field-select, .field-textarea{
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.28);
  background: var(--mbf-surface-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

.btn-primary, .btn-small.btn-primary{
  background: linear-gradient(135deg, var(--mbf-accent), var(--mbf-accent-2));
  border: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

.btn-ghost, .btn-small.btn-ghost{
  background: rgba(255,255,255,.45);
}

/* "Bulles" KPI */
.bubble-kpis{ display:flex; gap:10px; flex-wrap:wrap; }
.bubble{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius: 999px;
  border: 1px solid var(--mbf-border);
  background: radial-gradient(120px 120px at 20% 20%, rgba(255,255,255,.65), rgba(255,255,255,.28));
  box-shadow: var(--mbf-shadow-soft);
}
.bubble .bubble-val{ font-weight: 800; }
.bubble .bubble-sub{ font-size: 12px; opacity: .8; }
.bubble .bubble-trend{ font-weight: 800; opacity:.9; }

/* Swatches thème */
.theme-swatch-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.theme-swatch{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--mbf-shadow-soft);
  padding:10px;
  cursor:pointer;
  user-select:none;
}
.theme-swatch .name{ font-weight: 700; font-size: 12px; }
.theme-swatch .bar{ height: 34px; border-radius: 14px; margin-top:8px; }

/* === Mes suivis : carte "Conseils personnalisés" (IA) ===
   Objectif : corriger le léger décalage du premier bloc (ex. Horoscope)
   et harmoniser la carte IA au rendu "bulle" sans modifier la structure.
*/
.drawer-card{
  background: var(--mbf-surface);
  border: 1px solid var(--mbf-border);
  border-radius: var(--mbf-radius);
  box-shadow: var(--mbf-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px 12px;
  margin: 0 0 10px 0;
}

.drawer-card-title{
  font-weight: 900;
  margin: 0 0 6px 0;
  font-size: 14px;
}

/* Plus d'air entre le descriptif et le premier conseil (évite l'effet "décalé") */
#aiAdviceCard #aiAdviceList{ margin-top: 10px; }

/* Les items de conseils reprennent les styles existants (.result-item) : on évite tout collage */
#aiAdviceCard .result-item{ margin-top: 0; }

/* En thème Nuit, on garde une lisibilité maximale */
body.theme-nuit .drawer-card{
  /* Compatibilité : l'ancien thème sauvegardé 'nuit' est désormais rendu comme 'Rose doux'. */
  --mbf-bg-1:#fde7f4;
  --mbf-bg-2:#f7e9ff;
  --mbf-accent:#ff4fb3;
  --mbf-accent-2:#8b5cf6;
}

/* Mobile : grille 2 colonnes */
@media (max-width: 540px){
  .theme-swatch-grid{ grid-template-columns:repeat(2, 1fr); }
}