/* ================================================================
   01. GLOBAL / CSS VARIABLES
   ================================================================ */

:root{
  --navy:#0a1628; --navy2:#0f2138; --navy3:#0c1d33;
  --line:#21406a; --line2:#26497a;
  --ink:#eaf3ff; --dim:#9db4d0; --faint:#64809f;
  --amber:#ffb224; --green:#2ee06e; --red:#ff5d6c; --sky:#3ec5ff;
  --l0:#2ee06e; --l1:#ffd23f; --l2:#ff9f43; --l3:#ff5d6c;
  --sh:0 8px 24px rgba(2,8,20,.5);
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior:none}
body{
  font-family:'Sarabun',sans-serif;color:var(--ink);background:var(--navy);
  overflow:hidden;font-size:15px;line-height:1.4;touch-action:manipulation;
  position:fixed;inset:0;width:100%;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit;font-size:16px}
.leaflet-container{font-family:'Sarabun'}

/* ================================================================
   02. MAP / LEAFLET
   ================================================================ */

.map-stage{position:absolute;inset:0;overflow:hidden;z-index:1;background:var(--navy)}
.map-shift{position:absolute;left:0;top:0;width:100%;height:100%}
#map {
  position:absolute; left:0; top:0; width:100%; height:100%;
  transition:transform .3s;
  will-change: transform; /* ✅ สั่งให้ใช้ GPU 100% */
  transform: translateZ(0);
}
.leaflet-control-attribution{background:rgba(8,18,32,.7)!important;color:#5b7592!important;font-size:8px!important}
.leaflet-control-zoom{display:none}

/* ================================================================
   03. FLOATING ACTION BUTTONS (FAB)
   ================================================================ */

.fab{
  position:relative;z-index:900;width:48px;height:48px;border-radius:50%;flex:0 0 auto;
  background:rgba(15,33,56,.94);backdrop-filter:blur(10px);border:1px solid var(--line2);
  display:grid;place-items:center;color:var(--sky);box-shadow:var(--sh);
  transition:transform .15s,background .2s,opacity .3s;font-size:20px;
}
.fab:active{transform:scale(.92)}
.fab.warm{color:var(--amber)}
.fab.on{background:var(--amber);color:#221300;border-color:var(--amber)}
.fab svg{width:22px;height:22px}
.fab-tr{
  position:fixed;top:12px;top:calc(12px + var(--sat));right:12px;
  display:flex;flex-direction:column;gap:10px;z-index:1060;
  transition:top .3s,bottom .3s,opacity .3s,transform .3s;
}
body.navigating .fab-tr{top:auto;bottom:calc(108px + var(--sab))}
.fab-bl{position:fixed;bottom:16px;bottom:calc(16px + var(--sab));left:12px;z-index:1060;transition:bottom .3s}
body.navigating .fab-bl{bottom:calc(108px + var(--sab))}
.hidden{display:none!important}
@media (max-height:640px){
  .fab-tr{flex-direction:row;flex-wrap:wrap;width:106px;justify-content:flex-end}
  .fab{width:44px;height:44px}

  /* ✅ จอเตี้ย: tmd-ctl ยังชิดบนเหมือนเดิม แต่ลด padding ลง */
  .tmd-ctl { padding: 6px 10px; gap: 6px; }
  .tmd-ctl button { width: 28px; height: 28px; font-size: 12px; }
  .tmd-ctl .tmd-label { font-size: 11px; }
}

/* ================================================================
   04. MAP MARKERS / NAVIGATION MARKERS
   ================================================================ */

.pin-a .core{width:16px;height:16px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.pin-a .ring{position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--green);animation:radar 1.8s ease-out infinite}
@keyframes radar{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.wxdot{display:grid;place-items:center;font-size:14px;border-radius:50%;background:var(--navy2);border:2px solid var(--l0);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.wxdot.s1{border-color:var(--l1)}.wxdot.s2{border-color:var(--l2)}.wxdot.s3{border-color:var(--l3)}
.car-mk{filter:drop-shadow(0 3px 6px rgba(0,0,0,.7))}
.accuracy-circle{border-radius:50%;background:rgba(62,197,255,.15);border:2px solid rgba(62,197,255,.5)}
.nt-pin{width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:linear-gradient(135deg,#ffd97a,var(--amber));border:2px solid #fff;
  display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.5);
  animation:ntPulse 1.6s infinite}
.nt-pin svg{transform:rotate(45deg);color:#221300}
/* ✅ แบบใช้ GPU สำหรับหมุดนำทาง */
.nt-pin {
  position: relative;
  width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:linear-gradient(135deg,#ffd97a,var(--amber));border:2px solid #fff;
  display:grid;place-items:center;
  z-index: 2;
}
.nt-pin::after {
  content: ''; position: absolute; inset: -4px; border-radius: inherit;
  background: rgba(255,178,36,.5); z-index: -1;
  animation: gpuPulse 1.6s infinite;
}

/* ✅ แบบใช้ GPU สำหรับแจ้งเตือนภัย */
@keyframes gpuPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

.wx-banner.lv3 {
  background: linear-gradient(135deg, #661420, #330a10);
  border: 1.5px solid #ff5d6c;
  color: #ffe3e5;
  position: relative;
}
.wx-banner.lv3::after {
  content: ''; position: absolute; inset: -2px; border-radius: inherit;
  border: 4px solid rgba(255,93,108,0.5); z-index: -1;
  animation: gpuPulse 1.4s infinite;
}

/* ================================================================
   05. MAIN SEARCH SHEET / ROUTE FORM
   ================================================================ */

.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:1000;
  background:linear-gradient(180deg,var(--navy2),var(--navy));
  border-radius:24px 24px 0 0;border-top:1px solid var(--line2);
  box-shadow:0 -8px 40px rgba(0,0,0,.5);
  transition:transform .4s cubic-bezier(.3,.9,.4,1);
  max-height:82dvh;display:flex;flex-direction:column;padding-bottom:var(--sab);will-change:transform;
}
.sheet-handle{height:26px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;cursor:grab}
.sheet-handle i{width:44px;height:5px;border-radius:99px;background:#2b4a72}
.sheet-body{overflow-y:auto;flex:1;padding:0 18px 18px;-webkit-overflow-scrolling:touch}

.brand{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.logo{position:relative;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#ffd97a,var(--amber) 55%,#ff8a00);box-shadow:0 0 12px rgba(255,178,36,.5)}
.brand-name{font-family:'Prompt';font-weight:800;font-size:18px}
.brand-name em{font-style:normal;color:var(--amber)}
.brand-sub{font-size:11px;color:var(--faint);margin-left:auto}
.field{position:relative;margin-bottom:10px}
.field .dot{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;z-index:2}
.dot-a{background:var(--green)}.dot-b{background:var(--red)}
.field input{width:100%;padding:15px 46px 15px 36px;border-radius:14px;color:var(--ink);background:var(--navy3);border:1.5px solid var(--line);outline:none}
.field input:focus{border-color:var(--sky)}
.field input::placeholder{color:#54718f}
.field .x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;color:var(--faint);font-size:18px}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:1200;background:var(--navy2);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--sh);overflow:hidden}
.suggest button{display:block;width:100%;text-align:left;padding:13px 14px;font-size:14px;color:var(--dim);border-bottom:1px solid #16304f}
.suggest button:last-child{border-bottom:none}
.suggest button:active{background:#16345a}
.suggest b{color:var(--ink);display:block}
.suggest small{color:var(--faint);font-size:12px}
.row2{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.btn-locate{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:14px;background:var(--navy3);border:1.5px solid var(--line);color:var(--sky);font-size:14px;font-weight:600}
.btn-locate:active{background:#123054}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;padding:9px 14px;border-radius:999px;background:var(--navy3);border:1px solid var(--line);color:var(--dim);font-size:13px;white-space:nowrap}
.chips button:active{border-color:var(--amber);color:var(--amber)}
.btn-primary{width:100%;padding:16px;border-radius:16px;font-family:'Prompt';font-weight:700;font-size:17px;color:#221300;background:linear-gradient(135deg,#ffc94d,var(--amber) 45%,#ff8a00);box-shadow:0 6px 18px rgba(255,150,0,.35);display:flex;align-items:center;justify-content:center;gap:9px}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{filter:grayscale(.5);opacity:.7}
.btn-primary .spin{width:18px;height:18px;border-radius:50%;border:3px solid rgba(0,0,0,.25);border-top-color:#221300;animation:rot .7s linear infinite;display:none}
.btn-primary.loading .spin{display:block}
@keyframes rot{to{transform:rotate(360deg)}}

/* ================================================================
   06. ROUTE PREVIEW / WEATHER SUMMARY
   ================================================================ */

.preview{display:none}
.preview.show{display:block}
.summary-card{display:flex;gap:6px;background:var(--navy3);border:1px solid var(--line);border-radius:16px;padding:14px 6px;margin-bottom:14px}
.summary-card .st{flex:1;text-align:center;border-right:1px dashed #2b4a72}
.summary-card .st:last-child{border-right:none}
.summary-card .v{font-family:'Prompt';font-weight:800;font-size:20px;color:var(--sky)}
.summary-card .v.a{color:var(--amber)}.summary-card .v.g{color:var(--green)}
.summary-card .l{font-size:11px;color:var(--faint);margin-top:2px}
.wx-head{padding:11px 13px;border-radius:14px;font-size:13px;display:flex;gap:9px;align-items:center;margin-bottom:14px;line-height:1.4}
/* ========================================= */
/* ปรับปรุงสีแถบรายงานสภาพอากาศ (.wx-head) ให้อ่านง่าย */
/* ========================================= */
/* 🌙 โหมดกลางคืน (ปรับสีตัวหนังสือให้สว่างพุ่ง คมชัดขึ้น) */
.wx-ok  { background: rgba(46, 224, 110, 0.15); border: 1px solid rgba(46, 224, 110, 0.4); color: #4ade80; }
.wx-mid { background: rgba(255, 210, 63, 0.15); border: 1px solid rgba(255, 210, 63, 0.4); color: #ffce54; }
.wx-bad { background: rgba(255, 93, 108, 0.15); border: 1px solid rgba(255, 93, 108, 0.4); color: #ff8787; }

/* ☀️ โหมดกลางวัน (บังคับตัวหนังสือสีเข้มทึบ พื้นหลังสีพาสเทล) */
body.theme-light .wx-ok  { background: #dcfce3; border-color: #4ade80; color: #14532d; }
body.theme-light .wx-mid { background: #fef9c3; border-color: #facc15; color: #713f12; }
body.theme-light .wx-bad { background: #fee2e2; border-color: #f87171; color: #7f1d1d; }
.nav-btns{display:flex;gap:10px}
.nb{flex:1;padding:15px 6px;border-radius:16px;font-family:'Prompt';font-weight:700;font-size:15px;display:flex;flex-direction:column;align-items:center;gap:2px}
.nb .ic{font-size:22px}
.nb small{font-family:'Sarabun';font-size:10.5px;font-weight:400;opacity:.85}
.nb-real{color:#07210f;background:linear-gradient(135deg,#62f595,var(--green) 50%,#1cb85a);box-shadow:0 5px 14px rgba(46,224,110,.35)}
.nb-sim{color:#0a1e38;background:linear-gradient(135deg,#6ed5ff,var(--sky) 50%,#2a9fd8)}
.nb:active{transform:scale(.97)}
.wx-scroll{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;margin-top:14px;scrollbar-width:none}
.wx-scroll::-webkit-scrollbar{display:none}
.wcard{flex:0 0 auto;width:128px;background:var(--navy3);border:1px solid var(--line);border-top:3px solid var(--l0);border-radius:13px;padding:9px 10px}
.wcard.s1{border-top-color:var(--l1)}.wcard.s2{border-top-color:var(--l2)}.wcard.s3{border-top-color:var(--l3)}
.wcard .when{font-size:10px;color:var(--faint);display:flex;justify-content:space-between}
.wcard .when b{color:var(--sky)}
.wcard .ico{font-size:26px;text-align:center;margin:3px 0}
.wcard .d{font-size:11.5px;text-align:center;font-weight:600;min-height:28px;display:flex;align-items:center;justify-content:center}
.wcard .m{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-top:4px;padding-top:4px;border-top:1px dashed var(--line)}

/* ================================================================
   07. TURN-BY-TURN NAVIGATION
   ================================================================ */

.turn-banner{position:absolute;top:0;left:0;right:0;z-index:1050;background:linear-gradient(180deg,#0a1628 0%,rgba(10,22,40,.96) 75%,rgba(10,22,40,.5) 100%);padding:calc(10px + var(--sat)) 16px 26px;display:none;gap:14px;align-items:center;pointer-events:none}
.turn-banner.show{display:flex}
.tb-arrow{flex:0 0 74px;height:74px;border-radius:18px;background:linear-gradient(135deg,#ffd97a,var(--amber) 45%,#ff8a00);display:grid;place-items:center;box-shadow:0 6px 20px rgba(255,178,36,.45)}
.tb-arrow svg{width:48px;height:48px;color:#221300}
.tb-arrow.go{animation:pulseArrow 1s infinite}
@keyframes pulseArrow{50%{box-shadow:0 6px 28px rgba(255,178,36,.8)}}
.tb-info{flex:1;min-width:0;color:var(--ink);padding-right:56px}
.tb-dist{font-family:'Prompt';font-weight:900;font-size:34px;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.tb-act{font-family:'Prompt';font-weight:600;font-size:16px;margin-top:3px;line-height:1.25}
.tb-street{font-size:13px;color:var(--sky);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-end{position:absolute;top:calc(10px + var(--sat));right:12px;pointer-events:auto;width:44px;height:44px;border-radius:50%;background:rgba(60,15,22,.9);border:1.5px solid var(--red);color:#ff9aa4;display:grid;place-items:center;font-size:18px;z-index:10}
.tb-end:active{background:#5c1620}
.nav-bar{position:absolute;left:0;right:0;bottom:0;z-index:1050;background:linear-gradient(0deg,#0a1628 0%,rgba(10,22,40,.97) 70%,rgba(10,22,40,.6) 100%);padding:24px 14px calc(12px + var(--sab));display:none;gap:10px;align-items:center}
.nav-bar.show{display:flex}
.speedo{flex:0 0 auto;text-align:center;min-width:74px;background:rgba(8,18,32,.85);border:1px solid var(--line2);border-radius:16px;padding:9px 12px;backdrop-filter:blur(8px)}
.speedo .v{font-family:'Prompt';font-weight:900;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.speedo .u{font-size:9px;color:var(--faint);margin-top:2px;letter-spacing:.5px}
.sim-speed{flex:0 0 auto;padding:8px 12px;border-radius:12px;background:var(--navy3);border:1px solid var(--line2);color:var(--sky);font-family:'Prompt';font-weight:700;font-size:14px;display:none}
.sim-speed.show{display:block}
.sim-speed:active{transform:scale(.95)}
.eta{flex:1;background:rgba(8,18,32,.85);border:1px solid var(--line2);border-radius:16px;padding:10px 13px;backdrop-filter:blur(8px)}
.eta .r1{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)}
.eta .r1 b{font-family:'Prompt';font-size:15px;color:var(--green);font-weight:700}
.eta .r2{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-top:3px;padding-top:3px;border-top:1px dashed #23446d}
.eta .r2 b{font-family:'Prompt';color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.progress{position:absolute;left:0;right:0;top:-3px;height:3px;background:rgba(8,18,32,.7)}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sky),var(--green));transition:width .3s}

/* ================================================================
   08. ETA SHARE / WEATHER ALERT BANNER
   ================================================================ */

/* ========================================= */
/* ปุ่มแชร์ ETA */
/* ========================================= */
.btn-share-eta {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: rgba(62, 197, 255, 0.15);
  border: 1px solid rgba(62, 197, 255, 0.4);
  color: var(--sky);
  display: grid;
  place-items: center;
  margin-left: 2px;
  transition: transform 0.15s, background 0.2s;
}
.btn-share-eta:active { transform: scale(0.92); }

/* ปรับสีปุ่มแชร์ในโหมดกลางวัน */
body.theme-light .btn-share-eta {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0284c7;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
}
/* ========================================= */
/* ปรับแต่ง Popup แจ้งเตือนด้านบน (wx-banner) ให้อ่านง่าย คมชัด */
/* ========================================= */
.wx-banner{
  position: absolute;
  top: calc(118px + var(--sat));
  left: 12px;
  right: 12px;
  z-index: 1040;
  padding: 14px 16px;
  border-radius: 16px;
  display: none;
  gap: 12px;
  align-items: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  font-size: 13.5px;
  font-weight: 500;
  backdrop-filter: blur(12px);
}
.wx-banner.show{display:flex}

/* ระดับเตือนภัย Lv.2 (สีส้ม/เหลือง) - โหมดกลางคืน */
.wx-banner.lv2{
  background: linear-gradient(135deg, #59390c, #261804);
  border: 1.5px solid #ffb224;
  color: #fff3cd;
}
.wx-banner.lv2 b { color: #ffe066; font-weight: 700; }

/* ระดับเตือนภัย Lv.3 (สีแดง/อันตราย) - โหมดกลางคืน */
.wx-banner.lv3{
  background: linear-gradient(135deg, #661420, #330a10);
  border: 1.5px solid #ff5d6c;
  color: #ffe3e5;
  animation: wxp 1.4s infinite;
}
.wx-banner.lv3 b { color: #ff8787; font-weight: 700; }

@keyframes wxp{
  50%{ box-shadow: 0 0 0 6px rgba(255,93,108,0.3), 0 8px 30px rgba(0,0,0,0.6); }
}
.wx-banner .ic{font-size:22px}

/* ================================================================
   09. TRAFFIC REPORT / TRAFFIC MODAL
   ================================================================ */

.traffic-legend{position:fixed;bottom:calc(80px + var(--sab));left:12px;z-index:900;background:rgba(15,33,56,.92);backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:12px;padding:8px 12px;font-size:11px;color:var(--dim);display:none;gap:8px;align-items:center}
.traffic-legend.show{display:flex}
.traffic-legend .li{display:flex;align-items:center;gap:4px}
.traffic-legend .sw{width:14px;height:4px;border-radius:2px}

.traffic-modal{position:absolute;inset:0;z-index:2500;background:rgba(6,14,28,.85);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}
.traffic-modal.show{display:flex}
.traffic-card{background:linear-gradient(180deg,var(--navy2),var(--navy));border:1px solid var(--line2);border-radius:20px;padding:24px 20px;max-width:400px;width:100%;box-shadow:var(--sh);animation:rise .35s ease;max-height:85dvh;overflow-y:auto}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.traffic-card h3{font-family:'Prompt';font-size:19px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.traffic-card>p{font-size:13px;color:var(--dim);margin-bottom:16px;line-height:1.5}
.traffic-card label{display:block;font-size:12px;color:var(--faint);margin-bottom:6px}
.traffic-card input{width:100%;padding:12px 14px;border-radius:12px;background:var(--navy3);border:1.5px solid var(--line);color:var(--ink);font-size:14px;outline:none;margin-bottom:12px}
.traffic-card input:focus{border-color:var(--sky)}
.traffic-options{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.topt{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;background:var(--navy3);border:1.5px solid var(--line);cursor:pointer;transition:.2s}
.topt:active{transform:scale(.98)}
.topt.sel{border-color:var(--amber);background:rgba(255,178,36,.06)}
.topt .rad{width:20px;height:20px;border-radius:50%;border:2px solid var(--line2);flex:0 0 auto;display:grid;place-items:center}
.topt.sel .rad{border-color:var(--amber)}
.topt.sel .rad::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--amber)}
.topt b{display:block;font-size:14px}
.topt small{color:var(--faint);font-size:11.5px}
.topt .tag{margin-left:auto;font-size:10px;padding:3px 8px;border-radius:99px;font-weight:700}
.tag-safe{background:rgba(46,224,110,.15);color:var(--green)}
.tag-risk{background:rgba(255,93,108,.15);color:var(--red)}
.traffic-card .btns{display:flex;gap:10px}
.traffic-card .btns button{flex:1;padding:13px;border-radius:14px;font-family:'Prompt';font-weight:700;font-size:15px}
.tbtn-save{color:#221300;background:linear-gradient(135deg,#ffc94d,var(--amber))}
.tbtn-cancel{color:var(--dim);background:var(--navy3);border:1.5px solid var(--line)}
.tbtn-off{color:var(--red);background:rgba(255,93,108,.1);border:1.5px solid var(--red);width:100%;padding:12px;border-radius:14px;font-family:'Prompt';font-weight:700;margin-top:10px;display:none}

/* ================================================================
   10. TOAST / AUDIO OVERLAY
   ================================================================ */

/* ========================================= */
/* ปรับแต่ง Popup แจ้งเตือน (Toast) ให้ความกว้างพอดีกับข้อความ */
/* ========================================= */
.toasts{
  position: fixed;
  top: calc(14px + var(--sat));
  left: 50%;
  transform: translateX(-50%); /* จัดให้อยู่กึ่งกลางหน้าจออัตโนมัติ */
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center; /* จัดข้อความภายในให้กึ่งกลางหรือพอดี */
  gap: 8px;
  pointer-events: none;
  max-width: calc(100vw - 24px); /* กันไม่ให้ล้นขอบจอซ้ายขวา */
  width: max-content;
}

.toast{
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 4px solid var(--sky);
  border-radius: 13px;
  padding: 12px 18px;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: tin .35s ease;
  line-height: 1.4;
  color: #ffffff !important;
  width: auto;
  max-width: 100%;
  text-align: left; /* จัดข้อความชิดซ้ายเพื่อให้อ่านง่ายกรณีข้อความยาว */
}

.toast b { color: #3ec5ff; }
.toast.warn{ border-left-color: var(--l2); }
.toast.danger{ border-left-color: var(--l3); }
.toast.ok{ border-left-color: var(--l0); }

@keyframes tin{
  from{ opacity: 0; transform: translateY(-16px); }
  to{ opacity: 1; transform: translateY(0); }
}

.toast.out{
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity .3s, transform .3s;
}

.audio-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(6,14,28,.94);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;
  padding:32px;
}
.audio-overlay.show{display:flex}
.audio-overlay .big-ic{font-size:64px;animation:audioPulse 1.5s infinite}
@keyframes audioPulse{50%{transform:scale(1.1)}}
.audio-overlay h2{color:#eaf3ff;font-size:20px;font-weight:bold;text-align:center}
.audio-overlay p{color:#9db4d0;font-size:14px;text-align:center;max-width:320px;line-height:1.5}
.audio-overlay button{
  margin-top:12px;padding:16px 44px;font-size:17px;
  background:linear-gradient(135deg,#ffc94d,#ffb224);
  border:none;border-radius:14px;color:#221300;font-weight:bold;
  box-shadow:0 6px 20px rgba(255,178,36,.4);
  font-family:'Prompt';
}
.audio-overlay button:active{transform:scale(.96)}

@media (min-width:600px){
  .sheet{max-width:480px;left:50%;margin-left:-240px}
  .traffic-modal .traffic-card{max-width:420px}
}

/* ================================================================
   11. PIN MODE / MY LOCATION
   ================================================================ */

/* ===== โหมดปักหมุด (Pin Mode) ===== */
body.pin-mode .sheet{display:none!important}
body.pin-mode .fab-tr{display:none!important}
body.pin-mode .fab-bl{display:none!important}

body.pin-mode .nav-bar{display:none!important}
body.pin-mode .turn-banner{display:none!important}
body.pin-mode .wx-banner{display:none!important}
body.pin-mode .traffic-legend{display:none!important}
body.pin-mode .map-stage{bottom:45%}
.pin-panel{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  background:linear-gradient(180deg,var(--navy2),var(--navy));
  border-top:2px solid var(--amber);padding:14px 16px calc(18px + var(--sab));
  display:none;flex-direction:column;gap:10px;
}
body.pin-mode .pin-panel{display:flex}
.pin-status{display:flex;align-items:center;gap:10px;font-size:14px;min-height:24px}
.pin-spinner{width:20px;height:20px;border:3px solid var(--line);border-top-color:var(--amber);
  border-radius:50%;animation:spin .8s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.pin-status.ok{color:var(--green);font-weight:600}
.pin-status.err{color:var(--red);font-weight:600}
.pin-addr{font-size:13px;color:var(--dim);line-height:1.4;min-height:18px;word-break:break-word}
.pin-btn{
  width:100%;padding:15px;border-radius:14px;border:none;
  font-family:'Prompt';font-weight:700;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.pin-btn:active{transform:scale(.97)}
.pin-btn:disabled{opacity:.5}
.pin-btn-send{color:#221300;background:linear-gradient(135deg,#ffc94d,var(--amber) 45%,#ff8a00);
  box-shadow:0 5px 16px rgba(255,150,0,.35)}
.pin-btn-retry{color:var(--sky);background:var(--navy3);border:1.5px solid var(--line)}

/* ========================================= */
/* 🔵 Marker ตำแหน่งของฉัน (ตอนยังไม่มี route) */
/* ========================================= */
.my-location-dot {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}

/* แกนกลาง — วงกลมฟ้า + ขอบขาว */
.my-location-dot .mld-core {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3ec5ff;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 10px rgba(62, 197, 255, 0.6),
              0 0 0 2px rgba(62, 197, 255, 0.25);
  z-index: 2;
}

/* วงแหวนกระเพื่อมรอบนอก */
.my-location-dot .mld-ring {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #3ec5ff;
  opacity: 0.7;
  animation: mldPulse 2s ease-out infinite;
  pointer-events: none;
}

@keyframes mldPulse {
  0% {
    transform: scale(0.5);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* โหมดกลางวัน */
body.theme-light .my-location-dot .mld-core {
  background: #0284c7;
  border-color: #ffffff;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.5),
              0 0 0 2px rgba(2, 132, 199, 0.2);
}

body.theme-light .my-location-dot .mld-ring {
  border-color: #0284c7;
}

/* ================================================================
   12. DAY / NIGHT THEME
   ================================================================ */

/* ========================================= */
/* ระบบโทนสี กลางวัน-กลางคืน (Day/Night Theme) */
/* ========================================= */

/* โหมดกลางวัน (สว่าง) 06:00 - 18:00 */
body.theme-light {
  --navy: #f1f5f9;
  --navy2: #ffffff;
  --navy3: #e2e8f0;
  --line: #cbd5e1;
  --line2: #94a3b8;
  --ink: #0f172a;
  --dim: #334155;
  --faint: #64748b;

  --sky: #0284c7;
  --amber: #d97706;
  --green: #16a34a;
  --red: #dc2626;

  --l0: #16a34a; --l1: #eab308; --l2: #ea580c; --l3: #dc2626;
}

body.theme-light .turn-banner { background: linear-gradient(180deg, #f1f5f9 0%, rgba(241,245,249,.96) 75%, rgba(241,245,249,.5) 100%); }
body.theme-light .nav-bar { background: linear-gradient(0deg, #f1f5f9 0%, rgba(241,245,249,.97) 70%, rgba(241,245,249,.6) 100%); }

body.theme-light .fab, body.theme-light .radar-ctl, body.theme-light .traffic-legend,
body.theme-light .speedo, body.theme-light .eta {
  background: rgba(255,255,255,.95);
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  color: #0f172a;
}

/* ========================================= */
/* 💡 จัดการสถานะปุ่มเครื่องมือ (FAB) ทุกปุ่มให้ชัดเจนตอนกด */
/* ========================================= */
body.theme-light .fab { color: #475569; } /* สถานะปกติ: ไอคอนเทาเข้ม */
body.theme-light .fab.warm { color: #d97706; } /* กระดิ่งปกติ: สีส้ม */

.fab.on {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}
body.theme-light .fab.on {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}
body.theme-light .fab.warm.on { background: #d97706 !important; color: #ffffff !important; border-color: #d97706 !important; }

/* 💡 แก้ไข Popup แจ้งเตือนด้านบน (wx-banner) ในโหมดกลางวันให้อ่านง่าย ตัวหนังสือไม่ดำมืด */
body.theme-light .wx-banner.lv2 {
  background: #fef9c3 !important;
  border: 1.5px solid #facc15 !important;
  color: #713f12 !important;
}
body.theme-light .wx-banner.lv2 b { color: #854d0e !important; }

body.theme-light .wx-banner.lv3 {
  background: #fee2e2 !important;
  border: 1.5px solid #f87171 !important;
  color: #991b1b !important;
}
body.theme-light .wx-banner.lv3 b { color: #7f1d1d !important; }

/* ตัวหนังสือในป้ายบอกทาง (Turn Banner) สู้แสง */
body.theme-light .tb-dist { text-shadow: none; color: #0f172a; }
body.theme-light .tb-act { color: #334155; }
body.theme-light .tb-street { color: #0284c7; font-weight: 700; }

body.theme-light .audio-overlay { background: rgba(255,255,255,.95); }
body.theme-light .audio-overlay h2 { color: #0f172a; }
body.theme-light .audio-overlay p { color: #475569; }

body.theme-light .nb-real { background: linear-gradient(135deg, #bbf7d0, #4ade80); color: #064e3b; box-shadow: 0 4px 12px rgba(74,222,128,.3); }
body.theme-light .nb-sim { background: linear-gradient(135deg, #bae6fd, #38bdf8); color: #0c4a6e; box-shadow: 0 4px 12px rgba(56,189,248,.3); }

body.theme-light .sheet-handle i { background: #cbd5e1; }
body.theme-light .field input::placeholder { color: #94a3b8; }
body.theme-light .summary-card .st { border-right-color: #cbd5e1; }

/* แผนที่ Dark Mode อัตโนมัติเวลากลางคืน */
body:not(.theme-light) .leaflet-tile-pane {
  filter: brightness(0.85) invert(100%) hue-rotate(180deg) contrast(1.1) saturate(1.2);
}

/* ================================================================
   13. OVERSPEED WARNING
   ================================================================ */

/* ========================================= */
/* ระบบเตือนความเร็วเกินกำหนด (Overspeed) */
/* ========================================= */
.speedo {
  transition: background 0.3s, border-color 0.3s;
}
.speedo.overspeed {
  background: rgba(220, 38, 38, 0.95) !important; /* พื้นหลังสีแดงทึบ */
  border-color: #f87171 !important;
  animation: flashRed 0.8s infinite alternate; /* กะพริบเตือนภัย */
}
.speedo.overspeed .v,
.speedo.overspeed .u {
  color: #ffffff !important; /* ตัวหนังสือสีขาวสว่าง */
}

@keyframes flashRed {
  from { box-shadow: 0 0 10px rgba(220,38,38,0.5); }
  to { box-shadow: 0 0 25px rgba(220,38,38,1), inset 0 0 10px rgba(255,255,255,0.3); }
}

/* ================================================================
   14. WEATHER REPORT MODE / COMMUNITY REPORT
   ================================================================ */

/* ===== โหมดรายงานสภาพอากาศ (Report Mode) ===== */
body.report-mode .sheet, body.report-mode .fab-tr, body.report-mode .fab-bl,
body.report-mode .nav-bar, body.report-mode .turn-banner,
body.report-mode .wx-banner, body.report-mode .traffic-legend { display:none!important; }
body.report-mode .map-stage { bottom:45%; }

.report-panel {
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  background:linear-gradient(180deg,var(--navy2),var(--navy));
  border-top:2px solid #3ec5ff; padding:16px 16px calc(24px + var(--sab));
  display:none; flex-direction:column; gap:12px;
}
body.report-mode .report-panel { display:flex; }
.rep-head { font-family:'Prompt'; font-weight:700; font-size:16px; color:#ffffff; }
.rep-sub { font-size:12px; color:var(--dim); margin-top:-6px; }

.wx-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:8px; }
.wx-rep-btn {
  background:var(--navy3); border:1.5px solid var(--line); border-radius:14px;
  padding:12px 6px; color:var(--ink); font-family:'Prompt'; font-size:13px; font-weight:600;
  display:flex; flex-direction:column; align-items:center; gap:6px; transition:.2s;
}
.wx-rep-btn:active { transform:scale(.95); border-color:#3ec5ff; background:rgba(62,197,255,.1); }
.wx-rep-btn .ic { font-size:28px; line-height:1; }

/* ไอคอนแจ้งเตือนบนแผนที่ */
.comm-marker {
  display:grid; place-items:center; background:rgba(15,33,56,.9);
  border:2px solid #3ec5ff; border-radius:50%; box-shadow:0 4px 12px rgba(0,0,0,.6);
  font-size:20px; animation: pop .3s ease-out;
}
.comm-marker.m-heavy { border-color:#ff5d6c; }
.comm-marker.m-flood { border-color:#ff9f43; }
/* ========================================= */
/* ปุ่มแจ้งเหตุบนแผนที่ (ระหว่างนำทาง) */
/* ========================================= */
.fab-report-map {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 180px); /* ความสูงหลบกล่องบอกทางด้านล่าง */
  left: 14px; /* 💡 ย้ายมาฝั่งซ้ายของจอ */
  z-index: 800;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9f43, #ff5d6c);
  color: white;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(255,93,108,0.5);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}
.fab-report-map:active { transform: scale(0.9); }

/* ซ่อนปุ่มแจ้งเหตุ เมื่ออยู่ในโหมดปักหมุด หรือเข้าจากริชเมนู */
body.report-mode .fab-report-map, body.pin-mode .fab-report-map { display: none !important; }

/* เมื่อกดปุ่มบนแผนที่ ให้แผงรายงานเด้งขึ้นมาทับ (Overlay) */
body.overlay-report .report-panel {
  display: flex !important;
  z-index: 9999; /* ลอยทับทุกอย่าง */
}
body.overlay-report .fab-report-map { display: none; }

/* ========================================= */
/* 🚨 Popup แจ้งเตือนรายงานจากเพื่อนร่วมทาง */
/* ========================================= */
.report-alert-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 3500;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid #3ec5ff;
  border-radius: 20px;
  padding: 22px 24px;
  max-width: 340px;
  width: calc(100vw - 40px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 9999px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  font-family: 'Prompt', 'Sarabun', sans-serif;
}
.report-alert-popup.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.report-alert-popup.risk-heavy { border-color: #ff5d6c; }
.report-alert-popup.risk-flood { border-color: #ff9f43; }

.report-alert-popup .rap-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 10px;
  animation: rapPulse 1.5s infinite;
}
@keyframes rapPulse {
  50% { transform: scale(1.15); }
}
.report-alert-popup h3 {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  margin-bottom: 6px;
}
.report-alert-popup .rap-desc {
  font-size: 15px;
  color: #eaf3ff;
  text-align: center;
  margin-bottom: 6px;
  font-weight: 600;
}
.report-alert-popup .rap-meta {
  font-size: 12px;
  color: #9db4d0;
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.5;
}
.report-alert-popup .rap-meta b { color: #3ec5ff; }
.report-alert-popup .rap-btns {
  display: flex;
  gap: 8px;
}
.report-alert-popup .rap-btns button {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  font-family: 'Prompt';
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.15s;
}
.report-alert-popup .rap-btns button:active { transform: scale(0.95); }
.report-alert-popup .rap-btn-view {
  color: #07210f;
  background: linear-gradient(135deg, #62f595, #2ee06e 50%, #1cb85a);
  border: none;
}
.report-alert-popup .rap-btn-close {
  color: #9db4d0;
  background: var(--navy3, #0c1d33);
  border: 1.5px solid var(--line, #21406a);
}

/* ปรับสีโหมดกลางวัน */
body.theme-light .report-alert-popup {
  background: linear-gradient(135deg, #ffffff, #f1f5f9);
  border-color: #0284c7;
}
body.theme-light .report-alert-popup h3 { color: #0f172a; }
body.theme-light .report-alert-popup .rap-desc { color: #334155; }
body.theme-light .report-alert-popup .rap-meta { color: #64748b; }
body.theme-light .report-alert-popup .rap-meta b { color: #0284c7; }
body.theme-light .report-alert-popup .rap-btn-close {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #475569;
}

/* ================================================================
   15. FAVORITES
   ================================================================ */

/* ========================================= */
/* ⭐ ปุ่ม Favorite จุดโปรด */
/* ========================================= */
.fav-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--navy3);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  font-size: 12px;
  color: var(--faint);
}
.fav-bar .fav-list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
}
.fav-bar .fav-list::-webkit-scrollbar { display: none; }
.fav-bar .fav-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--navy2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fav-bar .fav-chip:active {
  background: var(--amber);
  color: #221300;
  border-color: var(--amber);
}
.fav-bar .fav-chip .del {
  font-size: 14px;
  color: var(--red);
  margin-left: 2px;
  padding: 0 2px;
}
.fav-bar .fav-empty {
  color: var(--faint);
  font-size: 11.5px;
  font-style: italic;
}
.fav-save-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy2);
  border: 1.5px solid var(--line);
  color: var(--amber);
  display: grid;
  place-items: center;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.15s;
}
.fav-save-btn:active { transform: scale(0.9); }
.fav-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* โหมดกลางวัน */
body.theme-light .fav-bar { background: #e2e8f0; border-color: #cbd5e1; color: #64748b; }
body.theme-light .fav-chip { background: #ffffff; border-color: #cbd5e1; color: #0f172a; }
body.theme-light .fav-chip:active { background: #d97706; color: #ffffff; border-color: #d97706; }
body.theme-light .fav-save-btn { background: #ffffff; border-color: #cbd5e1; color: #d97706; }
/* ========================================= */

/* ================================================================
   16. TRIP SUMMARY
   ================================================================ */

/* 📊 Trip Summary Modal */
/* ========================================= */
.trip-summary-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 4000;
  background: rgba(6,14,28,.85);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}
.trip-summary-modal.show {
  display: flex;
  opacity: 1;
}
.trip-summary-card {
  background: linear-gradient(180deg, var(--navy2), var(--navy));
  border: 1.5px solid var(--line2);
  border-radius: 24px;
  padding: 24px 20px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  animation: tripRise 0.4s cubic-bezier(0.3, 0.9, 0.4, 1);
  max-height: 85dvh;
  overflow-y: auto;
}
@keyframes tripRise {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}
.trip-summary-card .ts-icon {
  font-size: 56px;
  text-align: center;
  margin-bottom: 8px;
  animation: rapPulse 1.5s infinite;
}
.trip-summary-card h2 {
  font-family: 'Prompt';
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  color: var(--green);
  margin-bottom: 4px;
}
.trip-summary-card .ts-sub {
  font-size: 12.5px;
  color: var(--faint);
  text-align: center;
  margin-bottom: 18px;
}
.trip-summary-card .ts-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.trip-summary-card .ts-stat {
  background: var(--navy3);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
}
.trip-summary-card .ts-stat .v {
  font-family: 'Prompt';
  font-weight: 800;
  font-size: 20px;
  color: var(--sky);
  line-height: 1.2;
}
.trip-summary-card .ts-stat .v.a { color: var(--amber); }
.trip-summary-card .ts-stat .v.g { color: var(--green); }
.trip-summary-card .ts-stat .v.r { color: var(--red); }
.trip-summary-card .ts-stat .l {
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 3px;
}
.trip-summary-card .ts-btns {
  display: flex;
  gap: 8px;
}
.trip-summary-card .ts-btns button {
  flex: 1;
  padding: 13px;
  border-radius: 14px;
  font-family: 'Prompt';
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.15s;
}
.trip-summary-card .ts-btns button:active {
  transform: scale(0.96);
}
.trip-summary-card .ts-btn-share {
  color: #07210f;
  background: linear-gradient(135deg, #62f595, #2ee06e 50%, #1cb85a);
  border: none;
}
.trip-summary-card .ts-btn-close {
  color: var(--dim);
  background: var(--navy3);
  border: 1.5px solid var(--line);
}
body.theme-light .trip-summary-card {
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
}
body.theme-light .trip-summary-card h2 { color: #16a34a; }
body.theme-light .trip-summary-card .ts-stat {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

/* ================================================================
   17. VOICE SETTINGS
   ================================================================ */

/* ========================================= */
/* 🔊 Voice Settings */
/* ========================================= */
.voice-settings {
  margin-bottom: 12px;
  background: var(--navy3);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.vs-header {
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--sky);
  user-select: none;
}
.vs-header:active {
  background: var(--navy2);
}
.vs-chevron {
  transition: transform 0.2s;
  color: var(--faint);
}
.voice-settings.open .vs-chevron {
  transform: rotate(90deg);
}
.vs-body {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
}
.vs-row {
  margin-bottom: 12px;
}
.vs-row:last-of-type {
  margin-bottom: 8px;
}
.vs-row label {
  display: block;
  font-size: 11.5px;
  color: var(--faint);
  margin-bottom: 5px;
}
.vs-row label b {
  color: var(--sky);
  font-variant-numeric: tabular-nums;
}
.vs-row select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--navy2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.vs-row input[type=range] {
  width: 100%;
  accent-color: var(--amber);
}
.vs-test-btn {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  background: var(--navy2);
  border: 1.5px solid var(--sky);
  color: var(--sky);
  font-family: 'Prompt';
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.vs-test-btn:active {
  transform: scale(0.97);
}
body.theme-light .voice-settings {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
body.theme-light .vs-header { color: #0284c7; }
body.theme-light .vs-row select {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
body.theme-light .vs-test-btn {
  background: #ffffff;
  color: #0284c7;
  border-color: #0284c7;
}

/* ================================================================
   18. TEMPERATURE DISPLAY
   ================================================================ */

/* ========================================= */
/* 🌡️ Temperature Display (ลอยบนแผนที่) */
/* ========================================= */
.temp-display {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 50px;
  background: rgba(15, 33, 56, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line2);
  font-family: 'Prompt';
  font-size: 14px;
  box-shadow: var(--sh);
  transition: all 0.3s;
}

/* ✅ ปุ่มลอยบนแผนที่ — เหนือปุ่มรายงาน */
.temp-display.temp-float {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 245px); /* สูงกว่าปุ่มรายงาน 65px */
  left: 14px;
  z-index: 800;
  height: 52px;              /* ความสูงเท่าปุ่มรายงาน */
  min-width: 52px;
  padding: 0 14px;
  justify-content: center;
}

/* ✅ Icon ดวงเดียวกันทุกอุณหภูมิ */
.temp-display #tempIcon {
  font-size: 18px;
  line-height: 1;
}

/* ✅ ตัวเลข — เปลี่ยนสีตามอุณหภูมิ */
.temp-display #tempValue {
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);              /* ปกติ: สีขาว */
  transition: color 0.3s;
}

/* 🔥 ร้อนจัด (≥ 35°C) — สีส้ม */
.temp-display.hot #tempValue {
  color: #ff9f43;
}

/* ☀️ ร้อน (28-34°C) — สีเหลืองอำพัน */
.temp-display.warm #tempValue {
  color: #ffb224;
}

/* 🌥️ ปกติ (21-27°C) — ไม่มี class, ใช้สีขาวปกติ */

/* ❄️ หนาว (≤ 15°C) — สีฟ้า */
.temp-display.cold #tempValue {
  color: #3ec5ff;
}

/* โหมดกลางวัน */
body.theme-light .temp-display {
  background: rgba(255, 255, 255, 0.95);
  border-color: #cbd5e1;
  color: #0f172a;
}
body.theme-light .temp-display #tempValue {
  color: #0f172a;
}
body.theme-light .temp-display.hot #tempValue {
  color: #dc2626;
}
body.theme-light .temp-display.warm #tempValue {
  color: #d97706;
}
body.theme-light .temp-display.cold #tempValue {
  color: #0284c7;
}

/* ✅ ซ่อนเมื่อไม่ได้นำทาง */
body:not(.navigating) .temp-display.temp-float {
  display: none;
}

/* ================================================================
   19. TMD RADAR CONTROL
   ================================================================ */

/* ========================================= */
/* 📡 TMD Radar Control Panel */
/* ========================================= */
.tmd-ctl {
  position: fixed;
  left: 12px;
  right: auto;
  transform: none;
  top: calc(12px + var(--sat));
  bottom: auto;
  z-index: 1070;
  display: none;
  gap: 8px;
  align-items: center;
  background: rgba(15, 33, 56, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 8px 14px;
  box-shadow: var(--sh);
  font-family: 'Prompt';
  transition: top 0.3s, bottom 0.3s, left 0.3s, opacity 0.3s, transform 0.3s;

  /* ✅ Fix ความกว้างไม่ให้ขยาย/หด เมื่อเวลา/เฟรมเปลี่ยน */
  min-width: 260px;                    /* ← ความกว้างขั้นต่ำ */
  justify-content: space-between;      /* ← กระจายช่องว่าง */
}
.tmd-ctl.show {
  display: flex;
}

.tmd-ctl .tmd-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sky);
  font-weight: 600;
  white-space: nowrap;

  /* ✅ Fix ความกว้าง label ทั้งหมด */
  min-width: 170px;                    /* ← บังคับความกว้างขั้นต่ำ */
}
.tmd-ctl .tmd-label b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;

  /* ✅ Fix ความกว้างไม่ให้ขยับเมื่อเวลาเปลี่ยน */
  min-width: 44px;                     /* ← พอสำหรับ "00:00" */
  text-align: center;
  display: inline-block;
}

.tmd-ctl .tmd-label small {
  font-family: 'Prompt';
  font-weight: 500;
  color: var(--faint);
  font-size: 10px;

  /* ✅ Fix ความกว้างไม่ให้ขยับเมื่อ #4 → #24 → #100 */
  min-width: 52px;                     /* ← พอสำหรับ "#100 00:00" */
  text-align: center;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.tmd-ctl button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy3);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;

  /* ✅ ปุ่มต้องไม่หดตัว */
  flex-shrink: 0;
  flex-grow: 0;
}

.tmd-ctl button:active {
  transform: scale(0.9);
}

.tmd-ctl button.on {
  background: #2ee06e;
  color: #07210f;
  border-color: #2ee06e;
  animation: tmdPlayPulse 1.2s infinite;
}

@keyframes tmdPlayPulse {
  50% { box-shadow: 0 0 0 6px rgba(46, 224, 110, 0.3); }
}

/* ✅ ตอนนำทาง: ย้ายกลับไปล่าง เหนือ nav-bar */
body.navigating .tmd-ctl {
  top: auto;
  bottom: calc(108px + var(--sab));
}

/* FAB TMD active */
#fabTmdRadar.on {
  background: linear-gradient(135deg, #0284c7, #3ec5ff);
  color: #ffffff;
  border-color: #3ec5ff;
  box-shadow: 0 4px 16px rgba(62, 197, 255, 0.5);
  animation: tmdPulse 2s infinite;
}

@keyframes tmdPulse {
  50% { box-shadow: 0 4px 24px rgba(62, 197, 255, 0.8); }
}

.tmd-radar-overlay {
  pointer-events: none;
}

/* โหมดกลางวัน */
body.theme-light .tmd-ctl {
  background: rgba(255, 255, 255, 0.95);
  border-color: #cbd5e1;
}
body.theme-light .tmd-ctl .tmd-label { color: #0284c7; }
body.theme-light .tmd-ctl .tmd-label b { color: #0f172a; }
body.theme-light .tmd-ctl button {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}


/* ================================================================
   20. LANE GUIDANCE
   ================================================================ */

/* Lane Guidance */
.lane-banner {
  position: fixed;
  top: calc(12px + var(--sat));
  right: 72px;
  bottom: auto;                          /* ← สำคัญ! ต้อง reset bottom */
  left: auto;
  z-index: 1055;
  padding: 8px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10,22,40,.95), rgba(10,22,40,.85));
  border: 2px solid #ffb224;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(-10px);
  max-width: 240px;
}
.lane-banner.show {
  opacity: 1;
  transform: translateY(0);
}
/* ✅ ตอนนำทาง → ย้ายการ์ดลงมาด้านล่าง เหนือกลุ่ม fab-tr */
body.navigating .lane-banner {
  top: auto;
  bottom: calc(108px + var(--sab) + 60px);   /* สูงกว่า fab-tr อยู่ 60px */
  right: 72px;
  transform: translateY(10px);
}

.lane-title {
  font-size: 10px;
  color: #ffb224;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lane-icons {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.lane-icon {
  width: 28px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #64748b;
  position: relative;
}
.lane-icon.active {
  color: #2ee06e;
  animation: lanePulse 1.2s infinite;
}
.lane-icon svg {
  width: 100%;
  height: 100%;
}
.lane-icon.active::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  background: rgba(46,224,110,.2);
  z-index: -1;
}
@keyframes lanePulse {
  50% { transform: scale(1.1); }
}
body.theme-light .lane-banner {
  background: linear-gradient(180deg, #fff, #f1f5f9);
  border-color: #d97706;
}
body.theme-light .lane-title { color: #d97706; }
body.theme-light .lane-icon { color: #94a3b8; }
body.theme-light .lane-icon.active { color: #16a34a; }

/* ซ่อนเมื่อไม่นำทาง */
body:not(.navigating) .lane-banner { display: none; }
/* ✅ ตอนนำทาง → ย้ายการ์ดลงมาด้านล่าง เหนือกลุ่ม fab-tr */
body.navigating .lane-banner {
  top: auto;
  bottom: calc(108px + var(--sab) + 390px);
  right: 18px;
  transform: translateY(10px);
}

/* ซ่อนเมื่อหน้าจอเล็กมาก */
@media (max-width: 320px) {
  .lane-banner { display: none; }
}

/* ================================================================
   21. RADAR INTENSITY LEGEND
   ================================================================ */

/* ========================================= */
/* 🌧️ Radar Intensity Legend (แนวตั้ง · ซ้าย · เหนือปุ่มอุณหภูมิ) */
/* ========================================= */
.radar-legend {
  position: fixed;
  left: 14px;                            /* ชิดซ้าย = แนวเดียวกับปุ่มอุณหภูมิ/แจ้งเหตุ */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 309px); /* เหนือปุ่มอุณหภูมิ 12px */
  z-index: 950;
  width: 56px;                           /* แคบ · แนวเสาเดียวกับปุ่ม */
  background: rgba(15, 33, 56, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 8px 6px;
  box-shadow: var(--sh);
  font-family: 'Prompt', 'Sarabun', sans-serif;
  opacity: 0;
  transform: translateY(15px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s, bottom 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.radar-legend.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ตอนนำทาง → เลื่อนขึ้นเหนือ nav-bar */
body.navigating .radar-legend {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 309px);
}

/* ─── Header (ไอคอน + ปุ่มปิด) ─── */
.rl-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  color: var(--sky);
  font-weight: 600;
  line-height: 1;
  margin-bottom: 2px;
}

.rl-head > span:first-child {
  font-size: 16px;
}

.rl-title {
  font-size: 8px;
  letter-spacing: 0.2px;
  color: var(--faint);
  font-weight: 500;
  text-transform: uppercase;
}

.rl-close {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--navy3);
  border: 1px solid var(--line);
  color: var(--faint);
  font-size: 9px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
  position: absolute;
  top: 4px;
  right: 4px;
}

.rl-close:active {
  transform: scale(0.85);
  background: var(--red);
  color: #fff;
}

/* ─── แถบสีแนวตั้ง (gradient ไล่จากล่าง=เบา → บน=หนัก) ─── */
.rl-bar {
  width: 22px;
  height: 140px;                            /* สูงกว่าแนวนอนเดิม 14 เท่า */
  border-radius: 6px;
  /* ไล่จากล่าง (0%) ขึ้นบน (100%):
     ล่าง = ฟ้าอ่อน (เบา) → บน = ม่วง (หนักสุด) */
  background: linear-gradient(0deg,
    #78c8ff 0%,
    #1e90ff 15%,
    #00c850 30%,
    #fff032 50%,
    #ff8c28 65%,
    #e6281e 82%,
    #b428c8 100%
  );
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4),
              inset 0 -1px 3px rgba(255,255,255,0.08);
  border: 1px solid rgba(0,0,0,0.25);
  position: relative;
}

/* ป้ายกำกับ "หนัก" ด้านบน / "เบา" ด้านล่าง */
.rl-bar::before,
.rl-bar::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  pointer-events: none;
}

.rl-bar::before {
  content: 'หนัก';
  top: -11px;
  color: #ff8787;
}

.rl-bar::after {
  content: 'เบา';
  bottom: -11px;
  color: #78c8ff;
}

/* ─── หน่วย (มม./ชม.) ─── */
.rl-unit {
  font-size: 7px;
  color: var(--faint);
  text-align: center;
  opacity: 0.8;
  font-style: italic;
  line-height: 1.2;
  margin-top: 4px;
}

/* ─── โหมดกลางวัน ─── */
body.theme-light .radar-legend {
  background: rgba(255, 255, 255, 0.95);
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

body.theme-light .rl-head { color: #0284c7; }
body.theme-light .rl-title { color: #64748b; }

body.theme-light .rl-close {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #64748b;
}

body.theme-light .rl-bar::before { color: #dc2626; }
body.theme-light .rl-bar::after { color: #0284c7; }

body.theme-light .rl-unit { color: #94a3b8; }

/* ─── จอเล็กมาก ─── */
@media (max-width: 320px) {
  .radar-legend {
    width: 48px;
    padding: 6px 4px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 295px);
  }
  .rl-bar { width: 18px; height: 110px; }
  .rl-head > span:first-child { font-size: 13px; }
  .rl-title { font-size: 7px; }
}
/* ✅ เมื่อเปิดทั้ง 2 radar พร้อมกัน → เรียงเป็น 2 แถว */
.radar-ctl.show + .tmd-ctl.show,
.tmd-ctl.show ~ .radar-ctl.show {
  top: calc(122px + var(--sat));
}

#map {
  will-change: transform;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}