:root {
  --bg: #05070a;
  --panel: rgba(12, 16, 22, 0.92);
  --panel-border: rgba(255, 255, 255, 0.08);
  --ink: #eef2f6;
  --ink-dim: #9aa7b4;
  --accent: #f2b544;
  --accent-dim: rgba(242, 181, 68, 0.18);
  --cam-establishing: #5aa9e6;
  --cam-flyto: #6bd6a8;
  --cam-pushin: #f2b544;
  --cam-zoomout: #b98bf0;
  --cam-orbit: #f0748c;
  --cam-cutinsert: #ffffff;
  --cam-insertoverlay: #ff9d5c;
  --cam-battlemap: #c0392b;
  --radius: 14px;
  --mono: "IBM Plex Mono", monospace;
  --thai: "IBM Plex Sans Thai", sans-serif;
  --display: "Chakra Petch", var(--thai), sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: var(--ink);
  font-family: var(--thai);
  overflow: hidden;
}

/* ---------- เวที: สัดส่วนวิดีโอ (9:16 แนวตั้ง / 16:9 แนวนอน) ---------- */
/* ขนาดจริง (px) คำนวณและเซ็ตด้วย JS (fitStage ใน script.js) เพื่อให้พอดีทั้งสองสัดส่วนบนจอทุกขนาด */

.viewport {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.stage {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 30px 80px rgba(0,0,0,0.6);
}

/* ---------- แผนที่จริง (MapLibre GL) ---------- */

.map-stage {
  position: absolute;
  inset: 0;
  background: var(--bg);
}
.map-canvas {
  position: absolute;
  inset: 0;
}
.maplibregl-ctrl-attrib {
  font-size: 9px !important;
  background: rgba(0,0,0,0.4) !important;
}
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { z-index: 4; }

/* วิเนตต์ขอบจอมืดลงเล็กน้อยแบบภาพยนตร์ ให้ภาพดาวเทียมดูมีมิติ/หรูขึ้น (ติดไปในวิดีโอที่ export ด้วย) */
.cinematic-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
}

/* เนื้อหาข้างในหมุด (ใช้เป็น element ของ maplibregl.Marker) */
.map-pin-content {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pin-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(242,181,68,0.2), 0 0 14px rgba(242,181,68,0.6);
  font-size: 14px;
  flex: none;
}
.pin-arrived .pin-dot { animation: pin-pop 550ms cubic-bezier(.34,1.56,.64,1); }
@keyframes pin-pop {
  0% { transform: scale(0.4); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.pin-icon::before { content: attr(data-glyph); }

.pin-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.pin-arrived .pin-ring {
  animation: pin-pulse 900ms ease-out;
}
@keyframes pin-pulse {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}
.pin-label {
  font-style: normal;
  font-family: var(--thai);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(4,6,9,0.72);
  backdrop-filter: blur(4px);
  border: 1px solid var(--panel-border);
  white-space: nowrap;
}
.map-pin-content.is-from .pin-dot { width: 10px; height: 10px; background: var(--ink-dim); box-shadow: none; }
.map-pin-content.is-from .pin-label { display: none; }

.arrow-marker-wrap {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow-marker {
  display: block;
  color: var(--accent);
  font-size: 16px;
  filter: drop-shadow(0 0 4px rgba(242,181,68,0.7));
}

.transport-marker-wrap {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.transport-icon {
  display: block;
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}

.shade-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  background: radial-gradient(circle at var(--shade-x, 50%) var(--shade-y, 50%), transparent var(--shade-r, 200px), rgba(0,0,0,0.78) calc(var(--shade-r, 200px) + 120px));
}

/* transition=fade/dissolve/morph/whip — แฟลชสั้นๆกลบรอยตัดฉาก ไม่ใช้ทุกฉาก (ดีฟอลต์ auto ส่วนใหญ่ = ไม่มีอะไรเลย) */
.transition-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: var(--tx-color, #000);
  opacity: 0;
}
.transition-overlay.is-flashing {
  animation: transition-flash var(--tx-duration, 250ms) ease-in-out;
}
@keyframes transition-flash {
  0% { opacity: 0; }
  45% { opacity: var(--tx-opacity, 0.5); }
  100% { opacity: 0; }
}
/* inserttransition=slide — แถบกวาดผ่านจอสั้นๆแทนแฟลชความทึบ (ใช้ตอนตัดเข้า/ออก insert) */
.transition-overlay.is-sliding {
  opacity: var(--tx-opacity, 0.9);
  animation: transition-slide var(--tx-duration, 250ms) ease-in-out;
}
@keyframes transition-slide {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
.shade-overlay.is-visible { opacity: 1; }

.hs-hidden { display: none !important; }

.battle-label span {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  color: #101010;
  font-weight: 700;
  font-size: 11px;
  font-family: var(--thai);
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
  transform: translateY(-6px);
}

/* Battle Buildup Sync: บทพากย์พูดถึง "สะสม/เสริมกำลัง" ให้จุดเริ่มลูกศรเดิม (a.from) เต้น pulse เน้นย้ำ ไม่สร้างพิกัด/ลูกศรใหม่ */
.battle-label.is-buildup span { animation: battle-buildup-pulse 1.1s ease-in-out infinite; }
@keyframes battle-buildup-pulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,0.45), 0 0 0 0 rgba(255,255,255,0.55); }
  50% { box-shadow: 0 3px 10px rgba(0,0,0,0.45), 0 0 0 7px rgba(255,255,255,0); }
}

.effect-marker-wrap { display: flex; }
.effect-marker {
  display: block;
  font-size: 22px;
  animation: effect-pulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.6));
}
@keyframes effect-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.18); opacity: 1; }
}

