/* ===========================
   Biến màu / Theme
=========================== */
:root{
  --brand-color:#0d63bd;
  --background-color:#f7f9fc;
  --header-bg:#ffffff;
  --chat-bubble-bot:#eef2f7;
  --chat-bubble-user:var(--brand-color);
  --text-primary:#1e293b;
  --text-secondary:#64748b;
  --border-color:#e2e8f0;
}

/* ===========================
   Reset & Base
=========================== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.6; color:var(--text-primary);
  background:var(--background-color);
  display:flex; flex-direction:column;
}

/* ===========================
   Header
=========================== */
.app-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 16px; background:var(--header-bg);
  border-bottom:1px solid var(--border-color);
}
.header-brand{display:flex; align-items:center; gap:12px}
.app-header .logo{width:36px; height:36px}
.app-header h1{font-size:1.1rem; font-weight:600; color:var(--brand-color)}

/* Desktop nav */
.app-nav ul{display:flex; align-items:center; gap:24px; list-style:none}
.app-nav a{
  color:var(--text-secondary); text-decoration:none; font-weight:500;
  transition:color .2s ease;
}
.app-nav a:hover{color:var(--brand-color)}

/* ===========================
   HAMBURGER (đẹp & chuẩn brand)
=========================== */
.mobile-toggle{
  display:none; /* bật ở @media mobile */
  -webkit-tap-highlight-color:transparent;
  width:44px; height:44px;
  border:1.5px solid var(--brand-color);
  border-radius:50%;
  background:#fff; cursor:pointer; position:relative; outline:none;
  box-shadow:0 4px 14px rgba(13,99,189,.12);
  transition:box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.mobile-toggle:hover{ box-shadow:0 8px 22px rgba(13,99,189,.2) }
.mobile-toggle:focus-visible{ box-shadow:0 0 0 3px rgba(13,99,189,.25) }
/* 3 gạch */
.mobile-toggle span{
  position:absolute; left:50%; transform:translateX(-50%);
  width:22px; height:2.5px; background:var(--brand-color);
  border-radius:2px; transition: transform .25s ease, opacity .2s ease;
}
.mobile-toggle span:nth-child(1){ top:14px }
.mobile-toggle span:nth-child(2){ top:20px }
.mobile-toggle span:nth-child(3){ top:26px }
/* chuyển sang X khi mở */
.mobile-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateX(-50%) translateY(6px) rotate(45deg);
}
.mobile-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.mobile-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateX(-50%) translateY(-6px) rotate(-45deg);
}

/* ===========================
   Drawer menu (mobile) – fixed
   - trượt từ PHẢI (from-right) mặc định
   - muốn trượt từ TRÁI: đổi class .from-right -> .from-left trong HTML
=========================== */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9998;
}

/* Trạng thái ĐÓNG: ẩn hẳn, không nhận click, không đổ bóng để khỏi “ló mép” */
.drawer{
  position:fixed; top:0; bottom:0;
  width:78vw; max-width:360px; background:#fff;
  border:1px solid var(--border-color);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  z-index:9999; display:flex; flex-direction:column;
  will-change: transform, opacity;
  transition: transform .28s ease, opacity .2s ease;
  opacity:0; visibility:hidden; pointer-events:none;
}

/* Ẩn ra ngoài khung thêm 24px để không còn viền/đổ bóng “ló” ra */
.drawer.from-right{ right:12px; left:auto; border-radius:14px 0 0 14px; transform:translateX(calc(100% + 24px)); }
.drawer.from-left { left:12px;  right:auto; border-radius:0 14px 14px 0; transform:translateX(calc(-100% - 24px)); }

/* Trạng thái MỞ */
.drawer.open{
  transform:translateX(0);
  opacity:1; visibility:visible; pointer-events:auto;
}

.drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border-color);
}
.drawer-header .brand-inline{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--brand-color)}
.drawer-header .brand-inline img{width:22px; height:22px}
.drawer-close{
  background:#fff; border:1px solid var(--border-color);
  border-radius:10px; width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}

