:root {
    --header-bg: #005c97;
    --accent-blue: #34B7F1;

    /* Sent messages: The purple gradient you liked */
    --message-out-bg: linear-gradient(to right, #2469ff, #7f19fe);

    /* Received messages: New dark/light blue gradient */
    --message-in-bg: linear-gradient(to right, #2a6fdb, #7bb4f3);

    --app-bg: #f0f2f5;
    --border-color: #e9edef;
    --button-color: #008069;
    --call-end-red: #e91e63;
    --text-primary: #111b21;
    --text-secondary: #667781;
    --online-color: #25D366;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    
    /* --- टेक्स्ट सिलेक्शन बंद करने के लिए यह जोड़ें --- */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard */
    -moz-user-select: none; /* Firefox */
}
html, body { height: 100%; width: 100%; overflow: hidden; background-color: #d1d7db; display: flex; justify-content: center; align-items: center; }
#app-container { width: 100%; height: 100%; max-width: 450px; max-height: 950px; background-color: var(--app-bg); display: flex; flex-direction: column; overflow: hidden; position: relative; border-radius: 8px; box-shadow: 0 4px 12px rgba(17, 27, 33, 0.15); }
.hidden { display: none !important; }
.view { width: 100%; height: 100%; display: flex; flex-direction: column; }

/* --- [NEW] Modern Login Screen --- */
#login-view {
    justify-content: center;
    align-items: center;
    padding: 2rem;
    /* Modern Gradient Background */
    background: linear-gradient(135deg, #005c97 0%, #363795 100%);
    color: white;
}

.login-card {
    background: rgba(255, 255, 255, 0.05); /* Lighter for more contrast on dark bg */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    text-align: center;
    width: 100%;
    max-width: 350px;
}

.chat-app-logo {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.login-card h2 {
    font-weight: 600;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.login-card p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 2rem;
}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Slightly more gap */
    margin-top: 0;
}

.input-group {
    position: relative;
}

.input-group svg {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    width: 20px;
    height: 20px;
}

#username-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 0.9rem 0.9rem 0.9rem 45px; /* 45px left padding for icon */
    color: white;
    font-size: 1rem;
    width: 100%;
    transition: all 0.3s ease;
}

#username-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

#username-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

#login-btn {
    background: var(--button-color); /* #008069 */
    border: none;
    padding: 0.9rem;
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

#login-btn:hover {
    background: #006954; /* Darker green */
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* --- End of Modern Login Screen --- */

#main-view, #chat-view { height: 100%; }

/* --- D1: ग्लास हेडर --- */
.main-header, .chat-header {
    display: flex;
    align-items: center;
    padding: 10px 16px;

    background-color: rgba(255, 255, 255, 0.9); /* D1 */
    backdrop-filter: blur(8px); /* D1 */
-webkit-backdrop-filter: blur(8px);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 3. उठी हुई परछाई */

    color: var(--text-secondary); /* D1: टेक्स्ट का रंग डार्क ग्रे */
    flex-shrink: 0;
    height: 60px;
    gap: 10px;
    border-bottom: 1px solid var(--border-color); /* D1: हल्की बॉर्डर */
/* [NEW] Updated shadow for white header */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 10;

}




.main-header h1 { font-size: 1.2rem; }

/* यह तत्व लॉग इन यूज़रनेम को दिखाता है और बाकी की जगह ले लेता है, जिससे बटन दाहिनी ओर चले जाते हैं */
#logged-in-username { 
    margin-right: auto; /* यह सबसे महत्वपूर्ण लाइन है */
    padding-left: 5px; /* h1 से थोड़ी दूरी */
    font-size: 0.9rem;
}

/* --- D2: चैट लिस्ट कार्ड्स --- */
#chat-list {
    flex-grow: 1;
    overflow-y: auto;
    background: var(--app-bg); /* D2: बैकग्राउंड को ऐप बैकग्राउंड जैसा बनाएं */
    padding: 8px; /* D2: कार्ड के लिए थोड़ी जगह */
}

#available-users-list {
    flex-grow: 1;
    overflow-y: auto;
    background: white;
}

