/* ===== Dayfit – Chat Style (según imagen) ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 🎨 Paleta y tokens */
:root{
  --df-bg: #0B1226;             /* fondo general muy oscuro */
  --df-panel: #0E1733;          /* panel / contenedor */
  --df-surface: #162245;        /* superficies/bot bubble */
  --df-text: #E9EEFF;           /* texto principal */
  --df-muted: #9AA6CF;          /* texto secundario */
  --df-primary: #D8FF35;        /* amarillo neón */
  --df-primary-dark: #A7CC29;   /* hover más oscuro */
  --df-user: #D8FF35;           /* burbuja usuario (neón) */
  --df-user-text: #0B1226;      /* texto en burbuja usuario */
  --df-bot: #1A2448;            /* burbuja bot */
  --df-border: rgba(216,255,53,.55);  /* borde con brillo */
  --glow: 0 0 0 2px rgba(216,255,53,.35), 0 0 18px rgba(216,255,53,.25);
  --radius: 16px;
}

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

/* Wrapper (tarjeta con borde neón) */
.chat-wrapper{
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--df-panel);
  border: 1px solid var(--df-border);
  border-radius: 22px;
  box-shadow: var(--glow);
  overflow: hidden;
  padding-bottom: 80px; /* aire para el input fijo */
}

/* Header */
.chat-header{
  background: transparent;
  color: var(--df-primary);
  padding: 18px 22px;
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(216,255,53,.25);
}
.chat-header small{
  color: var(--df-muted);
  font-weight: 500;
  font-size: 14px;
}

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

  /* barras discretas */
  scrollbar-width: thin;
  scrollbar-color: var(--df-primary) transparent;
}
.chat-messages::-webkit-scrollbar{ width: 10px; }
.chat-messages::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--df-primary), rgba(216,255,53,.35));
  border-radius: 20px;
}
.chat-messages::-webkit-scrollbar-track{ background: transparent; }

/* Burbujas */
.message{
  max-width: 82%;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.55;
  border: 1px solid rgba(216,255,53,.15);
  background: var(--df-surface);
  color: var(--df-text);
}

/* Usuario – píldora neón a la derecha */
.message.user{
  align-self: flex-end;
  background: var(--df-user);
  color: var(--df-user-text);
  border-color: rgba(216,255,53,.65);
  box-shadow: var(--glow);
  border-top-right-radius: 6px;   /* “colita” sutil */
}

/* Bot – burbuja oscura a la izquierda */
.message.bot{
  align-self: flex-start;
  background: var(--df-bot);
  border-top-left-radius: 6px;
}

/* Enlaces */
.message a{
  color: var(--df-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Titulares dentro de mensajes */
.message h1, .message h2, .message strong{
  color: var(--df-primary);
}

/* Input fijo con glow */
.chat-input{
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  background: var(--df-panel);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid rgba(216,255,53,.25);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
  z-index: 999;
}

.chat-input input{
  flex: 1;
  padding: 14px 16px;
  border-radius: 999px;
  border: 1px solid var(--df-border);
  background: rgba(10,16,34,.6);
  color: var(--df-text);
  font-size: 15px;
  outline: none;
  box-shadow: var(--glow) inset;
}
.chat-input input::placeholder{ color: var(--df-muted); }

.chat-input input:focus{
  border-color: var(--df-primary);
  box-shadow: var(--glow), 0 0 0 4px rgba(216,255,53,.12);
}

/* Botón enviar – círculo neón */
.chat-input button{
  background: var(--df-primary);
  color: #0B1226;
  border: 1px solid var(--df-border);
  border-radius: 999px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  font-size: 20px;
  display: grid;
  place-items: center;
  box-shadow: var(--glow);
  transition: transform .06s ease, filter .2s ease, background .2s ease;
}
.chat-input button:hover{ background: var(--df-primary-dark); filter: brightness(1.02); }
.chat-input button:active{ transform: scale(.98); }

/* Animación “escribiendo” con acento neón */
.typing{
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.typing .dot{
  width: 7px;
  height: 7px;
  background: var(--df-primary);
  opacity: .9;
  border-radius: 50%;
  animation: df-blink 1.15s infinite both;
  box-shadow: 0 0 0 3px rgba(216,255,53,.12), 0 0 10px rgba(216,255,53,.35);
}
.typing .dot:nth-child(2){ animation-delay: .16s; }
.typing .dot:nth-child(3){ animation-delay: .32s; }

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

/* ===== Mobile tweaks (<640px) – estilo bottom-sheet ===== */
@media (max-width: 640px){

  /* Panel pegado abajo con esquinas superiores redondeadas */
  .chat-wrapper{
    height: 100dvh;
    border-radius: 20px 20px 0 0;   /* solo arriba */
    border-bottom: none;            /* sin borde abajo */
    padding-bottom: calc(72px + env(safe-area-inset-bottom)); /* aire por input + notch */
    box-shadow: 0 -8px 22px rgba(0,0,0,.45);
  }

  .chat-header{
    padding: 14px 16px;
    font-size: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .chat-messages{
    padding: 14px;
    gap: 10px;
  }

  .message{
    max-width: 88%;
    font-size: 15px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .chat-input{
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    border-radius: 0;
    border-top: 1px solid rgba(216,255,53,.2);
    box-shadow: 0 -12px 26px rgba(0,0,0,.5);
    gap: 8px;
  }

  .chat-input input{
    padding: 12px 14px;
    font-size: 16px; /* mejor legibilidad */
  }

  .chat-input button{
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
}