/*
Theme Name: WP WhatsApp Web Clone
Description: A full-screen, native-app-style chat theme.
Version: 1.2
Author: Coding Partner
*/

:root {
    --app-bg: #eae6df;
}

/* 1. LOCK THE BODY TO THE SCREEN EXACTLY */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    background-color: var(--app-bg) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    position: fixed; /* Stops mobile browser bounce/scroll */
    top: 0; left: 0; right: 0; bottom: 0;
}

/* 2. FILL THE BODY EXACTLY */
#wpm-app {
    display: flex;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    background: #fff;
    overflow: hidden;
}

/* Adjust for WP Admin Bar */
body.admin-bar #wpm-app { top: 32px !important; height: auto !important; }
@media screen and (max-width: 782px) {
    body.admin-bar #wpm-app { top: 46px !important; }
}

.wpm-header-bar { background: #00a884; color: white; padding: 15px 20px; font-weight: bold; font-size: 16px; display: flex; align-items: center; flex-shrink: 0; }

/* Sidebar */
#wpm-sidebar { width: 35%; border-right: 1px solid #ddd; background: #fff; display: flex; flex-direction: column; height: 100%; }
#user-list { overflow-y: auto; flex-grow: 1; }
.user-item { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid #f2f2f2; cursor: pointer; transition: background 0.2s; }
.user-item:hover { background: #f5f6f6; }
.user-item.active { background: #ebebeb; }
.wpm-avatar { width: 45px; height: 45px; min-width: 45px; border-radius: 50%; object-fit: cover; margin-right: 15px; }
.wpm-user-info { display: flex; flex-direction: column; overflow: hidden; }
.wpm-user-info strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpm-user-info span { font-size: 12px; color: #667781; margin-top: 3px; }

/* Chat Area */
#wpm-chat-area { width: 65%; display: flex; flex-direction: column; background: #efeae2; position: relative; height: 100%; overflow: hidden; }
#wpm-back-btn { display: none; margin-right: 15px; cursor: pointer; font-size: 22px; line-height: 1; }

/* 3. THE MAGIC FLEXBOX OVERFLOW FIX */
#wpm-messages { 
    flex: 1 1 auto; 
    min-height: 0; /* Crucial: stops it from pushing the input off screen */
    padding: 20px; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
}

.msg { max-width: 80%; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; position: relative; font-size: 14px; box-shadow: 0 1px 0.5px rgba(0,0,0,0.13); display: inline-block; word-wrap: break-word;}
.msg.sent { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 0; }
.msg.received { align-self: flex-start; background: #ffffff; border-top-left-radius: 0; }
.msg-time { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 10px; color: #667781; margin-top: 4px; }
.msg img.wpm-uploaded-img { max-width: 100%; height: auto; border-radius: 6px; margin-bottom: 5px; display: block; cursor: pointer; }

/* Input Area */
#wpm-input-area { 
    background: #f0f2f5; 
    padding: 15px; 
    display: flex; 
    align-items: center; 
    flex-shrink: 0; 
    padding-bottom: env(safe-area-inset-bottom, 15px); /* Respects iPhone/Android home bars */
}
#wpm-input { flex-grow: 1; padding: 12px 15px; border: none; border-radius: 8px; font-size: 15px; outline: none; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
#wpm-input:disabled { background: #e0e0e0; cursor: not-allowed; }
#wpm-send, #wpm-attach-btn { margin-left: 15px; background: none; border: none; color: #54656f; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#wpm-send:hover, #wpm-attach-btn:hover { color: #00a884; }
#wpm-send:disabled, #wpm-attach-btn:disabled { color: #ccc; cursor: not-allowed; }

/* Unread Badges & Message Ticks */
.unread-badge { background: #25d366; color: #fff; border-radius: 12px; padding: 2px 7px; font-size: 11px; font-weight: bold; min-width: 18px; text-align: center; margin-left: auto; }
.msg-status-tick { display: inline-block; margin-left: 5px; vertical-align: middle; }
.tick-sent { color: #8696a0; } /* Grey */
.tick-read { color: #53bdeb; } /* Blue */

/* Presence & Typing UI */
.avatar-container { position: relative; display: inline-block; flex-shrink: 0; }
.online-dot { width: 12px; height: 12px; background: #ccc; border: 2px solid white; border-radius: 50%; position: absolute; bottom: 2px; right: 2px; }
.online-dot.is-online { background: #25d366; }
#chat-status-text { font-size: 12px; color: #fff; font-weight: normal; display: block; margin-top: 2px; opacity: 0.9; }

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
    #wpm-sidebar { width: 100%; border-right: none; }
    #wpm-chat-area { width: 100%; display: none; }
    #wpm-app.chat-active #wpm-sidebar { display: none; }
    #wpm-app.chat-active #wpm-chat-area { display: flex; flex-direction: column; height: 100%; }
    #wpm-back-btn { display: inline-block; }
}