/* ============================================================
   layout-fix.css — stops the app rendering too wide / cut off
   on narrow Android and iPhone screens.

   Keep this sheet last in app.html after style.css.
   ============================================================ */

/* 1. Padding no longer adds to element width. */
*, *::before, *::after { box-sizing: border-box; }

/* 2. Clamp the page so nothing can render wider than the screen. */
html, body {
  width: 100%;
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* Keep the single chat grid column constrained to the viewport. Without an
   explicit minmax(0, 1fr), the configurable toolbar's max-content width can
   enlarge the implicit grid track even though the page itself hides overflow. */
.chat-container {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

#controls-header-content {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* 3. Use 100% instead of 100vw. */
.overlay,
#settings-overlay,
#suite-panel-overlay {
  width: 100% !important;
  max-width: 100% !important;
}

/* 4. Respect the display cut-out / rounded edges. */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.mobile-sidebar-rail-btn,
.mobile-chat-icon {
  display: none;
}

.asksary-chat-mark {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  background: var(--chat-rail-color, #60a5fa);
  -webkit-mask: url('/askai.png') center / contain no-repeat;
  mask: url('/askai.png') center / contain no-repeat;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--chat-rail-color, #60a5fa) 45%, transparent));
}

body.temporary-chat-mode .sidebar.rail-open #temp-chat-btn {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, .16) !important;
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .5), 0 0 14px rgba(251, 191, 36, .18) !important;
}

/* Full history panel: keep the heading and tier quiet, then present the three
   utility actions as one unboxed row. Buttons remain semantic for keyboard and
   screen-reader users, but no longer consume three card rows. */
#sidebar.sidebar.open .sidebar-header {
  min-height: 52px !important;
  padding: 10px 14px 8px !important;
  align-items: center !important;
  gap: 8px;
}

#sidebar.sidebar.open #sidebar-header-content {
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1;
}

#sidebar.sidebar.open #sidebar-greeting {
  flex: 0 1 auto;
  margin: 0 !important;
  font-size: .9rem !important;
  line-height: 1;
  white-space: nowrap;
}

#sidebar.sidebar.open .sidebar-tier-row,
#sidebar.sidebar.open #sidebar-user-tier {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  line-height: 1;
  white-space: nowrap;
}

#sidebar.sidebar.open .sidebar-tier-row { gap: 4px !important; }
#sidebar.sidebar.open .sidebar-tier-row {
  min-width: 0;
}
#sidebar.sidebar.open #sidebar-user-tier {
  gap: 3px !important;
  font-size: .67rem !important;
  letter-spacing: .02em !important;
}

/* The desktop layout intentionally renders the open sidebar at 256px. Keep
   the tier pill compact, but never crop its action label. The greeting is the
   flexible item when the row is tight. */
#sidebar.sidebar.open .sidebar-tier-row .header-pill-btn {
  flex: 0 0 auto;
  min-width: max-content;
  max-width: none;
  padding: 3px 6px !important;
  gap: 4px !important;
  overflow: visible;
  font-size: .65rem !important;
  line-height: 1;
  white-space: nowrap;
}

#sidebar.sidebar.open .sidebar-tier-row .header-pill-btn span {
  overflow: visible;
  text-overflow: clip;
}

#sidebar.sidebar.open #close-sidebar {
  flex: 0 0 30px;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  font-size: 1rem;
}

#sidebar.sidebar.open .sidebar-controls {
  gap: 6px !important;
  padding: 6px 14px 9px !important;
}

#sidebar.sidebar.open #new-chat-btn {
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  font-size: .78rem !important;
}

#sidebar.sidebar.open .sidebar-search-container,
#sidebar.sidebar.open #sidebar-search-input {
  height: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
}

#sidebar.sidebar.open .sidebar-search-container {
  position: relative !important;
}

#sidebar.sidebar.open #sidebar-search-input {
  box-sizing: border-box;
  display: block !important;
  padding: 3px 9px 3px 28px !important;
  border-radius: 8px !important;
  font-size: .74rem !important;
  line-height: 1;
}

#sidebar.sidebar.open .sidebar-search-container .search-icon {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: .7rem !important;
  line-height: 1;
  pointer-events: none;
}

#sidebar.sidebar.open .sidebar-utilities-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin: 0 !important;
}

#sidebar.sidebar.open .sidebar-utilities-grid .sidebar-btn {
  width: auto !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 3px !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: .67rem !important;
  line-height: 1;
  white-space: nowrap;
}

