/* ═══════════════════════════════════════════════════════════
   MOBILE.CSS — Responsive improvements & touch UI
   ═══════════════════════════════════════════════════════════ */

/* ── Swipe hint on mobile ─────────────────────────────────── */
@media(max-width:768px){
  /* Make header compact */
  .hdr{height:46px;padding:0 10px;gap:6px}
  .hdr-logo{font-size:9px}
  .hdr-ind{font-size:9px}
  .hbtn{width:30px;height:30px;font-size:13px}

  /* Status bar hidden on very small */
  .sbar{font-size:8px;padding:0 8px;gap:8px}
  .sbrand{display:none}

  /* Office grid full width on mobile */
  .office-grid{min-width:0;width:100%}
  .office-scroll{padding:10px 8px}
  .dzone{padding:12px 8px 8px}
  .desks{gap:7px}

  /* Bigger touch target for desk cards */
  .desk{width:108px;padding:9px 6px;touch-action:manipulation}
  .desk:hover{transform:none} /* disable hover lift on touch */
  .desk:active{transform:scale(.97)}

  /* Bottom sheet style for detail panel */
  .det{
    left:0;right:0;bottom:52px;border-radius:14px 14px 0 0;
    border-top:2px solid var(--purple);padding:12px 14px;
  }

  /* Person panel full screen on mobile */
  .person-panel{
    top:46px;bottom:52px;width:100%;left:0;border-left:none;
    border-top:2px solid var(--purple);border-radius:0;
  }

  /* Room view full screen */
  .room-view{left:0!important}
  .room-hdr{height:auto;padding:8px 10px;flex-wrap:wrap;gap:6px}
  .room-legend{display:none} /* hide on very small screens */
  .room-title{font-size:8px}
  .room-click-hint{font-size:8px;padding:3px 10px}

  /* Notification center */
  .notif-center{right:4px;width:calc(100vw - 8px);max-width:360px}

  /* Chat panel */
  .rsb{height:72vh}
  .chat-hdr{height:42px;padding:0 10px}
  .chat-hdr-title{font-size:8px}
  .ctab{font-size:9px;padding:6px 3px}
  .chat-msgs{padding:8px}
  .cinp{font-size:13px!important}
  .mtxt{font-size:12px}
  .mav{width:26px;height:26px;font-size:13px}

  /* Mobile nav bigger touch area */
  .mnav{height:56px}
  .mbtn{padding:4px 10px}
  .mico{font-size:20px}
}

/* ── Tablet adjustments ──────────────────────────────────── */
@media(min-width:769px) and (max-width:1024px){
  .lsb{width:160px}
  .rsb{width:260px}
  .desk{width:110px}
  .person-panel{width:320px}
}

/* ── Touch events helper class ───────────────────────────── */
.touch-scroll{-webkit-overflow-scrolling:touch;overflow-y:auto}

/* ── PWA safe area padding (iPhone notch) ────────────────── */
@supports(padding:env(safe-area-inset-bottom)){
  .mnav{padding-bottom:env(safe-area-inset-bottom)}
  .sbar{padding-bottom:env(safe-area-inset-bottom)}
}

/* ── Swipe indicator on panels ───────────────────────────── */
.swipe-handle{
  width:36px;height:4px;background:var(--bdr2);
  border-radius:2px;margin:0 auto 8px;
  display:none;
}
@media(max-width:768px){
  .swipe-handle{display:block}
  .rsb::before,.person-panel::before{
    content:'';display:block;
    width:36px;height:4px;background:var(--bdr2);
    border-radius:2px;margin:8px auto 0;
  }
}

/* ── Better tap highlight ────────────────────────────────── */
button,
.desk,.di,.ctab,.pp-tab,.task-btn,.kbtn{
  -webkit-tap-highlight-color:transparent;
}

/* ── Room canvas on mobile — disable text selection ─────── */
#roomCanvas{
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}

/* ── Pinch/zoom hint for room on mobile ─────────────────── */
@media(max-width:768px){
  .room-canvas-wrap::after{
    content:'👆 Tap โต๊ะ / ຄລິກໂຕະ';
    position:absolute;bottom:8px;right:10px;
    background:rgba(0,0,0,.6);border:1px solid var(--bdr);
    color:var(--txt2);font-size:8px;padding:3px 8px;
    border-radius:8px;pointer-events:none;
  }
}

/* ── Input font size prevent iOS zoom ────────────────────── */
input,textarea,select{font-size:16px!important}
@media(min-width:769px){
  input,textarea,select{font-size:inherit!important}
}

/* ── Mobile-friendly keypad ─────────────────────────────── */
@media(max-width:400px){
  .ls-card{padding:20px 16px}
  .ls-keypad{max-width:200px}
  .kbtn{height:44px;font-size:16px}
  .ls-pin-display{gap:10px}
  .pin-dot{width:16px;height:16px}
}