.drawer-list{list-style:none; padding:8px}
.drawer-link{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px; text-decoration:none;
  color:var(--text-primary); border:1px solid transparent;
}
.drawer-link:hover{ border-color:var(--brand-color); color:var(--brand-color); background:#f5f9ff }
.drawer-link .ic{display:inline-flex; width:18px; height:18px; color:var(--brand-color)}

/* ===========================
   Chat wrapper & messages
=========================== */
.chat-wrapper{
  width:100%; max-width:calc(100% - 400px); margin:0 auto;
  flex-grow:1; display:flex; flex-direction:column; min-height:0;
  background:#fff; border-left:1px solid var(--border-color); border-right:1px solid var(--border-color);
}
#chat-container{
  flex-grow:1; overflow-y:auto; padding:24px;
  display:flex; flex-direction:column; gap:12px;
}
.message{max-width:80%; padding:12px 16px; border-radius:20px; white-space:pre-wrap}
.message.bot{background:var(--chat-bubble-bot); border-bottom-left-radius:4px; align-self:flex-start}
.message.user{background:var(--chat-bubble-user); color:#fff; border-bottom-right-radius:4px; align-self:flex-end}

/* gõ phím */
.typing-indicator{display:flex; align-items:center; gap:5px; padding:12px 0}
.typing-indicator .dot{
  width:8px; height:8px; border-radius:50%; background:var(--text-secondary);
  opacity:.7; animation:typing 1s infinite ease-in-out;
}
.typing-indicator .dot:nth-child(2){ animation-delay:.2s }
.typing-indicator .dot:nth-child(3){ animation-delay:.4s }
@keyframes typing{ 0%,80%,100%{transform:scale(.5);opacity:.5} 40%{transform:scale(1);opacity:1} }

/* ===========================
   Thanh nhập chat
=========================== */
#input-bar{
  display:flex; align-items:center; gap:12px;
  padding:16px 24px; background:#fff; border-top:1px solid var(--border-color);
  flex-shrink:0;
}
#query-input{
  flex-grow:1; padding:12px 16px; border:1px solid var(--border-color);
  border-radius:999px; outline:none; transition:border-color .2s;
}
#query-input:focus{ border-color:var(--brand-color) }
#send-button{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; background:var(--brand-color);
  border:0; border-radius:50%; cursor:pointer; transition:background .2s;
}
#send-button:hover{ background:#0a4e95 }
#send-button[disabled]{ background:#a0aec0; cursor:not-allowed }
#send-button svg{ width:24px; height:24px; color:#fff }

/* ===========================
   Popup form
=========================== */
.popup-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:none; justify-content:center; align-items:center; z-index:10000;
}
.popup-overlay[aria-hidden="false"]{ display:flex !important }
.popup-content{
  background:#fff; width:100%; max-width:520px; border-radius:16px; padding:24px;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
}
.popup-content h2{ margin:0 0 14px; color:var(--brand-color); font-size:22px; font-weight:700 }

/* Form layout + inputs */
.form-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:8px }
.form-grid .input-area{ grid-column:1 / -1 }

.input-group{
  display:flex; align-items:stretch; background:#fff;
  border:1.5px solid var(--brand-color); border-radius:8px; overflow:hidden;
  transition:border-color .18s ease, box-shadow .2s ease;
}
.input-group:focus-within{ border-color:var(--brand-color); box-shadow:0 0 0 3px rgba(13,99,189,.10) }
.input-group .icon{
  width:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:var(--brand-color); border-right:1.5px solid var(--brand-color);
}
.input-group input, .input-group textarea{
  width:100%; border:0; outline:0; background:transparent; padding:12px 14px;
  font-size:14px; color:var(--text-primary);
}
.input-group textarea{ resize:vertical; min-height:140px }
.input-group.field-error{ border-color:#dc2626 !important; box-shadow:0 0 0 3px rgba(220,38,38,.10) !important }

/* Buttons */
.form-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:10px }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
  border:0; border-radius:12px; cursor:pointer; font-weight:600; position:relative; overflow:hidden;
  transition:transform .05s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}
.btn:active{ transform:translateY(1px) }
.btn .btn-ic{ width:18px; height:18px }
.btn-primary{ background:var(--brand-color); color:#fff }
.btn-primary:hover{ box-shadow:0 8px 22px rgba(13,99,189,.25) }
.btn-secondary{ background:#e6eef7; color:#0f172a }
.btn-secondary:hover{ box-shadow:0 8px 22px rgba(15,23,42,.12) }
.btn-muted{ background:#94a3b8; color:#fff }
.btn-muted:hover{ box-shadow:0 8px 22px rgba(148,163,184,.25) }
/* ripple */
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  transform:scale(0); opacity:.18; background:#fff; transition:transform .35s ease, opacity .6s ease;
}
.btn:active::after{ transform:scale(1); opacity:0 }
/* spinner */
.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff;
  display:none; animation:spin .8s linear infinite;
}
.btn.loading .spinner{ display:inline-block }
.btn.loading .btn-text{ opacity:.9 }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Toast */
.toast{
  display:none; margin-top:10px; padding:10px 12px; border-radius:10px;
  background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; font-size:14px;
}
.toast.error{ background:#fef2f2; color:#991b1b; border-color:#fecaca }

/* ===========================
   Honeypot: ẩn tuyệt đối
=========================== */
.hp-field{
  position:absolute !important; left:-10000px !important; top:auto !important;
  width:1px !important; height:1px !important; padding:0 !important; border:0 !important;
  opacity:0 !important; pointer-events:none !important;
}

/* ===========================
   Responsive
=========================== */
@media (max-width:1200px){
  .chat-wrapper{ max-width:100%; border-left:0; border-right:0 }
}
@media (max-width:768px){
  .app-nav{ display:none }         /* ẩn menu desktop */
  .mobile-toggle{ display:inline-flex }  /* hiện hamburger */
  .app-header{ padding:12px }
  #input-bar, #chat-container{ padding-left:16px; padding-right:16px }
}

/* Giữ overlay popup ẩn theo mặc định (phòng engine cũ) */
.popup-overlay{ display:none }