/* ProxyFX Studio — CSS พื้นฐาน (R1) */
@font-face {
  font-family: "NotoLao";
  font-style: normal;
  font-weight: 100 599;
  font-display: swap;
  src: local("Noto Sans Lao"), url("../fonts/NotoSansLao-subset.woff2") format("woff2");
  unicode-range: U+0E80-0EFF, U+200B, U+00A0;
}
@font-face {
  font-family: "NotoLao";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("../fonts/NotoSansLao-700.woff2") format("woff2");
  unicode-range: U+0E80-0EFF, U+200B, U+00A0;
}

:root {
  --bg: #0b0d12;
  --surface: #151923;
  --text: #e8eaf0;
  --muted: #8a90a2;
  --accent: #4f46e5;
  --danger: #ef4444;
  --radius: 12px;
  --tap: 44px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: "NotoLao", "Noto Sans Lao", "Phetsarath OT", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6; /* อักษรลาวมีสระ/วรรณยุกต์บน-ล่าง ต้องการระยะบรรทัดมากกว่าละติน */
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* ลาวไม่เว้นวรรคระหว่างคำ → ให้ตัดบรรทัดได้ทุกที่ ป้องกันข้อความล้นกล่อง */
body, button, input, select, textarea { overflow-wrap: anywhere; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

button {
  min-height: var(--tap);
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
button:disabled { opacity: .45; cursor: default; }
button.secondary { background: var(--surface); color: var(--text); }
button.danger { background: var(--danger); }

/* ===== Shell (R2) ===== */
#app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}
.shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(8px + var(--safe-t)) 16px 8px;
  background: var(--surface);
}
.shell-title { margin: 0; font-size: 1.15rem; font-weight: 600; }
.icon-btn {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius);
  color: var(--muted);
}
.icon-btn[aria-current="page"] { color: var(--text); background: var(--bg); }
.shell-main { overflow-y: auto; padding: 16px; }
.placeholder { margin: 40vh 0 0; text-align: center; color: var(--muted); }
.shell-nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--surface);
  padding-bottom: var(--safe-b);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 6px 2px;
  font-size: .72rem;
  color: var(--muted);
  text-decoration: none;
}
.tab[aria-current="page"] { color: var(--text); }
.tab[aria-current="page"] svg { color: var(--accent); }
a { color: inherit; text-decoration: none; }

