.chat-back-btn {
  display: none;
  background: transparent; border: none; color: var(--text, #f0eeff);
  cursor: pointer; padding: 4px 6px 4px 0; align-items: center;
}

.pp-back { display: none; }


.bottom-nav { display: none; }

/* Safety guard: these overlays sit ABOVE the topbar (z-index 200). When closed
   they must never intercept clicks, or the topbar/nav buttons become dead even
   though the overlay is invisible. Forced regardless of any page's own CSS. */
.modal-overlay:not(.open),
.modal-backdrop:not(.open),
.lightbox:not(.open),
.account-dropdown:not(.open) { pointer-events: none !important; }

/* Password-manager extensions (Bitwarden, 1Password, LastPass, Dashlane) inject
   a fixed, max-z-index "save login?" bar at the top-right that lingers invisibly
   after login and eats clicks on the navbar. Make its host click-through so it
   can't block the topbar. (pointer-events inherits into the closed shadow DOM.) */
bit-notification-bar-root,
[data-bw-iframe], com-1password-notification, .op-notification,
#lpiframeoverlaycontainer, [id^="dashlane"] { pointer-events: none !important; }

@media (max-width: 900px) {
  
  body { padding-left: 0 !important; }

  .sidebar {
    width: 264px !important;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 130;
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.5);
  }
  html.nav-open .sidebar { transform: translateX(0); }

  

  .sb-col body { padding-left: 0 !important; }
  .sb-col .sidebar { width: 264px !important; }
  .sb-col .nav-label,
  .sb-col .lang-selector,
  .sb-col .sidebar-legal,
  .sb-col .sidebar-footer .nav-item .nav-label { display: revert !important; }
  .sb-col .nav-item { justify-content: flex-start !important; padding: 12px 14px !important; gap: 12px !important; }

  
  .nav-overlay {
    position: fixed; inset: 0; background: rgba(10, 8, 20, 0.4);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 120;
  }
  html.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }

  .sidebar-toggle { display: flex !important; }

  
  .chat-list-panel { width: 100% !important; border-right: none; }
  .chat-panel { display: none; }
  body.chat-open .chat-list-panel { display: none; }
  body.chat-open .chat-panel { display: flex; }

  
  .profile-panel {
    position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: 0;
    width: 100% !important; z-index: 140; border-left: none;
  }

  .chat-back-btn { display: inline-flex; }

  
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    height: 56px; z-index: 125;
    background: #0d0a1a; border-top: 1px solid var(--border, rgba(255,255,255,0.08));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; text-decoration: none; color: var(--text-muted, #7a7a9a);
    font-size: 10px; font-weight: 600; font-family: 'Montserrat', sans-serif;
    transition: color 0.15s;
  }
  .bn-item.active { color: var(--accent, #8c64ff); }
  .bn-item svg { display: block; }

  
  body { padding-bottom: 56px; }
  .main { padding-bottom: 56px; }

  

  body.chat-open .bottom-nav { display: none; }
  body.chat-open { padding-bottom: 0; }
  html.nav-open .bottom-nav { display: none; }
  .chat-list-panel { height: calc(100vh - var(--topbar-h) - 56px) !important; }

  .sb-account { position: relative; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); }
  .sb-account .account-btn { display: flex !important; width: 100%; justify-content: flex-start; }
  .sb-account .account-name { max-width: none; flex: 1; }
  .sb-account .account-dropdown { top: calc(100% + 6px); left: 0; right: 0; width: auto; }
  html.is-guest .sb-account { display: none !important; }

  /* Profile panel: tappable avatar opens it; a top-left arrow closes it. */
  .contact-avatar { cursor: pointer; }
  .pp-back {
    display: flex; position: absolute; top: 10px; left: 10px; z-index: 6;
    width: 38px; height: 38px; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.4); border: none; border-radius: 50%; color: #fff; cursor: pointer;
  }
  .profile-panel .pp-close { display: none; }            /* mobile uses the back arrow instead */
  .profile-panel .pp-tabs { padding-left: 50px; }        /* clear the back arrow */
}

@media (max-width: 640px) {
  

  .presets-scroll { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  
  .preset-name { font-size: 16px !important; }
  .preset-desc { font-size: 12px !important; }
  .preset-card-body { padding: 12px 12px 14px !important; }
}

@media (max-width: 560px) {
  
  .pp-about   { grid-template-columns: 1fr !important; }
  .field-row  { grid-template-columns: 1fr !important; }
  .pp-gallery { grid-template-columns: 1fr 1fr !important; }

  
  .topbar-logo { font-size: 15px !important; }
  .list-header { padding: 16px 14px 12px !important; }
}