/* ===== CHARACTER COUNTER STYLING ===== */
.chat_char_counter {
    text-align: right;
    font-size: 12px;
    color: #999;
    padding: 3px 10px 0 0;
    margin-top: 2px;
    line-height: 1.2;
    transition: color 0.2s ease;
    position: relative;
    z-index: 10;
    display: block !important;
    visibility: visible !important;
}

/* Enable text wrapping in emojioneArea editor - WhatsApp style auto-grow */
.dt_msg_box .modal-content .chat_conversations .chat_container .chat_foot .chat_f_textarea .emojionearea .emojionearea-editor {
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    min-height: 40px !important;
    max-height: 200px !important;
    overflow-y: hidden !important;
    resize: none !important;
    height: auto !important;
    line-height: 1.5 !important;
}

/* Allow chat_f_write to expand for multi-line text - override fixed height */
.dt_msg_box .modal-content .chat_conversations .chat_container .chat_foot .chat_f_textarea .chat_f_write {
    min-height: 40px !important;
    height: auto !important;
    max-height: 200px !important;
    overflow: hidden !important;
}

/* Make sure emojioneArea container can expand - override fixed height */
.dt_msg_box .modal-content .chat_conversations .chat_container .chat_foot .chat_f_textarea .emojionearea {
    min-height: 40px !important;
    max-height: 200px !important;
    height: auto !important;
    overflow: hidden !important;
}

/* Override the fixed height on textarea itself */
.dt_msg_box .modal-content .chat_conversations .chat_container .chat_foot .chat_f_textarea .chat_f_write textarea {
    height: auto !important;
    min-height: 40px !important;
    max-height: 200px !important;
    overflow-y: hidden !important;
}

/* Force emojioneArea to not have fixed height - WhatsApp style */
.dt_msg_box .modal-content .chat_conversations .chat_container .chat_foot .chat_f_textarea .emojionearea,
.dt_msg_box .modal-content .chat_conversations .chat_container .chat_foot .chat_f_textarea .emojionearea .emojionearea-editor,
.dt_msg_box .modal-content .chat_conversations .chat_container .chat_foot .chat_f_textarea .chat_f_write {
    height: auto !important;
    min-height: 40px !important;
    max-height: 200px !important;
}

