/* =========================================================
   UI PROFILES — GLOBAL THEME & LAYOUT ENGINE
   Driven by: body.ui-<profile>
   Cambia TUTTO: colori, font, dimensioni, forme, layout
   ========================================================= */

/* ---------------------------------------------------------
   GLOBAL MORPH TRANSITIONS
   --------------------------------------------------------- */
html, body, #app,
.sidebar, .card, .messages, .msg,
.input-bar, .input-bar input,
.sidebar select, .sidebar button, .btn-secondary{
  transition:
    background-color .28s ease,
    color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    transform .28s ease,
    border-radius .28s ease,
    width .28s ease,
    padding .28s ease,
    font-size .28s ease,
    line-height .28s ease;
}

/* Ambient glow overlay (theme-controlled) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity: var(--bgGlowOpacity, .2);
  background:
    radial-gradient(900px 500px at 70% 10%, var(--bgGlowA, rgba(79,209,255,.12)), transparent 60%),
    radial-gradient(900px 500px at 10% 80%, var(--bgGlowB, rgba(30,144,255,.10)), transparent 60%);
}

/* =========================================================
   CLASSIC CHAT — BASELINE
   ========================================================= */
body.ui-classic_chat{
  /* colors */
  --bg:#0b0f1a;
  --panel:#11162a;
  --accent:#4fd1ff;
  --text:#e6e9f0;

  --mutedPanel:#0b0f1a;
  --border:#222;
  --borderSoft: rgba(255,255,255,.04);
  --btnSecondary:#1a2040;

  --assistant:#2a2f55;
  --user:#1e90ff;

  /* shape */
  --radius:12px;
  --buttonRadius:10px;
  --inputRadius:12px;
  --bubbleRadius:12px;

  /* typography */
  --fontFamily: system-ui;
  --fontSize:14px;
  --fontSizeSmall:12px;
  --lineHeight:1.4;

  /* layout */
  --sidebarWidth:260px;
  --sidebarMinWidth:260px;
  --sidebarPadding:16px;
  --contentPadding:16px;

  /* components */
  --inputHeight:48px;
  --bubbleMaxWidth:70%;

  /* fx */
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --focusRing:0 0 0 3px rgba(79,209,255,.12);

  /* background glow */
  --bgGlowOpacity:.18;
  --bgGlowA: rgba(79,209,255,.12);
  --bgGlowB: rgba(30,144,255,.10);
}

/* =========================================================
   CINEMATIC SUBTITLES — FILM MODE
   ========================================================= */
body.ui-cinematic_subtitles{
  --bg:#05070d;
  --panel: rgba(10,14,30,.82);
  --accent:#ffd27a;
  --text:#f3f3f3;

  --mutedPanel: rgba(6,10,22,.78);
  --border: rgba(255,255,255,.10);
  --borderSoft: rgba(255,255,255,.06);
  --btnSecondary: rgba(255,210,122,.12);

  --assistant: rgba(14,18,36,.85);
  --user: rgba(255,210,122,.25);

  --radius:18px;
  --buttonRadius:14px;
  --inputRadius:16px;
  --bubbleRadius:18px;

  --fontFamily: system-ui;
  --fontSize:16px;
  --fontSizeSmall:13px;
  --lineHeight:1.65;

  --sidebarWidth:320px;
  --sidebarMinWidth:320px;
  --sidebarPadding:18px;
  --contentPadding:22px;

  --inputHeight:54px;
  --bubbleMaxWidth:78%;

  --shadow:0 14px 40px rgba(0,0,0,.55);
  --focusRing:0 0 0 3px rgba(255,210,122,.14);

  --bgGlowOpacity:.28;
  --bgGlowA: rgba(255,210,122,.18);
  --bgGlowB: rgba(255,210,122,.10);
}

/* Cinematic spacing */
body.ui-cinematic_subtitles .messages{
  padding: var(--contentPadding);
}
body.ui-cinematic_subtitles .msg{
  font-size: var(--fontSize);
  letter-spacing:.2px;
}

/* =========================================================
   DYNAMIC MORPH — LIVING INTERFACE
   ========================================================= */
