:root {
  color-scheme: light;
  /* CHỮ */
  --ink: #172b4d;
  --ink-body: #263b58;
  --ink-soft: #52627a;
  --ink-mute: #778397;
  --ink-faint: #9aa4b2;
  /* NỀN */
  --paper: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --surface-3: #eef2f7;
  --sidebar: #f0f3f6;
  --wash: rgba(255, 255, 255, .75);
  --wash-strong: rgba(255, 255, 255, .88);
  --hover-wash: rgba(23, 49, 95, .07);
  /* ĐƯỜNG VIỀN */
  --line: #e1e6ed;
  --line-strong: #b8c8df;
  /* XANH THƯƠNG HIỆU */
  --navy: #17315f;
  --navy-hover: #204078;
  --blue: #315fad;
  --blue-hover: #285895;
  --blue-ink: #285b9f;
  --blue-soft: #eaf1fb;
  --blue-soft-2: #dce8f8;
  --blue-line: #6f93c6;
  --ring: rgba(49, 95, 173, .12);
  /* TRẠNG THÁI */
  --ok: #2f8669;
  --ok-soft: #e7f4ef;
  --warn: #d89c2b;
  --warn-ink: #8a5a12;
  --warn-soft: #fdf5e6;
  --warn-line: #f0dcae;
  --danger: #dc624f;
  --danger-ink: #8a3a34;
  --danger-soft: #fdeceb;
  --danger-line: #f2c9c5;
  --coral: #e96f51;
  --coral-soft: #fdeee9;
  --purple: #76569b;
  --purple-soft: #f1eafa;
  /* KHÁC */
  --gold: #d89c2b;
  --green: #2f8669;
  --blue-soft-legacy: #eaf1fc;
  --backdrop: rgba(15, 30, 54, .44);
  --shadow: 0 12px 32px rgba(23, 43, 77, .08);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

/* CHẾ ĐỘ TỐI
   Chỉ định nghĩa lại token, không đụng tới một luật giao diện nào - đó là lý do
   phải token hóa 123 mã màu viết cứng trước. Hai khối: theo cài đặt hệ thống
   (trừ khi người dùng đã chọn "sáng"), và theo lựa chọn tay lưu ở localStorage. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #e9eef7;
    --ink-body: #d2dbea;
    --ink-soft: #a7b4c8;
    --ink-mute: #8593aa;
    --ink-faint: #6d7b93;
    --paper: #0f141f;
    --surface: #161d2b;
    --surface-2: #1b2432;
    --surface-3: #212b3c;
    --sidebar: #121826;
    --wash: rgba(255, 255, 255, .045);
    --wash-strong: rgba(255, 255, 255, .075);
    --hover-wash: rgba(255, 255, 255, .06);
    --line: #2a3446;
    --line-strong: #3d4c66;
    --navy: #23406f;
    --navy-hover: #2c4f85;
    --blue: #74a3ea;
    --blue-hover: #8bb4f0;
    --blue-ink: #9cc2f7;
    --blue-soft: #1a2540;
    --blue-soft-2: #24344f;
    --blue-line: #41608f;
    --ring: rgba(116, 163, 234, .22);
    --ok: #55bd99;
    --ok-soft: #15302a;
    --warn: #e6b455;
    --warn-ink: #f0cc7d;
    --warn-soft: #2c2413;
    --warn-line: #4b3d1c;
    --danger: #ef7c69;
    --danger-ink: #f5aa9e;
    --danger-soft: #2e1b1a;
    --danger-line: #4f2c29;
    --coral: #f08a6e;
    --coral-soft: #2e201b;
    --purple: #b69ed8;
    --purple-soft: #261e34;
    --gold: #e6b455;
    --green: #55bd99;
    --backdrop: rgba(0, 0, 0, .62);
    --shadow: 0 14px 34px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--paper); }
button, textarea { font: inherit; }
button { color: inherit; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Cùng bộ token cho lựa chọn tay (nút sáng/tối lưu ở localStorage). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e9eef7;
  --ink-body: #d2dbea;
  --ink-soft: #a7b4c8;
  --ink-mute: #8593aa;
  --ink-faint: #6d7b93;
  --paper: #0f141f;
  --surface: #161d2b;
  --surface-2: #1b2432;
  --surface-3: #212b3c;
  --sidebar: #121826;
  --wash: rgba(255, 255, 255, .045);
  --wash-strong: rgba(255, 255, 255, .075);
  --hover-wash: rgba(255, 255, 255, .06);
  --line: #2a3446;
  --line-strong: #3d4c66;
  --navy: #23406f;
  --navy-hover: #2c4f85;
  --blue: #74a3ea;
  --blue-hover: #8bb4f0;
  --blue-ink: #9cc2f7;
  --blue-soft: #1a2540;
  --blue-soft-2: #24344f;
  --blue-line: #41608f;
  --ring: rgba(116, 163, 234, .22);
  --ok: #55bd99;
  --ok-soft: #15302a;
  --warn: #e6b455;
  --warn-ink: #f0cc7d;
  --warn-soft: #2c2413;
  --warn-line: #4b3d1c;
  --danger: #ef7c69;
  --danger-ink: #f5aa9e;
  --danger-soft: #2e1b1a;
  --danger-line: #4f2c29;
  --coral: #f08a6e;
  --coral-soft: #2e201b;
  --purple: #b69ed8;
  --purple-soft: #261e34;
  --gold: #e6b455;
  --green: #55bd99;
  --backdrop: rgba(0, 0, 0, .62);
  --shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

.app-shell { display: grid; grid-template-columns: 292px minmax(0, 1fr); height: 100dvh; }
.sidebar { position: relative; z-index: 20; display: flex; flex-direction: column; min-width: 0; padding: 26px 20px 18px; background: var(--sidebar); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 7px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; color: white; background: var(--navy); border-radius: 13px; box-shadow: 0 8px 18px rgba(23, 49, 95, .2); }
.brand-mark svg { width: 26px; height: 26px; stroke-width: 1.7; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 16px; letter-spacing: -.01em; }
.brand span { margin-top: 2px; color: var(--ink-soft); font-size: 12px; }

.new-chat { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin: 29px 0 9px; padding: 12px 16px; color: white; background: var(--navy); border: 0; border-radius: 12px; font-size: 14px; font-weight: 650; cursor: pointer; transition: transform .15s, background .15s; }
.new-chat:hover { background: var(--navy-hover); transform: translateY(-1px); }
.new-chat svg { width: 18px; height: 18px; stroke-width: 2.2; }
.library-button { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0 0 24px; padding: 10px 12px; color: var(--ink-soft); background: var(--wash); border: 1px solid var(--line); border-radius: 11px; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.library-button:hover { background: var(--surface); border-color: var(--line-strong); }
.library-button svg { width: 17px; height: 17px; color: var(--blue); }
.library-count { margin-left: auto; padding: 2px 7px; color: var(--ink-mute); background: var(--surface-3); border-radius: 999px; font-size: 10px; }
.history-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 7px 8px; color: var(--ink-mute); font-size: 11px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.history-tools { display: flex; align-items: center; gap: 2px; }
.history-tools .icon-button.active { color: var(--blue); background: var(--ring); }
.history-search { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; padding: 7px 10px; background: var(--wash); border: 1px solid var(--line); border-radius: 10px; }
.history-search:focus-within { border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--ring); }
.history-search svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--ink-mute); }
.history-search input { width: 100%; min-width: 0; color: var(--ink); background: transparent; border: 0; outline: 0; font: inherit; font-size: 12.5px; }
.history-list { min-height: 40px; overflow: auto; }
.history-empty { padding: 12px 8px; color: var(--ink-faint); font-size: 13px; line-height: 1.5; }
.history-item mark { padding: 0 1px; color: inherit; background: var(--warn-line); border-radius: 3px; }
.history-row { position: relative; }
.history-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 34px 10px 9px; background: transparent; border: 0; border-radius: 10px; text-align: left; cursor: pointer; }
.history-remove { position: absolute; top: 50%; right: 5px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; color: var(--ink-mute); background: transparent; border: 0; border-radius: 7px; cursor: pointer; opacity: 0; transform: translateY(-50%); transition: opacity .15s, color .15s, background .15s; }
.history-remove svg { width: 15px; height: 15px; }
.history-row:hover .history-remove, .history-remove:focus-visible { opacity: 1; }
.history-remove:hover { color: var(--danger); background: var(--danger-soft); }
.history-remove:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
@media (hover: none) {
  /* Máy cảm ứng không có trạng thái rê chuột nên nút xóa phải hiện sẵn. */
  .history-remove { opacity: 1; }
}
.history-item:hover, .history-item.active { background: var(--wash); }
.history-item svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ink-mute); }
.history-item span { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer { margin-top: auto; padding-top: 18px; }
.system-card { padding: 14px; background: var(--wash-strong); border: 1px solid var(--line); border-radius: 13px; }
.status-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.status-dot, .mini-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; background: var(--warn); border-radius: 50%; box-shadow: 0 0 0 3px rgba(226, 167, 40, .13); }
.status-dot.ready, .mini-dot.ready { background: var(--ok); box-shadow: 0 0 0 3px rgba(57, 164, 119, .13); }
.status-dot.error, .mini-dot.error { background: var(--danger); box-shadow: 0 0 0 3px rgba(220, 98, 79, .13); }
.status-dot.loading, .status-dot.updating, .mini-dot.updating { animation: pulse 1.5s infinite; }
.system-card p { margin: 8px 0 0; color: var(--ink-soft); font-size: 11.5px; line-height: 1.45; }
.system-meta { margin-top: 8px; color: var(--ink-mute); font-size: 10.5px; }
.index-progress { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.index-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-soft); font-size: 10.5px; }
.index-progress-heading span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-progress-heading strong { flex: 0 0 auto; color: var(--blue); font-size: 11px; }
.index-progress-track { height: 7px; margin-top: 7px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.index-progress-track span { position: relative; display: block; overflow: hidden; width: 0; height: 100%; background: linear-gradient(90deg, var(--blue), #58a6ff); border-radius: inherit; transition: width .35s ease; }
.index-progress-track span::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(115deg, rgba(255, 255, 255, .28) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .28) 75%, transparent 75%); background-size: 14px 14px; animation: index-progress-stripes .9s linear infinite; }
.index-progress-track.done span::after { display: none; }
.index-progress-track.indeterminate span { animation: index-progress-running 1.35s ease-in-out infinite; }
@keyframes index-progress-stripes {
  from { background-position: 0 0; }
  to { background-position: 14px 0; }
}
@keyframes index-progress-running {
  0% { transform: translateX(-115%); }
  50% { transform: translateX(95%); }
  100% { transform: translateX(285%); }
}
.index-progress-time { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--ink-soft); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.index-progress-time span:last-child { flex: 0 0 auto; color: var(--ink-mute); }
.index-progress-detail { margin-top: 4px; color: var(--ink-mute); font-size: 9.5px; line-height: 1.35; }
.index-progress-file { margin-top: 3px; overflow: hidden; color: var(--ink-faint); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.retry-button { margin-top: 10px; padding: 6px 9px; color: var(--danger-ink); background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: 7px; font-size: 10.5px; font-weight: 650; cursor: pointer; }
.retry-button:hover { background: var(--danger-soft); }
.update-button { width: 100%; margin-top: 10px; padding: 8px 10px; color: white; background: var(--blue); border: 0; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; }
.update-button:hover:not(:disabled) { background: var(--blue-hover); }
.update-button:disabled { cursor: wait; opacity: .6; }
.privacy-note { display: flex; align-items: center; gap: 7px; margin: 13px 5px 0; color: var(--ink-mute); font-size: 11px; }
.privacy-note svg { width: 15px; height: 15px; }

.main-panel { display: grid; grid-template-rows: 68px minmax(0, 1fr) auto; min-width: 0; min-height: 0; background: var(--surface); }
.topbar { display: flex; align-items: center; gap: 14px; padding: 0 32px; border-bottom: 1px solid var(--line); }
.topbar-title { display: grid; gap: 3px; }
.topbar-title > span { font-size: 14px; font-weight: 700; }
.topbar-title small { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 11px; }
.mini-dot { width: 6px; height: 6px; }
.model-picker { position: relative; margin-left: auto; }
.model-pill { display: flex; align-items: center; gap: 7px; padding: 7px 10px; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; cursor: pointer; }
.model-pill:hover:not(:disabled) { color: var(--ink); border-color: var(--line-strong); background: var(--surface-3); }
.model-pill:disabled { cursor: wait; opacity: .6; }
.model-pill .chevron { width: 12px; height: 12px; opacity: .7; }
.model-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 40; display: flex; flex-direction: column; gap: 2px; width: max(230px, 100%); padding: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.model-menu-title { padding: 5px 9px 6px; color: var(--ink-mute); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.model-option { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; color: var(--ink-body); background: none; border: 0; border-radius: 9px; text-align: left; cursor: pointer; }
.model-option:hover { background: var(--surface-2); }
.model-option.active { color: var(--blue-ink); background: var(--blue-soft); }
.model-option span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.model-option strong { font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-option small { color: var(--ink-mute); font-size: 10.5px; }
.model-option .tick { flex: 0 0 auto; width: 15px; height: 15px; color: var(--blue); }
.model-empty { padding: 10px 9px; color: var(--ink-mute); font-size: 11.5px; line-height: 1.5; }
.model-pill svg { width: 14px; height: 14px; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.icon-button:hover { background: var(--hover-wash); }
.icon-button svg { width: 18px; height: 18px; }
.icon-button.subtle { width: 28px; height: 28px; color: var(--ink-faint); }
.menu-button { display: none; }

.chat-scroll { min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.welcome { width: min(830px, calc(100% - 40px)); margin: 0 auto; padding: clamp(48px, 8vh, 90px) 0 42px; text-align: center; }
.welcome-emblem { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; color: var(--navy); background: linear-gradient(145deg, var(--blue-soft), var(--blue-soft)); border: 1px solid var(--blue-soft-2); border-radius: 20px; }
.welcome-emblem svg { width: 42px; height: 42px; }
.eyebrow { margin: 0 0 12px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
h1 { margin: 0; color: var(--ink); font-family: Cambria, "Times New Roman", serif; font-size: clamp(34px, 4.5vw, 48px); font-weight: 500; line-height: 1.12; letter-spacing: -.02em; }
.welcome-copy { max-width: 610px; margin: 18px auto 31px; color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.suggestion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; text-align: left; }
.suggestion-card { display: grid; grid-template-columns: 43px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; cursor: pointer; box-shadow: 0 3px 12px var(--hover-wash); transition: border-color .18s, box-shadow .18s, transform .18s; }
.suggestion-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.suggestion-card > span:nth-child(2) { min-width: 0; }
.suggestion-card strong, .suggestion-card small { display: block; }
.suggestion-card strong { margin-bottom: 4px; font-size: 13px; }
.suggestion-card small { overflow: hidden; color: var(--ink-soft); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.suggestion-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; }
.suggestion-icon svg { width: 21px; height: 21px; }
.suggestion-icon.blue { color: var(--blue-ink); background: var(--blue-soft); }
.suggestion-icon.coral { color: var(--coral); background: var(--coral-soft); }
.suggestion-icon.gold { color: var(--warn-ink); background: var(--warn-soft); }
.suggestion-icon.green { color: var(--ok); background: var(--ok-soft); }
.suggestion-card .arrow { width: 16px; height: 16px; color: var(--ink-faint); }

.messages { display: none; width: min(820px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 48px; }
.messages.visible { display: block; }
.message { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 13px; margin-bottom: 28px; animation: rise .25s ease-out; }
.message.user { grid-template-columns: minmax(0, 1fr); justify-items: end; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; color: white; background: var(--navy); border-radius: 11px; }
.avatar svg { width: 20px; height: 20px; }
.message-body { min-width: 0; }
.message-label { margin: 0 0 7px; color: var(--ink-mute); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.user-bubble { max-width: min(650px, 88%); padding: 12px 16px; color: white; background: var(--navy); border-radius: 16px 16px 4px 16px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.answer-text { color: var(--ink-body); font-size: 14.5px; line-height: 1.75; word-break: break-word; }
.answer-text:empty { display: none; }
.answer-text p { margin: 0 0 10px; }
.answer-text p:last-child { margin-bottom: 0; }
.answer-text ul, .answer-text ol { margin: 5px 0 12px; padding-left: 23px; }
.answer-text li { margin: 4px 0; padding-left: 2px; }
.answer-text h3, .answer-text h4, .answer-text h5 { margin: 17px 0 7px; color: var(--ink); line-height: 1.4; }
.answer-text h3 { font-size: 17px; }
.answer-text h4 { font-size: 15.5px; }
.answer-text h5 { font-size: 14.5px; }
.answer-text code { padding: 2px 5px; background: var(--surface-3); border: 1px solid var(--line); border-radius: 5px; font-family: Consolas, "SFMono-Regular", monospace; font-size: .9em; }
.citation-link { padding: 1px 4px; color: var(--blue-ink); background: var(--blue-soft); border-radius: 4px; font-size: .86em; font-weight: 700; text-decoration: none; }
.citation-link:hover { background: var(--blue-soft-2); }
.thinking { display: flex; align-items: center; gap: 10px; min-height: 34px; color: var(--ink-soft); font-size: 13px; }
.thinking.hidden { display: none; }
.thinking-dots { display: flex; gap: 4px; }
.thinking-dots i { width: 6px; height: 6px; background: var(--ink-mute); border-radius: 50%; animation: bounce 1.2s infinite ease-in-out; }
.thinking-dots i:nth-child(2) { animation-delay: .14s; }
.thinking-dots i:nth-child(3) { animation-delay: .28s; }
.elapsed { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.response-actions { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.action-button { display: flex; align-items: center; gap: 6px; padding: 6px 8px; color: var(--ink-mute); background: transparent; border: 0; border-radius: 8px; font-size: 11px; cursor: pointer; }
.action-button:hover { background: var(--surface-3); }
.action-button svg { width: 15px; height: 15px; }
.action-button.stop { color: var(--danger); }
.sources { display: grid; gap: 8px; margin-top: 16px; }
.sources-title { color: var(--ink-mute); font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.source-chip { display: flex; align-items: center; gap: 9px; width: fit-content; max-width: 100%; padding: 8px 10px; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; font-size: 11.5px; text-decoration: none; }
.source-chip svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--blue); }
/* min-width:0 là bắt buộc: mặc định flex item không co nhỏ hơn nội dung,
   nên tiêu đề Điều dài sẽ đẩy chip tràn ra ngoài và làm cả khung chat
   cuộn ngang thay vì cắt bằng dấu ba chấm. */
.source-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-chip[href]:hover { border-color: var(--line-strong); background: var(--blue-soft-2); }
/* --- Lọc kho tài liệu theo loại --- */
.document-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px 10px; }
.filter-chip { padding: 5px 11px; color: var(--ink-soft); background: var(--surface-3); border: 1px solid var(--line); border-radius: 20px; font-size: 11px; font-weight: 650; cursor: pointer; }
.filter-chip:hover { background: var(--blue-soft-2); }
.filter-chip.active { color: white; background: var(--blue); border-color: var(--blue); }

/* --- Đồng bộ Google Drive --- */
.drive-card { margin-top: 10px; padding: 10px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.drive-button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; color: var(--navy); background: var(--blue-soft); border: 0; border-radius: 8px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.drive-button:hover:not(:disabled) { background: var(--blue-soft-2); }
.drive-button:disabled { cursor: default; opacity: .55; }
.drive-button svg { width: 16px; height: 16px; color: var(--blue); }
.drive-button.syncing svg { animation: quay 1.4s linear infinite; }
@keyframes quay { to { transform: rotate(360deg); } }
.drive-status { margin: 7px 2px 0; color: var(--ink-soft); font-size: 10.5px; line-height: 1.45; }
.hot-folder-status { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }

/* --- Nguồn theo loại tài liệu --- */
.source-chip.kind-video svg, .source-chip.kind-am_thanh svg { color: var(--coral); }
.source-chip.kind-bang_du_lieu svg { color: var(--green); }
.source-chip.kind-trinh_chieu svg { color: var(--gold); }
.source-chip.kind-anh svg { color: var(--purple); }
.source-chip.playable { cursor: pointer; }
.source-chip.playable:hover { border-color: var(--line-strong); background: var(--blue-soft-2); }
.source-time { flex: 0 0 auto; margin-left: 2px; padding: 1px 6px; color: var(--coral); background: var(--coral-soft); border-radius: 20px; font-size: 10.5px; font-style: normal; font-weight: 700; }
.source-player { width: min(100%, 420px); margin-top: -2px; }
.source-player video, .source-player audio { width: 100%; border-radius: 10px; background: #000; }

/* --- Hồ sơ văn bản trên chip nguồn --- */
.source-vanban { flex: 0 0 auto; margin-left: 2px; padding: 1px 6px; color: var(--navy); background: var(--blue-soft); border-radius: 20px; font-size: 10.5px; font-style: normal; font-weight: 700; letter-spacing: .01em; }
.source-vanban.het-hieu-luc { color: var(--danger-ink); background: var(--danger-soft); text-decoration: line-through; }

/* --- Cảnh báo hiệu lực văn bản --- */
.answer-notice { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 9px 11px; color: var(--blue-ink); background: var(--blue-soft); border: 1px solid var(--blue-soft-2); border-radius: 10px; font-size: 12px; line-height: 1.5; }
.answer-notice.nghiem-trong { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger-line); }
.answer-notice svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; }

/* --- Cảnh báo hậu kiểm câu trả lời --- */
.answer-warning { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 9px 11px; color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: 10px; font-size: 12px; line-height: 1.5; }
.answer-warning svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; color: var(--gold); }

.source-chip:target { border-color: var(--blue-line); background: var(--blue-soft-2); box-shadow: 0 0 0 3px var(--ring); }
.error-box { padding: 11px 13px; color: var(--danger-ink); background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: 10px; font-size: 13px; line-height: 1.5; }

.composer-area { position: relative; padding: 10px max(24px, calc((100% - 820px) / 2)) 18px; background: linear-gradient(to bottom, var(--wash-strong), var(--surface) 28%); }
.composer { padding: 11px 12px 9px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 26px rgba(23, 43, 77, .09); transition: border-color .18s, box-shadow .18s; }

/* Thanh phạm vi truy xuất - đặt ngay trên khung nhập vì nó đổi nghĩa của câu
   hỏi sắp gửi, người dùng phải thấy nó trong cùng tầm mắt với ô nhập. */
.scope-bar { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 2px 7px; }
.scope-button { display: flex; align-items: center; gap: 7px; padding: 6px 11px; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; cursor: pointer; }
.scope-button:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-3); }
.scope-button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.scope-button.active { color: var(--blue-ink); background: var(--blue-soft); border-color: var(--blue-soft-2); }
.scope-clear { padding: 6px 9px; color: var(--ink-mute); background: none; border: 0; border-radius: 8px; font-size: 11px; cursor: pointer; }
.scope-clear:hover { color: var(--ink); background: var(--hover-wash); }
.scope-panel { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 40; display: flex; flex-direction: column; gap: 9px; width: min(340px, calc(100vw - 40px)); padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.scope-title { margin: 0; color: var(--ink-mute); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.scope-field { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-body); }
.scope-field span { flex: 0 0 84px; }
.scope-field select { flex: 1; min-width: 0; padding: 6px 8px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; font: inherit; cursor: pointer; }
.scope-note { margin: 0; color: var(--ink-mute); font-size: 10.5px; line-height: 1.5; }
.composer:focus-within { border-color: var(--blue-line); box-shadow: 0 8px 28px var(--ring), 0 0 0 3px var(--ring); }
.composer textarea { display: block; width: 100%; max-height: 150px; padding: 4px 3px 7px; overflow-y: auto; color: var(--ink); background: transparent; border: 0; outline: none; resize: none; font-size: 14px; line-height: 1.55; }
.composer textarea::placeholder { color: var(--ink-faint); }
.composer-actions { display: flex; align-items: center; justify-content: space-between; }
.input-hint { margin-right: auto; color: var(--ink-faint); font-size: 10.5px; }
.attach-button { display: flex; align-items: center; gap: 6px; margin-right: 12px; padding: 6px 10px; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; font-size: 11.5px; font-weight: 650; cursor: pointer; }
.attach-button:hover { color: var(--blue-ink); background: var(--blue-soft); border-color: var(--blue-line); }
.attach-button svg { width: 15px; height: 15px; }
.attachment-row { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 0 9px; }
.attachment-chip { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 8px 7px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; font-size: 11.5px; }
.attachment-chip.san_sang { background: var(--blue-soft); border-color: var(--blue-line); }
.attachment-chip.loi { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
.attachment-chip > svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--blue); }
.attachment-chip.loi > svg { color: var(--danger); }
.attachment-info { display: grid; min-width: 0; }
.attachment-info strong { overflow: hidden; font-size: 11.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.attachment-info small { color: var(--ink-mute); font-size: 10px; }
.attachment-chip.loi .attachment-info small { color: var(--danger-ink); }
.attachment-chip.dang_xu_ly > svg { animation: pulse 1.4s infinite; }
.attachment-action { padding: 4px 8px; color: var(--blue-ink); background: transparent; border: 1px solid var(--blue-line); border-radius: 7px; font-size: 10.5px; font-weight: 650; cursor: pointer; }
.attachment-action:hover { background: var(--surface); }
.attachment-remove { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; color: var(--ink-mute); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.attachment-remove:hover { color: var(--danger); background: var(--hover-wash); }
.attachment-remove svg { width: 13px; height: 13px; }
.user-attachments { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.user-attachment { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font-size: 10.5px; }
.user-attachment svg { width: 12px; height: 12px; }
.composer.dang-keo { border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--ring); }
.send-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: white; background: var(--navy); border: 0; border-radius: 11px; cursor: pointer; transition: opacity .15s, transform .15s; }
.send-button:hover:not(:disabled) { transform: translateY(-1px); }
.send-button:disabled { cursor: not-allowed; opacity: .35; }
.send-button svg { width: 18px; height: 18px; }
.disclaimer { margin: 9px 0 0; color: var(--ink-faint); font-size: 10.5px; text-align: center; }
.connection-alert { margin: 0 0 8px; padding: 9px 12px; color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: 10px; font-size: 12px; text-align: center; }
.connection-alert.error { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger-line); }
.hidden { display: none !important; }
.sidebar-backdrop { display: none; }
/* --- Popup tiến trình tải lên kho tài liệu --- */
/* Là popover nên phải ghi đè inset/margin mặc định (giữa màn hình) về góc phải dưới. */
.upload-popup { position: fixed; z-index: 60; inset: auto 24px 24px auto; margin: 0; padding: 0; display: flex; flex-direction: column; width: min(360px, calc(100vw - 32px)); max-height: 55vh; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); font-size: 12.5px; }
.upload-popup.hidden { display: none !important; }
.upload-popup-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 8px 16px; color: var(--ink); font-size: 13px; }
.upload-popup-list { flex: 1; margin: 0; padding: 0 16px; overflow-y: auto; list-style: none; }
.upload-popup-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.upload-popup-list li:first-child { border-top: 0; }
.upload-popup-name { min-width: 0; overflow: hidden; color: var(--ink-body); text-overflow: ellipsis; white-space: nowrap; }
.upload-popup-state { flex: 0 0 auto; color: var(--ink-mute); font-weight: 650; }
.upload-popup-state.thanh-cong { color: var(--ok); }
.upload-popup-state.canh-bao { color: var(--warn-ink); }
.upload-popup-state.loi { color: var(--danger-ink); }
.upload-popup-footer { padding: 8px 16px 12px; color: var(--ink-soft); line-height: 1.5; }
.upload-popup-footer:empty { display: none; }

.toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; padding: 10px 14px; color: white; background: var(--ink-body); border-radius: 10px; box-shadow: var(--shadow); font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.document-dialog { width: min(760px, calc(100vw - 30px)); height: min(720px, calc(100dvh - 36px)); padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 26px 80px rgba(15, 34, 64, .24); }
.document-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }
.confirm-dialog { width: min(400px, calc(100vw - 30px)); padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 26px 80px rgba(15, 34, 64, .24); }
.confirm-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }
.confirm-body { padding: 22px 24px 18px; }
.confirm-body h2 { margin: 0 0 8px; color: var(--ink); font-family: Cambria, "Times New Roman", serif; font-size: 21px; font-weight: 500; }
.confirm-body p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.6; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.confirm-actions button { padding: 9px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.confirm-cancel { color: var(--ink-body); background: var(--surface-2); border: 1px solid var(--line); }
.confirm-cancel:hover { background: var(--surface-3); }
.confirm-accept { color: white; background: var(--danger); border: 1px solid var(--danger); }
.confirm-accept:hover { filter: brightness(.94); }
.confirm-actions button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 14px; }
.dialog-header .eyebrow { margin-bottom: 4px; }
.dialog-header-actions { display: flex; align-items: center; gap: 8px; }
.dialog-header h2 { margin: 0; color: var(--ink); font-family: Cambria, "Times New Roman", serif; font-size: 27px; font-weight: 500; }
.document-summary { min-height: 18px; padding: 0 24px 14px; color: var(--ink-soft); font-size: 11.5px; }
.document-search { display: flex; align-items: center; gap: 9px; margin: 0 24px 14px; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.document-search:focus-within { border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--ring); }
.document-search svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--ink-mute); }
.document-search input { width: 100%; color: var(--ink); background: transparent; border: 0; outline: 0; font: inherit; font-size: 13px; }
.document-list { height: calc(100% - 142px); padding: 0 16px 18px; overflow-y: auto; }
.document-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 9px; color: inherit; border-bottom: 1px solid var(--surface-3); text-decoration: none; }
.document-row[href]:hover { background: var(--surface-2); border-radius: 10px; }
.document-type { display: grid; place-items: center; width: 42px; height: 38px; color: var(--blue); background: var(--blue-soft); border-radius: 9px; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.document-info { min-width: 0; }
.document-info strong, .document-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-info strong { font-size: 12.5px; font-weight: 650; }
.document-info small { margin-top: 4px; color: var(--ink-mute); font-size: 10.5px; }
.document-status { padding: 4px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.document-status.processed { color: var(--ok); background: var(--ok-soft); }
.document-status.no_text { color: var(--warn-ink); background: var(--warn-soft); }
.document-status.duplicate { color: var(--purple); background: var(--purple-soft); }
.document-status.error { color: var(--danger-ink); background: var(--danger-soft); }
.document-status.pending { color: var(--danger-ink); background: var(--danger-soft); }
.document-empty { padding: 50px 20px; color: var(--ink-faint); font-size: 13px; text-align: center; }
.document-empty.error { color: var(--danger-ink); }

@keyframes pulse { 50% { opacity: .45; transform: scale(.86); } }
@keyframes bounce { 0%, 65%, 100% { transform: translateY(0); opacity: .45; } 32% { transform: translateY(-5px); opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } }

@media (max-width: 800px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(84vw, 310px); transform: translateX(-102%); transition: transform .22s ease; box-shadow: 18px 0 46px rgba(23, 43, 77, .16); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; z-index: 15; inset: 0; display: block; padding: 0; background: var(--backdrop); border: 0; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
  .menu-button { display: grid; }
  .topbar { padding: 0 16px; }
  .model-pill span { display: none; }
  .welcome { width: min(100% - 28px, 650px); padding-top: 42px; }
  .suggestion-grid { grid-template-columns: 1fr; }
  .messages { width: calc(100% - 28px); padding-top: 25px; }
  .composer-area { padding: 8px 14px 12px; }
  .input-hint { display: none; }
  .attach-button span { display: none; }
  .attach-button { margin-right: auto; }
  .composer-actions { justify-content: flex-end; }
  .disclaimer { font-size: 9.5px; }
}

@media (max-width: 470px) {
  .welcome-emblem { width: 56px; height: 56px; }
  h1 { font-size: 32px; }
  .welcome-copy { font-size: 13px; }
  .suggestion-card { padding: 13px; }
  .message { grid-template-columns: 31px minmax(0, 1fr); gap: 10px; }
  .avatar { width: 31px; height: 31px; }
  .user-bubble { max-width: 94%; }
  .document-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
  .confirm-dialog { width: calc(100vw - 24px); }
  .confirm-body { padding: 18px 17px 16px; }
  .dialog-header { padding: 18px 17px 12px; }
  .document-summary { padding: 0 17px 12px; }
  .document-search { margin: 0 17px 10px; }
  .document-list { padding-inline: 8px; }
  .document-row { grid-template-columns: 40px minmax(0, 1fr); }
  .document-status { grid-column: 2; width: fit-content; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   NÂNG CẤP GIAO DIỆN
   ============================================================ */

/* --- Bề rộng nội dung: 820px để lại quá nhiều khoảng trống trên màn rộng --- */
:root { --do-rong-noi-dung: 880px; }
.messages { width: min(var(--do-rong-noi-dung), calc(100% - 40px)); }
.composer-area { padding: 10px max(24px, calc((100% - var(--do-rong-noi-dung)) / 2)) 18px; }
.welcome { max-width: min(var(--do-rong-noi-dung), calc(100% - 40px)); }

/* --- Bảng trong câu trả lời ---
   Kho có thời khóa biểu, phân phối chương trình, khung trình độ - trước đây mọi
   bảng đều bị đổ thành văn xuôi. Bọc trong khung cuộn ngang riêng để bảng rộng
   không đẩy giãn cả trang. */
.answer-table { margin: 15px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.answer-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.answer-table th, .answer-table td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.answer-table thead th { color: var(--ink); background: var(--surface-3); font-weight: 700; white-space: nowrap; }
.answer-table tbody tr:nth-child(even) { background: var(--surface-2); }
.answer-table tbody tr:last-child td { border-bottom: 0; }

/* --- Nhãn hiệu lực trên chip nguồn --- */
.source-validity { flex: 0 0 auto; margin-left: 2px; padding: 1px 7px; border-radius: 20px; font-size: 10px; font-weight: 750; letter-spacing: .02em; white-space: nowrap; }
.source-validity.muc-cao { color: var(--danger-ink); background: var(--danger-soft); }
.source-validity.muc-vua { color: var(--warn-ink); background: var(--warn-soft); }
.source-validity.muc-thap { color: var(--ok); background: var(--ok-soft); }
.source-chip.canh-bao-cao { border-color: var(--danger-line); }

/* --- Gập thanh bên trên màn hình lớn --- */
.app-shell { transition: grid-template-columns .2s ease; }
/* Mặc định ẩn; chỉ màn hình rộng mới có khái niệm "gập" - màn hẹp đã dùng kiểu
   ngăn kéo với nút menu riêng. Thứ tự hai khối này quan trọng: đặt ngược lại thì
   luật không điều kiện sẽ đè mất luật trong @media và nút biến mất hoàn toàn. */
.collapse-button { display: none; }
@media (min-width: 801px) {
  .collapse-button { display: grid; }
  .app-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
  .app-shell.sidebar-collapsed .sidebar { padding-left: 0; padding-right: 0; border-right-color: transparent; overflow: hidden; }
  .app-shell.sidebar-collapsed .sidebar > * { visibility: hidden; }
}

/* --- Nút cuộn xuống cuối, chỉ hiện khi đang đọc ở giữa mạch hội thoại --- */
.scroll-bottom { position: absolute; right: 24px; bottom: 118px; z-index: 5; display: grid; place-items: center; width: 38px; height: 38px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow); cursor: pointer; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .18s, transform .18s; }
.scroll-bottom.hien { opacity: 1; transform: none; pointer-events: auto; }
.scroll-bottom:hover { color: var(--blue); border-color: var(--blue-line); }
.scroll-bottom svg { width: 18px; height: 18px; stroke-width: 2.2; }

/* --- Chi tiết nhỏ: viền lấy nét rõ ràng, thanh cuộn mảnh --- */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.chat-scroll { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.chat-scroll::-webkit-scrollbar { width: 10px; }
.chat-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); background-clip: content-box; border: 3px solid transparent; border-radius: 10px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.main-panel { position: relative; }

/* Nút sáng/tối: hiện mặt trời khi đang nền sáng, mặt trăng khi đang nền tối. */
.theme-toggle .icon-toi { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sang { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-toi { display: block; }

/* Nút sáng/tối đứng sát thẻ mô hình ở mép phải thanh trên. */
.topbar .theme-toggle { margin-left: auto; }
.topbar .model-picker { margin-left: 0; }

/* ============================================================
   GỢI Ý CÂU HỎI
   ============================================================
   Hai chỗ dùng cùng một kiểu chip: hàng "Gợi ý khác" dưới bốn thẻ chủ đề ở màn
   hình chào, và hàng "Hỏi tiếp" dưới mỗi câu trả lời. Chip chỉ một dòng, dài
   quá thì cắt bằng dấu ba chấm - chờ đọc hết một câu hỏi dài ba dòng thì thà
   tự gõ còn nhanh hơn; nội dung đầy đủ vẫn có trong title khi trỏ chuột. */
.suggestion-more { margin-top: 20px; text-align: left; }
.suggestion-more-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: var(--ink-mute); font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.suggestion-refresh { display: flex; align-items: center; gap: 6px; padding: 5px 9px; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: 20px; font: inherit; font-size: 10.5px; letter-spacing: .04em; cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.suggestion-refresh:hover { color: var(--blue); background: var(--surface); border-color: var(--blue-line); }
.suggestion-refresh:disabled { opacity: .5; cursor: default; }
.suggestion-refresh svg { width: 14px; height: 14px; stroke-width: 2; }
.suggestion-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.suggestion-chip { display: flex; align-items: center; max-width: 100%; padding: 7px 13px; color: var(--ink-body); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; transition: border-color .18s, color .18s, box-shadow .18s, transform .18s; }
.suggestion-chip:hover { color: var(--blue-ink); border-color: var(--blue-line); box-shadow: 0 3px 10px var(--hover-wash); transform: translateY(-1px); }
.suggestion-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Hàng hỏi tiếp dưới câu trả lời --- */
.goi-y-tiep { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.goi-y-title { margin-bottom: 9px; color: var(--ink-mute); font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.goi-y-tiep .suggestion-chip { background: var(--surface-2); font-size: 12px; }

@media (max-width: 800px) {
  /* Màn hẹp: chip xếp thành cột một dòng cho dễ bấm bằng ngón tay. */
  .suggestion-chips { flex-direction: column; }
  .suggestion-chip { width: 100%; }
}