/* ============ MarkIt × Screenshot-to-Code Studio — design system ============ */

:root {
  --bg: #0b0f1a;
  --bg-2: #111827;
  --panel: #131b2c;
  --panel-2: #182236;
  --line: #24304a;
  --line-2: #2f3d5c;
  --text: #e6ecf7;
  --dim: #93a1bd;
  --dim-2: #6b7a99;
  --accent: #6d5efc;
  --accent-2: #22d3ee;
  --ok: #22c55e;
  --warn: #f59e0b;
  --err: #ef4444;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .75);
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

html[data-theme="light"] {
  --bg: #f4f6fb;
  --bg-2: #ffffff;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --text: #0f172a;
  --dim: #55627a;
  --dim-2: #8492ab;
  --shadow: 0 14px 34px -20px rgba(15, 23, 42, .35);
}

* { box-sizing: border-box; }
/* text-size-adjust: chặn Safari iOS tự phóng to chữ khi xoay ngang. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(1100px 600px at 12% -12%, rgba(109, 94, 252, .22), transparent 60%),
    radial-gradient(900px 520px at 92% -6%, rgba(34, 211, 238, .16), transparent 62%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  font-size: 14.5px;
  line-height: 1.55;
}
html[data-theme="light"] body { background: radial-gradient(900px 500px at 10% -14%, rgba(109,94,252,.14), transparent 60%), var(--bg); }

a { color: var(--accent-2); }
code, kbd, pre { font-family: var(--mono); }
kbd { background: var(--panel-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font-size: .85em; }
.hidden { display: none !important; }
.muted { color: var(--dim); }
.small { font-size: .85rem; }
.dim { color: var(--dim-2); }

/* ------------------------------------------------------------------ topbar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 22px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center; font-weight: 800; letter-spacing: -.5px; font-size: 15px;
  background: linear-gradient(135deg, var(--accent), #a855f7 55%, var(--accent-2));
  color: #fff; box-shadow: 0 8px 22px -10px var(--accent);
}
.brand-mark span { opacity: .65; margin: 0 1px; }
.brand-text h1 { margin: 0; font-size: 15.5px; letter-spacing: -.2px; white-space: nowrap; }
.brand-text .studio { color: var(--dim); font-weight: 500; }
.brand-text p { margin: 1px 0 0; font-size: 11.5px; color: var(--dim-2); white-space: nowrap; }

.tabs { display: flex; gap: 4px; margin-left: auto; background: var(--panel); padding: 4px; border-radius: 12px; border: 1px solid var(--line); }
.tab {
  border: 0; background: transparent; color: var(--dim); cursor: pointer;
  padding: 8px 13px; border-radius: 9px; font-size: 13px; font-weight: 600; font-family: inherit;
  transition: .16s;
}
.tab:hover { color: var(--text); background: var(--panel-2); }
.tab.active { color: #fff; background: linear-gradient(135deg, var(--accent), #7c3aed); box-shadow: 0 6px 18px -10px var(--accent); }
/* Nhãn ngắn (icon + 1-2 chữ) chỉ dùng ở breakpoint mobile — xem khối @media cuối file.
   Ở desktop vẫn hiện icon + nhãn đầy đủ y như trước khi làm responsive. */
.tab-ico { display: inline; }
.tab-short { display: none; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.chip {
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: 999px; padding: 7px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 7px; transition: .16s;
}
.chip:hover { border-color: var(--accent); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dim-2) 25%, transparent); }
.chip.ok .dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(34,197,94,.22); }
.chip.warn .dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(245,158,11,.22); }
.chip-provider { max-width: 320px; }
.chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-mini { padding: 4px 9px; font-size: 11.5px; background: var(--panel-2); }
.icon-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); cursor: pointer; font-size: 15px;
}
.icon-btn:hover { border-color: var(--accent); }

/* ------------------------------------------------------------------ layout */
.workspace { padding: 20px 22px 60px; max-width: 1720px; margin: 0 auto; }
.panel { display: none; animation: fade .22s ease; }
.panel.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.panel-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.panel-head h2 { margin: 0 0 3px; font-size: 21px; letter-spacing: -.3px; }
.panel-head p { margin: 0; font-size: 13px; }
.panel-head-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ver { font-size: 11px; font-family: var(--mono); color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); padding: 2px 7px; border-radius: 6px; vertical-align: middle; }

.grid-docs, .grid-code { display: grid; grid-template-columns: minmax(330px, 400px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 1080px) { .grid-docs, .grid-code { grid-template-columns: 1fr; } }
.col-left, .col-right { min-width: 0; }
.col-left { display: flex; flex-direction: column; gap: 12px; }

/* ---------------------------------------------------------------- switch  */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--dim); user-select: none; }
.switch input { display: none; }
.switch .slider { width: 34px; height: 19px; border-radius: 999px; background: var(--line-2); position: relative; transition: .18s; flex: none; }
.switch .slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: .18s; }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::after { transform: translateX(15px); }
.switch em { font-style: normal; }

.ocr-status {
  font-size: 11.5px; font-family: var(--mono); padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--dim); white-space: nowrap; cursor: help;
}
.ocr-status.on {
  color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}
.ocr-status.off {
  color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}