/* --- D2: चैट लिस्ट कार्ड्स --- */
.chat-list-item {
    display: flex;
    align-items: center;
    padding: 0.8rem;
    gap: 1rem;
    cursor: pointer;
    border-bottom: none; /* D2: पुरानी बॉर्डर हटाएं */
    border-radius: 12px; /* D2 */
    margin: 6px 0; /* D2: कार्ड के बीच गैप */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* D2 */
    background: #ffffff; /* D2: कार्ड को सफेद रखें */
}

.user-list-item {
    display: flex;
    align-items: center;
    padding: 0.8rem;
    gap: 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.chat-list-item:hover, .user-list-item:hover { background-color: #f5f5f5; }
.avatar, .contact-avatar { width: 49px; height: 49px; border-radius: 50%; background-color: var(--accent-blue); display: flex; justify-content: center; align-items: center; font-size: 1.5rem; color: white; flex-shrink: 0; text-transform: uppercase; }
.contact-avatar { width: 42px; height: 42px; }
.details { flex-grow: 1; overflow: hidden; }
.details h3, .details p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.details h3 { font-size: 1.1rem; font-weight: 500; }
.details p { font-size: 0.9rem; color: var(--text-secondary); }
.contact-info { display: flex; align-items: center; flex-grow: 1; gap: 12px; overflow: hidden; }
.contact-info h2, .contact-info small { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-info h2 { font-size: 1.1rem; font-weight: 500; }
#contact-status.online { color: var(--online-color); font-weight: bold; text-shadow: 0 0 8px rgba(37, 211, 102, 0.7); /* Glow effect */
 }
.chat-actions { display: flex; gap: 5px; }

#chat-view { display: flex; flex-direction: column; }
#messages-wrapper { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; background-color: white; }
#chat-messages { display: flex; flex-direction: column; padding: 1rem; }

/* --- D3: चैट बबल शैडो --- */
.message-bubble {
    max-width: 75%;
    padding: 10px 15px;
    border-radius: 20px;
    margin-bottom: 8px;
    word-wrap: break-word;
    position: relative;
    animation: fadeInUp 0.3s ease-in-out;
    font-size: 0.95rem;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* D3 */
/* --- मैसेज कॉपी करने के लिए सिलेक्शन चालू करें --- */
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -moz-user-select: text;
}

.message-sent {
    background: var(--message-out-bg);
    align-self: flex-end;
    color: white;
    /* नीचे-दायां कोना थोड़ा Sharp ताकि लगे मैसेज इधर से गया है */
    border-bottom-right-radius: 4px; 
    margin-right: 5px; /* स्क्रीन के किनारे से थोड़ी दूरी */
}
.message-received { background: var(--message-in-bg); align-self: flex-start;border-bottom-left-radius: 4px;
    margin-left: 5px;
     }
/* --- [NEW] Professional Edit Button --- */
.message-actions {
    position: absolute;
    top: -12px;
    right: -10px;
    background: #ffffff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
    opacity: 0; /* Default Chupa hua */
    transform: scale(0.8);
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Hover karne par Edit button dikhega (Desktop) */
.message-bubble:hover .message-actions {
    opacity: 1;
    transform: scale(1);
    right: 5px; /* Thoda andar aayega */
}
/* --- Mobile Fix for Edit Button --- */
@media (hover: none) {
    /* मोबाइल पर एडिट बटन हमेशा दिखेगा */
    .message-actions {
        opacity: 1 !important;
        transform: scale(1) !important;
        right: 5px !important;
        background: #f0f0f0; /* थोड़ा अलग रंग ताकि साफ़ दिखे */
    }
}

/* Edit button ke andar ka icon */
.message-actions button {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.message-actions.visible { display: flex; }
.message-sent .message-actions { left: -15px; }
.message-received .message-actions { right: -15px; }
.message-actions button { background: none; border: none; cursor: pointer; font-size: 1.2em; color: var(--text-primary); }

#chat-input-container { display: flex; flex-direction: column; padding: 8px; background: #f0f0f0; flex-shrink: 0; border-top: 1px solid var(--border-color); }
.input-wrapper { display: flex; align-items: center; }
#chat-input { flex-grow: 1; border-radius: 20px; border: 1px solid var(--border-color); padding: 9px 15px; font-size: 1rem;
/* --- टाइपिंग बॉक्स के लिए सिलेक्शन चालू करें --- */
    -webkit-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
    -moz-user-select: auto; }
.icon-btn { background: rgba(0,0,0,0.3); border: none; cursor: pointer; color: white; width: 48px; height: 48px; border-radius: 50%; display: flex; justify-content: center; align-items: center; fill: currentColor; }
.icon-btn svg { fill: currentColor; width: 24px; height: 24px;}

/* --- D1: ग्लास हेडर आइकॉन --- */
.header-icon {
    background: none;
    color: var(--text-secondary); /* D1: हेडर आइकॉन का रंग */
    width: 40px;
    height: 40px;
}

.icon-btn-small { background: none; border: none; cursor: pointer; font-size: 0.8em; }

#user-search-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--app-bg); z-index: 50; display: flex; flex-direction: column; }
.user-search-content { padding: 1rem; display: flex; flex-direction: column; height: 100%; }
#user-search-input { padding: 0.8rem; border-radius: 20px; border: 1px solid var(--border-color); margin-bottom: 1rem; font-size: 1rem; }

.modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 200; }
.modal-content { background: white; padding: 2rem; border-radius: 8px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.modal-buttons { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }
#modal-accept-btn, #modal-reject-btn { padding: 0.8rem 1.5rem; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; font-weight: bold; color: white; }
#modal-accept-btn { background-color: var(--button-color); }
#modal-reject-btn { background-color: var(--call-end-red); }

#video-container { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); background-color: transparent; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 10; width: 0; height: 0; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
#zegocloud-call-container { width: 100%; height: 100%; }
#zegocloud-call-container video { object-fit: contain !important; background-color: white !important; }
#video-container.size-1 { width: 100%; height: 42%; left: 0; transform: none; border-radius: 0; }
#video-container.size-2 { width: 100%; height: 70%; left: 0; transform: none; border-radius: 0; }
#video-container.size-3 { width: 100%; height: calc(100% - 60px); left: 0; transform: none; border-radius: 0; }
#video-overlay-controls { position: absolute; top: 10px; left: 10px; z-index: 20; display: flex; flex-direction: row; gap: 10px; opacity: 0; transition: opacity 0.3s ease; }
#video-container.size-1, #video-container.size-2, #video-container.size-3 { opacity: 1; }
#video-container:not(.size-0) #video-overlay-controls { opacity: 1; }
#lock-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 15; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.message-meta { display: flex; align-items: center; justify-content: flex-end; margin-top: .5px; font-size: 0.6em; color: rgba(255, 255, 255, 0.7); }
.message-time { margin-right: 1px; }
.message-status { font-weight: bold; }
.status-seen { color: var(--accent-blue); }
.edited-indicator { font-size: 0.8em; font-style: italic; color: rgba(255, 255, 255, 0.7); margin-left: 8px; cursor: pointer; }
.replied-message-preview { background-color: #fef9e7; padding: 3px; margin: -3px -7px 7px -7px; border-radius: 5px; border-left: 4px solid #f1c40f; font-size: 0.7em; color: #555; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.replied-message-preview strong { color: #d35400; display: block; margin-bottom: 2px; }
.like-indicator { position: absolute; bottom: -10px; left: 10px; border-radius: 10px; padding: 3px 8px; font-size: 1.em; box-shadow: 0 1px 2px rgba(0,0,0,0.2); color: var(--text-primary); }
.message-received .like-indicator { right: 10px; left: auto; }
.message-actions .liked { background-color: rgba(2, 117, 216, 0.2); border-radius: 50%; }

#typing-indicator { background: var(--message-in-bg); padding: 10px 15px; border-radius: 20px; margin: 0 1rem 0.5rem 1rem; align-self: flex-start; width: fit-content; display: flex; align-items: center; box-shadow: 0 1px 1px rgba(0,0,0,0.08); opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
#typing-indicator.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
#typing-indicator .dot { width: 8px; height: 8px; margin: 0 2px; background-color: white; border-radius: 50%; animation: bounce 1.3s infinite ease-in-out; }
.typing-text { display: none; }
#typing-indicator .dot:nth-of-type(1) { animation-delay: -1.3s; }
#typing-indicator .dot:nth-of-type(2) { animation-delay: -1.1s; }
#typing-indicator .dot:nth-of-type(3) { animation-delay: -0.9s; }

#chat-send-btn { background-color: #8a8a8a; fill: #dcdcdc; transition: background-color 0.3s ease, transform 0.1s ease; }
#chat-send-btn.active { background-color: var(--button-color); fill: #ffffff; }
#chat-send-btn:active { transform: scale(0.9); }
#chat-send-btn.sending svg { animation: send-animation 0.5s ease-in-out; }
@keyframes send-animation { 0% { transform: translateY(0) rotate(0); opacity: 1; } 50% { transform: translateY(-20px) rotate(45deg); opacity: 1; } 100% { transform: translateY(-20px) rotate(45deg); opacity: 0; } }

.original-message-popover { position: absolute; background-color: #333; color: white; padding: 8px 12px; border-radius: 6px; font-size: 0.9em; z-index: 100; max-width: 250px; word-wrap: break-word; }
.original-message-popover::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; }
.avatar-container { position: relative; flex-shrink: 0; }
.online-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background-color: var(--online-color); border-radius: 50%; border: 2px solid white; }
.chat-list-item.unread .details h3 { font-weight: 700 !important; color: var(--text-primary) !important; }
.chat-list-item.unread .details p { font-weight: 600 !important; color: var(--text-primary) !important; }
.typing-indicator-list { color: var(--button-color); font-style: italic; font-weight: 500; }

@keyframes reply-nudge-right { 0% { transform: translateX(0); } 50% { transform: translateX(10px); } 100% { transform: translateX(0); } }
@keyframes reply-nudge-left { 0% { transform: translateX(0); } 50% { transform: translateX(-10px); } 100% { transform: translateX(0); } }
.reply-nudge-right { animation: reply-nudge-right 0.3s ease-out; }
.reply-nudge-left { animation: reply-nudge-left 0.3s ease-out; }

.gentle-effect { position: fixed; z-index: 9999; animation: fadeInOut 2s ease-in-out forwards; }
@keyframes fadeInOut { 0% { transform: scale(0.5); opacity: 0; } 15% { transform: scale(1.1); opacity: 1; } 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.5); opacity: 0; } }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.7; } 40% { transform: scale(1.0); opacity: 1; } }

