:root {
    /* --- Default Colors (Dark Mode) --- */
    --bg: #222222;
    --text: #ffffff;
    
    /* Panel Colors */
    --panel-bg: rgba(255, 255, 255, 0.96);
    --panel-border: #e0e0e0;
    
    /* Brand & Utility Colors */
    --accent: #1a73e8; /* Google Blue */
    --danger: #d93025; /* Red for Reset */
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* ซ่อน Scrollbar หลัก */
    background-color: var(--bg);
    transition: background-color 0.3s ease;
    font-family: 'Google Sans', 'Kanit', -apple-system, sans-serif;
    touch-action: none; /* ป้องกัน Browser Zoom/Pan ปกติ */
}

/* --- Preview Area --- */
#previewArea {
    width: 100vw;
    height: 100vh;
    overflow: auto; /* Scroll ได้ */
    padding: 60px;
    box-sizing: border-box;
    
    /* Typography Defaults */
    color: var(--text);
    white-space: pre; 
    outline: none;
    line-height: 1.6;
    letter-spacing: 0px;
    
    /* Animations */
    /* ตัด transform ออกจาก transition เพื่อให้ JS Zoom ทำงานได้ลื่นไหล */
    transition: color 0.3s ease;
    will-change: transform, font-size; 
    transform-origin: top left;
    
    /* Force Drag Mode Style always */
    cursor: grab;
    user-select: none;
}

#previewArea:active {
    cursor: grabbing;
}

/* --- Floating Tooltip --- */
.cursor-tooltip {
    position: fixed;
    pointer-events: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 9999;
    display: none; 
    
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
}

/* --- Floating Panel --- */
.floating-panel {
    position: fixed;
    top: 20px;
    right: 20px; /* ชิดขวา */
    width: 280px;
    
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 1000;
    backdrop-filter: blur(12px);
    
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    transition: width 0.3s ease;
}

/* Panel Header */
.panel-header {
    padding: 12px 16px;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #444;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    user-select: none;
}
.panel-header i { margin-right: 6px; color: var(--accent); }

.icon-btn {
    background: none; border: none; cursor: pointer;
    font-size: 0.9rem; color: #999; padding: 4px;
    border-radius: 50%; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}
.icon-btn:hover { color: var(--accent); background: rgba(0,0,0,0.05); }

/* Panel Content */
.panel-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 85vh;
    overflow-y: auto;
}
.floating-panel.collapsed .panel-content { display: none; }
.floating-panel.collapsed { width: auto; min-width: 180px; }