.region-label {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -8px) scale(0.95);
  filter: blur(6px);
  z-index: 4;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 3.2vw, 30px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1), filter .6s ease;
  white-space: nowrap;
}
.region-label.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); }

/* caption=... — ข้อความลอยกลางจอ ไม่ผูกกับหมุด (เทียบเท่า "Add Text" ของ AnimateMyMap) */
.caption-overlay {
  position: absolute;
  left: 50%;
  z-index: 5;
  max-width: 82%;
  text-align: center;
  transform: translate(-50%, 10px);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(16px, 3vw, 26px);
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.caption-overlay.is-visible { opacity: 1; transform: translate(-50%, 0); }
.caption-overlay.pos-top { top: 8%; }
.caption-overlay.pos-center { top: 46%; transform: translate(-50%, 10px) translateY(-50%); }
.caption-overlay.pos-center.is-visible { transform: translate(-50%, 0) translateY(-50%); }
.caption-overlay.pos-bottom { top: auto; bottom: 22%; }

/* geophoto=... — รูปจริงปักหมุดตามพิกัด (เทียบเท่า "Add Image" ของ AnimateMyMap) */
.geo-photo-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* ขนาดการ์ดภาพประกอบปักพิกัด: ดีฟอลต์เดิม 84px เล็กเกินไปจนดูไม่ออกว่าเป็นภาพอะไรตอนดูคลิปจริง (ผู้ใช้แจ้ง) — ขยายเป็น 140px
   ยังปรับรายฉากได้ด้วย photosize= เหมือนเดิมทุกจุด */
.geo-photo-card {
  width: 140px;
  height: 140px;
  border-radius: 10px;
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
  overflow: hidden;
  background: #111 center/cover no-repeat;
  transform-origin: center bottom;
  animation: geo-photo-pop .45s cubic-bezier(.34,1.56,.64,1);
}
.geo-photo-label {
  background: rgba(4,6,9,0.82);
  color: #fff;
  font-family: var(--thai);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
@keyframes geo-photo-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* videoAsset (Smart Documentary Production Import) — วิดีโอปักพิกัดคู่กับ geophoto ได้ ใช้เลย์เอาต์เดียวกัน */
.geo-video-card {
  width: 140px;
  height: 140px;
  border-radius: 10px;
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
  overflow: hidden;
  background: #111;
  transform-origin: center bottom;
  animation: geo-photo-pop .45s cubic-bezier(.34,1.56,.64,1);
  display: block;
}
.geo-video-card video { width: 100%; height: 100%; object-fit: cover; }

/* badge=flag:xx:lat,lng:ป้าย หรือ badge=icon:🏛️:lat,lng:ป้าย — ไอคอนวงกลม+ป้ายชื่อ (สไตล์ Whyhistory) */
.badge-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.badge-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #1a1f27 center/cover no-repeat;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  animation: geo-photo-pop .45s cubic-bezier(.34,1.56,.64,1);
}
.badge-pill {
  background: rgba(4,6,9,0.82);
  color: #fff;
  font-family: var(--thai);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* callout=url:lat,lng:ป้าย — วงแหวนชี้จุด + เส้นโยงไปกล่องรูป/วิดีโอแทรก (สไตล์ Whyhistory) */
.callout-ring-wrap { display: flex; }
.callout-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #ffd23f;
  box-shadow: 0 0 0 4px rgba(255,210,63,0.25);
}
.callout-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.callout-line.is-visible { opacity: 1; }
.callout-line line { stroke: #ffd23f; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(255,210,63,0.7)); }
.callout-box {
  position: absolute;
  top: 90px;
  right: 16px;
  width: 42%;
  max-width: 220px;
  z-index: 6;
  border: 2px solid #ffd23f;
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(255,210,63,0.6), 0 8px 20px rgba(0,0,0,0.6);
  background: #000;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity .3s ease, transform .3s ease;
  overflow: hidden;
}
.callout-box.is-visible { opacity: 1; transform: scale(1); }
.callout-media { width: 100%; aspect-ratio: 16/10; background: #111; }
.callout-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.callout-label {
  padding: 5px 8px;
  font-family: var(--thai);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(4,6,9,0.9);
}

.insert-layer {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}
.insert-layer span {
  font-family: var(--display);
  color: var(--ink-dim);
  letter-spacing: .06em;
  font-size: 15px;
}
.insert-layer img { max-width: 100%; max-height: 100%; object-fit: contain; }

.insert-float {
  position: absolute;
  left: 50%;
  /* ยกป้ายหัวข้อ evidence= ขึ้นสูงกว่าเดิม (18%→9%) — เดิมชนกับการ์ดรูปปักพิกัด (geophoto) ที่ลอยเหนือหมุดตรงกลางจอพอดี
     เพราะกล้อง insert-overlay/cut-to-insert เล็งกลางจอไปที่พิกัดฉากเสมอ ทำให้ป้ายกับรูปช้อนทับกัน (เจอจริงตอนเทสสคริปต์ยาว) */
  top: 9%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 30%;
  aspect-ratio: 16 / 10;
  background: #000;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
  text-align: center;
  z-index: 3;
}
.insert-float span {
  font-family: var(--display);
  color: var(--ink-dim);
  font-size: 12px;
  letter-spacing: .04em;
}
.insert-float img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* การแสดงผล insert ตามแผนกล้อง (กล้องจริงคุมผ่าน MapLibre flyTo/easeTo ใน JS) */
.mapstage-cutinsert .insert-layer { opacity: 1; pointer-events: auto; }
.mapstage-insertoverlay .insert-float { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

/* insertmode=... — ปรับ "เลย์เอาต์" ของกล่อง insert ที่ cam เดิม (cut-to-insert/insert-overlay) เปิดใช้งานอยู่แล้ว
   ไม่ใส่ = insertmode default ต่อ cam (full/picture-in-picture) = พฤติกรรมเดิมเป๊ะ ไม่มีการเปลี่ยนแปลงอะไรเลย
   กันไม่ให้บังพื้นที่ล่างจอ (ซับไตเติล/ไทม์ไลน์) เสมอ — กล่อง insert ทุกโหมดไม่ยื่นเกิน top:60% ของจอ ยกเว้น full/background ที่ตั้งใจเต็มจอ */
.insertmode-overlay .insert-layer {
  inset: auto; left: 50%; top: 30%; transform: translate(-50%, -50%);
  width: 62%; aspect-ratio: 16 / 10; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18); background: #000;
}
/* picture-in-picture ต้องเล็กจริงๆแยกจาก overlay (เดิมสองโหมดนี้ขนาดเท่ากันเป๊ะ 62%/78% ของจอ ไม่ต่างจาก "เต็มจอเกือบหมด" เลย ขัดกับชื่อ "PiP" และหลักการ MAP-FIRST ที่แผนที่ต้องยังเห็นชัดอยู่ข้างหลัง) */
.insertmode-picture-in-picture .insert-layer {
  inset: auto; left: 50%; top: 18%; transform: translate(-50%, -50%);
  width: 30%; aspect-ratio: 16 / 10; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18); background: #000;
}
.insertmode-overlay .insert-float { width: 62%; aspect-ratio: 16 / 9; top: 32%; }
.insertmode-split .insert-layer,
.insertmode-split .insert-float {
  inset: auto; left: auto; right: 0; top: 0; transform: none;
  width: 50%; height: 100%; aspect-ratio: auto; border-radius: 0; border: none; border-left: 1px solid rgba(255,255,255,0.18);
}
.insertmode-split .insert-layer img, .insertmode-split .insert-float img { object-fit: cover; }
.insertmode-split.insert-flip .insert-layer,
.insertmode-split.insert-flip .insert-float { right: auto; left: 0; border-left: none; border-right: 1px solid rgba(255,255,255,0.18); }
.insertmode-background .insert-layer,
.insertmode-background .insert-float {
  background: rgba(0,0,0,0.5);
}
.insertmode-background .insert-layer img, .insertmode-background .insert-float img { opacity: 0.65; }
.insertmode-full .insert-float {
  inset: 0; left: 0; top: 0; transform: none; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; border: none;
}
/* ป้องกันไม่ให้กล่อง overlay/PiP ไปชนกล่อง callout (มุมขวาบนเดิม) — สลับไปฝั่งซ้ายแทนเมื่อฉากมี callout ด้วย */
.insert-flip .insert-float { left: auto; right: 2%; transform: translateY(-50%); }
.insert-flip.insertmode-overlay .insert-float,
.insert-flip.insertmode-picture-in-picture .insert-layer { left: auto; right: 2%; transform: translateY(-50%); }

.insert-evidence-tag {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-family: var(--thai);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0;
  display: none;
}
.insert-evidence-tag.is-visible { display: inline-block; }

/* ---------- แบรนด์/วอเตอร์มาร์ก ---------- */

.brand-chip {
  position: absolute;
  z-index: 6;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .02em;
  opacity: 0.85;
  pointer-events: none;
}
.brand-tl { top: 14px; left: 14px; }
.brand-tr { top: 14px; right: 14px; }
.brand-bl { bottom: 96px; left: 14px; }
.brand-br { bottom: 96px; right: 14px; }

/* ---------- แถบบน ---------- */

.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 12px 14px 12px 56px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
  z-index: 5;
}

.ep-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ep-title {
  font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw;
}
.ep-sub { font-family: var(--mono); font-size: 10px; color: var(--ink-dim); }

.cam-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  font-size: 10px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.cam-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cam-establishing); transition: background .3s ease; flex: none; }

