/* ==========================================
   Wap2Chat / BlingyWap - Final Master CSS
   Includes: Desktop Split Layout, Dark Mode, Feed, Reels, Chat
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --insta-blue: #0095f6;
    --insta-bg: #fafafa;
    --insta-border: #dbdbdb;
    --insta-text: #262626;
    --dark-bg: #000000;
    --dark-card: #121212;
    --dark-border: #262626;
    --insta-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }

body { background-color: var(--insta-bg); color: var(--insta-text); min-height: 100vh; }
body.dark-theme { background-color: var(--dark-bg); color: #f5f5f5; }
a { text-decoration: none; color: inherit; }

/* ==========================================
   1. Authentic Instagram Login/Register 
      (Mobile + Desktop Split Layout)
   ========================================== */
.auth-wrapper { 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    min-height: 100vh; padding: 20px; 
}

/* Desktop Split Container */
.desktop-container {
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; width: 100%; max-width: 930px; margin: 0 auto;
    padding: 20px; gap: 40px;
}

/* Left Side (Hidden on mobile, visible on desktop) */
.desktop-left { display: none; }

@media (min-width: 875px) {
    .desktop-left {
        display: flex; flex-direction: column; align-items: center;
        width: 100%; max-width: 450px;
    }
    .desktop-left h1 {
        font-size: 32px; line-height: 40px; font-weight: 400;
        text-align: center; margin-bottom: 20px;
    }
    .highlight-text { font-weight: 600; background: var(--insta-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .desktop-left img { width: 100%; max-width: 380px; }
}

/* Right Side / Mobile Center Box */
.desktop-right { width: 100%; max-width: 350px; display: flex; flex-direction: column; align-items: center; }

.insta-box { 
    background: #fff; border: 1px solid var(--insta-border); border-radius: 1px; 
    width: 100%; max-width: 350px; padding: 40px 30px 20px 30px; text-align: center; margin-bottom: 10px;
}
body.dark-theme .insta-box { background: var(--dark-bg); border: 1px solid var(--dark-border); }

.brand-logo { font-size: 32px; font-family: 'Instagram Sans', cursive; font-weight: 700; margin-bottom: 30px; }

.insta-input { 
    width: 100%; padding: 10px 8px; background: #fafafa; border: 1px solid var(--insta-border); 
    border-radius: 4px; margin-bottom: 6px; outline: none; font-size: 12px;
}
.insta-input:focus { border-color: #a8a8a8; }
body.dark-theme .insta-input { background: var(--dark-card); border: 1px solid var(--dark-border); color: #fff; }

.insta-btn { 
    width: 100%; padding: 8px; background: var(--insta-blue); color: #fff; 
    border: none; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 10px; transition: 0.3s; 
}
.insta-btn:hover { background-color: #1877f2; }

.sub-box { 
    background: #fff; border: 1px solid var(--insta-border); border-radius: 1px; 
    width: 100%; max-width: 350px; padding: 20px; text-align: center; font-size: 14px; 
}
body.dark-theme .sub-box { background: var(--dark-bg); border: 1px solid var(--dark-border); }
.sub-box a { color: var(--insta-blue); font-weight: 600; }

.alert { padding: 10px; border-radius: 4px; font-size: 13px; margin-bottom: 15px; }
.alert-error { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }

/* ==========================================
   2. Reels System (Vertical Swipe)
   ========================================== */
.reels-container { height: 100vh; width: 100%; scroll-snap-type: y mandatory; overflow-y: scroll; background: #000; }
.reels-container::-webkit-scrollbar { display: none; }
.reel-video { height: 100vh; width: 100%; scroll-snap-align: start; position: relative; display: flex; align-items: center; justify-content: center; }
.reel-video video { height: 100%; width: 100%; object-fit: cover; }

.reel-ui { position: absolute; bottom: 80px; right: 15px; display: flex; flex-direction: column; align-items: center; gap: 20px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); }
.reel-action { display: flex; flex-direction: column; align-items: center; font-size: 12px; font-weight: 600; }
.reel-icon { font-size: 28px; cursor: pointer; transition: 0.2s; }
.reel-icon:active { transform: scale(1.2); }

/* ==========================================
   3. Instagram Feed / Grid View
   ========================================== */
.feed-container { max-width: 600px; margin: 0 auto; padding-bottom: 80px; }
.post-card { background: #fff; border: 1px solid var(--insta-border); margin-bottom: 15px; border-radius: 4px; overflow: hidden; }
body.dark-theme .post-card { background: var(--dark-card); border: 1px solid var(--dark-border); }

/* Profile Grid */
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 100%; }
.grid-item { aspect-ratio: 1/1; background: #eee; overflow: hidden; position: relative; cursor: pointer; }
body.dark-theme .grid-item { background: #262626; }
.grid-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.grid-item:hover img { transform: scale(1.05); }

/* ==========================================
   4. Mobile Bottom Navigation
   ========================================== */
.bottom-nav { 
    position: fixed; bottom: 0; width: 100%; max-width: 600px; left: 50%; transform: translateX(-50%);
    height: 50px; background: #fff; border-top: 1px solid var(--insta-border); 
    display: flex; justify-content: space-around; align-items: center; z-index: 1000; 
}
body.dark-theme .bottom-nav { background: #000; border-top: 1px solid var(--dark-border); }
.nav-item { font-size: 24px; color: var(--insta-text); cursor: pointer; transition: 0.2s; }
body.dark-theme .nav-item { color: #fff; }
.nav-item:active { transform: scale(0.9); }

/* ==========================================
   5. Chat & Inbox
   ========================================== */
.chat-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 15px; }
.message-bubble { max-width: 75%; padding: 10px 15px; margin-bottom: 10px; font-size: 15px; line-height: 1.4; word-wrap: break-word; }
.msg-sent { align-self: flex-end; background: var(--insta-blue); color: #fff; border-radius: 18px 18px 4px 18px; }
.msg-received { align-self: flex-start; background: #efefef; color: var(--insta-text); border-radius: 18px 18px 18px 4px; border: 1px solid var(--insta-border); }
body.dark-theme .msg-received { background: #262626; color: #fff; border: 1px solid var(--dark-border); }