#sidebar.sidebar.open .sidebar-utilities-grid .sidebar-btn:hover,
#sidebar.sidebar.open .sidebar-utilities-grid .sidebar-btn:focus-visible {
  background: rgba(255,255,255,.05) !important;
  box-shadow: none !important;
  transform: none !important;
}

#sidebar.sidebar.open .sidebar-utilities-grid .sidebar-btn span {
  margin-left: 0 !important;
}

/* The compact rail belongs exclusively to phones. */
@media (max-width: 768px) {
  html body .sidebar.rail-open:not(.open) {
    width: 64px !important;
    transform: translateX(0) !important;
    overflow: hidden !important;
    background: #0b0c0f !important;
    box-shadow: inset -1px 0 rgba(255,255,255,.09), 5px 0 18px rgba(0,0,0,.24) !important;
  }

  :is(html.light-mode, html.theme-paper, html.theme-frosted-glass, html.theme-contrast-light) body .sidebar.rail-open:not(.open) {
    background: #ffffff !important;
    box-shadow: inset -1px 0 rgba(15,23,42,.12), 5px 0 18px rgba(15,23,42,.12) !important;
  }

  .sidebar.rail-open + .overlay.active {
    opacity: 0 !important;
    pointer-events: auto !important;
  }

  .sidebar.rail-open:not(.open) .mobile-sidebar-rail-btn {
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 12px 10px 8px;
    padding: 0;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--bubble-accent-color, var(--theme-primary, #4a90e2));
    font-size: 1.25rem;
    cursor: pointer;
  }

  .sidebar.rail-open:not(.open) .sidebar-header,
  .sidebar.rail-open:not(.open) .sidebar-search-container,
  .sidebar.rail-open:not(.open) #delete-all-chats-btn {
    display: none !important;
  }

  .sidebar.rail-open:not(.open) .sidebar-controls {
    padding: 4px 10px !important;
    gap: 12px !important;
    align-items: center;
    border: 0 !important;
    overflow: visible;
  }

  .sidebar.rail-open:not(.open) #new-chat-btn,
  .sidebar.rail-open:not(.open) .sidebar-utilities-grid .sidebar-btn {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--bubble-accent-color, var(--theme-primary, #4a90e2)) !important;
    font-size: 1.18rem !important;
  }

  .sidebar.rail-open:not(.open) #new-chat-btn {
    background: rgba(255,255,255,.06) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  }

  .sidebar.rail-open:not(.open) #new-chat-btn span,
  .sidebar.rail-open:not(.open) .sidebar-utilities-grid .sidebar-btn span,
  .sidebar.rail-open:not(.open) .sidebar-footer .sidebar-btn span {
    display: none !important;
  }

  .sidebar.rail-open:not(.open) .sidebar-utilities-grid {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 12px !important;
    margin: 0 !important;
  }

  .sidebar.rail-open:not(.open) #chat-history-list {
    flex: 1 1 auto !important;
    min-height: 0;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .sidebar.rail-open:not(.open) #chat-history-list::-webkit-scrollbar {
    display: none;
  }

  .sidebar.rail-open:not(.open) .history-item {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 13px !important;
    overflow: hidden;
  }

  .sidebar.rail-open:not(.open) .history-item-details,
  .sidebar.rail-open:not(.open) .history-item-actions {
    display: none !important;
  }

  .sidebar.rail-open:not(.open) .mobile-chat-icon {
    display: inline-block;
    opacity: .78;
  }

  .sidebar.rail-open:not(.open) .history-item.active {
    background: color-mix(in srgb, var(--chat-rail-color, #60a5fa) 16%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chat-rail-color, #60a5fa) 52%, transparent) !important;
  }

  .sidebar.rail-open:not(.open) .sidebar-footer {
    margin-top: auto !important;
    padding: 8px 10px 14px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .sidebar.rail-open:not(.open) #user-controls-sidebar,
  .sidebar.rail-open:not(.open) #logged-in-controls {
    width: 44px !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .sidebar.rail-open:not(.open) .sidebar-footer .sidebar-btn {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 13px !important;
  }
}

/* 4b. The top header is tight on phones, so we hide less important
      actions and keep the settings controls easy to hit. */
@media (max-width: 768px) {
  :root { --mobile-sidebar-rail-width: 64px; }

  html body .sidebar {
    width: var(--mobile-sidebar-rail-width) !important;
    transform: translateX(-100%) !important;
    overflow: hidden !important;
    z-index: 999999 !important;
    background: #0b0c0f !important;
    box-shadow: inset -1px 0 rgba(255,255,255,.09), 5px 0 18px rgba(0,0,0,.24) !important;
    transition: width .28s cubic-bezier(.4, 0, .2, 1), transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s ease !important;
  }

  html body .sidebar.rail-open,
  html body .sidebar.open {
    transform: translateX(0) !important;
  }

  html body .sidebar.open {
    width: var(--mobile-sidebar-rail-width) !important;
  }

  :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body .sidebar {
    background: #ffffff !important;
    box-shadow: inset -1px 0 rgba(15,23,42,.12), 5px 0 18px rgba(15,23,42,.12) !important;
  }

  .sidebar.rail-open + .overlay.active {
    opacity: 0 !important;
    pointer-events: auto !important;
  }

  .sidebar.rail-open ~ .main-container #hamburger {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mobile-sidebar-rail-btn {
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 12px 10px 8px;
    padding: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--bubble-accent-color, var(--theme-primary, #4a90e2));
    font-size: 1.25rem;
    cursor: pointer;
  }

  .mobile-sidebar-rail-btn:active {
    background: rgba(255,255,255,.1);
  }

  .sidebar.rail-open .sidebar-header,
  .sidebar.rail-open .sidebar-search-container,
  .sidebar.rail-open #delete-all-chats-btn {
    display: none !important;
  }

  .sidebar.rail-open .sidebar-controls {
    padding: 4px 10px !important;
    gap: 12px !important;
    align-items: center;
    border: 0 !important;
    overflow: visible;
  }

  .sidebar.rail-open #new-chat-btn,
  .sidebar.rail-open .sidebar-utilities-grid .sidebar-btn {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--bubble-accent-color, var(--theme-primary, #4a90e2)) !important;
    font-size: 1.18rem !important;
  }

  .sidebar.rail-open #new-chat-btn {
    background: rgba(255,255,255,.06) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  }

  .sidebar.rail-open #new-chat-btn span,
  .sidebar.rail-open .sidebar-utilities-grid .sidebar-btn span,
  .sidebar.rail-open .sidebar-footer .sidebar-btn span {
    display: none !important;
  }

  .sidebar.rail-open .sidebar-utilities-grid {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 12px !important;
    margin: 0 !important;
  }

  .sidebar.rail-open #open-folder-manager-btn {
    display: none !important;
  }

  .sidebar.rail-open #chat-history-list {
    flex: 1 1 auto !important;
    min-height: 0;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sidebar.rail-open #chat-history-list::-webkit-scrollbar {
    display: none;
  }

  .sidebar.rail-open .history-item {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 13px !important;
    overflow: hidden;
  }

  .sidebar.rail-open .history-item-details,
  .sidebar.rail-open .history-item-actions {
    display: none !important;
  }

  .sidebar.rail-open .mobile-chat-icon {
    display: inline-block;
    opacity: .78;
  }

  .sidebar.rail-open .history-item.active {
    background: color-mix(in srgb, var(--chat-rail-color, #60a5fa) 16%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chat-rail-color, #60a5fa) 52%, transparent) !important;
  }

  .sidebar.rail-open .history-item.active .mobile-chat-icon {
    opacity: 1;
  }

  .sidebar.rail-open .sidebar-footer {
    margin-top: auto !important;
    padding: 8px 10px max(14px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    background: transparent !important;
  }

  .sidebar.rail-open #user-controls-sidebar,
  .sidebar.rail-open #logged-in-controls {
    width: 44px !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .sidebar.rail-open .sidebar-footer .sidebar-btn {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 13px !important;
  }

  .sidebar.rail-open .sidebar-footer .sidebar-btn i {
    margin: 0 !important;
    font-size: 1.12rem !important;
  }

  body.temporary-chat-mode .sidebar.rail-open #temp-chat-btn {
    color: #fbbf24 !important;
    background: rgba(251, 191, 36, .16) !important;
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .5), 0 0 14px rgba(251, 191, 36, .18) !important;
  }

  #controls-header-content {
    gap: 6px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #controls-header-content .header-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  #controls-header-content .model-selector-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #controls-header-content #model-toggle-button {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #controls-header-content #selected-model-name {
    display: inline-block !important;
    max-width: clamp(72px, 24vw, 140px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #controls-header-content .header-right {
    display: flex !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    gap: 2px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-right: 18px !important;
    margin-right: 4px !important;
    position: relative !important;
    z-index: 5 !important;
  }

  #controls-header-content .header-right .header-icon-btn {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #controls-header-content #org-btn,
  #controls-header-content #search-btn {
    display: none !important;
  }

  #controls-header-content #suite-switch-btn {
    display: none !important;
  }

  #controls-header-content #podcast-btn,
  #controls-header-content #settings-btn {
    display: inline-flex !important;
    position: relative !important;
    z-index: 6 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  #controls-header-content #settings-btn {
    margin-right: 4px !important;
  }
}