.topbar-spacer { flex-basis: 100%; height: 0; }

.export-wrap { position: relative; }
.export-menu[hidden] { display: none; }
.export-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; /* เดิม right:0 ทำให้เมนู (กว้างกว่าปุ่ม) ยื่นไปทางซ้ายจนล้นขอบจอ เพราะปุ่มอยู่ค่อนไปทางซ้ายของ topbar */
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  z-index: 30;
  min-width: 220px;
}
.export-option {
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--thai);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.export-option:hover { background: rgba(255,255,255,0.08); }

/* โหมดเรนเดอร์ (server.py/render.py ขับผ่าน headless browser): ซ่อนเครื่องมือแก้ไข เหลือแค่เนื้อหาที่จะอัด */
body.is-render-mode .topbar,
body.is-render-mode .timeline,
body.is-render-mode .import-panel {
  display: none !important;
}

.transport { display: flex; gap: 6px; }
.tbtn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.tbtn:hover { background: rgba(255,255,255,0.08); }
.tbtn:active { transform: scale(0.92); }
.tbtn-main { background: var(--accent); color: #241a05; border-color: var(--accent); }
.tbtn-main:hover { background: #ffcb66; }

.import-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--thai);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease;
  margin-left: auto;
}
.import-btn:hover { background: rgba(255,255,255,0.08); }

