/* ================================================================
   mobile.css — Tối ưu toàn diện cho mọi kích thước màn hình di động
   VVS1 - Mạng xã hội Đồng Hồ
   ================================================================ */

/* ── Safe Area cho iPhone có Notch / Dynamic Island ── */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* Body padding bottom để content không bị ẩn sau home bar iOS */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    padding-bottom: var(--safe-bottom);
    /* Ngăn tràn ngang trên tất cả thiết bị */
    overflow-x: hidden !important;
}

/* Navbar tránh che bởi notch/Dynamic Island khi standalone mode */
@supports (padding-top: env(safe-area-inset-top)) {
    .custom-navbar {
        padding-top: env(safe-area-inset-top, 0px) !important;
    }
}

/* ================================================================
   GLOBAL MOBILE BASE (≤ 767px)
   ================================================================ */
@media (max-width: 767.98px) {

    /* Font size cơ bản */
    body {
        font-size: 15px;
    }

    h1 {
        font-size: 1.4rem !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    h3 {
        font-size: 1.1rem !important;
    }

    h4,
    h5 {
        font-size: 1rem !important;
    }

    /* Container full-width trên mobile */
    .container,
    .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Post cards sát mép */
    .glass-card,
    .fb-card {
        border-radius: 10px !important;
        margin-bottom: 8px !important;
        padding: 10px !important;
        /* Đảm bảo không tràn ra ngoài */
        overflow-x: hidden !important;
        word-wrap: break-word !important;
    }

    .glass-card:has(.dropdown-menu.show, .profile-search-dropdown),
    .fb-card:has(.dropdown-menu.show, .profile-search-dropdown) {
        overflow: visible !important;
    }

    /* Row không có gutter thừa */
    .row {
        --bs-gutter-x: 0.5rem;
    }

    /* Post cards */
    .card-body {
        padding: 12px !important;
    }

    /* Buttons touch-friendly min 44px */
    /* .btn {
        min-height: 40px;
        padding-top: 5px;
        padding-bottom: 5px;
    } */

    /* Inputs touch-friendly */
    .form-control,
    .form-select {
        font-size: 16px !important;
        /* Ngăn iOS zoom khi focus input */
        min-height: 44px;
        padding: 10px 14px !important;
    }

    textarea.form-control {
        min-height: 80px;
    }

    /* Modal full-width trên mobile */
    .modal-dialog {
        margin: 60px auto 20px auto !important;
        max-width: 92% !important;
        min-height: auto !important;
        display: flex !important;
        align-items: flex-start !important;
    }

    .modal-content {
        border-radius: 16px !important;
        padding-bottom: 0 !important;
        margin-left: 0 !important;
    }

    /* Table scroll ngang */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Badges nhỏ hơn */
    .badge {
        font-size: 0.7rem !important;
    }

    /* Dropdown menu full-width */
    .dropdown-menu {
        min-width: 200px !important;
    }

    /* Post image collage trên mobile */
    .fb-image-collage.collage-2,
    .fb-image-collage.collage-3,
    .fb-image-collage.collage-5 {
        height: 200px !important;
    }

    /* Post action buttons text nhỏ hơn */
    .fb-post-action-btn {
        font-size: 0.78rem !important;
        gap: 4px !important;
        height: 40px !important;
    }

    /* Feed main layout */
    .fb-main-container {
        padding-top: 8px !important;
        gap: 0 !important;
    }

    /* Fix pin-popup-panel mobile size/overflow */
    .pin-popup-panel {
        left: auto !important;
        right: 0 !important;
        width: 280px !important;
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box !important;
    }
}

/* ================================================================
   SMALL PHONES (≤ 430px) — iPhone 14 Pro Max, Samsung S23+
   ================================================================ */
@media (max-width: 430px) {

    .fb-image-collage.collage-2,
    .fb-image-collage.collage-3,
    .fb-image-collage.collage-5 {
        height: 180px !important;
    }

    /* Card tiêu đề */
    .card-title,
    .fw-bold {
        font-size: 0.95rem !important;
    }

    /* Post content text */
    .post-content {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    /* Giá và badge */
    .price-tag {
        font-size: 1rem !important;
    }
}

/* ================================================================
   VERY SMALL PHONES (≤ 360px) — iPhone SE, older Androids
   ================================================================ */
@media (max-width: 360px) {
    body {
        font-size: 14px;
    }

    .container,
    .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .card-body {
        padding: 10px !important;
    }

    .btn-sm {
        font-size: 0.75rem !important;
        padding: 5px 8px !important;
    }

    .fb-image-collage.collage-2,
    .fb-image-collage.collage-3,
    .fb-image-collage.collage-5 {
        height: 160px !important;
    }
}

/* ================================================================
   CHAT PAGE — Mobile Messenger UI
   ================================================================ */
@media (max-width: 767.98px) {

    /* Full-screen chat */
    .messenger-container {
        height: calc(100vh - 60px - var(--safe-bottom)) !important;
        border-radius: 0 !important;
        border: none !important;
    }

    /* Sidebar ẩn khi đang chat */
    .messenger-sidebar {
        width: 100% !important;
        border-right: none !important;
    }

    /* Chat area full-screen */
    .messenger-chat-area {
        position: fixed !important;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
    }

    /* Message bubble rộng hơn trên mobile */
    .message-bubble {
        max-width: 80% !important;
        font-size: 0.92rem !important;
    }

    /* Input area với padding safe area */
    .messenger-input-area {
        padding-bottom: max(12px, var(--safe-bottom)) !important;
    }

    /* Tối ưu hóa kích thước nút gửi và các nút chức năng trong chat trên mobile */
    .ct-input-bar {
        gap: 6px !important;
        padding: 4px 6px 4px 10px !important;
    }

    .ct-input-bar .icon-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.05rem !important;
        align-self: center !important;
    }

    .ct-input-bar .icon-btn.send {
        width: auto !important;
        height: 30px !important;
        padding: 0 10px !important;
        border-radius: 15px !important;
        font-size: 0.78rem !important;
        font-weight: bold !important;
        align-self: center !important;
    }

    .ct-input {
        font-size: 16px !important;
    }
}

/* ================================================================
   PROFILE PAGE — Mobile
   ================================================================ */
@media (max-width: 991.98px) {
    .fb-profile-avatar-container {
        padding: 0 16px !important;
        margin-top: -70px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        align-items: flex-end !important;
    }

    .fb-profile-avatar-container .profile-avatar-wrapper {
        width: 140px !important;
        height: 140px !important;
        order: 1 !important;
    }

    .fb-profile-avatar-container .fb-profile-avatar-img {
        width: 140px !important;
        height: 140px !important;
    }

    /* Hiển thị QC TOP trên mobile nằm bên phải avatar, chiếm trọn phần còn lại */
    .fb-profile-avatar-container .profile-ad-top-slot {
        display: flex !important;
        order: 2 !important;
        flex: 1 1 auto !important;
        width: calc(100% - 165px) !important;
        height: 140px !important;
        margin-left: 12px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 8px !important;
    }

    .fb-profile-info {
        order: 3 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 12px !important;
        padding-bottom: 8px !important;
    }

    .fb-profile-name {
        font-size: 1.3rem !important;
    }
}

/* ================================================================
   ADMIN PAGES — Mobile Table
   ================================================================ */
@media (max-width: 767.98px) {

    /* Admin table responsive */
    .admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table-wrap table {
        min-width: 600px;
    }
}

/* ================================================================
   NOTIFICATION DROPDOWN — Mobile
   ================================================================ */
@media (max-width: 575.98px) {

    .notif-dropdown-menu,
    #notifDropdownMenu {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        right: 10px !important;
        left: auto !important;
    }
}

