:root{
  --bg:#0b1020;
  --card:#121a33;
  --text:#e9eef7;
  --muted:#9fb0d0;
  --accent:#3ea6ff;
  --danger:#ff6b6b;
  --border:#223055;

  /* Layout fluid */
  --container-max:1600px;
  --container-pad:16px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0; color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%, #1a2547, #0b1020);
  font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  min-height:100vh; display:flex; flex-direction:column;
}

/* ================= Header ================= */
.site-header{
  flex:0 0 auto;
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(5px);
  padding:10px 0;
}
.site-header>.container{
  display:flex; align-items:center; justify-content:space-between;
  width:min(var(--container-max), 96vw);
  margin:0 auto;
  padding:0 calc(var(--container-pad) + 6px);
}
.logo-wrap{display:flex; align-items:center; gap:14px}
.logo-wrap img{display:block; width:96px; height:auto; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.25)}
.brand h1{margin:0; font-size:20px}
.brand .tag{margin:2px 0 0; color:var(--muted); font-size:12px}
.topnav a{color:var(--text); text-decoration:none; margin-left:16px; opacity:.9; display:inline-block; padding:6px 0}
.topnav a:hover{color:var(--accent)}

/* ============== Container (fluid) ============== */
.container{
  width:min(var(--container-max), 96vw);
  margin:12px auto 4px;
  padding:0 var(--container-pad);
}
main.container{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  min-height:0;
}

/* ============== Card / Form / Buttons ============== */
.auth-card,.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:24px; box-shadow:0 20px 50px rgba(0,0,0,.25)
}
.auth-card h2,.card h2{margin-top:0}
label{display:block; margin:12px 0}
input[type=text],input[type=password],textarea{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid var(--border); background:#0f1730; color:var(--text)
}
.btn-primary{
  margin-top:8px; padding:10px 16px; border-radius:10px;
  background:linear-gradient(120deg,#3ea6ff,#7f7cff); color:#000; border:0;
  cursor:pointer; font-weight:600
}
.btn-primary:hover{filter:brightness(1.05)}
.alert.error{
  background:rgba(255,107,107,.15); border:1px solid rgba(255,107,107,.35);
  color:#ffdede; padding:10px 12px; border-radius:10px; margin-bottom:12px
}

/* ================= Footer ================= */
.site-footer{flex:0 0 auto; border-top:1px solid var(--border); margin-top:0; padding:0; text-align:center}
.site-footer>.container{
  width:min(var(--container-max), 96vw);
  margin:0 auto; padding:8px var(--container-pad);
  color:var(--muted)
}

/* ================= Misc ================= */
.welcome .note{margin-top:10px; color:var(--muted)}
.bullets{list-style:square; padding-left:18px}

/* =========================================================
   =================   CHAT LAYOUT & UI   ==================
   ========================================================= */

/* chat chiếm hết chiều cao còn lại của main */
.chat-wrap{
  flex:1 1 auto;
  min-height:0;
  display:flex; gap:16px;
  margin-bottom:0;
}

/* Cột trái: cố định, không nhảy */
.chat-left{
  flex:0 0 auto;
  width:clamp(240px, 26vw, 420px);
  background:var(--card); border:1px solid var(--border);
  border-radius:14px;
  display:flex; flex-direction:column;   /* giữ header cố định, list co giãn */
  overflow:hidden;
}
.thread-head{padding:12px 14px; border-bottom:1px solid var(--border); font-weight:600}
.thread-list{
  flex:1 1 auto; min-height:0;           /* list tự co trong cột trái */
  overflow:auto;
}

/* item */
.thread-item{display:flex; gap:10px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.04); text-decoration:none; color:var(--text)}
.thread-item:hover{background:rgba(255,255,255,.03)}
.thread-item.active{background:rgba(62,166,255,.12)}
.ti-avatar{width:36px; height:36px; border-radius:999px; background:rgba(255,255,255,.06); display:grid; place-items:center; font-weight:700}
.ti-content{flex:1 1 auto; min-width:0}
.ti-title{display:flex; align-items:center; justify-content:space-between; gap:8px}
.ti-name{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ti-time{color:var(--muted); font-size:12px; white-space:nowrap}
.ti-last{color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Cột phải: kéo dài hết chiều cao chat */
.chat-right{
  flex:1 1 auto; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; min-height:0;     /* cho phép .msgs cuộn */
}

/* Header khung chat */
.chat-header{
  padding:10px 14px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:12px
}
.kh-left{display:flex; align-items:center; gap:12px; min-width:0}
.kh-avatar{width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,.06); display:grid; place-items:center; font-weight:700}
.kh-name{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kh-right{color:var(--muted); font-size:12px; white-space:nowrap}

/* Gợi ý AI */
.ai-suggest{
  background:rgba(62,166,255,.12); border-bottom:1px solid var(--border);
  padding:10px 14px; display:flex; align-items:flex-start; gap:10px
}
.ai-suggest .txt{flex:1}
.ai-row{display:flex; gap:8px; align-items:flex-start}
.ai-title{font-weight:700; white-space:nowrap}
.ai-content{flex:1 1 auto}
.ai-content.muted{color:var(--muted)}
.ai-suggest .status{margin-top:6px; display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted)}
.btn-mini{padding:6px 10px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; font-size:12px}
.btn-mini:hover{background:rgba(255,255,255,.06)}

/* Messages: chiếm hết khoảng giữa; composer dính đáy */
.msgs{
  flex:1 1 auto; min-height:0;
  padding:14px; display:flex; flex-direction:column; gap:10px; overflow:auto
}
.bubble{
  max-width:68%; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  box-shadow:0 8px 30px rgba(0,0,0,.15); word-wrap:break-word;
  display:flex; flex-direction:column; gap:6px
}
.bubble.in{align-self:flex-start; background:#0f1730}
.bubble.out{align-self:flex-end; background:rgba(255,255,255,.06)}
.bubble .text{white-space:pre-line}
.bubble .ts{font-size:12px; color:var(--muted); text-align:right; line-height:1.2}

/* Composer sát đáy */
.composer{
  flex:0 0 auto; border-top:1px solid var(--border);
  padding:8px 12px; display:flex; gap:10px; align-items:flex-end;
  background:rgba(0,0,0,0.08)
}
.composer textarea{
  flex:1 1 auto; resize:vertical; min-height:44px; max-height:160px;
  padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:#0f1730; color:var(--text); margin:0
}
.btn-reply{
  flex:0 0 auto; padding:10px 14px; border-radius:10px; border:1px solid var(--border);
  background:transparent; color:var(--text); cursor:pointer; margin:0
}
.btn-reply:hover{background:rgba(255,255,255,.06)}

/* ================= Responsive ================= */
@media (min-width:1440px){
  .logo-wrap img{width:110px}
  .brand h1{font-size:22px}
}
@media (max-width:1024px){
  .chat-left{width:clamp(220px, 32vw, 340px)}
}
@media (max-width:820px){
  .chat-wrap{flex-direction:column}
  .chat-left{width:100%}
  .thread-list{max-height:34vh}
  .chat-right{min-height:0}
}
@media (max-width:640px){
  .logo-wrap img{width:72px}
  .brand h1{font-size:18px}
  .topnav a{margin-left:12px}
}
@media (max-width:480px){
  .ai-suggest{padding:8px 10px}
  .composer{padding:8px 10px}
  .btn-reply{padding:8px 12px}
}