/* ==========================================================================
   WhatsApp for Android v2.24 — Luxury Obsidian & Brushed Gold Glass Theme
   1:1 Reference Match with Full Gold Glass Laser & Corner Effects Preserved
   ========================================================================== */

:root {
  --wa-green-primary: #f5c644;
  --wa-green-accent: #ffd009;
  --wa-green-bright: #ffee48;
  --wa-dark-bg: #08090c;
  --wa-dark-header: rgba(16, 17, 22, 0.94);
  --wa-dark-card: rgba(22, 24, 30, 0.88);
  --wa-dark-card-hover: rgba(245, 198, 68, 0.08);
  --wa-dark-border: rgba(255, 255, 255, 0.11);
  --wa-dark-bubble-out: #3d2d0d;
  --wa-dark-bubble-in: #1c1e24;
  --wa-dark-text-primary: #f5f6f8;
  --wa-dark-text-secondary: #9aa0a6;
}

/* ==========================================================================
   1. Outer Container & Split Panes (Preserving Chamfer & Perimeter Laser)
   ========================================================================== */
#wa-messenger-root .wa-app-container {
  background: transparent !important;
  padding: 1.2px !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#wa-messenger-root .wa-left-pane {
  background: linear-gradient(180deg, rgba(14, 16, 22, 0.94) 0%, rgba(8, 9, 13, 0.97) 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  position: relative;
}

/* Top golden specular gleam on Left & Right headers */
#wa-messenger-root .wa-top-header-left,
#wa-messenger-root .wa-top-header-right {
  position: relative;
  background: linear-gradient(180deg, rgba(24, 25, 32, 0.94) 0%, rgba(13, 14, 19, 0.96) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

#wa-messenger-root .wa-top-header-left::before,
#wa-messenger-root .wa-top-header-right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 232, 138, 0.72) 50%, transparent 100%);
  box-shadow: 0 0 8px rgba(245, 203, 92, 0.45);
  pointer-events: none;
}

/* ==========================================================================
   2. Metallic Gold WhatsApp Branding & Header Elements
   ========================================================================== */
#wa-messenger-root .wa-brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: linear-gradient(180deg, #fff7c8 0%, #f5c442 52%, #c68410 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(245, 196, 66, 0.45));
}

#wa-messenger-root .wa-brand-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fff9db 0%, #f5cb5c 52%, #cf931f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(245, 198, 68, 0.25));
}

#wa-messenger-root .wa-channel-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 1.5px 8px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(96, 70, 18, 0.72) 0%, rgba(45, 33, 9, 0.90) 100%);
  border: 1px solid rgba(242, 195, 72, 0.52);
  color: #f7d26a;
  box-shadow: 0 0 8px rgba(240, 192, 68, 0.16);
}

/* ==========================================================================
   3. Search Input Box with Double Rim & Gold Glass Laser Trace
   ========================================================================== */
#wa-messenger-root .wa-search-box {
  position: relative;
  isolation: isolate;
  border-radius: 10px !important;
  background: rgba(16, 18, 23, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.75),
    0 0 0 2px rgba(255, 255, 255, 0.03) !important;
}

#wa-messenger-root .wa-search-box::before,
#wa-messenger-root .wa-input-pill::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--laser-angle),
    transparent 0deg,
    transparent 305deg,
    rgba(255, 255, 255, 0.15) 315deg,
    rgba(255, 240, 175, 0.78) 338deg,
    rgba(255, 255, 255, 0.92) 344deg,
    transparent 355deg,
    transparent 360deg
  );
  animation: reference-laser-trace 11s linear infinite;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

#wa-messenger-root .wa-search-box input[type="text"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #e9edef !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   4. Chat List Rows (Authentic Gold Glass Smoked Selection in Overall Style)
   ========================================================================== */
#wa-messenger-root .wa-chat-row {
  position: relative;
  margin: 4px 10px;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
  z-index: 2;
  background: transparent;
}

#wa-messenger-root .wa-chat-row:hover:not(.wa-chat-row-active) {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(225, 222, 231, 0.10);
}

#wa-messenger-root .wa-chat-row-active {
  background: linear-gradient(135deg, rgba(244, 217, 34, 0.12) 0%, rgba(55, 45, 30, 0.28) 50%, rgba(18, 15, 22, 0.65) 100%) !important;
  border: 1px solid rgba(244, 217, 34, 0.38) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(244, 217, 34, 0.10),
    inset 0 1px 0 rgba(255, 248, 200, 0.24) !important;
}

#wa-messenger-root .wa-chat-row-active::before {
  display: none !important;
}

/* Avatars */
#wa-messenger-root .wa-avatar-gold-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3d3118 0%, #1b150a 100%);
  border: 1.5px solid rgba(242, 194, 72, 0.82);
  box-shadow:
    0 0 12px rgba(242, 194, 72, 0.35),
    inset 0 0 8px rgba(242, 194, 72, 0.20);
  color: #b8b3a8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

#wa-messenger-root .wa-avatar-slate-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #343b45 0%, #1d2128 100%);
  border: 1.5px solid rgba(210, 220, 235, 0.28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.48);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

