:root {
    --wa-bg-dark: #111b21;
    --wa-panel-header: #202c33;
    --wa-border: #374045;
    --wa-input-bg: #202c33;
    --wa-primary-text: #e9edef;
    --wa-secondary-text: #8696a0;
    --wa-teal: #00a884;
    --wa-bubble-out: #005c4b;
    --wa-bubble-in: #202c33;
    --wa-active-chat: #2a3942;
    --wa-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
}

* { box-sizing: border-box; }

/* =========================================
   1. FULL SCREEN FIX (Position Fixed)
   ========================================= */
.wa-app-container { 
    position: fixed;  /* Force it to float over the theme */
    top: 32px;        /* Start exactly below WP Admin Bar */
    left: 0;
    width: 100vw;     /* 100% Viewport Width */
    height: calc(100vh - 32px); /* 100% Viewport Height minus Admin Bar */
    background: var(--wa-bg-dark); 
    color: var(--wa-primary-text); 
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    z-index: 9999;    /* Ensure it sits on top of everything */
    display: flex;
    overflow: hidden;
}

/* Hide WP Admin Bar on Mobile to give more space */
@media screen and (max-width: 782px) {
    html { margin-top: 0 !important; }
    .wa-app-container { top: 0; height: 100vh; }
}

/* =========================================
   2. LOCK SCREEN OVERLAY
   ========================================= */
