/* Ronda 6: controles estables, movimiento discreto y menos trabajo continuo de GPU. */
:root { --r6-space-1: 4px; --r6-space-2: 8px; --r6-space-3: 12px; --r6-space-4: 16px; --r6-space-5: 24px; }
html, body, .shell, #app { min-width: 0; }
/* Barra superior: ÚNICA fuente de verdad (52 px, pegada arriba, igual con o sin chat y en pantalla grande).
   No redefinir .topbar en otras hojas. */
.topbar,
.app:not(.has-chat) .topbar,
.app.has-chat .topbar,
html.cb-full .topbar,
html.cb-full #app.has-chat .topbar {
  box-sizing: border-box;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 900;
  align-items: center;
  justify-content: space-between;
  height: 52px; min-height: 52px; max-height: 52px;
  padding: 8px 14px;
  gap: 8px;
  flex: 0 0 52px;
  background: transparent;
  border-bottom: 0;
}
.topbar .brand { display: flex; visibility: visible; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.topbar .brand-text strong { font-size: 13px; letter-spacing: normal; white-space: nowrap; }
.topbar .icon-btn:hover, .topbar .icon-btn:active { transform: none !important; }
.top-avatar { flex: 0 0 34px; width: 34px; height: 34px; font-size: 15px; }
/* «Pantalla completa» puede llevar etiqueta en el panel: crece a lo ancho, nunca a lo alto. */
.top-full { flex: 0 0 auto; width: auto; min-width: 34px; height: 34px; }
html.cb-full .top-full { width: 34px; padding: 0; }
/* En pantalla grande la cuenta vive en el pie del rail: se reserva el hueco, no se colapsa. */
html.cb-full #top-avatar { visibility: hidden; }
.top-menu { position: absolute; top: calc(100% + 4px); right: 12px; z-index: 1000; }
.composer-tools { min-height: 42px; flex: 0 0 auto; align-items: center; }
.composer-tools > button, .composer-tools > .tool-icon { flex: 0 0 auto; }
.agent-pill { min-height: 34px; padding: 6px 10px; transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease; }
button, [role="button"] { transition-property: color, background-color, border-color, opacity !important; transition-duration: 120ms !important; }
button:not(:disabled):hover, .btn:hover, [role="button"]:hover { transform: none !important; }
button:not(:disabled):active, [role="button"]:active { transform: none !important; }
input:focus, textarea:focus, select:focus { transform: none !important; }
.send-btn, .agent-pill[aria-pressed="true"] { box-shadow: none !important; }
.msg-actions { opacity: 1; }
.cb-twinkle, .app::after { animation: none !important; will-change: auto !important; }
/* Fondo y clima quietos (menos GPU). La nube sí anima al pensar, hablar o cerrar el turno. */
.mascot:not([data-state="thinking"]):not([data-state="speaking"]):not([data-state="success"]):not([data-state="error"]):not([data-state="listening"]) *,
.wx-buddy * { animation: none !important; }
.hero-task.say-in, .hero-say.say-in { animation: none !important; }
.menu, #model-menu, #history-menu, #top-menu, .att, .message, .toast { animation-duration: 120ms !important; animation-timing-function: ease-out !important; }
.cv-drop, .cv-drop.over, .cv-sack, .cv-drop.over .cv-sack { transform: none !important; transition: border-color 120ms ease, background-color 120ms ease !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}