/* ปรับแถบวิดีโอของ WorkAdventure — ฉีดเข้าหน้าเว็บด้วย nginx sub_filter
 * ไม่แตะอิมเมจ WA · แก้ไฟล์นี้แล้วรีเฟรชเห็นผลทันที (map-storage ตั้ง no-cache)
 *
 * ต้นเหตุจอเตี้ย: PresentationLayout.svelte ตั้ง .max-height-quarter { max-height: 25% }
 * ตายตัว จอสูง 1000px ได้ 250px พอดี แต่หน้าต่างเตี้ย 400px เหลือ 100px กรอบเลยโดนตัด
 */

/* ── 1) จอเตี้ย: ให้แถบสูงขึ้นตามส่วน ───────────────────────────────── */
@media (max-height: 820px) { .max-height-quarter { max-height: 40% !important; } }
@media (max-height: 560px) { .max-height-quarter { max-height: 58% !important; } }

/* ถ้ายังไม่พอให้เลื่อนดู ดีกว่าโดนตัดทิ้ง */
.max-height-quarter { overflow-y: auto !important; }
.max-height-quarter::-webkit-scrollbar,
#cameras-container::-webkit-scrollbar { width: 6px; height: 6px; }
.max-height-quarter::-webkit-scrollbar-thumb,
#cameras-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }

/* ── 2) โหมดวางข้างจอ (ปุ่ม ◨ มุมขวาบน) ──────────────────────────────
 * ใช้ #cameras-container ซึ่งเป็น id จริงในโค้ด WA (CamerasContainer.svelte)
 * ไม่ใช่การเดาคลาส จึงไม่หลุดง่ายเวลาอัปเกรด
 */
body.wa-cams-side .presentation-layout { flex-direction: row-reverse !important; }

body.wa-cams-side .max-height-quarter {
  max-height: none !important;
  height: 100% !important;
  width: 13.5rem !important;
  min-width: 13.5rem !important;
  flex: 0 0 13.5rem !important;
  overflow: hidden !important;
}

/* เรียงลงล่างเป็นคอลัมน์เดียว ชิดขวาให้ตรงแนวกันทุกใบ */
body.wa-cams-side #cameras-container {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;      /* ← ตัวที่ทำให้ไม่เหลื่อมกัน */
  justify-content: flex-start !important;
  gap: .5rem !important;
  height: 100% !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: .25rem .35rem .5rem 0 !important;
  margin: 0 !important;
  white-space: normal !important;
}

/* ทุกใบกว้างเท่ากัน ไม่ให้ความกว้างที่ JS คำนวณมาทำให้เหลื่อม */
body.wa-cams-side #cameras-container > div {
  flex: 0 0 auto !important;
  width: 12.5rem !important;
  max-width: 12.5rem !important;
  min-width: 12.5rem !important;
  margin: 0 !important;
}
/* ขนาดตายตัว 16:9 ทุกใบ (29 ก.ย. 2569) · WA ใส่ width/height เป็น px ไว้ที่กล่องเอง (VideoBoxOptimizer)
 * คิดจากพื้นที่ทั้งแถบ คนน้อยจึงได้กล่องสูงเกือบเต็มจอ เราทับแค่ความกว้าง กล่องเลยกลายเป็นแท่งผอมยาว */
body.wa-cams-side #cameras-container > div > * {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
}
body.wa-cams-side #cameras-container video { width: 100% !important; height: auto !important; }

/* ── 3) ปุ่มสลับโหมด ─────────────────────────────────────────────────── */
/* ปุ่มคุมแถบวิดีโอ · ทึบ มีขอบขาว และมีคำกำกับ ให้เห็นชัดบนพื้นแผนที่ที่สีมั่ว
 * (ของเดิมจาง ๆ ขนาดจิ๋ว มองแทบไม่เห็น โดยเฉพาะบนมือถือ) */
#wa-cams-dock,
#wa-cams-hide {
  position: fixed; z-index: 2147483100; right: .5rem;
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  height: 2.1rem; padding: 0 .7rem; border-radius: 999px;
  background: rgba(18,20,28,.96);
  color: #fff; border: 1.5px solid rgba(255,255,255,.55);
  font: 700 .8rem/1 system-ui, sans-serif; letter-spacing: .01em;
  cursor: pointer; opacity: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,.55);
  transition: background .12s ease, transform .12s ease;
}
#wa-cams-dock:hover,
#wa-cams-hide:hover { background: #2f6fed; border-color: #fff; transform: scale(1.04); }
#wa-cams-dock:active,
#wa-cams-hide:active { transform: scale(.96); }
.wa-btn-glyph { font-size: 1rem; line-height: 1; }
.wa-btn-text { white-space: nowrap; }

