/* ============================================
   PROFESSIONAL MOBILE BUTTON STANDARDS
   Apple & Google Guidelines
   ============================================ */

/* Bottom Navigation - 56-60px height */
.bottom-nav {
    height: 58px !important;
    padding: 8px !important;
}

.nav-btn {
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 12px !important;
    border-radius: 22px !important;
}

.nav-btn svg {
    width: 24px !important;
    height: 24px !important;
}

/* Header - 70px touch targets */
.header button {
    width: 70px !important;
    height: 70px !important;
    border-radius: 16px !important;
}

.header svg {
    width: 38px !important;
    height: 38px !important;
}

/* Primary Buttons - 52px */
.btn-primary,
.btn-secondary,
#sendMessageBtn,
#postUploadBtn,
#editProfileBtn,
#logoutBtn,
.action-btn {
    min-height: 52px !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
}

/* Input Fields - 48px */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    min-height: 48px !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
}

/* Search - 48px */
#searchInput {
    min-height: 48px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
}

#searchBtn {
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
}

/* Attach/Voice - 48px circle */
#attachBtn,
#voiceBtn {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
    border-radius: 50% !important;
}

/* Chat Items - 64px */
.chat-item,
.user-item,
.contact-item {
    min-height: 64px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
}

/* Tab Buttons - 48px */
#postsTabBtn,
#reelsTabBtn {
    min-height: 48px !important;
    padding: 12px 16px !important;
}

/* Menu Items - 48px */
#uploadMenu > div,
#attachMenu > div {
    min-height: 48px !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
}

/* Reel Side Icons - 48px circle */
.reel-action-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
}

.reel-action-btn svg {
    width: 26px !important;
    height: 26px !important;
}

/* Spacing - 12-16px */
button + button {
    margin-left: 12px !important;
}

.message-input {
    gap: 12px !important;
}