.wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.card {
  padding: 18px 24px 24px;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid #ececec;
  border-radius: 24px;
}

.cardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.headerTitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #111827;
  font-size: 16px;
  font-weight: 500;
}

.headerActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cardHeaderCompact {
  margin: 0 0 10px;
  color: #111827;
  font-size: 14px;
  font-weight: 500;
}

.card + .card,
.cardHeaderCompact:not(:first-child) {
  margin-top: 16px;
}

/* ── ปุ่ม ────────────────────────────────────────────────────────────────── */

.primaryBtn,
.ghostBtn,
.stopBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 13px;
  border-radius: 10px;
  cursor: pointer;
}

.primaryBtn {
  color: #fff;
  background: var(--color-primary);
  border: 0;
}

.primaryBtn:disabled {
  background: var(--color-primary-disabled);
  cursor: not-allowed;
}

.ghostBtn {
  color: #4b5563;
  background: #f4f4f4;
  border: 0;
}

.ghostBtn:disabled {
  color: #c8c8c8;
  cursor: not-allowed;
}

.stopBtn {
  color: #b91c1c;
  background: #fee2e2;
  border: 0;
}

.stopBtn:disabled {
  color: #c8c8c8;
  background: #f4f4f4;
  cursor: not-allowed;
}

/* ── แผงตั้งค่า ─────────────────────────────────────────────────────────── */

.settings {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-height: 40%;
  padding: 18px 24px;
  overflow-y: auto;
  background: #fff;
  border: 2px solid #ececec;
  border-radius: 20px;
}