#wa-cams-dock { top: 4.5rem; }
body.wa-cams-side #wa-cams-dock { right: 14rem; }

/* ── 4) ซ่อนแถบวิดีโอ (ปุ่ม ▴ / ▾) ─────────────────────────────────────
 * บนมือถือแถบรายชื่อกินจอเกินครึ่ง จนแทบไม่เห็นแผนที่
 *
 * ยุบความสูง/ความกว้างเหลือ 0 + โปร่งใส แทนที่จะ display:none โดยตั้งใจ:
 * <video>/<audio> ต้องยังอยู่ในหน้าเพื่อให้เสียงคนอื่นดังต่อ ถ้าถอดออกจาก
 * layout ทั้งก้อน เบราว์เซอร์บางตัวจะหยุดเล่นสตรีมไปด้วย
 *
 * วางบล็อกนี้ไว้หลังกฎของโหมด "วางข้างจอ" เพื่อให้ชนะเวลาเปิดสองโหมดพร้อมกัน
 */
body.wa-cams-hidden .max-height-quarter,
body.wa-cams-hidden #cameras-container {
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#wa-cams-hide { top: 7.1rem; }
body.wa-cams-side #wa-cams-hide { right: 14rem; }

/* ตอนซ่อนอยู่: ปุ่มสลับบน/ข้างไม่มีความหมาย เอาออก แล้วเลื่อนปุ่ม Show ขึ้นมาแทนที่
   และย้อมเขียวให้รู้ว่า "มีของถูกซ่อนอยู่ กดเพื่อเอากลับมา" */
body.wa-cams-hidden #wa-cams-dock { display: none !important; }
body.wa-cams-hidden #wa-cams-hide {
  top: 4.5rem; right: .5rem;
  background: #1f7a4d; border-color: #fff;
}
body.wa-cams-hidden #wa-cams-hide:hover { background: #249a5e; }

/* จอมือถือ: จอเล็ก ปุ่มต้องไม่ไปบังแผนที่
 * ย่อลงกว่าบนคอม แต่ยังทึบ+มีขอบขาว จึงยังเห็นชัด (ปัญหาเดิมคือ "จาง" ไม่ใช่ "เล็ก") */
@media (max-width: 640px) {
  #wa-cams-dock, #wa-cams-hide {
    height: 1.7rem; padding: 0 .5rem; gap: .22rem;
    font-size: .66rem; border-width: 1px;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
  }
  .wa-btn-glyph { font-size: .8rem; }
  #wa-cams-dock { top: 4.5rem; }
  #wa-cams-hide { top: 6.5rem; }
  body.wa-cams-hidden #wa-cams-hide { top: 4.5rem; }
}


/* โหมดห้ามรบกวน · body ได้คลาส wa-dnd จาก wa-ui.js เมื่อปิดเสียงทุกสตรีมอยู่ */
/* ป้ายกลางจอของโหมดห้ามรบกวน · กดเพื่อออกจากโหมดได้ */
.wa-dnd-exit {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2147483000;
    padding: 16px 30px;
    border: 0;
    border-radius: 999px;
    background: rgba(179, 38, 30, 0.94);
    color: #fff;
    font: 700 18px/1.35 system-ui, sans-serif;
    letter-spacing: 0.02em;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    transition: transform 0.12s ease, background 0.12s ease;
}
.wa-dnd-exit:hover {
    background: rgba(203, 46, 36, 0.97);
    transform: translate(-50%, -50%) scale(1.04);
}
.wa-dnd-exit small {
    display: block;
    margin-top: 4px;
    font: 500 13px/1.3 system-ui, sans-serif;
    opacity: 0.9;
}


/* เคลือบดำโปร่งใสระหว่างเปิดโหมดห้ามรบกวน
 *
 * ยังเห็นแผนที่และคนอื่นเดินไปมาอยู่ แค่หรี่ลงให้รู้ว่า "ตอนนี้ไม่อยู่"
 * ใช้ ::before บน body ซ้อนทับเฉพาะพื้นที่เกม และ pointer-events: none
 * เพื่อให้ทุกอย่างใต้มันยังกดได้ตามปกติ (โดยเฉพาะแถบปุ่มไว้กดปิดโหมด)
 */
body.wa-dnd::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    background: rgba(0, 0, 0, 0.62);
    pointer-events: none;
}


