:root{
  --bg:#0b0e14; --bg2:#11162a; --bd:#1e2746; --fg:#eaeefb; --sub:#9aa7d7;
  --me:#1f2a4d; --them:#162042; --btn:#2a3566; --btnh:#303d77;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--fg)
}

/* Header fijo */
header{
  display:flex; gap:12px; align-items:center;
  padding:12px 16px; background:var(--bg2); border-bottom:1px solid var(--bd);
}

/* GRID principal: lista + chat */
.wrap{
  display:grid; grid-template-columns:340px 1fr;
  height:calc(100vh - 56px);
  overflow:hidden;           /* evita scroll del body */
  min-height:0;              /* 💡 necesario para que hijos puedan scrollear */
}

/* Columna izquierda (scrolleable) */
.list{
  border-right:1px solid var(--bd);
  overflow:auto; height:100%;
  min-height:0;              /* 💡 */
}
.item{padding:12px 14px;border-bottom:1px solid var(--bd);cursor:pointer}
.item:hover{background:var(--bg2)}
.item small{color:var(--sub)}

/* Columna derecha */
.chat{
  display:flex; flex-direction:column; height:100%;
  min-height:0;              /* 💡 habilita que .msgs scrollee */
}

/* Barra superior y handoff (no-sticky, quedan fijas porque scrollea solo .msgs) */
.toolbar{display:flex; gap:8px; padding:8px 12px; border-bottom:1px solid var(--bd)}
.handoff{display:flex; gap:8px; padding:8px 12px; border-bottom:1px solid var(--bd)}

/* Mensajes: ÚNICA zona scrolleable en la columna derecha */
.msgs{
  flex:1; overflow:auto; padding:16px;
  min-height:0;              /* 💡 crítico */
  padding-bottom:96px;       /* espacio visual respecto de la .bar */
}
.msg{margin:8px 0; max-width:70%; word-wrap:break-word; white-space:pre-wrap}
.me{background:var(--me); margin-left:auto; border-radius:14px 14px 4px 14px; padding:10px}
.them{background:var(--them); border-radius:14px 14px 14px 4px; padding:10px}
.meta{color:var(--sub); font-size:12px; margin-top:4px}

/* Caja de envío abajo (no sticky, queda fija porque scrollea .msgs) */
.bar{
  display:flex; gap:8px; padding:12px; border-top:1px solid var(--bd);
  background:var(--bg);
}

/* Inputs/botones */
input,button{font:inherit}
input[type=text]{
  flex:1; padding:10px; border-radius:8px;
  border:1px solid var(--bd); background:var(--bg); color:var(--fg)
}
button{
  padding:10px 14px; border-radius:8px; border:1px solid var(--bd);
  background:var(--btn); color:var(--fg); cursor:pointer
}
button:hover{background:var(--btnh)}

.search{margin-left:auto; display:flex; gap:8px}
.loadmore{
  display:block; text-align:center; margin:8px auto; padding:6px 10px;
  border-radius:12px; background:transparent; border:1px solid var(--bd);
  color:var(--sub); cursor:pointer
}
.loadmore:hover{background:var(--bg2)}
.empty{color:var(--sub); text-align:center; margin-top:20vh}

/* Modal login */
.login-modal{
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:#111b2aa6; display:flex; align-items:center; justify-content:center; z-index:100;
}
#loginForm{
  background:#1e2746; padding:36px 32px; border-radius:14px; box-shadow:0 6px 32px #000a;
  display:flex; flex-direction:column; gap:12px; min-width:240px;
}
#loginForm input{padding:10px; border-radius:7px; border:1px solid var(--bd); background:#141a2e; color:var(--fg)}
#loginForm button{padding:10px; border-radius:7px; background:var(--btn); color:var(--fg); border:none; cursor:pointer}