/* ==================== BASE & RESET ==================== */
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        /* ซ่อนปุ่ม/element ที่ไม่รองรับใน LIFF (LINE in-app browser) */
        body.in-liff .hide-in-liff { display: none !important; }
        body {
            font-family: 'Kanit', sans-serif;
            background-color: #f4f7fb;
            display: flex; justify-content: center; align-items: flex-start;
            height: 100vh; height: var(--real-vh, 100dvh); margin: 0; color: #0f172a;
            overscroll-behavior-y: none; overflow: hidden;
        }
        
        /* ==================== APP CONTAINER ==================== */
        .app-container {
            width: 100%; max-width: 440px;
            height: 100vh; height: var(--real-vh, 100dvh);
            background-color: #f8fafc; display: flex; flex-direction: column;
            position: relative; overflow: hidden; margin: 0 auto;
            box-shadow: 0 40px 80px -20px rgba(15, 23, 42, 0.15);
        }
        @media (min-width: 700px) { .app-container { height: 95vh; height: calc(var(--real-vh, 100dvh) * 0.95); border-radius: 40px; border: 6px solid #ffffff; } }
        
        .content-area { flex: 1; overflow-y: auto; padding: 0 16px; display: flex; flex-direction: column; position: relative; z-index: 10; }
        
        /* ==================== AMBIENT GLOW BACKGROUND ==================== */
        .ambient-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
        .ambient-glow-1 { position: absolute; top: -10%; right: -15%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, rgba(59,130,246,0) 70%); border-radius: 50%; filter: blur(40px); }
        .ambient-glow-2 { position: absolute; bottom: 10%; left: -15%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0) 70%); border-radius: 50%; filter: blur(40px); }
        
        /* ==================== GLASSMORPHISM & UTILS (ADAPTIVE SAFE AREA) ==================== */
        .glass-header { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.6); }
        .glass-nav { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 -10px 40px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.8); }
        
        .pb-safe { padding-bottom: max(env(safe-area-inset-bottom), 24px); }
        .pt-safe { padding-top: max(env(safe-area-inset-top), 8px); }
        
        /* ==================== INPUTS & CARDS (ULTRA PREMIUM) ==================== */
        .premium-card { 
            background: rgba(255, 255, 255, 0.85); 
            backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
            border-radius: 20px; 
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.03), inset 0 1px 1px rgba(255, 255, 255, 1); 
            border: 1px solid rgba(226, 232, 240, 0.6); 
            padding: 16px; 
            transition: transform 0.2s ease, box-shadow 0.2s ease; 
        }
        .input-box-rounded { 
            width: 100%; border: 1px solid transparent; border-radius: 14px; text-align: center; outline: none; transition: all 0.3s; 
            background: rgba(241, 245, 249, 0.8); color: #1e293b; font-weight: 800; font-size: 22px; height: 50px; 
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.02); 
        }
        .input-box-rounded:focus { 
            background-color: #ffffff; border-color: rgba(59, 130, 246, 0.4);
            box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.1), 0 8px 20px rgba(59, 130, 246, 0.08); 
            color: #2563eb; 
        }
        /* ซ่อนลูกศรขึ้น-ลง อัตโนมัติของเบราว์เซอร์ */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        input[type="number"] { -moz-appearance: textfield; }
        
        /* ==================== PILLS & BUTTONS ==================== */
        .active-male { background: linear-gradient(135deg, #0ea5e9, #2563eb); color: white; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); border: none; font-weight: 800; }
        .active-female { background: linear-gradient(135deg, #f43f5e, #e11d48); color: white; box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3); border: none; font-weight: 800; }
        .active-blue { background: linear-gradient(135deg, #3b82f6, #1e40af); color: white; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); border: none; font-weight: 800; }
        
        .quick-pill-container { background: rgba(241, 245, 249, 0.7); padding: 5px; border-radius: 14px; display: flex; gap: 4px; height: 42px; border: 1px solid rgba(255,255,255,0.5); }
        .quick-pill { font-size: 11px; font-weight: 700; border-radius: 10px; background-color: transparent; color: #64748b; border: 1px solid transparent; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); flex: 1; text-align: center; display: flex; align-items: center; justify-content: center;}
        .quick-pill:hover { background-color: rgba(255,255,255,0.8); color: #334155; }
        .quick-pill:active { background-color: #ffffff; color: #2563eb; transform: scale(0.92); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
        .quick-pill.disabled-pill { color: #cbd5e1 !important; pointer-events: none; }
        .quick-pill-active { background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; color: #ffffff !important; font-weight: 800 !important; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3) !important; border-color: transparent !important; transform: scale(1.02); }
        .quick-pill-emerald-active { background: linear-gradient(135deg, #10b981, #047857) !important; color: #ffffff !important; font-weight: 800 !important; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3) !important; border-color: transparent !important; transform: scale(1.02); }
        
        @keyframes bgFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        .btn-primary { 
            background: linear-gradient(135deg, #1e3a8a, #3b82f6, #1e3a8a); background-size: 200% 200%;
            animation: bgFlow 6s ease infinite; color: white; border-radius: 16px; 
            box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255,255,255,0.2); transition: all 0.2s; 
        }
        .btn-primary:active { transform: scale(0.96); box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2); }
        
        /* ==================== MODALS ==================== */
        .modal-overlay { background-color: rgba(15, 23, 42, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 0.3s ease; opacity: 0; pointer-events: none; visibility: hidden; z-index: 1000; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; }
        .modal-overlay.show { opacity: 1; pointer-events: auto; visibility: visible; }
        .modal-content-card { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); width: 100%; max-width: 21rem; border-radius: 28px; overflow: clip; max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 30px 60px -15px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.8); transform: translateY(20px) scale(0.95); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); border: 1px solid rgba(255,255,255,0.5); }
        .modal-overlay.show .modal-content-card { transform: translateY(0) scale(1); }
        .hidden { display: none !important; }
        .swal2-container { z-index: 99999 !important; }
        
        /* ==================== SCROLLBARS & TABLE ==================== */
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        #policyTableBody.show-breakeven .breakeven-target { background-color: #ecfdf5 !important; }
        #policyTableBody.show-breakeven .breakeven-target td { font-weight: 800; color: #047857 !important; }
        #policyTableBody.show-breakeven .breakeven-target .be-badge { display: block !important; }
        .be-highlight-row { background-color: #d1fae5; }
        .be-highlight-row td.be-td-colored { color: #047857 !important; font-weight: 800 !important; }
        #policyTableBody.hide-be-highlight .be-highlight-row { background-color: transparent !important; border-top-color: transparent !important; border-bottom-color: transparent !important; border-top-width: 1px !important; border-bottom-width: 1px !important; }
        #policyTableBody.hide-be-highlight .be-highlight-row td.be-td-colored { color: inherit !important; font-weight: 700 !important; }
        .list-row { transition: all 0.2s; border: 1px solid transparent; cursor: pointer; }
        .list-row:active { background-color: #f8fafc; border-color: #e2e8f0; transform: scale(0.98); }
        
        @keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
        .listening-active { color: #ef4444 !important; animation: pulse-glow 1.5s infinite; border-radius: 50%; }
        .nav-item { position: relative; transition: all 0.3s; cursor: pointer; }
        .nav-item.active { color: #2563eb; transform: translateY(-2px); }
        .nav-item.active::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background-color: #2563eb; border-radius: 2px; }
        
        @keyframes gold-shine { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
        .text-shine-gold { background: linear-gradient(120deg, #fef08a 20%, #ffffff 40%, #ffffff 60%, #fef08a 80%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: gold-shine 3s linear infinite; }
        
        .com-item-row { display: flex; align-items: center; padding: 12px 14px; border: 1px solid rgba(251, 191, 36, 0.3); border-radius: 16px; margin-bottom: 8px; background: white; font-size: 0.9rem; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
        .com-year-pill { background: #fef3c7; color: #d97706; padding: 4px 12px; border-radius: 12px; font-weight: 800; text-align: center; font-size: 0.75rem; border: 1px solid #fde68a; }

        /* ==================== COMMAND CENTER — TWO-PANE LAYOUT ==================== */
        :root { --cg: #00A651; --cg-glow: rgba(0, 166, 81, 0.35); }

        /* Mobile: transparent wrapper — body's flex centering governs app-container */
        .command-center-layout {
            display: flex;
            width: 100%;
            height: 100vh;
            height: var(--real-vh, 100dvh);
            justify-content: center;
            align-items: flex-start;
            overflow: hidden;
        }

        .right-pane { display: none; }

        /* Tablet / iPad / Desktop / Foldable inner screen
           - iPad portrait/landscape (≥ 768 × 600)
           - Galaxy Z Fold inner screen ทั้งสองแนว (~893×821 และ 821×893)
           - Honor Magic V3 inner screen (~719×781 CSS px ที่ DPR 3)
           - ลด threshold เป็น 600×500 เพื่อรองรับ foldable inner screen
           - กันจอนอกพับแนว landscape (792×353) ด้วย min-height: 500 */
        @media (min-width: 600px) and (min-height: 500px) {
            body {
                justify-content: flex-start;
                align-items: flex-start;
                background: linear-gradient(135deg, #eaf1f8 0%, #f2f6fc 60%, #e6eef8 100%);
            }
            .command-center-layout {
                justify-content: flex-start;
                align-items: stretch;
                width: 100vw;
                height: 100vh;
                height: var(--real-vh, 100dvh);
                overflow: hidden;
            }
            .app-container {
                flex: 0 0 400px !important;
                min-width: 400px !important;
                max-width: 400px !important;
                width: 400px !important;
                height: 100vh !important;
                height: var(--real-vh, 100dvh) !important;
                border-radius: 0 !important;
                border: none !important;
                margin: 0 !important;
                box-shadow: 4px 0 20px rgba(15, 23, 42, 0.10);
            }
            .right-pane {
                display: flex !important;
                flex: 1 1 0 !important;
                flex-direction: column;
                background: #f8fafc;
                border-left: 1px solid rgba(220, 230, 242, 0.9);
                overflow: hidden;
                position: relative;
                min-width: 0 !important;
            }
            /* header ตาราง: badges เต็มแถว */
            #tableHeaderRow { flex-direction: column !important; align-items: stretch !important; gap: 4px !important; padding: 6px 10px !important; }
            #tableHeaderTitle { flex: unset !important; width: 100% !important; }
            #tableHeaderTitle > div { gap: 4px !important; }
            #tableHeaderTitle span { white-space: nowrap !important; min-width: 0 !important; }
        }

        /* จอนอกของมือถือพับ (แนว landscape เท่านั้น เช่น 792×353) — บังคับเป็น mobile
           ใช้เงื่อนไขเข้มงวดเพื่อไม่กระทบคอมที่หน้าต่าง browser เตี้ยกว่าปกติ */
        @media (max-height: 450px) and (orientation: landscape) and (max-width: 1000px) {
            .right-pane { display: none !important; }
            .app-container {
                max-width: 440px !important;
                min-width: 0 !important;
                width: 100% !important;
                flex: 0 1 auto !important;
                margin: 0 auto !important;
            }
            .command-center-layout {
                justify-content: center !important;
                align-items: center !important;
            }
            body {
                justify-content: center !important;
                align-items: center !important;
                background: #f4f7fb !important;
            }
        }

        /* ==================== FOLDABLE INNER SCREEN — 1:2 RATIO ====================
           จอในของมือถือพับ (เช่น Galaxy Z Fold ~821-893 px) ใช้สัดส่วน 1:2
           - จอใน Fold portrait (821 wide) → ซ้าย ~273 + ขวา ~547
           - จอใน Fold landscape (893 wide) → ซ้าย ~298 + ขวา ~595 */
        @media (min-width: 700px) and (max-width: 1000px) and (min-height: 500px) and (max-height: 950px) {
            .app-container {
                flex: 1 1 0 !important;
                min-width: 0 !important;
                max-width: none !important;
                width: auto !important;
            }
            .right-pane {
                flex: 2 1 0 !important;
                min-width: 0 !important;
            }
        }

        /* Foldable explicit detection — เมื่อหน้าจอมี hinge แนวตั้ง (ซ้าย|ขวา) */
        @media (horizontal-viewport-segments: 2) and (min-height: 600px) {
            .app-container {
                flex: 1 1 0 !important;
                min-width: 0 !important;
                max-width: none !important;
                width: auto !important;
            }
            .right-pane {
                flex: 2 1 0 !important;
                min-width: 0 !important;
                margin-left: 0 !important;
            }
        }

        /* ==================== RIGHT PANE — RESULT CANVAS ==================== */
        .result-canvas {
            flex: 1;
            overflow-y: auto;
            padding: 20px 24px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .result-canvas-placeholder {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }
        .zebra-glass-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 13px 18px;
            border-radius: 14px;
            border: 1px solid rgba(0,0,0,0.04);
            transition: background 0.2s;
        }
        .zebra-glass-row:nth-child(odd)  { background: rgba(248,250,252,0.9); }
        .zebra-glass-row:nth-child(even) { background: rgba(255,255,255,0.6); }

        /* Data Pills */
        .dp { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; }
        .dp-blue  { background: rgba(59,130,246,0.12);  color: #2563eb; border: 1px solid rgba(59,130,246,0.25); }
        .dp-green { background: rgba(0,166,81,0.12);    color: #00843F; border: 1px solid rgba(0,166,81,0.25); }
        .dp-amber { background: rgba(245,158,11,0.12);  color: #d97706; border: 1px solid rgba(245,158,11,0.25); }
        .dp-rose  { background: rgba(244,63,94,0.12);   color: #e11d48; border: 1px solid rgba(244,63,94,0.25); }

        /* ==================== AI WAVEFORM RINGS (Chubb Green) ==================== */
        .ai-waveform {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .ai-waveform-ring {
            position: absolute;
            border-radius: 50%;
            border: 2px solid var(--cg);
            animation: waveformPulse 2.4s ease-out infinite;
            opacity: 0;
        }
        .ai-waveform-ring:nth-child(1) { animation-delay: 0s; }
        .ai-waveform-ring:nth-child(2) { animation-delay: 0.6s; }
        .ai-waveform-ring:nth-child(3) { animation-delay: 1.2s; }
        @keyframes waveformPulse {
            0%   { opacity: 0.9; transform: scale(0.5); }
            100% { opacity: 0;   transform: scale(1); }
        }

        /* ==================== VOICE OVERLAY (Immersive Frosted Glass) ==================== */
        .voice-overlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(8, 16, 36, 0.93);
            backdrop-filter: blur(28px) saturate(140%);
            -webkit-backdrop-filter: blur(28px) saturate(140%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 28px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .voice-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }
        .live-transcript {
            max-width: 340px;
            text-align: center;
            font-size: 19px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.92);
            min-height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1.55;
            padding: 0 16px;
        }
        .live-transcript .interim { color: rgba(255, 255, 255, 0.45); font-style: italic; }
        .voice-overlay-label {
            font-size: 11px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.3);
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        /* ==================== PEARL DASHBOARD TABLE ==================== */
        .pearl-dashboard-table {
            display: flex;
            flex-direction: column;
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
        }
        .pdt-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid rgba(226, 232, 240, 0.6);
            animation: pdtRowIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
            opacity: 0;
        }
        .pdt-row:nth-child(odd)  { background: rgba(248, 250, 252, 1); }
        .pdt-row:nth-child(even) { background: rgba(255, 255, 255, 1); }
        .pdt-row:last-child { border-bottom: none; }
        .pdt-label { font-size: 13px; font-weight: 600; color: #475569; font-family: 'Kanit', sans-serif; }
        .pdt-value { font-size: 14px; font-weight: 800; color: #1e293b; font-family: 'Kanit', sans-serif; }
        .pdt-value.cg   { color: #00843F; text-shadow: 0 0 14px rgba(0, 166, 81, 0.25); }
        .pdt-value.rose { color: #e11d48; }
        .pdt-value.blue { color: #2563eb; }
        @keyframes pdtRowIn {
            from { opacity: 0; transform: translateX(20px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes workspaceFadeSlideUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .workspace-fade-slide-up {
            animation: workspaceFadeSlideUp 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        /* ==================== RESULT TABLE READABILITY ==================== */
        /* Scoped to result-table surfaces only: workspace canvas, Swal popups, modal cards. */
        #resultCanvas table thead,
        .swal2-html-container table thead,
        .modal-content-card table thead {
            background-color: #f8fafc !important;
            color: #1e293b !important;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        #resultCanvas table th, #resultCanvas table td,
        .swal2-html-container table th, .swal2-html-container table td,
        .modal-content-card table th, .modal-content-card table td {
            white-space: nowrap;
            padding: 12px 16px !important;
            border-bottom: 1px solid #f1f5f9;
        }

        /* Data pills — for high-contrast inline summary capsules. */
        .data-pill {
            display: inline-flex;
            white-space: nowrap;
            margin-bottom: 8px;
        }
        /* Chubb Green value with subtle glow — used for final/positive values in the Pearl Canvas table */
        .value-cg-glow {
            color: #00A651;
            text-shadow: 0 0 12px rgba(0, 166, 81, 0.28);
        }
        .pdt-row:nth-child(1) { animation-delay: 0.04s; }
        .pdt-row:nth-child(2) { animation-delay: 0.09s; }
        .pdt-row:nth-child(3) { animation-delay: 0.14s; }
        .pdt-row:nth-child(4) { animation-delay: 0.19s; }
        .pdt-row:nth-child(5) { animation-delay: 0.24s; }
        .pdt-row:nth-child(6) { animation-delay: 0.29s; }
        .pdt-row:nth-child(7) { animation-delay: 0.34s; }
        .pdt-row:nth-child(8) { animation-delay: 0.39s; }

        /* Right pane: resultCanvas layout */
        @media (min-width: 700px) and (min-height: 600px) {
            #resultCanvas {
                display: flex;
                flex-direction: column;
            }
            #canvasPlaceholder {
                flex: 1;
            }
            /* Confine bottom nav & floating bars to the left pane (app-container) */
            #bottomNavContainer,
            #modalBottomBar {
                position: absolute; /* prevent any fixed-position bleed to right pane */
            }
        }

        /* ==================== RIGHT PANE STRUCTURAL LOCK ==================== */
        /* Forces a strict flex-column dashboard so the summary stays pinned and the schedule scrolls. */
        #rightPane,
        #resultCanvas {
            display: flex !important;
            flex-direction: column !important;
            height: 100vh !important;
            overflow: hidden !important;
        }
        #resultCanvas > div:first-child {
            flex-shrink: 0 !important;
            z-index: 10 !important;
        }
        .policy-table-wrapper {
            flex: 1 1 0% !important;
            overflow: auto !important;
        }
        .policy-table-wrapper thead th {
            position: sticky !important;
            top: 0 !important;
            z-index: 20 !important;
        }
        /* Right-pane close affordance — high-visibility red */
        .menu-x,
        #rightPane .close-btn,
        #rightPane [data-close] {
            background-color: #ef4444 !important;
            color: white !important;
        }
        /* =========================================
   [COMPACT UI] ย่อขนาดกล่องสรุปข้อมูลด้านบน (ลดพื้นที่)
   ========================================= */

/* 1. ลดกรอบและ Padding ของกล่องสีขาวด้านบน */
#resultCanvas > div:first-child {
    padding: 0.75rem 1rem !important; 
    border-radius: 0.75rem !important;
    margin-bottom: 0 !important;
    gap: 0.5rem !important; /* ลดระยะห่างระหว่างส่วนหัวกับเม็ดยา */
}

/* 2. ลดขนาดตัวอักษรหัวข้อ (ชื่อแผน) */
#resultCanvas > div:first-child h3,
#resultCanvas > div:first-child h2 {
    font-size: 15px !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
}

/* 3. บีบอัด Data Pills (เม็ดยาข้อมูล) ให้เล็กลงและชิดกัน */
.data-pill {
    padding: 3px 10px !important; /* ลดความพองบน-ล่าง */
    margin: 2px 4px 2px 0 !important; /* ลดระยะห่างรอบๆ */
    font-size: 12px !important; /* ลดขนาดฟอนต์ */
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 4. ลดขนาดไอคอนใน Data Pills */
.data-pill i {
    font-size: 12px !important;
    margin-right: 4px !important;
}

        /* ==================== STRICT RIGHT-PANE OVERRIDES (final) ==================== */
        #rightPane { display: flex !important; flex-direction: column !important; flex: 1 !important; height: 100vh !important; overflow: hidden !important; background-color: #f8fafc !important; }
        #resultCanvas { flex: 1 !important; display: flex !important; flex-direction: column !important; height: 100% !important; padding: 1rem !important; overflow-y: auto !important; }
        .policy-table-wrapper { flex: 1 1 auto !important; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0 !important; border-radius: 0 !important; }
        .policy-table-wrapper thead th { position: sticky !important; top: 0 !important; z-index: 40 !important; background: linear-gradient(135deg,#0d9488,#0369a1) !important; color: white !important; white-space: nowrap !important; }
        #policyTableBody tr:hover td { background-color: rgba(13,148,136,0.13) !important; transition: background-color 0.15s; }
        #pdfTableTarget th { padding: 9px 6px; font-size: 13px; white-space: nowrap !important; }
        #pdfTableTarget td { padding: 9px 6px; font-size: 13px; white-space: nowrap !important; }
        .menu-x { background-color: #ef4444 !important; color: white !important; }

        /* Plan list cards — single line always, ellipsis for overflow, small is OK */
        #planListContainer h4,
        #planListContainer p {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }
        /* Global plan list icon/text scaling */
        #planListContainer .text-\[32px\] { font-size: 26px !important; }
        #planListContainer .text-\[30px\] { font-size: 24px !important; }

        /* ── Outer foldable screen (≤379px) เช่น Honor Magic V3 outer screen ── */
        @media (max-width: 379px) {
            .app-container { max-width: 100vw !important; width: 100vw !important; }
            #pdfTableTarget { overflow-x: auto !important; display: block !important; }
            #pdfTableTarget table { font-size: 8px !important; }
            #pdfTableTarget th, #pdfTableTarget td { padding: 4px 2px !important; white-space: nowrap !important; }
            .policy-table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
            #tableHeaderTitle span { font-size: 10px !important; padding-left: 4px !important; padding-right: 4px !important; white-space: normal !important; }
        }

        /* Keyboard overflow fix — mobile */
        @media (max-width: 699px) {
            .scrollable-view { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
            .policy-table-wrapper { padding-bottom: 100px !important; }
            .content-area { padding-bottom: 0; padding-top: 0 !important; }
            .pt-safe { padding-top: env(safe-area-inset-top, 0px) !important; }
            #mainHeaderBtn { padding-top: 8px !important; padding-bottom: 8px !important; }


            /* ── หัวตารางมือถือ: badges + controls แยกแถว ── */
            #tableHeaderRow {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 4px !important;
                padding: 6px 8px !important;
            }
            #tableHeaderTitle { flex: unset !important; width: 100% !important; }
            #tableHeaderTitle > div { gap: 4px !important; }
            #tableHeaderTitle span { white-space: nowrap !important; min-width: 0 !important; }
            #tableHeaderRow > div:last-child { justify-content: space-between !important; }
            #breakevenToggleText { font-size: 10px !important; }
        }

        /* ==================== FOLDABLE 1:2 OVERRIDE (ต้องอยู่หลัง #rightPane global) ====================
           ID selector ข้างบนมี specificity สูงกว่า .right-pane ใน media query
           จึงต้องใช้ #rightPane ใน media query ที่อยู่หลังกว่าเพื่อ override ได้ */
        @media (min-width: 700px) and (max-width: 1000px) and (min-height: 500px) and (max-height: 950px) {
            .app-container {
                flex: 1 1 0 !important;
                min-width: 0 !important;
                max-width: none !important;
                width: auto !important;
            }
            #rightPane { flex: 2 1 0 !important; }
        }
        @media (horizontal-viewport-segments: 2) and (min-height: 500px) {
            .app-container {
                flex: 1 1 0 !important;
                min-width: 0 !important;
                max-width: none !important;
                width: auto !important;
            }
            #rightPane { flex: 2 1 0 !important; }
        }

        /* ==================== FOLDABLE LEFT PANE — COMPACT SCALING ====================
           ย่อ content ใน left pane ให้พอดีกับความกว้าง ~1/3 ของหน้าจอ Fold */
        @media (min-width: 700px) and (max-width: 1000px) and (min-height: 500px) and (max-height: 950px) {
            /* padding ของ content area */
            .app-container .content-area { padding-left: 8px !important; padding-right: 8px !important; }

            /* card padding */
            .app-container .premium-card { padding: 10px !important; border-radius: 14px !important; }

            /* custom input */
            .app-container .input-box-rounded { font-size: 16px !important; height: 40px !important; }

            /* Tailwind arbitrary heights */
            .app-container .h-\[54px\] { height: 42px !important; }
            .app-container .h-\[50px\] { height: 38px !important; }
            .app-container .h-\[42px\] { height: 32px !important; }

            /* Tailwind arbitrary font sizes */
            .app-container .text-\[22px\] { font-size: 16px !important; }
            .app-container .text-\[20px\] { font-size: 15px !important; }
            .app-container .text-\[16px\] { font-size: 13px !important; }
            .app-container .text-\[15px\] { font-size: 12px !important; }
            .app-container .text-\[14px\] { font-size: 11px !important; }
            .app-container .text-\[13px\] { font-size: 11px !important; }
            .app-container .text-\[12px\] { font-size: 10px !important; }
            .app-container .text-\[11px\] { font-size: 9px !important; }
            .app-container .text-\[10px\] { font-size: 8px !important; }
            .app-container .text-\[9px\]  { font-size: 8px !important; }

            /* header button padding */
            .app-container .py-4 { padding-top: 10px !important; padding-bottom: 10px !important; }

            /* gaps & margins */
            .app-container .gap-3 { gap: 6px !important; }
            .app-container .mb-3  { margin-bottom: 6px !important; }
            .app-container .mb-2\.5 { margin-bottom: 5px !important; }
            .app-container .mb-1\.5 { margin-bottom: 3px !important; }

            /* Tailwind border-radius */
            .app-container .rounded-\[24px\] { border-radius: 16px !important; }
            .app-container .rounded-\[20px\] { border-radius: 12px !important; }
            .app-container .rounded-\[14px\] { border-radius: 10px !important; }

            /* nav bottom bar */
            .app-container .glass-nav { padding-top: 6px !important; padding-bottom: 6px !important; }
            .app-container .pb-safe { padding-bottom: 10px !important; }

            /* ── Bottom nav gradient container ── */
            .app-container .pt-12 { padding-top: 20px !important; }

            /* ── Bottom nav mic button ── */
            .app-container #bottomNavContainer .w-\[48px\] { width: 36px !important; }
            .app-container #bottomNavContainer .h-\[48px\] { height: 36px !important; }
            .app-container #bottomNavContainer .text-\[18px\] { font-size: 14px !important; }
            .app-container #bottomNavContainer .\-mt-5 { margin-top: -10px !important; }
            .app-container #bottomNavContainer .rounded-full { }

            /* ── Plan selection modal — card compact ── */
            #planListContainer .w-16 { width: 40px !important; height: 40px !important; }
            #planListContainer .h-16 { height: 40px !important; }
            #planListContainer .text-\[32px\] { font-size: 18px !important; }
            #planListContainer .text-\[30px\] { font-size: 16px !important; }
            #planListContainer .text-\[17px\] { font-size: 13px !important; }
            #planListContainer .text-\[14px\] { font-size: 10px !important; }
            #planListContainer .mr-4 { margin-right: 6px !important; }
            #planListContainer .p-4 { padding: 8px !important; }
            #planListContainer .w-9 { width: 22px !important; height: 22px !important; }
            #planListContainer .h-9 { height: 22px !important; }
            #planListContainer .rounded-\[24px\] { border-radius: 14px !important; }
            #planListContainer .rounded-\[20px\] { border-radius: 12px !important; }
            #planListContainer .px-5 { padding-left: 10px !important; padding-right: 10px !important; }

            /* ── Plan modal bottom bar ── */
            #modalBottomBar .w-\[52px\] { width: 38px !important; }
            #modalBottomBar .h-\[52px\] { height: 38px !important; }
            #modalBottomBar .py-3\.5 { padding-top: 8px !important; padding-bottom: 8px !important; }
            #modalBottomBar .text-\[19px\] { font-size: 14px !important; }
            #modalBottomBar .rounded-\[28px\] { border-radius: 18px !important; }
            #modalBottomBar .rounded-\[22px\] { border-radius: 14px !important; }
        }

        /* ==================== iPad Mini / แท็บเล็ต 7.92" PORTRAIT ====================
           portrait: ~768×1024px CSS — ต้องอยู่หลัง foldable rule
           left pane ได้ 300px, right pane ได้ที่เหลือ (~468px) */
        @media (min-width: 700px) and (max-width: 850px) and (min-height: 950px) {
            .app-container {
                flex: 0 0 300px !important;
                min-width: 300px !important;
                max-width: 300px !important;
                width: 300px !important;
            }
            /* Compact scaling สำหรับ left pane 300px */
            .app-container .content-area { padding-left: 10px !important; padding-right: 10px !important; }
            .app-container .premium-card { padding: 10px !important; border-radius: 14px !important; }
            .app-container .input-box-rounded { font-size: 18px !important; height: 44px !important; }
            .app-container .h-\[54px\] { height: 46px !important; }
            .app-container .h-\[50px\] { height: 40px !important; }
            .app-container .h-\[42px\] { height: 34px !important; }
            .app-container .text-\[22px\] { font-size: 18px !important; }
            .app-container .text-\[20px\] { font-size: 16px !important; }
            .app-container .text-\[16px\] { font-size: 14px !important; }
            .app-container .text-\[15px\] { font-size: 13px !important; }
            .app-container .text-\[14px\] { font-size: 12px !important; }
            .app-container .text-\[13px\] { font-size: 12px !important; }
            .app-container .text-\[11px\] { font-size: 10px !important; }
            .app-container .gap-3 { gap: 7px !important; }
            .app-container .mb-3 { margin-bottom: 7px !important; }
            .app-container .mb-2\.5 { margin-bottom: 5px !important; }
            .app-container .glass-nav { padding-top: 7px !important; padding-bottom: 7px !important; }
            .app-container .pb-safe { padding-bottom: 12px !important; }
            .app-container .rounded-\[24px\] { border-radius: 16px !important; }
            .app-container .rounded-\[20px\] { border-radius: 12px !important; }

            /* badge หัวตาราง — iPad mini right pane */
            #tableHeaderTitle > div { gap: 4px !important; }
            #tableHeaderTitle span { white-space: nowrap !important; min-width: 0 !important; }

            /* ── Plan selection modal — card compact for iPad mini 300px pane ── */
            #planListContainer .w-16 { width: 42px !important; height: 42px !important; }
            #planListContainer .h-16 { height: 42px !important; }
            #planListContainer .text-\[32px\] { font-size: 19px !important; }
            #planListContainer .text-\[30px\] { font-size: 17px !important; }
            #planListContainer .text-\[17px\] { font-size: 13px !important; }
            #planListContainer .text-\[14px\] { font-size: 11px !important; }
            #planListContainer .mr-4 { margin-right: 7px !important; }
            #planListContainer .p-4 { padding: 9px !important; }
            #planListContainer .w-9 { width: 26px !important; height: 26px !important; }
            #planListContainer .h-9 { height: 26px !important; }
            #planListContainer .px-5 { padding-left: 11px !important; padding-right: 11px !important; }
            #modalBottomBar .w-\[52px\] { width: 38px !important; }
            #modalBottomBar .h-\[52px\] { height: 38px !important; }
            #modalBottomBar .py-3\.5 { padding-top: 8px !important; padding-bottom: 8px !important; }
            #modalBottomBar .text-\[19px\] { font-size: 14px !important; }
        }

        /* ==================== จอใหญ่กว่า 8" (851–1023px) — อัตราส่วน 2:3 ====================
           left pane 2 ส่วน : right pane 3 ส่วน (40%:60%) */
        @media (min-width: 851px) and (max-width: 1023px) and (min-height: 600px) {
            .app-container {
                flex: 2 1 0 !important;
                min-width: 0 !important;
                max-width: none !important;
                width: auto !important;
            }
            #rightPane { flex: 3 1 0 !important; }

            /* Compact scaling สำหรับ left pane ~280-341px (7.8" screen) */
            .app-container .content-area { padding-left: 10px !important; padding-right: 10px !important; }
            .app-container .premium-card { padding: 10px !important; border-radius: 14px !important; }
            .app-container .input-box-rounded { font-size: 18px !important; height: 44px !important; }

            .app-container .h-\[54px\] { height: 46px !important; }
            .app-container .h-\[50px\] { height: 40px !important; }
            .app-container .h-\[42px\] { height: 34px !important; }

            .app-container .text-\[22px\] { font-size: 18px !important; }
            .app-container .text-\[20px\] { font-size: 16px !important; }
            .app-container .text-\[16px\] { font-size: 14px !important; }
            .app-container .text-\[15px\] { font-size: 13px !important; }
            .app-container .text-\[14px\] { font-size: 12px !important; }
            .app-container .text-\[13px\] { font-size: 12px !important; }
            .app-container .text-\[12px\] { font-size: 11px !important; }
            .app-container .text-\[11px\] { font-size: 10px !important; }
            .app-container .text-\[10px\] { font-size: 9px !important; }
            .app-container .text-\[9px\]  { font-size: 8px !important; }

            .app-container .gap-3 { gap: 7px !important; }
            .app-container .mb-3 { margin-bottom: 7px !important; }
            .app-container .mb-2\.5 { margin-bottom: 5px !important; }
            .app-container .mb-1\.5 { margin-bottom: 3px !important; }

            .app-container .rounded-\[24px\] { border-radius: 16px !important; }
            .app-container .rounded-\[20px\] { border-radius: 12px !important; }
            .app-container .rounded-\[14px\] { border-radius: 10px !important; }

            .app-container .glass-nav { padding-top: 7px !important; padding-bottom: 7px !important; }
            .app-container .pb-safe { padding-bottom: 12px !important; }
            .app-container .pt-12 { padding-top: 20px !important; }

            .app-container #bottomNavContainer .w-\[48px\] { width: 36px !important; }
            .app-container #bottomNavContainer .h-\[48px\] { height: 36px !important; }
            .app-container #bottomNavContainer .text-\[18px\] { font-size: 14px !important; }
            .app-container #bottomNavContainer .\-mt-5 { margin-top: -10px !important; }

            #planListContainer .w-16 { width: 44px !important; height: 44px !important; }
            #planListContainer .h-16 { height: 44px !important; }
            #planListContainer .text-\[32px\] { font-size: 20px !important; }
            #planListContainer .text-\[30px\] { font-size: 18px !important; }
            #planListContainer .text-\[17px\] { font-size: 14px !important; }
            #planListContainer .text-\[14px\] { font-size: 12px !important; }
            #planListContainer .mr-4 { margin-right: 8px !important; }
            #planListContainer .p-4 { padding: 10px !important; }
            #planListContainer .w-9 { width: 28px !important; height: 28px !important; }
            #planListContainer .h-9 { height: 28px !important; }
            #planListContainer .rounded-\[24px\] { border-radius: 14px !important; }
            #planListContainer .rounded-\[20px\] { border-radius: 12px !important; }
            #planListContainer .px-5 { padding-left: 12px !important; padding-right: 12px !important; }

            #modalBottomBar .w-\[52px\] { width: 38px !important; }
            #modalBottomBar .h-\[52px\] { height: 38px !important; }
            #modalBottomBar .py-3\.5 { padding-top: 8px !important; padding-bottom: 8px !important; }
            #modalBottomBar .text-\[19px\] { font-size: 14px !important; }
            #modalBottomBar .rounded-\[28px\] { border-radius: 18px !important; }
            #modalBottomBar .rounded-\[22px\] { border-radius: 14px !important; }
        }

        /* ==================== Notebook / Laptop (≥ 1024px) — left pane 320px fixed ====================
           left pane เล็ก-คงที่ : right pane ขยายเต็มที่เหลือ */
        @media (min-width: 1024px) and (min-height: 600px) {
            .app-container {
                flex: 0 0 320px !important;
                min-width: 320px !important;
                max-width: 320px !important;
                width: 320px !important;
            }
            #rightPane { flex: 1 1 0 !important; }
            /* hidden state สำหรับ toggle — ต้องระบุซ้ำเพื่อ override flex ข้างบน */
            .command-center-layout.left-pane-hidden .app-container {
                flex: 0 0 0 !important;
                width: 0 !important;
                max-width: 0 !important;
                min-width: 0 !important;
                overflow: hidden !important;
                opacity: 0 !important;
                pointer-events: none !important;
            }
            /* ── Plan selection modal — card compact for Notebook 320px pane ── */
            #planListContainer .w-16 { width: 42px !important; height: 42px !important; }
            #planListContainer .h-16 { height: 42px !important; }
            #planListContainer .text-\[32px\] { font-size: 19px !important; }
            #planListContainer .text-\[30px\] { font-size: 17px !important; }
            #planListContainer .text-\[17px\] { font-size: 13px !important; }
            #planListContainer .text-\[14px\] { font-size: 11px !important; }
            #planListContainer .mr-4 { margin-right: 7px !important; }
            #planListContainer .p-4 { padding: 9px !important; }
            #planListContainer .w-9 { width: 26px !important; height: 26px !important; }
            #planListContainer .h-9 { height: 26px !important; }
            #planListContainer .px-5 { padding-left: 11px !important; padding-right: 11px !important; }
            #modalBottomBar .w-\[52px\] { width: 38px !important; }
            #modalBottomBar .h-\[52px\] { height: 38px !important; }
            #modalBottomBar .py-3\.5 { padding-top: 8px !important; padding-bottom: 8px !important; }
            #modalBottomBar .text-\[19px\] { font-size: 14px !important; }
        }

        /* ==================== จอใหญ่ 14"+ (≥ 1280px) — หัวตารางใหญ่ขึ้น ==================== */
        @media (min-width: 1280px) and (min-height: 600px) {
            /* 1 แถว: badges + toggle ขนาน เพราะ right pane กว้างมาก */
            #tableHeaderRow {
                flex-direction: row !important;
                align-items: center !important;
                gap: 16px !important;
                padding: 10px 16px !important;
            }
            #tableHeaderTitle { flex: 1 !important; width: 100% !important; }
            #tableHeaderTitle > div { gap: 8px !important; }
            #tableHeaderTitle span { white-space: nowrap !important; min-width: 0 !important; }
            #breakevenToggleText {
                font-size: 15px !important;
                display: inline !important;
            }
            /* ตารางข้อมูล — ตัวอักษรใหญ่ขึ้นตามหน้าจอ */
            #pdfTableTarget th, #pdfTableTarget td {
                font-size: 15px;
                padding: 11px 10px;
                white-space: nowrap !important;
            }
        }

        /* ==================== SWIPE-TO-HIDE LEFT PANE ==================== */
        @media (min-width: 600px) and (min-height: 500px) {
            .app-container {
                transition: max-width 0.35s cubic-bezier(0.4,0,0.2,1),
                            min-width 0.35s cubic-bezier(0.4,0,0.2,1),
                            opacity 0.25s ease;
            }
            .command-center-layout.left-pane-hidden .app-container {
                flex: 0 0 0 !important;
                max-width: 0 !important;
                min-width: 0 !important;
                overflow: hidden !important;
                opacity: 0 !important;
                pointer-events: none !important;
            }
        }