/* วาดทับจอที่แชร์ · โผล่เฉพาะตอนมีคนแชร์จอ (wa-draw.js เป็นคนสั่งซ่อน/แสดง)
 * wa-draw.js วางที่มุมขวาบนของจอที่แชร์ หรือที่ที่ผู้ใช้ลากไปวาง (left/top)
 * เคยอยู่กลางล่าง แล้วบังช่องพิมพ์ของแอปที่แชร์ (follow-up/internal#237) */
#wa-draw-bar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2147483100;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(24, 25, 31, 0.92);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
/* ตอนไม่ได้วาด เหลือแค่ที่จับกับปากกา · กดปากกาแล้วชุดสีกับยางลบจึงโผล่ */
#wa-draw-bar.collapsed { padding: 6px 8px; gap: 4px; }
#wa-draw-bar.collapsed .wa-draw-color,
#wa-draw-bar.collapsed #wa-draw-eraser { display: none; }
#wa-draw-grip {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    line-height: 1;
    padding: 4px 2px;
    cursor: grab;
    user-select: none;
    touch-action: none;
}
#wa-draw-grip:active { cursor: grabbing; }
#wa-draw-bar button {
    border: 0;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
#wa-draw-pen,
#wa-draw-eraser {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
#wa-draw-pen:hover,
#wa-draw-eraser:hover { background: rgba(255, 255, 255, 0.2); }
#wa-draw-pen.on { background: #2f6fed; }
#wa-draw-eraser.on { background: #b3261e; }
.wa-draw-color {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25) inset;
}
/* สีที่เลือกอยู่ · วงแหวนขาวรอบนอกให้เห็นชัดบนพื้นเข้ม */
.wa-draw-color.on {
    outline: 2px solid #fff;
    outline-offset: 2px;
    transform: scale(1.12);
}
#wa-draw-canvas {
    position: fixed;
    z-index: 2147483090;
    pointer-events: none;   /* wa-draw.js เปิดให้คลิกเฉพาะตอนอยู่ในโหมดวาด/ลบ */
}


/* ลากแผนที่ไปดูโซนอื่น (wa-pan.js) */
body.wa-panning canvas { cursor: grabbing !important; }
#wa-pan-back {
    position: fixed;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    z-index: 2147483100;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(24, 25, 31, 0.92);
    color: #fff;
    font: 600 13px/1.2 system-ui, sans-serif;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
#wa-pan-back:hover { background: rgba(48, 50, 60, 0.96); }

/* ── ปุ่มซ่อน/แสดงแถบเมนูของ WA (14 ต.ค. 2569) · wa-ui.js วางตำแหน่ง top/bottom ตามแถบจริง ── */
body.wa-menu-collapsed .bp-menu { display: none !important; }
/* WA ซ่อนเมนูค้าง (คลาส hidden ของ Tailwind) แล้วผู้ใช้กด Show menu */
body.wa-menu-force .bp-menu.hidden { display: block !important; }

#wa-menu-toggle {
  position: fixed; z-index: 2147483100; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  height: 1.6rem; padding: 0 .75rem;
  border-radius: 0 0 .7rem .7rem;
  background: rgba(18,20,28,.92);
  color: #fff; border: 1.5px solid rgba(255,255,255,.55); border-top: 0;
  font: 700 .72rem/1 system-ui, sans-serif; letter-spacing: .01em;
  cursor: pointer; opacity: .8;
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
  transition: background .12s ease, opacity .12s ease;
  -webkit-tap-highlight-color: transparent;
}
#wa-menu-toggle.at-bottom {
  border-radius: .7rem .7rem 0 0;
  border-top: 1.5px solid rgba(255,255,255,.55); border-bottom: 0;
}
#wa-menu-toggle:hover { opacity: 1; background: #2f6fed; border-color: #fff; }
/* ซ่อนอยู่ = สีเขียวเหมือนปุ่ม Show ของแถบวิดีโอ ให้รู้ว่ามีของถูกซ่อนอยู่ */
#wa-menu-toggle.is-off { opacity: 1; background: #1f7a4d; border-color: #fff; }
#wa-menu-toggle.is-off:hover { background: #249a5e; }

/* มือถือ/จอสัมผัส: ปุ่มต้องกดง่าย สูงอย่างน้อย 36px · จอแคบตัดคำเหลือแค่ลูกศร+Menu ไม่ได้ เพราะต้องรู้ว่าซ่อนหรือแสดง */
@media (pointer: coarse) {
  #wa-menu-toggle { height: 2.25rem; padding: 0 1rem; font-size: .8rem; opacity: .9; }
}
@media (max-width: 640px) {
  #wa-menu-toggle { font-size: .72rem; padding: 0 .8rem; }
}