/**
 * pwa.css — ส่วนที่ทำให้ YoAI ใช้งานบนมือถือได้เหมือนแอปจริง
 * ใช้ร่วมกันทุกหน้า จึงอ้างตัวแปรธีมแบบมี fallback
 * (dashboard/brain ใช้ --surface-*, kanban/login ใช้ตัวแปรจาก style.css)
 */

/* ===== แถบเมนูล่าง (มือถือ) — ฉีดด้วย js/app-shell.js ===== */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--surface-1, #ffffff);
  border-top: 1px solid var(--border, #dadce0);
  padding-bottom: env(safe-area-inset-bottom, 0px); /* กันโดนแถบ home ของ iPhone */
  box-shadow: 0 -2px 16px rgba(16, 23, 41, .08);
}
.mobile-nav .row { display: flex; }
.mobile-nav a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 9px 4px 7px;
  min-height: 54px;                       /* นิ้วกดง่าย */
  color: var(--text-muted, #5f6368);
  font-size: 11px; font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
}
.mobile-nav a .mn-icon { font-size: 21px; line-height: 1; }
.mobile-nav a.active { color: var(--text-accent, #1a73e8); }
.mobile-nav a:active { background: var(--surface-2, #f1f3f4); }

/* ===== ป้ายชวนติดตั้งแอป ===== */
.install-banner {
  display: none;
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #dadce0);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(16, 23, 41, .18);
  padding: 12px 14px;
  gap: 12px;
  align-items: center;
  color: var(--text-primary, #202124);
}
.install-banner.show { display: flex; }
.install-banner .ib-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  display: grid; place-items: center; font-size: 20px; color: #fff;
}
.install-banner .ib-text { flex: 1; line-height: 1.35; }
.install-banner .ib-text b { font-size: 14px; display: block; }
.install-banner .ib-text span { font-size: 12px; color: var(--text-muted, #5f6368); }
.install-banner button {
  border: none; border-radius: 9px; padding: 9px 14px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--accent, #1a73e8); color: #fff;
}
.install-banner .ib-close {
  background: transparent; color: var(--text-muted, #5f6368);
  font-size: 20px; padding: 4px 6px; line-height: 1;
}

/* ===== ปรับเฉพาะจอมือถือ ===== */
@media (max-width: 860px) {
  .mobile-nav { display: block; }
  /* เว้นที่ให้เมนูล่าง ไม่ให้ทับเนื้อหาบรรทัดสุดท้าย */
  body.has-mobile-nav { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* iOS จะซูมหน้าจอเองถ้า font-size ของ input < 16px — ล็อกไว้ที่ 16px */
  input, select, textarea { font-size: 16px !important; }

  /* ปุ่ม/ลิงก์ในแถบบนให้กดง่ายขึ้น */
  .icon-btn { width: 40px; height: 40px; }

  /* กันหน้าเลื่อนซ้ายขวาบนมือถือ */
  html, body { overflow-x: hidden; }
}

/* ===== โหมดติดตั้งเป็นแอป (standalone) ===== */
@media (display-mode: standalone) {
  /* เผื่อพื้นที่ notch/status bar ของ iPhone */
  .topbar { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  /* ในแอปจริงไม่ต้องเลือกข้อความไปมา ให้รู้สึกเป็นแอปมากขึ้น */
  .mobile-nav a, .topbar, .kpi, .agent-card { -webkit-user-select: none; user-select: none; }
}

/* ===== Kanban บนมือถือ: ลากวางไม่ได้ ต้องบอกวิธีใช้ ===== */
@media (max-width: 860px) {
  .task { cursor: pointer; }
  .kanban-hint { display: block !important; }
}
.kanban-hint { display: none; }