/* ---------- ซับไตเติล ---------- */

/* แถบไล่เฉดมืดเต็มความกว้างจอด้านล่าง (ทรงสารคดี) แทนกล่องทึบสี่เหลี่ยมเดิม ให้อ่านซับไตเติลง่ายโดยไม่บังภาพ */
.subtitle-scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.72) 100%);
  transition: opacity .3s ease;
}
.subtitle-scrim.pos-top {
  bottom: auto; top: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.72) 100%);
}
.subtitle-wrap {
  position: absolute;
  left: 50%;
  bottom: 110px; /* เดิม 44px ทับแถบไทม์ไลน์ (bottom:0 สูง ~90px) ทำให้ซับไตเติลถูกบังครึ่งล่าง ยกขึ้นให้พ้น */
  transform: translateX(-50%);
  max-width: min(760px, 88vw);
  z-index: 5;
  text-align: center;
}
.subtitle-text {
  margin: 0;
  padding: 0 12px;
  font-size: 23px; /* ขึ้นทีละ 3-4 คำแทนประโยคยาว เลยขยายตัวอักษรได้แบบสไตล์คลิปสั้น */
  line-height: 1.6;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 22px rgba(0,0,0,0.6);
}
.subtitle-wrap.pos-top { bottom: auto; top: 40px; }
.subtitle-wrap.attention-background { opacity: 0.72; }