.wa-lock-wrapper { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: #111b21; color: #e9edef; 
    display: flex; align-items: center; justify-content: center; 
    z-index: 100000; 
}
.wa-lock-box { 
    background: #202c33; padding: 40px; border-radius: 12px; width: 350px; 
    text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.7); border: 1px solid #374045;
}
.wa-lock-icon { font-size: 50px; margin-bottom: 20px; display: block; }
.wa-lock-box h3 { margin: 0 0 15px 0 !important; color: #e9edef !important; font-size: 22px !important; }
.wa-lock-box input { 
    width: 100% !important; padding: 14px !important; margin-bottom: 20px !important; 
    border-radius: 8px !important; border: 1px solid #2a3942 !important; 
    background: #111b21 !important; color: white !important; font-size: 16px !important;
}
.wa-lock-box button { 
    width: 100% !important; padding: 14px !important; border-radius: 25px !important; 
    border: none !important; background: #00a884 !important; color: #111b21 !important; 
    font-weight: bold !important; font-size: 16px !important; cursor: pointer !important; 
    text-transform: uppercase !important;
}

/* =========================================
   3. APP LAYOUT
   ========================================= */
/* SCROLLBARS */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* SIDEBAR */
.wa-sidebar { width: 30%; min-width: 320px; max-width: 450px; border-right: 1px solid var(--wa-border); display: flex; flex-direction: column; background: var(--wa-bg-dark); }
.wa-header { height: 60px; background: var(--wa-panel-header); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.wa-profile-pic { width: 40px; height: 40px; background: #53bdeb; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #111b21; font-size: 12px; }
.wa-nav-icons { color: var(--wa-secondary-text); font-size: 18px; letter-spacing: 20px; cursor: pointer; }

.wa-search-container { padding: 8px 12px; border-bottom: 1px solid var(--wa-border); }
.wa-search-box { background: var(--wa-input-bg); border-radius: 8px; display: flex; align-items: center; padding: 0 12px; height: 35px; }
.wa-search-icon { color: var(--wa-secondary-text); margin-right: 15px; font-size: 13px; transform: rotateY(180deg); }
.wa-search-box input { background: transparent; border: none; color: var(--wa-primary-text); width: 100%; outline: none; font-size: 15px; }

.wa-contact-list { flex: 1; overflow-y: auto; }
.wa-contact-item { display: flex; padding: 12px 15px; cursor: pointer; border-bottom: 1px solid var(--wa-border); text-decoration: none; color: inherit; align-items: center; }
.wa-contact-item:hover { background: #202c33; }
.wa-contact-item.active { background: var(--wa-active-chat); }
.wa-avatar img { width: 49px; height: 49px; border-radius: 50%; }
.wa-contact-details { margin-left: 15px; flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.wa-contact-top { display: flex; justify-content: space-between; margin-bottom: 3px; }
.wa-contact-name { font-size: 17px; font-weight: 400; color: var(--wa-primary-text); }
.wa-contact-date { font-size: 12px; color: var(--wa-secondary-text); margin-top: 3px; }
.wa-contact-msg { font-size: 14px; color: var(--wa-secondary-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* MAIN CHAT */
.wa-main-chat { flex: 1; display: flex; flex-direction: column; background: #0b141a; position: relative; }
.wa-chat-bg { 
    flex: 1; 
    padding: 20px 8%; /* More side padding */
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    background-image: url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png"); 
    opacity: 0.95; 
}
.wa-avatar-small img { width: 40px; height: 40px; border-radius: 50%; margin-right: 15px; }
.wa-chat-title { font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.wa-copy-btn { font-size: 14px; cursor: pointer; opacity: 0.5; }

/* DATE PILLS */
.wa-date-pill { display: flex; justify-content: center; margin: 15px 0; }
.wa-date-pill span { background: #182229; color: #8696a0; padding: 6px 14px; border-radius: 8px; font-size: 13px; box-shadow: 0 1px 1px rgba(0,0,0,0.2); }

/* MESSAGES (BIGGER FONT) */
.wa-row { display: flex; margin-bottom: 4px; width: 100%; }
.wa-row-user { justify-content: flex-end; }
.wa-row-agent { justify-content: flex-start; }

.wa-bubble { 
    max-width: 70%; 
    padding: 8px 10px 10px 12px; 
    border-radius: 7.5px; 
    position: relative; 
    font-size: 16px; /* INCREASED FONT SIZE */
    line-height: 1.5; 
    box-shadow: var(--wa-shadow);
}

.wa-bubble-user { background: var(--wa-bubble-out); border-top-right-radius: 0; direction: rtl; }
.wa-bubble-agent { background: var(--wa-bubble-in); border-top-left-radius: 0; direction: rtl; }

/* TAILS */
.wa-bubble-user::before {
    content: ""; position: absolute; top: 0; right: -8px; width: 0; height: 0;
    border-top: 8px solid var(--wa-bubble-out); border-right: 8px solid transparent;
}
.wa-bubble-agent::before {
    content: ""; position: absolute; top: 0; left: -8px; width: 0; height: 0;
    border-top: 8px solid var(--wa-bubble-in); border-left: 8px solid transparent;
}

.wa-msg-content { word-wrap: break-word; }
.wa-timestamp { 
    float: right; font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 6px; margin-left: 10px; display: flex; align-items: center; gap: 3px;
}
.wa-bubble-user .wa-timestamp { float: left; margin-right: 10px; margin-left: 0; }
.wa-check { color: #53bdeb; font-size: 11px; }

.wa-footer { height: 62px; background: var(--wa-panel-header); display: flex; align-items: center; justify-content: center; z-index: 2; }
.wa-read-only-bar { background: #182229; color: #8696a0; padding: 10px 20px; border-radius: 8px; font-size: 14px; }

/* EMPTY STATE */
.wa-empty-state { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--wa-secondary-text); background: #222e35; border-bottom: 6px solid #4fb27b; }
.wa-empty-icon { font-size: 80px; margin-bottom: 20px; opacity: 0.8; }
.wa-empty-content h3 { color: #e9edef; font-weight: 300; font-size: 32px; margin: 0 0 10px 0; }

@media (max-width: 900px) {
    .wa-app-container.wa-view-list .wa-sidebar { width: 100%; max-width: none; display: flex; }
    .wa-app-container.wa-view-list .wa-main-chat { display: none; }
    .wa-app-container.wa-view-chat .wa-sidebar { display: none; }
    .wa-app-container.wa-view-chat .wa-main-chat { display: flex; width: 100%; }
    .wa-mobile-back { display: block; color: white; font-size: 24px; text-decoration: none; margin-right: 15px; }
    .wa-chat-bg { padding: 15px; }
    .wa-bubble { max-width: 85%; }
}