/**
 * Fi-Fy Mobile Overrides
 * CSS dành riêng cho native app (Capacitor Android/iOS)
 * Chỉ áp dụng khi body có class .capacitor-native
 */

/* ================================================================
   FULL SCREEN — đảm bảo app chiếm toàn bộ màn hình
   ================================================================ */
html, body {
    height: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

.capacitor-native {
    /* Safe area padding cho notch/camera hole */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* ================================================================
   TOUCH OPTIMIZATION
   ================================================================ */
.capacitor-native * {
    -webkit-tap-highlight-color: transparent;
}

.capacitor-native button,
.capacitor-native a,
.capacitor-native input,
.capacitor-native select,
.capacitor-native textarea,
.capacitor-native [role="button"],
.capacitor-native .tool-card,
.capacitor-native .accordion-trigger {
    touch-action: manipulation;
    min-height: 44px; /* iOS Human Interface Guidelines */
}

/* ================================================================
   SCROLLING — native-feel scrolling
   ================================================================ */
.capacitor-native .scrollable,
.capacitor-native .chat-messages,
.capacitor-native .modal-body,
.capacitor-native .accordion-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ================================================================
   HEADER — sticky header cho UX tốt hơn
   Status bar không overlay (setOverlaysWebView=false)
   nên KHÔNG cần padding-top thêm
   ================================================================ */
.platform-android .top-nav,
.platform-android .fify-header,
.platform-android header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* ================================================================
   BOTTOM — tránh bị che bởi navigation bar / gesture bar
   ================================================================ */
.capacitor-native footer,
.capacitor-native .bottom-bar,
.capacitor-native .chat-input-area {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ================================================================
   TEXT SELECTION — disable long-press select on non-input elements
   ================================================================ */
.capacitor-native h1,
.capacitor-native h2,
.capacitor-native h3,
.capacitor-native p,
.capacitor-native span,
.capacitor-native label {
    -webkit-user-select: none;
    user-select: none;
}

.capacitor-native input,
.capacitor-native textarea,
.capacitor-native [contenteditable="true"] {
    -webkit-user-select: auto;
    user-select: auto;
}

/* ================================================================
   ANDROID SPECIFIC
   ================================================================ */
.platform-android .btn,
.platform-android button {
    outline: none;
    -webkit-appearance: none;
}

/* ================================================================
   MODAL FIXES — full screen modals on mobile
   ================================================================ */
.capacitor-native .modal,
.capacitor-native .popup-overlay {
    padding-top: 0;
}

/* ================================================================
   RESPONSIVE — fit mọi loại màn hình
   ================================================================ */
@media screen and (max-width: 480px) {
    .capacitor-native .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Notch phones (iPhone X+, Samsung punch-hole, etc.) */
@supports (padding-top: env(safe-area-inset-top)) {
    .capacitor-native {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}