/* Lucian UX/UI Prompt #101 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#101 */
/* Split workspace adapted to a stable list/detail layout and native controls. */
.support-layout { grid-template-columns: minmax(270px, .72fr) minmax(0, 1.4fr); gap: 24px; align-items: start; }
.support-list-pane { min-width: 0; border: 1px solid var(--line); background: var(--white); }
.support-list-heading { padding: 18px 18px 0; font-size: 16px; font-weight: 500; }
.support-list-pane .filter-bar { padding: 12px 18px 16px; margin-bottom: 0; border-bottom: 1px solid var(--line); }
.support-list-pane .filter-bar button { flex: 1; min-height: 44px; }
.support-selection-note { padding: 12px 18px; font-size: 13px; color: var(--brand); background: var(--soft); border-bottom: 1px solid var(--line); line-height: 1.7; }
.support-list-pane #threadList { max-height: 690px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.support-list-pane .thread-row { padding: 18px; border-left: 3px solid transparent; }
.support-list-pane .thread-row[aria-pressed="true"] { border-left-color: var(--brand); }
.support-list-pane .thread-row:last-child { border-bottom: 0; }
.support-list-pane .empty { padding: 26px 18px; }
.support-detail-pane { min-width: 0; }
.support-detail-pane .thread-view { margin-top: 0; padding: 24px; }
.support-detail-pane > #threadView > .empty { border: 1px solid var(--line); padding: 30px 24px; background: var(--white); }
.support-detail-pane .thread-meta { gap: 16px; }
.support-detail-pane .messages { min-height: 120px; max-height: min(48svh, 480px); scrollbar-gutter: stable; overscroll-behavior: contain; }
.support-detail-pane .reply-form .button { min-height: 48px; }
.support-back-button { min-height: 44px; margin-bottom: 16px; padding: 10px 4px; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--brand); font-size: 15px; }
@media (min-width: 761px) and (max-width: 1000px) {
  .support-layout { grid-template-columns: minmax(245px, .75fr) minmax(0, 1.3fr); gap: 20px; }
  .support-list-pane .filter-bar, .support-list-pane .thread-row { padding-inline: 14px; }
  .support-detail-pane .thread-view { padding: 20px; }
}
@media (max-width: 760px) {
  .support-layout { display: block; }
  .support-list-pane #threadList { max-height: none; overflow-y: visible; scrollbar-gutter: auto; }
  .support-detail-pane .thread-view { margin-top: 0; padding: 20px 16px; }
  .support-detail-pane .thread-meta { align-items: flex-start; }
  .support-detail-pane .thread-meta h3 { font-size: 18px; }
  .support-detail-pane .messages { max-height: 48svh; padding-block: 20px; }
  .support-detail-pane .message { max-width: 96%; }
  .support-detail-pane .message-text { padding: 12px 14px; }
  .support-detail-pane .actions { gap: 8px; }
}

.messages:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.support-list-pane .thread-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
@media(max-width:760px){
 .support-detail-pane .thread-meta,.thread-row-top{flex-wrap:wrap;gap:8px}
 .support-detail-pane .thread-meta h3{overflow-wrap:anywhere}
 .support-detail-pane .message-name,.support-detail-pane .message-time,.support-detail-pane .decision dt{font-size:14px}
 .support-selection-note{font-size:14px}
 .support-detail-pane{scroll-margin-top:16px}
}

.support-layout{margin-bottom:32px}
@media(max-width:760px){.support-layout{margin-bottom:24px}}