/* Claudbar · Estilo de la web (claudbar.com/app) para la barra lateral.
   Se carga después de styles.css y layout.css, y antes de theme-light.css (el modo claro sigue mandando). */
:root {
  --bg: #0b0c12; --surface: #13141d; --surface-2: #191a26; --border: #26283b; --text: #ecebf5; --muted: #9a9db3;
  --accent-primary: #a78bfa; --accent-secondary: #22d3ee;
  --display: "Sora", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
:root[data-theme="light"] {
  --bg: #f6f6fb; --surface: #ffffff; --surface-2: #f0f0f7; --border: #e2e2ee; --text: #17182a; --muted: #5d6078;
  --accent-primary: #6d4ee8; --accent-secondary: #0e9fbf;
}
body { font: 14.5px/1.55 "Source Sans 3", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* Fondo liso, como la web (sin manchas de color) */
.app, :root[data-theme="light"] .app { background: var(--bg); }

/* Barra de iconos: más sobria */
.rail { background: var(--surface); border-right: 1px solid var(--border); }
.rail-btn { color: var(--muted); }
.rail-btn:hover { color: var(--text); }
.rail-btn:hover .ri { background: var(--surface-2); }
.rail-btn[aria-current="true"], .rail-btn[aria-pressed="true"], .rail-btn[aria-expanded="true"] { color: var(--text); }
.rail-btn[aria-current="true"] .ri, .rail-btn[aria-pressed="true"] .ri, .rail-btn[aria-expanded="true"] .ri { background: var(--surface-2); color: var(--accent-primary); box-shadow: inset 0 0 0 1px var(--border); }
.rail-sep { background: var(--border); }

/* Portada */
.hero-hello, .hero-hello * { font-family: var(--display); letter-spacing: -.01em; }
.feature-card, .feature-agent { background: var(--surface); border: 1px solid var(--border); box-shadow: none; }
.feature-agent:hover, button.feature-card:hover { border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border)); }
.fc-badge { background: color-mix(in srgb, var(--accent-primary) 18%, transparent); color: var(--accent-primary); border: 0; }
.fc-cta { border-radius: 999px; }
.quick-row .example-btn { border-color: var(--border); color: var(--muted); transition: border-color .15s, color .15s, transform .15s; }
.quick-row .example-btn:hover { border-color: var(--accent-primary); color: var(--text); transform: translateY(-1px); }

/* Mensajes: los tuyos en gris suave, las respuestas sin caja (como la web) */
.message.user .bubble, :root[data-theme="light"] .message.user .bubble { background: var(--surface-2); color: var(--text); border: 0; border-radius: 18px; box-shadow: none; }
.message.assistant .bubble { background: transparent; border: 0; padding-left: 2px; padding-right: 2px; }

/* Caja de escribir: píldora redondeada con brillo suave al enfocar */
.composer { border-radius: 26px; padding: 8px 10px 8px 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: none;
  transition: border-color .25s, box-shadow .35s var(--ease-out), transform .35s var(--ease-out); }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border)); box-shadow: 0 10px 40px -18px color-mix(in srgb, var(--accent-primary) 70%, transparent); transform: translateY(-1px); }
.send-btn { border-radius: 50%; background: var(--text); color: var(--bg); border: 0; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
.send-btn:hover { transform: scale(1.08); }
.send-btn:disabled { opacity: .3; transform: scale(.92); }
.tool-icon, .icon-btn { border-radius: 50%; transition: background .2s, color .2s; }
.tool-icon:hover, .icon-btn:hover { background: var(--surface-2); color: var(--text); }
.model-btn { border-radius: 999px; }

/* Menús, cajones y botones */
.menu, .drawer, .library { background: var(--surface); border-color: var(--border); }
.btn-primary { background: var(--text); color: var(--bg); border: 0; border-radius: 999px; }
.btn-ghost { border-radius: 999px; }

/* Barras de desplazamiento finas */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

:root[data-reduce-motion] .composer, :root[data-reduce-motion] .send-btn, :root[data-reduce-motion] .quick-row .example-btn { transition: none; transform: none !important; }