*{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}

.answer-actions{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.copy-answer-btn{
  border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;
  padding:7px 12px;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.04)
}
.copy-answer-btn:hover{background:var(--chip)}
.copy-answer-btn.copied{color:#16a34a;border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.08)}
.theme-dark .copy-answer-btn{background:#111827;color:#f8fafc;border-color:#334155}
.theme-dark .copy-answer-btn:hover{background:#172033}
.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)}
}

/* Link tab panel */
.link-panel{
  flex:1;
  padding:14px;
  overflow:auto;
}
.link-panel-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:22px;
  padding:16px;
  box-shadow:var(--shadow);
}
.link-panel-title{
  font-weight:800;
  font-size:18px;
  margin-bottom:12px;
}
.link-panel-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.link-panel-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 14px;
  border-radius:16px;
  background:var(--chip);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
}
.link-panel-item:hover{
  outline:1px solid rgba(52,168,83,.35);
}
.link-panel-empty{
  color:var(--muted);
  padding:18px 0;
}
.tab-row{
  gap:30px !important;
}
@media(min-width:980px){
  .link-panel{
    max-width:850px;
    width:100%;
    margin:0 auto;
  }
}

/* Many links support */
.link-panel-grid{
  max-height:calc(100vh - 220px);
  overflow:auto;
  padding-right:2px;
}
.quick-link-list{
  max-height:360px;
  overflow:auto;
  padding-right:2px;
}

/* Media video tab */
.media-panel{
  flex:1;
  padding:14px;
  overflow:auto;
}
.media-panel-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:22px;
  padding:16px;
  box-shadow:var(--shadow);
}
.media-panel-title{
  font-weight:800;
  font-size:18px;
  margin-bottom:12px;
}
.media-video-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  max-height:calc(100vh - 220px);
  overflow:auto;
  padding-right:2px;
}
.media-video-item{
  background:var(--chip);
  border-radius:18px;
  padding:12px;
}
.media-video-title{
  font-weight:800;
  margin-bottom:10px;
}
.media-video-frame{
  position:relative;
  width:100%;
  padding-top:56.25%;
  overflow:hidden;
  border-radius:14px;
  background:#000;
}
.media-video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.media-empty{
  color:var(--muted);
  padding:18px 0;
}
@media(min-width:980px){
  .media-panel{
    max-width:850px;
    width:100%;
    margin:0 auto;
  }
  .media-video-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Clean AI markdown rendering */
.bubble .ai-md-heading{
  margin:14px 0 8px;
  font-size:18px;
  line-height:1.35;
  font-weight:800;
  color:var(--text);
}
.bubble .ai-md-heading:first-child{
  margin-top:0;
}
.bubble .ai-md-p{
  margin:0 0 10px;
}
.bubble .ai-md-p:last-child{
  margin-bottom:0;
}
.bubble .ai-md-list{
  margin:8px 0 12px 20px;
  padding:0;
}
.bubble .ai-md-list li{
  margin:5px 0;
  padding-left:4px;
}
.bubble strong{
  font-weight:800;
}
.bubble code{
  background:rgba(15,23,42,.08);
  padding:2px 5px;
  border-radius:6px;
  font-size:.92em;
}
.theme-dark .bubble code{
  background:rgba(255,255,255,.12);
}

/* Upload status */
.upload-status{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--chip);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:999px;
  padding:9px 13px;
  font-size:13px;
  font-weight:700;
  max-width:100%;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}
.upload-status.done{
  background:#e9fbeF;
  color:#157a33;
  border-color:#c8f1d3;
}
.upload-status.error{
  background:#fff0f0;
  color:#b42318;
  border-color:#ffd2d2;
}
.upload-spinner{
  width:15px;
  height:15px;
  border-radius:999px;
  border:2px solid rgba(37,99,235,.22);
  border-top-color:#2563eb;
  animation:agiUploadSpin .75s linear infinite;
  flex:0 0 15px;
}
@keyframes agiUploadSpin{
  to{transform:rotate(360deg)}
}
.theme-dark .upload-status.done{
  background:rgba(34,197,94,.15);
  color:#bbf7d0;
  border-color:rgba(34,197,94,.28);
}
.theme-dark .upload-status.error{
  background:rgba(239,68,68,.14);
  color:#fecaca;
  border-color:rgba(239,68,68,.28);
}

/* Better attach-file icon */
.attach-tool{
  color:#64748b !important;
  background:#f1f5f9 !important;
  transition:background .18s ease, color .18s ease, transform .18s ease !important;
}
.attach-tool:hover{
  color:#2563eb !important;
  background:#eaf1ff !important;
  transform:translateY(-1px);
}
.attach-icon{
  width:23px;
  height:23px;
  display:block;
}
.theme-dark .attach-tool{
  color:#cbd5e1 !important;
  background:rgba(255,255,255,.08) !important;
}
.theme-dark .attach-tool:hover{
  color:#93c5fd !important;
  background:rgba(37,99,235,.22) !important;
}

