/* main.css (CDN) ไม่ได้ตั้ง position ให้ <main> เอง (มีแค่ margin/padding)
    ส่วน body { position: relative } และ header { z-index: 1000 } มาจาก
    rldragon-stylersheet.css/header.css — ถ้าไม่ประกาศตรงนี้ ลูก absolute
    ของเราจะไปยึด body แทน แล้วไปซ้อนใต้ header (z-index แพ้ header) ทำให้
    กดปุ่มใน tool-panel ไม่ติด

    body ทำเป็น flex column + main: flex:1 เพื่อให้ main มีความสูงจริง
    (ไม่งั้น main สูง 0 เพราะลูกทั้งหมดเป็น absolute ไม่ถูกนับความสูงให้ parent
    ทำให้ #draw-plate-container ที่ height:100% กลายเป็น 0 ไปด้วย) */
body {
    display: flex;
    flex-direction: column;
}

main {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;   /* กัน flex item ดันสูงเกิน parent เวลามีลูกเป็น absolute */
}

#draw-plate-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;      /* ตัดส่วนของ canvas ที่เลื่อน/ซูมเกินขอบจอ */
    touch-action: none;    /* คุม pan/zoom เองทั้งหมด ไม่ให้เบราว์เซอร์แย่ง gesture */
}
/* กริดพิกัดอยู่ canvas แยกจาก draw-plate ต่างหาก อยู่ล่างสุด (วาดก่อนใน DOM)
    เพื่อไม่ให้ยางลบ (destination-out) ของ content ไปกินเส้นกริด/ตัวเลขด้วย
    — คนละ pixel buffer กันเลย ไม่ใช่แค่วาดคนละช่วงเวลา */
#grid-canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    pointer-events: none;
}

#draw-plate {
    position: absolute;
    top: 0;
    left: 0;
    display: block;   /* ตัด inline gap เล็กๆ ใต้ canvas ออก */
    touch-action: none;
    transform-origin: 0 0;
}

/* header-controls + tool-panel: อยู่แทนตำแหน่ง nav เดิม เป็น flex item ปกติ
    ในแถว header (ไม่ absolute ลอยทับ canvas แล้ว) ดันชิดขวาด้วย margin-left:
    auto เหมือนที่ nav.css เดิมเคยดัน .right ไปทางขวา

    ปุ่มใช้ class "blue_sw" ของจริงจาก buttons/common.css + buttons/blue.css
    (โหลดอยู่แล้วใน head) แบบเดียวกับ .view-toggle button ใน
    publications/index.html ไม่ hard-code สีเอง — ได้ปุ่มมุมไม่โค้ง (common.css
    ไม่ตั้ง border-radius) และ toggle แบบเดียวกับที่เว็บใช้อยู่แล้วจริง ๆ
    input[type=text] ก็ใช้ style จาก input/text.css ที่โหลดอยู่แล้วเหมือนกัน
    ไม่ต้อง hard-code เอง */
#header-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

#room-panel {
    display: flex;
    align-items: center;
    gap: 8px;
}

#room-panel input[type="text"] {
    width: 90px;
    text-transform: uppercase;
}

#room-panel button {
    padding: 8px 12px;
    font-size: 1em;
    white-space: nowrap;
}

/* ข้อความสถานะการเชื่อมต่อ (โผล่เฉพาะตอนหลุด/กำลังต่อใหม่) — ดู
    updateConnectionStatus() ใกล้ connectWebSocket() ท้ายไฟล์ */
#connection-status {
    font-size: 0.85em;
    color: var(--fire-color);
    white-space: nowrap;
}

#connection-status[hidden] {
    display: none;
}

#tool-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

#tool-panel button {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#tool-panel button:disabled {
    opacity: 0.35;
    cursor: default;
}

#tool-panel button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* เมนู dropdown ของปุ่มปากกา (ตั้งค่าหัวปากกา) */
#tool-panel .tool-with-menu {
    position: relative;
}

#tool-panel .tool-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;   /* กางไปทางซ้าย เพราะ tool-panel ชิดขอบขวาจอ กางขวาแล้วล้นจอ */
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    background: var(--normal);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

#tool-panel .tool-dropdown[hidden] {
    display: none;
}

#tool-panel .tool-dropdown button {
    justify-content: flex-start;
    gap: 8px;
    white-space: nowrap;
}

#tool-panel .tool-dropdown button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

#tool-panel button.active {
    transform: translateY(0px);
    box-shadow: none;
    background-color: #3694d6; /* matches blue_sw:active เหมือน publications */
}

#tool-panel .tool-panel-divider {
    width: 1px;
    margin: 4px 2px;
    background: var(--line);
}

/* เส้นคั่นแนวนอนใน dropdown (ต่างจาก .tool-panel-divider ที่เป็นแนวตั้ง
    สำหรับคั่นปุ่มในแถว toolbar หลัก) */
#tool-panel .tool-dropdown-divider {
    height: 1px;
    width: 100%;
    margin: 4px 0;
    background: var(--line);
}

/* สีปากกา — วงกลม preset ในเมนูตั้งค่าปากกา (ดู #pen-tool-dropdown) ไม่ใช้
    blue_sw เพราะพื้นหลังของปุ่มคือตัวสีเอง ไม่ใช่สี theme ปกติของปุ่มทั่วไป */
#tool-panel .color-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 2px;
}

#tool-panel .color-select {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
}

#tool-panel .color-select.active {
    border-color: var(--ice-color);
    box-shadow: 0 0 0 2px var(--ice-color);
}

#tool-panel #pen-color-custom {
    width: 32px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