@keyframes like-pop { 0% { transform: scale(1); } 50% { transform: scale(1.4) rotate(-15deg); } 100% { transform: scale(1) rotate(0); } }
.liked-animation { animation: like-pop 0.4s ease-in-out; }

/* --- NEW STYLE for Privacy Shield --- */
#privacy-shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; /* A plain white background */
    z-index: 9999; /* Make sure it's on top of everything */
}

/* --- D4: टाइपिंग बॉक्स फ़ोकस --- */
#chat-input:focus {
    outline: none; /* डिफ़ॉल्ट आउटलाइन हटाएं */
    border-color: var(--accent-blue); /* बॉर्डर का रंग भी बदलें (वैकल्पिक) */
    box-shadow: 0 0 0 2px var(--accent-blue);
}

/* --- D5: एग्ज़िट बटन ग्लो --- */
@keyframes pulse-red-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 30, 99, 0.7); /* --call-end-red */
    }
    70% {
        box-shadow: 0 0 10px 15px rgba(233, 30, 99, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
    }
}

#quick-exit-btn, #quick-exit-main-btn {
    color: var(--call-end-red) !important; /* SVG का रंग लाल करें */
    border-radius: 50%; /* ग्लो के लिए गोल होना ज़रूरी है */
    animation: pulse-red-glow 2s infinite;
}

