/* Shared responsive layer. Loaded after page styles so every page uses the same
   navigation, viewport, input and dialog behavior without clipping page overflow. */
html { -webkit-text-size-adjust: 100%; scroll-padding-block: 16px; }
.user-badge { color: var(--text); }
.sc-widget:not(.open) { visibility: hidden; }
.plugin-main { min-width: 0; }
.plugin-gallery { max-width: 100%; }
.plugin-description { min-width: 0; overflow-wrap: anywhere; }
.plugin-description pre, .changelog-body pre { max-width: 100%; overflow-x: auto; }
.plugin-title-left { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.inbox-mobile-back { display: none; }
.inbox-back-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1024px) {
  .topbar-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
  .topbar-inner > .logo { grid-column: 1; grid-row: 1; justify-self: start; }
  .topbar-right { grid-column: 2; grid-row: 1; min-width: 0; }
  .topbar-left { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: none; min-width: 0; }
  .plugin-gallery { width: 100%; max-width: 100%; }
  .plugin-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .plugin-main { min-width: 0; }
}

@media (max-width: 860px) {
  .hero-wrap { flex-direction: column; }
  .hero-sidebar { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-sidebar > * { min-width: 0; }
  .plugin-layout { grid-template-columns: minmax(0, 1fr); }
  .plugin-sidebar { position: static; }
  .plugin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plugin-card, .plugin-info, .plugin-title-row { min-width: 0; }
  .plugin-meta { flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 768px) {
  button, [role="button"], .nav-link, .footer-link, .snav-item { min-height: 44px; touch-action: manipulation; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]), select, textarea { font-size: 16px; min-width: 0; max-width: 100%; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]), select { min-height: 44px; }
  .topbar-inner, .navbar-inner { padding-inline: 16px; }
  .navbar-inner { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .nav-link { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 12px; }
  .nav-pin { display: none; }
  .icon-btn, .btn-plus, .lang-trigger, .user-badge { height: 44px; }
  .icon-btn, .btn-plus { width: 44px; }
  .search-input { height: 44px; }
  .lang-option, .user-dd-item { min-height: 44px; }
  .user-dropdown, .lang-dropdown { max-height: 65vh; max-height: 65dvh; overflow-y: auto; max-width: calc(100vw - 24px); }
  .notif-dropdown { position: fixed; top: 116px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow-y: auto; }
  .notif-header { gap: 10px; flex-wrap: wrap; }
  .notif-list { max-height: min(380px, 50dvh); }

  .main, .plugin-page-wrap, .st-wrap, .privacy-wrap { padding-inline: 16px; margin-top: 20px; }
  .hero-wrap { padding: 0 16px 20px; gap: 12px; }
  .hero-box-inner { padding: 24px 18px; }
  .hero-title { font-size: clamp(24px, 6vw, 32px); overflow-wrap: anywhere; }
  .hero-search { width: 100%; min-width: 0; }
  .hero-search input { min-width: 0; }
  .list-controls, .filter-group { gap: 8px; flex-wrap: wrap; }
  .list-controls > * { max-width: 100%; }
  .pagination { flex-wrap: wrap; gap: 6px; }
  .page-btn { min-width: 40px; }
  .page-info { width: 100%; text-align: center; margin: 4px 0 0; }
  .plugin-name { white-space: normal; overflow-wrap: anywhere; }
  .plugin-thumb img { max-width: 100%; }
  .site-footer { padding: 24px 16px 0; }
  .site-footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .site-footer-links { justify-content: flex-start; }
  .site-footer-bottom { flex-wrap: wrap; gap: 12px; }
  .footer-link { display: inline-flex; align-items: center; }
  #cookieBanner { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .ck-panel { width: min(100%, 420px); max-height: 65vh; max-height: 65dvh; overflow-y: auto; padding: 16px; }
  .ck-panel-header, .ck-section-header { gap: 10px; flex-wrap: wrap; }
  body .sc-widget { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-width: 420px; max-height: calc(100dvh - 24px); overflow-y: auto; }
  .sc-header > div { min-width: 0; overflow-wrap: anywhere; }
  body .sc-close { min-width: 44px; min-height: 44px; }

  .modal-overlay { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  .modal-overlay > .modal-box { max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); min-width: 0; overflow-y: auto; }
  .modal-close, .contact-modal-close { width: 44px; height: 44px; top: 4px; right: 4px; }
  .modal-box h2, .modal-box .edit-modal-title { padding-right: 28px; overflow-wrap: anywhere; }
  .form-row-2 { grid-template-columns: minmax(0, 1fr); }
  .form-group { min-width: 0; }
  .form-group input, .form-group select, .form-group textarea { max-width: 100%; }
  .submit-steps { flex-wrap: wrap; gap: 10px; padding-right: 28px; }
  .submit-step { font-size: 12px; }
  .submit-step-line { flex: 0 0 12px; }
  .meta-scroll, .edit-modal-scroll { min-height: 0; overscroll-behavior: contain; }
  .ql-toolbar { display: flex; flex-wrap: wrap; gap: 4px; }
  .ql-toolbar.ql-snow .ql-formats { margin-right: 4px; }
  .ql-toolbar.ql-snow button { min-height: 36px; width: 36px; }
  .ql-editor { overflow-wrap: anywhere; }
  .contact-modal-box { max-height: calc(100dvh - 24px); overflow-y: auto; }

  .plugin-breadcrumb, .plugin-rating-row, .plugin-author-row, .plugin-author-actions { flex-wrap: wrap; }
  .plugin-breadcrumb, .plugin-title-left, .plugin-title-right, .plugin-author-link { min-width: 0; overflow-wrap: anywhere; }
  .plugin-title-left h1 { font-size: clamp(24px, 6vw, 32px); }
  .plugin-title-right { min-width: 0; width: 100%; }
  .plugin-gallery, .gallery-inner { height: 190px; }
  .plugin-gallery { width: 100%; }
  .gallery-item { width: min(100%, 300px); height: 190px; }
  .gallery-strip { min-width: 0; }
  .gallery-prev-btn, .gallery-next-btn { flex: 0 0 44px; }
  .plugin-tabs { overflow-x: auto; overscroll-behavior-inline: contain; }
  .plugin-tab-btn { flex: 0 0 auto; white-space: nowrap; padding-inline: 12px; }
  .plugin-description { overflow-wrap: anywhere; }
  .plugin-description img, .plugin-description video, .plugin-description iframe { max-width: 100%; height: auto; }
  .plugin-description pre, .changelog-body pre { max-width: 100%; overflow-x: auto; }
  .plugin-description table { display: block; max-width: 100%; overflow-x: auto; }
  .plugin-tab-panel { min-width: 0; }
  .plugin-stats-bar { height: auto; overflow: visible; padding: 0; }
  .plugin-stat { min-height: 44px; padding-inline: 12px; }
  .plugin-stats-bar .stat-divider { display: none; }
  .plugin-stat-right { width: 100%; margin-left: 0; border-top: 1px solid var(--border); }
  .stat-action-btn { flex: 1; min-width: 0; justify-content: center; border-left: 0; padding: 12px; white-space: normal; }
  .cart-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-modal-inner { padding: 24px 16px; }
  .cart-modal-info { min-width: 0; overflow-wrap: anywhere; }
  .cart-modal-actions, .sup-actions-bar, .sup-discord-banner, .purchasers-header-btns { flex-wrap: wrap; }
  .cart-modal-actions > * { flex: 1 1 160px; }
  .sup-filters { flex-wrap: wrap; }
  .sup-ticket-row { flex-wrap: wrap; gap: 12px; }
  .sup-ticket-main, .sup-discord-text { min-width: 0; overflow-wrap: anywhere; }
  .sup-ticket-last { max-width: 100%; flex-wrap: wrap; }
  .purchasers-header-btns { width: 100%; }
  .purchasers-search { width: 100%; }
  .pur-row { flex-wrap: wrap; gap: 10px; }
  .gp-cal { max-width: calc(100vw - 48px); }
  .st-card { padding: 16px; }
  .st-header-left, .st-author-info, .st-reply-meta, .st-reply-input-wrap { min-width: 0; overflow-wrap: anywhere; }
  .st-reply-header, .st-author-card, .rev-card-header, .rev-prompt-card { flex-wrap: wrap; }
  .st-reply-card { flex-direction: column; }
  .st-reply-input-wrap { width: 100%; }
  .st-reply-body, .rev-content { overflow-wrap: anywhere; }
  .st-admin-group { flex: 1 1 160px; min-width: 0; }
  .st-admin-input, .st-admin-select { width: 100%; min-width: 0; }
  .lightbox-img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 140px); object-fit: contain; }
  .lightbox-arrow { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); width: 48px; height: 48px; transform: none; }
  .lightbox-arrow-prev { left: 16px; }
  .lightbox-arrow-next { right: 16px; }
  .lightbox-close { top: 12px; right: 12px; width: 44px; height: 44px; }

  .inbox-wrap { padding: 0 12px; margin: 16px auto; height: calc(100vh - 200px); height: calc(100dvh - 200px); min-height: 360px; }
  .inbox-page { min-width: 0; }
  .inbox-sidebar { width: 100%; min-width: 0; border-right: 0; border-radius: 14px; }
  .inbox-page:not(.has-active-conversation) > .inbox-chat { display: none !important; }
  .inbox-page.has-active-conversation > .inbox-sidebar { display: none; }
  .inbox-mobile-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; flex-shrink: 0; background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }
  .inbox-chat-header { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 8px; padding: 12px; }
  .inbox-mobile-back { grid-column: 1; grid-row: 1 / span 2; }
  .inbox-chat-meta { grid-column: 2; min-width: 0; margin-bottom: 0; overflow-wrap: anywhere; }
  .inbox-chat-participants { grid-column: 2; min-width: 0; flex-wrap: wrap; gap: 8px; }
  .chat-participant { flex-basis: 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }
  .chat-participant .conv-plugin-tag { flex-basis: 100%; max-width: calc(100% - 36px); margin-left: 36px !important; white-space: nowrap; }
  .msg-row { min-width: 0; max-width: 92%; }
  .msg-bubble-wrap { min-width: 0; }
  .msg-bubble { max-width: 100%; overflow-wrap: anywhere; }
  .inbox-warning { font-size: 12px; padding: 12px; }
  .inbox-messages { min-height: 0; padding: 12px; overscroll-behavior: contain; }
  .inbox-input-wrap { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
  .inbox-textarea { min-width: 0; padding: 10px; }
  .inbox-send-btn { padding-inline: 12px; }
  .conv-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conv-item-top { gap: 8px; }
}

