/* ==========================================================================
   COMPONENTS — thẻ thương hiệu con, persona, chatbox, quiz, digital lab, bảng
   ========================================================================== */

/* ---- feature / sub-brand card ---- */
.brand-card{
  padding:var(--space-6); display:flex; flex-direction:column; gap:14px; height:100%;
  transition:transform var(--transition), box-shadow var(--transition);
}
.brand-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.brand-card .icon-tile{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--grad-brand); color:#fff; font-size:24px;
}
.brand-card .icon-tile.gold{ background:var(--grad-gold); color:#241505; }
.brand-card h3{ font-size:19px; }
.brand-card .tagline{ font-size:13.5px; font-weight:700; color:var(--brand-blue); margin-top:-8px; }
.brand-card ul{ display:flex; flex-direction:column; gap:9px; margin:4px 0; flex:1; }
.brand-card li{ display:flex; gap:9px; font-size:14px; color:var(--text-secondary); }
.brand-card li .icon{ color:var(--brand-emerald); margin-top:3px; flex-shrink:0; }

/* CTA cấp ba để lấp ô trống có chủ đích khi số lượng thẻ lẻ */
.brand-card.cta-fill{
  align-items:flex-start; justify-content:center; background:var(--grad-brand); color:#fff; border:none;
}
.brand-card.cta-fill h3{ color:#fff; }
.brand-card.cta-fill p{ color:rgba(255,255,255,.82); }

/* ---- persona card ---- */
.persona-card{ padding:var(--space-5); display:flex; flex-direction:column; gap:10px; height:100%; }
.persona-card .persona-top{ display:flex; align-items:center; gap:12px; }
.persona-card .icon-tile{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-surface-2); color:var(--brand-blue); flex-shrink:0;
}
.persona-card h4{ font-size:16.5px; margin-bottom:0; }
.persona-card .persona-sub{ font-size:12px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.persona-card ul{ display:flex; flex-direction:column; gap:7px; flex:1; margin:2px 0; }
.persona-card li{ display:flex; gap:8px; font-size:13.5px; color:var(--text-secondary); }
.persona-card li .icon{ color:var(--brand-blue); flex-shrink:0; margin-top:3px; font-size:13px; }

/* ---- pillar / principle list ---- */
.pillar-item{ display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--border-subtle); }
.pillar-item:first-child{ border-top:none; }
.pillar-num{
  width:30px; height:30px; border-radius:var(--radius-full); background:var(--grad-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;
}
.pillar-item h4{ font-size:15.5px; margin-bottom:4px; }
.pillar-item p{ font-size:13.5px; margin-bottom:0; }

/* ---- stat tile row ---- */
.stat-tile{ text-align:center; padding:var(--space-5); }
.stat-tile b{ display:block; font-family:var(--font-heading); font-size:30px; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-tile span{ font-size:13px; color:var(--text-muted); }

/* ---- tabs (đã sửa: cuộn ngang mượt thay vì tràn khỏi màn hình) ---- */
.tab-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:var(--space-5); }
.tab-btn{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--radius-full);
  border:1px solid var(--border-subtle); background:var(--bg-surface); color:var(--text-secondary); font-weight:600; font-size:13.5px;
  white-space:nowrap;
}
.tab-btn.active{ background:var(--grad-brand); color:#fff; border-color:transparent; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ---- chips (gợi ý ChatBox) ---- */
.chip-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.chip-btn{
  flex:0 0 auto; padding:8px 14px; border-radius:var(--radius-full); border:1px solid var(--border-subtle);
  background:var(--bg-surface-2); color:var(--text-secondary); font-size:13px; font-weight:600; white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.chip-btn:hover{ border-color:var(--brand-blue); color:var(--brand-blue); }

/* ---- chatbox ---- */
.chat-shell{ display:grid; grid-template-columns:320px 1fr; gap:var(--space-6); align-items:start; }
@media (max-width:900px){ .chat-shell{ grid-template-columns:1fr; } }
.chat-window{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-subtle); background:var(--bg-surface); }
.chat-window-head{
  display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  background:var(--bg-inverse); color:#fff;
}
.chat-window-head .who{ display:flex; align-items:center; gap:10px; font-weight:700; }
.chat-messages{ height:440px; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px; }
.chat-msg{ display:flex; gap:10px; max-width:88%; }
.chat-msg.user{ margin-left:auto; flex-direction:row-reverse; }
.chat-avatar{
  width:32px; height:32px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center;
  background:var(--bg-surface-2); color:var(--brand-blue); flex-shrink:0;
}
.chat-msg.user .chat-avatar{ background:var(--grad-brand); color:#fff; }
.chat-bubble{ background:var(--bg-surface-2); padding:12px 15px; border-radius:14px; font-size:14.5px; color:var(--text-primary); }
.chat-msg.user .chat-bubble{ background:var(--grad-brand); color:#fff; }
.chat-bubble .role-tag{
  display:inline-block; font-size:11px; font-weight:700; background:rgba(56,189,248,.15); color:var(--brand-sky);
  padding:2px 9px; border-radius:99px; margin-bottom:8px;
}
.chat-bubble .rec-list{ margin:8px 0 0; padding-left:0; }
.chat-bubble .rec-list li{ display:flex; gap:8px; margin-bottom:6px; font-size:13.8px; }
.chat-bubble .rec-list li .icon{ color:var(--brand-emerald); flex-shrink:0; margin-top:3px; }
.chat-bubble .msg-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.chat-input-row{ display:flex; gap:10px; padding:14px; border-top:1px solid var(--border-subtle); }
.chat-input-row input{ flex:1; }
.typing-dots{ display:flex; gap:4px; align-items:center; }
.typing-dots span{ width:6px; height:6px; border-radius:50%; background:var(--text-muted); animation:blink 1.2s infinite; }
.typing-dots span:nth-child(2){ animation-delay:.2s; }
.typing-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }

.step-rail{ display:flex; flex-direction:column; gap:0; }
.step-card{ display:flex; gap:12px; padding:14px 4px; opacity:.45; transition:opacity var(--transition); }
.step-card.active{ opacity:1; }
.step-card .step-dot{
  width:28px; height:28px; border-radius:50%; border:2px solid var(--border-strong); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; color:var(--text-muted);
}
.step-card.active .step-dot{ border-color:var(--brand-blue); background:var(--brand-blue); color:#fff; }
.step-card h5{ font-size:14px; margin-bottom:2px; }
.step-card p{ font-size:12.5px; margin-bottom:0; }

/* ---- diagnostic quiz ---- */
.quiz-shell{ max-width:760px; margin:0 auto; }
.quiz-progress-track{ height:8px; border-radius:99px; background:var(--bg-surface-2); overflow:hidden; margin-bottom:8px; }
.quiz-progress-fill{ height:100%; background:var(--grad-brand); border-radius:99px; transition:width .3s; }
.quiz-progress-label{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-muted); margin-bottom:var(--space-5); }
.quiz-card{ padding:var(--space-6); }
.quiz-category-tag{ font-size:12px; font-weight:700; color:var(--brand-gold); text-transform:uppercase; letter-spacing:.04em; }
.quiz-question{ font-size:20px; margin:10px 0 var(--space-5); }
.quiz-option{
  display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius-md);
  border:1px solid var(--border-subtle); margin-bottom:10px; transition:border-color var(--transition), background var(--transition);
}
.quiz-option:hover{ border-color:var(--brand-blue); }
.quiz-option.selected{ border-color:var(--brand-blue); background:rgba(29,78,216,.06); }
.quiz-option-radio{ width:18px; height:18px; border-radius:50%; border:2px solid var(--border-strong); flex-shrink:0; margin-top:2px; }
.quiz-option.selected .quiz-option-radio{ border-color:var(--brand-blue); background:radial-gradient(circle,var(--brand-blue) 45%,transparent 46%); }
.quiz-option-title{ font-weight:600; font-size:14.5px; margin-bottom:3px; }
.quiz-option-sub{ font-size:12.8px; color:var(--text-muted); }
.quiz-actions{ display:flex; justify-content:space-between; margin-top:var(--space-5); }
.score-ring{
  width:150px; height:150px; border-radius:50%; margin:0 auto var(--space-4);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background:conic-gradient(var(--brand-blue) calc(var(--score-pct,0) * 1%), var(--bg-surface-2) 0);
}
.score-ring-inner{
  width:120px; height:120px; border-radius:50%; background:var(--bg-surface); display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.score-ring-inner b{ font-size:30px; font-family:var(--font-heading); }
.score-ring-inner span{ font-size:12px; color:var(--text-muted); }
.maturity-badge{ display:inline-block; padding:7px 16px; border-radius:99px; font-weight:700; font-size:13.5px; margin-bottom:14px; }
.maturity-badge.lvl-4{ background:rgba(15,138,76,.12); color:var(--brand-emerald); }
.maturity-badge.lvl-3{ background:rgba(29,78,216,.12); color:var(--brand-blue); }
.maturity-badge.lvl-12{ background:rgba(200,67,58,.12); color:var(--brand-red); }

/* ---- progress bar dùng chung (KPI, OKR, quiz...) ---- */
.progress-track{ width:100%; height:7px; border-radius:99px; background:var(--bg-surface-2); overflow:hidden; }
.progress-fill{ height:100%; border-radius:99px; background:var(--grad-brand); transition:width .4s ease; }

/* ---- digital lab ---- */
.lab-panel{ padding:var(--space-6); }
.lab-account-card{
  background:var(--grad-brand); color:#fff; border-radius:var(--radius-md); padding:var(--space-5); margin-bottom:var(--space-5);
}
.lab-account-card .num{ font-family:var(--font-heading); font-size:22px; letter-spacing:2px; margin:8px 0; }
.lab-account-card .balance{ font-size:26px; font-weight:700; margin-top:4px; }
.lab-log-item{ display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-top:1px solid var(--border-subtle); font-size:13.8px; }
.lab-log-item:first-child{ border-top:none; }
.lab-log-item .amt{ color:var(--brand-emerald); font-weight:700; }

/* ---- table ---- */
.table-wrap{ overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--border-subtle); }
table.data-table{ width:100%; border-collapse:collapse; font-size:13.8px; min-width:640px; }
table.data-table th{ text-align:left; background:var(--bg-surface-2); padding:11px 14px; font-weight:700; white-space:nowrap; }
table.data-table td{ padding:11px 14px; border-top:1px solid var(--border-subtle); color:var(--text-secondary); }
table.data-table tr:hover td{ background:var(--bg-surface-2); }

/* ---- admin console ---- */
.admin-shell{ display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
@media (max-width:820px){ .admin-shell{ grid-template-columns:1fr; } }
.admin-sidebar{ background:var(--bg-inverse); color:#c6ceda; padding:var(--space-5); }
.admin-sidebar a{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; color:#c6ceda; }
.admin-sidebar a.active, .admin-sidebar a:hover{ background:rgba(255,255,255,.09); color:#fff; }
.admin-main{ padding:var(--space-6); background:var(--bg-primary); }
.admin-topline{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-6); flex-wrap:wrap; gap:12px; }
.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--space-4); margin-bottom:var(--space-6); }
.kpi-card{ padding:var(--space-5); }
.kpi-card b{ display:block; font-size:26px; font-family:var(--font-heading); }
.kpi-card span{ font-size:12.5px; color:var(--text-muted); }
.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{ width:100%; max-width:380px; padding:var(--space-7); text-align:center; }
.login-card .icon-tile{ margin:0 auto 16px; width:52px; height:52px; border-radius:14px; background:var(--grad-brand); color:#fff; display:flex; align-items:center; justify-content:center; }

/* ---- integration diagram ---- */
.integration-map{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.integration-node{ padding:var(--space-4); text-align:center; }
.integration-node .icon-tile{ margin:0 auto 10px; width:44px; height:44px; border-radius:12px; background:var(--bg-surface-2); color:var(--brand-blue); display:flex; align-items:center; justify-content:center; }
.integration-node h5{ font-size:13.5px; margin-bottom:2px; }
.integration-node span{ font-size:11.5px; color:var(--text-muted); }
.integration-core{ background:var(--grad-brand); color:#fff; }
.integration-core .icon-tile{ background:rgba(255,255,255,.16); color:#fff; }
.integration-core span{ color:rgba(255,255,255,.75); }

/* ---- flow / data-pipeline steps (kiến trúc tích hợp) ---- */
.flow-rail{ display:flex; align-items:stretch; gap:0; overflow-x:auto; padding-bottom:8px; }
.flow-step{
  flex:1 0 190px; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:var(--space-4); position:relative;
}
.flow-step .icon-tile{ width:40px; height:40px; border-radius:11px; background:var(--bg-surface-2); color:var(--brand-blue); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.flow-step h5{ font-size:14px; margin-bottom:4px; }
.flow-step p{ font-size:12.5px; color:var(--text-muted); margin-bottom:0; }
.flow-arrow{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:28px; color:var(--border-strong); }
@media (max-width:760px){ .flow-arrow{ transform:rotate(90deg); width:100%; padding:2px 0; } .flow-rail{ flex-direction:column; } .flow-step{ flex:1 1 auto; } }

/* ---- trạng thái tích hợp (sẵn sàng / đang thiết kế) ---- */
.status-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:7px; flex-shrink:0; }
.status-dot.ready{ background:var(--brand-emerald); }
.status-dot.design{ background:var(--brand-gold); }

code, pre, .mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
code{ word-break:break-word; overflow-wrap:anywhere; } /* code inline dài (đường dẫn API) không ép tràn ngang */
pre.code-block code{ word-break:normal; overflow-wrap:normal; }
pre.code-block{
  background:var(--bg-inverse); color:#d7e1f0; padding:16px 18px; border-radius:var(--radius-md);
  overflow-x:auto; font-size:13px; line-height:1.65;
}

/* ---- 3D Mascot & Hero Media Integration ---- */
.hero-content-grid{
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:32px; align-items:center;
}
@media (max-width:980px){ .hero-content-grid{ grid-template-columns:1fr; } }
.hero-mascot-box{
  position:relative; display:flex; justify-content:center; align-items:center;
}
.hero-mascot-img{
  max-width:280px; width:100%; height:auto; filter:drop-shadow(0 20px 30px rgba(0,0,0,.45));
  animation:floatMascot 4s ease-in-out infinite;
}
@keyframes floatMascot{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
}
.mascot-ai-badge{
  position:absolute; bottom:10px; right:20px; background:rgba(6,12,28,.85); backdrop-filter:blur(12px);
  border:1px solid var(--border-specular, rgba(255,255,255,.2)); padding:8px 14px; border-radius:var(--radius-full);
  display:flex; align-items:center; gap:8px; font-size:12.5px; color:#f8fafc; font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.mascot-ai-pulse{
  width:8px; height:8px; border-radius:50%; background:#10b981; box-shadow:0 0 10px #10b981;
}

/* ---- 7 Principles Grid ---- */
.principles-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px;
}
.principle-card{
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:22px 20px; transition:transform var(--transition), box-shadow var(--transition);
  position:relative; overflow:hidden;
}
.principle-card:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--brand-blue);
}
.principle-num-badge{
  font-family:var(--font-heading); font-size:13px; font-weight:700; color:var(--brand-gold);
  background:rgba(217,119,6,.12); padding:3px 10px; border-radius:var(--radius-full); display:inline-block; margin-bottom:12px;
}
.principle-card h4{ font-size:16px; margin-bottom:8px; color:var(--text-primary); }
.principle-card p{ font-size:13.5px; color:var(--text-secondary); line-height:1.55; margin-bottom:0; }

/* ---- Roadmap 2026-2035 Timeline ---- */
.roadmap-timeline{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:20px; position:relative;
}
.roadmap-col{
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:24px 22px; position:relative;
}
.roadmap-col.featured{
  border-top:3px solid var(--brand-gold); background:var(--bg-elevated); box-shadow:var(--shadow-md);
}
.roadmap-phase-pill{
  display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:4px 12px; border-radius:var(--radius-full); background:var(--bg-surface-2); color:var(--brand-blue);
  margin-bottom:14px;
}
.roadmap-col h4{ font-size:17px; margin-bottom:10px; }
.roadmap-col ul{ display:flex; flex-direction:column; gap:8px; padding-left:18px; margin:0; }
.roadmap-col li{ font-size:13.5px; color:var(--text-secondary); line-height:1.5; }

/* ---- Codex Blueprint Viewer Modal ---- */
.blueprint-card{
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:20px; text-align:center;
}
.blueprint-preview{
  width:100%; max-height:420px; object-fit:contain; border-radius:var(--radius-sm);
  background:#030712; cursor:zoom-in; transition:transform var(--transition-fast);
}
.blueprint-preview:hover{ transform:scale(1.01); }
.codex-modal-overlay{
  position:fixed; inset:0; background:rgba(2,6,23,.85); backdrop-filter:blur(10px);
  z-index:999; display:none; align-items:center; justify-content:center; padding:20px;
}
.codex-modal-overlay.active{ display:flex; }
.codex-modal-content{
  max-width:95vw; max-height:92vh; background:var(--bg-elevated); border-radius:var(--radius-md);
  padding:16px; position:relative; overflow:auto; box-shadow:var(--shadow-xl);
}
.codex-modal-img{ width:100%; height:auto; display:block; border-radius:var(--radius-sm); }
.codex-close-btn{
  position:absolute; top:24px; right:24px; width:40px; height:40px; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; border:none; cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center;
}

/* ---- Floating Interactive ChatBox Pro 24/7 Widget ---- */
.chatbox-widget-toggle{
  position:fixed; bottom:24px; right:24px; z-index:250;
  display:flex; align-items:center; gap:10px;
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  padding:6px 16px 6px 8px; border-radius:var(--radius-full);
  box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 24px rgba(56,189,248,.28);
  cursor:pointer; transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.chatbox-widget-toggle:hover{
  transform:translateY(-3px) scale(1.02);
  border-color:var(--brand-blue);
  box-shadow:0 16px 40px rgba(0,0,0,.6), 0 0 32px rgba(56,189,248,.45);
}
.chatbox-widget-avatar{
  width:42px; height:42px; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-brand); flex-shrink:0;
}
.chatbox-widget-avatar img{ width:34px; height:34px; object-fit:contain; }
.chatbox-widget-pulse{
  position:absolute; top:1px; right:1px; width:10px; height:10px; border-radius:50%;
  background:#10b981; border:2px solid var(--bg-surface); box-shadow:0 0 8px #10b981;
}
.chatbox-widget-text{ display:flex; flex-direction:column; text-align:left; }
.chatbox-widget-text strong{ font-size:13.5px; color:var(--text-primary); line-height:1.2; }
.chatbox-widget-text small{ font-size:11px; color:#10b981; font-weight:700; letter-spacing:.02em; }

/* Proactive Greeting Bubble */
.chatbox-greeting-bubble{
  position:fixed; bottom:84px; right:24px; z-index:249;
  max-width:320px; background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-left:4px solid var(--brand-blue); border-radius:var(--radius-md);
  padding:12px 14px; box-shadow:var(--shadow-lg), 0 0 20px rgba(56,189,248,.2);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  animation:slideUpFade 0.4s ease forwards;
}
.greeting-close-btn{
  position:absolute; top:6px; right:8px; background:none; border:none;
  font-size:16px; color:var(--text-muted); cursor:pointer; line-height:1; padding:2px 4px;
}
.greeting-close-btn:hover{ color:var(--text-primary); }
@keyframes slideUpFade{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ChatBox Popup Window */
.chatbox-popup{
  position:fixed; bottom:86px; right:24px; width:min(92vw, 420px); height:min(80vh, 580px);
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-top:3px solid var(--brand-blue);
  border-radius:var(--radius-lg); box-shadow:0 24px 64px rgba(0,0,0,.7), 0 0 35px rgba(56,189,248,.25);
  z-index:260; display:flex; flex-direction:column; overflow:hidden;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  opacity:0; visibility:hidden; transform:translateY(20px) scale(0.96);
  transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.chatbox-popup.active{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.chatbox-popup-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--bg-elevated); border-bottom:1px solid var(--border-subtle);
}
.chatbox-popup-body{
  flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px;
}
.chatbox-popup-chips{
  padding:6px 14px 10px; display:flex; gap:6px; overflow-x:auto; flex-shrink:0;
}
.chatbox-popup-chips .chip-btn{
  font-size:12px; padding:5px 11px; white-space:nowrap;
}
.chatbox-popup-inputrow{
  padding:10px 14px; background:var(--bg-elevated); border-top:1px solid var(--border-subtle);
  display:flex; gap:8px;
}

/* Mascot Interactive Hover & Pulsing Glow */
.hero-mascot-box{
  cursor:pointer; transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position:relative;
}
.hero-mascot-box:hover{
  transform:translateY(-4px);
}
.hero-mascot-box:hover .hero-mascot-img{
  filter:drop-shadow(0 25px 40px rgba(56,189,248,.45));
}
.mascot-ai-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(15,44,89,.9); border:1px solid rgba(56,189,248,.45);
  padding:8px 16px; border-radius:99px;
  color:#eef2f9; font-size:13px; font-weight:600;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  cursor:pointer; user-select:none; outline:none;
  transition:all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 16px rgba(56,189,248,.25);
}
.mascot-ai-badge:hover{
  background:rgba(15,44,89,.98); border-color:#38bdf8;
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 28px rgba(56,189,248,.5);
}
.mascot-ai-badge:active, .mascot-ai-badge.clicked{
  transform:scale(0.96);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.mascot-ai-badge:focus-visible{
  box-shadow:0 0 0 3px rgba(56,189,248,.5);
}
.mascot-ai-badge .mascot-ai-cta{
  background:var(--grad-brand);
  color:#ffffff;
  font-size:11px;
  padding:2.5px 9px;
  border-radius:99px;
  margin-left:4px;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 0 10px rgba(56,189,248,.4);
  animation:mascotCtaPulse 2.4s infinite ease-in-out;
}
@keyframes mascotCtaPulse{
  0%, 100%{ transform:scale(1); opacity:0.95; }
  50%{ transform:scale(1.06); opacity:1; box-shadow:0 0 14px rgba(56,189,248,.65); }
}

/* ChatBox Popup Window Extra Styling */
.chatbox-popup{
  z-index:1000;
}
.chatbox-widget-toggle{
  z-index:999;
}
.chatbox-popup-body::-webkit-scrollbar{
  width:6px;
}
.chatbox-popup-body::-webkit-scrollbar-track{
  background:transparent;
}
.chatbox-popup-body::-webkit-scrollbar-thumb{
  background:var(--border-subtle);
  border-radius:99px;
}
.chatbox-popup-body::-webkit-scrollbar-thumb:hover{
  background:var(--border-strong);
}