/*
 * Azurebrains — Custom Chainlit Stylesheet
 * Paleta alineada con blog.azurebrains.com
 *
 * Colores clave:
 *   #0d1117  → fondo principal (deep space)
 *   #0078d4  → Azure blue (acento primario)
 *   #50e6ff  → cyan eléctrico (highlights / ring)
 *   #6c63ff  → violeta (acento secundario)
 *   #c9d1d9  → texto suave
 */

/* ── Scrollbars ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: #21262d; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: #0078d4; }

/* ── Burbuja de mensajes — assistant ─────────────────────────────────────────── */
.message-content.assistant {
  border-left: 2px solid #0078d4;
  padding-left: 0.75rem;
}

/* ── Input area ──────────────────────────────────────────────────────────────── */
textarea, [contenteditable] {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea:focus, [contenteditable]:focus {
  border-color: #0078d4 !important;
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.20) !important;
}

/* ── Botón de envío ──────────────────────────────────────────────────────────── */
button[type="submit"],
button[aria-label="send"] {
  background: #0078d4 !important;
  transition: background 0.2s ease, transform 0.1s ease;
}

button[type="submit"]:hover,
button[aria-label="send"]:hover {
  background: #006cbe !important;
  transform: scale(1.04);
}

/* ── Steps / tool calls ──────────────────────────────────────────────────────── */
.step-container {
  border-left: 2px solid #6c63ff;
  background: rgba(108, 99, 255, 0.06);
  border-radius: 0 0.5rem 0.5rem 0;
}

/* ── Código inline y bloques ─────────────────────────────────────────────────── */
code:not(pre code) {
  background: rgba(0, 120, 212, 0.12);
  color: #50e6ff;
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
  font-size: 0.88em;
}

pre {
  border: 1px solid #21262d;
  border-radius: 0.625rem;
  background: #0d1117 !important;
}

/* ── Header / logo area ──────────────────────────────────────────────────────── */
header img[alt="Azurebrains Content Agent"],
header img[alt="logo"] {
  height: 28px;
  width: auto;
}

/* ── Toast / notificaciones del sistema ──────────────────────────────────────── */
[role="status"], [role="alert"] {
  border-left: 3px solid #0078d4;
  border-radius: 0.5rem;
}

/* ── Sidebar — thread list items ─────────────────────────────────────────────── */
nav a:hover, nav button:hover {
  background: rgba(0, 120, 212, 0.10) !important;
  color: #50e6ff !important;
}

nav a[aria-current="page"], nav a.active {
  background: rgba(0, 120, 212, 0.15) !important;
  border-left: 2px solid #0078d4;
  color: #c9d1d9 !important;
}

/* ── Avatares ────────────────────────────────────────────────────────────────── */
.avatar-assistant {
  background: linear-gradient(135deg, #0078d4 0%, #6c63ff 100%) !important;
}

/* ── Chip de categoría / tags ────────────────────────────────────────────────── */
.chip, [data-tag] {
  background: rgba(0, 120, 212, 0.15);
  color: #50e6ff;
  border: 1px solid rgba(80, 230, 255, 0.25);
  border-radius: 9999px;
}

/* ── Links ───────────────────────────────────────────────────────────────────── */
a { color: #50e6ff; }
a:hover { color: #0078d4; text-decoration: underline; }

/* ── Footer disclaimer ───────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid #21262d;
  font-size: 0.75rem;
  color: #6e7681;
}