/* ===== หน้าไม่รองรับ (R3) ===== */
.cap-page { padding: calc(24px + var(--safe-t)) 20px 24px; max-width: 480px; margin: 0 auto; }
.cap-page h1 { font-size: 1.2rem; margin: 0 0 16px; }
.cap-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.cap-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); border-radius: var(--radius); }
.cap-ok strong { color: #22c55e; }
.cap-bad strong { color: var(--danger); }
.cap-hint { color: var(--muted); margin: 0; }
#app:has(.cap-page) { display: block; overflow-y: auto; }

/* ===== หน้าโปรเจกต์ (R5) ===== */
.proj-h { margin: 0 0 12px; font-size: 1rem; color: var(--muted); font-weight: 600; }
.proj-form { display: flex; gap: 8px; margin-bottom: 20px; }
.proj-input { flex: 1; min-width: 0; min-height: var(--tap); padding: 0 12px; border: 1px solid #2a3040; border-radius: var(--radius); background: var(--surface); color: var(--text); }
.proj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.proj-item { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--surface); border-radius: var(--radius); border: 1px solid transparent; }
.proj-item.is-active { border-color: var(--accent); }
.proj-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proj-info small { color: var(--muted); }
.proj-badge { color: var(--accent) !important; }
.proj-actions { display: flex; gap: 8px; }
.proj-actions button { flex: 1; }
.proj-list .placeholder { margin: 24px 0; }

/* ===== หน้าถ่ายทำ / กล้อง (R6) ===== */
.shoot-view { position: relative; margin: -16px; height: calc(100% + 32px); display: flex; flex-direction: column; background: #000; }
.cam-stage { position: relative; flex: 1; min-height: 0; display: flex; background: #000; }
.cam-video { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.cam-video.mirror { transform: scaleX(-1); }
.cam-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: rgba(11, 13, 18, .88); }
.cam-msg[hidden], .cam-switch[hidden] { display: none; }
.cam-msg p { margin: 0; max-width: 420px; }
.cam-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 88px; padding: 8px 16px calc(8px + 0px); background: var(--surface); }
.cam-bar .cam-switch { justify-self: end; }
.cam-meta { color: var(--muted); min-width: 0; }
.cam-switch { color: var(--text); background: var(--bg); border: 0; padding: 0; }
.cam-need { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30vh; text-align: center; }
.cam-need p { margin: 0; color: var(--muted); }

/* ===== เลือกเวลาเทค / นับถอยหลัง / ปุ่มถ่าย (R7) ===== */
.cam-panel { padding: 10px 16px 0; background: var(--surface); }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip { min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--bg); color: var(--text); border: 1px solid #2a3040; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.chip:disabled { opacity: .5; }
.chip-custom { display: inline-flex; align-items: center; gap: 6px; }
.chip-custom[hidden], .cam-count[hidden], .rec-badge[hidden], .rec-progress[hidden], .cam-tip[hidden] { display: none; }
.chip-input { width: 72px; min-height: 38px; padding: 0 8px; border: 1px solid #2a3040; border-radius: 10px; background: var(--bg); color: var(--text); text-align: center; }
.chip-unit { color: var(--muted); }
.cam-tip { margin: 8px 0 0; font-size: .82rem; color: var(--muted); }
.cam-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9rem; font-weight: 700; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); pointer-events: none; }
.rec-badge { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-variant-numeric: tabular-nums; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: rec-blink 1s infinite; }
@keyframes rec-blink { 50% { opacity: .25; } }
.rec-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .2); }
.rec-progress i { display: block; height: 100%; width: 0; background: var(--danger); }
.rec-btn { width: 68px; height: 68px; min-height: 0; padding: 0; border-radius: 50%; background: transparent; border: 4px solid #fff; display: grid; place-items: center; }
.rec-btn i { width: 48px; height: 48px; border-radius: 50%; background: var(--danger); transition: border-radius .15s, transform .15s; }
.rec-btn.is-active i { border-radius: 10px; transform: scale(.55); }
.rec-btn:disabled { opacity: .35; }

/* R29: แถบ PWA (อัปเดต/ติดตั้ง/ออฟไลน์) */
.pwa-bar { position: fixed; left: 8px; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 50; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #1b2130; border: 1px solid #2a3040; color: var(--text); box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.pwa-bar[hidden] { display: none; }
.pwa-msg { flex: 1; }
.pwa-x { min-height: 36px; min-width: 36px; padding: 0; background: transparent; color: var(--muted); border: 0; }

/* R30: dialog + toast */
.dlg-back { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.6); }
.dlg { width: min(420px, 100%); display: grid; gap: 14px; padding: 18px; border-radius: 14px; background: #1b2130; border: 1px solid #2a3040; color: var(--text); }
.dlg-msg { margin: 0; line-height: 1.5; }
.dlg-input { min-height: 44px; padding: 0 12px; border: 1px solid #2a3040; border-radius: 10px; background: var(--bg); color: var(--text); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; }
.toast { position: fixed; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 90; padding: 10px 14px; border-radius: 10px; background: #5a1f27; color: #fff; text-align: center; }
.toast[hidden] { display: none; }

/* ===== R32: ข้อความลาวยาว ===== */
button { line-height: 1.5; padding-block: 8px; } /* ปุ่มไม่ได้สืบ line-height จาก body → สระ/วรรณยุกต์ไม่โดนตัด · ข้อความตัดบรรทัดแล้วปุ่มสูงขึ้นเอง */
.tab { min-width: 0; padding-inline: 1px; font-size: .68rem; line-height: 1.3; text-align: center; }
.chip { line-height: 1.4; padding-block: 6px; }
.dlg-actions { flex-wrap: wrap; }
.dlg-actions button { flex: 1 1 auto; }
.pwa-bar > span, .pwa-bar > p { min-width: 0; flex: 1 1 auto; }