/* ====== Tokens de marca + escalas fluidas ====== */
:root{
  --purple-900:#1B0A3F;     /* barra y burbuja bot */
  --purple-800:#2A0E59;
  --teal-600:#0A9AA5;       /* burbuja usuario */
  --surface:#FFFFFF;        /* tarjeta chat */
  --ink:#0E0E10;
  --muted:#8A8FA3;
  --ring:#E2E5F2;
  --shadow: 0 8px 24px rgba(21, 13, 58, .15);

  /* Escalas fluidas */
  --space: clamp(12px, 2.8vw, 48px);      /* paddings/gaps generales */
  --gap:   clamp(12px, 2.4vw, 48px);
  --rad-xl: clamp(14px, 2vw, 22px);
  --rad-pill: clamp(18px, 3vw, 28px);

  /* Altura topbar y logo (fluidos) */
  --topbar-h: clamp(56px, 7vw, 96px);
  --logo-h:   clamp(24px, 3.8vw, 48px);

  /* Avatar (fluidos) */
  --hero-w: clamp(220px, 26vw, 520px);   /* ancho máximo del marco en desktop */
  --hero-ratio: 3 / 4;                   /* relación del marco (3:4 retrato) */

  /* Alturas visibles principales (fluidas) */
  --avatar-vh: clamp(28vh, 34vh, 40vh);  /* alto del avatar en móvil */
  --chat-vh:   clamp(48vh, 56vh, 62vh);  /* alto del chat en móvil */
}

/* ====== Reset base ====== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--ink);
  background:#F6F8FF;
  overflow-x:hidden;
}

/* ====== Topbar ====== */
.topbar{
  height:var(--topbar-h);
  background:var(--purple-900);
  color:#fff;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 var(--space);
}
.burger{
  width:clamp(32px, 5vw, 40px);
  height:clamp(32px, 5vw, 40px);
  border:none;border-radius:10px;
  background:transparent; display:grid; place-items:center; cursor:pointer;
}
.burger span{display:block;width:20px;height:2px;background:#fff;margin:3px 0;border-radius:2px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:var(--logo-h);object-fit:contain}
.brand-line{opacity:.95;font-size:clamp(12px, 1.4vw, 15px)}

/* ====== Encabezado de bienvenida ====== */
.welcome{
  width:100%;
  text-align:center;
  padding: clamp(8px, 1.8vw, 20px) 0 clamp(6px, 1.2vw, 10px);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight:600;
  line-height:1.2;
  color:var(--ink);
  justify-self:center;
}
.welcome strong{ font-weight:900; }

/* ====== Fondo gráfico ====== */
.hero-bg{
  position:fixed; inset:var(--topbar-h) 0 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.85) 180px, rgba(255,255,255,0) 320px),
    url("/assets/fondo.png") center/cover no-repeat;
  z-index:-1;
}

/* ====== Layout 50/50 pantalla (fluido) ====== */
.layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "left right";
  gap: var(--gap);
  align-items:start;
  width:100%;
  margin: clamp(12px, 2vw, 32px) 0;
  padding: 0 clamp(12px, 3.2vw, 48px);
}

/* Izquierda: sticky y con 2 filas (título + chat) */
.left{
  grid-area:left;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: grid;
  grid-template-rows: auto 1fr;    /* fila 1: bienvenida | fila 2: chat */
  gap: clamp(10px, 1.8vw, 24px);
  width: 100%;
}

