:root{
  --blue:#0878a8;--cyan:#00b9e8;--ink:#13243a;--mut:#64748b;
  --panel:rgba(255,255,255,.965);--line:#d9e6ee;--shadow:0 12px 36px rgba(15,45,65,.18);
}
*{box-sizing:border-box}
html,body,#map{width:100%;height:100%;margin:0}
body{font-family:"Sarabun","Noto Sans Thai","Segoe UI",Tahoma,sans-serif;color:var(--ink);overflow:hidden;background:#dceaf1}
#map{position:fixed;inset:0}
.topbar{position:fixed;z-index:20;left:12px;right:12px;top:12px;min-height:72px;border:1px solid rgba(180,205,219,.9);border-radius:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 18px}
.brand-title{font-size:20px;font-weight:800;color:#05739f;line-height:1.15}
.brand-sub{font-size:12px;color:var(--mut);margin-top:4px}
.top-actions{display:flex;align-items:center;gap:8px}
.stat-pill{border:1px solid #b9dbe9;background:#f5fcff;border-radius:12px;padding:5px 10px;min-width:70px;text-align:center}
.stat-pill b{display:block;font-size:17px;color:#047ca9}.stat-pill span{display:block;font-size:9.5px;color:#637b89}
button,select,input{font:inherit}
.icon-btn,.menu-btn,.close-btn{border:1px solid #a9d4e5;background:#fff;color:#066e97;border-radius:12px;cursor:pointer}
.icon-btn{width:42px;height:42px;font-size:22px}.menu-btn{height:42px;padding:0 14px;font-weight:700}
.panel{position:fixed;z-index:22;top:96px;left:12px;bottom:18px;width:min(405px,calc(100vw - 24px));background:var(--panel);border:1px solid #cfe2eb;border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .22s ease,opacity .22s ease}
.panel:not(.open){transform:translateX(calc(-100% - 28px));opacity:0;pointer-events:none}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;padding:13px 14px 10px;border-bottom:1px solid var(--line)}
.panel-title{font-size:18px;font-weight:800}.panel-note{font-size:11px;color:var(--mut);margin-top:2px}.close-btn{width:34px;height:34px;font-size:24px;line-height:1}
.control-section{padding:10px 12px;border-bottom:1px solid var(--line)}
.control-title{font-size:11px;font-weight:800;color:#526b79;margin-bottom:6px}
.control-section select,.control-section input[type=search]{width:100%;border:1px solid #bdd4df;border-radius:9px;background:#fff;padding:8px 9px;color:#213547;outline:none}
.control-section select:focus,.control-section input:focus{border-color:#19a9d7;box-shadow:0 0 0 2px rgba(0,185,232,.12)}
.slider-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-top:8px;font-size:11px;color:#516a77}
.slider-row input{width:100%}.slider-row b{min-width:36px;text-align:right;color:#087aa6}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.check{display:flex;align-items:center;gap:6px;font-size:11px;color:#425b68}.check input{width:16px;height:16px;accent-color:#00a9d7}
.mode-row{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:10.5px;color:#607885}.mode-row select{width:auto;padding:5px 7px}.mini{font-size:9.5px;color:#7b8f99}
.filters{display:grid;gap:7px}.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}.seg-btn{border:1px solid #c5dbe4;background:#f8fbfd;border-radius:8px;padding:6px;cursor:pointer;color:#506776;font-size:11px}.seg-btn.active{background:#e2f7ff;border-color:#3cbde2;color:#05739f;font-weight:700}
.bulk-actions{display:grid;grid-template-columns:1.5fr 1fr;gap:6px}.action{border:1px solid #bad6e1;background:#fff;color:#17617d;border-radius:8px;padding:7px;cursor:pointer;font-size:10.5px}.action.primary{background:#057da9;border-color:#057da9;color:#fff;font-weight:700}
.availability{padding:8px 13px;font-size:10px;color:#5d7482;border-bottom:1px solid #e6eff3}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.dot.checking{background:#f3b629}.dot.ok{background:#10b981}
.project-list{overflow:auto;padding:7px;min-height:0;flex:1}
.project-card{border:1px solid transparent;border-radius:11px;padding:8px 9px;display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;transition:.15s ease;margin-bottom:3px}
.project-card:hover{background:#eefaff;border-color:#c6ebf7}.project-card.loaded{background:#dcf6ff;border-color:#4bc8e9}
.area-toggle{width:18px;height:18px;accent-color:#00a9d7;cursor:pointer}
.pc-main{min-width:0;cursor:pointer}.pc-title{font-weight:700;font-size:12.5px}.pc-area{font-size:10px;color:#6b7e89;margin-top:1px}.pc-path{font-size:8.5px;color:#93a4ac;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.badge{white-space:nowrap;font-size:9px;border-radius:999px;padding:3px 6px;background:#edf2f5;color:#72838d}.badge.ready{background:#d9f8e9;color:#087a49}.badge.loaded{background:#d9f7ff;color:#047eaa}
.panel-foot{border-top:1px solid var(--line);padding:7px 11px;display:flex;gap:12px;flex-wrap:wrap;font-size:9.5px;color:#667c88}.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}.legend-dot.ready{background:#10b981}.legend-dot.loaded{background:#00a9d7}.legend-dot.planned{background:#9caeb8}

.info-card{position:fixed;z-index:21;right:18px;top:100px;width:min(390px,calc(100vw - 36px));background:rgba(255,255,255,.97);border:1px solid #cae0ea;border-radius:16px;box-shadow:var(--shadow);padding:15px;transition:.18s ease}.info-card.hidden{opacity:0;transform:translateY(-8px);pointer-events:none}
.selected-close{position:absolute;right:8px;top:8px;border:0;background:transparent;font-size:23px;color:#66808c;cursor:pointer}
.selected-region{font-size:10px;color:#087aa6;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.selected-title{font-size:18px;font-weight:800;margin-top:3px;padding-right:20px}.info-body{font-size:11px;color:#5b707c;margin-top:7px;line-height:1.55}.info-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:4px 0;border-bottom:1px solid #edf3f6}.info-row b{color:#163b50;text-align:right}.selected-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.launch{text-decoration:none;border:1px solid #b9d5e1;border-radius:9px;padding:7px 9px;font-size:10.5px;color:#17617d;background:#fff}.launch.primary{background:#057da9;border-color:#057da9;color:#fff;font-weight:700}

.legend-card{position:fixed;z-index:16;left:430px;bottom:18px;max-width:min(620px,calc(100vw - 460px));background:rgba(255,255,255,.93);border:1px solid #cce1e9;border-radius:13px;box-shadow:0 6px 20px #0001;padding:9px 11px;backdrop-filter:blur(8px)}
.legend-title{font-size:11px;font-weight:800;color:#325566}.legend-items{display:flex;gap:7px 12px;flex-wrap:wrap;margin-top:5px;font-size:9.5px;color:#536b77}.leg-item{display:flex;align-items:center;gap:4px}.leg-sw{width:18px;height:7px;border-radius:2px}.legend-note{font-size:8.5px;color:#84969f;margin-top:5px}
.toast{position:fixed;z-index:50;left:50%;bottom:18px;transform:translateX(-50%);background:#153846;color:#fff;border-radius:999px;padding:7px 12px;font-size:10px;box-shadow:0 8px 24px #0003}.toast.hidden{display:none}
.maplibregl-ctrl-bottom-right{bottom:8px}

@media(max-width:980px){
  .topbar{top:8px;left:8px;right:8px;min-height:60px;padding:8px 8px 8px 12px;border-radius:14px}
  .brand-title{font-size:16px}.brand-sub{font-size:10px;max-width:280px}
  .panel{top:76px;left:8px;bottom:8px;width:min(390px,calc(100vw - 16px))}
  .info-card{right:8px;top:78px}
  .legend-card{left:auto;right:8px;bottom:52px;max-width:min(520px,calc(100vw - 24px))}
}
@media(max-width:650px){
  .brand-sub{display:none}.brand-title{font-size:15px}.stat-pill span{display:none}.stat-pill{min-width:auto;padding:5px 8px}.icon-btn{display:none}.menu-btn{padding:0 9px}
  .panel{top:auto;left:6px;right:6px;bottom:6px;width:auto;height:min(78dvh,690px);border-radius:18px}
  .panel:not(.open){transform:translateY(calc(100% + 12px));opacity:0}
  .grid-2{grid-template-columns:1fr}
  .project-list{padding-bottom:16px}
  .info-card{left:8px;right:8px;top:auto;bottom:8px;width:auto;padding:12px;border-radius:15px}
  .legend-card{left:8px;right:8px;bottom:8px;max-width:none;padding:7px 9px}
  body.panel-open .legend-card{display:none}
}

.flow-style-grid{display:grid;gap:6px;margin-top:7px}
.mini-slider{display:grid;grid-template-columns:minmax(0,1fr) 1.2fr 52px;gap:7px;align-items:center;font-size:9.5px;color:#5f7682}
.mini-slider input{width:100%}.mini-slider b{text-align:right;color:#087aa6;font-size:9.5px}
.point-coord{font-size:10px;color:#718793;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.area-detail{margin-top:10px;border:1px solid #d9e8ef;border-radius:11px;overflow:hidden;background:#fbfdfe}
.area-detail-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;background:#edf9fd;border-bottom:1px solid #d9e8ef}
.area-detail-title{font-size:11.5px;font-weight:800;color:#12516e}
.area-detail-status{font-size:8.5px;color:#087eaa;background:#dff7ff;padding:2px 6px;border-radius:999px;white-space:nowrap}
.area-metrics{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;padding:3px 9px 7px}
.area-metrics>div{padding:4px 0;border-bottom:1px solid #eef3f6;font-size:10.5px}
.area-metrics .v{text-align:right;font-weight:750;color:#173d51;padding-left:10px}
.area-metrics>div:nth-last-child(-n+2){border-bottom:0}
.route-popup{font-size:11px;line-height:1.5}
.vector-status{font-size:8.5px;color:#6f848f;margin-top:2px}
@media(max-width:650px){
  .mini-slider{grid-template-columns:1fr;gap:3px}.mini-slider b{text-align:left}
  .area-metrics{font-size:12px}.area-metrics>div{font-size:11.5px}
}

/* v0.4.1.2 responsive panel state machine */
.panel-head{cursor:default}
.panel-head-text{min-width:0}
.panel-head-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.panel-tool-btn{
  width:34px;height:34px;border:1px solid #a9d4e5;background:#fff;color:#066e97;
  border-radius:10px;cursor:pointer;font-size:20px;line-height:1;display:grid;place-items:center;
  touch-action:manipulation;position:relative;z-index:2
}
.panel-tool-btn:hover{background:#eefaff}
.panel.collapsed{
  bottom:auto;height:auto;max-height:none;overflow:hidden;
}
.panel.collapsed .control-section,
.panel.collapsed .availability,
.panel.collapsed .project-list,
.panel.collapsed .panel-foot{
  display:none !important;
}
.panel.collapsed .panel-head{border-bottom:0}
.panel.collapsed .panel-note{display:none}
.panel.collapsed #btnCollapse{font-size:0}
.panel.collapsed #btnCollapse::after{content:"□";font-size:17px}
.panel-float-btn{
  position:fixed;z-index:24;left:14px;bottom:18px;min-height:44px;
  border:1px solid #98cfe2;border-radius:999px;background:rgba(255,255,255,.96);
  color:#066f98;box-shadow:0 8px 26px rgba(15,45,65,.22);padding:0 14px;
  font-weight:800;cursor:pointer;display:none;align-items:center;gap:7px;
  touch-action:manipulation;backdrop-filter:blur(10px)
}
body.panel-closed .panel-float-btn{display:flex}
body.panel-collapsed .panel-float-btn{display:none}
body.panel-open .panel-float-btn{display:none}

@media(max-width:650px){
  .panel{
    height:min(72dvh,650px);
    max-height:calc(100dvh - 86px);
    overflow:hidden;
  }
  .panel.collapsed{
    top:auto;bottom:8px;left:8px;right:8px;width:auto;height:58px;
    transform:none !important;opacity:1 !important;pointer-events:auto !important;
    border-radius:16px;
  }
  .panel.collapsed .panel-head{
    min-height:58px;padding:10px 12px;align-items:center;
  }
  .panel.collapsed .panel-title{font-size:14px}
  .panel-float-btn{
    left:10px;bottom:10px;min-height:48px;padding:0 14px;font-size:13px;
  }
  body.panel-open .legend-card,
  body.panel-collapsed .legend-card{display:none}
}
@media(min-width:651px){
  .panel.collapsed{
    width:300px;top:96px;left:12px;
  }
}

.basemap-status{
  margin-top:6px;
  padding:5px 7px;
  border:1px solid #d5e9f2;
  border-radius:7px;
  background:#eefaff;
  color:#087aa6;
  font-size:9.5px;
  line-height:1.35;
}


/* v0.4.1.5 — reliable panel scrolling and point-card close */
.panel-scroll-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.panel.collapsed .panel-scroll-body{
  display:none !important;
}
.selected-close{
  z-index:5;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.selected-close:active{background:#eef7fb}
.info-card{
  overscroll-behavior:contain;
}

@media(max-width:650px){
  .panel{
    /* Keep the header fixed; the content below it is independently scrollable. */
    display:flex;
    flex-direction:column;
    overflow:hidden !important;
  }
  .panel-scroll-body{
    display:block;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
    scrollbar-gutter:stable;
  }
  .panel-scroll-body .project-list{
    overflow:visible !important;
    max-height:none !important;
    min-height:0;
    flex:none;
    padding-bottom:24px;
  }
  .panel-scroll-body .control-section,
  .panel-scroll-body .availability,
  .panel-scroll-body .panel-foot{
    flex:none;
  }
  .project-card{
    touch-action:pan-y;
  }
  .info-card{
    max-height:min(72dvh,680px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
    padding-top:14px;
  }
}

.project-card[data-type="scenario"] .pc-title::after{
  content:" scenario";
  margin-left:5px;
  font-size:8px;
  font-weight:700;
  color:#8a5b00;
  background:#fff4d7;
  border-radius:999px;
  padding:2px 5px;
}

.probe-status{font-size:8.5px;margin-top:2px;line-height:1.25;color:#758a94}
.probe-status.ok{color:#078a58}.probe-status.warn{color:#9a6500}.probe-status.bad{color:#a94338}
.diag-box{margin-top:8px;padding:8px 9px;border:1px solid #dce9ef;border-radius:9px;background:#f8fbfd;font-size:10px;line-height:1.5;color:#526a76}

.probe-status{font-size:8.5px;margin-top:2px;line-height:1.25;color:#758a94}
.probe-status.ok{color:#078a58}.probe-status.warn{color:#9a6500}

.missing-summary{display:none;padding:7px 10px 9px;border-top:1px solid #e7eef2;background:#fff9eb;color:#765700;font-size:9.5px;line-height:1.45}
.missing-summary.show{display:block}
.missing-summary b{color:#8b5d00}
.probe-status{font-size:8.7px;margin-top:3px;line-height:1.3;color:#728690}
.probe-status.ok{color:#087f54}.probe-status.warn{color:#976200}.probe-status.bad{color:#b33c32}


/* v0.4.2.2 — one continuous scroller for the entire left panel */
.panel{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
.panel-head{
  flex:0 0 auto !important;
  position:relative;
  z-index:5;
  background:rgba(255,255,255,.98);
}
.panel-scroll-body{
  display:block !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  scrollbar-gutter:stable;
}
.panel-scroll-body .project-list,
.project-list{
  flex:none !important;
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  overflow:visible !important;
  padding-bottom:28px;
}
.panel-scroll-body .control-section,
.panel-scroll-body .availability,
.panel-scroll-body .missing-summary,
.panel-scroll-body .panel-foot{
  flex:none !important;
}
.panel.collapsed .panel-scroll-body{
  display:none !important;
}
@media (min-width:651px){
  .panel{
    max-height:calc(100dvh - 190px) !important;
  }
}
@media (max-width:650px){
  .panel{
    max-height:72dvh !important;
    overflow:hidden !important;
  }
}
@media (pointer:fine){
  .panel-scroll-body{scrollbar-width:thin}
  .panel-scroll-body::-webkit-scrollbar{width:9px}
  .panel-scroll-body::-webkit-scrollbar-track{background:#eef4f7;border-radius:10px}
  .panel-scroll-body::-webkit-scrollbar-thumb{
    background:#91a9b5;border-radius:10px;border:2px solid #eef4f7
  }
  .panel-scroll-body::-webkit-scrollbar-thumb:hover{background:#718d9a}
}


/* =========================================================
   v0.4.2.3 — Right Point Intelligence panel scroll
   Keeps the panel header visible and scrolls all scenario
   comparison content in one continuous vertical area.
   ========================================================= */

.info-card{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  max-height:calc(100dvh - 210px) !important;
}

.info-card > .selected-head,
.info-card > .info-head,
.info-card > .selected-region,
.info-card > h2,
.info-card > .point-coord{
  flex:0 0 auto;
}

.info-scroll-body{
  display:block;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding-right:2px;
  scrollbar-gutter:stable;
}

/* Scenario/project result blocks stay fully expanded inside the scroller. */
.info-scroll-body .area-detail{
  flex:none;
}

/* Desktop: generous but bounded right panel. */
@media (min-width:651px){
  .info-card{
    max-height:calc(100dvh - 205px) !important;
  }
}

/* Mobile/tablet: right card can occupy most of the viewport, but remains scrollable. */
@media (max-width:650px){
  .info-card{
    max-height:78dvh !important;
    overflow:hidden !important;
  }
  .info-scroll-body{
    overflow-y:auto !important;
  }
}

/* Visible scrollbar on pointer devices. */
@media (pointer:fine){
  .info-scroll-body{
    scrollbar-width:thin;
  }
  .info-scroll-body::-webkit-scrollbar{width:9px}
  .info-scroll-body::-webkit-scrollbar-track{
    background:#eef4f7;border-radius:10px
  }
  .info-scroll-body::-webkit-scrollbar-thumb{
    background:#91a9b5;border-radius:10px;border:2px solid #eef4f7
  }
  .info-scroll-body::-webkit-scrollbar-thumb:hover{
    background:#718d9a
  }
}