:root{
  --primary:#c1121f;        /* đỏ theo logo */
  --primary-dark:#9d0e18;
  --user-bubble:#1f7aec;    /* xanh bong bóng người dùng */
  --bg:#ffffff;
  --bg-soft:#f5f6f8;
  --text:#1c1c1e;
  --muted:#8a8f98;
  --line:#e9eaee;
  --radius:16px;
  --shadow:0 2px 10px rgba(0,0,0,.06);
  --maxw:760px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
  font-size:16px;line-height:1.55;
}
button{font-family:inherit;cursor:pointer}
.hidden{display:none !important}

#app{
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;
  max-width:var(--maxw);margin:0 auto;
  background:var(--bg);position:relative;
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:var(--bg);
  border-bottom:1px solid var(--line);
  padding-top:max(10px,env(safe-area-inset-top));
}
.icon-btn{
  border:none;background:transparent;font-size:20px;
  width:40px;height:40px;border-radius:10px;color:#333;
  display:inline-flex;align-items:center;justify-content:center;
}
.icon-btn:hover{background:var(--bg-soft)}
.mode-pill{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);background:var(--bg);
  border-radius:24px;padding:8px 14px;font-size:16px;font-weight:600;
  max-width:260px;margin:0 auto;color:var(--text);
}
.caret{color:var(--muted);font-size:12px}
.top-right{display:flex;gap:2px}

/* ---------- Main ---------- */
#main{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column}

/* Màn chào */
.welcome{margin:auto 0;text-align:center;padding:8px 4px 24px}
.welcome-logo{width:96px;height:96px;object-fit:contain;margin:24px auto 8px;display:block}
.welcome h1{font-size:34px;margin:8px 0 6px;font-weight:800}
.welcome-sub{color:var(--muted);font-size:18px;margin:0 auto 20px;max-width:420px}
.welcome-sub strong{color:var(--primary)}
.install-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin:0 auto 18px;padding:12px 20px;border:none;border-radius:24px;
  background:var(--primary);color:#fff;font-size:16px;font-weight:600;
  box-shadow:0 4px 14px rgba(193,18,31,.30);
}
.install-btn:active{transform:scale(.98)}
.install-row{
  display:flex;align-items:center;gap:12px;width:100%;
  border:1px solid var(--primary);background:#fff;border-radius:14px;
  padding:14px;margin-top:10px;text-align:left;color:var(--primary);
  font-size:16px;font-weight:600;
}
.cards-head{margin:18px 2px 8px;font-size:13.5px;font-weight:700;color:#6b7280;
  text-align:left;letter-spacing:.2px}
