/* Mobile polish pass (2026-10-12). Loaded last; phone-only rules stay inside
   the 800px breakpoint that app.js isMobileLayout() mirrors. */

/* Thread root quote shows on every layout. */
.th-panel .th-heading { flex: 1; min-width: 0; }
.th-panel .th-heading h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-panel .th-parent { margin-top: 2px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-panel .th-root {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.th-panel .th-root .avatar.small { width: 32px; height: 32px; min-width: 32px; font-size: 12px; }
.th-panel .th-root-body { min-width: 0; }
.th-panel .th-root-name { font-size: 13px; font-weight: 650; color: var(--text-bright); }
.th-panel .th-root-text {
  margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--text);
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.qs-item .qs-kind { display: inline-flex; color: var(--muted); margin-right: -8px; }
.qs-item .qs-kind + .qs-label { flex: 1; }
.profile-pop.pp-error { padding: 20px; }
.profile-pop.pp-error h3 { margin: 0 0 8px; }
.profile-pop.pp-error .row { justify-content: flex-end; margin-top: 16px; }

@media (max-width: 800px) {
  /* Containers focused by script for screen readers never need a ring. */
  .app-page :is(.modal, .qs-panel):focus { outline: none; }
  .floating-menu.mob-sheet > .mob-sheet-handle:focus { outline: none; }
  .floating-menu.mob-sheet > .mob-sheet-handle:focus-visible::before { background: var(--accent); width: 44px; }
  .floating-menu.mob-sheet .emoji-cat-h { background: var(--bg-2); padding-inline: 8px; }

  /* One-tap reactions on top of the long-press sheet. */
  .floating-menu.mob-sheet .fm-custom:has(> .mob-quick-react) { padding: 0; }
  .mob-quick-react { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 2px 0 6px; }
  .floating-menu.mob-sheet .mob-quick-react button {
    display: grid; place-items: center; min-height: 48px; padding: 0;
    font-size: 24px; line-height: 1; background: var(--bg-3); border: 1px solid transparent; border-radius: 10px;
  }
  .floating-menu.mob-sheet .mob-quick-react button.mine { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--bg-3)); }
  .floating-menu.mob-sheet .mob-quick-react button.more { color: var(--muted); }
  .floating-menu.mob-sheet .mob-quick-react button:active { transform: scale(.94); }

  /* Header: the clock is Reminders, which the Notifications tab already holds. */
  .main > .conversation-header #reminderBtn { display: none; }
  .main > .conversation-header .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Server channel list: 62px rows were sized for DM rows with a preview line. */
  .sidebar .server-navigation .list-item[data-chat-id] { min-height: 46px; padding-block: 2px; }
  .sidebar .server-navigation .cat-wrap { margin-top: 10px; }
  .sidebar .server-navigation .cat-head { min-height: 40px; padding: 8px 8px 2px; }
  .sidebar .server-navigation .cat-head .cat-add { width: 40px; height: 40px; min-height: 40px; margin: -6px -6px -6px auto; }
  .sidebar .server-navigation .server-head-btn { margin-bottom: 6px; }
  .sidebar .list-item .unread-badge { margin-left: auto; }
  .sidebar .list-item .unread-badge + .chan-menu-btn { margin-left: 0; }
  .sidebar .list-item .list-preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Friend requests read as requests, with room between the two buttons. */
  .friend-row-pending .fr-label { flex: 1; min-width: 0; }
  .friend-row-pending .fr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .friend-row-pending .fr-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .friends-page .friend-row .actions { gap: 8px; }
  .friends-page .friend-row-pending .actions button { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 10px; }
  .friends-page .friend-row-pending .actions button.ghost { background: var(--bg-3); }

  /* Tab roots: no back chevron (the tab bar is the way out) and no chat
     header over Games, which carries its own page title like Friends. */
  .app.tab-screen .inbox-screen-close { display: none; }
  .app.tab-screen .main .inbox-screen > .inbox-screen-head { padding-left: 16px; }
  .app.tab-screen:has(#friendsPanel .games-page) .main > .conversation-header { display: none; }
  #friendsPanel > .games-page { padding: max(14px, env(safe-area-inset-top)) 0 24px; }

  /* Quick switcher: pinned to the top so the keyboard never covers results. */
  .app-page .qs-bg { align-items: flex-start; padding: calc(var(--mob-viewport-top, 0px) + max(8px, env(safe-area-inset-top))) 8px 8px; }
  .qs-bg .qs-panel {
    width: 100%; max-width: none; margin: 0;
    max-height: calc(var(--mob-viewport-height, 100dvh) - 16px - env(safe-area-inset-top));
    display: flex; flex-direction: column;
  }
  .qs-bg .qs-list { flex: 1; min-height: 0; overflow-y: auto; }
  .qs-bg .qs-footer { display: none; }
  .qs-bg .qs-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; }
  .qs-bg .qs-input { margin-inline: 12px; width: auto; border-radius: 8px; font-size: 16px; }
  .qs-bg .qs-input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
  .qs-bg .qs-item { min-height: 48px; align-items: center; }

  /* Send reads as idle until there is something to send. */
  #mainContent:not(:has(#attachPreview .chip)) .composer:has(#msgInput:placeholder-shown) #msgSend:not(:disabled) {
    background: var(--bg-4); color: var(--muted); border-color: transparent; box-shadow: none;
  }

  /* Threads open full-screen, like the chat they branch from. */
  .thread-panel-bg:has(.th-mobile) { padding: 0; align-items: stretch; background: var(--bg); }
  .modal.th-panel.th-mobile {
    position: fixed; left: 0; right: 0; top: var(--mob-viewport-top, 0px);
    width: 100%; max-width: none; height: var(--mob-viewport-height, 100dvh); max-height: none;
    margin: 0; border: 0; border-radius: 0; box-shadow: none;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  .th-mobile .panel-head {
    flex-wrap: nowrap; align-items: center; gap: 4px; min-height: 60px;
    padding: 6px 8px; margin: 0; border-bottom: 1px solid var(--border);
  }
  .th-mobile .panel-head h3 { font-size: 16px; }
  .th-mobile .th-back { width: 44px; height: 44px; min-width: 44px; flex: none; }
  .th-mobile .th-head-actions { display: flex; align-items: center; gap: 2px; flex: 0 1 auto; min-width: 0; width: auto; }
  .th-mobile .th-head-actions .icon-btn { width: 44px; height: 44px; min-width: 44px; }
  .th-mobile .th-follow-select { flex: 0 1 auto; width: auto; max-width: 164px; min-height: 40px; font-size: 13px; }
  .th-mobile .thread-messages { flex: 1; min-height: 0; max-height: none; padding: 8px 12px; }
  .th-mobile .thread-composer {
    display: flex; align-items: flex-end; gap: 4px; margin: 0;
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border);
  }
  .th-mobile .thread-composer .icon-btn, .th-mobile .thread-composer button[type="submit"] { width: 44px; height: 44px; min-width: 44px; flex: none; }
  .th-mobile .thread-composer button[type="submit"] { background: var(--accent); color: #fff; border: 0; border-radius: 10px; }
  .th-mobile .thread-composer button[type="submit"]:disabled { opacity: .5; }
  .th-mobile textarea.thread-input { flex: 1; min-height: 44px; font-size: 16px; border-radius: 10px; }
  .th-mobile textarea.thread-input:focus { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: none; }
}

