@media (max-width: 600px) {
  .wallet-balance-widget .q-card__section > .row.items-center {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 14px !important;
    align-items: start !important;
  }

  .wallet-balance-widget .q-card__section > .row.items-center > .col,
  .wallet-balance-widget .q-card__section > .row.items-center > .col-auto {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .wallet-balance-widget .q-card__section > .row.items-center > .col-auto.q-gutter-x-sm {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    align-items: center !important;
  }

  .wallet-balance-widget .q-card__section > .row.items-center > .col-auto.q-gutter-x-sm > * {
    margin: 0 !important;
  }

  .wallet-balance-widget .q-card__section > .row.items-center > .col-auto.q-gutter-x-sm .q-btn {
    width: auto !important;
    min-height: 36px !important;
    padding: 6px 12px !important;
  }
}

/* SuperBody: readable report settings drawer on light background */
.body--dark .q-drawer--right,
.body--dark .q-drawer--right .q-item,
.body--dark .q-drawer--right .q-field,
.body--dark .q-drawer--right .q-field__label,
.body--dark .q-drawer--right .q-field__native,
.body--dark .q-drawer--right .q-field__input,
.body--dark .q-drawer--right .q-select__dropdown-icon,
.body--dark .q-drawer--right .text-white {
  color: #151515 !important;
}

.body--dark .q-drawer--right {
  background: #f7f7f7 !important;
}

.body--dark .q-drawer--right .q-field__control {
  color: #151515 !important;
}

.body--dark .q-drawer--right .q-btn.text-white {
  color: #fff !important;
}

/* SuperBody: replace Quasar yellow/warning accents with brand pink */
.text-warning,
.q-radio__inner--truthy.text-warning,
.q-checkbox__inner--truthy.text-warning,
.q-toggle__inner--truthy.text-warning {
  color: #e82d89 !important;
}

.bg-warning {
  background: #e82d89 !important;
}

.q-radio__inner--truthy,
.q-checkbox__inner--truthy {
  color: #e82d89 !important;
}

/* SuperBody: make time picker look like local 24-hour time without touching Quasar runtime */
.q-time__header-ampm,
.q-time__header-ampm-label {
  display: none !important;
}

.q-time__header {
  justify-content: center !important;
}

.q-time__header-label {
  padding-right: 0 !important;
}

/* Keep expanded parent visible, but don't make the duplicate child look selected */
body:has(a[href="/admin/subscriptions"]) .q-drawer a[href="/admin/subscriptions"].q-router-link--exact-active {
  background: transparent !important;
}

/* member chat hard layout fix */
body:has(.chat-shell) {
  overflow: hidden !important;
}

.chat-shell {
  height: 100vh !important;
  max-height: 100vh !important;
  display: grid !important;
  grid-template-columns: 360px minmax(0, 1fr) !important;
  overflow: hidden !important;
}

.chat-main,
.chat-panel,
.chat-area {
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

#messages,
.messages {
  height: calc(100vh - 170px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 24px 28px 96px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

.message,
.bubble,
.msg {
  max-width: 340px !important;
  width: fit-content !important;
  min-width: 0 !important;
  align-self: flex-end !important;
  margin: 6px 0 !important;
  border-radius: 14px !important;
}

.audio-player,
.voice-player,
.tg-voice,
.voice-bubble {
  width: 300px !important;
  max-width: 300px !important;
  height: 74px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.media-card,
.media-preview,
.chat-media,
.message img,
.message video {
  max-width: 320px !important;
  width: auto !important;
  max-height: 420px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}

.composer,
#composer {
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  display: flex !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  background: #101012 !important;
  border-top: 1px solid #2b2b2e !important;
  box-sizing: border-box !important;
}

.composer input,
#composer input,
#messageInput {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.composer button,
#composer button {
  flex: 0 0 auto !important;
}