.no-scrollbar::-webkit-scrollbar { display: none; }

@media (max-width: 520px) {
  #drawerBody .drawer-room-status { display: none; }
  #drawerBody .drawer-room-title { flex: 1 1 auto; width: 100%; }
  #drawerBody .drawer-room-title input { width: 100%; min-width: 0; max-width: none; text-overflow: clip; }
}
.no-scrollbar { scrollbar-width: none; }

#map { background: radial-gradient(ellipse at 50% 30%, #fdfcf9 0%, #f1ede5 60%, #e9e4d9 100%); cursor: grab; }
#map.dragging { cursor: grabbing; }

/* ---- SVG ---- */
.room { transition: opacity .2s, filter .15s; }
.room.clickable { cursor: pointer; }
.room.clickable:hover { filter: brightness(1.07) drop-shadow(0 4px 6px rgba(0,0,0,.15)); }
.room.ghost { opacity: .55; }
.room.dimmed { opacity: .18; }
.room.selected polygon:first-child { stroke: #0f172a; stroke-width: 2.2; }
.room.selected .roof { stroke: #0f172a; stroke-width: 1.6; }
.room.pulse .signboard { animation: glow 1.8s ease-in-out infinite; }

.roomno { font: 600 8.5px "IBM Plex Sans Thai", sans-serif; fill: #fff; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.roomno.dark { fill: #fff; paint-order: stroke; stroke: rgba(15,23,42,.55); stroke-width: 2px; }
/* ป้ายชื่ออาคารบนพื้น: ขอบขาวรอบตัวอักษร ให้อ่านออกแม้พาดผ่านหลังคาอาคารด้านหน้า */
.bname  { font: 600 11px "IBM Plex Sans Thai", sans-serif; fill: #44403c;
          stroke: rgba(255,255,255,.95); stroke-width: 3.5px; stroke-linejoin: round; paint-order: stroke; }
.emoji  { font-size: 12px; text-anchor: middle; dominant-baseline: middle; }
.tagtext{ font: 600 10.5px "IBM Plex Sans Thai", sans-serif; fill: #fff; text-anchor: middle; dominant-baseline: middle; }

.bob { animation: bob 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); transform-box: fill-box; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes glow { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ---- Drawer ---- */
.drawer {
  position: absolute; z-index: 30; background: #fff; box-shadow: -8px 0 30px rgba(15,23,42,.12);
  top: 0; right: 0; bottom: 0; width: min(400px, 100%); transform: translateX(105%);
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), height .25s ease, max-height .25s ease;
  overflow-y: auto; display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
@media (max-width: 640px) {
  .drawer {
    position: fixed;
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 85dvh;
    max-height: 88dvh;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 32px rgba(15,23,42,0.18);
    transform: translateY(105%);
    z-index: 40;
    overflow: hidden;
    touch-action: pan-y;
  }
  .drawer.open { transform: translateY(0) !important; }
  .drawer #drawerBody {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) { .bob, .room.pulse .signboard { animation: none; } }

/* ---- Standard Invoice / Receipt Print Styles ---- */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  html, body {
    background: #fff !important;
    overflow: visible !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body > *:not(#modal) {
    display: none !important;
  }
  #modal {
    position: static !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    inset: auto !important;
  }
  #modal > div:first-child {
    display: none !important;
  }
  #modal > div:last-child {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    inset: auto !important;
  }
  #modalBody, #modalBody > div, #billDocContainer, #saasDocContainer, #muniDocContainer, #summaryDocContainer, #leaseDocContainer {
    display: block !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  .no-print, [data-close], #modalActions {
    display: none !important;
  }
  #billPrintDoc, #saasPrintDoc, #muniPrintDoc, #summaryPrintDoc, #a5PrintArea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: #fff !important;
    color: #0f172a !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  #leasePrintDoc {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: #fff !important;
    color: #0f172a !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }
  /* Dashboard contract prints need their own safe area even when the print
     dialog is set to "No margins". */
  #leasePrintDoc.lease-print-compact {
    box-sizing: border-box !important;
    padding: 20mm !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
  }
  .lease-page {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 20mm !important;
    page-break-after: always !important;
    break-after: page !important;
    min-height: 0 !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }
  .lease-page:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }
  .paper-scan-sheet {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .paper-scan-sheet img {
    max-height: 215mm !important;
    max-width: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }
  @page {
    size: A4 portrait;
    margin: 6mm 8mm;
  }
}

/* ---- Bank-style Document Scanner Laser ---- */
@keyframes scanLaser {
  0% { top: 2%; opacity: 0.8; }
  50% { top: 96%; opacity: 1; }
  100% { top: 2%; opacity: 0.8; }
}
.scanner-laser {
  animation: scanLaser 2.2s ease-in-out infinite;
}

/* Screen preview mirrors the physical A4 sheets and 20 mm content margins. */
@media screen {
  #modalBody #leasePrintDoc.lease-print-compact,
  #modalBody #leasePrintDoc .lease-page {
    min-height: 297mm;
    box-sizing: border-box;
  }
}