#wa-messenger-root .wa-header-avatar-gold {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3a2d13 0%, #161106 100%);
  border: 1.5px solid #f2c44e;
  box-shadow:
    0 0 14px rgba(242, 196, 78, 0.48),
    inset 0 0 8px rgba(242, 196, 78, 0.24);
  color: #f5c956;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* ==========================================================================
   5. Golden Silk Waves & Stardust Wallpaper (Left & Right Panes)
   ========================================================================== */
#wa-messenger-root .wa-silk-waves-left {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 58px;
  height: 395px;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

#wa-messenger-root .wa-silk-waves-right {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

#wa-messenger-root .wa-wallpaper-dark,
#wa-messenger-root .wa-wallpaper-light {
  background-color: rgba(7, 8, 11, 0.94) !important;
  background-image:
    radial-gradient(rgba(245, 198, 68, 0.08) 1px, transparent 0),
    radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 0) !important;
  background-size: 34px 34px !important;
  background-position: 0 0, 17px 17px !important;
}

/* ==========================================================================
   6. Voice Message Bubbles (Incoming Matte Dark vs Outgoing Golden Glass)
   ========================================================================== */
#wa-messenger-root .wa-bubble-in {
  position: relative;
  background: linear-gradient(135deg, rgba(20, 24, 32, 0.95) 0%, rgba(13, 15, 21, 0.98) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  color: #e9edef !important;
  border-radius: 12px !important;
  border-top-left-radius: 3px !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(56, 189, 248, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px);
  margin-left: 6px;
}

#wa-messenger-root .wa-bubble-in::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 8px solid rgba(20, 24, 32, 0.95);
  border-left: 8px solid transparent;
}

#wa-messenger-root .wa-bubble-out {
  position: relative;
  background:
    radial-gradient(ellipse 70% 25% at 75% 0%, rgba(255, 246, 190, 0.28) 0%, transparent 100%),
    linear-gradient(135deg, rgba(118, 88, 22, 0.78) 0%, rgba(58, 42, 10, 0.90) 52%, rgba(96, 70, 16, 0.82) 100%) !important;
  border: 1px solid rgba(245, 198, 72, 0.60) !important;
  color: #f8f6f0 !important;
  border-radius: 12px !important;
  border-top-right-radius: 3px !important;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(240, 190, 55, 0.16),
    inset 0 1px 1px rgba(255, 246, 195, 0.55),
    inset 0 -1px 1px rgba(245, 202, 82, 0.35) !important;
  backdrop-filter: blur(10px);
  margin-right: 6px;
}

#wa-messenger-root .wa-bubble-out::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -7px;
  width: 0;
  height: 0;
  border-top: 8px solid rgba(245, 198, 72, 0.65);
  border-right: 8px solid transparent;
}

/* Play Buttons: Incoming (Ice Cyan Slate) vs Outgoing (Solid 3D Metallic Gold) */
#wa-messenger-root .wa-play-btn-in {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(30, 58, 90, 0.95) 0%, rgba(12, 22, 36, 0.98) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.85);
  box-shadow:
    0 0 10px rgba(56, 189, 248, 0.35),
    inset 0 0 6px rgba(56, 189, 248, 0.20);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: transform 0.15s ease, filter 0.15s ease;
}

#wa-messenger-root .wa-play-btn-in:hover {
  transform: scale(1.06);
  filter: brightness(1.15);
}

#wa-messenger-root .wa-play-btn-out {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff4ad 0%, #f2bf38 52%, #c68612 100%) !important;
  border: 1px solid #fff7c2 !important;
  box-shadow:
    0 0 12px rgba(242, 191, 56, 0.55),
    inset 0 1px 2px rgba(255, 255, 255, 0.88) !important;
  color: #1e1605 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: transform 0.15s ease, filter 0.15s ease;
}

#wa-messenger-root .wa-play-btn-out:hover {
  transform: scale(1.06);
  filter: brightness(1.10);
}

/* Waveform Bars */
#wa-messenger-root .wa-waveform-bar {
  width: 2px;
  border-radius: 999px;
  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease;
}

#wa-messenger-root .wa-waveform-bar-in {
  background: rgba(148, 163, 184, 0.65);
}

#wa-messenger-root .wa-waveform-bar-in.played {
  background: #38bdf8 !important;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.75) !important;
}

#wa-messenger-root .wa-waveform-bar-out {
  background: rgba(245, 203, 92, 0.45);
}

#wa-messenger-root .wa-waveform-bar-out.played {
  background: #fff6c2 !important;
  box-shadow: 0 0 6px rgba(255, 246, 194, 0.85) !important;
}

/* Drawer Avatar, Actions and Animations */
#wa-messenger-root .wa-drawer-avatar-gold {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #4a3a18 0%, #1c1508 100%);
  border: 2px solid #f2c44e;
  box-shadow: 0 0 18px rgba(242, 196, 78, 0.4), inset 0 0 10px rgba(242, 196, 78, 0.3);
  color: #fff4b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
}

