/*
 * Final responsive audit layer.
 * Keep fixes component-scoped: horizontal overflow is solved at its source,
 * never by hiding page-level overflow.
 */

/* Predictable stacking: navigation stays usable; dialogs always cover it. */
.report-action[open] > .report-backdrop {
  z-index: 20000 !important;
}

.report-action[open] > form {
  z-index: 20001 !important;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.profile-edit-modal,
.new-chat-modal {
  z-index: 20000 !important;
}

.profile-edit-modal > section,
.new-chat-modal > section {
  z-index: 1;
}

/* Keep the new-chat dialog usable when the visual viewport is shortened by
   a mobile keyboard or a landscape/short-height window. */
.new-chat-modal {
  overflow-y: auto;
  overscroll-behavior: contain;
  align-items: safe center;
}

.new-chat-modal > section {
  display: flex;
  max-height: calc(100dvh - 28px);
  flex-direction: column;
  overflow: hidden;
}

.new-chat-modal > section > header {
  flex: 0 0 auto;
}

.new-chat-modal > section > form {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-sheet {
  z-index: 21000 !important;
}

/* Breadcrumbs may wrap, but must never force a wider viewport. */
.crumb {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
}

.crumb > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Forum action bar keeps its controls inside narrow cards. */
.toolbar {
  min-width: 0;
  max-width: 100%;
  gap: 10px;
}

.toolbar > b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.toolbar > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.forum-controls {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.forum-controls label {
  min-width: 0;
  margin: 0;
}

.forum-controls select {
  width: auto;
  min-width: 150px;
  height: 38px;
  margin: 0;
  padding-block: 7px;
}

.forum-controls .button {
  min-height: 38px;
}

/* Preserve unread emphasis in dark mode without white-on-white text. */
html[data-theme="dark"] .notice.unread {
  background: color-mix(in srgb, var(--card), #2563eb 14%);
  color: var(--text);
}

html[data-theme="dark"] .notice.unread b {
  color: var(--text);
}

/* Rich post output stays readable and contained at every viewport width. */
.post-content .post-code {
  display: block;
  max-width: 100%;
  margin: 12px 0;
  padding: 13px 15px;
  overflow: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg), #0f172a 5%);
  color: var(--text);
  font: 12.5px/1.6 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  tab-size: 2;
  white-space: pre;
}

.post-content .post-image-link {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 12px 0;
}

.post-content .post-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(70dvh, 760px);
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.post-content .post-list {
  max-width: 100%;
  margin: 10px 0;
  padding-left: 24px;
}

.post-content .post-list li {
  margin: 4px 0;
  padding-left: 2px;
  overflow-wrap: anywhere;
}

.post-content .post-quote.simple {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.thread-tags {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 12px;
  font-size: 11px;
}

.thread-tags a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.thread-tags a:hover,
.thread-tags a:focus-visible {
  border-color: color-mix(in srgb, var(--accent), var(--line) 35%);
  color: var(--accent);
}

/* Shared page-header actions: stable alignment and usable wrapping. */
.page-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.page-actions .button {
  margin: 0;
}

/* New-topic category is descriptive content, not a form-label wrapper. */
.create-form > .create-field {
  margin: 13px 0;
}

.create-form > .create-field > .form-label {
  font-weight: 750;
}

/* Ban information and history must contain long administrator text. */
.ban-card dl,
.ban-card dl div,
.ban-card dt,
.ban-card dd,
.appeal-history,
.appeal-history > div,
.appeal-history b,
.appeal-history small {
  min-width: 0;
  max-width: 100%;
}

.ban-card dd,
.appeal-history b,
.appeal-history small {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 1120px) {
  /* The mobile dock and compact header share one exact breakpoint. */
  .site-header {
    z-index: 100 !important;
  }

  .site-header .topline,
  .site-header .quick,
  .site-header .navbar > nav,
  .site-header .navbar > .search,
  .site-header .navbar > .account {
    display: none !important;
  }

  .site-header .navbar {
    min-height: 60px;
    height: 60px;
    justify-content: flex-start;
  }

  .mobile-action-dock {
    z-index: 1000 !important;
  }

  /* The dock exists up to 1120px, so fixed feedback/actions must clear it
     throughout the same range (not only at phone widths). */
  .wm-footer-to-top {
    right: 13px;
    bottom: calc(var(--mobile-dock-space, 67px) + 13px) !important;
  }

  .explore-status {
    bottom: calc(var(--mobile-dock-space, 67px) + 14px) !important;
  }

  /* :has() fallback for mobile browsers: JS already sets this body class. */
  body.chat-conversation-open .chat-sidebar {
    display: none !important;
  }

  body.chat-conversation-open .chat-room {
    display: grid !important;
  }

  .page-title {
    min-width: 0;
    gap: 12px;
    flex-wrap: wrap;
  }
}

@media (max-width: 960px) {
  /* The desktop moderator grid cannot contain all controls on small tablets.
     Reflow before it reaches the phone-only 760px breakpoint. */
  .moderator-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  .moderator-bar > b {
    grid-column: 1 / -1 !important;
  }

  .moderator-bar > form {
    width: 100% !important;
    min-width: 0 !important;
  }

  .moderator-bar > form:not(.move-thread-form):nth-of-type(3),
  .moderator-bar .move-thread-form {
    grid-column: 1 / -1 !important;
  }

  .moderator-bar > form:not(.move-thread-form) .button {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  .moderator-bar .move-thread-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

@media (max-width: 600px) {
  /* A single profile action occupies the complete action row. */
  .profile-actions > :only-child {
    grid-column: 1 / -1;
    width: 100%;
  }

  .profile-actions > form:only-child .button,
  .profile-actions > .button:only-child {
    width: 100%;
  }

  /* Five profile metrics become two balanced rows plus a centred final item. */
  .profile-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .profile-numbers > div {
    min-width: 0;
    border-right: 0 !important;
    text-align: center;
  }

  .profile-numbers > div:nth-child(odd):not(:last-child) {
    border-right: 1px solid var(--line) !important;
  }

  .profile-numbers > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: 0 !important;
    border-bottom: 0;
  }

  .page-title .page-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-title .page-actions .button {
    width: 100%;
  }

  .page-title .page-actions > :only-child {
    grid-column: 1 / -1;
  }

  .toolbar {
    height: auto !important;
    min-height: 52px;
    padding: 9px 0;
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar > div {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar > div .button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .forum-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .forum-controls label,
  .forum-controls select {
    width: 100%;
  }

  .forum-controls .button {
    grid-column: 1 / -1;
  }

  .ban-card dl div {
    display: grid !important;
    grid-template-columns: minmax(88px, 0.7fr) minmax(0, 1.3fr);
    align-items: start;
    gap: 10px;
  }

  .ban-card dd {
    margin: 0;
    text-align: right;
  }
}

@media (max-width: 480px) {
  /* Premium package inputs should never squeeze into unusable half columns. */
  .plan-form .plan-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .plan-form,
  .plan-editor,
  .periods,
  .period-row {
    min-width: 0;
    max-width: 100%;
  }

  /* Both topic editors keep evenly sized controls down to 320px. */
  .editor-shell .advanced-toolbar,
  .reply-form .advanced-toolbar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .editor-shell .advanced-toolbar button,
  .reply-form .advanced-toolbar button {
    width: 100% !important;
    min-width: 0;
    height: 38px !important;
  }
}

@media (max-width: 390px) {
  .page-title .page-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .toolbar > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .forum-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .forum-controls .button {
    grid-column: auto;
  }
}
.chat-room-actions{display:flex;align-items:center;gap:6px}.chat-room-actions form{margin:0}.chat-room-actions a,.chat-room-actions button{width:40px;height:40px;border:0;border-radius:10px;background:var(--soft);color:var(--muted);display:grid;place-items:center;cursor:pointer}.chat-disabled{padding:14px 18px;border-top:1px solid var(--line);background:var(--soft);color:var(--muted);font-weight:700;text-align:center}