/* Responsive overrides — keep last so they win. */

@media (max-width: 900px) {
  .structItem-cell--meta { width: 115px; font-size: calc(12px * var(--ui-scale)); }
  .structItem-cell--latest { width: 140px; font-size: calc(12px * var(--ui-scale)); }
}
@media (max-width: 860px) {
  .message-cell--user { flex: 0 0 110px; padding: 8px; }
  .message-avatar .avatar { width: 72px; height: 72px; }
  .message-userStats { display: none; }
  .node-stats { display: none; }
}
@media (max-width: 650px) {
  .structItem-cell--iconEnd { display: none; }
  .structItem-cell--latest { display: none; }
  .structItem-cell--icon { width: 44px; }
  .structItem-cell--meta { display: none; }
  .structItem-cell--main { padding-left: 6px; }
  .structItem-title { overflow-wrap: anywhere; }
  .breadcrumb-trail {
    min-width: 0;
    font-size: calc(13px * var(--ui-scale));
    line-height: 1.5;
  }
  .breadcrumb-trail > a:first-child,
  .breadcrumb-trail > a:first-child + .sep,
  .breadcrumb-trail > span:nth-last-child(2),
  .breadcrumb-trail > span:last-child { display: none; }
  .p-breadcrumbs { align-items: flex-start; }
  .p-breadcrumbs .button { flex: 0 0 auto; }
}
/* Full-bleed content, the way voz.vn does it: at this width the page gutter is dropped and
   every block runs edge to edge, so no page background shows as a stripe down either side.
   The gutter moves onto the elements that need it (breadcrumbs, pager, thread header). */
@media (max-width: 650px) {
  .p-body { padding-left: 0; padding-right: 0; }
  .p-breadcrumbs { padding: 0 12px; }
  .block { border-radius: 0; }
  .message { border-radius: 0; }
  .block-outer { padding-left: 12px; padding-right: 12px; }
  .block--messages > .block-header { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 620px) {
  .block--messages .pageNav a.pageNav-author { display: none; }
  .block--messages > .block-header > .block-header-extra,
  .block--messages > .block-header > #watch-btn { display: none; }
  #thread-title { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
  #thread-title:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
  .p-header-inner { flex-wrap: wrap; }
  .message-inner { flex-direction: column; }
  .message-cell--user {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    border-radius: 0;
  }
  .message-avatar { margin-bottom: 0; }
  .message-user { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; text-align: left; }
  .message-avatar { flex: 0 0 48px; }
  .message-avatar .avatar { width: 48px; height: 48px; }
  .message-userDetails { flex: 1; margin-bottom: 0; min-width: 0; overflow-wrap: anywhere; }
  .message-userStats { display: block; flex: 0 0 auto; margin-left: auto; min-width: 92px; font-size: calc(11px * var(--ui-scale)); }
  .message-userStats li { gap: 8px; white-space: nowrap; }
  .message-userMeta { justify-content: flex-start; }
  .message-userMeta .userTitle { flex-basis: auto; }
  .message-cell--user { position: relative; border-bottom: 1px solid var(--border); }
  .message-cell--user::after { content: ''; position: absolute; bottom: -6px; left: 28px; width: 10px; height: 10px; background: var(--quote-bg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); z-index: 1; }
  .message-cell--main { border-radius: 0; }
  .profile-head { flex-direction: column; align-items: center; text-align: center; }
  .profile-stats { justify-content: center; }
}