/* Paleta y tokens tomados de Talk de Hipal (talk.hipal.io). */
:root {
  --color-brand: #343887;
  --color-brand-strong: #2a2d6b;
  --color-brand-light: #4a50a8;
  --color-brand-tint: #3438871a;
  --color-on-brand: #ffffff;

  --color-ink: #111827;
  --color-ink-muted: #4b5563;
  --color-ink-subtle: #6b7280;

  --color-bg: #ffffff;
  --color-surface: #f9fafb;
  --color-surface-strong: #f3f4f6;
  --color-surface-inverse: #111827;

  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;

  --color-danger: #dc2626;
  --color-danger-surface: #fef2f2;
  --color-danger-border: #fee2e2;

  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;

  --shadow-sm: 0 1px 2px #1118270f;
  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --duration-base: .3s;

  --gradient-brand: linear-gradient(135deg, #343887 0%, #4a50a8 50%, #343887 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background-color: var(--color-surface);
  background-image:
    linear-gradient(#1118270d 1px, transparent 1px),
    linear-gradient(90deg, #1118270d 1px, transparent 1px);
  background-size: 60px 60px;
  height: 100dvh;
  display: flex;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

.chat {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-inline: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.chat__header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.25rem;
  background-color: #ffffffd9;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.chat__brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.chat__logo { width: 36px; height: 36px; flex-shrink: 0; }
.chat__header h1 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--color-ink); }

.chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.msg {
  max-width: 80%;
  padding: .75rem 1rem;
  border-radius: var(--radius-lg);
  line-height: 1.5;
  font-size: .95rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg--user {
  align-self: flex-end;
  background: var(--gradient-brand);
  color: var(--color-on-brand);
  border-bottom-right-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.msg--bot {
  align-self: flex-start;
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: var(--radius-sm);
}
.msg--typing {
  align-self: flex-start;
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: var(--radius-sm);
  color: var(--color-ink-subtle);
  font-style: italic;
}
.msg--error {
  align-self: center;
  max-width: 90%;
  font-size: .875rem;
  color: var(--color-danger);
  background: var(--color-danger-surface);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
  padding: .5rem .85rem;
}

.chat__composer {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  padding: .9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.chat__composer textarea {
  flex: 1;
  resize: none;
  font: inherit;
  color: var(--color-ink);
  padding: .7rem .9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  min-height: 2.75rem;
  max-height: 8rem;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.chat__composer textarea::placeholder { color: var(--color-ink-subtle); }
.chat__composer textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-tint);
}

.btn {
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: .7rem 1.4rem;
  background: var(--color-brand);
  color: var(--color-on-brand);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.btn:hover:not(:disabled) { background: var(--color-brand-strong); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--ghost {
  background: transparent;
  color: var(--color-brand);
  border: 1px solid var(--color-border-strong);
  font-size: .85rem;
  padding: .5rem .9rem;
  white-space: nowrap;
}
.btn--ghost:hover:not(:disabled) { background: var(--color-brand-tint); border-color: var(--color-brand); box-shadow: none; transform: none; }

.chat__actions { display: flex; gap: .5rem; }

/* Modo embebido (iframe de widget.js): ocupa todo el panel, sin cuadrícula ni sombra. */
body.embed { background: var(--color-bg); }
body.embed .chat { max-width: none; border: 0; box-shadow: none; }
body.embed .chat__header { padding: .6rem .9rem; }
body.embed .chat__logo { width: 28px; height: 28px; }
body.embed .chat__header h1 { display: none; }
body.embed .chat__messages, body.embed .chat__composer { padding-inline: .9rem; }
body.embed .msg { max-width: 90%; }

@media (max-width: 480px) {
  .chat__header { padding: .7rem 1rem; }
  .chat__logo { width: 30px; height: 30px; }
  .chat__header h1 { font-size: 1rem; }
  .chat__messages, .chat__composer { padding-inline: 1rem; }
  .msg { max-width: 90%; }
}

.msg--bot { white-space: normal; }
.msg--bot p { margin: 0 0 .5rem; }
.msg--bot p:last-child { margin-bottom: 0; }
.msg--bot ul, .msg--bot ol { margin: .25rem 0 .5rem; padding-left: 1.25rem; }
.msg--bot li { margin: .15rem 0; }
.msg--bot strong { font-weight: 600; }
.msg--bot a { color: var(--color-brand); font-weight: 500; word-break: break-all; }
.msg--bot a:hover { color: var(--color-brand-light); }
.msg--bot pre { margin: .25rem 0 .5rem; padding: .6rem .75rem; background: var(--color-surface-inverse); color: #e5e7eb; border-radius: var(--radius-sm); overflow-x: auto; }
.msg--bot code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }