/* Claudbar · Movimiento Liquid Glass. Solo anima transform y opacity (los hace la tarjeta gráfica, sin repintar),
   nunca el desenfoque ni las sombras, para que vaya fluido incluso en un Intel N5000. */
:root { --m-spring: cubic-bezier(.22, 1.2, .36, 1); --m-out: cubic-bezier(.16, 1, .3, 1); --m-fast: .18s; --m-mid: .32s; --m-slow: .5s; }

@keyframes m-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes m-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes m-drop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes m-slide { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-sheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }

/* Entradas: tarjetas, mensajes, paneles y menús aparecen como gotas de cristal */
.opt-card, .sv-section, .model-card, .feature-card, .doc-card, .tool-tile, .lib-item, .agent-card, .pv-card, .cb-opt-hero { animation: m-rise var(--m-slow) var(--m-out) backwards; }
.opt-page > .opt-card:nth-child(2), .sv-section:nth-child(2) { animation-delay: 40ms; }
.opt-page > .opt-card:nth-child(3), .sv-section:nth-child(3) { animation-delay: 80ms; }
.opt-page > .opt-card:nth-child(4), .sv-section:nth-child(4) { animation-delay: 120ms; }
.opt-page > .opt-card:nth-child(5) { animation-delay: 160ms; }
.opt-page > .opt-card:nth-child(n+6) { animation-delay: 200ms; }
#chat-messages > .message { animation: m-rise var(--m-mid) var(--m-out) backwards; }
.menu, #model-menu, .sugg-item, .att, .quote-chip, .tool-chip, .status-chip, .voice-selector-content { animation: m-drop var(--m-fast) var(--m-out) backwards; }
.drawer, .library, .settings-view:not(.embedded) { animation: m-slide var(--m-mid) var(--m-out) backwards; }
.voice-selector-modal, .live-overlay.show { animation: m-fade var(--m-mid) ease backwards; }
.live-overlay.show .live-mascot, .live-overlay.show .live-bar { animation: m-pop var(--m-slow) var(--m-spring) backwards; }
.live-overlay.show .live-bar { animation-delay: 80ms; }
.opt-nav button, .opt-nav a { animation: m-slide var(--m-mid) var(--m-out) backwards; }

/* Interacción: elevar al pasar, hundirse al pulsar (efecto gota elástica) */
button, .btn, a.btn, [role="button"], .sv-tab, .opt-nav button, .tool-tile, .lib-item, .sugg-item, .example-btn, .model-card, .feature-card, .vs-opt, .live-btn, select, .opt-select {
  transition: transform var(--m-fast) var(--m-spring), opacity var(--m-fast) ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
button:not(:disabled):active, .btn:active, [role="button"]:active, .sv-tab:active, .tool-tile:active, .lib-item:active, .vs-opt:active, .live-btn:active { transition-duration: .08s; }
.opt-card, .opt-group { transition: transform var(--m-mid) var(--m-out), border-color .25s ease; }

/* Campos: se "despiertan" al enfocarlos */
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], textarea, .opt-input, .opt-text { transition: transform var(--m-fast) var(--m-out), border-color .2s ease; }
input:focus, textarea:focus, select:focus { transform: scale(1.01); }

/* Interruptores: la bolita rebota */
.check-row input[type="checkbox"]::after, .switch::after, .toggle::after { transition: transform .32s var(--m-spring) !important; }
.check-row input[type="checkbox"]:active::after { transform: scaleX(1.25); }
.check-row input[type="checkbox"]:checked:active::after { transform: translateX(15px) scaleX(1.25); }

/* Brillo líquido que cruza botones principales y la pestaña activa al pasar el ratón */
.btn-primary, .vs-ok, .sv-tab.active, .opt-nav button.active { position: relative; overflow: hidden; }
.btn-primary::before, .vs-ok::before, .sv-tab.active::before {
  content: ""; position: absolute; inset: 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%) skewX(-18deg);
}
.btn-primary:hover::before, .vs-ok:hover::before, .sv-tab.active:hover::before { animation: m-sheen .7s var(--m-out); }

