/* BusTop v2.1.9 — Final visual QA, accessibility and responsive hardening */
:root {
  --bt-quality-focus: color-mix(in srgb, var(--primary, #0b68d7) 38%, transparent);
  --bt-quality-danger: #d92d4f;
}

/* Foundation: every screen stays inside its viewport without hiding intentional carousels. */
html { max-width: 100%; overflow-x: clip; }
body { max-width: 100%; }
main, section, article, aside, form, fieldset, .container, .app-main, .app-content { min-width: 0; }
img, video, canvas, svg { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
:where(p, h1, h2, h3, h4, h5, h6, td, th, a, span) { overflow-wrap: anywhere; }

/* Missing compact avatar size previously expanded comments to hundreds of pixels. */
.avatar.xs,
.avatar.avatar-xs {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  flex: 0 0 24px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}
.avatar.xs img,
.avatar.avatar-xs img { width: 100% !important; height: 100% !important; object-fit: cover; }

/* Keyboard and high-contrast focus treatment across the product. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--bt-quality-focus) !important;
  outline-offset: 2px;
}
:where(button, input, select, textarea):disabled,
.is-submitting :where(button[type="submit"], input[type="submit"]) {
  cursor: wait !important;
  opacity: .68;
}

/* Social feed hardening */
.bt-post-author { flex: 1 1 auto; overflow: hidden; }
.bt-post-author > .avatar { flex: 0 0 auto; }
.bt-post-author b { max-width: 100%; }
.bt-verified { flex: 0 0 16px; min-width: 16px; }
.bt-post-header-actions { flex: 0 0 auto; }
.bt-post-carousel { touch-action: pan-y; user-select: none; isolation: isolate; }
.bt-post-carousel:focus-visible { outline-offset: -3px !important; }
.bt-post-carousel__track { will-change: transform; }
.bt-post-slide { flex: 0 0 100%; min-width: 100%; width: 100%; }
.bt-post-slide > :where(img, video) { display: block; width: 100%; height: 100%; }
.bt-inline-comment { min-width: 0; }
.bt-inline-comment > a { display: inline-flex; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; }
.bt-inline-comment p { padding-top: 1px; }
.bt-inline-comment-form { min-width: 0; }
.bt-inline-comment-form > .avatar.xs { align-self: flex-start; margin-top: 3px; }
.bt-inline-comment-form textarea { width: auto; }
.bt-inline-comment-form button {
  min-width: 58px;
  min-height: 36px;
  padding: 7px 8px;
  border-radius: 9px;
}
.bt-show-comments,
.bt-like-summary,
.bt-comment-login { min-height: 34px; display: inline-flex; align-items: center; }
.bt-follow-button { min-height: 36px; }
.bt-post-action { min-width: 40px; min-height: 40px; border-radius: 50%; }
.bt-post-action:hover { background: var(--bt-social-blue-soft); }
.bt-post-action:active { transform: scale(.92); }

/* Reels */
.bt-reel-card { contain: layout paint; }
.bt-reel-author { min-width: 0; }
.bt-reel-author > a { min-width: 0; max-width: calc(100% - 90px); }
.bt-reel-author strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bt-reel-comments-panel { overscroll-behavior: contain; }
.bt-reel-comments-list { min-height: 0; }
.bt-reel-comments-panel [data-reel-comments-close] { min-width: 40px; min-height: 40px; }

/* Branded fallback instead of broken-image text. */
.bt-media-fallback {
  position: relative;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  min-height: 160px;
  background:
    radial-gradient(circle at 30% 20%, rgba(11,104,215,.16), transparent 38%),
    linear-gradient(145deg, var(--bt-social-canvas, #f4f7fb), var(--bt-social-blue-soft, #eaf3ff));
}
.bt-media-fallback::after {
  content: "BusTop medya";
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--bt-social-line, #dfe6ef);
  border-radius: 999px;
  background: var(--bt-social-surface, #fff);
  color: var(--bt-social-muted, #6d7a90);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.bt-media-fallback > img { display: none !important; }

/* Forms and studios */
.grid-form > label,
.bt-studio label,
.bt-field,
.form-group { min-width: 0; }
:where(.grid-form, .bt-studio, .form-grid, .filters) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-width: 0;
}
.bt-studio__back {
  min-height: 40px;
  padding: 7px 10px;
  margin-left: -10px;
  border-radius: 10px;
}
.bt-studio__back:hover { background: var(--bt-social-blue-soft, #eaf3ff); text-decoration: none; }
.bt-upload-zone,
.bt-media-dropzone,
[data-upload-zone] { transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.bt-upload-zone:active,
.bt-media-dropzone:active,
[data-upload-zone]:active { transform: scale(.995); }

/* Tables: deliberate local scrolling rather than page overflow. */
.table-wrap,
.admin-table-wrap,
.responsive-table,
:where(.card, .panel) > table { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
table { border-collapse: collapse; }
td, th { vertical-align: middle; }

/* Listings/marketplace/job cards */
:where(.listing-card, .market-card, .vehicle-card, .part-card, .job-card) { min-width: 0; }
:where(.listing-card, .market-card, .vehicle-card, .part-card, .job-card) img { display: block; }
.listings-sort-select { min-height: 42px; }
.lt-tabs { scrollbar-width: none; }
.lt-tabs::-webkit-scrollbar { display: none; }
.lt-tab { min-height: 42px; display: inline-flex; align-items: center; }

/* Messages: balanced desktop canvas and robust mobile keyboard/safe-area layout. */
.dm-page { background: var(--bg); }
.dm-layout { min-width: 0; }
.dm-chat-area,
.dm-conv-list { min-width: 0; }
.dm-empty-chat {
  width: min(460px, calc(100% - 40px));
  height: auto;
  min-height: 250px;
  align-self: center;
  margin: auto;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
}
.dm-empty-chat h3 { margin: 12px 0 6px; color: var(--text); }
.dm-conv-item { min-height: 72px; }
.dm-attach-btn,
.dm-send-btn { min-width: 42px; min-height: 42px; }
.dm-bubble { min-width: 0; }
.dm-bubble-text { overflow-wrap: anywhere; }

/* Footer controls remain tappable without looking oversized. */
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 2px;
}
.footer-inner { min-width: 0; }

/* Global status/empty states */
:where(.empty-state, .error-card, .feed-empty, .bt-social-empty, .bt-reels-empty) { max-width: 100%; }

[data-theme="dark"] .bt-media-fallback {
  background: radial-gradient(circle at 30% 20%, rgba(36,131,246,.18), transparent 38%), #0e1724;
}
[data-theme="dark"] .dm-empty-chat { background: var(--surface); }

@media (max-width: 900px) {
  .bt-social-shell { width: min(650px, 100%); }
  .bt-social-page { padding-top: 12px; }
  .bt-social-title { padding-inline: 14px; }
  .bt-social-stories,
  .bt-social-composer,
  .bt-social-filter-row,
  .bt-social-role-filter,
  .bt-social-post { border-left: 0; border-right: 0; border-radius: 0; }
}

@media (max-width: 720px) {
  .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .footer-inner { align-items: flex-start; gap: 8px; }
  .footer-links { gap: 4px 12px; }
  .footer-links a { min-height: 40px; }

  .bt-social-title h1 { font-size: 25px; }
  .bt-social-post__header { padding-inline: 12px; }
  .bt-social-post__body { padding-inline: 12px; }
  .bt-post-author { gap: 8px; }
  .bt-post-author b { font-size: 13px; }
  .bt-post-header-actions { gap: 4px; }
  .bt-follow-button { padding-inline: 10px; }
  .bt-post-menu > button { min-width: 38px; min-height: 38px; }
  .bt-inline-comment-form { gap: 6px; }
  .bt-inline-comment-form button { min-width: 54px; }

  .dm-empty-chat { min-height: 210px; width: calc(100% - 24px); padding: 24px; }
  .dm-chat-form { padding-bottom: max(8px, env(safe-area-inset-bottom)); }

  .bt-studio__back { min-height: 44px; }
  .lt-tabs { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .lt-tab { flex: 0 0 auto; scroll-snap-align: start; }
}

@media (max-width: 420px) {
  .bt-social-title { margin-bottom: 10px; }
  .bt-social-create { min-width: 42px; min-height: 42px; padding: 0 12px; }
  .bt-social-composer__actions a { font-size: 12px; gap: 5px; }
  .bt-post-author small { max-width: 210px; }
  .bt-post-action { min-width: 38px; min-height: 38px; }
  .bt-post-actions { margin-inline: -4px; }
  .bt-reel-action { width: 48px; min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-post-carousel__track,
  .bt-heart-burst,
  .bt-social-toast,
  .bt-share-sheet__panel,
  .bt-reel-comments-panel { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* Final QA: wide data tables stay usable on narrow screens instead of being clipped. */
@media (max-width: 900px) {
  :where(.card, .panel, .admin-card, .content-card) > table,
  .table-wrap > table,
  .admin-table-wrap > table,
  .responsive-table > table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  :where(.card, .panel, .admin-card, .content-card) > table :where(th, td) {
    white-space: nowrap;
  }
  :where(.card, .panel, .admin-card, .content-card) > table :where(td .stack, td form, td .actions) {
    white-space: normal;
  }

  /* Profile tabs behave like a native horizontal tab rail on small screens. */
  .prof-tabs {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .prof-tabs::-webkit-scrollbar { display: none; }
  .prof-tabs .prof-tab { flex: 0 0 auto; min-width: max-content; }

  /* Horizontal filters intentionally scroll locally and never expand the page. */
  .mk-chips,
  .bt-social-filter-row,
  .lt-tabs,
  .prof-stories-row,
  .prof-stories-list {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Long admin action groups remain readable inside their own table cell. */
:where(td, th) :where(form, .actions, .button-group) { max-width: 100%; }