@media (max-width: 400px) {
  #controls-header-content .header-icon-btn {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    min-width: 34px !important;
    font-size: 1em !important;
  }

  #controls-header-content .header-right {
    gap: 0px !important;
  }

  #controls-header-content #model-toggle-button {
    padding: 6px 9px !important;
    gap: 5px !important;
    font-size: 0.92em !important;
  }

  #controls-header-content .header-left {
    gap: 6px !important;
  }
}

/* 5. Settings and suite overlays should stay inside the viewport. */
#settings-overlay {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  inset: 0;
  height: 100%;
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  overflow: hidden;
}

#universal-settings-modal {
  width: 100%;
  width: min(500px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 85vh !important;
}

#universal-settings-modal .settings-content-container {
  min-width: 0;
  overscroll-behavior: contain;
}

#universal-settings-modal .settings-tabs {
  min-width: 0;
  max-width: 100%;
}

#suite-panel-overlay {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  inset: 0;
  height: 100%;
  overflow: hidden;
}

#suite-panel-overlay .sp-shell,
#suite-panel-overlay .sp-main,
#suite-panel-overlay .sp-body,
#suite-panel-overlay .sp-topbar,
#suite-panel-overlay .sp-sidebar {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 960px) {
  #suite-panel-overlay .sp-shell {
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