/* Derecha (avatar) — centrada verticalmente */
.right{
  grid-area:right;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ====== Marco del avatar (mismo tamaño exacto para PNG/GIF) ====== */
.hero-frame{
  width: min(var(--hero-w), 90%);
  aspect-ratio: var(--hero-ratio);
  border:4px solid #1A0146;
  border-radius: clamp(16px, 2.2vw, 24px);
  box-shadow:0 8px 20px rgba(21,13,58,.15);
  background:#fff;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-gif{ width:100%; height:100%; object-fit:cover; }
.hero-frame:has(.speaking){
  border-color:#00B894;
  box-shadow:0 0 0 3px rgba(0,184,148,.18), 0 8px 20px rgba(21,13,58,.15);
  transition:border-color .2s ease, box-shadow .2s ease;
}

/* ====== Tarjeta de chat (fluida) ====== */
.chat-card{
  align-self:center;
  justify-self:stretch;
  background:var(--surface);
  border-radius: calc(var(--rad-xl) + 6px);
  box-shadow:var(--shadow);
  border:1px solid var(--ring);
  height: clamp(420px, 58vh, 760px);   /* alto visible del chat (fluido) */
  width:100%;
  display:flex; flex-direction:column;
  overflow:hidden;
}

/* ====== Área del chat ====== */
.chat{
  padding: clamp(14px, 2vw, 30px) clamp(14px, 2vw, 28px) clamp(8px, 1vw, 10px);
  display:flex; flex-direction:column; gap: clamp(8px, 1.4vw, 14px);
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  scroll-behavior:smooth;
  text-align:left; /* asegurar texto a la izquierda */
}

/* ====== Burbujas ====== */
.msg{
  max-width:72%;
  width:fit-content;
  padding: clamp(10px, 1.4vw, 12px) clamp(12px, 1.8vw, 16px);
  border-radius: var(--rad-pill);
  line-height:1.35;
  word-wrap:break-word;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  text-align:left;
}
.msg.bot{
  background:var(--purple-900); color:#fff;
  border-bottom-left-radius:10px;
}
.msg.user{
  margin-left:auto;
  background:var(--teal-600); color:#fff;
  border-bottom-right-radius:10px;
}
.msg.meta{
  margin:6px auto 0;
  color:var(--muted);
  background:transparent;
  box-shadow:none;
  font-size:clamp(11px, 1.2vw, 12px);
}

/* ====== Composer (fluido) ====== */
.composer{
  display:grid;
  grid-template-columns: clamp(40px, 5.2vw, 52px) 1fr clamp(40px, 5.2vw, 52px);
  align-items:center; gap: clamp(8px, 1.4vw, 12px);
  padding: clamp(10px, 1.6vw, 18px);
  border-top:1px solid var(--ring);
  background:#fff;
}
.input{
  width:100%;
  padding: clamp(10px, 1.4vw, 14px) clamp(12px, 1.6vw, 16px);
  border:1px solid var(--ring);
  border-radius:999px;
  outline:none;
  font-size: clamp(14px, 1.3vw, 16px);
}
.input:focus{ border-color:#C6CCF1; box-shadow:0 0 0 3px rgba(145,160,255,.15); }

.btn-circle{
  width: clamp(40px, 5.2vw, 52px);
  height: clamp(40px, 5.2vw, 52px);
  border-radius:999px; border:none; cursor:pointer;
  background:var(--purple-900) center/60% no-repeat; box-shadow:var(--shadow);
}
.btn-voice{ background-image:url("/assets/microfono.png"); }
.btn-send{  background-image:url("/assets/mensaje.png"); }

/* ====== Listas y texto enriquecido ====== */
.chat strong{font-weight:700}
.chat ul{margin:8px 0 0 18px; text-align:left;}
.chat li{margin:6px 0}

/* ====== Responsive (móvil) ====== */
@media (max-width:900px){

  /* 1) Una sola columna: avatar arriba / chat abajo */
  .layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "right"
      "left";
    gap: clamp(10px, 2vw, 16px);
    padding: 0 clamp(12px, 4vw, 16px);
    margin: clamp(8px, 2vw, 12px) 0;
    text-align:center;
  }

  /* 2) Desactivar sticky en móvil */
  .right, .left{
    position: static;
    height: auto;
  }

  /* 3) Título más compacto */
  .welcome{
    font-size: clamp(20px, 5.2vw, 32px);
    margin-top: 4px;
  }

  /* 4) Avatar visible sin scroll junto al chat */
  .hero-frame{
    height: var(--avatar-vh);   /* ~34vh por defecto */
    width: auto;
    max-width: 92vw;
    aspect-ratio: var(--hero-ratio);
    margin: 0 auto;
  }

  /* 5) Chat quepa en primera pantalla */
  .chat-card{
    height: var(--chat-vh);     /* ~56vh por defecto */
    min-height: 0;
    align-self:center;
    justify-self:stretch;
  }

  .composer{
    grid-template-columns: clamp(40px, 9vw, 48px) 1fr clamp(40px, 9vw, 48px);
    padding: clamp(8px, 2.6vw, 12px);
  }
  .btn-circle{ width: clamp(40px, 9vw, 48px); height: clamp(40px, 9vw, 48px); }
  .input{ font-size: clamp(13px, 3.6vw, 14px); padding: clamp(10px, 3vw, 12px) clamp(12px, 3.4vw, 14px); }

  .brand-line{ display:none; }
}