/* Modal System - Compatible with Skeleton CSS */

:root {
  --modal-backdrop: rgba(10, 10, 15, 0.6);
  --modal-radius: 30px;
  --modal-radius-mobile: 24px;
  --modal-shadow: 0 34px 72px -36px
    color-mix(in srgb, var(--text-color) 46%, transparent);
  --modal-border: 1px solid var(--border-color, #e2e8f0);
  --modal-surface: var(--card-bg, var(--container-bg, #ffffff));
  --modal-header-bg: rgba(0, 0, 0, 0.02);
}

body.theme-dark {
  --modal-backdrop: rgba(0, 0, 0, 0.65);
  --modal-shadow: 0 36px 76px -38px color-mix(in srgb, black 78%, transparent);
  --modal-border: 1px solid rgba(255, 255, 255, 0.08);
  --modal-surface: var(--card-bg, var(--container-bg, #0b1220));
  --modal-header-bg: rgba(255, 255, 255, 0.03);
}

/* Modal backdrop/overlay - hidden by default */
.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background-color: var(--modal-backdrop) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  backdrop-filter: blur(14px) saturate(124%);
  -webkit-backdrop-filter: blur(14px) saturate(124%);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease !important;
}

/* Stacked dialogs: only the topmost paints the backdrop.
 *
 * Every .modal carries its own 0.65 dim plus a 14px blur, so a dialog opened
 * over another compounded to roughly 0.88 and blurred twice - the stack read as
 * a murky slab rather than two surfaces. Closed modals are removed from the DOM
 * (see closeModalById), so a later sibling always means one is genuinely on top;
 * .hide and .modal-closing are excluded to avoid a flash while one animates out.
 */
.modal:has(~ .modal:not(.hide):not(.modal-closing)) {
  background-color: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The soft keyboard covers the bottom of the page without shrinking the layout
   viewport, so an `inset: 0` overlay keeps its full height and a sheet anchored
   to its bottom edge ends up behind the keyboard. `base_modal.js` measures how
   much is covered and publishes it as `--modal-kb`.

   Deliberately an inset off `bottom` rather than a height. With nothing over
   the page `--modal-kb` is 0 and this is exactly `inset: 0`, so the sheet's
   resting position is pinned to the bottom edge by the box itself and no
   measurement can move it. Sizing the overlay off a measured height is what let
   one bad visualViewport reading settle a sheet in the wrong place: WKWebView
   does not hold `scale` at 1, the clamp that should have caught it was gated on
   exactly that, and the raw mid-scroll box went through.

   `--modal-vvtop` is the other half of the same pin, and it is not optional on
   iOS. Focusing a field there scrolls the focused input into view by moving the
   *visual* viewport; this overlay is `position: fixed`, so it is laid out
   against the *layout* viewport and stays behind, which puts it above the part
   of the screen the user can see and takes the dialog off the top. Starting the
   box at the scroll offset - and ending it at `--modal-kb`, which is measured
   from the same offset - makes the overlay exactly the visual viewport, so it
   travels with the scroll instead of being left by it. It stays 0 whenever
   nothing is focused, which is every case except a keyboard. */
body[data-mobile] .modal {
  top: var(--modal-vvtop, 0px) !important;
  height: var(--modal-vvh, 100%) !important;
  bottom: auto !important;
}

body[data-mobile]:has(
    .modal:not(.hide):not(.modal-closing) .modal-content:not(.modal-settings)
  ) {
  background: var(--modal-gap-surface);
}

body[data-mobile]:has(
    .modal:not(.hide):not(.modal-closing) .modal-content:not(.modal-settings)
  )::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--modal-gap, 0px);
  background: var(--modal-gap-surface, var(--modal-surface));
  pointer-events: none;
  z-index: 100000;
}

body[data-mobile] .modal.modal-tween {
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    background-color var(--modal-enter-ms, 0ms) ease,
    backdrop-filter var(--modal-enter-ms, 0ms) ease,
    -webkit-backdrop-filter var(--modal-enter-ms, 0ms) ease !important;
}

body[data-mobile] .modal.modal-tween.modal-closing {
  background-color: transparent !important;
  backdrop-filter: blur(0) saturate(100%);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    background-color var(--modal-exit-ms, 0ms) ease,
    backdrop-filter var(--modal-exit-ms, 0ms) ease,
    -webkit-backdrop-filter var(--modal-exit-ms, 0ms) ease !important;
}

@starting-style {
  body[data-mobile] .modal.modal-tween:not(.hide) {
    background-color: transparent !important;
    backdrop-filter: blur(0) saturate(100%);
    -webkit-backdrop-filter: blur(0) saturate(100%);
  }
}

body[data-mobile] .modal-content {
  max-height: calc(100% - 24px) !important;
}

/* Pinned to the bottom edge the same way the tab bar's own sheet is
   (mobile/css/tabs.css: `position: fixed; left/right/bottom: 0`), and for the
   same reason: that sheet is the one dialog in the app whose placement has
   never been wrong.

   The alternative, and what this used to be, is a flex item aligned to the end
   of an overlay whose height is computed first. Then the sheet is only ever as
   right as that computation, and every way of getting it wrong - a stale
   visualViewport read, a keyboard inset, a stylesheet that did not load - moves
   the dialog. Anchoring the card itself takes the arithmetic out of the path:
   `bottom: 0` cannot resolve to the wrong place. */
body[data-mobile] .modal-content:not(.modal-settings) {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* The sheet's motion belongs to TweenKit here, and it will not take it while
     a stylesheet is still animating the same card: `slide()` stands down on a
     running `animationName`, because a CSS animation overrides an inline
     transform for as long as it lasts and the two would fight.

     So `modal-pop` below does not merely play alongside the slide - it
     silently replaces it. A project that never happened to clear it got the
     desktop pop on its sheets and no sheet motion at all, with nothing to see
     in the catalogue or the console to say why. Clearing it here is what makes
     the catalogue's surfaces true on every project rather than on the one
     whose own dialog CSS cleared it by accident.

     `.modal-settings` is excluded throughout this block: it is not a sheet on
     this surface, so it keeps the pop. */
  animation: none !important;
}

/* Hide modal by default */
.modal.hide {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Modal content box */
.modal-content {
  background: var(--modal-surface) !important;
  border: none !important;
  border-radius: var(--modal-radius) !important;
  width: min(640px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 64px) !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 0 0 1px var(--border-color),
    var(--modal-shadow) !important;
  position: relative !important;
  margin: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  animation: modal-pop 0.18s ease;
}

body[data-mobile] .modal.modal-tween .modal-content:not(.modal-settings) {
  animation: none !important;
}

@keyframes modal-pop {
  from {
    transform: translateY(8px) scale(0.985);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Full width modal */
.modal-content.modal-full-width {
  max-width: min(1200px, calc(100vw - 120px)) !important;
  width: min(1200px, calc(100vw - 120px)) !important;
}

/* Full width modal without structured header/body/footer - add padding */
/* Default: add padding to full-width modals */
.modal-content.modal-full-width {
  padding: 24px 32px !important;
  overflow-y: auto !important;
}

/* Remove padding when structured elements exist (they have their own padding) */
.modal-content.modal-full-width:has(.modal-header),
.modal-content.modal-full-width:has(.modal-body),
.modal-content.modal-full-width:has(.modal-footer) {
  padding: 0 !important;
}

/* Close button positioning in full-width modals */
.modal-content.modal-full-width > .close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 10 !important;
}

/* Heading in full-width modals */
.modal-content.modal-full-width > h2 {
  margin: 0 0 20px 0 !important;
  padding-right: 40px !important;
  color: var(--heading-color, var(--text-color, #0f172a)) !important;
  font-weight: 700 !important;
  font-size: 28px !important;
}

/* Form groups in full-width modals */
.modal-content.modal-full-width .form-group {
  margin-bottom: 20px !important;
}

.modal-content.modal-full-width .form-group label:not(.toggle-switch) {
  display: block !important;
  margin-bottom: 8px !important;
  font-weight: 600 !important;
  color: var(--heading-color, var(--text-color, #0f172a)) !important;
}

.modal-content.modal-full-width .form-group .form-control {
  width: 100% !important;
  box-sizing: border-box !important;
}

.modal-content.modal-full-width .form-group .form-text {
  display: block !important;
  margin-top: 6px !important;
  font-size: 14px !important;
  color: var(--muted-text, #6b7280) !important;
}

/* Alert styling in full-width modals */
.modal-content.modal-full-width > .alert {
  margin-bottom: 24px !important;
  padding: 12px 16px !important;
}

/* Responsive grid for AI Blog Generator form fields */
.modal-content.modal-full-width [style*='grid-template-columns: 1fr 1fr 1fr'] {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 16px !important;
}

@media (max-width: 1024px) {
  .modal-content.modal-full-width
    [style*='grid-template-columns: 1fr 1fr 1fr'] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 768px) {
  .modal-content.modal-full-width
    [style*='grid-template-columns: 1fr 1fr 1fr'] {
    grid-template-columns: 1fr !important;
  }
}

/* Button container in full-width modals */
.modal-content.modal-full-width > div[style*='margin-top'] {
  margin-top: 24px !important;
  padding-top: 24px !important;
  border-top: var(--modal-border) !important;
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Modal header */
.modal-header {
  padding: 4px 18px !important;
  border-bottom: var(--modal-border) !important;
  background: var(--modal-header-bg) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.modal-header h3,
.modal-header h2 {
  margin: 0 !important;
  color: var(--heading-color, var(--text-color, #0f172a)) !important;
  font-weight: 800 !important;
  font-size: 30px !important;
  line-height: 1.28 !important;
  letter-spacing: -0.5px !important;
}

.modal-header__titles {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.modal-header__title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.modal-header__icon {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  background: color-mix(
    in srgb,
    var(--primary-blue) 14%,
    transparent
  ) !important;
  color: var(--primary-blue) !important;
  font-size: 15px !important;
}

.modal-header__icon i {
  margin: 0 !important;
}

.modal-header__subtitle {
  margin: 0 !important;
  color: var(--muted-text, #6b7280) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* Modal body */
.modal-body {
  padding: 8px 22px 10px !important;
  color: var(--text-color, #1f2937) !important;
  line-height: 1.6 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto !important;
  word-break: break-word !important;
}

/* Modal footer - borderless, blends into the body rather than a divided bar */
.modal-footer {
  padding: 8px 22px 16px !important;
  border-top: none !important;
  background: transparent !important;
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
}

/* Footer/action buttons: pill shape, ring instead of border, no lift-jitter -
   matches the framework's other pill controls (navbar CTA, footer chips). */
.modal-footer button,
.modal-footer .btn,
.modal-footer .button,
.modal-actions button,
.modal-actions .btn,
.modal-actions .button {
  min-height: 44px !important;
  min-width: 152px !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px var(--border-color) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1px !important;
  text-transform: none !important;
  transition:
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Close button (X) */
.modal-content:focus,
.modal-content:focus-visible {
  outline: none !important;
}

.modal .close {
  margin: 0 !important;
  flex: 0 0 auto !important;
  color: var(--muted-text, #6b7280) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 4px !important;
  line-height: 1 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition:
    background 220ms ease,
    color 220ms ease,
    transform 220ms ease;
}

.modal .close:hover {
  color: var(--heading-color, var(--text-color, #0f172a)) !important;
  background: color-mix(in srgb, var(--text-color) 8%, transparent) !important;
  transform: translateY(-1px);
}

/* Generic focus treatment for interactive modal elements - soft neutral ring,
   consistent with the dropdown/navbar focus style. */
.modal button:focus-visible,
.modal .btn:focus-visible,
.modal .close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text-color) 35%, transparent) !important;
  outline-offset: 2px !important;
}
.modal input:focus-visible,
.modal select:focus-visible,
.modal textarea:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-color) 12%, transparent) !important;
}

/* Modal close button (alternative style) */
.modal-close {
  background: transparent !important;
  border: var(--modal-border) !important;
  color: var(--text-color, #1f2937) !important;
  border-radius: var(--radius-small, 6px) !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  transition: all 0.18s ease !important;
}

.modal-close:hover {
  border-color: var(--link, var(--primary-blue)) !important;
  background: color-mix(
    in srgb,
    var(--primary-blue) 8%,
    transparent
  ) !important;
  color: var(--heading-color, var(--text-color, #0f172a)) !important;
}

/* Adjust padding when header/body/footer exist */
.modal-content:has(.modal-header),
.modal-content:has(.modal-body),
.modal-content:has(.modal-footer) {
  padding: 0 !important;
}

/* Form + inputs inside modal */
.modal-form {
  margin: 0;
}

.modal-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.modal-input-group label {
  font-weight: 600;
  color: var(--heading-color, #0f172a);
}

.modal-input-group input,
.modal-input-group select,
.modal-input-group textarea {
  width: 100%;
  max-width: 100%;
  /* min-width:0 lets the control shrink inside the flex column instead of
     forcing the modal wider; box-sizing keeps padding inside the 100% so a
     long <option> can't blow out the fixed-width modal. */
  min-width: 0;
  box-sizing: border-box;
  line-height: 1.5;
  min-height: 44px;
}

body[data-mobile] .modal-input-group input,
body[data-mobile] .modal-input-group select,
body[data-mobile] .modal-input-group textarea {
  /* iOS Safari auto-zooms on focus when a control is below 16px and, in a
     standalone PWA without maximum-scale, never restores the zoom on blur. */
  font-size: 16px;
}

.modal-input-group select {
  padding: 12px 40px 12px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  appearance: none;
  /* Truncate an over-long selected option instead of widening the modal. */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.modal-helper {
  color: var(--muted-text, #6b7280);
  font-size: 0.9em;
}

/* Button variants (shared) */
.button-secondary {
  background: var(--card-bg, #f8fafc);
  border: 1px solid var(--border-color, #e5e7eb);
  color: var(--text-color, #1f2937);
}

.button-secondary:hover {
  border-color: var(--primary-blue);
  color: var(--heading-color, var(--text-color, #0f172a));
}

.button-ghost {
  background: transparent;
  border: 1px solid var(--border-color, #e5e7eb);
  color: var(--text-color, #1f2937);
}

.button-ghost:hover {
  border-color: var(--link, var(--primary-blue));
  color: var(--heading-color, var(--text-color, #0f172a));
}

.button-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--danger-ink);
}

.button-danger:hover {
  background: color-mix(in srgb, var(--danger) 88%, #000000);
  border-color: color-mix(in srgb, var(--danger) 88%, #000000);
  color: var(--danger-ink);
}

/* ── Settings modal (tabbed sidebar layout) ───────────────────────────────── */

.modal-content.modal-settings {
  width: min(880px, calc(100vw - 32px)) !important;
  max-width: min(880px, calc(100vw - 32px)) !important;
}

.modal-settings-body {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  min-height: 440px !important;
}

.modal-settings-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: var(--modal-border);
  padding: 16px 10px;
  overflow-y: auto;
  background: var(--modal-header-bg, rgba(0, 0, 0, 0.02));
  position: relative;
}

/* Sliding indicator behind active tab */
.modal-settings-tab-indicator {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 36px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-blue) 10%, transparent);
  pointer-events: none;
  z-index: 0;
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

body.theme-dark .modal-settings-tab-indicator {
  background: color-mix(in srgb, var(--primary-blue) 15%, transparent);
}

.modal-settings-tab-indicator--instant {
  transition: none !important;
}

.modal-settings-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted-text, #6b7280);
  border-radius: 8px;
  transition: color 0.12s ease;
  user-select: none;
  margin-bottom: 2px;
  line-height: 1.35;
  position: relative;
  z-index: 1;
}

.modal-settings-tab:hover {
  color: var(--text-color, #1f2937);
}

.modal-settings-tab--active {
  color: var(--link, var(--primary-blue));
  font-weight: 600;
}

.modal-settings-tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
  opacity: 0.45;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    opacity 0.12s ease,
    color 0.12s ease;
}

.modal-settings-tab--active .modal-settings-tab-num {
  background: var(--link, var(--primary-blue));
  border-color: var(--link, var(--primary-blue));
  color: var(--primary-ink, #ffffff);
  opacity: 1;
}

.modal-settings-tab:hover .modal-settings-tab-num {
  opacity: 0.75;
}

.modal-settings-panels {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.modal-settings-panel {
  display: none;
}

.modal-settings-panel--active {
  display: block;
}

/* Settings panel field helpers */
.modal-settings-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-text, #6b7280);
  margin: 0 0 14px 0;
}

.modal-settings-info-box {
  background: color-mix(in srgb, var(--primary-blue) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-blue) 20%, transparent);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-color);
  line-height: 1.6;
  margin-top: 16px;
}

.modal-settings-info-box strong {
  display: block;
  margin-bottom: 4px;
  color: var(--heading-color, var(--text-color));
}

.modal-settings-ua-preview {
  width: 100%;
  font-size: 11px;
  font-family: monospace;
  min-height: 52px;
  resize: none;
  background: var(--card-bg, #f8fafc);
  color: var(--muted-text, #6b7280);
  border-radius: 6px;
  padding: 8px 10px;
  box-sizing: border-box;
  line-height: 1.5;
}

.modal-settings-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-settings-radio-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 400 !important;
  color: var(--text-color) !important;
  font-size: 14px;
}

.modal-settings-radio-group input[type='radio'] {
  width: auto;
  min-height: auto;
  margin: 0;
  flex-shrink: 0;
}

.modal-settings-param-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--link, var(--primary-blue));
  color: var(--primary-ink, #ffffff);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  margin-left: 8px;
  min-width: 20px;
}

.modal-settings-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-settings-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-settings-checkbox-row input[type='checkbox'] {
  width: auto;
  min-height: auto;
  flex-shrink: 0;
}

.modal-settings-checkbox-row label {
  font-weight: 400 !important;
  color: var(--text-color) !important;
  font-size: 14px;
  cursor: pointer;
}

.modal-settings-danger-zone {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}

.modal-settings-danger-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--danger);
  margin-bottom: 12px;
  opacity: 0.8;
}

/* Mobile: stack sidebar above panels */
@media (max-width: 640px) {
  .modal-content.modal-settings {
    width: min(98%, calc(100vw - 24px)) !important;
    max-width: min(98%, calc(100vw - 24px)) !important;
  }

  .modal-settings-body {
    flex-direction: column !important;
    min-height: unset !important;
  }

  .modal-settings-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: var(--modal-border);
    padding: 8px 8px 6px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .modal-settings-sidebar::-webkit-scrollbar {
    display: none;
  }

  .modal-settings-tab {
    padding: 7px 10px;
    border-radius: 6px;
    margin-bottom: 0;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
  }

  .modal-settings-panels {
    padding: 16px;
  }
}

/* ── End settings modal ───────────────────────────────────────────────────── */

/* Tablet breakpoint */
@media (max-width: 1024px) {
  .modal {
    padding: 20px !important;
  }

  .modal-content.modal-full-width {
    max-width: min(95%, calc(100vw - 40px)) !important;
    width: min(95%, calc(100vw - 40px)) !important;
    padding: 20px 24px !important;
  }

  .modal-content.modal-full-width:has(.modal-header),
  .modal-content.modal-full-width:has(.modal-body),
  .modal-content.modal-full-width:has(.modal-footer) {
    padding: 0 !important;
  }
}

/* Small tablet breakpoint */
@media (max-width: 768px) {
  .modal {
    padding: 16px !important;
  }

  .modal-content.modal-full-width {
    max-width: min(98%, calc(100vw - 32px)) !important;
    width: min(98%, calc(100vw - 32px)) !important;
    padding: 18px 20px !important;
  }

  .modal-content.modal-full-width:has(.modal-header),
  .modal-content.modal-full-width:has(.modal-body),
  .modal-content.modal-full-width:has(.modal-footer) {
    padding: 0 !important;
  }
}

/* Mobile breakpoint */
@media (max-width: 640px) {
  .modal {
    padding: 12px !important;
    align-items: flex-start !important;
  }
  .modal-content {
    max-width: 100% !important;
    width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    border-radius: var(--modal-radius-mobile) !important;
  }
  .modal-content.modal-full-width {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
  }

  .modal-content.modal-full-width {
    padding: 16px 20px !important;
  }

  .modal-content.modal-full-width:has(.modal-header),
  .modal-content.modal-full-width:has(.modal-body),
  .modal-content.modal-full-width:has(.modal-footer) {
    padding: 0 !important;
  }

  .modal-content.modal-full-width > .close {
    top: 12px !important;
    right: 12px !important;
  }

  .modal-content.modal-full-width > h2 {
    font-size: 24px !important;
    margin-bottom: 16px !important;
    padding-right: 36px !important;
  }

  .modal-content.modal-full-width .form-group {
    margin-bottom: 16px !important;
  }

  .modal-content.modal-full-width > div[style*='margin-top'] {
    margin-top: 20px !important;
    padding-top: 20px !important;
    flex-direction: column !important;
  }

  .modal-content.modal-full-width > div[style*='margin-top'] .btn {
    width: 100% !important;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}