/* V24.15 TARGETED POPUP + MOBILE NAV POLISH
   Visual/interaction polish only. No layout shell, Firebase, chat, admin or
   settings logic changes. Loaded after the existing V24.15 safe UI layer. */

/* ---------- Settings popup: explicit light/dark surfaces ---------- */
.settings-popup-menu{
  background:#111b21 !important;
  color:#e9edef !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.38),0 3px 12px rgba(0,0,0,.20) !important;
  backdrop-filter:blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.15) !important;
}
:root[data-theme="dark"] .settings-popup-menu,
body[data-theme="dark"] .settings-popup-menu{
  background:#111b21 !important;
  color:#e9edef !important;
  border-color:#26343d !important;
}
:root[data-theme="light"] .settings-popup-menu,
body[data-theme="light"] .settings-popup-menu{
  background:rgba(255,255,255,.98) !important;
  color:#111b21 !important;
  border-color:#dfe5e8 !important;
  box-shadow:0 18px 42px rgba(17,27,33,.16),0 3px 12px rgba(17,27,33,.08) !important;
}
.settings-popup-menu .menu-item{
  color:inherit !important;
  min-height:42px !important;
  padding:10px 14px !important;
}
.settings-popup-menu .menu-item svg{fill:currentColor !important;opacity:.78}
:root[data-theme="dark"] .settings-popup-menu .menu-item:hover,
body[data-theme="dark"] .settings-popup-menu .menu-item:hover{
  background:#202c33 !important;color:#e9edef !important;
}
:root[data-theme="light"] .settings-popup-menu .menu-item:hover,
body[data-theme="light"] .settings-popup-menu .menu-item:hover{
  background:#f0f2f5 !important;color:#111b21 !important;
}
.settings-popup-menu .menu-divider{background:var(--border-color) !important;opacity:.8}
.settings-popup-menu .menu-item.danger{color:#ef4444 !important}
.settings-popup-menu .menu-item.danger svg{fill:#ef4444 !important}

/* ---------- Account/settings modal: same theme on PC and mobile ---------- */
.account-modal-backdrop{
  background:rgba(0,0,0,.58) !important;
  backdrop-filter:blur(5px) !important;
  -webkit-backdrop-filter:blur(5px) !important;
}
:root[data-theme="dark"] .account-modal-backdrop,
body[data-theme="dark"] .account-modal-backdrop{background:rgba(2,8,15,.72) !important}
:root[data-theme="light"] .account-modal-backdrop,
body[data-theme="light"] .account-modal-backdrop{background:rgba(15,23,42,.22) !important}

.account-modal{
  background:#111b21 !important;
  color:#e9edef !important;
  border:1px solid #26343d !important;
  box-shadow:0 24px 70px rgba(0,0,0,.42) !important;
}
:root[data-theme="light"] .account-modal,
body[data-theme="light"] .account-modal{
  background:#ffffff !important;
  color:#111b21 !important;
  border-color:#dfe5e8 !important;
  box-shadow:0 24px 70px rgba(17,27,33,.18) !important;
}
.account-modal-head{background:inherit !important;color:inherit !important;border-bottom:1px solid var(--border-color) !important}
.account-modal-title{color:inherit !important}
.account-modal-close{color:var(--text-sub) !important}
.account-modal-body{background:inherit !important;color:inherit !important}
.v19-section{color:inherit !important}
.v19-section-title{color:inherit !important}
.v19-label,.v19-note,.v19-status{color:var(--text-sub) !important}
.v19-input,.v19-select{
  background:#202c33 !important;
  color:#e9edef !important;
  border-color:#2a3942 !important;
}
:root[data-theme="light"] .v19-input,
:root[data-theme="light"] .v19-select,
body[data-theme="light"] .v19-input,
body[data-theme="light"] .v19-select{
  background:#ffffff !important;
  color:#111b21 !important;
  border-color:#cfd8dc !important;
}
:root[data-theme="dark"] .v19-btn-secondary,
body[data-theme="dark"] .v19-btn-secondary{background:#202c33 !important;color:#e9edef !important;border-color:#2a3942 !important}
:root[data-theme="light"] .v19-btn-secondary,
body[data-theme="light"] .v19-btn-secondary{background:#f0f2f5 !important;color:#111b21 !important;border-color:#d7dde1 !important}
.notification-settings-section{color:inherit !important}
:root[data-theme="dark"] .chat-notification-setting,
body[data-theme="dark"] .chat-notification-setting{background:#17232b !important;border-color:#2a3942 !important;color:#e9edef !important}
:root[data-theme="light"] .chat-notification-setting,
body[data-theme="light"] .chat-notification-setting{background:#f7f8f9 !important;border-color:#e1e7ea !important;color:#111b21 !important}

/* ---------- Admin popup/modal surfaces ---------- */
:root[data-theme="dark"] .admin-modal,
body[data-theme="dark"] .admin-modal{background:rgba(0,0,0,.70) !important}
:root[data-theme="light"] .admin-modal,
body[data-theme="light"] .admin-modal{background:rgba(15,23,42,.20) !important}
:root[data-theme="dark"] .admin-modal-content,
body[data-theme="dark"] .admin-modal-content{background:#111b21 !important;color:#e9edef !important}
:root[data-theme="light"] .admin-modal-content,
body[data-theme="light"] .admin-modal-content{background:#fff !important;color:#111b21 !important}

/* ---------- Mobile nav: more responsive, larger hit target, smoother glass ---------- */
@media (max-width:767px){
  .sidebar-icon .nav-icon,
  .sidebar-icon > .nav-icon,
  .sidebar-icon .icon-btn,
  .sidebar-icon > .icon-btn{
    touch-action:manipulation !important;
    -webkit-user-select:none !important;
    user-select:none !important;
    -webkit-tap-highlight-color:transparent !important;
    cursor:pointer !important;
    transition:transform .16s cubic-bezier(.2,.8,.2,1),background .18s ease,box-shadow .18s ease,filter .18s ease !important;
  }
  .sidebar-icon .nav-icon:active,
  .sidebar-icon > .nav-icon:active,
  .sidebar-icon .icon-btn:active,
  .sidebar-icon > .icon-btn:active{
    transform:scale(.94) !important;
  }

  /* A single iPhone-like reflective water surface for the selected item. */
  .sidebar-icon .nav-icon.active,
  .sidebar-icon > .nav-icon.active,
  .sidebar-icon .icon-btn.nav-settings-active,
  .sidebar-icon > .icon-btn.nav-settings-active{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    background:
      radial-gradient(115% 70% at 50% -10%,rgba(255,255,255,.58),rgba(255,255,255,.10) 36%,transparent 58%),
      linear-gradient(150deg,
        color-mix(in srgb,var(--primary,#25D366) 96%,white 4%),
        color-mix(in srgb,var(--primary,#25D366) 80%,black 20%)) !important;
    border:1px solid rgba(255,255,255,.44) !important;
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.72),
      inset 0 -8px 14px rgba(0,0,0,.12),
      0 5px 12px color-mix(in srgb,var(--primary,#25D366) 28%,transparent) !important;
    filter:saturate(1.06) !important;
    transform:translateY(-1px) !important;
  }
  .sidebar-icon .nav-icon.active::before,
  .sidebar-icon > .nav-icon.active::before,
  .sidebar-icon .icon-btn.nav-settings-active::before,
  .sidebar-icon > .icon-btn.nav-settings-active::before{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;
    left:13% !important;
    right:13% !important;
    top:4px !important;
    height:34% !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.18),transparent) !important;
    opacity:.9 !important;
    pointer-events:none !important;
  }
  .sidebar-icon .nav-icon.active::after,
  .sidebar-icon > .nav-icon.active::after,
  .sidebar-icon .icon-btn.nav-settings-active::after,
  .sidebar-icon > .icon-btn.nav-settings-active::after{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;
    left:22% !important;
    right:22% !important;
    bottom:5px !important;
    height:15% !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.14) !important;
    filter:blur(3px) !important;
    pointer-events:none !important;
  }
  .sidebar-icon .nav-icon.active svg,
  .sidebar-icon > .nav-icon.active svg,
  .sidebar-icon .icon-btn.nav-settings-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,.24)) !important;
  }

  /* Popup stays comfortably above the bottom nav and respects the active theme. */
  .settings-popup-menu{
    max-width:calc(100vw - 20px) !important;
    border-radius:16px !important;
    overflow:hidden !important;
  }
}

/* Prevent a transient focus outline from looking like a second selected bubble. */
.sidebar-icon .nav-icon:focus-visible,
.sidebar-icon .icon-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--primary,#25D366) 70%,white 30%) !important;outline-offset:2px !important}