body.ui-dynamic_morph{
  --bg:#060816;
  --panel:#0f1430;
  --accent:#6cf3ff;
  --text:#eef2ff;

  --mutedPanel:#0a0f24;
  --border:#1a2550;
  --borderSoft: rgba(108,243,255,.10);
  --btnSecondary:#121a3a;

  --assistant:#202a66;
  --user:#2aa2ff;

  /* shape (pill-like) */
  --radius:22px;
  --buttonRadius:18px;
  --inputRadius:20px;
  --bubbleRadius:22px;

  /* typography (breathing) */
  --fontFamily: system-ui;
  --fontSize:15px;
  --fontSizeSmall:13px;
  --lineHeight:1.55;

  /* layout (wider, more presence) */
  --sidebarWidth:300px;
  --sidebarMinWidth:300px;
  --sidebarPadding:18px;
  --contentPadding:18px;

  /* components */
  --inputHeight:52px;
  --bubbleMaxWidth:74%;

  --shadow:0 18px 48px rgba(0,0,0,.55);
  --focusRing:0 0 0 3px rgba(108,243,255,.18);

  --bgGlowOpacity:.35;
  --bgGlowA: rgba(108,243,255,.18);
  --bgGlowB: rgba(42,162,255,.14);
}

/* subtle depth */
body.ui-dynamic_morph .msg{
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

/* =========================================================
   ADVENTURE CHOICES — FANTASY MODE
   ========================================================= */
body.ui-adventure_choices{
  --bg:#070a10;
  --panel:#101824;
  --accent:#9cff57;
  --text:#eafff2;

  --mutedPanel:#0b121b;
  --border:#203142;
  --borderSoft: rgba(156,255,87,.12);
  --btnSecondary:#122132;

  --assistant:#20384a;
  --user:#2f6cff;

  --radius:16px;
  --buttonRadius:14px;
  --inputRadius:16px;
  --bubbleRadius:16px;

  --fontSize:15px;
  --fontSizeSmall:13px;
  --lineHeight:1.5;

  --sidebarWidth:280px;
  --sidebarMinWidth:280px;
  --sidebarPadding:16px;
  --contentPadding:18px;

  --inputHeight:50px;
  --bubbleMaxWidth:72%;

  --shadow:0 14px 38px rgba(0,0,0,.50);
  --focusRing:0 0 0 3px rgba(156,255,87,.18);

  --bgGlowOpacity:.30;
  --bgGlowA: rgba(156,255,87,.16);
  --bgGlowB: rgba(47,108,255,.12);
}

/* =========================================================
   MINIMAL FOCUS — CLEAN MODE
   ========================================================= */
body.ui-minimal_focus{
  --bg:#0a0c12;
  --panel:#0f1118;
  --accent:#c7d2fe;
  --text:#f3f4f6;

  --mutedPanel:#0b0d12;
  --border:#1f2430;
  --borderSoft: rgba(255,255,255,.04);
  --btnSecondary:#141825;

  --assistant:#161b27;
  --user:#2b88ff;

  --radius:10px;
  --buttonRadius:10px;
  --inputRadius:12px;
  --bubbleRadius:12px;

  --fontSize:13.5px;
  --fontSizeSmall:12px;
  --lineHeight:1.45;

  --sidebarWidth:240px;
  --sidebarMinWidth:240px;
  --sidebarPadding:14px;
  --contentPadding:14px;

  --inputHeight:46px;
  --bubbleMaxWidth:68%;

  --shadow:0 10px 24px rgba(0,0,0,.32);
  --focusRing:0 0 0 3px rgba(199,210,254,.14);

  --bgGlowOpacity:.12;
  --bgGlowA: rgba(199,210,254,.12);
  --bgGlowB: rgba(199,210,254,.06);
}

/* =========================================================
   CARD GRID — FUTURE / DASHBOARD
   ========================================================= */
body.ui-card_grid{
  --bg:#070b14;
  --panel:#0f172a;
  --accent:#a78bfa;
  --text:#eef2ff;

  --mutedPanel:#0b1020;
  --border:#27324a;
  --borderSoft: rgba(167,139,250,.14);
  --btnSecondary:#121a33;

  --assistant:#1f2a4a;
  --user:#5aa7ff;

  --radius:20px;
  --buttonRadius:18px;
  --inputRadius:18px;
  --bubbleRadius:20px;

  --fontSize:15px;
  --fontSizeSmall:13px;
  --lineHeight:1.55;

  --sidebarWidth:300px;
  --sidebarMinWidth:300px;
  --sidebarPadding:18px;
  --contentPadding:18px;

  --inputHeight:52px;
  --bubbleMaxWidth:76%;

  --shadow:0 16px 44px rgba(0,0,0,.55);
  --focusRing:0 0 0 3px rgba(167,139,250,.18);

  --bgGlowOpacity:.28;
  --bgGlowA: rgba(167,139,250,.18);
  --bgGlowB: rgba(90,167,255,.12);
}