/* Fondos del chat (los mismos que claudbar.com). html[data-bg] lo pone ui/theme.js según Ajustes › Apariencia. */
html[data-bg] .app { background: var(--chat-bg, var(--bg)); }
html[data-bg="plain"] { --chat-bg: var(--bg); }
html[data-bg="glow"] { --chat-bg: radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--accent-primary) 16%, transparent), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(34, 211, 238, .12), transparent 60%), var(--bg); }
html[data-bg="aurora"] { --chat-bg: linear-gradient(160deg, rgba(52, 211, 153, .12), transparent 40%), linear-gradient(200deg, color-mix(in srgb, var(--accent-primary) 20%, transparent), transparent 55%), var(--bg); }
html[data-bg="stars"] { --chat-bg: radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, .7) 50%, transparent) 0 0 / 240px 180px, radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, .5) 50%, transparent) 0 0 / 240px 180px, radial-gradient(1.5px 1.5px at 200px 20px, rgba(255, 255, 255, .8) 50%, transparent) 0 0 / 240px 180px, radial-gradient(1px 1px at 60px 140px, rgba(255, 255, 255, .5) 50%, transparent) 0 0 / 240px 180px, var(--bg); }
html[data-bg="grid"] { --chat-bg: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px, var(--bg); }
html[data-bg="sunset"] { --chat-bg: linear-gradient(180deg, var(--bg), color-mix(in srgb, #6b2d3b 45%, var(--bg))); }
/* Fondos animados: una capa fija detrás de todo y la app transparente */
html[data-bg^="live-"] .app, html[data-bg^="live-"] body, html[data-bg^="live-"] .shell { background: transparent !important; }
html[data-bg^="live-"] .composer { background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(14px); }
html[data-theme="light"][data-bg="grid"] { --chat-bg: linear-gradient(rgba(0, 0, 0, .06) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(0, 0, 0, .06) 1px, transparent 1px) 0 0 / 28px 28px, var(--bg); }

/* Estilo de los mensajes: minimalista (sin globo en las respuestas) o burbujas */
html[data-bubbles="minimal"] .message.assistant .bubble { background: transparent; padding-left: 0; padding-right: 0; }
html[data-bubbles="bubbles"] .message.assistant .bubble { background: var(--surface); border: 1px solid var(--border); }

/* Ancho del chat (pantalla grande) */
html.cb-full #chat-messages > * { max-width: var(--chat-max, 760px); margin-left: auto; margin-right: auto; }
html.cb-full .composer, html.cb-full .composer-tools, html.cb-full .panel-foot { max-width: var(--chat-max, 760px) !important; }

/* Muestras de fondos en Ajustes */
.bg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 10px; }
.bg-swatches button { height: 52px; border-radius: 12px; border: 2px solid var(--border); color: #fff; font: inherit; font-size: 12.5px; display: flex; align-items: flex-end; padding: 5px 8px; text-shadow: 0 1px 2px #000; cursor: pointer; }
.bg-swatches button[aria-pressed="true"] { border-color: var(--text); }
.sw-plain { background: #0b0c12; }
.sw-glow { background: radial-gradient(500px 300px at 85% -10%, rgba(167, 139, 250, .35), transparent 60%), radial-gradient(400px 260px at -10% 110%, rgba(34, 211, 238, .25), transparent 60%), #0b0c12; }
.sw-aurora { background: linear-gradient(160deg, rgba(52, 211, 153, .25), transparent 40%), linear-gradient(200deg, rgba(167, 139, 250, .35), transparent 55%), linear-gradient(0deg, rgba(34, 211, 238, .2), transparent 60%), #0b0c12; }
.sw-stars { background: radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent), radial-gradient(1px 1px at 120px 40px, #cfd 50%, transparent), radial-gradient(1.5px 1.5px at 90px 20px, #fff 50%, transparent), #0b0c12; }
.sw-grid { background: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 14px 14px, #0b0c12; }
.sw-sunset { background: linear-gradient(180deg, #1b1033, #3b1a3f 55%, #6b2d3b); }
.sw-live-aurora { background: radial-gradient(circle at 20% 30%, #4f46e5, transparent 55%), radial-gradient(circle at 80% 70%, #06b6d4, #a855f7 30%, transparent 60%), #0a0a0c; }
.sw-live-clouds { background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .14), transparent 55%), #0a0a0c; }
.sw-live-stars { background: radial-gradient(1px 1px at 15px 20px, #fff, transparent), radial-gradient(1px 1px at 70px 35px, #fff, transparent), radial-gradient(1px 1px at 100px 12px, #fff, transparent), #0a0a0c; }
.accent-dots { display: flex; gap: 10px; }
.accent-dots button { width: 28px; height: 28px; border-radius: 50%; border: 3px solid transparent; background: var(--c); box-shadow: 0 0 0 2px var(--surface); cursor: pointer; }
.accent-dots button[aria-pressed="true"] { border-color: var(--text); }

/* Estrellas de verdad: tres capas con tamaños, brillos y colores distintos, y un parpadeo suave */
html[data-bg="stars"] { --chat-bg: radial-gradient(ellipse at 50% 120%, rgba(60, 70, 140, .25), transparent 60%), #07080d; }
html[data-bg="stars"] .app::before, html[data-bg="stars"] .app::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
html[data-bg="stars"] .app { position: relative; }
html[data-bg="stars"] .app > * { position: relative; z-index: 1; }
html[data-bg="stars"] .app::before {
  background-image:
    radial-gradient(1px 1px at 23px 41px, #fff, transparent), radial-gradient(1px 1px at 137px 12px, #dfe7ff, transparent),
    radial-gradient(1.4px 1.4px at 251px 167px, #fff, transparent), radial-gradient(1px 1px at 311px 83px, #ffeedd, transparent),
    radial-gradient(1px 1px at 79px 211px, #fff, transparent), radial-gradient(1.2px 1.2px at 189px 263px, #cfe0ff, transparent),
    radial-gradient(1px 1px at 361px 239px, #fff, transparent), radial-gradient(1px 1px at 45px 307px, #ffe9d6, transparent);
  background-size: 380px 330px; opacity: .85;
}
html[data-bg="stars"] .app::after {
  background-image:
    radial-gradient(2px 2px at 97px 73px, #fff, rgba(255, 255, 255, .25) 2px, transparent 4px), radial-gradient(1.8px 1.8px at 413px 191px, #e6efff, rgba(200, 220, 255, .2) 2px, transparent 4px),
    radial-gradient(2.2px 2.2px at 277px 401px, #fff, rgba(255, 255, 255, .2) 2px, transparent 5px), radial-gradient(1.6px 1.6px at 521px 59px, #fff3e0, transparent 4px);
  background-size: 620px 520px; animation: cb-twinkle 5s ease-in-out infinite alternate;
}
@keyframes cb-twinkle { 0% { opacity: .35; } 50% { opacity: 1; } 100% { opacity: .55; } }
html.no-anim[data-bg="stars"] .app::after, html[data-reduce-motion][data-bg="stars"] .app::after { animation: none; opacity: .8; }

/* Fondo creado con IA. */
html[data-bg="ai"] { --chat-bg: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .55)), var(--cb-ai-wall, none) center / cover no-repeat, #07080d; }