/* Remove any fixed line-height that might prevent expansion */
.dt_msg_box .modal-content .chat_conversations .chat_container .chat_foot .chat_f_textarea .emojionearea .emojionearea-editor {
    line-height: 1.5 !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

/* ===== TODATE – MOBILE TWEAKS ONLY ===== */
@media (max-width: 768px) {

    /* Just prevent horizontal scrolling; don't fight Materialize's grid */
    html,
    body {
        overflow-x: hidden;
    }

    /* Center the user cards and keep them within the viewport */
    .dt_home_rand_users {
        margin-left: auto;
        margin-right: auto;
    }

    .dt_home_rand_user {
        width: 100%;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px;
    }

    /* Make profile images responsive inside the cards */
    .dt_home_rand_user img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* ===== MOBILE FIXES FOR ALL ISSUES ===== */
@media (max-width: 675px) {
    
    /* FIX 1: Make hamburger menu (3 dots) visible and clickable on mobile */
    .dt_slide_menu {
        display: flex !important;
        position: relative;
        z-index: 100;
        margin: 0 15px 0 15px !important;
        padding: 10px;
        cursor: pointer;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }
    
    .dt_slide_menu svg {
        width: 24px !important;
        height: 24px !important;
        margin-top: 0 !important;
    }
    
    /* FIX 2: Hide or shorten online counter on mobile - it's too long */
    nav .header_home_link .header_online_counter {
        display: none !important;
    }
    
    /* FIX 3: Fix profile cards - prevent huge sizes and overlapping */
    .dt_home_rand_user {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px;
        padding: 0 8px;
        box-sizing: border-box;
    }
    
    /* Fix profile card containers */
    #dt_ltst_users .dt_home_rand_user,
    #latest_user .dt_home_rand_user {
        max-width: 100%;
        margin: 0 auto 20px;
        padding: 0 8px;
    }
    
    /* Fix row margins on mobile */
    .r_margin {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }
    
    /* Fix individual user card items inside rows */
    .r_margin .col {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 15px;
    }
    
    /* FIX 4: Make sure profile images don't overflow */
    .dt_home_rand_user .card,
    .dt_home_rand_user .card-image {
        width: 100%;
        max-width: 100%;
    }
    
    .dt_home_rand_user .card-image img {
        width: 100%;
        height: auto;
        max-height: 400px;
        object-fit: cover;
    }
    
    /* FIX 5: Improve header navigation spacing */
    nav .nav-wrapper {
        padding: 0 5px;
    }
    
    nav .header_logo {
        max-width: 120px !important;
        margin-right: 10px !important;
    }
    
    /* FIX 6: Ensure header items don't overlap */
    nav .valign-wrapper > div:first-child {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        min-width: 0;
        flex: 0 1 auto;
    }
    
    nav .header_home_link {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        margin-left: 0 !important;
    }
    
    /* FIX 7: Make header icons/icons-only items properly sized */
    nav .header_home_link li {
        margin: 0 3px;
    }
    
    nav .header_home_link li a {
        padding: 0 8px !important;
        min-width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* FIX 8: Fix sidebar overlay when menu is open */
    body.side_open .sidenav_overlay {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 997;
    }
    
    /* FIX 9: Ensure profile page cards are properly sized */
    .dt_user_profile_parent .col {
        width: 100% !important;
        margin-bottom: 20px;
        position: relative !important;
        top: auto !important;
    }
    
    /* Fix profile page avatar sizing on mobile */
    .to_user_media .avatar {
        max-width: 100%;
        margin: 0 auto;
    }
    
    .to_user_media .avatar > a {
        padding-top: 120% !important; /* Better aspect ratio on mobile */
    }
    
    /* FIX 10: Prevent text overflow in profile cards */
    .dt_home_rand_user h4,
    .dt_home_rand_user p {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* FIX 11: Make sure container doesn't cause horizontal scroll */
    .container {
        padding-left: 8px;
        padding-right: 8px;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* FIX 12: Improve touch targets for mobile */
    .dt_slide_menu,
    nav .header_home_link li a,
    nav .header_user > a {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* FIX 13: Move text overlay BELOW photo with white background - SIMPLE FIX */
    /* Card with white background */
    .to_small_usr {
        background-color: #ffffff !important;
        overflow: hidden !important;
        position: relative;
        border-radius: 8px;
        margin-bottom: 20px !important;
    }
    
    /* Photo container - normal size, no extra space */
    .to_small_usr .card-image {
        background-color: transparent !important;
        padding-bottom: 130% !important; /* Photo aspect ratio */
        position: relative;
        overflow: visible !important; /* Allow content below */
        height: 0;
        margin-bottom: 0 !important;
    }
    
    /* Image fills photo area */
    .to_small_usr .card-image > a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        z-index: 0;
    }
    
    .to_small_usr .card-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
    
    /* Content positioned below photo - SIMPLE positioning */
    .to_small_usr .card-content {
        position: absolute !important;
        bottom: 0 !important; /* At bottom of photo container */
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        transform: translateY(100%) !important; /* Move below photo */
        margin: 0 !important;
        padding: 12px 10px 10px !important;
        background: #ffffff !important;
        height: auto !important;
        min-height: 70px !important;
        max-height: 85px !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: flex-start !important;
        box-sizing: border-box !important;
        border-radius: 0 0 8px 8px !important;
        z-index: 10 !important;
    }
    
    /* Card adds space for content - removes white block */
    .to_small_usr {
        padding-bottom: 85px !important; /* Space for content */
        overflow: hidden !important; /* Clip at right height */
    }
    
    /* Style text for white background */
    .to_small_usr .card-content-info {
        margin-top: 0 !important;
        padding-right: 5px;
        width: 100%;
        overflow: hidden;
    }
    
    .to_small_usr .card-content-info h3 {
        font-size: 18px !important;
        max-height: 44px !important;
        margin-bottom: 4px !important;
        line-height: 22px !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        color: #333 !important; /* Dark text */
    }
    
    .to_small_usr .card-content-info h3 a {
        color: #333 !important;
    }
    
    .to_small_usr .card-content-info > div {
        font-size: 12px !important;
        padding-top: 2px !important;
        color: #666 !important;
    }
    
    /* Remove all grey backgrounds */
    .dt_home_rand_user .card,
    .dt_home_rand_user .to_small_usr {
        background-color: #ffffff !important;
        overflow: hidden !important;
    }
    
    /* Style chat icon */
    .to_small_usr .to_small_yes {
        background: linear-gradient(135deg, #e64980 0%, #ff80c6 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 2px 8px rgba(230, 73, 128, 0.3) !important;
    }
    
    .to_small_usr .to_small_yes:hover {
        background: linear-gradient(135deg, #d43a6f 0%, #e66fb3 100%) !important;
        box-shadow: 0 4px 12px rgba(230, 73, 128, 0.4) !important;
    }
    
    /* FIX 15: Fix any z-index issues with menu */
    nav {
        z-index: 999 !important;
    }
    
    /* FIX 16: Make sure sidebar appears above content when open */
    .to_sidebar {
        z-index: 998 !important;
    }
    
    /* FIX 18: Fix drawer positioning - don't slide up too far, keep profile picture visible */
    /* Adjust the transform when open to leave space at top for profile picture */
    .side_open .to_sidebar {
        transform: translateY(10px) !important; /* Don't slide all the way up - leave 10px from top */
        padding-top: 15px !important; /* Add top padding so profile picture isn't cut off */
    }
    
    /* Ensure profile picture section has proper spacing from top */
    .to_sidebar .home_usr_sct {
        margin-top: 10px !important; /* Add top margin for profile picture visibility */
        padding-top: 5px !important;
    }
    
    /* Make sure profile picture icon isn't cut off at top */
    .to_sidebar .home_usr_sct .user_popularity_icn {
        margin-top: 5px !important; /* Ensure profile picture has space */
    }
    
    /* FIX 17: Ensure header navigation doesn't wrap awkwardly */
    nav .nav-wrapper .valign-wrapper {
        flex-wrap: nowrap;
        overflow: hidden;
    }
    
    nav .header_home_link {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
    }
    
    nav .valign-wrapper > div:first-child {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* HIDE GENDER LINE ON MOBILE (last info line) */
    .to_small_usr .card-content-info > div:last-child {
        display: none !important;
    }
}