/* Flexible lease layout: clauses are paginated from their measured content. */
.lease-print-flow {
  width: 210mm;
  max-width: none;
  margin: 0 auto;
  color: #0f172a;
  font-family: 'Sarabun', 'Noto Sans Thai', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
}
.lease-flow-source { display: none !important; }
.lease-flow-page {
  width: 210mm !important;
  height: 297mm !important;
  min-height: 297mm !important;
  padding: 20mm !important;
  margin: 0 auto 16px !important;
  box-sizing: border-box !important;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  overflow: hidden;
}
.lease-flow-page-content { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.lease-flow-page-body { flex: 1 1 auto; min-height: 0; }
.lease-flow-heading { text-align: center; border-bottom: 2px solid #2b4468; padding-bottom: 8px; margin-bottom: 10px; }
.lease-flow-house { font-size: 20px; line-height: 1; }
.lease-flow-heading h1 { margin: 4px 0 0; font-size: 18px; font-weight: 800; }
.lease-flow-subtitle { color: #64748b; font-size: 10.5px; }
.lease-flow-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 10px; color: #475569; text-align: left; }
.lease-flow-parties { text-align: justify; margin-bottom: 10px; }
.lease-flow-parties p { margin: 0 0 6px; }
.lease-flow-property { border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 6px; padding: 6px 8px; margin: 6px 0; }
.lease-flow-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 10.5px; }
.lease-flow-summary > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #e2e8f0; padding: 2px 0; }
.lease-flow-summary span { color: #64748b; }
.lease-flow-summary .lease-flow-span { grid-column: 1 / -1; }
.lease-flow-terms-heading { margin: 10px 0 6px; border-bottom: 1px solid #cbd5e1; padding-bottom: 3px; }
.lease-flow-terms-heading h2 { margin: 0; font-size: 13px; font-weight: 800; }
.lease-flow-clause { margin: 0 0 7px; text-align: justify; page-break-inside: avoid; break-inside: avoid; }
.lease-flow-clause h2 { margin: 0 0 2px; font-size: 12.5px; font-weight: 700; }
.lease-flow-clause-body { white-space: pre-wrap; text-indent: 18px; }
.lease-flow-closing { margin: 8px 0; text-indent: 20px; text-align: justify; }
.lease-flow-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; margin: 7px 0; page-break-inside: avoid; break-inside: avoid; }
.lease-flow-signature { border: 1px solid #e2e8f0; border-radius: 7px; padding: 6px; text-align: center; background: #fafafa; }
.lease-flow-signature-label { color: #475569; font-size: 10px; font-weight: 700; }
.lease-flow-signature-mark { height: 36px; display: flex; align-items: center; justify-content: center; }
.lease-flow-signature-mark span { width: 130px; height: 22px; border-bottom: 1px dotted #94a3b8; }
.lease-flow-signature-mark img { max-width: 140px; max-height: 34px; object-fit: contain; }
.lease-flow-signature-name { font-weight: 600; font-size: 10.5px; }
.lease-flow-signature-date { margin-top: 2px; color: #64748b; font-size: 9px; }
.lease-flow-integrity { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 5px 7px; border: 1px solid #bbf7d0; border-radius: 7px; background: #f0fdf4; color: #166534; font-size: 9px; page-break-inside: avoid; break-inside: avoid; }
.lease-flow-hash { margin-top: 2px; font-family: monospace; font-size: 8px; overflow-wrap: anywhere; }
.lease-flow-stamp { text-align: right; white-space: nowrap; font-size: 8px; }
.lease-flow-footer { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 8px; margin-top: auto; border-top: 1px solid #e2e8f0; padding-top: 4px; color: #94a3b8; font-size: 8px; }

@media print {
  #leasePrintDoc.lease-print-flow { page: haahor-lease; width: 210mm !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  #leasePrintDoc.lease-print-flow [data-flow-pages] { display: block !important; }
  #leasePrintDoc.lease-print-flow .lease-flow-page {
    width: 210mm !important; height: 297mm !important; min-height: 297mm !important;
    padding: 20mm !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; overflow: hidden !important;
    page-break-after: always !important; break-after: page !important;
  }
  #leasePrintDoc.lease-print-flow .lease-flow-page:last-child { page-break-after: auto !important; break-after: auto !important; }
}
@page haahor-lease { size: A4 portrait; margin: 0; }

/* ---- Document Cropper Touch Handles ---- */
.crop-handle {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- HaaHor Quiet Luxury workspace ---- */
@media screen {
  :root {
    --hh-ink: #25282f;
    --hh-forest: #1e2e49;
    --hh-emerald: #293e63;
    --hh-champagne: #a9a79f;
    --hh-ivory: #f5f3ef;
    --hh-line: #ddd9d1;
    --hh-muted: #737d91;
  }

  body { background: var(--hh-ivory) !important; color: var(--hh-ink); }
  .app-header {
    min-height: 68px;
    padding: 10px 20px;
    background: rgba(255,255,255,.94);
    border-color: var(--hh-line);
    box-shadow: 0 3px 16px rgba(30,41,61,.045);
  }
  .brand-mark {
    width: 42px; height: 42px; border-radius: 15px;
    background: linear-gradient(145deg, #2a4066, #1a273e) !important;
    box-shadow: inset 0 0 0 1px rgba(169,167,159,.65), 0 5px 12px rgba(33,47,70,.18);
  }
  #projectName { color: var(--hh-ink); letter-spacing: -.015em; }
  #modeSwitch {
    background: #f3f1eb;
    border: 1px solid var(--hh-line);
    border-radius: 14px;
  }
  .mode-btn { color: #69756f; transition: color .16s, background .16s, box-shadow .16s; }
  .mode-btn.active {
    color: var(--hh-forest);
    background: #fff;
    box-shadow: 0 2px 8px rgba(29,41,61,.09), inset 0 0 0 1px rgba(169,167,159,.2);
    font-weight: 700;
  }
  .account-button { border: 1px solid var(--hh-line) !important; background: #fff !important; }
  .account-button:hover { box-shadow: 0 3px 10px rgba(27,38,57,.12); }

  .app-shell { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }
  #adminTools.hidden { display: none !important; }
  .owner-nav .nav-item.hidden { display: none !important; }
  .owner-nav {
    width: 254px; flex: 0 0 254px; min-width: 0;
    display: flex; flex-direction: column; gap: 20px;
    padding: 20px 14px 13px;
    overflow-y: auto; overscroll-behavior: contain;
    background: linear-gradient(180deg, #fffefa 0%, #f9f7f1 100%);
    border-right: 1px solid var(--hh-line);
  }
  .nav-intro { display: grid; gap: 3px; padding: 0 10px 3px; }
  .nav-intro strong { color: var(--hh-ink); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
  .nav-intro > span:last-child { color: var(--hh-muted); font-size: 12px; }
  .nav-eyebrow { color: var(--hh-champagne); font-size: 9px; font-weight: 700; letter-spacing: .15em; }
  .nav-group { display: grid; gap: 5px; }
  .nav-caption { padding: 0 10px 3px; color: #929b94; font-size: 10px; font-weight: 700; letter-spacing: .07em; }
  .nav-item {
    position: relative; width: 100%; min-height: 48px;
    display: flex; align-items: center; gap: 11px;
    padding: 6px 9px; border: 1px solid transparent; border-radius: 14px;
    color: #424853; text-align: left; text-decoration: none;
    transition: background .16s, border-color .16s, transform .16s, box-shadow .16s;
  }
  .nav-item:hover, .nav-item:focus-visible {
    color: var(--hh-forest); background: #fff; border-color: #e9e2d6;
    box-shadow: 0 4px 12px rgba(27,38,57,.06); outline: none;
  }
  .nav-item:active { transform: translateY(1px); }
  .nav-icon {
    width: 36px; height: 36px; flex: 0 0 36px;
    display: grid; place-items: center; border-radius: 12px;
    background: #fff; border: 1px solid #eee8dc; font-size: 17px;
  }
  .nav-copy { min-width: 0; display: grid; gap: 1px; }
  .nav-copy b { color: inherit; font-size: 13px; font-weight: 650; line-height: 1.25; }
  .nav-copy small { color: #89938d; font-size: 10px; line-height: 1.3; }
  .nav-label-mobile { display: none; }
  .nav-item-primary {
    min-height: 56px; color: #fff; border-color: #1e2e49;
    background: linear-gradient(135deg, #2a4066, #1e2e49);
    box-shadow: 0 7px 15px rgba(33,47,70,.16);
  }
  .nav-item-primary:hover, .nav-item-primary:focus-visible {
    color: #fff; background: linear-gradient(135deg, #253859, #1a273e);
    border-color: #1a273e; box-shadow: 0 9px 18px rgba(33,47,70,.22);
  }
  .nav-item-primary .nav-icon { color: #dde3ee; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.18); font-size: 20px; }
  .nav-item-primary .nav-copy small { color: rgba(255,255,255,.72); }
  .nav-badge {
    min-width: 22px; height: 22px; margin-left: auto; padding: 0 6px;
    display: grid; place-items: center; border-radius: 999px;
    color: #fff; background: #b45309; font-size: 11px; font-weight: 700;
  }
  .nav-more { margin-top: -10px; }
  .nav-more > summary { display: none; }
  .nav-more-content { display: grid; gap: 16px; }
  .nav-footer { margin-top: auto; padding: 11px 10px 0; border-top: 1px solid var(--hh-line); color: #929b94; font-size: 9px; letter-spacing: .02em; }
  .nav-footer-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--hh-champagne); vertical-align: 1px; }

  .workspace { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; }
  #subbar {
    min-height: 54px; padding: 9px 18px; flex-wrap: wrap;
    overflow: visible; background: rgba(255,255,255,.63);
    border-bottom: 1px solid rgba(232,225,212,.8);
  }
  #subbar .chip {
    min-height: 34px; border-color: #e7e0d4; border-radius: 999px;
    background: rgba(255,255,255,.9); color: #404652;
    box-shadow: 0 1px 3px rgba(27,38,57,.035);
  }
  #subbar .chip.off { opacity: .48; }
  #subbar .chip[data-filter] { transition: transform .15s, box-shadow .15s; }
  #subbar .chip[data-filter]:hover { transform: translateY(-1px); box-shadow: 0 3px 9px rgba(27,38,57,.08); }
  #map { background: radial-gradient(ellipse at 50% 25%, #fffefa 0%, #f5f3ef 62%, #ebe5d8 100%); }
  .zoom-btn {
    width: 43px; height: 43px; display: grid; place-items: center;
    border: 1px solid rgba(220,211,194,.9); border-radius: 15px;
    background: rgba(255,255,255,.94); color: var(--hh-forest);
    box-shadow: 0 5px 15px rgba(42,52,46,.12); font-size: 20px;
    backdrop-filter: blur(8px); transition: transform .15s, box-shadow .15s;
  }
  .zoom-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(42,52,46,.16); }
  #hint { border: 1px solid rgba(232,225,212,.85); color: #69756f; box-shadow: 0 3px 10px rgba(27,38,57,.06); }

  .drawer {
    top: 12px; right: 12px; bottom: 12px;
    width: min(440px, calc(100% - 24px));
    border: 1px solid rgba(232,225,212,.95); border-radius: 22px;
    box-shadow: 0 18px 55px rgba(23,32,48,.2);
  }
  .drawer #drawerBody > .sticky { border-color: var(--hh-line); }
  .drawer #drawerTabs { background: #f7f5ef; border-color: var(--hh-line); }
  .drawer .drawer-tab {
    border-bottom-color: transparent !important; color: #77827b !important;
    background: transparent !important; font-weight: 600 !important;
  }
  .drawer .drawer-tab:hover { color: var(--hh-forest) !important; }
  .drawer .drawer-tab[class*="border-b-2"] {
    color: var(--hh-forest) !important; background: #fff !important;
    border-bottom: 2px solid var(--hh-champagne) !important;
  }
  .drawer #drawerContent { scrollbar-color: #d7cebd transparent; }
  .drawer #drawerContent .bg-slate-50 { background-color: #faf8f3 !important; }
  .drawer #drawerContent .border-slate-200,
  .drawer #drawerContent .border-slate-100 { border-color: #eae4d9 !important; }
  .drawer #drawerContent .text-teal-700 { color: var(--hh-forest) !important; }
  .drawer #drawerContent input:focus,
  .drawer #drawerContent select:focus,
  .drawer #drawerContent textarea:focus { --tw-ring-color: rgba(45,63,95,.25); }

  #planBanner:not(.hidden) { border-color: var(--hh-line); }
  .drawer-expand-button { display: none; }
}

@media screen and (max-width: 760px) {
  .app-header { min-height: 60px; gap: 8px; padding: 8px 12px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 13px; }
  #projectName { max-width: 34vw; font-size: 14px; }
  #modeSwitch { gap: 0; margin-left: auto; padding: 3px; }
  .mode-btn { padding: 6px 8px !important; font-size: 11px; white-space: nowrap; }
  .account-button img { width: 30px; height: 30px; }
  .app-shell { flex-direction: column; }
  .owner-nav {
    width: 100%; flex: 0 0 auto; display: grid;
    grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px;
    padding: 6px 10px; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--hh-line);
    background: rgba(255,254,250,.97);
  }
  .nav-intro, .nav-footer { display: none; }
  .nav-primary-group { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; }
  .nav-primary-group:has(#btnSlipInboxHeader:not(.hidden)) { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .nav-caption { display: none; }
  .nav-item {
    min-height: 42px; flex-direction: row; justify-content: center; gap: 3px;
    padding: 3px 2px; border-color: #eee8dc; border-radius: 11px;
    background: rgba(255,255,255,.82); text-align: center;
  }
  .nav-item:hover, .nav-item:focus-visible { background: #fff; }
  .nav-icon { width: 17px; height: 20px; flex: 0 0 17px; border: 0; background: transparent; font-size: 14px; }
  .nav-copy { display: block; max-width: 100%; }
  .nav-copy b { display: block; overflow: hidden; color: inherit; font-size: 10.5px; font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .nav-label-desktop { display: none; }
  .nav-label-mobile { display: inline; }
  .nav-copy small { display: none; }
  .nav-item-primary { min-height: 42px; color: #fff; border-color: #1e2e49; background: linear-gradient(135deg, #2a4066, #1e2e49); }
  .nav-item-primary .nav-icon { color: #dde3ee; background: transparent; border: 0; }
  .nav-item-primary .nav-copy b { color: #fff; }
  .nav-badge { position: absolute; top: -4px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 9px; }
  .nav-more { position: relative; z-index: 15; justify-self: end; margin: 0; }
  .nav-more > summary {
    width: 42px; min-height: 42px; display: flex; align-items: center; justify-content: center;
    padding: 4px; border: 1px solid var(--hh-line); border-radius: 11px;
    background: #f8f6f0; color: #4f5665; font-size: 10px; font-weight: 650; list-style: none;
  }
  .nav-more > summary::-webkit-details-marker { display: none; }
  .nav-more-dots { color: var(--hh-champagne); font-size: 14px; letter-spacing: 1px; line-height: 1; }
  .nav-more > summary:hover, .nav-more > summary:focus-visible { background: #fff; border-color: #bcc8db; outline: none; }
  .nav-more:not([open]) > .nav-more-content { display: none; }
  .nav-more-content {
    position: absolute; top: calc(100% + 7px); right: 0; z-index: 25;
    width: min(340px, calc(100vw - 20px)); display: grid;
    grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px;
    border: 1px solid var(--hh-line); border-radius: 16px;
    background: rgba(255,254,250,.98); box-shadow: 0 14px 35px rgba(27,38,57,.18);
  }
  .nav-more-content .nav-group { align-content: start; gap: 4px; }
  .nav-more-content .nav-caption { display: block; grid-column: auto; padding: 0 3px 2px; font-size: 8px; }
  .nav-more-content .nav-item { min-height: 42px; flex-direction: row; justify-content: flex-start; gap: 5px; padding: 4px 6px; border-radius: 10px; text-align: left; }
  .nav-more-content .nav-icon { width: 23px; height: 25px; flex: 0 0 23px; font-size: 14px; }
  .nav-more-content .nav-copy { display: block; }
  .nav-more-content .nav-copy b { font-size: 10px; text-align: left; }
  .nav-item-primary .nav-icon { color: #dde3ee; }
  #subbar { min-height: 46px; gap: 6px; padding: 7px 10px; }
  #subbar .chip { min-height: 31px; padding: 5px 9px; font-size: 11px; }
  #subbar > .text-sm { flex: 1 1 100%; font-size: 11px; }
  .map-workspace { min-height: 0; }
  .zoom-btn { width: 41px; height: 41px; border-radius: 14px; }
}

@media screen and (max-width: 640px) {
  .drawer {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; height: 85dvh; min-height: min(420px, 68dvh); max-height: 92dvh;
    overflow: hidden; z-index: 40; border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 32px rgba(15,23,42,.18);
  }
  .drawer.expanded { height: 100dvh; min-height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .drawer-grabber { touch-action: none; cursor: grab; }
  .drawer-grabber:active { cursor: grabbing; }
  .drawer-expand-button {
    width: 34px; height: 34px; display: inline-grid; place-items: center;
    border: 1px solid #e9e2d6; border-radius: 11px; color: var(--hh-forest);
    background: #faf8f3; font-size: 16px;
  }
  .drawer-expand-button:hover { background: #fff; border-color: #bcc8db; }
}

@media screen and (max-width: 380px) {
  .app-header { gap: 6px; padding-inline: 9px; }
  #projectName { max-width: 30vw; font-size: 13px; }
  .mode-btn { padding-inline: 6px !important; font-size: 10px; }
  .nav-primary-group { gap: 4px; }
  .nav-copy b { font-size: 9.5px; }
  .nav-more > summary { width: 40px; }
}



/* จอสัมผัส: ปุ่มแถบเครื่องมือแตะง่ายขึ้น (เป้าหมายขั้นต่ำ ~44px ตามแนวทางการเข้าถึง) */
@media (pointer: coarse) {
  #adminTools > button, #adminTools > a { min-height: 44px; min-width: 44px; }
  .zoom-btn { width: 44px; height: 44px; }
}