/*
Theme Name: ShareChat Native App
Author: AI Developer
Version: 65.0
Description: THE MASTER CSS - Includes Home, Suggestions, TikTok View, Profile, Friends, Chat, Competition, and Forms.
*/

/* =========================================
   1. VARIABLES & RESET (Light Mode)
   ========================================= */
:root {
    --primary: #FF3B30;     /* App Red */
    --wa-green: #25D366;    /* WhatsApp Green */
    --bg: #f2f4f7;          /* Light Gray Background */
    --card-bg: #ffffff;     /* White Card */
    --text: #000000;        /* Black Text */
    --gray: #65676b;        /* Muted Text */
    --border: #ddd;         /* Light Borders */
    
    /* Competition Colors */
    --gold: #FFD700;
    --silver: #C0C0C0;
    --bronze: #CD7F32;
    
    /* Layout Dimensions */
    --nav-height: 60px;
    --header-height: 110px; /* Search + Category Strip */
    --max-width: 600px;     /* Desktop constraint */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0; padding: 0;
    background-color: #000; /* Desktop Outer BG */
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding-bottom: var(--nav-height);
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
img, video { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; outline: none; }

/* =========================================
   2. DESKTOP LAYOUT WRAPPER
   ========================================= */
.app-layout-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    background: var(--bg);
    min-height: 100vh;
    position: relative;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.text-center { text-align: center; }

/* =========================================
   3. APP HEADER (SEARCH + CATEGORIES)
   ========================================= */
.app-header-home {
    position: fixed; 
    top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: var(--max-width);
    z-index: 999;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
}

/* Header Top Row */
.header-top {
    display: flex; align-items: center; gap: 10px; padding: 10px 15px;
}
.app-logo { font-size: 24px; display: flex; align-items: center; }
.search-form {
    flex: 1; display: flex; 
    background: #f0f2f5; border-radius: 20px; 
    padding: 8px 15px; align-items: center;
}
.search-field {
    background: transparent; border: none; 
    color: #333; width: 100%; outline: none; font-size: 14px;
}
.search-submit { background: transparent; border: none; color: #888; cursor: pointer; }

/* Category Strip */
.category-strip {
    display: flex; gap: 10px; overflow-x: auto;
    padding: 5px 15px 10px 15px;
    white-space: nowrap;
    -ms-overflow-style: none; scrollbar-width: none;
}
.category-strip::-webkit-scrollbar { display: none; }

.cat-pill {
    background: #fff; color: #333;
    padding: 8px 18px; border-radius: 20px;
    font-size: 13px; border: 1px solid #ccc;
    font-weight: 600; transition: 0.2s;
}
.cat-pill.active { background: #000; color: white; border-color: #000; }

/* =========================================
   4. HOME FEED (SHARECHAT CARDS)
   ========================================= */
.feed-container-sc {
    padding-top: var(--header-height);
}

/* The Card */
.sc-card {
    background: var(--card-bg);
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* User Header */
.sc-user-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 15px;
}
.sc-user-link { display: flex; align-items: center; gap: 10px; }
.sc-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid #eee; }
.sc-user-meta { display: flex; flex-direction: column; }
.sc-name { font-weight: 700; font-size: 14px; color: #000; display: flex; align-items: center; gap: 5px; }
.verified-badge { color: #1da1f2; font-size: 12px; }
.sc-time { font-size: 11px; color: #666; }
.sc-more-opt { color: #666; cursor: pointer; padding: 5px; }

/* Follow Button */
.follow-small { 
    background: transparent; border: 1px solid var(--primary); 
    color: var(--primary); padding: 5px 16px; border-radius: 20px; 
    font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.2s;
}
.follow-small:active { transform: scale(0.95); }

/* Caption */
.sc-caption { padding: 0 15px 10px; font-size: 14px; color: #333; line-height: 1.4; }
.sc-tags { color: #00376b; font-weight: 500; }

/* Media Wrapper */
.sc-media-wrapper {
    width: 100%;
    background: black;
    display: flex; justify-content: center; align-items: center;
    min-height: 250px; max-height: 500px;
    overflow: hidden; position: relative; cursor: pointer;
}
.sc-video-feed, .sc-image-feed {
    width: 100%; height: auto; 
    max-height: 500px; object-fit: contain; 
    display: block;
}
.play-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-size: 50px; color: rgba(255,255,255,0.9); pointer-events: none;
}

/* Volume Icon Animation */
.volume-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6); color: white;
    padding: 15px; border-radius: 50%;
    font-size: 24px; opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.volume-icon.visible { opacity: 1; }

/* Stats Row */
.sc-stats-row {
    padding: 8px 15px; font-size: 12px; color: #666;
    border-bottom: 1px solid #f0f0f0;
    display: flex; gap: 15px; font-weight: 500;
}

/* Action Bar */
.sc-action-bar {
    display: flex; justify-content: space-around; 
    padding: 10px 0; align-items: center;
}
.sc-action-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #444; font-size: 24px; cursor: pointer; 
    width: 50px; height: 50px;
}
.sc-action-btn span {
    font-size: 11px; font-weight: 600; color: #666; margin-top: 4px;
}

/* WhatsApp Icon Fix */
.wa-share { 
    color: var(--wa-green) !important;
    border: 2px solid var(--wa-green); 
    border-radius: 50%;
    width: 40px; height: 40px;
    font-size: 22px;
    display: flex; justify-content: center; align-items: center;
}
.like-trigger .fas { color: #FF3B30; }

/* =========================================
   5. HORIZONTAL SUGGESTIONS (MISSING PART RESTORED)
   ========================================= */
.suggestion-box {
    background: white; padding: 15px; margin-bottom: 10px;
    border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;
}
.suggestion-box h4 { margin: 0 0 15px 0; font-size: 14px; color: #333; font-weight: bold; }

.horizontal-scroll {
    display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px;
}
.horizontal-scroll::-webkit-scrollbar { display: none; }

.suggest-card {
    min-width: 110px; border: 1px solid #eee; border-radius: 10px;
    padding: 15px 10px; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.suggest-card img {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; border: 1px solid #ddd;
}
.suggest-card b {
    font-size: 12px; display: block; margin-bottom: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}

.suggest-reel {
    min-width: 120px; height: 200px; border-radius: 10px;
    overflow: hidden; position: relative; background: black;
}
.suggest-reel img { width: 100%; height: 100%; object-fit: cover; }
.reel-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: white; font-size: 20px; }


/* =========================================
   6. TIKTOK FULLSCREEN VIEW (SINGLE PAGE)
   ========================================= */
.tiktok-view-container {
    height: 100vh; width: 100%;
    overflow-y: scroll; scroll-snap-type: y mandatory;
    scrollbar-width: none; background: #000;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000;
}
.tiktok-view-container::-webkit-scrollbar { display: none; }

.fullscreen-reel {
    height: 100vh; width: 100%;
    scroll-snap-align: start; position: relative; background: #000;
    display: flex; justify-content: center; align-items: center;
}
.fullscreen-video { width: 100%; height: 100%; object-fit: cover; }
.fullscreen-image { width: 100%; height: 100vh; object-fit: contain; background: #000; }

/* Vertical Actions */
.vertical-actions {
    position: absolute; right: 10px; bottom: 120px;
    display: flex; flex-direction: column; gap: 25px; align-items: center; z-index: 50;
}
.v-btn { display: flex; flex-direction: column; align-items: center; color: white; cursor: pointer; text-shadow: 0 1px 2px black; }
.v-btn i { font-size: 32px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); transition: transform 0.2s; }
.v-btn:active i { transform: scale(0.8); }
.v-btn span { font-size: 12px; font-weight: bold; margin-top: 5px; }

/* Overlays */
.bottom-overlay {
    position: absolute; bottom: 20px; left: 15px; right: 80px;
    z-index: 50; text-shadow: 0 1px 2px rgba(0,0,0,0.8); pointer-events: none;
}
.bottom-overlay .username { font-weight: bold; font-size: 16px; color: white; display: block; margin-bottom: 5px; }
.bottom-overlay .desc { font-size: 14px; line-height: 1.4; color: #eee; }

.float-back { position: absolute; top: 20px; left: 20px; z-index: 2001; font-size: 24px; color: white; filter: drop-shadow(0 1px 3px black); }

.v-avatar { width: 45px; height: 45px; border-radius: 50%; border: 2px solid white; object-fit: cover; }
.plus-badge { 
    font-size: 14px; margin-top: -12px; background: red; color: white; 
    border-radius: 50%; width: 16px; height: 16px; 
    display: flex; justify-content: center; align-items: center; 
    position: relative; z-index: 2; 
}

/* =========================================
   7. PROFILE & FRIENDS LIST
   ========================================= */
.profile-page-wrapper { background: var(--bg); min-height: 100vh; padding-bottom: 80px; }

/* Cover Photo */
.cover-photo-fb {
    height: 180px; width: 100%;
    background-size: cover; background-position: center;
    background-color: #333; position: relative;
}
.back-btn-circle {
    position: absolute; top: 15px; left: 15px;
    background: rgba(0,0,0,0.6); color: white;
    width: 35px; height: 35px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; z-index: 10;
}

/* Info Section */
.profile-info-fb { padding: 0 15px; position: relative; margin-top: -50px; }

.avatar-row-fb { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 12px; }
.avatar-holder-fb {
    width: 100px; height: 100px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: #fff; overflow: hidden;
    margin-bottom: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.avatar-holder-fb img { width: 100%; height: 100%; object-fit: cover; }

.name-box-fb h2 { margin: 0; font-size: 24px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.verified-badge { color: #1da1f2; font-size: 18px; }

.stats-horizontal { display: flex; gap: 30px; margin-bottom: 20px; }
.stat-item { cursor: pointer; } 
.stat-item b { display: block; font-size: 18px; color: #000; }
.stat-item span { font-size: 13px; color: #666; }

.action-buttons-row { display: flex; gap: 10px; width: 100%; margin-bottom: 15px; }
.btn-profile {
    flex: 1; padding: 10px 0; border-radius: 6px;
    font-size: 14px; font-weight: 600; text-align: center;
    border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 5px;
}
.btn-profile.edit { background: #e4e6eb; color: #000; }
.btn-profile.follow { background: var(--fb-blue); color: white; }
.btn-profile.following { background: #262626; border: 1px solid #333; color: var(--gray); }
.btn-profile.chat { background: #e4e6eb; color: #000; border: 1px solid #ddd; }

.profile-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.grid-item-fb { aspect-ratio: 3/4; background: #eee; position: relative; overflow: hidden; }
.grid-item-fb img { width: 100%; height: 100%; object-fit: cover; }
.grid-overlay { position: absolute; bottom: 5px; left: 5px; font-size: 12px; text-shadow: 0 1px 2px black; color: white; }
.no-posts { grid-column: 1/-1; text-align: center; padding: 50px; color: var(--gray); }

/* --- Friends List UI --- */
.friends-list-container { background: white; min-height: 100vh; padding-top: 60px; }
.friend-header { 
    position: fixed; top: 0; width: 100%; max-width: var(--max-width); 
    background: white; padding: 15px; border-bottom: 1px solid #ddd; z-index: 100; 
    font-weight: bold; font-size: 18px; display: flex; align-items: center; gap: 15px; 
    left: 50%; transform: translateX(-50%);
}
.friend-item { 
    display: flex; align-items: center; padding: 15px; 
    border-bottom: 1px solid #f0f0f0; gap: 15px; cursor: pointer; 
}
.friend-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 1px solid #eee; }
.friend-info { flex: 1; }
.friend-name { font-weight: bold; font-size: 15px; color: #000; display: block; }
.friend-action { background: #f0f2f5; color: black; border: none; padding: 6px 15px; border-radius: 20px; font-size: 12px; font-weight: 600; }

/* =========================================
   8. UPLOAD & FORMS
   ========================================= */
.sc-upload-wrapper, .edit-profile-wrap { padding: 20px; padding-top: 20px; background: #fff; min-height: 100vh; }

.type-switch-row { display: flex; gap: 10px; margin-bottom: 20px; }
.type-btn {
    flex: 1; background: #f0f2f5; padding: 12px; border-radius: 8px; text-align: center;
    border: 1px solid #ccc; cursor: pointer; color: #666; transition: 0.2s;
}
.type-btn:hover { background: #333; }
.type-btn input { display: none; }
.type-btn:has(input:checked) { border-color: var(--primary); background: rgba(255, 59, 48, 0.1); }
.type-btn:has(input:checked) span { color: var(--primary); font-weight: bold; }

/* Fixed File Inputs */
.file-preview-box {
    width: 100%; height: 140px;
    background-color: #f0f2f5;
    background-size: cover; background-position: center;
    border-radius: 12px; border: 2px dashed #ccc;
    position: relative; display: flex; justify-content: center; align-items: center;
    overflow: hidden; margin-bottom: 20px;
}
.file-preview-box input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0 !important; cursor: pointer; z-index: 10;
}
.file-preview-box span {
    background: rgba(0,0,0,0.1); color: #333;
    padding: 8px 16px; border-radius: 20px; pointer-events: none;
    font-size: 14px; z-index: 5; display: flex; align-items: center; gap: 8px;
}

/* Modern Inputs */
label { color: #666; font-size: 13px; display: block; margin-bottom: 8px; font-weight: 500; }
.modern-input, .input-group input, .sc-form input {
    width: 100%; padding: 14px;
    background: #f0f2f5; border: 1px solid #ccc;
    color: #000; border-radius: 8px; margin-bottom: 20px; outline: none;
}
.input-group {
    display: flex; align-items: center;
    background: #f0f2f5; border: 1px solid #ccc;
    border-radius: 8px; margin-bottom: 15px; padding: 0 15px;
}
.input-group i { width: 30px; font-size: 20px; color: #666; }
.input-group input { border: none; margin: 0; padding: 14px 0; background: transparent; }

.save-btn {
    width: 100%; padding: 16px;
    background: var(--primary); color: white; font-weight: bold; font-size: 16px;
    border: none; border-radius: 30px; cursor: pointer; margin-top: 10px;
}
.save-btn:hover { background: #d32f2f; }

/* Avatar Edit */
.avatar-edit-row { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.avatar-preview { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid white; }
.change-photo-btn {
    position: relative; background: #e4e6eb; color: #000; 
    padding: 10px 20px; border-radius: 6px; font-size: 13px; font-weight: 600;
}
.change-photo-btn input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* =========================================
   9. COMMENTS & CHAT (FIXED UI)
   ========================================= */
.comments-container { background: white; min-height: 100vh; padding-bottom: 90px; }
.comments-section { padding: 15px; }
.comment-list-wrap { padding: 20px 15px; padding-bottom: 60px; }

.sc-comment { 
    display: flex; gap: 12px; margin-bottom: 18px; 
    align-items: flex-start;
}
.sc-comment img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.sc-comment-body { 
    background: #f0f2f5; 
    padding: 10px 15px; 
    border-radius: 18px; 
    max-width: 85%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.sc-comment b { font-size: 13px; display: block; color: #000; margin-bottom: 3px; }
.sc-comment p { margin: 0; font-size: 15px; color: #333; line-height: 1.4; }

/* Fixed Input Bar */
.comment-input-bar {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); 
    width: 100%; max-width: var(--max-width);
    background: white; padding: 12px 15px; 
    border-top: 1px solid #ddd;
    display: flex; gap: 10px; align-items: center; z-index: 2000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.comment-input-bar input {
    flex: 1; background: #f0f2f5; border: none; 
    padding: 12px 20px; border-radius: 25px; 
    color: black; outline: none; font-size: 15px;
}
.comment-submit { 
    width: 45px; height: 45px;
    background: var(--primary); color: white; border: none; 
    border-radius: 50%; display: flex; justify-content: center; align-items: center;
    font-size: 18px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* =========================================
   10. COMPETITION PAGE
   ========================================= */
.comp-header { padding: 30px 20px; text-align: center; background: #000; color: white; }
.comp-title { font-size: 22px; font-weight: bold; color: var(--gold); }
.comp-desc { font-size: 13px; color: #ccc; margin-top: 5px; }

.winners-podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; padding: 20px; background: #000; }
.winner-card { display: flex; flex-direction: column; align-items: center; position: relative; }
.winner-img { 
    width: 60px; height: 60px; border-radius: 50%; 
    border: 3px solid #333; object-fit: cover; 
    z-index: 2; margin-bottom: -10px; 
}
.rank-box { 
    width: 60px; text-align: center; font-weight: bold; 
    padding-top: 15px; border-radius: 5px 5px 0 0; color: black; 
}

.winner-1 .winner-img { width: 80px; height: 80px; border-color: var(--gold); }
.winner-1 .rank-box { height: 120px; background: linear-gradient(to top, var(--gold), #555); }
.winner-2 .winner-img { border-color: var(--silver); }
.winner-2 .rank-box { height: 80px; background: linear-gradient(to top, var(--silver), #555); }
.winner-3 .winner-img { border-color: var(--bronze); }
.winner-3 .rank-box { height: 50px; background: linear-gradient(to top, var(--bronze), #555); }

.comp-list { padding: 10px; background: #111; color: white; }
.comp-item { 
    display: flex; align-items: center; gap: 15px; padding: 15px; 
    border-bottom: 1px solid #222; 
    background: #1a1a1a; margin-bottom: 5px; border-radius: 10px;
}
.comp-rank { font-weight: bold; color: #666; font-size: 18px; width: 25px; }
.comp-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.comp-info b { display: block; font-size: 14px; color: white; }
.comp-info span { font-size: 12px; color: #888; }

/* =========================================
   11. FOOTER
   ========================================= */
.app-footer {
    position: fixed; bottom: 0; 
    left: 50%; transform: translateX(-50%);
    width: 100%; max-width: var(--max-width);
    height: var(--nav-height);
    background: #ffffff;
    border-top: 1px solid #ddd;
    display: flex; justify-content: space-around; align-items: center;
    z-index: 1000;
}
.nav-item { color: #888; font-size: 10px; display: flex; flex-direction: column; align-items: center; }
.nav-item.active { color: #000; }
.nav-item i { font-size: 28px; margin-bottom: 2px; }
.nav-upload {
    width: 45px; height: 30px;
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    border-radius: 8px; border-left: 3px solid white; border-right: 3px solid white;
    display: flex; justify-content: center; align-items: center;
}
.nav-upload i { color: white; font-size: 14px; margin: 0; }

.success-msg { background: #2ecc71; color: white; padding: 15px; text-align: center; border-radius: 8px; margin-bottom: 20px; font-weight: bold; }
.sc-form { padding: 20px; background: var(--bg); min-height: 80vh; display: flex; flex-direction: column; justify-content: center; }