#quick-exit-btn:hover, #quick-exit-main-btn:hover {
    animation: none; /* होवर करने पर ग्लो बंद करें */
    background-color: rgba(233, 30, 99, 0.1); /* हल्का लाल बैकग्राउंड दिखाएं */
}

/* --- [UPDATED] External Edit Pencil Button Style (Modern) --- */
.inline-edit-btn {
  position: absolute;
  left: -35px; /* बटन को बबल के बाईं ओर रखता है */
  top: 50%;
  transform: translateY(-50%);
  
  /* Modern Button Style */
  background: rgba(255, 255, 255, 0.7); /* हल्का ट्रांसपेरेंट सफेद */
  border: 1px solid rgba(0, 0, 0, 0.1); 
  border-radius: 50%; /* गोल */
  width: 32px; 
  height: 32px; 
  cursor: pointer;
  color: #555; /* आइकन का गहरा ग्रे रंग */
  font-size: 1.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* डिफ़ॉल्ट रूप से छिपा हुआ */
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
}

/* [NEW] Show button on message hover */
.wrapper-sent:hover .inline-edit-btn {
  opacity: 1; /* होवर करने पर दिखाना */
  transform: translateY(-50%) translateX(0); 
}

.inline-edit-btn:hover {
  background: white; 
  color: var(--text-primary); /* होवर पर गहरा रंग */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); 
  transform: translateY(-50%) scale(1.05); 
}
.wrapper-received .inline-edit-btn { display: none; } 
.inline-edit-btn.hidden { display: none; }