/* --- Theme Bar --- */
.theme-bar {
    display: flex;
    width: 100%;
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-top: 8px;
}
.theme-btn {
    flex: 1;
    height: 100%;
    border: none;
    cursor: pointer;
    position: relative;
    transition: flex-grow 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.theme-btn:hover {
    flex-grow: 4;
    z-index: 2;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* --- Layout Utils --- */
.section-group { display: flex; flex-direction: column; gap: 8px; }
.divider { border: 0; border-top: 1px solid #eee; margin: 4px 0; width: 100%; }

.input-label {
    font-size: 0.75rem; font-weight: 700; color: #666;
    text-transform: uppercase; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 6px;
}
.input-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 4px;
    cursor: default;
}

/* --- Font Header & Reset --- */
.font-header-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px; background: rgba(26,115,232,0.05);
    padding: 6px 10px; border-radius: 6px;
}
.current-font-name {
    font-weight: 600; color: var(--accent); font-size: 0.85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px;
    display: flex; align-items: center; gap: 6px;
}
.reset-btn {
    background: none; border: none; cursor: pointer; color: #aaa;
    font-size: 0.85rem; padding: 4px; border-radius: 50%;
    transition: 0.2s; display: flex; align-items: center;
}
.reset-btn:hover {
    color: var(--danger); background: rgba(217, 48, 37, 0.1);
    transform: rotate(180deg);
}

/* --- Inputs & Drop Zone --- */
.input-with-icon { position: relative; width: 100%; }
.input-icon {
    position: absolute; left: 10px; top: 50%;
    transform: translateY(-50%); color: #bbb; font-size: 0.8rem;
}
.text-input {
    width: 100%; padding: 8px 8px 8px 32px;
    border: 1px solid #ddd; border-radius: 6px;
    font-family: inherit; font-size: 0.85rem; background: #fff;
    transition: 0.2s; box-sizing: border-box;
}
.text-input:focus { border-color: var(--accent); outline: none; }

.drop-zone {
    border: 2px dashed #e0e0e0; border-radius: 6px;
    padding: 12px; text-align: center; color: #999;
    font-size: 0.75rem; cursor: pointer; transition: 0.2s; background: #fafafa;
    display: flex; justify-content: center; align-items: center; gap: 8px;
}
.drop-zone:hover, .drop-zone.dragover {
    border-color: var(--accent); color: var(--accent); background: #f0f7ff;
}
.drop-zone em { font-style: normal; font-size: 0.7rem; opacity: 0.7; }

/* --- Matrix Grid --- */
.matrix-options {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px; margin-bottom: 8px;
}
.checkbox-pill {
    position: relative; display: flex; align-items: center; justify-content: center;
    background: #f8f9fa; border: 1px solid transparent; border-radius: 6px;
    padding: 8px; cursor: pointer; transition: all 0.2s;
    font-size: 0.8rem; color: #5f6368; font-weight: 600;
}
.checkbox-pill input { display: none; }
.checkbox-pill:hover { background: #e8eaed; }
/* Style เมื่อ Checked หรืออยู่ใน Custom Mode */
.checkbox-pill:has(input:checked) {
    background: var(--accent); color: white;
    border-color: var(--accent); box-shadow: 0 2px 5px rgba(26,115,232,0.3);
}
/* Style เมื่อ Disabled (ตอนเข้า Custom Mode) */
.checkbox-pill:has(input:disabled) {
    opacity: 0.4; cursor: not-allowed; background: #f1f1f1;
}

textarea {
    width: 100%; padding: 10px; border: 1px solid #ddd;
    border-radius: 8px; font-family: inherit; font-size: 0.85rem;
    resize: vertical; outline: none; min-height: 80px;
    box-sizing: border-box; transition: 0.2s; background-color: #fdfdfd;
}
textarea:focus { border-color: var(--accent); background-color: #fff; }

/* --- Sliders & Reset Logic --- */
.slider-row { width: 100%; }
.full-width-slider {
    width: 100%; margin-top: 2px; accent-color: var(--accent);
    cursor: pointer; height: 4px; background: #ddd;
    border-radius: 2px; -webkit-appearance: none;
}
.full-width-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px;
    background: var(--accent); border-radius: 50%; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.1s;
}
.full-width-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Value Display (Reset Button) - Fix Rotation Bug */
.val-display {
    font-size: 0.8rem; font-weight: bold; color: var(--accent);
    min-width: 35px; 
    height: 20px; /* Fix ความสูงไว้ กันกระตุกเวลาสลับ Text/Icon */
    display: flex; /* ใช้ Flex เพื่อจัดกึ่งกลาง */
    align-items: center;
    justify-content: flex-end; /* ชิดขวา */
    transition: color 0.2s ease;
}

.val-display.reset-mode {
    cursor: pointer; color: var(--danger); font-size: 0.9rem;
}

/* สั่งหมุนเฉพาะตัวไอคอนข้างในแทนการหมุนทั้งกล่อง */
.val-display.reset-mode i {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
    transform-origin: center center;
}

.val-display.reset-mode:hover i { 
    transform: rotate(-180deg); /* หมุนวนกลับหลัง */
}

/* --- Footer --- */
.panel-footer {
    margin-top: 10px; text-align: center;
    font-size: 0.7rem; color: #bbb;
    border-top: 1px solid #f5f5f5; padding-top: 12px;
}
.credit-link {
    color: #999; text-decoration: none; font-weight: 600; transition: color 0.2s;
}
.credit-link:hover { color: var(--accent); }

/* --- Auto Save Switch --- */
.toggle-switch-label {
    display: flex; align-items: center; cursor: pointer;
}
.toggle-switch-label input {
    opacity: 0; width: 0; height: 0;
}
.slider-round {
    position: relative; width: 34px; height: 20px;
    background-color: #ccc; border-radius: 20px;
    transition: .4s;
}
.slider-round:before {
    position: absolute; content: ""; height: 14px; width: 14px;
    left: 3px; bottom: 3px; background-color: white;
    border-radius: 50%; transition: .4s;
}
input:checked + .slider-round {
    background-color: var(--accent);
}
input:checked + .slider-round:before {
    transform: translateX(14px);
}

/* --- Action Buttons (Print) --- */
.action-btn {
    padding: 6px 16px; /* ปรับ Padding ให้ดูสมดุลกับ Auto Save */
    background: #f8f9fa;
    border: 1px solid #dadce0;
    border-radius: 6px;
    color: #5f6368;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; /* ล็อกความสูงให้เท่ากับ toggle */
}
.action-btn:hover {
    background: #e8f0fe;
    color: var(--accent);
    border-color: var(--accent);
}
.action-btn i { font-size: 0.9em; }


/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    #rowSize, 
    .cursor-tooltip {
        display: none !important;
    }

    #previewArea {
        padding: 20px 20px 80px 20px;
        font-size: 0.9rem;
    }

    /* Compact Panel */
    .floating-panel {
        top: auto !important; left: 0 !important; right: 0; bottom: 0;
        width: 100%;
        max-height: 50vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(0);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    }
    .floating-panel.collapsed {
        transform: translateY(calc(100% - 48px)); 
    }
    
    .panel-header {
        padding: 10px 16px;
        font-size: 0.9rem;
        cursor: pointer; 
    }
    .panel-content {
        padding: 12px;
        gap: 8px;
        max-height: calc(50vh - 48px);
        overflow-y: auto;
    }
    
    .section-group { gap: 6px; }
    .input-header { margin-bottom: 2px; }
    .matrix-options { gap: 4px; }
    
    .checkbox-pill { padding: 6px; font-size: 0.75rem; }
    textarea { min-height: 60px; padding: 8px; }
    .drop-zone { padding: 10px; }
    
    .floating-panel.collapsed .panel-content {
        display: flex; opacity: 0; pointer-events: none;
    }
}

