*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
button,input,textarea,select{font:inherit}
img{max-width:100%;display:block}
.hidden{display:none!important}

body.theme-light{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --panel-soft:#eef6f1;
  --text:#182230;
  --muted:#6b7280;
  --border:#dce4ee;
  --chip:#f2f5f9;
  --bubble-ai:#e6f7ef;
  --bubble-user:#ffffff;
  --input:#ffffff;
  --shadow:0 10px 30px rgba(15,23,42,.08);
}
body.theme-dark{
  --bg:#07152f;
  --panel:#0b1a35;
  --panel-soft:#0f2448;
  --text:#f8fafc;
  --muted:#b7c2d4;
  --border:rgba(255,255,255,.10);
  --chip:#12284d;
  --bubble-ai:#11325f;
  --bubble-user:#173f75;
  --input:#0d1e3a;
  --shadow:0 12px 32px rgba(0,0,0,.32);
}
body{
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}
.app-shell{
  min-height:100vh;
  display:flex;
  position:relative;
}
.sidebar{
  width:310px;max-width:86vw;background:var(--panel);border-right:1px solid var(--border);
  position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-102%);
  transition:transform .24s ease;overflow:auto;padding:16px;box-shadow:var(--shadow)
}
.sidebar.open{transform:translateX(0)}
.sidebar-backdrop{
  position:fixed;inset:0;background:rgba(2,6,23,.45);z-index:35;opacity:0;pointer-events:none;transition:opacity .24s ease
}
.sidebar-backdrop.show{opacity:1;pointer-events:auto}
.sidebar-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.brand{display:flex;gap:12px;align-items:flex-start}
.brand-logo{width:42px;height:42px}
.brand-title{font-size:20px;font-weight:800}
.brand-sub{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4}
.close-side,.icon-btn,.circle-tool,.text-btn,.tab-btn{
  border:none;background:none;color:inherit;cursor:pointer
}
.close-side{font-size:20px;padding:4px}
.new-chat-btn{
  width:100%;border:none;border-radius:14px;padding:13px 14px;
  background:#34a853;color:#fff;font-weight:700;cursor:pointer;margin-bottom:16px
}
.side-block{margin-bottom:18px}
.side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700}
.text-btn{color:var(--muted)}
.history-list{display:flex;flex-direction:column;gap:8px;max-height:42vh;overflow:auto}
.history-item{
  border:none;border-radius:14px;padding:10px 12px;background:var(--chip);color:var(--text);text-align:left;cursor:pointer
}
.history-item strong{display:block;font-size:14px;margin-bottom:3px}
.history-item span{font-size:12px;color:var(--muted)}
.history-item.active{outline:1px solid rgba(37,99,235,.35)}
.tool-list{display:flex;flex-wrap:wrap;gap:8px}
.tool-chip{
  border:none;border-radius:999px;padding:8px 12px;background:var(--chip);color:var(--text);cursor:pointer;font-size:13px
}

.main-panel{
  flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh
}
.mobile-header{
  position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--border)
}
.header-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px
}
.header-brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.header-logo{width:38px;height:38px}
.header-brand-text{min-width:0}
.header-title{font-size:28px;font-weight:800;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-sub{font-size:13px;color:var(--muted)}
.header-actions{display:flex;align-items:center;gap:8px}
.icon-btn{
  width:40px;height:40px;border-radius:999px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:18px
}
.tab-row{
  display:flex;gap:22px;align-items:center;padding:0 14px;border-top:1px solid transparent
}
.tab-btn{
  position:relative;padding:12px 0;font-size:16px;color:var(--muted)
}
.tab-btn.active{color:var(--text);font-weight:700}
.tab-btn.active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:999px;background:var(--text)
}

.chat-area{
  flex:1;display:flex;flex-direction:column;min-height:0;padding:14px 14px 0
}
.hero-section{padding-bottom:10px}
.welcome-card{
  background:var(--panel);border:1px solid var(--border);border-radius:24px;padding:18px 16px;box-shadow:var(--shadow)
}
.welcome-logo{width:72px;height:72px;margin:0 auto 12px}
.welcome-card h1{margin:0 0 8px;text-align:center;font-size:20px}
.welcome-card p{margin:0 0 14px;color:var(--muted);line-height:1.6;text-align:center}
.prompt-list{display:flex;flex-wrap:wrap;gap:10px}
.prompt-btn{
  border:none;background:var(--chip);color:var(--text);padding:12px 14px;border-radius:16px;font-weight:700;text-align:left;cursor:pointer
}