.ocr-status b { font-weight: 700; }

/* --------------------------------------------------------------- dropzone */
.dropzone {
  position: relative; border: 1.5px dashed var(--line-2); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  padding: 26px 18px; text-align: center; cursor: pointer; transition: .18s; overflow: hidden;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); outline: none; }
.dropzone.over { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, var(--panel)); transform: scale(1.005); }
.dropzone.small { padding: 18px 14px; }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz-inner { display: flex; flex-direction: column; gap: 4px; align-items: center; pointer-events: none; }
.dz-icon { font-size: 26px; }
.dz-inner strong { font-size: 14.5px; }
.dz-inner span { font-size: 12px; color: var(--dim); }
.dz-inner small { font-size: 10.5px; color: var(--dim-2); margin-top: 6px; letter-spacing: .2px; }

/* ------------------------------------------------------------------ lists */
.filelist, .thumblist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.filelist li {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px;
}
.filelist .fx { background: none; border: 0; color: var(--dim-2); cursor: pointer; font-size: 15px; padding: 0 2px; }
.filelist .fx:hover { color: var(--err); }
.file-meta { font-size: 10.5px; color: var(--dim-2); font-family: var(--mono); }
.file-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--dim); }
.status-pill.pending { color: var(--dim); }
.status-pill.running { color: var(--warn); border-color: var(--warn); }
.status-pill.done { color: var(--ok); border-color: var(--ok); }
.status-pill.error { color: var(--err); border-color: var(--err); }
.filelist li.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }

.thumblist { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
.thumblist li { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.thumblist img { display: block; width: 100%; height: 78px; object-fit: cover; }
.thumblist .rm { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 6px; border: 0; background: rgba(0,0,0,.62); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; }
.thumblist .rm:hover { background: var(--err); }
.thumblist .tname { font-size: 9.5px; color: var(--dim-2); padding: 3px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ forms */
.lbl { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--dim-2); margin: 12px 0 5px; font-weight: 600; }
textarea, input[type=text], input[type=url], input[type=password], input[type=number],
input[type=search], input[type=email], input[type=tel], input[type=range], select {
  width: 100%; font-family: inherit; font-size: 13px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px;
  transition: .15s;
}
/* Ô tìm kiếm dùng appearance:none để trình duyệt không vẽ kiểu mặc định của nó
   (Chrome/Safari cho <input type=search> chiều cao rất thấp, lệch hẳn các ô khác)
   rồi tự thêm lại nút ✕ = clear qua ::-webkit-search-cancel-button. */
input[type=search] { appearance: none; -webkit-appearance: none; }
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; }
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
textarea { resize: vertical; min-height: 66px; }
input[type=range] { padding: 0; height: 30px; background: transparent; border: 0; }
.select { width: auto; min-width: 130px; }
.field-inline { display: flex; align-items: center; gap: 8px; }
.field-inline label { font-size: 12px; color: var(--dim); }
.url-row { display: flex; gap: 8px; }
.url-row input { flex: 1; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sub-h {
  margin: 22px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: -.1px;
  border-top: 1px dashed var(--line); padding-top: 14px;
}

/* ------------------------------------------------------------------ btns  */
.btn {
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text);
  border-radius: var(--radius-sm); padding: 9px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: .16s; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn.primary { background: linear-gradient(135deg, var(--accent), #7c3aed); border-color: transparent; color: #fff; box-shadow: 0 10px 26px -14px var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { background: color-mix(in srgb, var(--err) 16%, transparent); border-color: var(--err); color: #fff; }
.btn.tiny { padding: 6px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.row-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.samples { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.busy-bar { position: fixed; top: 0; left: 0; height: 2px; width: 30%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); z-index: 90; animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }

/* ----------------------------------------------------------------- result */
.result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.result-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--dim); padding: 6px 11px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
}
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.seg.mini button { padding: 4px 8px; font-size: 11.5px; }
.badge { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 10px; }

.result-body {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  min-height: 460px; max-height: calc(100vh - 250px); overflow: auto; box-shadow: var(--shadow);
  /* dvh = chiều cao thật của khung nhìn trên mobile (100vh bị thanh địa chỉ ăn mất). */
  max-height: calc(100dvh - 250px);
}
.preview-body { padding: 0; background: #fff; border-color: var(--line); }
html[data-theme="light"] .preview-body { background: #fff; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 420px; color: var(--dim-2); text-align: center; padding: 20px; }
.empty-icon { font-size: 40px; opacity: .5; }

.raw { margin: 0; padding: 16px 18px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.raw.tiny { font-size: 11.5px; max-height: 260px; overflow: auto; }

.warnings { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.warn-item { font-size: 12.5px; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: var(--radius-sm); padding: 8px 11px; }
.warn-item.err { color: #fff; background: color-mix(in srgb, var(--err) 18%, transparent); border-color: var(--err); }

/* --------------------------------------------------------------- markdown */
.markdown { padding: 22px 26px; max-width: 900px; }
.markdown > :first-child { margin-top: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { line-height: 1.3; margin: 1.5em 0 .5em; letter-spacing: -.3px; }
.markdown h1 { font-size: 1.85em; border-bottom: 1px solid var(--line); padding-bottom: .3em; }
.markdown h2 { font-size: 1.4em; }
.markdown h3 { font-size: 1.15em; }
.markdown p { margin: .7em 0; }
.markdown ul, .markdown ol { padding-left: 1.4em; margin: .7em 0; }
.markdown li { margin: .25em 0; }
.markdown blockquote { margin: 1em 0; padding: .5em 1em; border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 0 8px 8px 0; color: var(--dim); }
.markdown code { background: var(--panel-2); border: 1px solid var(--line); padding: .1em .35em; border-radius: 5px; font-size: .88em; }
.markdown pre { background: #0a0f1c; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow: auto; }
.markdown pre code { background: none; border: 0; padding: 0; color: #d7e2f5; font-size: 12.5px; }
.markdown table { border-collapse: collapse; width: 100%; margin: 1.1em 0; font-size: 13px; display: block; overflow-x: auto; }
.markdown th, .markdown td { border: 1px solid var(--line); padding: 7px 11px; text-align: left; }
.markdown th { background: var(--panel-2); font-weight: 700; }
.markdown tr:nth-child(even) td { background: color-mix(in srgb, var(--panel-2) 55%, transparent); }
.markdown img { max-width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.markdown hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }
.markdown a { color: var(--accent-2); }

.stats { padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stat b { display: block; font-size: 21px; letter-spacing: -.5px; }
.stat span { font-size: 11.5px; color: var(--dim-2); text-transform: uppercase; letter-spacing: .5px; }
.assets { padding: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.asset { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.asset img { width: 100%; height: 120px; object-fit: contain; background: #fff; display: block; }
.asset div { padding: 6px 8px; font-size: 11px; color: var(--dim-2); font-family: var(--mono); }

/* ------------------------------------------------------------------ frame */
.frame-wrap { background: #fff; min-height: 460px; display: flex; justify-content: center; transition: .2s; }
#preview-frame { width: 100%; border: 0; min-height: 460px; height: calc(100vh - 260px); background: #fff; transition: width .25s ease; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
.compare figure { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.compare img { width: 100%; display: block; }
.compare figcaption { font-size: 11.5px; color: var(--dim-2); padding: 6px 9px; font-family: var(--mono); }
.log { padding: 16px 18px; font-family: var(--mono); font-size: 12px; line-height: 1.65; white-space: pre-wrap; color: var(--dim); }
.log .err { color: var(--err); }
.log .ok { color: var(--ok); }
.log .hl { color: var(--accent-2); }
.gen-meta { font-size: 12px; color: var(--dim-2); font-family: var(--mono); }
.progress { height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress .bar { height: 100%; width: 20%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { width: 18%; } 50% { width: 72%; } }
.refine-box { border-top: 1px dashed var(--line); padding-top: 4px; }

/* --------------------------------------------------------------- history  */
.history-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.hist-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; transition: .16s; }
.hist-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.hist-card h4 { margin: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-card .kind { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; font-weight: 700; color: var(--accent-2); }
.hist-card pre { margin: 0; font-size: 11px; color: var(--dim-2); max-height: 74px; overflow: hidden; font-family: var(--mono); white-space: pre-wrap; }
.hist-card .row-actions { margin-top: auto; }

/* ------------------------------------------------------------------- help */
.grid-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.help-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.help-card.wide { grid-column: 1 / -1; }
.help-card h3 { margin: 0 0 10px; font-size: 16px; }
.steps { margin: 0 0 14px; padding-left: 18px; color: var(--dim); }
.steps li { margin: 5px 0; }
.tips { margin: 0; padding-left: 18px; color: var(--dim); }
.tips li { margin: 6px 0; }
.hint { margin-top: 12px; font-size: 12px; color: var(--dim-2); font-family: var(--mono); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; white-space: pre-wrap; }
.formats-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.fmt { border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; background: var(--panel-2); }
.fmt b { display: block; font-size: 13px; }
.fmt span { font-size: 11px; color: var(--dim-2); font-family: var(--mono); }
.fmt.llm { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

/* ----------------------------------------------------------------- drawer */
/* Đóng drawer bằng translateX + visibility, KHÔNG chỉ bằng right:-460px.
   Lý do: ở breakpoint mobile drawer rộng 100vw, nên right:-460px vẫn để lại một
   phần thân drawer nằm trong màn hình và che lên drawer/scrim khác (cùng z-index
   60) — bấm vào nút ✕ của drawer đang mở sẽ trúng drawer đang đóng. */
.drawer {
  position: fixed; top: 0; right: 0; width: 440px; max-width: 94vw; height: 100%;
  background: var(--bg-2); border-left: 1px solid var(--line); z-index: 60;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px -30px rgba(0,0,0,.8);
}
.drawer.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { margin: 0; font-size: 16px; }
.drawer-body { padding: 6px 18px 24px; overflow: auto; }
.scrim { position: fixed; inset: 0; background: rgba(3,6,15,.55); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: .2s; z-index: 55; }
.scrim.show { opacity: 1; pointer-events: auto; }
.provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcard { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 9px 11px; cursor: pointer; text-align: left; font-family: inherit; color: var(--text); transition: .15s; }
.pcard:hover { border-color: var(--accent); }
.pcard.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.pcard b { display: block; font-size: 12.5px; }
.pcard span { font-size: 10.5px; color: var(--dim-2); }

/* ----------------------------------------------------------------- toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 9px; z-index: 80; max-width: 420px; }
.toast {
  background: var(--panel-2); border: 1px solid var(--line-2); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 11px 14px; font-size: 13px; box-shadow: var(--shadow);
  animation: pop .2s ease; display: flex; gap: 9px; align-items: flex-start;
}
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--err); }
.toast.warn { border-left-color: var(--warn); }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* =================================================== SỔ TOKEN (/api/usage) === */
.chip-usage { max-width: 220px; }
.chip-usage .chip-label { font-variant-numeric: tabular-nums; }
.chip-usage.ok { border-color: color-mix(in srgb, var(--accent-2) 55%, transparent); color: var(--accent-2); }

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-head .row-actions { margin: 0; flex: none; }

.usage-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.usage-tiles .stat b { font-variant-numeric: tabular-nums; }
.usage-tiles .stat em {
  display: block; margin-top: 6px; font-style: normal; font-size: 11px; color: var(--dim-2); line-height: 1.35;
}

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 10px 0 4px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tbl th, table.tbl td {
  padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.tbl th {
  background: var(--panel-2); color: var(--dim); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px; position: sticky; top: 0;
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
table.tbl tr.today td { background: color-mix(in srgb, var(--ok) 9%, transparent); }
table.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl .money { color: var(--accent-2); }
table.tbl .dim2 { color: var(--dim-2); }
table.tbl td:nth-child(4) { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

.tag-est {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; padding: 1px 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); border: 1px solid var(--warn);
}
.usage-note { margin-top: 10px; line-height: 1.55; }
.usage-note code { font-family: var(--mono); font-size: 11px; }

@keyframes mdcs-flash { from { box-shadow: 0 0 0 2px var(--accent-2); } to { box-shadow: 0 0 0 0 transparent; } }
.help-card.flash { animation: mdcs-flash 1.1s ease-out; }

/* Bản cũ ở đây đã được thay bằng khối "RESPONSIVE" ở cuối file. */

/* ================================================= SỔ TAY REPO (/api/repos) === */
.repos-stats { margin-top: 6px; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.repos-stats b { color: var(--text); font-weight: 700; }

.file-btn { display: inline-flex; align-items: center; gap: 6px; position: relative; overflow: hidden; cursor: pointer; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.repo-toolbar { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.repo-toolbar #repos-search { flex: 1 1 320px; min-width: 220px; }
.repo-toolbar .select { min-width: 150px; }
.repo-fav-toggle { border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12.5px; font-weight: 600; }
.repo-fav-toggle.active {
  border-color: var(--warn); color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
}

.repo-tagbar { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; min-height: 26px; }
.repo-tag {
  border: 1px solid var(--line); background: var(--panel); color: var(--dim);
  border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: .15s;
}
.repo-tag:hover { border-color: var(--accent); color: var(--text); }
.repo-tag.active { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.repo-tag span { font-size: 10px; color: var(--dim-2); font-variant-numeric: tabular-nums; }
.repo-tag-clear { font-style: italic; }

.repo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.repo-loading { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; padding: 26px 4px; }

.repo-error {
  grid-column: 1 / -1; background: color-mix(in srgb, var(--err) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--err) 45%, transparent); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.repo-error b { color: var(--text); font-size: 14.5px; }
.repo-error p { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.repo-error code { font-family: var(--mono); font-size: 11.5px; }

.repo-empty {
  margin-top: 14px; border: 1.5px dashed var(--line-2); border-radius: var(--radius);
  background: var(--panel); padding: 34px 20px; text-align: center; color: var(--dim-2);
}
.repo-empty p { margin: 6px 0 0; font-size: 13px; }

/* ------------------------------------------------------------------- card -- */
/* `overflow-wrap` là thuộc tính KẾ THỪA, nên đặt ở đây là đủ cho mọi chữ trong card.
   Trước đây chỉ có trong @media mobile, nên trên desktop một chuỗi không có khoảng
   trắng (URL dài trong ô "Repo làm gì?", hoặc gõ liền không dấu cách) không ngắt được
   dòng: nó tràn khỏi card và đẩy cả trang rộng ra (~3900px trên màn 1920px).
   Dùng `anywhere` chứ không phải `break-word`: `anywhere` mới làm giảm cả kích thước
   min-content, nên chữ chịu ngắt ngay cả khi card là flex/grid item. */
.repo-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; transition: .16s; min-width: 0;
  overflow-wrap: anywhere; word-break: break-word;
}
.repo-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.repo-card.fav { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.repo-card.fav::before { content: ""; }

.repo-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

/* ---------------------------------------------------------------- logo repo --
   Ô logo 30px: badge chữ cái nằm dưới, <img> phủ lên khi tải xong (xem logoHtml).
   `position: relative` + `overflow: hidden` để ảnh vuông bo góc không tràn ra ngoài.
   `flex: none` để logo không bị bóp méo khi tên repo dài. */
.repo-logo {
  position: relative; flex: none; width: 30px; height: 30px; border-radius: 8px;
  overflow: hidden; background: var(--panel-2); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.repo-logo-badge {
  font-size: 13px; font-weight: 800; line-height: 1; color: #fff; user-select: none;
  width: 100%; height: 100%; display: grid; place-items: center;
  /* Màu suy từ tên (--hue do JS đặt) để mỗi repo một màu ổn định, không phải random
     mỗi lần render — nếu random thì badge nhấp nháy mỗi lần lọc/sắp xếp. */
  background: hsl(var(--hue, 210) 62% 46%);
}
/* Ẩn bằng opacity, KHÔNG dùng `display: none` (thuộc tính `hidden`): ảnh display:none
   bị coi là không nhìn thấy nên `loading="lazy"` không tải -> không có sự kiện load ->
   kẹt ẩn vĩnh viễn. Badge nằm dưới, ảnh phủ lên khi có lớp .is-loaded. */
.repo-logo-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  background: var(--panel-2); opacity: 0; transition: opacity .18s;
}
.repo-logo-img.is-loaded { opacity: 1; }
/* Phần đầu card: tên + URL cùng một cột, chiếm hết chỗ còn lại. */
.repo-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }

.repo-name {
  font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; color: var(--text);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
a.repo-name:hover { color: var(--accent-2); text-decoration: underline; }
.repo-url {
  font-family: var(--mono); font-size: 11px; color: var(--dim-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Chuỗi dài trong mô tả: ngắt cả khi không có khoảng trắng (URL dán vào, gõ liền tay).
   Đặt thẳng ở đây thay vì chỉ trong @media mobile — xem ghi chú ở .repo-card. */
.repo-desc { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.5; overflow-wrap: anywhere; }
.repo-snippet {
  margin: 0; padding: 9px 11px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  color: var(--text); white-space: pre-wrap; word-break: break-word; max-height: 132px; overflow: auto;
}
/* Link bài viết trên card: nhãn ngắn + host, để không chiếm nhiều dòng.
   `min-width: 0` + ellipsis cho host vì tên miền cũng có thể dài bất thường. */
.repo-article {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  max-width: 100%; min-width: 0;
  font-size: 11.5px; font-weight: 600; color: var(--accent-2); text-decoration: none;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2); transition: .14s;
}
.repo-article:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.repo-article-host {
  font-weight: 500; font-size: 10.5px; color: var(--dim-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.repo-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.repo-tags .repo-tag { padding: 2px 8px; font-size: 10.5px; background: var(--panel-2); }
.repo-meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-size: 11px; color: var(--dim-2); font-variant-numeric: tabular-nums;
}
.repo-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 2px; }
.repo-actions .btn { padding: 5px 9px; font-size: 11.5px; }

/* ------------------------------------------------------- status pill (5 loại) */
.repo-status-pill {
  flex: none; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--dim); background: var(--panel-2); white-space: nowrap;
}
.repo-status-pill.status-idea { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 50%, transparent); background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
.repo-status-pill.status-try { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.repo-status-pill.status-using { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.repo-status-pill.status-paused { color: var(--dim); border-color: var(--line-2); background: var(--panel-2); }
.repo-status-pill.status-archived { color: var(--dim-2); border-color: var(--line); background: transparent; text-decoration: line-through; }

/* ------------------------------------------------------------------ drawer */
.drawer.repo { width: 470px; }
.drawer.repo .drawer-body { padding-top: 4px; }
.drawer.repo textarea.mono { font-family: var(--mono); font-size: 12px; }
.drawer-actions { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.drawer-actions .btn { min-width: 96px; justify-content: center; }
.repo-fav-switch { margin-top: 14px; }

@media (max-width: 900px) {
  .repo-grid { grid-template-columns: 1fr; }
  .repo-toolbar #repos-search { flex-basis: 100%; }
  .repo-toolbar .select { flex: 1 1 140px; min-width: 0; }
  .drawer.repo { width: 100%; max-width: 100vw; }
  .repo-card:hover { transform: none; }
}



/* ============================================================================
   RESPONSIVE — điện thoại, tablet, màn hình hẹp
   ----------------------------------------------------------------------------
   Thứ tự breakpoint (mobile-first ngược, desktop giữ nguyên hoàn toàn):
     <= 1080px  : lưới 2 cột -> 1 cột (đã có ở .grid-docs/.grid-code)
     <= 900px   : tablet dọc  — header gọn, tab thành thanh dưới đáy
     <= 600px   : điện thoại  — chữ/nút to hơn, chừa safe-area
     <= 380px   : máy rất nhỏ (iPhone SE 1, Galaxy A03…)

   QUY TẮC QUAN TRỌNG NHẤT: khối này chỉ được THU NHỎ / XẾP LẠI, không đổi
   màu sắc, không đổi font chữ gốc, để bản desktop không bị lệch một pixel.
   ========================================================================= */

/* ---------------------------------------------------- chống tràn ngang --- */
/* Toàn bộ các luật trong khối này CHỈ áp dụng <= 900px, để bản desktop giữ
   nguyên từng pixel so với trước khi làm responsive.
   min-width:0 là bắt buộc trên mobile: flex/grid con mặc định có min-width:auto
   nên chữ dài (tên model, URL, tên file) sẽ đẩy cả trang rộng ra — đây chính là
   nguyên nhân trang bị trình duyệt "thu nhỏ" (layout viewport 493px trên máy 390px). */
@media (max-width: 900px) {
  .topbar, .brand, .brand-text, .topbar-right, .tabs,
  .workspace, .panel, .panel-head, .panel-head-actions,
  .grid-docs, .grid-code, .col-left, .col-right,
  .result-head, .result-actions, .seg,
  .repo-toolbar, .repo-tagbar, .history-list,
  .grid-help, .help-card, .card-head,
  .drawer, .drawer-head, .drawer-body { min-width: 0; }

  .brand-text { overflow: hidden; }
  .brand-text h1, .brand-text p { overflow: hidden; text-overflow: ellipsis; }
}

/* ============================ 901px..1439px: laptop nhỏ / tablet ngang =====
   Trước khi làm responsive, khoảng này vốn đã bị tràn ngang (+32px @1280,
   +120px @1024): .topbar là flex nowrap, brand + chip đều nowrap nên không co
   lại được, còn nhãn tab thì bị bóp và xuống dòng.
   Một hàng không thể chứa đủ: brand 321 + tabs 684 + chip 471 + gap + padding
   ≈ 1556px, nên chỉ từ 1440px trở lên mới vừa. Vì vậy trong khoảng này cho
   thanh tab xuống hàng riêng, giãn đều hết chiều ngang — header gọn, hết tràn
   ngang, nhãn tab không bị ngắt dòng. Từ 1440px trở lên KHÔNG đổi gì. */
@media (min-width: 901px) and (max-width: 1439px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .brand { min-width: 0; }
  .brand-text { min-width: 0; }
  .brand-text h1, .brand-text p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabs {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
  .tab { flex: 1 1 0; min-width: 0; white-space: nowrap; text-align: center; }
  .chip-provider { max-width: 300px; }
}

/* Ảnh / bảng / code dài không được đẩy layout rộng ra ngoài màn hình.
   KHÔNG đặt overflow-wrap cho selector TOÀN CỤC: nó làm đổi cách ngắt dòng của văn
   bản bình thường (help-card cao thêm 18px). Chỉ bật cho những khối thật sự chứa
   chuỗi do người dùng gõ (.repo-card ở trên, và danh sách trong @media mobile). */
.markdown pre, .markdown table, .repo-snippet, .raw, .log, .hint { max-width: 100%; }

/* ------------------- thiết bị cảm ứng: chữ ô nhập phải >= 16px ------------
   iOS Safari (iPhone VÀ iPad) tự phóng to trang khi focus vào ô nhập có cỡ chữ
   < 16px. Không thể dựa vào @media width vì iPad ngang rộng 1024px vẫn dính,
   nên nhắm thẳng vào thiết bị cảm ứng bằng pointer:coarse. */
@media (hover: none) and (pointer: coarse) {
  /* Dùng danh sách "trừ" thay vì input[type=text]: ô nhập không khai báo type
     (mặc định là text) KHÔNG khớp selector input[type=text] — đây là lý do các ô
     trong drawer cấu hình vẫn ở 13px và iOS vẫn tự zoom khi focus. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  textarea, select, .select {
    font-size: 16px;
  }

  /* Vùng bấm tối thiểu 44px cho ngón tay. Chỉ áp cho thiết bị cảm ứng
     (iPad/tablet ngang rộng >900px cũng cần), để desktop dùng chuột giữ
     nguyên kích thước cũ. */
  .chip, .chip-mini { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; flex: none; }
  .btn, .btn.tiny { min-height: 44px; }
  .seg button { min-height: 40px; }
  .tab { min-height: 44px; }
  .switch { min-height: 44px; }
}

/* ==================================================== <= 900px: tablet ==== */
@media (max-width: 900px) {
  /* --- header: 2 hàng (brand + chip) ; tab tách xuống thanh dưới đáy ----- */
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
    /* PHẢI tắt backdrop-filter: nó tạo containing-block cho phần tử con
       position:fixed, khiến thanh tab dưới đáy bị "nhốt" vào trong header
       (tab hiện sai chỗ, đè lên header) thay vì bám đáy màn hình.
       Đổi sang nền đặc để bù lại độ tương phản khi cuộn. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg);
  }
  .brand { flex: 1 1 auto; }
  .brand-mark { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }
  .brand-text h1 { font-size: 14px; }
  .brand-text p { font-size: 10.5px; }
  .topbar-right { flex: 0 1 auto; gap: 6px; }
  .chip { padding: 6px 10px; font-size: 12px; }
  /* Hai chip này chia nhau phần chiều ngang còn lại, nút theme giữ đúng 44px.
     Trước đây đặt max-width:46vw cho chip nên tổng (163.8*2 + 44 + gap = 383px)
     vượt 366px khả dụng -> tràn 6px và trình duyệt lại nới layout viewport. */
  .chip-provider, .chip-usage { flex: 1 1 0; min-width: 0; max-width: none; }
  .icon-btn { width: 44px; height: 44px; flex: 0 0 44px; }
  .topbar-right { gap: 6px; }

  /* Thanh tab -> thanh điều hướng cố định dưới đáy, ngón cái với tới. */
  .tabs {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    order: 0;
    margin: 0;
    padding: 6px 8px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(14px);
    justify-content: space-around;
    gap: 2px;
    overflow: visible;
  }
  .tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 2px;
    border-radius: 10px;
    font-size: 10.5px;
    line-height: 1.15;
    min-height: 52px;
    justify-content: center;
  }
  .tab .tab-ico { display: block; font-size: 17px; line-height: 1; }
  .tab .tab-full { display: none; }
  .tab .tab-short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab.active { box-shadow: none; }

  /* Nội dung phải chừa chỗ cho thanh tab dưới đáy. */
  .workspace {
    padding: 14px 14px calc(78px + env(safe-area-inset-bottom));
  }

  /* --- chữ trong ô nhập >= 16px: iOS Safari không tự zoom khi focus ------ */
  /* Ô nhập không khai báo type (mặc định = text) sẽ KHÔNG khớp input[type=text],
     nên phải dùng danh sách "trừ" — nếu không các ô trong drawer vẫn 13px. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  textarea, select, .select { font-size: 16px; }

  /* --- chặn chuỗi dài (URL, tên model) đẩy trang rộng ra -----------------
     .repo-name/.repo-url/.repo-desc đã được xử lý ở khối card phía trên (áp dụng
     cho mọi bề rộng), nên ở đây chỉ còn các khối không thuộc card repo. */
  .help-card, .hist-card, .markdown, .file-name { overflow-wrap: break-word; }

  /* --- vùng kết quả thấp hơn vì màn hình dọc ---------------------------- */
  .result-body { min-height: 320px; max-height: none; }
  .empty { height: 260px; }
  #preview-frame { height: 60dvh; min-height: 320px; }
  .frame-wrap { min-height: 320px; }

  /* --- nút bấm đủ to để bấm bằng ngón tay (>= 44px theo Apple HIG) ------ */
  .btn, .btn.tiny { min-height: 44px; }
  .btn.tiny { padding: 8px 12px; font-size: 12.5px; }
  .seg button { min-height: 40px; padding: 8px 12px; }
  .chip, .chip-mini { min-height: 40px; }
  .chip-mini { padding: 9px 12px; font-size: 12px; }
  .icon-btn { width: 44px; height: 44px; flex: none; }
  /* <select> phải cao >= 44px: để padding tự nhiên thì chỉ được 43px. */
  select, .select { min-height: 44px; }
  .repo-tag { min-height: 40px; padding: 10px 12px; display: inline-flex; align-items: center; }
  .repo-fav-filter, .repo-fav-toggle { min-height: 44px; }
  /* Tên repo là link chính trong thẻ — đệm dọc để vùng bấm đủ lớn cho ngón tay. */
  .repo-name { display: inline-block; padding: 8px 0; }
  /* Nút trong thẻ repo phải >= 44px cho ngón tay. Lưu ý cascade: selector
     ".repo-actions .btn" (0,2,0) MẠNH HƠN ".btn" (0,1,0), nên phải nâng chính
     nó lên 44px — chỉ thêm luật ".btn{min-height:44px}" là không đủ. */
  .repo-actions .btn, .repo-actions .btn.tiny, .filelist .fx, .thumblist .rm { min-height: 44px; }
  .filelist .fx { width: 44px; }
  .thumblist .rm { width: 36px; height: 36px; }
  .dropzone { padding: 20px 14px; }
  .dz-icon { font-size: 24px; }

  /* Switch gạt: vùng bấm thật to hơn phần vẽ, để ngón tay không trượt. */
  .switch { min-height: 40px; padding: 4px 0; }
  .switch .slider { width: 40px; height: 23px; }
  .switch .slider::after { width: 19px; height: 19px; }
  .switch input:checked + .slider::after { transform: translateX(17px); }

  /* --- drawer: toàn màn hình, cuộn được --------------------------------- */
  .drawer, .drawer.repo { width: 100%; max-width: 100vw; height: 100dvh; }
  .drawer-body { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

  /* --- toast không được tràn ra ngoài ----------------------------------- */
  .toasts { left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); max-width: none; }

  /* --- bảng dữ liệu: cuộn ngang trong khung, không đẩy cả trang --------- */
  .tbl-wrap { -webkit-overflow-scrolling: touch; }
  table.tbl th, table.tbl td { padding: 7px 9px; }
  table.tbl td:nth-child(4) { max-width: 160px; }

  /* --- tắt hiệu ứng nhấc chuột (vô nghĩa trên cảm ứng) ------------------ */
  .btn:hover, .repo-card:hover, .hist-card:hover, .pcard:hover { transform: none; }

  /* --- lưới: về 1 cột, không đặt min cứng ------------------------------ */
  .grid-help { grid-template-columns: 1fr; }
  .repo-grid, .history-list { grid-template-columns: 1fr; }
  .thumblist { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* ================================================= <= 600px: điện thoại === */
@media (max-width: 600px) {
  .topbar { gap: 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; }
  .brand-text h1 { font-size: 13px; }
  .brand-text p { display: none; }          /* dòng phụ — bỏ để header thấp lại */
  .chip-provider, .chip-usage { max-width: 42vw; }
  .chip-label { max-width: 100%; }

  .workspace { padding: 12px 12px calc(76px + env(safe-area-inset-bottom)); }
  .panel-head { gap: 10px; margin-bottom: 12px; align-items: flex-start; }
  .panel-head h2 { font-size: 18px; }
  .panel-head p { font-size: 12px; }
  .panel-head-actions { width: 100%; gap: 10px; }
  .panel-head-actions .field-inline { flex: 1 1 140px; }
  .panel-head-actions .select { width: 100%; min-width: 0; }

  /* Ba công tắc OCR / ảnh / heading xếp 2 cột cho gọn — trước đây mỗi công tắc
     chiếm trọn một dòng vì flex-basis để "auto", làm .panel-head của tab Tài
     liệu cao 284px ở màn 320px. */
  .panel-head-actions .switch { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .panel-head-actions .switch em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Trạng thái OCR nằm cùng hàng với công tắc cuối thay vì chiếm trọn một dòng. */
  .panel-head-actions .ocr-status { flex: 0 1 auto; max-width: 100%; font-size: 10.5px; padding: 4px 7px; }
  /* Tiêu đề dài ("Microsoft MarkItDown v0.1.9 · Python 3.14.7") ngắt thành 3 dòng
     ở màn 320px — giảm cỡ chữ để chỉ còn 2 dòng. */
  .panel-head h2 { font-size: 15px; line-height: 1.25; word-break: break-word; }
  .md-version { display: none; }

  /* Lưới kết quả: tab con cuộn ngang thay vì bóp chữ. */
  .result-head { gap: 8px; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { white-space: nowrap; }
  .result-actions { width: 100%; }
  .result-actions .btn { flex: 1 1 auto; }
  .result-actions #result-picker { flex: 1 1 100%; }

  /* Hàng nút chính: nút "Chuyển đổi" chiếm trọn 1 hàng cho dễ bấm. */
  .row-actions .btn.primary { flex: 1 1 100%; }
  .row-actions .btn:not(.primary) { flex: 1 1 auto; }

  .url-row { flex-wrap: wrap; }
  .url-row input { flex: 1 1 100%; }
  .url-row .btn { flex: 1 1 auto; }

  .two-col { grid-template-columns: 1fr; gap: 10px; }

  .empty { height: 220px; padding: 16px; }
  .empty-icon { font-size: 32px; }

  .markdown { padding: 16px 14px; }
  .markdown h1 { font-size: 1.5em; }
  .markdown h2 { font-size: 1.25em; }
  .markdown table { font-size: 12px; }
  .markdown th, .markdown td { padding: 6px 8px; }

  .stats { padding: 14px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 9px; }
  .stat { padding: 10px 11px; }
  .stat b { font-size: 18px; }
  .assets { padding: 12px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

  .help-card { padding: 14px 14px; }
  .help-card h3 { font-size: 15px; }
  .formats-table { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 7px; }

  .repo-toolbar #repos-search { flex-basis: 100%; }
  .repo-toolbar .select { flex: 1 1 45%; }
  .repo-card { padding: 12px 13px; }
  .repo-name { font-size: 14px; display: inline-block; padding: 8px 0; }

  .compare { grid-template-columns: 1fr; }

  /* Drawer: chữ 16px + nút to hơn. */
  .drawer-body { padding: 6px 14px 24px; }
  .provider-grid { grid-template-columns: 1fr; }
  .usage-tiles { grid-template-columns: 1fr 1fr; gap: 9px; }
  .card-head { flex-wrap: wrap; }
  table.tbl { font-size: 12px; }
}

/* ============================================ <= 380px: máy rất nhỏ ====== */
@media (max-width: 380px) {
  .brand-mark { display: none; }            /* chỉ giữ tên, đủ nhận ra */
  .brand-text h1 { font-size: 12.5px; }
  .chip { font-size: 11px; padding: 5px 8px; }
  .chip-provider, .chip-usage { max-width: 38vw; }
  .tab { font-size: 9.5px; min-height: 48px; }
  .tab .tab-ico { font-size: 15px; }
  .usage-tiles { grid-template-columns: 1fr; }
  .workspace { padding-left: 10px; padding-right: 10px; }

  /* Màn 320x568: nút "Chuyển sang Markdown" từng nằm dưới đáy màn hình.
     Cắt phần mô tả tiếp thị (không phải thông tin bắt buộc) và thu gọn
     vùng thả file để hành động chính lọt vào màn hình đầu tiên. */
  .panel-head p { display: none; }
  .panel-head { margin-bottom: 10px; }
  .dropzone { padding: 14px 12px; min-height: 0; }
  .dz-icon { font-size: 20px; margin-bottom: 4px; }
  /* Danh sách định dạng (PDF · DOCX · …) đã có ở tab "Định dạng & Cài đặt";
     bỏ ở màn <=380px để nút chuyển đổi lọt vào màn hình đầu tiên. */
  .dz-inner small { display: none; }
}

/* -------------------------------- màn hình rất thấp (nằm ngang) --------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .result-body { max-height: 60vh; }
  #preview-frame { height: 50vh; min-height: 220px; }
  .tabs { padding: 3px 8px; }
  .tab { min-height: 40px; font-size: 9.5px; padding: 4px 2px; }
  .tab .tab-ico { font-size: 14px; }
  .workspace { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* ----------------------------- người dùng chọn giảm chuyển động --------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}