/* คาราโอเกะ: คำที่กำลังพูดสว่างเด่น คำอื่นจางลง ฟีลซับสไตล์คลิปสั้น */
.sub-word { opacity: 0.6; transition: opacity .12s ease, color .12s ease, transform .12s ease; display: inline-block; }
.sub-word.active { opacity: 1; color: #ffd75e; transform: scale(1.06); }

/* ---------- เส้นเวลาฉาก ---------- */

.timeline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 20px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,0.6), transparent);
  z-index: 5;
}
.timeline-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.timeline-track::-webkit-scrollbar { height: 4px; }
.timeline-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.scene-chip {
  flex: 0 0 auto;
  min-width: 84px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  border-top: 3px solid var(--cam-establishing);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  text-align: left;
}
.scene-chip:hover { background: rgba(255,255,255,0.07); }
.scene-chip.is-active { color: var(--ink); background: rgba(255,255,255,0.1); }
.scene-chip .chip-place { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.scene-chip .chip-cam { display: block; font-family: var(--mono); opacity: .8; margin-top: 2px; }

.scene-chip[data-cam="establishing"] { border-top-color: var(--cam-establishing); }
.scene-chip[data-cam="fly-to"] { border-top-color: var(--cam-flyto); }
.scene-chip[data-cam="push-in"] { border-top-color: var(--cam-pushin); }
.scene-chip[data-cam="zoom-out"] { border-top-color: var(--cam-zoomout); }
.scene-chip[data-cam="orbit"] { border-top-color: var(--cam-orbit); }
.scene-chip[data-cam="cut-to-insert"] { border-top-color: var(--cam-cutinsert); }
.scene-chip[data-cam="insert-overlay"] { border-top-color: var(--cam-insertoverlay); }
.scene-chip[data-cam="battle-map"] { border-top-color: var(--cam-battlemap); }

/* ---------- แผงนำเข้าสคริปต์ ---------- */

/* กดปุ่ม "นำเข้าสคริปต์" ครั้งแรก = ยื่นออกมาเต็มจอ (ใช้งานง่าย พื้นที่พิมพ์เยอะ), กดซ้ำ/กดปิด = หดกลับ */
.import-panel {
  position: absolute;
  inset: 0;
  max-width: 900px;
  margin: 0 auto;
  background: var(--panel);
  border-left: 1px solid var(--panel-border);
  border-right: 1px solid var(--panel-border);
  padding: 20px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .28s cubic-bezier(.22,.8,.3,1), visibility 0s linear .28s;
  overflow-y: auto;
}
.import-panel.is-open { transform: translateX(0); visibility: visible; transition: transform .28s cubic-bezier(.22,.8,.3,1); }

.import-head { display: flex; align-items: center; justify-content: space-between; }
.import-head h2 { margin: 0; font-family: var(--display); font-size: 16px; font-weight: 600; }

/* แถบแท็บด้านบน — กดปุ่มไหนแสดงหน้านั้น แทนการพับ/กางซ้อนกันหลายส่วนที่หาไม่เจอ */
.import-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--panel);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--panel-border);
}
.import-tab-btn {
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: var(--ink-dim);
  font-family: var(--thai);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.import-tab-btn:hover { color: var(--ink); border-color: var(--ink-dim); }
.import-tab-btn.is-active { background: var(--accent, #f2b544); color: #1a1206; border-color: transparent; }
.tab-panel { display: flex; flex-direction: column; gap: 12px; }
.tab-panel[hidden] { display: none; }

.icon-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,0.08); color: var(--ink); }

.import-hint {
  margin: 0;
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.6;
}

.drop-zone {
  border: 1.5px dashed var(--panel-border);
  border-radius: 10px;
  padding: 16px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-dim);
  cursor: pointer;
  margin-top: 8px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.drop-zone:hover { border-color: var(--accent, #7f8cff); color: var(--ink); }
.drop-zone.is-dragover {
  border-color: var(--accent, #7f8cff);
  background: rgba(127,140,255,0.08);
  color: var(--ink);
}

/* Smart Documentary Production Import (พาท 27) */
.smart-drop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.smart-drop-grid .drop-zone { margin-top: 0; padding: 12px 6px; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.smart-review-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-height: 420px; overflow-y: auto; }
.smart-review-row {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.smart-review-row.is-missing { border-color: #c0392b; }
.smart-review-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.smart-review-head .sr-scene { font-weight: 700; color: var(--ink); }
.smart-review-head .sr-script { color: var(--ink-dim); font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-review-slots { display: flex; flex-direction: column; gap: 4px; }
.smart-review-slot { display: flex; align-items: center; gap: 6px; }
.smart-review-slot .sr-type { width: 42px; font-size: 10px; color: var(--ink-dim); text-transform: uppercase; }
.smart-review-slot select { flex: 1; background: #05070a; color: var(--ink); border: 1px solid var(--panel-border); border-radius: 6px; font-size: 11px; padding: 3px 4px; }
.sr-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 5px; border: 1px solid var(--panel-border); flex-shrink: 0; background: #05070a; }
.sr-thumb-empty, .sr-thumb-audio { display: flex; align-items: center; justify-content: center; color: var(--ink-dim); font-size: 13px; }

.smart-asset-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.asset-gallery-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; }
.ag-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--panel-border); background: #05070a; }
.ag-thumb-audio { display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--ink-dim); }
.ag-seq { font-size: 9px; color: var(--ink-dim); text-transform: uppercase; text-align: center; }
.confidence-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.confidence-badge.conf-high { background: rgba(52,199,89,0.18); color: #34c759; }
.confidence-badge.conf-medium { background: rgba(255,184,0,0.18); color: #ffb800; }
.confidence-badge.conf-low { background: rgba(255,120,60,0.18); color: #ff783c; }
.confidence-badge.conf-none { background: rgba(192,57,43,0.18); color: #e0574a; }
.import-hint code {
  font-family: var(--mono);
  background: rgba(255,255,255,0.06);
  padding: 1px 4px;
  border-radius: 4px;
}

.import-textarea {
  flex: 1 1 min(400px, 45vh); /* เต็มจอแล้วมีที่ว่างเยอะขึ้น ให้กล่องพิมพ์ยืดใช้พื้นที่ที่เหลือ */
  resize: vertical;
  background: #05070a;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px;
  line-height: 1.6;
}
.import-textarea:focus { outline: 1px solid var(--accent); }

.import-actions { display: flex; gap: 8px; }
.primary-btn, .ghost-btn {
  padding: 9px 16px;
  border-radius: 8px;
  font-family: var(--thai);
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--panel-border);
}
.primary-btn { background: var(--accent); color: #241a05; border-color: var(--accent); font-weight: 600; }
.primary-btn:hover { background: #ffcb66; }
.ghost-btn { background: transparent; color: var(--ink-dim); }
.ghost-btn:hover { background: rgba(255,255,255,0.06); }
.file-btn { display: inline-flex; align-items: center; cursor: pointer; }

.import-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  max-height: min(320px, 32vh);
  overflow-y: auto;
  padding-right: 2px;
}

/* พับ/กางส่วนที่ไม่จำเป็นต้องเห็นตลอด กันสคริปต์ยาวๆแล้วต้องเลื่อนหาปุ่มไกล */
.import-details {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 0 10px;
}
.import-details summary {
  padding: 9px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-dim);
  cursor: pointer;
  user-select: none;
}
.import-details summary:hover { color: var(--ink); }
.import-details[open] summary { border-bottom: 1px solid var(--panel-border); margin-bottom: 10px; }
.import-details[open] { padding-bottom: 10px; }

/* ปุ่มแปลง/ล้าง ให้เด่นเห็นชัดติดกับกล่องข้อความเสมอ ไม่ต้องเลื่อนหา */
.import-actions-sticky { position: sticky; bottom: 0; background: var(--panel); padding: 4px 0 2px; z-index: 1; }
.preview-row {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--cam-establishing);
}
.preview-row .pr-place { font-weight: 600; }
.pr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr-edit-btn {
  flex: none;
  font-family: var(--thai);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.pr-edit-btn:hover { background: rgba(255,255,255,0.08); color: var(--ink); }
.preview-row .pr-script { color: var(--ink-dim); margin-top: 3px; }
.preview-row .pr-meta { font-family: var(--mono); color: var(--ink-dim); font-size: 10px; margin-top: 4px; }
.pr-visual-makeup { font-size: 10px; color: var(--accent, #f2b544); margin-top: 3px; letter-spacing: .02em; }
.pr-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.validation-row {
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
  border-left: 3px solid var(--panel-border);
}
.validation-row.level-error { border-left-color: #e74c3c; background: rgba(231,76,60,0.08); }
.validation-row.level-warn { border-left-color: #f2b544; background: rgba(242,181,68,0.08); }
.validation-row.level-info { border-left-color: #3498db; background: rgba(52,152,219,0.08); }
.validation-empty { font-family: var(--thai); font-size: 12px; color: var(--ink-dim); }

.pr-tag {
  font-family: var(--thai);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(242, 181, 68, 0.35);
  white-space: nowrap;
}

/* เลือกภาพ/วิดีโอจริงต่อฉาก + คุมความยาวคลิปสั้น/ยาว (sec=) ตรงจากการ์ดพรีวิว ไม่ต้องเปิดแผงแก้ไขเต็ม */
.pr-media-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pr-media-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: 5px; border: 1px solid var(--panel-border); background: #05070a; flex-shrink: 0; }
.pr-media-empty { display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--ink-dim); text-align: center; }
.pr-dur-field { font-family: var(--thai); font-size: 10px; color: var(--ink-dim); display: flex; align-items: center; gap: 4px; }
.pr-dur-input { width: 46px; background: #05070a; color: var(--ink); border: 1px solid var(--panel-border); border-radius: 5px; font-size: 11px; padding: 2px 4px; }
.pr-media-btn { font-size: 10px; padding: 3px 8px; }
.pr-media-panel { margin-top: 6px; padding: 8px; border-radius: 8px; background: rgba(0,0,0,0.25); border: 1px solid var(--panel-border); }
.pr-media-search-row { display: flex; gap: 6px; }
.pr-media-query { flex: 1; background: #05070a; color: var(--ink); border: 1px solid var(--panel-border); border-radius: 6px; font-size: 11px; padding: 4px 6px; }
.pr-media-search-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pr-media-loading { font-family: var(--thai); font-size: 11px; color: var(--ink-dim); }
.pr-media-result { padding: 0; border: 1px solid var(--panel-border); border-radius: 6px; overflow: hidden; cursor: pointer; background: none; line-height: 0; }
.pr-media-result img { width: 72px; height: 72px; object-fit: cover; display: block; }
.pr-media-result:hover { border-color: var(--accent); }
.pr-video-result { display: block; width: 100%; padding: 6px 0; border-bottom: 1px solid var(--panel-border); font-size: 11px; }
.pr-video-result:last-child { border-bottom: none; }
.pr-video-desc { display: block; color: var(--ink-dim); font-size: 10px; margin: 2px 0 4px; }
.pr-video-status { font-family: var(--mono); font-size: 10px; color: var(--ink-dim); margin-left: 6px; }

/* ค้นภาพจริงทีเดียวทั้งสคริปต์ + รีวิวเป็นตาราง (แทนต้องเปิดทีละฉาก) */
.bulk-image-review-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-height: 420px; overflow-y: auto; }
.bulk-review-row { padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); }
.bulk-review-chosen { font-size: 10px; color: #34c759; margin-left: 6px; }

.brand-settings {
  border-top: 1px solid var(--panel-border);
  padding-top: 12px;
  margin-top: 4px;
}
.brand-settings h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
}
.brand-row { display: flex; gap: 8px; }
.brand-input, .brand-select {
  background: #05070a;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--thai);
  font-size: 12px;
  padding: 8px 10px;
}
.brand-input { flex: 1; min-width: 0; }
.brand-input:focus, .brand-select:focus { outline: 1px solid var(--accent); }
.brand-settings label { display: block; font-size: 12px; color: var(--ink-dim); font-family: var(--thai); margin-top: 8px; }
.brand-settings label:first-child { margin-top: 0; }
.brand-settings input[type="range"] { display: block; margin-top: 4px; accent-color: var(--accent); }
.check-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check-row input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

/* สร้างฉากง่ายๆ (จาก A ไป B) */
.builder-form { display: flex; flex-direction: column; gap: 12px; }
.builder-field label { display: block; font-size: 12px; color: var(--ink-dim); margin-bottom: 6px; font-family: var(--thai); }

.upload-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.upload-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  transition: background .15s ease, color .15s ease;
}
.upload-item:hover { background: rgba(255,255,255,0.08); color: var(--ink); }
.upload-item img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex: none; }
.upload-item .up-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.upload-item .up-copied { color: var(--accent); font-weight: 600; flex: none; }