/* เลเยอร์เคอร์เซอร์ของคนอื่นในห้อง — ทับอยู่บน canvas วาด แต่ไม่รับ pointer
    event เอง (pointer-events:none) และใช้ transform เดียวกับ #draw-plate
    เสมอ (sync ผ่าน applyTransform() ใน JS) เพื่อให้เลื่อน/ซูมตามกระดานจริง */
#cursor-layer {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    pointer-events: none;
}

.remote-cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--normal);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* ขอบเขตยางลบ — ต่างจาก .remote-cursor ตรงที่ "ไม่" หักลบ zoomScale ออก
    (ปล่อยให้ parent #cursor-layer ที่ scale(zoomScale) อยู่แล้วขยาย/ย่อตาม
    จริง) เพราะขนาดวงกลมนี้ต้องแทนพื้นที่ลบจริงในพิกัดโลก ไม่ใช่ขนาดคงที่บนจอ
    แบบเคอร์เซอร์คนอื่น — width/height ตั้งเป็น currentEraserSize ตรง ๆ ใน JS */
#eraser-cursor {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    border: 1.5px solid var(--fire-color);
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    transform: translate(-50%, -50%);
    display: none;
}

/* ===================================================================
    มือถือ / แท็บเล็ต
    =================================================================== */

/* กันเบราว์เซอร์มือถือเลือกข้อความ/เด้งเมนูกดค้าง (callout ของ iOS) ตอนใช้นิ้ว
    วาดบนกระดาน และกัน pull-to-refresh/เด้งหน้าตอนลากนิ้ว */
#draw-plate-container {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

body {
    overscroll-behavior: none;
}

/* ตัด delay รอเช็ค double-tap-zoom ของเบราว์เซอร์มือถือ ปุ่มตอบสนองทันที */
#header-controls button {
    touch-action: manipulation;
}

/* ปุ่มที่มีความหมายเฉพาะจอสัมผัส (เช่น "วาดด้วยนิ้ว") ซ่อนไว้บนเครื่องที่มีแค่
    เมาส์ — ใช้ any-pointer เพราะโน้ตบุ๊กจอสัมผัสมีทั้งเมาส์และนิ้วพร้อมกัน */
#tool-panel .touch-only {
    display: none;
}

@media (any-pointer: coarse) {
    #tool-panel .touch-only {
        display: flex;
    }
}

/* นิ้วกดปุ่มเล็ก ๆ พลาดง่าย — ขยายเป้ากดให้อย่างน้อย 44px ตามแนวทางทั่วไป */
@media (pointer: coarse) {
    #tool-panel button {
        min-width: 44px;
        min-height: 44px;
    }

    #tool-panel .tool-dropdown button {
        padding: 12px;
    }

    #tool-panel .color-select {
        width: 32px;
        height: 32px;
        min-width: 0;
        min-height: 0;
    }
}

/* จอแคบ (มือถือ / แท็บเล็ตแนวตั้ง): header แถวเดียวใส่ห้อง + toolbar ไม่พอ
    ย้าย toolbar ไปเป็นแถบล่างจอแทน (นิ้วโป้งเอื้อมถึงง่ายกว่าด้วย) header เหลือ
    แค่โลโก้ + ช่องรหัสห้อง */
:root {
    --slateboard-toolbar-h: 60px;
}

@media (max-width: 900px) {
    /* backdrop-filter ของ header (header.css) ทำให้ header กลายเป็น containing
        block ของลูก position:fixed — ถ้าไม่ปิด toolbar จะยึดกับ header แทน
        viewport แล้วไม่ลงไปอยู่ล่างจอ (header พื้นทึบอยู่แล้ว blur ไม่มีผลให้เห็น) */
    body header {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* เว้นที่ล่างจอให้ toolbar ไม่ทับกระดาน (main หดลงเท่าความสูง toolbar) */
    body main {
        margin-bottom: calc(var(--slateboard-toolbar-h) + env(safe-area-inset-bottom));
    }

    #tool-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        box-sizing: content-box;
        height: calc(var(--slateboard-toolbar-h) - 16px);
        justify-content: space-evenly;
        gap: 4px;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
        background: var(--normal);
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    }

    /* dropdown กางขึ้นจากแถบล่าง เต็มความกว้างจอ — ยึด viewport (fixed) ไม่ยึด
        ปุ่ม เพราะปุ่มปากกาอยู่ซ้ายสุด กางจากปุ่มแบบเดิมแล้วล้นขอบจอ */
    #tool-panel .tool-dropdown {
        position: fixed;
        top: auto;
        left: 8px;
        right: 8px;
        bottom: calc(var(--slateboard-toolbar-h) + env(safe-area-inset-bottom) + 8px);
        max-height: 60dvh;
        overflow-y: auto;
    }

    #header-controls {
        padding-right: 8px;
        min-width: 0;
    }
}

@media (max-width: 600px) {
    body header .left {
        padding: 6px;
    }

    body header .left .Logo h1 {
        font-size: 1.3rem;
        letter-spacing: 1px;
    }

    #room-panel {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* ไม่ย่อ font ต่ำกว่า 16px — iOS จะซูมทั้งหน้าเองตอนแตะช่องที่ตัวหนังสือเล็กกว่านั้น */
    #room-panel input[type="text"] {
        width: 76px;
        padding: 8px;
        font-size: 16px;
    }

    #room-panel button {
        padding: 8px 10px;
        font-size: 0.9em;
    }
}

/* จอเล็กมาก (มือถือรุ่นเล็ก) โลโก้กับช่องห้องไม่พอในแถวเดียว — ซ่อนโลโก้ ให้ช่อง
    ห้องที่ต้องใช้งานจริงได้ที่ */
@media (max-width: 380px) {
    body header .left {
        display: none;
    }

    #header-controls {
        margin: 0 auto;
        padding: 6px 8px;
    }
}