/* ====== ChatGPT-like fullpage layout ====== */
:root{
  --bg:#0b0f19;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --line:#1e293b;
  --brand:#8b5cf6;
  --composer:#0f1629;
  --bubble:#0f172a;
  --code:#0a1020;
  --code-line:#1f2a44;
  --maxw:780px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background:var(--bg); color:var(--text);
}

/* ===== Top bar ===== */
.topbar{ position:sticky; top:0; z-index:10; background:linear-gradient(to bottom,rgba(11,15,25,.9),rgba(11,15,25,.75)); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.topbar-inner{ max-width:var(--maxw); margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:10px; }
.logo{ width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#0b1020;background:linear-gradient(135deg,#60a5fa,#34d399); }
.app-title{ font-weight:700 }
.app-sub{ font-size:12px; color:var(--muted) }

/* ===== Chat scroll area ===== */
.chat-wrap{ height:calc(100dvh - 64px); display:flex; flex-direction:column; }
.chat{ flex:1; overflow:auto; padding:12px 0 140px; }
.row{ padding:18px 16px; border-bottom:1px solid var(--line); }
.msg{ max-width:var(--maxw); margin:0 auto; display:flex; gap:12px; align-items:flex-start; }
.msg .avatar{ width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#0b1020;background:linear-gradient(135deg,#60a5fa,#34d399); flex:0 0 auto; }
.msg .content{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }

/* === ĐỐI LẬP HAI BÊN === */
.msg.user{ flex-direction: row-reverse; }            /* đảo hướng cho U */
.msg.user .content{ align-items:flex-end; text-align:right; }
.msg.user .avatar{ background:linear-gradient(135deg,#a78bfa,#60a5fa) }

/* === Bubble chung === */
.bubble{
  background:var(--bubble);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  max-width:100%;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}

/* === Bubble U nổi bật === */
.msg.user .bubble{
  background: linear-gradient(135deg,#1d2a58,#0f1b3d);
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(139,92,246,.35) inset,
    0 6px 18px rgba(139,92,246,.20);
}
.msg.user .bubble .md a{ color:#c7d2fe }

/* ===== Markdown ===== */
.md{ color:var(--text); line-height:1.7; white-space:normal }
.md p{ margin:0 0 .9em }
.md h1,.md h2,.md h3{ line-height:1.3; margin:.2em 0 .5em }
.md h1{ font-size:1.25rem } .md h2{ font-size:1.15rem } .md h3{ font-size:1.05rem }
.md strong{ font-weight:700 } .md em{ font-style:italic }
.md a{ color:#93c5fd; text-decoration:none } .md a:hover{ text-decoration:underline }
.md ul,.md ol{ margin:.4em 0 .8em 1.2em } .md li{ margin:.25em 0 }
.md code{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:.15em .35em; border-radius:6px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; }
.md pre{ background:var(--code); border:1px solid var(--code-line); padding:12px; border-radius:12px; overflow:auto; margin:.9em 0; }
.md pre code{ background:transparent; border:0; padding:0; white-space:pre }

/* ===== Typing indicator ===== */
.typing{ display:inline-block; min-width:42px }
.typing span{ display:inline-block; width:6px;height:6px;margin-right:4px;border-radius:50%;background:#cbd5e1;opacity:.6; animation:blink 1s infinite }
.typing span:nth-child(2){ animation-delay:.15s } .typing span:nth-child(3){ animation-delay:.3s }
@keyframes blink {0%,80%,100%{opacity:.2} 40%{opacity:1}}

/* ===== Composer fixed bottom ===== */
.composer{ position:fixed; left:0; right:0; bottom:0; z-index:20; background:linear-gradient(to top,var(--bg),rgba(11,15,25,.8) 60%,rgba(11,15,25,0)); padding:22px 16px 20px; }
.composer-inner{ max-width:var(--maxw); margin:0 auto; }
.form{ display:flex; gap:10px; align-items:flex-end; background:var(--composer); border:1px solid var(--line); border-radius:14px; padding:10px; }
.form textarea{ flex:1; resize:none; min-height:44px; max-height:35dvh; padding:10px 12px; border:0; outline:none; background:transparent; color:var(--text); font-size:15px; }
.form button{ height:44px; padding:0 16px; border-radius:10px; border:0; cursor:pointer; background:var(--brand); color:#fff; font-weight:700; }

/* ===== ADMIN styles (mới) ===== */
.admin-wrap{ max-width:var(--maxw); margin:16px auto 160px; padding:0 16px; }
.admin-card{ background:var(--bubble); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:16px; }
.admin-card h2{ margin:4px 0 12px }
.form-admin input[type=text],
.form-admin input[type=email],
.form-admin input[type=password]{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#0c172e; color:var(--text); }
.form-admin .btn{ margin-top:10px; padding:10px 16px; border-radius:10px; border:0; background:var(--brand); color:#fff; cursor:pointer; }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ border:1px solid var(--line); padding:8px; text-align:left; }
.table th{ background:#0f1b33; }

/* Mobile */
@media (max-width:640px){
  .chat{ padding-bottom:150px }
}