/* ================================================================
   FCM TOAST — Mobile (full width với spacing)
   ================================================================ */
@media (max-width: 575.98px) {
    #fcm-toast-container {
        top: 64px !important;
        right: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: none !important;
    }
}

/* PWA margin class */
.pwa-mt-3 {
    margin-top: 0 !important;
}

/* ================================================================
   STANDALONE / PWA MODE (khi mở từ home screen)
   ================================================================ */
@media (display-mode: standalone) {
    .pwa-mt-3 {
        margin-top: 0 !important;
    }

    /* Thêm padding top khi dùng như app (không có browser bar) */
    .custom-navbar {
        padding-top: env(safe-area-inset-top, 0px) !important;
    }

    /* Phóng to và căn chỉnh lại các nút trên thanh header ở chế độ app */
    .custom-navbar .btn-fb-secondary,
    .custom-navbar a.btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.15rem !important;
    }

    /* Tối ưu hóa ô chat và nút gửi trong chế độ app standalone */
    .ct-input-bar {
        gap: 8px !important;
        padding: 6px 8px 6px 14px !important;
    }

    .ct-input-bar .icon-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.05rem !important;
        align-self: center !important;
    }

    .ct-input-bar .icon-btn.send {
        width: auto !important;
        height: 30px !important;
        padding: 0 10px !important;
        border-radius: 15px !important;
        font-size: 0.78rem !important;
        font-weight: bold !important;
        align-self: center !important;
    }

    .ct-input {
        font-size: 16px !important;
    }

    /* Ẩn một số element web-only khi ở app mode */
    .pwa-hide {
        display: none !important;
    }

    /* Hiện element chỉ khi ở app mode */
    .pwa-show {
        display: block !important;
    }
}

/* ================================================================
   TOUCH IMPROVEMENTS — toàn bộ thiết bị cảm ứng
   ================================================================ */
@media (hover: none) and (pointer: coarse) {

    /* Tắt hover effect trên touch device để tránh stuck hover */
    .glass-card:hover,
    .fb-card:hover {
        transform: none !important;
        box-shadow: var(--card-shadow) !important;
    }

    /* Vùng bấm lớn hơn cho link */
    a,
    button {
        -webkit-tap-highlight-color: transparent;
    }

    /* Scroll mượt hơn */
    * {
        -webkit-overflow-scrolling: touch;
    }

    /* Input font-size tối thiểu 16px để iOS không zoom */
    input,
    select,
    textarea {
        font-size: max(16px, 1rem) !important;
    }
}

/* ================================================================
   LANDSCAPE MODE — xoay ngang trên mobile
   ================================================================ */
@media (max-width: 767.98px) and (orientation: landscape) {
    .custom-navbar {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .messenger-container {
        height: calc(100vh - 52px) !important;
    }

    /* Ảnh nhỏ hơn trong landscape */
    .fb-image-collage.collage-1 .collage-img-wrapper,
    .fb-image-collage.collage-1 .collage-img-wrapper img {
        max-height: 250px !important;
    }
}

/* ================================================================
   PRINT — Ẩn UI elements khi in
   ================================================================ */
@media print {

    .custom-navbar,
    .fb-left-sidebar,
    .fb-right-sidebar,
    #fcm-toast-container,
    #fcmEnableBtn {
        display: none !important;
    }
}