/* ==========================================================================
   VChat — WhatsApp 100% Core Theme
   Priority: HIGHEST — loaded last, overrides all previous CSS layers
   ========================================================================== */

/* 0. WHATSAPP DESIGN TOKENS */
:root {
  --wa-bg-base:       #0B141A;
  --wa-bg-panel:      #111B21;
  --wa-bg-header:     #202C33;
  --wa-bg-input:      #2A3942;
  --wa-bg-bubble-me:  #005C4B;
  --wa-bg-bubble-you: #202C33;
  --wa-text-primary:  #E9EDEF;
  --wa-text-secondary:#8696A0;
  --wa-text-meta:     #667781;
  --wa-border:        rgba(255,255,255,0.08);
  --wa-hover:         rgba(255,255,255,0.05);
  --wa-ripple-color:  rgba(255,255,255,0.15);
  --wa-anim-speed:    180ms;
  --wa-easing:        cubic-bezier(0.16, 1, 0.3, 1);
}
:root[data-theme="light"], body[data-theme="light"] {
  --wa-bg-base:       #F0F2F5;
  --wa-bg-panel:      #FFFFFF;
  --wa-bg-header:     #F0F2F5;
  --wa-bg-input:      #FFFFFF;
  --wa-bg-bubble-me:  #D9FDD3;
  --wa-bg-bubble-you: #FFFFFF;
  --wa-text-primary:  #111B21;
  --wa-text-secondary:#54656F;
  --wa-text-meta:     #667781;
  --wa-border:        #E9EDEF;
  --wa-hover:         #F5F6F6;
  --wa-ripple-color:  rgba(0,0,0,0.08);
}

/* 1. GLOBAL BACKGROUNDS */
:root[data-theme="dark"] body, body[data-theme="dark"] { background: var(--wa-bg-base) !important; }
:root[data-theme="light"] body, body[data-theme="light"] { background: var(--wa-bg-base) !important; }

@media (min-width: 769px) {
  :root[data-theme="dark"] .sidebar-icon, body[data-theme="dark"] .sidebar-icon { background: var(--wa-bg-panel) !important; border-right: 1px solid var(--wa-border) !important; }
  :root[data-theme="light"] .sidebar-icon, body[data-theme="light"] .sidebar-icon { background: var(--wa-bg-panel) !important; border-right: 1px solid var(--wa-border) !important; }
}
:root[data-theme="dark"] .sidebar-menu, body[data-theme="dark"] .sidebar-menu { background: var(--wa-bg-panel) !important; border-right: 1px solid var(--wa-border) !important; }
:root[data-theme="light"] .sidebar-menu, body[data-theme="light"] .sidebar-menu { background: var(--wa-bg-panel) !important; border-right: 1px solid var(--wa-border) !important; }
:root[data-theme="dark"] .chat-header, body[data-theme="dark"] .chat-header { background: var(--wa-bg-header) !important; border-bottom: 1px solid var(--wa-border) !important; }
:root[data-theme="light"] .chat-header, body[data-theme="light"] .chat-header { background: var(--wa-bg-header) !important; border-bottom: 1px solid var(--wa-border) !important; }
:root[data-theme="dark"] .chat-window, body[data-theme="dark"] .chat-window, :root[data-theme="dark"] #chatWindow, body[data-theme="dark"] #chatWindow { background: var(--wa-bg-base) !important; }
:root[data-theme="light"] .chat-window, body[data-theme="light"] .chat-window, :root[data-theme="light"] #chatWindow, body[data-theme="light"] #chatWindow { background: #EFE8DD !important; }
:root[data-theme="dark"] .chat-input-zone, body[data-theme="dark"] .chat-input-zone { background: var(--wa-bg-header) !important; border-top: 1px solid var(--wa-border) !important; }
:root[data-theme="light"] .chat-input-zone, body[data-theme="light"] .chat-input-zone { background: var(--wa-bg-header) !important; border-top: 1px solid var(--wa-border) !important; }