/* Equipos modestos: se quitan el brillo y el elevar tarjetas de cristal grandes (obligarían a re-desenfocar el fondo) */
html.cb-lite .btn-primary::before, html.cb-lite .vs-ok::before, html.cb-lite .sv-tab.active::before { display: none; }
html.cb-lite .opt-card:hover, html.cb-lite .model-card:hover, html.cb-lite .feature-card:hover { transform: none; }
html.cb-lite #chat-messages > .message { animation-duration: .22s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; }
}

/* Estrellas que titilan (capa extra sobre el fondo de estrellas; ui/theme.js crea .cb-twinkle) */
.cb-twinkle { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; opacity: .5; will-change: opacity; animation: cb-twinkle 5s ease-in-out infinite alternate;
  background: radial-gradient(1.5px 1.5px at 40px 60px, rgba(255,255,255,.9) 50%, transparent) 0 0 / 260px 200px,
    radial-gradient(1px 1px at 150px 30px, rgba(200,210,255,.8) 50%, transparent) 0 0 / 260px 200px,
    radial-gradient(1px 1px at 220px 150px, rgba(255,255,255,.7) 50%, transparent) 0 0 / 260px 200px; }
html:not([data-bg]):not([data-theme="light"]) .cb-twinkle, html[data-bg="stars"]:not([data-theme="light"]) .cb-twinkle { display: block; }
@keyframes cb-twinkle { to { opacity: .08; } }
html.cb-lite .cb-twinkle { animation: none; }
html.no-anim .cb-twinkle, html[data-reduce-motion] .cb-twinkle { display: none !important; }

/* Micro-animaciones del panel: botones, menús, pestañas y adjuntos (solo transform/opacity). */
@media (prefers-reduced-motion: no-preference) {
  .icon-btn, .send-btn, .stop-btn, .model-btn, .agent-btn, .tool-icon, .new-task, .rail-btn, .foot-upgrade,
  .example-btn, .attach, .mic, .plus-btn, .act, .menu-item, .lib-tab, .drawer-tab, .sv-tab {
    transition: transform 150ms var(--ease), opacity 150ms var(--ease), background-color 150ms, border-color 150ms, color 150ms;
  }
  .icon-btn:active, .send-btn:active, .stop-btn:active, .model-btn:active, .agent-btn:active, .tool-icon:active,
  .new-task:active, .rail-btn:active, .example-btn:active, .attach:active, .mic:active, .plus-btn:active, .act:active {
    transition-duration: 80ms;
  }
  #model-menu, #history-menu, #top-menu { animation: m-slide 220ms var(--ease) both; transform-origin: top right; }
  .att { animation: fade-up 200ms var(--ease) both; }
  .route-note, .quote-box, .tool-chip { animation: fade-up 250ms var(--ease) both; }
}
.menu-item { min-height: 40px; }

/* Entradas que faltaban: avisos, páginas superpuestas, ventana de créditos y opciones de menú en cascada.
   Usan translate/scale sueltos para no pisar el transform que centra cada elemento. */
@keyframes m-toast { from { opacity: 0; translate: 0 14px; scale: .94; } 60% { opacity: 1; translate: 0 -2px; scale: 1.01; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes m-sheet { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes m-item { from { opacity: 0; translate: -6px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes m-ready { 0% { scale: 1; } 50% { scale: 1.12; } 100% { scale: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: m-toast 340ms var(--m-spring) both; }
  #cb-page { animation: m-sheet 300ms var(--m-out) both; }
  .credit-pop { animation: m-toast 260ms var(--m-spring) both; transform-origin: bottom left; }
  .menu .menu-item, #model-menu .menu-item, #history-menu .menu-item { animation: m-item 220ms var(--m-out) backwards; }
  .menu-item:nth-child(2) { animation-delay: 25ms; } .menu-item:nth-child(3) { animation-delay: 50ms; }
  .menu-item:nth-child(4) { animation-delay: 75ms; } .menu-item:nth-child(5) { animation-delay: 100ms; }
  .menu-item:nth-child(n+6) { animation-delay: 120ms; }
  .composer:focus-within .send-btn:not(:disabled) { animation: m-ready 420ms var(--m-spring); }
  #mascot-hero { animation: m-pop 520ms var(--m-spring) backwards; }
  .agent-card { animation: m-rise var(--m-mid) var(--m-out) backwards; }
}
html.cb-lite .menu-item { animation: none !important; }