@media (max-width: 768px) {
  #universal-settings-modal {
    width: min(500px, calc(100vw - 24px)) !important;
    max-width: min(500px, calc(100vw - 24px)) !important;
    height: auto !important;
    max-height: 85vh !important;
    border-radius: 16px !important;
  }

  #settings-overlay {
    padding:
      max(16px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left)) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #universal-settings-modal .settings-content-container {
    max-height: calc(85vh - 140px) !important;
  }
}

html.perf-lite #settings-overlay,
html.perf-lite #suite-panel-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: var(--app-vw, 100%) !important;
  max-width: var(--app-vw, 100%) !important;
  height: var(--app-vh, 100vh) !important;
  max-height: var(--app-vh, 100vh) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 9999 !important;
}

html.perf-lite #settings-overlay {
  padding: 12px !important;
  align-items: center !important;
  justify-content: center !important;
}

html.perf-lite #universal-settings-modal,
html.perf-lite #profile-settings-modal {
  margin: 0 auto !important;
  width: min(500px, calc(var(--app-vw, 100vw) - 24px)) !important;
  max-width: min(500px, calc(var(--app-vw, 100vw) - 24px)) !important;
  height: auto !important;
  max-height: 85vh !important;
  border-radius: 16px !important;
}

html.perf-lite :is(#universal-settings-modal, #profile-settings-modal) .settings-content-container,
html.perf-lite :is(#universal-settings-modal, #profile-settings-modal) .tab-panel,
html.perf-lite :is(#universal-settings-modal, #profile-settings-modal) .settings-content {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html.perf-lite :is(#universal-settings-modal, #profile-settings-modal) .settings-content-container {
  max-height: calc(85vh - 140px) !important;
  overflow-y: auto !important;
}

@media (max-width: 960px) {
  html.perf-lite #suite-panel-overlay .sp-shell {
    margin: 0 !important;
    width: var(--app-vw, 100%) !important;
    max-width: var(--app-vw, 100%) !important;
    height: var(--app-vh, 100vh) !important;
    max-height: var(--app-vh, 100vh) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  html.perf-lite #suite-panel-overlay .sp-main,
  html.perf-lite #suite-panel-overlay .sp-body,
  html.perf-lite #suite-panel-overlay .sp-topbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
}

@supports not (height: 100dvh) {
  #universal-settings-modal {
    max-height: 85vh !important;
  }

  @media (max-width: 960px) {
    #suite-panel-overlay .sp-shell {
      height: 100vh !important;
      max-height: 100vh !important;
    }
  }

  @media (max-width: 768px) {
    #universal-settings-modal {
      height: auto !important;
      max-height: 85vh !important;
    }
  }
}




#settings-btn {
  position: relative !important;
  z-index: 10001 !important;
  pointer-events: auto !important;
}

#settings-overlay {
  z-index: 10000 !important;
}