/* Phones: the profile/members drawer takes the whole width. A 280px panel
   left a sliver of dimmed chat beside a cramped profile card. */
@media (max-width: 520px) {
  .right, .app.with-right .right {
    width: 100%; max-width: none; border-left: 0;
    padding-top: max(52px, calc(env(safe-area-inset-top) + 52px));
  }
  .right .right-close { top: max(8px, env(safe-area-inset-top)); right: 8px; width: 44px; height: 44px; }
}
@media (max-width: 800px) {
  .right .member { min-height: 48px; gap: 12px; font-size: 15px; }
  .right .member .avatar.small { width: 34px; height: 34px; min-width: 34px; font-size: 12px; }
}

/* Minimized-call banner pushes the app down instead of covering its top. */
@media (max-width: 800px) {
  :root { --call-banner-h: calc(34px + env(safe-area-inset-top, 0px)); }
  .mobile-call-banner { height: var(--call-banner-h); box-sizing: border-box; border-radius: 0; padding-bottom: 0; padding-top: env(safe-area-inset-top, 0px); }
  body:has(> .app.has-banner) .mobile-call-banner { top: 40px; height: 34px; padding-top: 0; }
  .app.has-call-banner, .app.has-call-banner.with-right, .app.has-call-banner.no-sidebar, .app.has-call-banner.no-sidebar.with-right {
    margin-top: var(--call-banner-h); height: calc(100dvh - var(--call-banner-h));
  }
  .app.has-banner.has-call-banner, .app.has-banner.has-call-banner.with-right {
    margin-top: calc(40px + 34px); height: calc(100dvh - 74px);
  }
  .app-page .app.has-call-banner { --mob-banner: var(--call-banner-h); }
  .app-page .app.has-banner.has-call-banner { --mob-banner: 74px; }
  .app-page .app.has-call-banner .main { padding-top: 0; }
  .app.has-call-banner :is(.server-rail, .sidebar-search) { padding-top: 12px; }
  .app.has-call-banner .right { top: var(--mob-banner); }
}