.cards{display:flex;flex-direction:column;gap:0;background:var(--bg-soft);
  border-radius:var(--radius);overflow:hidden;text-align:left;
  box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:transparent;border:none;border-bottom:1px solid var(--line);
  width:100%;text-align:left;color:var(--text);font-size:15px;cursor:pointer;
  transition:background .12s;
}
.card:last-child{border-bottom:none}
.card:hover{background:#eef2f7}
.card:active{background:#e4e9f0}
.card-no{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--brand,#c0392b);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
}
.card-title{flex:1;font-weight:600;line-height:1.35}
.card-go{flex:none;color:#b7bcc4;font-size:20px;font-weight:700}

/* ---------- Chat ---------- */
.chat{display:flex;flex-direction:column;gap:14px;padding-bottom:8px}
.msg{display:flex;gap:10px;max-width:100%}
.msg.user{justify-content:flex-end}
.bubble{padding:12px 14px;border-radius:18px;max-width:84%;word-wrap:break-word}
.msg.user .bubble{background:var(--user-bubble);color:#fff;border-bottom-right-radius:6px}
.assistant-wrap{display:flex;gap:10px;max-width:100%}
.avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--primary);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.assistant-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);flex:1;min-width:0;
}
.assistant-name{color:var(--muted);font-size:14px;margin-bottom:8px}
.assistant-card p{margin:.5em 0}
.assistant-card ul{margin:.35em 0 .35em 0;padding-left:1.25em}
.assistant-card li{margin:.3em 0;line-height:1.5}
.assistant-card a{color:var(--user-bubble);word-break:break-word}

/* Câu trả lời kiểu Zalo: tiêu đề + mục đánh số */
.ans-title{font-size:18px;font-weight:800;line-height:1.35;margin:0 0 8px}
.ans-warn{background:#fff5f5;border:1px solid #f0c4c8;border-left:4px solid #d6332e;color:#9c1f1a;padding:10px 12px;border-radius:8px;margin:0 0 12px;font-size:14px;line-height:1.5}
.ans-intro{margin:0 0 10px}
.ans-sec{margin:14px 0;padding:10px 12px;background:#f7f9fc;border-radius:10px;border-left:4px solid #1f6fb2}
.ans-h{font-weight:700;font-size:15.5px;margin:0 0 6px;display:flex;align-items:center;gap:6px}
.assistant-card .meta{list-style:none;padding:0;margin:.2em 0}
.assistant-card .meta li{margin:.45em 0;display:flex;align-items:flex-start;gap:7px;line-height:1.45}
.assistant-card .meta .meta-ic{flex:0 0 auto;font-size:15px;line-height:1.4}
.assistant-card .legal{margin-top:14px;padding:10px 12px;background:#fbf7ef;border-left:4px solid #c79a3a;border-radius:10px}
.assistant-card .legal .ans-h{margin-bottom:6px}
.cta-dvc{display:block;margin:12px 0;padding:13px 16px;background:#1f6fb2;color:#fff !important;
  text-decoration:none;border-radius:10px;font-weight:700;font-size:14.5px;line-height:1.4;
  text-align:center;box-shadow:0 2px 6px rgba(31,111,178,.25)}
.cta-dvc:hover{background:#185a93}
.ans-note{margin:8px 0 4px;font-size:13px;color:#6b7280;font-style:italic}
.ans-maybe{background:#fff8ec;border:1px solid #f0d9a8;border-left:4px solid #e0a528;color:#8a6516;padding:10px 12px;border-radius:8px;margin:0 0 12px;font-size:13.5px;line-height:1.5}
.ans-maybe a{color:#1f6fb2}
.ans-help{margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line);font-size:13.5px;color:#444}
.assistant-card .lines{line-height:1.55}
/* chips "Tham khảo thêm" — bấm để hỏi tiếp */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.related-q{display:inline-block;background:#eef4ff;color:var(--user-bubble);
  border:1px solid #d6e4ff;border-radius:16px;padding:7px 13px;font-size:14px;
  cursor:pointer;text-decoration:none;line-height:1.3}
.related-q:hover{background:#dfeaff}
.src-tag{display:inline-block;margin-top:8px;font-size:12px;color:var(--muted)}

/* hành động dưới câu trả lời */
.actions{display:flex;gap:4px;margin-top:8px;padding-left:46px}
.act-btn{border:none;background:transparent;color:var(--muted);font-size:18px;
  width:34px;height:34px;border-radius:8px}
.act-btn:hover{background:var(--bg-soft);color:#444}
.act-btn.active{color:var(--primary)}

/* typing */
.typing{display:inline-flex;gap:4px;padding:4px 0}
.typing span{width:8px;height:8px;border-radius:50%;background:var(--muted);
  animation:blink 1.2s infinite both}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ---------- Composer ---------- */
.composer{
  position:sticky;bottom:0;background:var(--bg);
  border-top:1px solid var(--line);padding:8px 12px;
  padding-bottom:max(8px,env(safe-area-inset-bottom));
}

/* Gợi ý thủ tục (autocomplete) */
.suggest{
  position:absolute;left:12px;right:12px;bottom:calc(100% - 4px);
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 -4px 20px rgba(0,0,0,.10);overflow:hidden;
  max-height:46vh;display:flex;flex-direction:column;z-index:15;
}
.suggest-head{padding:12px 16px;color:var(--muted);font-size:14px;
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.suggest-list{list-style:none;margin:0;padding:4px 0;overflow-y:auto}
.suggest-item{
  display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;
  border-bottom:1px solid var(--line);color:var(--text);
}
.suggest-item:last-child{border-bottom:none}
.suggest-item:hover,.suggest-item.active{background:var(--bg-soft)}
.si-ic{color:var(--muted);font-size:16px;flex:none}
.si-text{flex:1;min-width:0}
.si-text b{color:var(--primary);font-weight:700}
.si-fill{color:var(--muted);font-size:16px;flex:none}
.composer-row{display:flex;align-items:flex-end;gap:8px;
  background:var(--bg-soft);border-radius:24px;padding:6px 6px 6px 8px}
.composer textarea{
  flex:1;border:none;background:transparent;resize:none;outline:none;
  font-size:16px;line-height:1.4;max-height:120px;padding:8px 4px;color:var(--text);
}
.ctrl{font-size:18px;background:#fff;border:1px solid var(--line)}
.send-btn{
  flex:none;width:40px;height:40px;border-radius:50%;border:none;
  background:var(--primary);color:#fff;font-size:20px;
  display:flex;align-items:center;justify-content:center;
}
.send-btn:disabled{background:#d9b3b6}
.disclaimer{text-align:center;color:var(--muted);font-size:13px;margin:6px 0 0}

/* ---------- Sheets & drawer ---------- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:50;
  display:flex;align-items:flex-end;justify-content:center}
.sheet{background:#fff;width:100%;max-width:var(--maxw);
  border-radius:20px 20px 0 0;padding:16px 16px 28px;animation:slideUp .2s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sheet-head h3{margin:0;font-size:20px}
.mode-option,.switch-row{
  display:flex;align-items:center;gap:12px;width:100%;
  border:1px solid var(--line);background:#fff;border-radius:14px;
  padding:14px;margin-top:10px;text-align:left;color:var(--text);
}
.mo-ic,.sr-ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;font-size:22px}
.mo-txt,.sr-txt{flex:1;display:flex;flex-direction:column}
.mo-txt small,.sr-txt small{color:var(--muted)}
.mo-check{color:var(--primary);font-size:20px;opacity:0}
.mode-option.selected .mo-check{opacity:1}
.settings-note{color:var(--muted);font-size:13px;margin:12px 2px 0}

/* công tắc */
.switch{appearance:none;width:46px;height:26px;border-radius:20px;background:#ccc;
  position:relative;outline:none;transition:.2s;flex:none}
.switch:checked{background:var(--user-bubble)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:.2s}
.switch:checked::after{left:23px}

/* drawer lịch sử */
.sheet-backdrop .drawer{justify-content:flex-start}
.drawer{position:fixed;left:0;top:0;bottom:0;width:86%;max-width:360px;background:#fff;
  display:flex;flex-direction:column;animation:slideRight .2s ease}
@keyframes slideRight{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.drawer-head{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.drawer-head h2{flex:1;font-size:18px;margin:0}
.history-list{list-style:none;margin:0;padding:8px;overflow-y:auto}
.history-item{display:flex;align-items:center;gap:8px;padding:14px 12px;border-radius:12px}
.history-item:hover{background:var(--bg-soft)}
.hi-main{flex:1;min-width:0}
.hi-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hi-time{color:var(--muted);font-size:13px}
.hi-del{color:var(--muted);font-size:18px;background:none;border:none;padding:6px}
.history-empty{color:var(--muted);text-align:center;padding:30px 12px}

@media (min-width:760px){
  #app{border-left:1px solid var(--line);border-right:1px solid var(--line)}
}