/* --- [NEW] Google-Style Puzzle Cover --- */
#secret-puzzle-cover {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-color: white; color: #737373; z-index: 10000;
  font-family: Arial, sans-serif; display: block; padding: 20px; text-align: left;
  -webkit-user-select: none;
  user-select: none; 
}
/* 👇 यह नया कोड पेस्ट करें 👇 */
/* [NEW] Google Image Logo के लिए स्टाइल */
#secret-puzzle-cover .google-logo-image-placeholder {
    margin-bottom: 25px; /* नीचे से जगह */
    filter: grayscale(0%); /* शुरुआत में रंगीन */
    transition: filter 3s ease-in-out; /* 4 सेकंड का धीमा एनीमेशन */
    display: inline-block; /* ताकि मार्जिन काम करे */
}
#secret-puzzle-cover .google-logo-image-placeholder img {
    width: 150px; /* लोगो का साइज़ कंट्रोल करें */
    height: auto;
}
/* --- 👇 यह नया कोड यहाँ जोड़ें 👇 --- */
    /* यह पक्का करेगा कि लोगो पर माउस ले जाने पर हाथ (pointer) दिखे */
    #secret-puzzle-cover #fake-google-logo-link {
        cursor: pointer; 
        display: block; /* ताकि यह सही से काम करे */
    }
    /* --- 👆 यहाँ तक जोड़ें 👆 --- */

/* [Naya Code] जब JS 'holding' class jodega, to लोगो को grey kar do */
#secret-puzzle-cover.holding .google-logo-image-placeholder {
    filter: grayscale(100%); /* 100% ग्रे */
}
/* --- [NEW] 404 Line Spacing --- */
#secret-puzzle-cover .error-code {
    display: block;
    margin-top: 0;
    margin-bottom: 15px; /* 👇 यह है वो स्पेस लाइन (Gap) */
    line-height: 1.4;
}
#secret-puzzle-cover .error-code b { font-weight: bold; }
#secret-puzzle-cover .error-text { color: #737373; }
/* [NEW] एरर टेक्स्ट के 'सेमी-बोल्ड' हिस्से के लिए */
#secret-puzzle-cover .error-bold-text {
  font-weight: 500; /* 'bold' (700) से कम */
  color: #3c4043; /* 'That's all we know' से थोड़ा गहरा */
}
#secret-puzzle-cover.hidden { display: none; }

/* ... (#secret-puzzle-cover.hidden के बाद) ... */

/* [NEW] नकली 404 पेज के लिंक के लिए स्टाइल */
#secret-puzzle-cover #fake-redirect-link {
  color: #1a73e8; /* गूगल का नीला लिंक रंग */
  text-decoration: none;
  font-size: 0.9em;
  margin-top: 25px; /* ऊपर से थोड़ी जगह */
  display: inline-block;
}
#secret-puzzle-cover #fake-redirect-link:hover {
  text-decoration: underline; /* असली लिंक जैसा */
}

/* --- [NEW] Laptop Hold Progress Bar --- */
/* ... (बाकी का CSS) ... */


/* [Naya Code] Jab JS 'holding' class jodega, to logo ko grey kar do */
/* 👇 यह नया कोड पेस्ट करें 👇 */

/* [Naya Code] Jab JS 'holding' class jodega, to logo (text) ko grey kar do */
#secret-puzzle-cover.holding .google-logo-text-placeholder {
    filter: grayscale(100%); /* 100% ग्रे (रंगहीन) */

}