/* 2. CHAT BUBBLES — WhatsApp exact style with tails */
.msg-bubble { position: relative !important; padding: 6px 10px 8px 10px !important; border-radius: 7.5px !important; font-size: 14.2px !important; line-height: 1.45 !important; word-break: break-word !important; max-width: min(420px, 75vw) !important; box-shadow: 0 1px 1px rgba(0,0,0,0.13) !important; border: none !important; }
:root[data-theme="dark"] .msg-row.me .msg-bubble, body[data-theme="dark"] .msg-row.me .msg-bubble { background: var(--wa-bg-bubble-me) !important; color: var(--wa-text-primary) !important; border-radius: 7.5px 0 7.5px 7.5px !important; }
:root[data-theme="light"] .msg-row.me .msg-bubble, body[data-theme="light"] .msg-row.me .msg-bubble { background: var(--wa-bg-bubble-me) !important; color: #111B21 !important; border-radius: 7.5px 0 7.5px 7.5px !important; }
:root[data-theme="dark"] .msg-row.other .msg-bubble, body[data-theme="dark"] .msg-row.other .msg-bubble { background: var(--wa-bg-bubble-you) !important; color: var(--wa-text-primary) !important; border: none !important; border-radius: 0 7.5px 7.5px 7.5px !important; }
:root[data-theme="light"] .msg-row.other .msg-bubble, body[data-theme="light"] .msg-row.other .msg-bubble { background: var(--wa-bg-bubble-you) !important; color: #111B21 !important; border: none !important; border-radius: 0 7.5px 7.5px 7.5px !important; }

/* Bubble tail — right (my messages) */
.msg-row.me .msg-bubble::after { content: '' !important; position: absolute !important; top: 0 !important; right: -8px !important; width: 0 !important; height: 0 !important; border-style: solid !important; border-width: 0 0 8px 8px !important; border-color: transparent !important; border-left-color: var(--wa-bg-bubble-me) !important; }
/* Bubble tail — left (other messages) */
.msg-row.other .msg-bubble::after { content: '' !important; position: absolute !important; top: 0 !important; left: -8px !important; width: 0 !important; height: 0 !important; border-style: solid !important; border-width: 0 8px 8px 0 !important; border-color: transparent !important; }
:root[data-theme="dark"] .msg-row.other .msg-bubble::after, body[data-theme="dark"] .msg-row.other .msg-bubble::after { border-right-color: var(--wa-bg-bubble-you) !important; }
:root[data-theme="light"] .msg-row.other .msg-bubble::after, body[data-theme="light"] .msg-row.other .msg-bubble::after { border-right-color: var(--wa-bg-bubble-you) !important; }

/* Emoji-only */
.msg-bubble.emoji-only { background: transparent !important; border: none !important; box-shadow: none !important; font-size: 38px !important; padding: 2px 4px !important; line-height: 1 !important; }
.msg-bubble.emoji-only::after { display: none !important; }

/* Timestamp */
.msg-time { font-size: 10.5px !important; color: var(--wa-text-meta) !important; float: right !important; margin-left: 8px !important; margin-top: 2px !important; margin-bottom: -2px !important; display: inline-flex !important; align-items: center !important; gap: 3px !important; opacity: 1 !important; vertical-align: bottom !important; }

/* 3. PERFORMANCE */
.msg-row { content-visibility: auto !important; contain-intrinsic-size: 0 60px !important; will-change: auto !important; }
.msg-row:hover { will-change: transform !important; }
.chat-window, #chatWindow, .sidebar-scroll-content, #recentContactList, #contactList, #roomList { -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain !important; transform: translateZ(0) !important; backface-visibility: hidden !important; }
.chat-window::-webkit-scrollbar, #chatWindow::-webkit-scrollbar { width: 4px !important; }
.chat-window::-webkit-scrollbar-thumb, #chatWindow::-webkit-scrollbar-thumb { background: var(--wa-text-meta) !important; border-radius: 3px !important; }
.chat-window::-webkit-scrollbar-track, #chatWindow::-webkit-scrollbar-track { background: transparent !important; }

/* 4. RIPPLE EFFECT */
@keyframes wa-ripple-expand { 0% { transform: scale(0); opacity: 0.6; } 100% { transform: scale(3); opacity: 0; } }
.wa-ripple-circle { position: absolute; border-radius: 50%; background: var(--wa-ripple-color); pointer-events: none; animation: wa-ripple-expand 0.5s ease-out forwards; transform-origin: center; }
.nav-icon, .icon-btn, .room-item, .create-btn, #createGroupBtn, .send-submit-btn, .action-icon-btn, .message-copy-btn, .z-tool-icon, .zalo-mobile-action-item-v711, .menu-item, .filter-tab, .atab-btn { position: relative !important; overflow: hidden !important; }

/* 5. MICRO-ANIMATIONS */
@keyframes wa-msg-in { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.msg-row.me.msg-new, .msg-row.other.msg-new { animation: wa-msg-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both !important; }
.nav-icon { transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s ease, color 0.18s ease !important; }
.nav-icon:hover { transform: translateY(-2px) scale(1.05) !important; }
.nav-icon.active { transform: none !important; }
.room-item { transition: background 0.15s ease !important; transform: none !important; border-radius: 0 !important; margin: 0 !important; padding: 12px 16px !important; }
.send-submit-btn { transition: background 0.2s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important; }
.send-submit-btn:hover { transform: scale(1.08) !important; }
.send-submit-btn:active { transform: scale(0.94) !important; }
.reaction-popup span, .reaction-choice, .zalo-mobile-reaction-v711 { transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.reaction-popup span:hover, .reaction-choice:hover, .zalo-mobile-reaction-v711:hover { transform: scale(1.35) translateY(-4px) !important; }
.emoji-cell { transition: transform 0.1s ease, background 0.1s ease !important; }
.emoji-cell:hover { transform: scale(1.25) !important; }

/* 6. TYPING INDICATOR — 3 dot bounce */
@keyframes wa-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
.typing-dot { width: 5px !important; height: 5px !important; border-radius: 50% !important; background: var(--wa-text-secondary) !important; animation: wa-typing-bounce 1.1s ease-in-out infinite !important; display: inline-block; }
.typing-dot:nth-child(2) { animation-delay: 0.18s !important; }
.typing-dot:nth-child(3) { animation-delay: 0.36s !important; }

/* 7. SEARCH BOX */
.search-box-area { padding: 8px 12px !important; gap: 8px !important; border-bottom: none !important; }
.search-input, .v3-search-input, .sidebar-menu .search-input { height: 36px !important; border-radius: 18px !important; padding: 0 14px 0 38px !important; font-size: 13.5px !important; border: none !important; outline: none !important; transition: background 0.2s ease !important; }
:root[data-theme="dark"] .search-input, body[data-theme="dark"] .search-input { background: var(--wa-bg-input) !important; color: var(--wa-text-primary) !important; -webkit-text-fill-color: var(--wa-text-primary) !important; }
:root[data-theme="dark"] .search-input::placeholder, body[data-theme="dark"] .search-input::placeholder { color: var(--wa-text-secondary) !important; }
:root[data-theme="light"] .search-input, body[data-theme="light"] .search-input { background: var(--wa-bg-input) !important; color: var(--wa-text-primary) !important; -webkit-text-fill-color: var(--wa-text-primary) !important; }
:root[data-theme="light"] .search-input::placeholder, body[data-theme="light"] .search-input::placeholder { color: var(--wa-text-secondary) !important; }
.search-input:focus, .v3-search-input:focus { box-shadow: none !important; border: none !important; outline: none !important; }

/* Create button */
.create-btn, #createGroupBtn { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; background: transparent !important; color: var(--wa-text-secondary) !important; border: none !important; box-shadow: none !important; }
.create-btn:hover, #createGroupBtn:hover { background: var(--wa-hover) !important; color: var(--wa-text-primary) !important; transform: none !important; }

/* 8. CONVERSATION LIST */
:root[data-theme="dark"] .room-item:hover, body[data-theme="dark"] .room-item:hover { background: rgba(255,255,255,0.05) !important; }
:root[data-theme="light"] .room-item:hover, body[data-theme="light"] .room-item:hover { background: #F5F6F6 !important; }
:root[data-theme="dark"] .room-item.active, body[data-theme="dark"] .room-item.active { background: var(--wa-bg-input) !important; border-radius: 0 !important; }
:root[data-theme="light"] .room-item.active, body[data-theme="light"] .room-item.active { background: #F0F2F5 !important; border-radius: 0 !important; }
.room-title { font-size: 15px !important; font-weight: 500 !important; color: var(--wa-text-primary) !important; }
.room-sub { font-size: 13px !important; color: var(--wa-text-secondary) !important; }
.unread-badge { background: var(--primary, #25D366) !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; min-width: 18px !important; height: 18px !important; border-radius: 9px !important; padding: 0 5px !important; }
.room-avt { width: 48px !important; height: 48px !important; border-radius: 50% !important; flex-shrink: 0 !important; box-shadow: none !important; }
.room-avt.is-group { border-radius: 50% !important; }

/* 9. CHAT HEADER */
.chat-header-name { font-size: 15px !important; font-weight: 600 !important; color: var(--wa-text-primary) !important; }
.chat-header-status { font-size: 12px !important; color: var(--wa-text-secondary) !important; }
.chat-header-status::before { display: none !important; }

/* 10. INPUT COMPOSER */
.zalo-toolbar { border-bottom: none !important; background: transparent !important; padding: 6px 12px 2px !important; }
.zalo-input-area { padding: 8px 12px !important; gap: 8px !important; }
.zalo-input-box { border-radius: 24px !important; padding: 8px 16px !important; border: none !important; min-height: 40px !important; }
:root[data-theme="dark"] .zalo-input-box, body[data-theme="dark"] .zalo-input-box { background: var(--wa-bg-input) !important; }
:root[data-theme="light"] .zalo-input-box, body[data-theme="light"] .zalo-input-box { background: var(--wa-bg-input) !important; }
.chat-input { font-size: 15px !important; line-height: 1.5 !important; color: var(--wa-text-primary) !important; -webkit-text-fill-color: var(--wa-text-primary) !important; }
.chat-input::placeholder { color: var(--wa-text-secondary) !important; -webkit-text-fill-color: var(--wa-text-secondary) !important; }
.send-submit-btn { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: var(--primary, #00A884) !important; flex-shrink: 0 !important; box-shadow: none !important; }

/* 11. NAV ICONS */
.nav-icon svg, .icon-btn svg { width: 22px !important; height: 22px !important; stroke: currentColor !important; fill: none !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.z-tool-icon svg { width: 20px !important; height: 20px !important; stroke: currentColor !important; fill: none !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.menu-item svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; fill: none !important; stroke-width: 1.8 !important; }

/* 12. EMOJI PANEL */
.emoji-panel { border-radius: 12px !important; border: none !important; box-shadow: 0 10px 35px rgba(0,0,0,0.35) !important; width: 350px !important; }
:root[data-theme="dark"] .emoji-panel, body[data-theme="dark"] .emoji-panel { background: #233138 !important; }
:root[data-theme="light"] .emoji-panel, body[data-theme="light"] .emoji-panel { background: #FFFFFF !important; }
.emoji-grid { grid-template-columns: repeat(9, 1fr) !important; gap: 4px !important; padding: 8px !important; max-height: 240px !important; }
.emoji-cell { font-size: 22px !important; border-radius: 6px !important; padding: 4px !important; }
:root[data-theme="dark"] .zalo-popup-tabs, :root[data-theme="dark"] .zalo-popup-footer { background: #1B262C !important; border-color: var(--wa-border) !important; }
:root[data-theme="light"] .zalo-popup-tabs, :root[data-theme="light"] .zalo-popup-footer { background: #F5F6F6 !important; }

/* 13. ADMIN BUTTON - Secure hide */
#adminPanelBtn[style*="display: none"], #adminPanelBtn[style*="display:none"] { display: none !important; visibility: hidden !important; pointer-events: none !important; width: 0 !important; height: 0 !important; }

/* 14. FILTER TABS */
.filter-tabs { padding: 0 12px !important; border-bottom: none !important; gap: 4px !important; overflow-x: auto !important; scrollbar-width: none !important; }
.filter-tabs::-webkit-scrollbar { display: none !important; }
.filter-tab { padding: 8px 14px !important; border-radius: 20px !important; font-size: 13px !important; font-weight: 500 !important; white-space: nowrap !important; }
:root[data-theme="dark"] .filter-tab { background: var(--wa-bg-input) !important; color: var(--wa-text-secondary) !important; }
:root[data-theme="light"] .filter-tab { background: #E9EDEF !important; color: var(--wa-text-secondary) !important; }
.filter-tab.active { background: color-mix(in srgb, var(--primary, #25D366) 15%, transparent) !important; color: var(--primary, #25D366) !important; border: none !important; }
.filter-tab.active::after { display: none !important; }

/* 15. MOBILE NAV */
@media (max-width: 768px) {
  .sidebar-icon { height: 56px !important; padding: 0 8px !important; background: var(--wa-bg-header) !important; border-top: 1px solid var(--wa-border) !important; box-shadow: 0 -2px 8px rgba(0,0,0,0.15) !important; }
  .nav-icon { width: 40px !important; height: 40px !important; border-radius: 50% !important; flex-direction: column !important; gap: 2px !important; color: var(--wa-text-secondary) !important; }
  .nav-icon.active { color: var(--primary, #25D366) !important; background: transparent !important; box-shadow: none !important; }
  .nav-icon svg { width: 24px !important; height: 24px !important; }
  .chat-window, #chatWindow { padding: 8px 4px !important; gap: 2px !important; }
  .msg-bubble { max-width: min(300px, 85vw) !important; }
  .zalo-mobile-message-sheet-v711 { border-radius: 16px 16px 0 0 !important; padding-bottom: env(safe-area-inset-bottom, 16px) !important; }
}

/* 16. MESSAGE ACTION MENU */
.msg-actions { transition: opacity 0.18s ease 0.1s, transform 0.18s ease 0.1s, visibility 0.18s ease 0.1s !important; padding: 4px 6px !important; border-radius: 20px !important; gap: 2px !important; }
.msg-row:hover .msg-actions, .msg-row.msg-active .msg-actions { transition-delay: 0s !important; }
.action-icon-btn, .message-copy-btn { width: 30px !important; height: 30px !important; border-radius: 50% !important; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important; }

/* 17. CONTEXT MENU */
@keyframes wa-menu-in { from { opacity: 0; transform: scale(0.92) translateY(-6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.zalo-message-more-v711 { border-radius: 10px !important; border: none !important; padding: 6px 0 !important; min-width: 200px !important; box-shadow: 0 8px 28px rgba(0,0,0,0.3) !important; animation: wa-menu-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both !important; }
:root[data-theme="dark"] .zalo-message-more-v711, body[data-theme="dark"] .zalo-message-more-v711 { background: #233138 !important; }
:root[data-theme="light"] .zalo-message-more-v711, body[data-theme="light"] .zalo-message-more-v711 { background: #FFFFFF !important; }
.zalo-message-more-v711 button { padding: 10px 16px !important; gap: 12px !important; font-size: 14px !important; border-radius: 0 !important; }
.zalo-message-more-v711 button svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; fill: none !important; stroke-width: 1.8 !important; }

/* 18. REPLY QUOTE */
.reply-quote-box { border-left: 4px solid var(--primary, #25D366) !important; border-radius: 4px !important; padding: 6px 10px !important; margin-bottom: 4px !important; font-size: 12.5px !important; }
:root[data-theme="dark"] .reply-quote-box, body[data-theme="dark"] .reply-quote-box { background: rgba(255,255,255,0.06) !important; }
:root[data-theme="light"] .reply-quote-box, body[data-theme="light"] .reply-quote-box { background: rgba(0,0,0,0.05) !important; }
.reply-quote-sender { font-size: 12px !important; font-weight: 700 !important; color: var(--primary, #25D366) !important; margin-bottom: 3px !important; }

/* 19. SETTINGS POPUP */
.settings-popup-menu { border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important; animation: wa-menu-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both !important; }
:root[data-theme="dark"] .settings-popup-menu, body[data-theme="dark"] .settings-popup-menu { background: #233138 !important; border: none !important; }
:root[data-theme="light"] .settings-popup-menu, body[data-theme="light"] .settings-popup-menu { background: #FFFFFF !important; }
.menu-item { padding: 12px 16px !important; font-size: 14px !important; gap: 14px !important; border-radius: 0 !important; }
:root[data-theme="dark"] .menu-item:hover, body[data-theme="dark"] .menu-item:hover { background: rgba(255,255,255,0.06) !important; }
:root[data-theme="light"] .menu-item:hover, body[data-theme="light"] .menu-item:hover { background: #F5F6F6 !important; }

/* 20. SECTION HEADERS & MISC */
.section-header { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; padding: 12px 16px 6px !important; text-transform: none !important; color: var(--wa-text-secondary) !important; }
.msg-row.msg-active .msg-bubble { outline: none !important; filter: brightness(1.08) !important; }
:focus-visible { outline: 2px solid var(--primary, #25D366) !important; outline-offset: 2px !important; }
button:focus:not(:focus-visible) { outline: none !important; }