.messages{
  flex:1;overflow:auto;display:flex;flex-direction:column;gap:14px;padding:6px 0 16px;min-height:160px
}
.empty-state{text-align:center;color:var(--muted);padding:32px 12px}
.message{display:flex;gap:10px;align-items:flex-start}
.message.user{justify-content:flex-end}
.message.user .avatar{order:2}
.message.user .body{order:1}
.avatar{
  width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  flex:0 0 34px;background:var(--chip);font-size:12px;font-weight:800
}
.body{max-width:min(86vw,720px)}
.bubble{
  background:var(--bubble-ai);padding:14px 14px;border-radius:18px;line-height:1.65;white-space:pre-wrap;word-break:break-word
}
.message.user .bubble{background:var(--bubble-user);border:1px solid var(--border)}
.message-meta{margin-top:6px;font-size:12px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.image-preview{
  margin-top:8px;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#fff
}
.image-preview img{width:100%;height:auto;display:block}
.file-box{
  margin-top:8px;padding:10px 12px;border-radius:14px;background:var(--chip);font-size:14px
}
.attached-files-bar{
  display:flex;flex-wrap:wrap;gap:8px;padding-bottom:8px
}
.attachment-pill{
  display:inline-flex;align-items:center;gap:8px;background:var(--chip);padding:8px 12px;border-radius:999px;font-size:13px
}
.attachment-pill button{border:none;background:none;color:var(--muted);cursor:pointer}

.composer-wrap{
  position:sticky;bottom:0;z-index:18;background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--bg) 28%);
  padding:10px 14px calc(env(safe-area-inset-bottom) + 10px)
}
.theme-dark .composer-wrap{
  background:linear-gradient(180deg, rgba(7,21,47,0) 0%, var(--bg) 28%)
}
.composer-form{width:100%}
.composer-box{
  background:var(--input);border:1px solid var(--border);border-radius:22px;padding:10px;box-shadow:var(--shadow)
}
#messageInput{
  width:100%;border:none;outline:none;background:transparent;color:var(--text);
  resize:none;min-height:48px;max-height:180px;font-size:17px;line-height:1.5;padding:6px 6px 4px
}
#messageInput::placeholder{color:var(--muted)}
.composer-tools{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tools-left{display:flex;align-items:center;gap:8px}
.circle-tool{
  width:38px;height:38px;border-radius:999px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:19px
}
.send-btn{
  width:42px;height:42px;border:none;border-radius:999px;background:#e5e7eb;color:#94a3b8;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer
}
.send-btn:not(:disabled){background:#34a853;color:#fff}
.send-btn:disabled{cursor:not-allowed}

@media (min-width: 980px){
  .sidebar{transform:none;position:sticky;top:0;height:100vh;box-shadow:none}
  .sidebar-backdrop{display:none}
  .main-panel{margin-left:0}
  .mobile-header{padding-right:8px}
  .header-title{font-size:20px}
  .welcome-logo{width:60px;height:60px}
  .welcome-card{max-width:850px;margin:0 auto}
  .messages,.attached-files-bar{max-width:850px;margin:0 auto;width:100%}
  .chat-area{padding:16px 18px 0}
  .composer-form{max-width:850px;margin:0 auto}
  #toggleSidebarBtn,#closeSidebarBtn{display:none}
}

.quick-link-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}
.quick-link-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  background:var(--chip);
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
}
.quick-link-item:hover{
  outline:1px solid rgba(52,168,83,.35);
}

.sidebar-ad-box{
  margin-top:12px;
  padding:10px;
  border-radius:16px;
  background:var(--chip);
  overflow:hidden;
}
.sidebar-ad-box img,
.sidebar-ad-box iframe{
  max-width:100%;
  border-radius:12px;
}
.sidebar-ad-box a{
  color:var(--text);
  text-decoration:none;
}

.legal-note{
  max-width:850px;
  margin:8px auto 0;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  padding:0 10px;
}
.legal-note a{
  color:var(--text);
  font-weight:700;
  text-decoration:none;
}
.legal-note a:hover{
  text-decoration:underline;
}
@media(max-width:640px){
  .legal-note{
    font-size:11px;
    margin-top:7px;
    padding-bottom:2px;
  }
}

.send-btn{
  width:44px;
  height:44px;
  border:none;
  border-radius:14px;
  background:#d9dee7;
  color:#2563eb;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, opacity .18s ease;
}
.send-btn:not(:disabled){
  background:#d9dee7;
  color:#2563eb;
}
.send-btn:hover:not(:disabled){
  transform:translateY(-1px);
  background:#cfd7e6;
}
.send-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.send-icon{
  width:25px;
  height:25px;
  transform:rotate(-8deg);
}
.send-btn.is-loading .send-icon{
  animation:agiSendPulse .85s ease-in-out infinite alternate;
}
@keyframes agiSendPulse{
  from{opacity:.45;transform:rotate(-8deg) translateY(0)}
  to{opacity:1;transform:rotate(-8deg) translateY(-2px)}
}