/* Quick Exit Button (Chat View & Main View) */
#quick-exit-btn, #quick-exit-btn-main { /* <-- दोनों ID यहाँ जोड़ी गई हैं */
    color: white !important; /* SVG और आइकन का रंग सफेद रखें */
    background-color: var(--call-end-red); /* लाल रंग */
    border-radius: 50%;
}
#quick-exit-btn:hover, #quick-exit-btn-main:hover { /* <-- दोनों ID यहाँ जोड़ी गई हैं */
    background-color: #c00c3b; /* गहरा लाल रंग */
}
/* --- 3-Dot Menu Styling --- */
.menu-container {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: 120%; /* बटन के थोड़ा नीचे */
    background-color: white;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-radius: 8px;
    z-index: 100;
    padding: 8px 0;
    animation: fadeInMenu 0.2s ease-out;
    border: 1px solid var(--border-color);
}

.dropdown-menu.hidden {
    display: none;
}

.dropdown-item {
    display: flex; /* आइकन और टेक्स्ट को एक लाइन में करने के लिए */
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-primary);
    transition: background-color 0.2s;
    font-family: inherit;
    gap: 10px; /* आइकन और टेक्स्ट के बीच गैप */
}

.dropdown-item:hover {
    background-color: #f5f5f5;
}

.menu-icon {
    width: 20px;
    height: 20px;
    fill: currentColor; /* टेक्स्ट के रंग जैसा ही आइकन का रंग होगा */
    opacity: 0.7;
}

@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Battery Indicator --- */
.battery-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: 8px;
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 500;
}

.battery-status.low-battery {
    color: #d32f2f; /* Red */
    background: rgba(211, 47, 47, 0.1);
}

.battery-status.charging {
    color: #2e7d32; /* Green */
    background: rgba(46, 125, 50, 0.1);
}

/* --- Like Pop-up Animation --- */
.floating-like {
    position: fixed; /* स्क्रीन पर फिक्स रहेगा */
    font-size: 2.5rem; /* काफी बड़ा साइज */
    pointer-events: none; /* क्लिक इसके आर-पार जाएगा */
    z-index: 10000; /* सबसे ऊपर */
    animation: floatUpHeart 0.8s ease-out forwards;
    text-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

@keyframes floatUpHeart {
    0% {
        transform: scale(0) translateY(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: scale(1.5) translateY(-10px) rotate(-10deg); /* POP effect */
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(-80px) rotate(10deg); /* ऊपर उड़ना */
        opacity: 0;
    }
}

/* --- Load More Button --- */
#load-more-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    background: transparent;
}

#load-more-btn {
    background-color: rgba(0, 0, 0, 0.05); /* हल्का ग्रे */
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

#load-more-btn:hover {
    background-color: #d9fdd3; /* WhatsApp जैसा हरा */
    color: #008069;
    border-color: #008069;
}

/* Date Separator Style - WhatsApp Style */
.date-separator {
    display: flex;
    justify-content: center;
    margin: 15px 0 10px 0;
    width: 100%;
    clear: both;
}

.date-badge {
    background-color: #dcf8c6; /* WhatsApp light green/grey mix */
    color: #555;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-weight: 500;
    text-transform: capitalize;
}

/* Dark mode ke liye (Optional) */
@media (prefers-color-scheme: dark) {
    .date-badge {
        background-color: #333;
        color: #ddd;
    }
}
/* 1. Status Text ki Styling */
#contact-status {
    display: inline-block;      /* Animation ke liye zaroori hai */
    white-space: nowrap;        /* Line kabhi tutegi nahi */
    overflow: visible;          /* Text ko behne do */
    max-width: 100%;            /* Container se bahar na bhage */
    
    /* Animation Settings */
    animation: gentle-scroll 10s linear infinite alternate;
}

/* 2. Container ko fix karo taaki text uske andar hi rahe */
.header .details, .details {
    overflow: hidden;           /* Extra text chhupa do (masking) */
    white-space: nowrap;
    max-width: 200px;           /* Mobile ke hisaab se width fix ki */
    text-overflow: clip;        /* Dots (...) mat dikhao, hum move karayenge */
}

/* 3. Animation Logic (Left-Right Move) */
@keyframes gentle-scroll {
    0% { 
        transform: translateX(0%); 
    }
    20% { 
        transform: translateX(0%); /* Thodi der rukega shuru mein */
    }
    80% { 
        transform: translateX(-40%); /* Left side slide karega */
    }
    100% { 
        transform: translateX(-40%); /* End mein thoda rukega */
    }
}