#wa-messenger-root .wa-btn-gold-action {
  background: linear-gradient(135deg, #f7d268 0%, #e5b02f 50%, #bc8310 100%);
  color: #141004;
  font-weight: 600;
  border: 1px solid rgba(255, 245, 180, 0.6);
  box-shadow: 0 4px 14px rgba(229, 176, 47, 0.32);
}

#wa-messenger-root .wa-btn-gold-action:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(229, 176, 47, 0.48);
}

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
.animate-slide-left {
  animation: slideLeft 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#wa-messenger-root .wa-waveform-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffe885;
  box-shadow: 0 0 8px rgba(255, 232, 133, 0.95);
  flex-shrink: 0;
}

/* ==========================================================================
   7. Floating Action Buttons (Meta AI Circle & Brushed Gold New Chat)
   ========================================================================== */
#wa-messenger-root .wa-fab-meta {
  position: absolute;
  bottom: 160px;
  right: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 35%, #262934 0%, #14161c 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.68),
    inset 0 1px 1px rgba(255, 255, 255, 0.16) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
  z-index: 25;
}

#wa-messenger-root .wa-fab-meta:hover {
  transform: scale(1.07);
}

#wa-messenger-root .wa-fab {
  position: absolute;
  bottom: 98px;
  right: 18px;
  width: 50px;
  height: 50px;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #fff1a0 0%, #f2bf38 52%, #c68612 100%) !important;
  border: 1px solid #fff5be !important;
  color: #1c1505 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow:
    0 6px 22px rgba(242, 191, 56, 0.55),
    inset 0 1px 2px rgba(255, 255, 255, 0.88) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s;
  z-index: 25;
}

#wa-messenger-root .wa-fab:hover {
  transform: scale(1.06);
  filter: brightness(1.06);
}

/* ==========================================================================
   8. Bottom Navigation Bar with Circular Golden Orb for Active Tab
   ========================================================================== */
#wa-messenger-root #wa-bottom-nav {
  position: relative;
  background: linear-gradient(180deg, rgba(18, 19, 24, 0.96) 0%, rgba(11, 12, 16, 0.99) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}

#wa-messenger-root #wa-bottom-nav::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 4%;
  width: 20%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, #f5cb5c 50%, transparent 100%);
  box-shadow: 0 0 8px rgba(245, 203, 92, 0.80);
}

#wa-messenger-root .wa-nav-orb-active {
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(242, 192, 68, 0.30) 0%, rgba(120, 88, 18, 0.18) 70%, rgba(30, 22, 6, 0.42) 100%) !important;
  border: 1.5px solid rgba(245, 202, 88, 0.72) !important;
  box-shadow:
    0 0 14px rgba(245, 198, 68, 0.38),
    inset 0 0 10px rgba(245, 198, 68, 0.24) !important;
  color: #ffe484 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#wa-messenger-root .wa-nav-orb-inactive {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   9. Bottom Message Input Bar & 3D Gold Microphone Orb
   ========================================================================== */
#wa-messenger-root .wa-input-footer {
  background: linear-gradient(180deg, rgba(18, 20, 25, 0.95) 0%, rgba(12, 13, 17, 0.98) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}

#wa-messenger-root .wa-input-pill {
  position: relative;
  isolation: isolate;
  border-radius: 9999px !important;
  background: rgba(24, 26, 32, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.65) !important;
}

#wa-messenger-root .wa-input-pill textarea {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #e9edef !important;
  border-radius: 0 !important;
}

#wa-messenger-root .wa-mic-orb {
  width: 46px;
  height: 46px;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #fff3a8 0%, #f2bf38 52%, #c68612 100%) !important;
  border: 1.5px solid #fff7c2 !important;
  color: #1c1505 !important;
  box-shadow:
    0 0 20px rgba(242, 191, 56, 0.62),
    inset 0 1px 2px rgba(255, 255, 255, 0.90) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

#wa-messenger-root .wa-mic-orb:hover {
  transform: scale(1.05);
  filter: brightness(1.08);
}

/* Floating Date Badge */
#wa-messenger-root .wa-date-pill {
  background-color: rgba(26, 28, 35, 0.90) !important;
  border: 1px solid rgba(245, 198, 72, 0.25) !important;
  backdrop-filter: blur(8px) !important;
  color: #f5cb5c !important;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  text-align: center;
  margin: 12px auto;
  display: inline-block;
}

/* Animations & Utilities */
.wa-bottom-sheet {
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.wa-reactions-bar {
  animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(10px) scale(0.85); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ringPulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 0.3; }
  100% { transform: scale(1); opacity: 0.8; }
}
.wa-call-pulse {
  animation: ringPulse 2s infinite ease-in-out;
}

@media (max-width: 767px) {
  body.wa-mobile-active header,
  body.wa-mobile-active aside {
    display: none !important;
  }
  body.wa-mobile-active main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  body.wa-mobile-active .wa-app-container {
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 50 !important;
  }
}

#wa-messages-feed,
.wa-app-container,
.wa-right-pane,
#tab-messages {
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}