/* Send button: dark blue circular up arrow */
.send-btn{
  width:48px !important;
  height:48px !important;
  border:none !important;
  border-radius:999px !important;
  background:#1d4ed8 !important;
  color:#ffffff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  cursor:pointer !important;
  box-shadow:0 8px 20px rgba(29,78,216,.22) !important;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease !important;
}
.send-btn:not(:disabled){
  background:#1d4ed8 !important;
  color:#ffffff !important;
}
.send-btn:hover:not(:disabled){
  transform:translateY(-1px) !important;
  background:#1e40af !important;
  box-shadow:0 12px 26px rgba(29,78,216,.32) !important;
}
.send-btn:active:not(:disabled){
  transform:translateY(0) scale(.96) !important;
}
.send-btn:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
  background:#94a3b8 !important;
  color:#ffffff !important;
}
.send-icon{
  width:30px !important;
  height:30px !important;
  transform:none !important;
}
.send-btn.is-loading .send-icon{
  animation:agiUpSendPulse .75s ease-in-out infinite alternate !important;
}
@keyframes agiUpSendPulse{
  from{opacity:.55;transform:translateY(2px) scale(.96)}
  to{opacity:1;transform:translateY(-2px) scale(1)}
}

/* Final send button: paper-plane icon, tooltip via title="Gửi" */
.send-btn{
  width:44px !important;
  height:44px !important;
  border:none !important;
  border-radius:14px !important;
  background:#d9dee7 !important;
  color:#2563eb !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:transform .18s ease, background .18s ease, opacity .18s ease !important;
}
.send-btn:not(:disabled){
  background:#d9dee7 !important;
  color:#2563eb !important;
}
.send-btn:hover:not(:disabled){
  transform:translateY(-1px) !important;
  background:#cfd7e6 !important;
}
.send-btn:active:not(:disabled){
  transform:translateY(0) scale(.96) !important;
}
.send-btn:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
  background:#e5e7eb !important;
  color:#94a3b8 !important;
}
.send-icon{
  width:26px !important;
  height:26px !important;
  transform:rotate(-8deg) !important;
}
.send-btn.is-loading .send-icon{
  animation:agiPaperSendPulse .75s ease-in-out infinite alternate !important;
}
@keyframes agiPaperSendPulse{
  from{opacity:.48;transform:rotate(-8deg) translateY(0) scale(.96)}
  to{opacity:1;transform:rotate(-8deg) translateY(-2px) scale(1)}
}

/* Final send button: original-style up arrow, grey circle + blue arrow */
.send-btn{
  width:44px !important;
  height:44px !important;
  border:none !important;
  border-radius:14px !important;
  background:#e5e7eb !important;
  color:#2563eb !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:transform .18s ease, background .18s ease, opacity .18s ease !important;
}
.send-btn:not(:disabled){
  background:#d9dee7 !important;
  color:#2563eb !important;
}
.send-btn:hover:not(:disabled){
  transform:translateY(-1px) !important;
  background:#cfd7e6 !important;
}
.send-btn:active:not(:disabled){
  transform:translateY(0) scale(.96) !important;
}
.send-btn:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
  background:#e5e7eb !important;
  color:#94a3b8 !important;
}
.send-icon{
  width:29px !important;
  height:29px !important;
  transform:none !important;
}
.send-btn.is-loading .send-icon{
  animation:agiUpArrowPulse .75s ease-in-out infinite alternate !important;
}
@keyframes agiUpArrowPulse{
  from{opacity:.45;transform:translateY(2px) scale(.95)}
  to{opacity:1;transform:translateY(-2px) scale(1)}
}

/* Final send button: green circle + white arrow like mobile screenshot */
.send-btn{
  width:50px !important;
  height:50px !important;
  min-width:50px !important;
  border:none !important;
  border-radius:999px !important;
  background:#2fb34a !important;
  color:#ffffff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  cursor:pointer !important;
  box-shadow:0 8px 20px rgba(47,179,74,.20) !important;
  transition:transform .18s ease, background .18s ease, opacity .18s ease, box-shadow .18s ease !important;
}
.send-btn:not(:disabled){
  background:#2fb34a !important;
  color:#ffffff !important;
}
.send-btn:hover:not(:disabled){
  transform:translateY(-1px) !important;
  background:#289a3f !important;
  box-shadow:0 12px 26px rgba(47,179,74,.28) !important;
}
.send-btn:active:not(:disabled){
  transform:translateY(0) scale(.96) !important;
}
.send-btn:disabled{
  opacity:.58 !important;
  cursor:not-allowed !important;
  background:#9dd7aa !important;
  color:#ffffff !important;
  box-shadow:none !important;
}
.send-icon{
  width:24px !important;
  height:24px !important;
  transform:none !important;
}
.send-btn.is-loading .send-icon{
  animation:agiSendArrowPulse .72s ease-in-out infinite alternate !important;
}
@keyframes agiSendArrowPulse{
  from{opacity:.52;transform:translateX(-1px) scale(.95)}
  to{opacity:1;transform:translateX(1px) scale(1)}
}