:root {
  /* ✅ Base */
  --kilia-bg: #f3f7ff;
  --kilia-surface: #ffffff;
  --kilia-surface-soft: #f8faff;
  --kilia-border: #dce6f5;
  --kilia-border-strong: #c8d8f0;
  --kilia-text: #0f172a;
  --kilia-text-muted: #5f6b7e;

  /* ✅ Azules más “web corporativa” (puedes ajustar) */
  --kilia-primary: #1f6feb;            /* antes #2764ff */
  --kilia-primary-hover: #1659c9;      /* antes #1d54e8 */
  --kilia-primary-soft: #e8f1ff;       /* antes #eaf0ff */

  /* ✅ Accent extra para el asistente */
  --kilia-assistant: #0b5ed7;
  --kilia-assistant-soft: rgba(31, 111, 235, 0.10);
  --kilia-assistant-border: rgba(31, 111, 235, 0.28);

  --kilia-success-soft: #e9fff4;
  --kilia-shadow: 0 22px 40px rgba(15, 23, 42, 0.1);
  --kilia-radius-lg: 20px;
  --kilia-radius-md: 14px;
  --kilia-radius-sm: 10px;
}

.kilia {
  max-width: 820px;
  border: 1px solid var(--kilia-border);
  border-radius: var(--kilia-radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: var(--kilia-shadow);
  color: var(--kilia-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.kilia__head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--kilia-border);

  /* ✅ Header con azules más marcados */
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(31, 111, 235, 0.16) 0%, rgba(232, 241, 255, 0.70) 55%, #ffffff 100%);
}

.kilia__brand b {
  display: block;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.kilia__brand span {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--kilia-text-muted);
}

/* THREAD */
.kilia__thread {
  height: 460px;
  overflow: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* ✅ Fondo con “halo” azul más acorde */
  background:
    radial-gradient(120% 100% at 100% -10%, rgba(31, 111, 235, 0.12) 0%, transparent 50%),
    var(--kilia-surface);

  scrollbar-width: thin;
  scrollbar-color: #b9d4ff transparent;
}

.kilia__thread::-webkit-scrollbar {
  width: 9px;
}

.kilia__thread::-webkit-scrollbar-thumb {
  background: #b9d4ff;
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

.kilia__msg {
  display: flex;
}

.kilia__msg.is-user {
  justify-content: flex-end;
}

.kilia__msg.is-bot {
  justify-content: flex-start;
}

.kilia__bubble {
  max-width: min(80%, 620px);
  border-radius: var(--kilia-radius-md);
  padding: 12px 14px;
  border: 1px solid var(--kilia-border);
  backdrop-filter: blur(2px);
}

/* ✅ Usuario: azul claro bonito */
.kilia__msg.is-user .kilia__bubble {
  background: linear-gradient(135deg, var(--kilia-primary-soft) 0%, #d7e8ff 100%);
  border-color: rgba(31, 111, 235, 0.30);
  box-shadow: 0 8px 18px rgba(31, 111, 235, 0.14);
}

/* ✅ Asistente: tonos azules suaves y “premium” */
.kilia__msg.is-bot .kilia__bubble {
  background: linear-gradient(135deg, rgba(31, 111, 235, 0.08) 0%, #ffffff 55%, #f6faff 100%);
  border-color: var(--kilia-assistant-border);
  box-shadow: 0 10px 22px rgba(11, 94, 215, 0.08);
}

.kilia__meta {
  font-size: 0.72rem;
  color: var(--kilia-text-muted);
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ✅ Meta del asistente un pelín más azul (sin cantar) */
.kilia__msg.is-bot .kilia__meta {
  color: rgba(11, 94, 215, 0.78);
}

.kilia__text {
  font-size: 0.94rem;
  line-height: 1.5;
}

/* TOOLS */
.kilia__tools {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--kilia-border);
  background: var(--kilia-surface-soft);
}

.kilia__btn {
  border: 1px solid var(--kilia-border-strong);
  background: #ffffff;
  color: var(--kilia-text);
  border-radius: var(--kilia-radius-sm);
  padding: 8px 12px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.06s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  user-select: none;
}

.kilia__btn:hover {
  background: #f2f7ff;
  border-color: rgba(31, 111, 235, 0.30);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.kilia__btn:active {
  transform: translateY(1px);
}

.kilia__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.kilia__btn--ghost {
  background: transparent;
  border-style: dashed;
}

.kilia__btn--ghost:hover {
  border-style: solid;
}

/* File select */
.kilia__select {
  border: 1px solid var(--kilia-border-strong);
  border-radius: var(--kilia-radius-sm);
  padding: 8px 10px;
  background: #ffffff;
  color: var(--kilia-text);
  min-width: 108px;
}

.kilia__select:focus-visible,
.kilia__btn:focus-visible,
.kilia__input:focus-visible,
.kilia__send:focus-visible {
  outline: 2px solid rgba(31, 111, 235, 0.38);
  outline-offset: 1px;
}

/* status (right side) */
.kilia__status {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--kilia-text-muted);
  white-space: nowrap;
}

/* COMPOSER */
.kilia__composer {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--kilia-border);
  background: #ffffff;
}

.kilia__input {
  flex: 1;
  border: 1px solid var(--kilia-border-strong);
  border-radius: var(--kilia-radius-sm);
  padding: 11px 13px;
  font-size: 0.94rem;
  background: #fbfdff;
  color: var(--kilia-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.kilia__input::placeholder {
  color: #7b889d;
}

.kilia__input:focus {
  border-color: rgba(31, 111, 235, 0.52);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.12);
}

/* ✅ Botón enviar con azul más “premium” */
.kilia__send {
  border: 1px solid var(--kilia-primary);
  background: linear-gradient(135deg, var(--kilia-primary) 0%, var(--kilia-assistant) 100%);
  color: #ffffff;
  border-radius: var(--kilia-radius-sm);
  padding: 11px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.06s ease, background-color 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}

.kilia__send:hover {
  filter: brightness(1.03);
}

.kilia__send:active {
  transform: translateY(1px);
}

.kilia__send:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* THINKING dots */
.kiliaDots {
  display: inline-block;
  letter-spacing: 3px;
  font-size: 12px;
  opacity: 0.7;
  animation: kiliaDotsPulse 1s infinite ease-in-out;
}

@keyframes kiliaDotsPulse {
  0% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 0.85; transform: translateY(-1px); }
  100% { opacity: 0.25; transform: translateY(0); }
}

/* Mobile tweaks */
@media (max-width: 760px) {
  .kilia {
    border-radius: 16px;
  }

  .kilia__head,
  .kilia__thread,
  .kilia__tools,
  .kilia__composer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .kilia__thread {
    height: 58vh;
    min-height: 330px;
    max-height: 620px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .kilia__tools {
    flex-wrap: wrap;
    gap: 8px;
  }

  .kilia__btn,
  .kilia__select {
    flex: 1 1 calc(50% - 4px);
    min-height: 40px;
  }

  .kilia__status {
    margin-left: 0;
    width: 100%;
    text-align: right;
  }

  .kilia__bubble {
    max-width: 92%;
  }
}

@media (max-width: 480px) {
  .kilia {
    border-radius: 14px;
  }

  .kilia__brand b {
    font-size: 1rem;
  }

  .kilia__brand span {
    font-size: 0.8rem;
  }

  .kilia__composer {
    gap: 8px;
  }

  .kilia__send {
    padding-left: 14px;
    padding-right: 14px;
  }

  .kilia__status {
    text-align: left;
  }
}