/* ============================================================
   mobile-kit.css — Thai PW Hub · ชั้นResponsive กลาง (ใช้ร่วมทุกแอป)
   โหลดหลัง CSS อื่นทุกไฟล์ · มีผลเฉพาะ ≤ 640px · ไม่แตะ @media print
   Token: --mk-tap 44px · เนื้อหา ≥14px · คำกำกับ ≥12px
   ============================================================ */

:root {
  --mk-tap: 44px;
  --mk-text: 14px;
  --mk-caption: 12px;
  --mk-bar-h: calc(62px + env(safe-area-inset-bottom, 0px));
  --mk-radius: 16px;
  --mk-bg: rgba(255, 255, 255, 0.94);
  --mk-line: rgba(131, 24, 67, 0.14);
  --mk-wine: #831843;
  --mk-crimson: #BE123C;
  --mk-muted: #5B2A35;
}

/* องค์ประกอบที่เกิดเฉพาะมือถือ — ซ่อนบนเดสก์ท็อป */
@media (min-width: 641px) {
  .mk-bottomnav,
  .mk-searchbar,
  .mk-drawer-btn,
  .mk-drawer-backdrop,
  .mk-actionbar { display: none !important; }
}

@media (max-width: 640px) {

  /* ---------- พื้นฐาน ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body {
    font-size: var(--mk-text);
    padding-bottom: calc(var(--mk-bar-h) + 8px);
  }
  body.mk-no-nav { padding-bottom: 0; }

  /* เนื้อหาต้องไม่หลุดขอบ: ทุกบล็อกยอมหด ไม่ดันหน้าจอ */
  img, video, iframe, svg, canvas { max-width: 100%; }
  .mk-contain, .card, .panel, .panel-section, .control-panel, .preview-pane,
  .workspace-main, .app-container { max-width: 100%; min-width: 0; }

  /* ฟอนต์พื้นต่ำสุดเพื่อการอ่าน */
  small, .text-xs, .caption, .hint, figcaption { font-size: var(--mk-caption) !important; }
  body, p, li, td, th, input, select, textarea, button { font-size: max(14px, 1em); }

  /* ---------- ขนาดสัมผัสขั้นต่ำ 44px ---------- */
  button, a.btn, [role="button"], input[type="button"], input[type="submit"],
  select, .card-launch-btn, .card-ext-btn, .icon-btn, .chip, .tab,
  .main-tab-item, .sub-tab, .pill, .jump-pill {
    min-height: var(--mk-tap);
  }
  button, [role="button"], .icon-btn { touch-action: manipulation; }
  .icon-btn, .app-ctrl-btn { min-width: var(--mk-tap); }
  .app-ctrl-btn { width: var(--mk-tap) !important; height: var(--mk-tap) !important; }

  /* ---------- แถบเลื่อนแนวนอน (แท็บ/ชิป) : เลื่อนได้ + มีเงาบอกขอบ ---------- */
  .mk-scroll-x,
  .chips, .tabs, .main-tabs, .nav-tabs, .category-chips, .jump-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  }
  .mk-scroll-x > *, .tabs > *, .main-tabs > *, .nav-tabs > *, .category-chips > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .mk-scroll-x::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }

  /* ---------- ตารางกว้าง: เลื่อนเฉพาะตาราง ไม่ลากทั้งหน้า ---------- */
  .mk-table-wrap, table { display: block; max-width: 100%; overflow-x: auto; }
  .mk-table-wrap > table { display: table; }

  /* ---------- แถบปุ่มทำงาน ติดท้ายจอ ---------- */
  .mk-actionbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 8000;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--mk-bg);
    border-top: 1px solid var(--mk-line);
    box-shadow: 0 -10px 24px -18px rgba(77, 10, 32, 0.55);
    backdrop-filter: blur(14px);
  }
  .mk-actionbar .btn-primary,
  .mk-actionbar .primary-btn { flex: 1; min-height: 48px; }
  .mk-actionbar .btn-ghost { min-height: 48px; padding: 0 14px; }

  /* ---------- Bottom navigation (Hub) ---------- */
  .mk-bottomnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 8100;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--mk-bg);
    border-top: 1px solid var(--mk-line);
    box-shadow: 0 -12px 28px -20px rgba(77, 10, 32, 0.6);
    backdrop-filter: blur(16px);
  }
  .mk-bottomnav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--mk-muted);
    line-height: 1;
  }
  .mk-bottomnav button i { font-size: 19px; font-style: normal; line-height: 1; }
  .mk-bottomnav button.is-active { color: var(--mk-crimson); background: rgba(190, 18, 60, 0.09); }

  /* ---------- ช่องค้นหามือถือ (proxy ไปยัง #searchInput เดิม) ---------- */
  .mk-searchbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0 14px;
    min-height: 46px;
    border-radius: var(--mk-radius);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--mk-line);
    box-shadow: inset 0 1px 2px rgba(77, 10, 32, 0.05);
  }
  .mk-searchbar span { font-size: 15px; opacity: 0.7; }
  .mk-searchbar input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--mk-text);
    color: var(--mk-muted);
    outline: none;
    min-height: var(--mk-tap);
  }

  /* ---------- Sidebar → Drawer ---------- */
  .mk-drawer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mk-tap);
    height: var(--mk-tap);
    border-radius: 13px;
    border: 1px solid var(--mk-line);
    background: rgba(255, 255, 255, 0.9);
    color: var(--mk-wine);
    font-size: 18px;
    flex: 0 0 auto;
  }
  .left-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    bottom: 0;
    width: min(86vw, 340px);
    max-height: 100%;
    overflow-y: auto;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(170deg, #FFF9F6 0%, #FBEDEA 100%);
    background-color: #FFF9F6;
    border-right: 1px solid var(--mk-line);
    box-shadow: 18px 0 40px -24px rgba(77, 10, 32, 0.6);
    transform: translateX(-104%);
    transition: transform 0.24s ease;
    z-index: 9200 !important;
    border-radius: 0;
  }
  body.mk-drawer-open .left-sidebar { transform: none; }
  .mk-drawer-close {
    position: absolute;
    top: 10px; right: 10px;
    width: var(--mk-tap); height: var(--mk-tap);
    display: grid; place-items: center;
    border-radius: 13px;
    border: 1px solid var(--mk-line);
    background: rgba(255, 255, 255, 0.95);
    color: var(--mk-wine);
    font-size: 17px;
    z-index: 2;
  }
  .mk-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: rgba(45, 8, 16, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
  }
  body.mk-drawer-open .mk-drawer-backdrop { opacity: 1; pointer-events: auto; }

  /* ---------- หน้า A4: ย่อพอดีจอ ---------- */
  .mk-sheet {
    transform: scale(var(--mk-scale, 0.45));
    transform-origin: top center;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---------- Hub: ระยะขอบ/การ์ด ---------- */
  .app-container { padding: 12px 12px 0 !important; }
  /* header มือถือ: แถวเดียวเสมอ (main.css ตั้งเป็น column ที่ 768px ทำให้สูง 166px) */
  .super-header {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 18px !important;
  }
  .brand-section { flex: 1 1 auto; min-width: 0; }
  .brand-text h1 { font-size: 1rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-sub { display: none !important; }
  .header-portal-actions { margin-left: auto !important; gap: 6px !important; flex: 0 0 auto; }
  .hero-banner { padding: 16px !important; }
  .hero-title { font-size: 1.35rem !important; }
  .apps-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .app-card { padding: 14px !important; }
  .card-launch-btn, .card-ext-btn, .card-pin-btn { min-height: var(--mk-tap) !important; }
  .card-ext-btn, .card-pin-btn { width: var(--mk-tap) !important; min-width: var(--mk-tap) !important; }
  .brand-badge { font-size: var(--mk-caption) !important; }
  /* ป้ายสถานะระบบไม่จำเป็นบนมือถือ (กินที่ + ตัวอักษรเล็ก) */
  .typesafe-status-pill, .typesafe-label, .gemini-pill { display: none !important; }
  .app-badge, .mode-badge, .tag-pill { font-size: var(--mk-caption) !important; }

  /* Runner ภายใน iframe: เต็มพื้นที่ ใช้ความสูงจริงของจอ */
  .app-runner-overlay { border-radius: 0 !important; }
  .runner-viewport { min-height: 0; }
  .runner-header-pill { max-width: 60vw; }
  .runner-url-badge, .typesafe-status-pill { display: none !important; }

  /* กันปุ่มลอย/ป้ายของแอปเดิมทับ bottom nav */
  .mk-bottomnav ~ .mk-floating, .mk-hide-mobile { display: none !important; }

  /* ขณะเปิดแอปใน Runner: ให้พื้นที่เต็มจอ (ปุ่มของแอปเองอยู่ด้านล่าง) */
  body.has-running-app .mk-bottomnav { display: none !important; }
  body.has-running-app { padding-bottom: 0 !important; }

  /* Runner: ย่อ header ให้เหลือแถบเตี้ย ๆ คืนพื้นที่ให้แอป */
  body.has-running-app .mk-searchbar,
  body.has-running-app .brand-text,
  body.has-running-app .brand-badge { display: none !important; }
  body.has-running-app .super-header { padding: 8px 10px !important; gap: 8px !important; }
  body.has-running-app .school-logo-wrap { width: 34px !important; height: 34px !important; }
  body.has-running-app .runner-header-pill { max-width: 52vw !important; }
}

/* ---------- หน้าจอที่ซ่อน bottom nav (เช่น ระหว่าง login gate) ---------- */
body.mk-gated .mk-bottomnav,
body.mk-gated .mk-actionbar { display: none !important; }

/* ---------- print: ห้ามเปลี่ยนสัญญาเดิม ---------- */
@media print {
  .mk-bottomnav, .mk-actionbar, .mk-searchbar, .mk-drawer-btn, .mk-drawer-backdrop { display: none !important; }
  body { padding-bottom: 0 !important; }
}