/* Tokens y clases base tomadas del design system "Nocturne" (claude.ai/design),
   recortadas a lo que esta pagina usa. Fuente de verdad de la paleta/spacing. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

a, a:hover { color: var(--color-accent-300); }

/* — botones — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }

/* — input — */
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

/* — card — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
  border: 1px solid transparent;
}

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* ══════════════════════════════════════════════════════════════════════
   Layout especifico de esta pagina (Chat SD CIE PEMSA)
   ══════════════════════════════════════════════════════════════════════ */

@keyframes bxti-breathe {
  0%, 100% { opacity: 0.05; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.15; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes bxti-spin-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.sd-scroll::-webkit-scrollbar { width: 8px; }
.sd-scroll::-webkit-scrollbar-thumb { background: var(--color-neutral-700); border-radius: 8px; }

.app {
  position: relative; display: flex; height: 100vh; width: 100%;
  background: radial-gradient(120% 100% at 20% 0%, var(--color-neutral-800) 0%, var(--color-bg) 55%);
  overflow: hidden;
}

.watermark {
  position: absolute; top: 50%; left: 58%; width: 560px; pointer-events: none;
  mix-blend-mode: lighten; animation: bxti-breathe 9s ease-in-out infinite; z-index: 0;
}

/* — sidebar — */
.sidebar {
  position: relative; z-index: 1; width: 300px; flex: none;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--color-neutral-800);
  background: color-mix(in oklab, var(--color-bg) 88%, black);
  padding: var(--space-6) var(--space-4);
}
.sidebar-brand { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.sidebar-brand img { height: 26px; width: auto; }

.sidebar-label {
  font: 600 10px var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  opacity: .55; margin-bottom: var(--space-2);
}
.sidebar-client {
  font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: 1.2;
  margin-bottom: var(--space-2);
}
.sidebar-tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }

.divider {
  height: 1px; margin-bottom: var(--space-4);
  background: linear-gradient(to right, var(--color-neutral-800), transparent);
}

.topics-header {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-3);
}
.topics-header span:first-child {
  font: 600 10px var(--font-body); letter-spacing: .1em; text-transform: uppercase; opacity: .55;
}
.topics-count { font-size: 11px; opacity: .4; }

.topics-list { display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto; overflow-x: hidden; flex: 1; }
.topic-btn {
  all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid transparent; background: transparent;
}
.topic-btn:hover { background: var(--color-neutral-800); border-color: var(--color-neutral-700); }
.topic-title { font-size: 13px; font-weight: 500; color: var(--color-text); }
.topic-sub { font-size: 11.5px; opacity: .55; }

.topics-empty {
  flex: 1; display: flex; align-items: flex-start; padding: var(--space-3);
  border: 1px dashed var(--color-neutral-700); border-radius: var(--radius-md);
}
.topics-empty span { font-size: 12px; line-height: 1.5; opacity: .5; }

/* El [hidden] nativo empata en especificidad con .topics-list/.topics-empty
   (que fijan su propio display) y pierde por orden de cascada — se refuerza aqui. */
.topics-list[hidden], .topics-empty[hidden] { display: none; }

.sidebar-footer {
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--color-neutral-800);
  display: flex; align-items: center; gap: var(--space-2);
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-300); flex: none;
  box-shadow: 0 0 6px var(--color-accent-400);
}
.sidebar-footer span:last-child { font-size: 11.5px; opacity: .6; }

/* — main / header — */
.main { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; min-width: 0; }

.chat-header {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-800);
}
.chat-header-left { display: flex; align-items: center; gap: var(--space-3); }
.chat-header-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-700);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.chat-header-avatar img { width: 70%; height: 70%; object-fit: contain; }
.chat-header-title { font-size: 14px; font-weight: 500; }
.chat-header-sub { font-size: 11.5px; opacity: .55; display: flex; align-items: center; gap: 6px; }
.online-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-300); }

/* — mensajes — */
.messages { flex: 1; overflow-y: auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }

.message-row { display: flex; gap: var(--space-3); flex-direction: row; }
.message-row.user { flex-direction: row-reverse; }

.msg-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.msg-avatar.agent { background: var(--color-neutral-800); }
.msg-avatar.user { background: var(--color-accent-800); }
.msg-avatar img { width: 60%; height: 60%; object-fit: contain; }
.msg-avatar .initials { font-size: 11px; font-weight: 600; color: var(--color-neutral-100); }

.bubble { max-width: 62%; padding: var(--space-3) var(--space-4); }
.bubble.agent { background: var(--color-neutral-800); border-color: var(--color-neutral-700); }
.bubble.user {
  background: color-mix(in oklab, var(--color-accent-700) 55%, var(--color-neutral-800));
  border-color: var(--color-accent-600);
}
.bubble-text { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }

.thinking-dots { padding: var(--space-3) var(--space-4); display: flex; gap: 5px; align-items: center; }
.thinking-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-300);
  animation: bxti-spin-dot 1s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: .15s; }
.thinking-dots span:nth-child(3) { animation-delay: .3s; }

/* — composer — */
.composer { flex: none; padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--color-neutral-800); }
.composer-row { display: flex; gap: var(--space-3); }
.composer-row .input { flex: 1; }
.composer-hint { font-size: 11px; opacity: .4; margin-top: var(--space-2); }