/* --- PRINT MODE --- */
/* ส่วนนี้จะทำงานเมื่อกดสั่ง Print เท่านั้น */
#printHeader { display: none; } /* ซ่อนในหน้าจอปกติ */

@media print {
    /* 1. ซ่อน UI ทุกอย่างที่ไม่ใช่เนื้อหา */
    .floating-panel, 
    .cursor-tooltip, 
    .theme-bar,
    #togglePanelBtn,
    ::-webkit-scrollbar {
        display: none !important;
    }

    /* 2. ปลดล็อก Layout ให้เนื้อหาไหลยาวลงมาได้ */
    body, html {
        height: auto !important;
        overflow: visible !important;
        background-color: #fff !important; /* บังคับพื้นขาว */
    }

    #previewArea {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        
        /* บังคับสีหมึก */
        background-color: #fff !important;
        color: #000 !important; 
        
        /* Reset Transform เพื่อให้พิมพ์ได้ชัดเจน */
        transform: none !important; 
    }

    /* 3. Header สำหรับกระดาษ (Layout Compact) */
    #printHeader {
        display: flex !important; /* ใช้ Flexbox แบ่งซ้ายขวา */
        justify-content: space-between;
        align-items: flex-end; /* ให้ข้อความอยู่ชิดเส้นบรรทัดล่าง */
        
        /* เส้น Divider บางที่สุด */
        border-bottom: 0.5pt solid #bbb !important; 
        margin-bottom: 10px;
        padding-bottom: 4px;
        width: 100%;
    }
    
    .print-header-left h1 {
        margin: 0;
        font-size: 18pt; /* เล็กลง (เดิม 24pt) */
        font-weight: 600;
        color: #000;
        line-height: 1;
    }

    .print-header-right {
        text-align: right;
    }

    .print-detail-row {
        font-size: 9pt; /* ฟอนต์เล็ก ไม่เน้นอ่าน */
        color: #666; 
        line-height: 1.3;
    }
}