/* V24.15 SAFE TARGETED UI ONLY
   Preserve the existing PC/mobile layout. Only improve the selected icon's
   water-drop/glass appearance and restore the red unread badge. */

/* Unread is always a clear WhatsApp-style red badge. */
.unread-badge,
.sidebar-menu .unread-badge{
  background:#ef4444 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 2px 7px rgba(239,68,68,.28) !important;
}

/* One selected nav item = one glossy water-drop surface. */
.nav-icon.active,
.sidebar-icon .icon-btn.nav-settings-active{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  color:#fff !important;
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.48) 0%, rgba(255,255,255,.10) 28%, transparent 52%),
    linear-gradient(145deg,
      color-mix(in srgb,var(--primary,#25D366) 96%,white 4%),
      color-mix(in srgb,var(--primary,#25D366) 74%,black 26%)) !important;
  border:1px solid rgba(255,255,255,.42) !important;
  border-radius:20px !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.68),
    inset 0 -7px 13px rgba(0,0,0,.13),
    0 5px 14px color-mix(in srgb,var(--primary,#25D366) 34%,transparent) !important;
  transform:translateY(-1px) !important;
}
.nav-icon.active::before,
.sidebar-icon .icon-btn.nav-settings-active::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  left:12% !important;
  right:12% !important;
  top:4px !important;
  height:38% !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.18),transparent) !important;
  filter:blur(.2px) !important;
  pointer-events:none !important;
}
.nav-icon.active::after,
.sidebar-icon .icon-btn.nav-settings-active::after{
  content:"" !important;
  position:absolute !important;
  left:20% !important;
  right:20% !important;
  bottom:4px !important;
  height:18% !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  filter:blur(4px) !important;
  pointer-events:none !important;
}
.nav-icon.active svg,
.sidebar-icon .icon-btn.nav-settings-active svg{
  position:relative !important;
  z-index:2 !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.22)) !important;
}

@media(max-width:768px){
  /* Keep the original mobile shell. The existing V24.10 focus rule hides the
     nav only while a real conversation is open. Admin remains visible. */
  body:not(.mobile-chat-focus) .sidebar-icon{
    display:flex !important;
  }
  body.mobile-chat-focus .sidebar-icon{
    display:none !important;
  }
  .nav-icon.active,
  .sidebar-icon .icon-btn.nav-settings-active{
    border-radius:19px !important;
    transform:translateY(-1px) !important;
  }
}