/* ===== Helen Doron – Chat Style ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Paleta */
:root{
  --hd-primary: #00B5E2;        /* azul header/botón */
  --hd-primary-dark: #0097c2;   /* hover */
  --hd-deep: #1B4E7B;           /* azul profundo (texto/acento) */
  --hd-bg: #F5FBFF;             /* fondo muy claro */
  --hd-user: #E6F9FF;           /* burbuja usuario */
  --hd-bot: #FFFFFF;            /* burbuja bot */
  --hd-border: #D9EEF7;         /* bordes suaves */
  --hd-link: #00A6D1;           /* links */
  --hd-accent: #8E6BF2;         /* morado acento (typing, iconos) */
  --shadow: 0 6px 18px rgba(27, 78, 123, .08);
  --radius: 14px;
}

html, body{
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background-color: var(--hd-bg);
  color: #11324D;
  overflow: hidden;
}

/* Wrapper */
.chat-wrapper{
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: linear-gradient(180deg, #F9FDFF 0%, var(--hd-bg) 100%);
  padding-bottom: 72px; /* deja aire al input fijo */
}

/* Header */
.chat-header{
  background: var(--hd-primary);
  color: #fff;
  padding: 14px 18px;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow);
}

/* Zona mensajes */
.chat-messages{
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Burbuja base */
.message{
  max-width: 82%;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: var(--shadow);
  border: 1px solid var(--hd-border);
}

/* Usuario (derecha, azul claro) */
.message.user{
  background: var(--hd-user);
  align-self: flex-end;
  border-top-right-radius: 6px;  /* ligera “colita” */
}

/* Bot (izquierda, blanco) */
.message.bot{
  background: var(--hd-bot);
  align-self: flex-start;
  border-top-left-radius: 6px;
}

/* Input fijo */
.chat-input{
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--hd-border);
  box-shadow: 0 -6px 18px rgba(27, 78, 123, .06);
  z-index: 999;
}

.chat-input input{
  flex: 1;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--hd-border);
  background: #FBFEFF;
  font-size: 14px;
  outline: none;
}

.chat-input input:focus{
  border-color: var(--hd-primary);
  box-shadow: 0 0 0 3px rgba(0,181,226,.15);
}

/* Botón enviar estilo HD */
.chat-input button{
  background: var(--hd-primary);
  color: white;
  border: none;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  font-size: 18px;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  transition: transform .06s ease, background .2s ease;
}

.chat-input button:hover{ background: var(--hd-primary-dark); }
.chat-input button:active{ transform: scale(.98); }

/* Links en mensajes */
.message a{
  color: var(--hd-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tipografía especial en encabezados dentro de mensajes (opcional) */
.message h1, .message h2, .message strong{
  color: var(--hd-deep);
}

/* Animación escribiendo – acento morado */
.typing{
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.typing .dot{
  width: 7px;
  height: 7px;
  background: var(--hd-accent);
  opacity: .65;
  border-radius: 50%;
  animation: hd-blink 1.2s infinite both;
  box-shadow: 0 0 0 2px rgba(142,107,242,.12);
}

.typing .dot:nth-child(2){ animation-delay: .16s; }
.typing .dot:nth-child(3){ animation-delay: .32s; }

@keyframes hd-blink{
  0%   { opacity: .25; transform: translateY(0); }
  20%  { opacity: 1;   transform: translateY(-3px); }
  100% { opacity: .25; transform: translateY(0); }
}

/* Scroll suave y barras discretas */
.chat-messages{
  scrollbar-width: thin;
  scrollbar-color: var(--hd-primary) transparent;
}
.chat-messages::-webkit-scrollbar{ width: 8px; }
.chat-messages::-webkit-scrollbar-thumb{
  background: linear-gradient(var(--hd-primary), var(--hd-deep));
  border-radius: 20px;
}
.chat-messages::-webkit-scrollbar-track{ background: transparent; }