@media (max-width: 600px) {
  .topbar-inner { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 12px; gap: 8px; }
  .topbar-inner > .logo { grid-row: 1; grid-column: 1; font-size: 22px; min-height: 44px; display: flex; align-items: center; }
  .topbar-right { display: contents; }
  .topbar-right > .lang-switcher { grid-row: 1; grid-column: 2; justify-self: end; }
  .topbar-left { grid-row: 2; grid-column: 1; }
  #userPanel, #guestPanel { grid-row: 2; grid-column: 2; gap: 6px; }
  .topbar-right .user-badge { width: 44px; padding: 7px; }
  .topbar-right #userName { display: none; }
  .btn-auth-fill, .btn-auth-outline { padding-inline: 10px; font-size: 12px; }
  .user-dropdown { width: 240px; }
  .hero-sidebar { grid-template-columns: minmax(0, 1fr); }
  .category-tabs { flex-direction: row; flex-wrap: wrap; }
  .cat-tab { flex: 1 1 120px; min-width: 0; }
  .plugin-grid, .author-more-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .plugin-info { padding: 14px; }
  .modal-overlay > .modal-box { padding: 48px 16px 16px !important; width: 100% !important; }
  .form-group label, .check-label { overflow-wrap: anywhere; }
  .contact-modal-box { padding: 24px 16px; }
  .privacy-wrap { padding-inline: 16px; overflow-wrap: anywhere; }
  .st-breadcrumb > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .conv-plugin-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
}

@media (hover: none) {
  .card-actions { opacity: 1; }
  .ca-btn { width: 44px; height: 44px; }
  .plugin-card:hover { transform: none; }
  .cover-edit-overlay, .avatar-edit-overlay { color: var(--text); background: rgb(0 0 0 / 25%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .modal-box, .ck-panel, .notif-dropdown { animation: none; }
  .plugin-card, .gallery-item, .card-actions { transition: none; }
  .plugin-card:hover { transform: none; }
}