/* Voice/microphone input */
.mic-tool{
  color:#64748b !important;
  background:#f1f5f9 !important;
  transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.mic-tool:hover{
  color:#7c3aed !important;
  background:#f2eefe !important;
  transform:translateY(-1px);
}
.mic-icon{
  width:22px;
  height:22px;
  display:block;
}
.mic-tool.is-listening{
  color:#ffffff !important;
  background:#ef4444 !important;
  box-shadow:0 0 0 6px rgba(239,68,68,.12) !important;
  animation:agiMicPulse .85s ease-in-out infinite alternate;
}
.mic-tool.is-disabled{
  opacity:.45;
  cursor:not-allowed;
}
@keyframes agiMicPulse{
  from{transform:scale(.98)}
  to{transform:scale(1.06)}
}
.theme-dark .mic-tool{
  color:#cbd5e1 !important;
  background:rgba(255,255,255,.08) !important;
}
.theme-dark .mic-tool:hover{
  color:#c4b5fd !important;
  background:rgba(124,58,237,.22) !important;
}
.theme-dark .mic-tool.is-listening{
  color:#ffffff !important;
  background:#ef4444 !important;
}

.mic-tool.is-processing{
  color:#ffffff !important;
  background:#2563eb !important;
  box-shadow:0 0 0 6px rgba(37,99,235,.12) !important;
  animation:agiMicProcessing .8s linear infinite;
}
@keyframes agiMicProcessing{
  from{transform:rotate(0deg) scale(1)}
  to{transform:rotate(360deg) scale(1)}
}
.theme-dark .mic-tool.is-processing{
  color:#ffffff !important;
  background:#2563eb !important;
}

.mic-tool.is-listening::after{
  content:'';
  position:absolute;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#fff;
  right:5px;
  top:5px;
}
.circle-tool{
  position:relative;
}

/* Voice live recording UI */
.mic-live-box{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(52,168,83,.08);
  border:1px solid rgba(52,168,83,.18);
  border-radius:18px;
  padding:10px 12px;
  margin-bottom:8px;
}
.mic-live-cancel{
  width:34px;
  height:34px;
  border:none;
  border-radius:999px;
  background:#ffffff;
  color:#334155;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.mic-wave{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:90px;
  flex:1;
}
.mic-wave span{
  display:block;
  width:4px;
  height:10px;
  border-radius:999px;
  background:#34a853;
  animation:agiVoiceBar 720ms ease-in-out infinite alternate;
}
.mic-wave span:nth-child(2){animation-delay:100ms;height:16px}
.mic-wave span:nth-child(3){animation-delay:200ms;height:22px}
.mic-wave span:nth-child(4){animation-delay:300ms;height:14px}
.mic-wave span:nth-child(5){animation-delay:400ms;height:18px}
.mic-live-text{
  flex:2;
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@keyframes agiVoiceBar{
  from{transform:scaleY(.45);opacity:.55}
  to{transform:scaleY(1.25);opacity:1}
}
.theme-dark .mic-live-box{
  background:rgba(52,168,83,.14);
  border-color:rgba(52,168,83,.28);
}
.theme-dark .mic-live-cancel{
  background:rgba(255,255,255,.10);
  color:#fff;
}
@media(max-width:640px){
  .mic-live-box{
    gap:8px;
    padding:9px;
  }
  .mic-wave{
    min-width:70px;
  }
  .mic-live-text{
    font-size:12px;
  }
}

/* Final mobile mic visibility improvement */
.mic-tool{
  color:#ffffff !important;
  background:#7c3aed !important;
  box-shadow:0 8px 18px rgba(124,58,237,.20) !important;
}
.mic-tool:hover{
  color:#ffffff !important;
  background:#6d28d9 !important;
}
.mic-icon{
  width:24px !important;
  height:24px !important;
}
@media(max-width:640px){
  .circle-tool{
    width:44px !important;
    height:44px !important;
    flex:0 0 44px;
  }
  .attach-tool{
    background:#eef2f7 !important;
    color:#475569 !important;
  }
  .mic-tool{
    background:#7c3aed !important;
    color:#fff !important;
  }
  .mic-icon{
    width:25px !important;
    height:25px !important;
  }
}
.theme-dark .mic-tool{
  background:#7c3aed !important;
  color:#ffffff !important;
}
.theme-dark .mic-tool:hover{
  background:#6d28d9 !important;
}
.mic-tool.is-listening{
  background:#ef4444 !important;
  color:#fff !important;
}
.mic-tool.is-processing{
  background:#2563eb !important;
  color:#fff !important;
}

/* Final stable mic style: default common app style */
.mic-tool{
  background:#eef2f7 !important;
  color:#475569 !important;
  box-shadow:none !important;
}
.mic-tool:hover{
  background:#e2e8f0 !important;
  color:#111827 !important;
}
@media(max-width:640px){
  .mic-tool{
    background:#eef2f7 !important;
    color:#475569 !important;
    box-shadow:none !important;
  }
  .mic-tool:hover{
    background:#e2e8f0 !important;
    color:#111827 !important;
  }
}
.theme-dark .mic-tool{
  background:rgba(255,255,255,.08) !important;
  color:#cbd5e1 !important;
}
.theme-dark .mic-tool:hover{
  background:rgba(255,255,255,.14) !important;
  color:#ffffff !important;
}
.mic-tool.is-listening{
  background:#ef4444 !important;
  color:#ffffff !important;
  box-shadow:0 0 0 6px rgba(239,68,68,.12) !important;
}
.mic-tool.is-processing{
  background:#2563eb !important;
  color:#ffffff !important;
  box-shadow:0 0 0 6px rgba(37,99,235,.12) !important;
}


/* Chat AGI V4 - Key Free / Key Pro / Video gate */
.key-link-zone{
  margin:12px 0 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.key-status{
  padding:12px 14px;
  border:1px solid var(--border);
  background:var(--chip);
  border-radius:16px;
  font-weight:800;
  color:var(--text);
}
.key-mini-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.chat-key-card,.chat-video-card{
  padding:14px;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.chat-key-title{
  font-size:17px;
  font-weight:900;
  margin-bottom:6px;
}
.chat-key-card p,.chat-video-card p{
  margin:0 0 10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.chat-key-row{
  display:flex;
  gap:8px;
}
.chat-key-row input{
  flex:1;
  min-width:0;
  border:1px solid var(--border);
  background:var(--input);
  color:var(--text);
  border-radius:13px;
  padding:11px 12px;
  outline:none;
}
.chat-key-row button,.chat-video-actions button{
  border:0;
  border-radius:13px;
  background:var(--accent);
  color:#fff;
  font-weight:800;
  padding:0 14px;
  cursor:pointer;
}
.chat-key-note{
  margin-top:8px;
  font-size:13px;
  color:var(--muted);
  min-height:20px;
}
.chat-key-note.ok{
  color:#16a34a;
  font-weight:800;
}
.chat-key-note a{
  color:var(--accent);
  text-decoration:none;
  font-weight:800;
}
.chat-video-frame{
  overflow:hidden;
  border-radius:14px;
  background:#000;
}
.chat-video-frame iframe{
  width:100%;
  min-height:260px;
  border:0;
  display:block;
}
.chat-video-actions{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.chat-video-actions span{
  color:var(--muted);
  font-size:13px;
}
@media(max-width:720px){
  .key-mini-grid{grid-template-columns:1fr}
  .chat-key-row{flex-direction:column}
  .chat-key-row button{padding:11px 14px}
}

/* Chat AGI V5 - separate Key / Support tabs + modal video */
.key-panel,.support-panel{
  padding:18px;
  min-height:calc(100vh - 120px);
}
.key-cost-note{
  color:var(--muted);
  font-size:13px;
  margin-top:-4px;
}
.support-content{
  line-height:1.6;
}
.watch-modal{
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(2,6,23,.62);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.watch-box{
  width:min(760px,96vw);
  max-height:92vh;
  overflow:auto;
  border-radius:24px;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:0 24px 80px rgba(2,6,23,.32);
  padding:20px;
}
.watch-box h2{margin:0 0 8px;font-size:24px}
.watch-box p{margin:0 0 14px;color:var(--muted)}
.watch-video{
  overflow:hidden;
  border-radius:18px;
  background:#000;
}
.watch-video iframe{
  width:100%;
  min-height:360px;
  border:0;
  display:block;
}
.watch-count{
  margin-top:12px;
  font-weight:800;
  color:var(--accent);
}
.watch-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.smallbtn{
  border:0;
  border-radius:14px;
  background:var(--accent);
  color:#fff;
  font-weight:800;
  padding:11px 16px;
  cursor:pointer;
}
.smallbtn.ghost{
  background:var(--chip);
  color:var(--text);
}
.smallbtn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
@media(max-width:720px){
  .key-panel,.support-panel{padding:12px}
  .watch-video iframe{min-height:220px}
  .watch-box{border-radius:18px;padding:15px}
  .watch-box h2{font-size:20px}
}


/* Chat AGI V9 - video timer only while playing + masked key */
.chat-key-row input.key-masked{
  background:var(--chip);
  color:var(--muted);
  font-weight:800;
  letter-spacing:1px;
}
#chatWatchYtPlayer,
#chatWatchYtPlayer iframe{
  width:100%;
  min-height:360px;
  border:0;
  display:block;
}
.video-fallback{
  padding:20px;
  color:#fff;
  text-align:center;
}
@media(max-width:720px){
  #chatWatchYtPlayer,
  #chatWatchYtPlayer iframe{
    min-height:220px;
  }
}


/* PWA install buttons */
.agi-install-app-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.install-app-row{
  display:flex;
  justify-content:center;
  margin:14px 0 4px;
}
.install-app-main{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:999px;
  padding:12px 18px;
  background:linear-gradient(135deg,var(--accent),var(--primary));
  color:#111827;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.install-app-main:hover{
  transform:translateY(-1px);
}
@media (max-width: 520px){
  .install-app-main{width:100%;}
}


.key-clear-btn{
  background:rgba(255,255,255,.08)!important;
  color:inherit!important;
  border:1px solid rgba(148,163,184,.45)!important;
  box-shadow:none!important;
}
.key-clear-btn:hover{
  background:rgba(148,163,184,.16)!important;
}
@media(max-width:720px){
  .chat-key-row{gap:8px}
  .chat-key-row .key-clear-btn{width:100%}
}


/* Chat AGI Pro answer formatting */
.ai-table-wrap{overflow:auto;margin:12px 0;border:1px solid rgba(15,23,42,.12);border-radius:14px;background:rgba(255,255,255,.65)}
.ai-table{width:100%;border-collapse:collapse;font-size:.95em}
.ai-table th,.ai-table td{padding:10px 12px;border-bottom:1px solid rgba(15,23,42,.08);text-align:left;vertical-align:top}
.ai-table th{font-weight:800;background:rgba(255,255,255,.55)}
.ai-code{white-space:pre-wrap;word-break:break-word;background:#0f172a;color:#e5e7eb;border-radius:14px;padding:14px;margin:12px 0;overflow:auto;font-size:.92em;line-height:1.55}
.ai-md-ol{padding-left:1.35rem}
.bubble .ai-md-heading{margin:14px 0 8px;line-height:1.3}
.bubble .ai-md-p{margin:8px 0;line-height:1.7}
.bubble .ai-md-list{margin:8px 0 12px;padding-left:1.4rem;line-height:1.75}
.bubble .ai-md-list li{margin:4px 0}
.copy-answer-btn{font-weight:700}
.theme-dark .ai-table-wrap{border-color:rgba(255,255,255,.12);background:rgba(15,23,42,.45)}
.theme-dark .ai-table th{background:rgba(255,255,255,.06)}
.theme-dark .ai-table th,.theme-dark .ai-table td{border-bottom-color:rgba(255,255,255,.1)}


.web-search-tool{font-weight:800;font-size:16px;position:relative}
.web-search-tool.active{background:linear-gradient(135deg,#dbeafe,#bfdbfe)!important;color:#1d4ed8!important;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.web-search-tool.active::after{content:'';position:absolute;right:6px;top:6px;width:7px;height:7px;background:#22c55e;border-radius:50%;border:1px solid #fff}
.source-list{display:flex;flex-direction:column;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(148,163,184,.25)}
.source-list strong{font-size:12px;color:var(--muted)}
.source-list a{font-size:12px;line-height:1.35;color:var(--primary);word-break:break-word}
.message-meta .source-list{width:100%;flex-basis:100%}

/* ChatGPT-like source cards */
.message-meta .source-card-list{
  width:100%;
  flex-basis:100%;
  display:block;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(148,163,184,.22);
}
.source-card-list .source-label{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  margin-bottom:8px;
}
.source-cards{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.source-card{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:150px;
  max-width:250px;
  padding:8px 10px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--text);
  text-decoration:none;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.source-card:hover{
  transform:translateY(-1px);
  border-color:rgba(37,99,235,.45);
  text-decoration:none;
  background:#fff;
}
.source-favicon{
  width:24px;
  height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,.3);
  overflow:hidden;
  font-size:11px;
  font-weight:800;
}
.source-favicon img{
  width:16px;
  height:16px;
  object-fit:contain;
}
.source-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.source-title{
  display:block;
  font-size:12px;
  font-weight:800;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.source-host{
  display:block;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.theme-dark .source-card{
  background:rgba(15,23,42,.72);
  border-color:rgba(148,163,184,.28);
}
.theme-dark .source-card:hover{
  background:rgba(30,41,59,.95);
  border-color:rgba(96,165,250,.45);
}
.theme-dark .source-favicon{
  background:rgba(255,255,255,.08);
}
@media(max-width:640px){
  .source-card{max-width:100%;min-width:calc(50% - 6px);padding:8px 9px}
  .source-title{font-size:11.5px}
}


/* V9: hide web sources by default, show only when user opens "Xem nguồn" */
.source-toggle-wrap{
  width:100%;
  flex-basis:100%;
  margin-top:10px;
}
.source-toggle-wrap[open] .source-toggle-btn{
  background:rgba(37,99,235,.08);
  border-color:rgba(37,99,235,.25);
}
.source-toggle-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  list-style:none;
  user-select:none;
  border:1px solid rgba(148,163,184,.35);
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  background:rgba(255,255,255,.72);
  box-shadow:0 4px 14px rgba(15,23,42,.05);
}
.source-toggle-btn::-webkit-details-marker{display:none}
.source-toggle-btn:hover{
  color:var(--primary);
  border-color:rgba(37,99,235,.35);
  background:#fff;
}
.web-used-pill{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(148,163,184,.28);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  color:var(--muted);
  background:rgba(255,255,255,.65);
}
.source-toggle-wrap .source-card-list{
  margin-top:8px;
  padding-top:8px;
}
.theme-dark .source-toggle-btn,
.theme-dark .web-used-pill{
  background:rgba(15,23,42,.72);
  border-color:rgba(148,163,184,.25);
}
.theme-dark .source-toggle-btn:hover{
  background:rgba(30,41,59,.95);
  color:#93c5fd;
}

/* v10: Ẩn nút web search ở ô chat; Web Search chạy ngầm theo admin */
.web-search-tool{display:none!important}


/* V17 Source Consensus Pro: mobile table readability */
.ai-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ai-table{min-width:560px}
@media(max-width:640px){
  .ai-table{min-width:520px;font-size:.88em}
  .ai-table th,.ai-table td{padding:9px 10px;white-space:normal;word-break:normal}
  .bubble .ai-md-p,.bubble .ai-md-list{line-height:1.65}
}


/* Auto link trong câu trả lời AI */
.chat-link{
  color:#2563eb;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  word-break:break-word;
}
.chat-link:hover{color:#1d4ed8;}


/* V22: Popup cài Chat AGI sau 3 câu */
.pwa-gate-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(8px);
}
.pwa-gate-box{
  width:min(560px,100%);
  border-radius:28px;
  background:var(--panel,#fff);
  color:var(--text,#0f172a);
  border:1px solid rgba(148,163,184,.28);
  box-shadow:0 24px 80px rgba(15,23,42,.25);
  padding:26px;
  position:relative;
  text-align:center;
}
.pwa-gate-close{
  position:absolute;
  right:14px;
  top:14px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.72);
  color:var(--text,#0f172a);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.pwa-gate-icon{
  width:64px;
  height:64px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(135deg,#2563eb,#22c55e);
  box-shadow:0 14px 34px rgba(37,99,235,.22);
  font-size:30px;
}
.pwa-gate-box h2{
  margin:0 0 10px;
  font-size:24px;
  line-height:1.25;
  letter-spacing:-.02em;
}
.pwa-gate-box p{
  margin:0 auto 14px;
  max-width:470px;
  line-height:1.65;
  color:var(--muted,#64748b);
}
.pwa-gate-benefits{
  display:grid;
  gap:8px;
  margin:16px auto 20px;
  max-width:420px;
  text-align:left;
}
.pwa-gate-benefits span{
  display:block;
  border:1px solid rgba(148,163,184,.22);
  border-radius:16px;
  padding:10px 12px;
  background:rgba(248,250,252,.78);
  font-weight:700;
  font-size:14px;
}
.pwa-gate-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.pwa-gate-install,
.pwa-gate-done{
  border:0;
  border-radius:999px;
  padding:13px 18px;
  cursor:pointer;
  font-weight:900;
  font-size:15px;
}
.pwa-gate-install{
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#22c55e);
  box-shadow:0 14px 34px rgba(37,99,235,.20);
}
.pwa-gate-install:disabled{opacity:.72;cursor:wait}
.pwa-gate-done{
  color:var(--text,#0f172a);
  background:rgba(148,163,184,.14);
  border:1px solid rgba(148,163,184,.32);
}
.pwa-gate-help{
  display:none;
  margin-top:14px;
  border-radius:16px;
  padding:12px;
  font-size:13px;
  line-height:1.55;
  color:#92400e;
  background:#fffbeb;
  border:1px solid #fde68a;
}
.pwa-gate-help.show{display:block}
.theme-dark .pwa-gate-box{background:#0f172a;border-color:rgba(148,163,184,.22)}
.theme-dark .pwa-gate-close{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.22);color:#e5e7eb}
.theme-dark .pwa-gate-benefits span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)}
.theme-dark .pwa-gate-done{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#e5e7eb}
@media(max-width:520px){
  .pwa-gate-box{padding:22px 16px;border-radius:24px}
  .pwa-gate-box h2{font-size:21px}
  .pwa-gate-actions{display:grid;grid-template-columns:1fr}
  .pwa-gate-install,.pwa-gate-done{width:100%}
}

/* V24: câu hỏi đề xuất dưới câu trả lời */
.answer-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.answer-suggestion-btn{
  border:1px solid rgba(37,99,235,.18);
  background:rgba(37,99,235,.06);
  color:#1d4ed8;
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  cursor:pointer;
  max-width:100%;
  text-align:left;
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
}
.answer-suggestion-btn:hover{
  background:rgba(37,99,235,.12);
  border-color:rgba(37,99,235,.32);
  transform:translateY(-1px);
}
.theme-dark .answer-suggestion-btn{
  background:rgba(96,165,250,.12);
  border-color:rgba(96,165,250,.25);
  color:#bfdbfe;
}
@media(max-width:640px){
  .answer-suggestions{display:grid;grid-template-columns:1fr;gap:7px}
  .answer-suggestion-btn{width:100%;border-radius:16px;padding:10px 12px;font-size:13px}
}




/* V42: hướng dẫn sau khi cài PWA trên Android/iPhone/Desktop */
.chat-agi-install-result-modal .pwa-gate-box{max-width:460px}
.chat-agi-install-steps{margin:14px 0 4px;padding:14px;border-radius:16px;background:#fff7ed;border:1px solid rgba(249,115,22,.22);color:#7c2d12;text-align:left;line-height:1.55}
.chat-agi-install-steps ol{margin:8px 0 6px 20px;padding:0}
.chat-agi-install-steps li{margin:4px 0}
.chat-agi-install-steps small{display:block;color:#9a3412;margin-top:8px}
.theme-dark .chat-agi-install-steps{background:rgba(249,115,22,.10);border-color:rgba(249,115,22,.22);color:#fed7aa}
.theme-dark .chat-agi-install-steps small{color:#fdba74}

/* V46: Ghi chú cài app chia rõ Android / Xiaomi / iPhone, nút video xuống dưới */
.pwa-guide-text{
  display:grid;
  gap:10px;
  width:100%;
  margin:0 auto;
  line-height:1.6;
  text-align:left;
}
.pwa-guide-section{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(245,158,11,.18);
}
.pwa-guide-section-title{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
  font-weight:900;
  color:#78350f;
}
.pwa-guide-section-body{
  color:#92400e;
  font-weight:600;
}
.theme-dark .pwa-guide-section{
  background:rgba(255,255,255,.06);
  border-color:rgba(250,204,21,.18);
}
.theme-dark .pwa-guide-section-title{color:#fde68a}
.theme-dark .pwa-guide-section-body{color:#fdba74}
.pwa-guide-video-wrap{
  display:flex;
  width:100%;
  justify-content:center;
  align-items:center;
  margin-top:14px;
  clear:both;
}
.pwa-guide-video-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:fit-content;
  max-width:100%;
  padding:11px 18px;
  border-radius:999px;
  background:linear-gradient(135deg,#2563eb,#10b981);
  color:#fff !important;
  font-weight:800;
  text-decoration:none !important;
  line-height:1.25;
  box-shadow:0 8px 20px rgba(37,99,235,.18);
}
.pwa-guide-video-btn:hover{opacity:.94;transform:translateY(-1px)}
@media(max-width:520px){
  .pwa-guide-section{padding:9px 10px;border-radius:12px}
  .pwa-guide-section-title{font-size:13px}
  .pwa-guide-section-body{font-size:12px}
  .pwa-guide-video-btn{width:100%;font-size:14px;padding:11px 12px}
}


/* V44: popup hướng dẫn cài thủ công có link video, thay alert mặc định */
.chat-agi-manual-install-modal .pwa-gate-box{max-width:520px}
.chat-agi-manual-install-help{white-space:normal;text-align:left}
.theme-dark .chat-agi-manual-install-help{background:rgba(250,204,21,.08);border-color:rgba(250,204,21,.22)}


/* V48: Popup cài app gọn hơn, vừa màn hình desktop/mobile */
.pwa-gate-modal{
  padding:12px;
  align-items:center;
  overflow:hidden;
}
.pwa-gate-box{
  width:min(520px, calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:20px 24px;
  border-radius:24px;
  overscroll-behavior:contain;
}
.pwa-gate-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  margin-bottom:10px;
  font-size:26px;
}
.pwa-gate-box h2{
  font-size:22px;
  margin-bottom:8px;
}
.pwa-gate-box p{
  max-width:430px;
  margin-bottom:12px;
  line-height:1.5;
  font-size:14px;
}
.pwa-gate-benefits{
  gap:7px;
  margin:12px auto 16px;
  max-width:390px;
}
.pwa-gate-benefits span{
  padding:8px 11px;
  border-radius:14px;
  font-size:13px;
}
.pwa-gate-actions{
  gap:9px;
  margin-bottom:10px;
}
.pwa-gate-install,
.pwa-gate-done{
  padding:11px 17px;
  font-size:14px;
}
.pwa-gate-help{
  margin-top:10px;
  padding:10px;
  border-radius:14px;
}
.pwa-guide-text{
  gap:8px;
  line-height:1.45;
}
.pwa-guide-section{
  padding:8px 10px;
  border-radius:12px;
}
.pwa-guide-section-title{
  margin-bottom:3px;
  font-size:13px;
}
.pwa-guide-section-body{
  font-size:12.5px;
  font-weight:600;
}
.pwa-guide-video-wrap{
  margin-top:10px;
}
.pwa-guide-video-btn{
  padding:10px 16px;
  font-size:13.5px;
}

@media (min-width: 760px){
  .pwa-guide-text{
    grid-template-columns:1fr 1fr;
  }
  .pwa-guide-section-android{
    grid-column:1 / -1;
  }
}

@media (max-width:520px){
  .pwa-gate-modal{
    align-items:flex-start;
    padding:8px;
  }
  .pwa-gate-box{
    width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
    padding:16px 14px;
    border-radius:22px;
  }
  .pwa-gate-close{
    right:10px;
    top:10px;
    width:32px;
    height:32px;
    font-size:22px;
  }
  .pwa-gate-icon{
    width:50px;
    height:50px;
    border-radius:16px;
    font-size:24px;
    margin-bottom:8px;
  }
  .pwa-gate-box h2{
    font-size:19px;
    line-height:1.22;
  }
  .pwa-gate-box p{
    font-size:13px;
    line-height:1.45;
    margin-bottom:10px;
  }
  .pwa-gate-benefits{
    margin:10px auto 12px;
  }
  .pwa-gate-benefits span{
    padding:8px 10px;
    font-size:12.5px;
    border-radius:13px;
  }
  .pwa-gate-actions{
    gap:8px;
  }
  .pwa-gate-install,
  .pwa-gate-done{
    padding:10px 12px;
    font-size:13.5px;
  }
  .pwa-guide-section-title{font-size:12.5px}
  .pwa-guide-section-body{font-size:11.8px;line-height:1.42}
  .pwa-guide-video-btn{font-size:13px;padding:10px 12px}
}

@media (max-height:700px){
  .pwa-gate-modal{align-items:flex-start;padding-top:8px;padding-bottom:8px}
  .pwa-gate-box{max-height:calc(100dvh - 16px);padding-top:14px;padding-bottom:14px}
  .pwa-gate-icon{width:46px;height:46px;font-size:22px;margin-bottom:6px}
  .pwa-gate-box h2{font-size:18px;margin-bottom:6px}
  .pwa-gate-box p{font-size:12.5px;line-height:1.35;margin-bottom:8px}
  .pwa-gate-benefits{gap:6px;margin:8px auto 10px}
  .pwa-gate-benefits span{padding:7px 9px;font-size:12px}
  .pwa-guide-section{padding:7px 9px}
  .pwa-guide-section-body{font-size:11.5px;line-height:1.35}
}

/* V49: Làm lại phần hướng dẫn cài app cho gọn và đẹp hơn */
.pwa-gate-box{
  width:min(500px, calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
}
.pwa-gate-help{
  width:100%;
  max-width:460px;
  margin:10px auto 0;
  padding:12px;
  border-radius:18px;
  background:linear-gradient(180deg,#fffdf3,#fffbeb);
  border:1px solid rgba(234,179,8,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.pwa-guide-text{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:9px;
  width:100%;
}
.pwa-guide-section{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(245,158,11,.24);
  box-sizing:border-box;
}
.pwa-guide-section-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 5px;
  font-size:13.5px;
  font-weight:900;
  color:#7c2d12;
}
.pwa-guide-section-body{
  font-size:12.8px;
  line-height:1.55;
  font-weight:600;
  color:#92400e;
}
.pwa-guide-video-wrap{
  margin-top:12px;
}
.pwa-guide-video-btn{
  padding:11px 17px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:900;
}
@media (min-width:760px){
  .pwa-guide-text{grid-template-columns:1fr !important;}
  .pwa-guide-section-android{grid-column:auto !important;}
}
@media (max-width:520px){
  .pwa-gate-help{
    max-width:100%;
    padding:10px;
    border-radius:16px;
  }
  .pwa-guide-section{
    padding:9px 10px;
    border-radius:13px;
  }
  .pwa-guide-section-title{font-size:12.8px;}
  .pwa-guide-section-body{font-size:12px;line-height:1.46;}
}
.theme-dark .pwa-gate-help{
  background:rgba(250,204,21,.08);
  border-color:rgba(250,204,21,.24);
}


/* V51: Làm rõ màu chữ mô tả popup cài app để dễ đọc hơn */
.pwa-gate-box .pwa-gate-desc{
  color:#1e293b !important;
  font-weight:700;
  line-height:1.55;
}
.theme-dark .pwa-gate-box .pwa-gate-desc{
  color:#e5e7eb !important;
}
.pwa-gate-box .pwa-gate-desc::selection{
  background:#bfdbfe;
  color:#0f172a;
}

/* V54: popup hướng dẫn thủ công cũng có nút Cài Chat AGI ngay như popup chính */
.chat-agi-manual-install-actions{
  margin:8px auto 10px;
}
.chat-agi-manual-ok-btn{
  width:100%;
  max-width:420px;
}
.chat-agi-guide-pulse{
  animation:chatAgiGuidePulse .85s ease;
}
@keyframes chatAgiGuidePulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
  50%{box-shadow:0 0 0 4px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.8)}
}
@media(max-width:520px){
  .chat-agi-manual-install-actions{
    margin:6px auto 8px;
  }
}

/* V55: Không để nút cài mobile bị hiểu nhầm là đã cài khi trình duyệt không cấp popup PWA */
.pwa-install-status-note{
  width:100%;
  max-width:460px;
  margin:0 auto 10px;
  padding:9px 12px;
  border-radius:14px;
  background:#eff6ff;
  border:1px solid rgba(37,99,235,.18);
  color:#1e3a8a;
  font-size:12.5px;
  line-height:1.45;
  font-weight:700;
  text-align:center;
}
.theme-dark .pwa-install-status-note{
  background:rgba(37,99,235,.14);
  border-color:rgba(147,197,253,.20);
  color:#bfdbfe;
}
@media(max-width:520px){
  .pwa-install-status-note{
    font-size:11.8px;
    padding:8px 10px;
    margin-bottom:8px;
  }
}


/* V57: tích hợp Audio + Photo vào tab riêng */
.integrated-tool-panel{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
}
.integrated-tool-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  padding:12px 14px;
  box-shadow:var(--shadow);
}
.integrated-tool-title{
  font-size:20px;
  line-height:1.2;
  font-weight:900;
  color:var(--text);
}
.integrated-tool-desc{
  margin-top:4px;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
}
.integrated-admin-link{
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(90deg,var(--accent),var(--primary));
  text-decoration:none;
}
.integrated-tool-frame-wrap{
  flex:1;
  min-height:620px;
  height:calc(100dvh - 170px);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.integrated-tool-frame{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#fff;
}
body.integrated-tool-tab-open .composer-wrap{
  display:none;
}
body.integrated-tool-tab-open .media-panel,
body.integrated-tool-tab-open .link-panel{
  padding-bottom:14px;
}
@media (max-width: 768px){
  .integrated-tool-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .integrated-admin-link{
    width:100%;
  }
  .integrated-tool-frame-wrap{
    min-height:calc(100dvh - 210px);
    height:calc(100dvh - 210px);
    border-radius:18px;
  }
}


/* V58: sửa Audio/Photo full khung trong Chat AGI, tránh bị bó chiều rộng/chiều cao */
body.integrated-tool-tab-open{
  overflow:hidden;
}
body.integrated-tool-tab-open .main-panel{
  min-height:100dvh;
}
body.integrated-tool-tab-open .media-panel,
body.integrated-tool-tab-open .link-panel{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:12px 16px 10px!important;
  overflow:hidden!important;
  flex:1 1 auto;
  min-height:0;
}
body.integrated-tool-tab-open .integrated-tool-panel{
  height:100%;
  min-height:0;
  gap:10px;
}
body.integrated-tool-tab-open .integrated-tool-head{
  flex:0 0 auto;
  border-radius:18px;
  padding:12px 16px;
}
body.integrated-tool-tab-open .integrated-tool-frame-wrap{
  flex:1 1 auto;
  min-height:360px;
  height:calc(100dvh - 215px);
  max-height:none;
  border-radius:18px;
  overflow:hidden;
}
body.integrated-tool-tab-open .integrated-tool-frame{
  width:100%;
  height:100%;
  display:block;
  border:0;
  overflow:auto;
}
@media(max-width:768px){
  body.integrated-tool-tab-open .media-panel,
  body.integrated-tool-tab-open .link-panel{
    padding:10px 8px 8px!important;
  }
  body.integrated-tool-tab-open .integrated-tool-title{
    font-size:18px;
  }
  body.integrated-tool-tab-open .integrated-tool-desc{
    font-size:12.5px;
  }
  body.integrated-tool-tab-open .integrated-tool-head{
    gap:8px;
    padding:10px 12px;
  }
  body.integrated-tool-tab-open .integrated-admin-link{
    padding:9px 12px;
    font-size:13px;
  }
  body.integrated-tool-tab-open .integrated-tool-frame-wrap{
    min-height:420px;
    height:calc(100dvh - 245px);
    border-radius:16px;
  }
}
@media(min-width:1200px){
  body.integrated-tool-tab-open .integrated-tool-frame-wrap{
    height:calc(100dvh - 202px);
  }
}


/* V59: bảo mật giao diện tích hợp Audio/Photo */
body.integrated-tool-tab-open .integrated-admin-link{display:none!important;}
body.integrated-tool-tab-open .integrated-tool-head{justify-content:flex-start!important;}
body.integrated-tool-tab-open .integrated-tool-desc strong{font-weight:inherit!important;color:inherit!important;}
body.integrated-tool-tab-open .integrated-tool-frame-wrap{background:#f6f8fc;}


/* V60: Key chung Chat/Audio/Photo + quota Photo gọn trên tiêu đề */
.tool-inline-quota{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:4px 10px;
  border-radius:999px;
  background:#eef7ff;
  color:#1455c0;
  font-size:13px;
  font-weight:800;
  vertical-align:middle;
}
.tool-inline-quota.is-error{background:#fff7ed;color:#9a3412}
.key-unified-panel{max-width:1180px;margin:0 auto}
.key-unified-note{color:#667085;margin:4px 0 16px;line-height:1.5}
.unified-key-stack{display:flex;flex-direction:column;gap:18px}
.unified-key-card{
  border:1px solid #dfe6f3;
  border-radius:22px;
  background:#fff;
  padding:18px;
  box-shadow:0 10px 30px rgba(15,23,42,.04);
}
.unified-key-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.unified-key-title{font-size:22px;font-weight:900;color:#101828}
.unified-key-sub{font-size:14px;color:#667085;margin-top:3px}
.key-module-frame{
  width:100%;
  border:0;
  border-radius:18px;
  background:#fff;
  display:block;
}
.key-module-frame-audio{height:560px}
.key-module-frame-photo{height:520px}
@media(max-width:768px){
  .tool-inline-quota{display:flex;margin:8px 0 0;width:max-content;max-width:100%;white-space:normal}
  .unified-key-card{padding:14px;border-radius:18px}
  .unified-key-title{font-size:19px}
  .key-module-frame-audio{height:620px}
  .key-module-frame-photo{height:600px}
}


/* V61: Key Audio/Photo dùng form gọn trong Chat, không nhúng cả ứng dụng vào tab Key */
.key-module-frame{display:none!important}
.unified-key-card-compact .module-key-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.unified-key-mini-status{flex:0 0 auto;border-radius:999px;padding:8px 12px;background:#f2f4f7;color:#475467;font-size:13px;font-weight:800;white-space:nowrap}
.unified-key-mini-status.is-ok{background:#ecfdf3;color:#027a48}
.module-key-card{box-shadow:none!important;background:#fbfcff!important}
.chat-key-note.key-note-ok{color:#027a48;font-weight:800}
.chat-key-note.key-note-error{color:#b42318;font-weight:800}
@media(max-width:768px){
  .unified-key-card-compact .module-key-mini-grid{grid-template-columns:1fr}
  .unified-key-head{align-items:flex-start;flex-direction:column}
  .unified-key-mini-status{white-space:normal}
}


/* V63: Photo quota đã chuyển vào dưới nút Tạo ảnh ngay trong module Photo */
body.integrated-tool-tab-open .integrated-tool-desc .tool-inline-quota{display:none!important}

/* V66: Audio/Photo embed gọn hơn + Support có video/link */
.integrated-tool-panel-audio-only .integrated-tool-frame-wrap,
.integrated-tool-panel-photo-only .integrated-tool-frame-wrap{
  margin-top:0!important;
}
.support-rich-panel{
  max-width:1100px;
  margin:0 auto;
}
.support-section-title{
  margin:18px 0 10px;
  font-size:18px;
  font-weight:900;
  color:var(--text);
}
.support-video-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.support-video-item{
  background:var(--chip);
  border:1px solid var(--border);
  border-radius:18px;
  padding:12px;
}
.support-video-title{
  font-weight:900;
  margin-bottom:10px;
}
.support-video-frame{
  position:relative;
  width:100%;
  padding-top:56.25%;
  overflow:hidden;
  border-radius:14px;
  background:#000;
}
.support-video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.support-link-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.support-link-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 14px;
  border-radius:16px;
  background:var(--chip);
  border:1px solid var(--border);
  color:var(--text);
  text-decoration:none;
}
.support-link-item:hover{
  outline:2px solid rgba(79,70,229,.18);
}
.support-link-item span{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(90deg,var(--accent),var(--primary));
  color:#fff;
  flex:0 0 auto;
}
.watch-actions button:disabled,
.watch-actions .smallbtn:disabled,
#confirmWatchBtn:disabled,
#chatWatchConfirmBtn:disabled{
  opacity:.45!important;
  filter:grayscale(.35);
  cursor:not-allowed!important;
  box-shadow:none!important;
}
@media(max-width:720px){
  .support-video-grid,.support-link-grid{grid-template-columns:1fr;}
}