.settingItem {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.settingItem > label {
  color: #374151;
  font-weight: 500;
}

.settingItem select {
  padding: 8px 10px;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 13px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.toggleLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.gateRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gateRow.disabled {
  opacity: 0.5;
}

.gateRow input[type="range"] {
  flex: 1;
  accent-color: var(--color-primary);
}

.gateValue {
  min-width: 88px;
  color: #6b7280;
  font-size: 12px;
}

.hint {
  margin: 0;
  color: #9ca3af;
  font-size: 12px;
  line-height: 1.5;
}

/* ── โครงสองคอลัมน์ ─────────────────────────────────────────────────────── */

.grid {
  display: grid;
  flex: 1;
  /* ให้กล้องเป็นพื้นที่หลักเสมอ ส่วนแผงข้อมูลเป็น utility rail ที่ขยายเท่าที่จำเป็น */
  grid-template-columns: minmax(0, 1fr) clamp(280px, 28%, 360px);
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
  min-height: 0;
}

.colLeft,
.colRight {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

/* กล้องกินความสูงทั้งคอลัมน์ซ้าย
   ห้ามใส่ overflow: hidden หรือ min-height: 0 ที่นี่ — ทั้งสองอย่างทำให้ min-height: auto
   ของ flex กลายเป็น 0 การ์ดจะหดจนหัวการ์ดกับวิดีโอโดนตัดหายบนจอเตี้ย
   ปล่อยไว้แบบนี้ พอจอเตี้ยกว่าขนาดต่ำสุดคอลัมน์จะเลื่อนแทน ไม่มีอะไรหาย */
.cameraCard {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 18px 18px;
}

/* แผงแท็บกินที่ว่างที่เหลือของคอลัมน์ขวา เนื้อหาข้างในมี scroll ของตัวเองอยู่แล้ว
   ไม่ใส่ overflow: hidden ด้วยเหตุผลเดียวกับ .cameraCard — กันแถบแท็บโดนตัดบนจอเตี้ย */
.panelCard {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.resultCard {
  flex: 0 0 auto;
}

/* คอลัมน์ซ้ายมีการ์ดเดียว ไม่ต้องเว้นช่องไฟ */
.colLeft {
  gap: 0;
}

/* ── กล้อง ───────────────────────────────────────────────────────────────── */

.videoWrapper {
  position: relative;
  flex: 1;
  min-height: 160px;
  overflow: hidden;
  background: #0b1021;
  border-radius: 16px;
}

/* ภาพกระจกเหมือนส่องกระจก — ยกมือขวาแล้วต้องเห็นมืออยู่ฝั่งขวาของจอ
   พลิกทั้งวิดีโอและ canvas พร้อมกัน จุด landmark จะได้ยังทับอยู่บนมือ
   พลิกแค่ตอนแสดงผลเท่านั้น ภาพที่ป้อนโมเดลคือ frameCanvas / handCropCanvas
   ซึ่งวาดจาก <video> ต้นฉบับที่ไม่ถูกพลิก การตรวจจับกับ handedness จึงไม่เปลี่ยน
   (MIRRORED_INPUT ใน mediapipe.ts ต้องคง false ไว้ด้วยเหตุผลนี้) */
.video,
.canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.canvas {
  z-index: 5;
  pointer-events: none;
}

/* ไกด์ตำแหน่งคนหน้ากล้อง — จงใจให้จางและเป็นเส้นประ ให้พอเหลือบเห็นว่าควรยืน
   ตรงไหน แต่ไม่แย่งสายตาไปจากภาพจริงกับจุด landmark
   อยู่ที่ z-index 4 คือเหนือวิดีโอแต่ใต้ .canvas เส้นโครงมือจึงทับไกด์เสมอ */
.poseGuide {
  position: absolute;
  inset: 0;
  z-index: 4;

  width: 100%;
  height: 100%;

  fill: none;
  stroke: #fff;
  stroke-width: 3;
  /* ขีดยาวและห่างกว่าเดิม (เคยเป็น 7 6) จำนวนขีดรอบรูปจึงน้อยลงและอ่านง่ายขึ้น
     ยาวกว่านี้วงรีรอบหัวจะเริ่มเสียรูปเพราะเหลือขีดไม่กี่ขีด */
  stroke-dasharray: 16 12;
  stroke-linecap: round;
  opacity: 0.6;

  pointer-events: none;
  /* ฉากหลังออฟฟิศเป็นผนังขาว เส้นขาวล้วนจะจมหายไปเลย เงาเข้มใต้เส้นคือตัวที่
     ทำให้ยังอ่านออกบนพื้นสว่าง — ที่ opacity 0.3 กับเงา 1px เคยจางจนแทบไม่เห็น
     ค่าชุดนี้เทียบสี่ระดับบนภาพจริงแล้วเลือกมา เห็นชัดทั้งบนผนังขาวและเสื้อสีเข้ม
     แต่ยังเป็นเส้นประบางที่ไม่แย่งสายตาไปจากภาพ */
  filter: drop-shadow(0 0 2px rgb(0 0 0 / 75%));
}

/* เส้นต้องหนาเท่ากันทุกขนาดจอ ไม่ให้ถูกขยายตามอัตราส่วนของ viewBox */
.poseGuide > * {
  vector-effect: non-scaling-stroke;
}

.videoOverlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #e5e7eb;
  background: rgb(11 16 33 / 85%);
}

.overlayText {
  font-size: 16px;
  font-weight: 500;
}

.overlaySub {
  margin-bottom: 8px;
  color: #9ca3af;
  font-size: 12px;
}

.vocabSelect {
  max-width: 220px;
  padding: 6px 10px;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

/* ── แผงผลเรียลไทม์บนภาพ ────────────────────────────────────────────────── */

.rtPanel {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 240px;
  padding: 8px 10px;
  color: #e5e7eb;
  font-size: 12px;
  background: rgb(11 16 33 / 78%);
  border-radius: 10px;
}

.rtPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rtWordRow {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.rtKey {
  color: #9ca3af;
}

.rtWord {
  color: #34d399;
  font-size: 14px;
  font-weight: 600;
}

/* คำล่าสุดที่ค้างไว้ระหว่างมือลง/บัฟเฟอร์เติม — สีเดียวกับคำสดแต่จางลง ให้รู้ว่าไม่ใช่คำของเฟรมนี้ */
.rtWordHeld {
  color: #34d399;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.6;
}

.rtWordHint {
  margin-left: 6px;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 400;
  opacity: 1;
}

.rtMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  color: #9ca3af;
}

.rtMeta > span {
  white-space: nowrap;
}

.rtMeta > span + span::before {
  margin: 0 5px;
  color: #6b7280;
  content: "·";
}

.rtHands {
  color: #fff;
}

.rtRank {
  position: relative;
  flex: none;
}

.rtRankSummary {
  position: relative;
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  color: #9ca3af;
  cursor: pointer;
  list-style: none;
}

/* เพิ่ม hit area เป็น 44px โดยไม่เพิ่มความสูงที่มองเห็นของ overlay */
.rtRankSummary::before {
  position: absolute;
  inset: -8px 0;
  content: "";
}

.rtRankSummary::-webkit-details-marker {
  display: none;
}

.rtRankSummary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}

.rtRankChevron {
  flex: none;
  transition: transform 160ms ease;
}

.rtRank[open] .rtRankChevron {
  transform: rotate(180deg);
}

.rtRankList {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
  padding: 8px 10px;
  margin: 0;
  background: rgb(11 16 33 / 92%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgb(0 0 0 / 24%);
  list-style: none;
}

.rtRank:not([open]) .rtRankList {
  display: none;
}

.rtRankList li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.rtRankList .rtTop {
  color: #34d399;
}

.rtRankConf {
  color: #9ca3af;
}

.rtEmpty {
  color: #6b7280;
}

.error {
  margin-top: 12px;
  color: var(--color-danger);
  font-size: 13px;
}

/* ── คำสะสม ─────────────────────────────────────────────────────────────── */

.accumulatedBox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 16px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 38px;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
}

.chipDragging {
  opacity: 0.72;
  box-shadow: 0 8px 20px rgb(15 23 42 / 18%);
}

.chipDragHandle,
.chipMove {
  display: inline-flex;
  min-width: 32px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #9ca3af;
  background: none;
  border: 0;
  cursor: grab;
  touch-action: none;
}

.chipDragHandle:active {
  cursor: grabbing;
}

.chipDragHandle:focus-visible,
.chipMove:focus-visible,
.chipDel:focus-visible,
.chipText:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.chipMove {
  cursor: pointer;
}

.chipMove:disabled {
  color: #d1d5db;
  cursor: not-allowed;
}

.chip.pinned {
  border-color: var(--color-primary);
}

.chipText {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 4px 6px 14px;
  color: #111827;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 13px;
  background: none;
  border: 0;
  cursor: pointer;
}

.caret {
  color: #9ca3af;
  font-size: 10px;
}

.chipDel {
  display: inline-flex;
  min-width: 36px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: #9ca3af;
  font-size: 14px;
  background: none;
  border: 0;
  cursor: pointer;
}

.chipMenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
}

.chipMenu button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  color: #374151;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 13px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.chipMenu button:hover {
  background: #f4f4f4;
}

.chipMenu .current {
  color: var(--color-primary);
}

.chipConf {
  color: #9ca3af;
  font-size: 12px;
}

.accumulatedActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.translationRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.translationBox {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 14px;
  color: #111827;
  font-size: 14px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 12px;
}

.translationBox span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── แผงขวา ─────────────────────────────────────────────────────────────── */

.tabsHeader {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  background: #f4f4f4;
  border-radius: 12px;
}

.tabsHeader button {
  padding: 7px 14px;
  color: #9ca3af;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 13px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.tabsHeader .tabActive {
  color: var(--color-primary);
  background: #fff;
  box-shadow: 0 1px 5px rgb(0 0 0 / 12%);
}

.tabContent {
  flex: 1;
  min-height: 0;
  font-size: 13px;
  overflow-y: auto;
}

.steps {
  padding-left: 20px;
  margin: 0;
  color: #4b5563;
  line-height: 2;
}

.segLive {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.segGauge {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #6b7280;
}

.segGauge strong {
  color: #111827;
  font-weight: 500;
}

.segPhase {
  padding: 10px 14px;
  margin-bottom: 12px;
  color: #4b5563;
  background: #f4f4f4;
  border-radius: 12px;
}

.segPhase.ok {
  color: var(--color-complete);
  background: #ecfdf5;
}

.segPhase.warn {
  color: #b45309;
  background: #fffbeb;
}

.segRules {
  padding-left: 20px;
  margin: 0;
  color: #6b7280;
  line-height: 1.9;
}

.historyList,
.logList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.historyItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #fafafa;
  border-radius: 12px;
}

.historyTitle {
  color: #111827;
  font-size: 14px;
}

.historyMeta {
  color: #9ca3af;
  font-size: 12px;
}

.historyBadge {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
}

.historyBadge.good {
  color: var(--color-complete);
  background: #ecfdf5;
}

.historyBadge.mid {
  color: #b45309;
  background: #fffbeb;
}

.historyBadge.low {
  color: #b91c1c;
  background: #fee2e2;
}

.logHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.logItem {
  padding: 6px 10px;
  color: #4b5563;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  word-break: break-word;
  background: #fafafa;
  border-radius: 8px;
}

.logItem.warn {
  color: #b45309;
  background: #fffbeb;
}

.logItem.error {
  color: #b91c1c;
  background: #fee2e2;
}

.logItem.completed {
  color: var(--color-complete);
  background: #ecfdf5;
}

.emptyText {
  color: #9ca3af;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .grid {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .colLeft,
  .colRight {
    flex: none;
    overflow: visible;
  }

  .cameraCard {
    flex: none;
    height: clamp(480px, calc(100vh - 190px), 760px);  /* fallback: เบราว์เซอร์ที่ไม่รู้จัก dvh (Chrome <108) */
    height: clamp(480px, calc(100dvh - 190px), 760px);
  }
}

/* ปุ่มเปิดแผงแท็บมีเฉพาะมือถือ บนจอใหญ่แผงอยู่คอลัมน์ขวาให้เห็นอยู่แล้ว */
.panelToggle {
  display: none;
}

/* หัวแผงตั้งค่าพร้อมปุ่มปิด มีเฉพาะตอนที่แผงกลายเป็นชั้นซ้อนทับเต็มหน้า */
.sheetHeader {
  display: none;
}

/* บน tablet/โน้ตบุ๊กเล็ก กล้องต้องไม่ถูกหารความสูงกับแผงข้อมูลอีก
   แสดงเฉพาะผลคำที่จำเป็น ส่วนรายละเอียดเปิดตามต้องการจาก header กล้อง */
@media (min-width: 769px) and (max-width: 1100px) {
  .panelToggle {
    display: inline-flex;
  }

  .panelCard {
    display: none;
  }

  .panelCard.panelOpen {
    display: flex;
  }
}

/* ── มือถือ ──────────────────────────────────────────────────────────────
   ใช้ลำดับแบบ camera-first: กล้องอยู่ใน document flow และผลคำอยู่ถัดลงมา
   เป็นการ์ดที่เลื่อนได้ แทนการวางผลคำทับขอบล่างของภาพ กล้องกับปุ่มเปิดจึงไม่
   ถูกบังแม้ความสูง viewport ของมือถือแต่ละรุ่นจะไม่เท่ากัน

   หลักที่ใช้: mobile-first, content-driven height, safe-area bottom inset,
   และไม่ใช้ fixed/absolute overlay กับข้อมูลที่ผู้ใช้ต้องอ่านหรือกด */
@media (max-width: 768px), (max-width: 900px) and (max-height: 500px) {
  .wrapper {
    position: relative;
    gap: 10px;
  }

  .panelToggle {
    display: inline-flex;
  }

  .sheetHeader {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #111827;
    font-size: 15px;
    font-weight: 500;
  }

  .grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .colLeft,
  .colRight {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
  }

  .cameraCard {
    position: relative;
    flex: none;
    height: auto;
    padding: 10px;
    border-radius: 18px;
  }

  .videoWrapper {
    flex: none;
    width: 100%;
    /* อิงทั้งความกว้างและความสูงจริงของ viewport: จอตั้งได้ภาพเกือบเต็มความกว้าง
       ส่วนจอเตี้ย/แนวนอนยังเหลือพื้นที่ให้หัวการ์ดและปุ่มควบคุม */
    height: clamp(300px, min(104vw, 70vh), 540px);  /* fallback: เบราว์เซอร์ที่ไม่รู้จัก dvh (Chrome <108) */
    height: clamp(300px, min(104vw, 70dvh), 540px);
    min-height: 300px;
  }

  .cardHeader {
    margin-bottom: 8px;
  }

  .headerTitle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .headerActions {
    display: grid;
    width: 100%;
    grid-template-columns: 44px 44px minmax(0, 1fr) auto;
    gap: 6px;
    flex-wrap: nowrap;
  }

  .headerActions > button {
    min-width: 44px;
    padding-inline: 10px;
  }

  .controlLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .resultCard {
    position: relative;
    flex: none;
    padding: 12px;
    background: #fff;
    border: 2px solid #ececec;
  }

  /* หัวข้อ "รวมคำภาษามือ" กับ "ประโยคภาษาไทย" ตัดทิ้ง ตัวเนื้อหาบอกตัวเองอยู่แล้ว */
  .cardHeaderCompact {
    display: none;
  }

  .card + .card {
    margin-top: 0;
  }

  .accumulatedBox {
    gap: 8px;
    padding: 10px;
    background: #fafafa;
  }

  .chips {
    flex-wrap: wrap;
    min-height: 34px;
    overflow: visible;
  }

  .chip {
    flex: none;
  }

  .translationRow {
    gap: 8px;
    margin-top: 8px;
    padding: 8px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
  }

  .translationBox {
    padding: 8px 12px;
  }

  .panelCard {
    display: none;
  }

  .panelCard.panelOpen {
    position: relative;
    flex: none;
    display: flex;
    padding: 12px;
  }

  .settings {
    position: relative;
    flex: none;
    max-height: min(52vh, 420px);  /* fallback: เบราว์เซอร์ที่ไม่รู้จัก dvh (Chrome <108) */
    max-height: min(52dvh, 420px);
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .card {
    padding: 12px;
    border-radius: 18px;
  }

  .cardHeader {
    gap: 8px;
    margin-bottom: 10px;
  }

  /* ปุ่มขนาดนิ้วโป้ง และห้ามตัดคำกลางปุ่ม — "ตั้งค่า" เคยขึ้นเป็นสองบรรทัด */
  .primaryBtn,
  .ghostBtn,
  .stopBtn {
    min-height: 44px;
    padding: 10px 16px;
    white-space: nowrap;
  }

  .tabsHeader button {
    min-height: 44px;
  }

  /* iOS Safari ซูมทั้งหน้าเองถ้าช่องกรอกมี font ต่ำกว่า 16px */
  .settingItem select,
  .vocabSelect {
    min-height: 44px;
    font-size: 16px;
  }

  .vocabSelect {
    width: 100%;
    max-width: none;
  }

  .rtPanel {
    max-width: calc(100% - 24px);
  }

}

/* แนวนอนมีความสูงใช้งานน้อยมาก การบังคับ 300px จะดัน controls ออกจากจอ
   จึงเพิ่มกล้องเท่าที่พื้นที่จริงรับได้และปล่อยส่วนอื่นเลื่อนต่อด้านล่าง */
@media (orientation: landscape) and (max-height: 500px) {
  .videoWrapper {
    height: clamp(240px, 64vh, 340px);  /* fallback: เบราว์เซอร์ที่ไม่รู้จัก dvh (Chrome <108) */
    height: clamp(240px, 64dvh, 340px);
    min-height: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chip {
    transition: none !important;
  }

  .rtRankChevron {
    transition: none;
  }
}