/*
 * APEX Social: layout, accessibility and polish fixes.
 * Loaded after the app stylesheet; written against the shipped class names so it can be
 * applied on top of the current live build. Fold into src/styles.css when the client
 * source is reconciled. Selectors are prefixed with `html` to win over equal-specificity
 * rules regardless of load order.
 */

/* 1. Flex children default to min-width:auto, so inputs refused to shrink and pushed the
      login phone field and the composer's send/mic button past the screen edge on phones. */
html .phone-row input,
html .composer input,
html .search input { min-width: 0; }
html .phone-row .cc-select { flex: 0 0 auto; max-width: 42%; }

/* 2. Chat header: let name/status ellipsize instead of wrapping into a tall header,
      and keep the call/search actions from being squeezed. */
html .chat-head .head-info { flex: 1 1 auto; min-width: 0; }
html .chat-head .head-meta { min-width: 0; }
html .chat-head .head-name,
html .chat-head .head-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .chat-head .head-actions { flex-shrink: 0; }

/* 3. Safe-area padding had left/right swapped on small screens (matters in landscape/notch). */
@media (max-width: 480px) {
  html .messages { padding: 12px calc(8px + var(--sar)) 12px calc(8px + var(--sal)); }
}

/* 4. Stay pinned to the newest message while content above it settles (link previews,
      images loading). Scroll anchoring targets the spacer at the end of the list. */
html .messages > * { overflow-anchor: none; }
html .messages::after { content: ''; display: block; flex: 0 0 1px; overflow-anchor: auto; }

/* 5. Phones: 16px text inputs stop iOS from auto-zooming on focus, which is what lets the
      page allow pinch-zoom again (viewport no longer needs user-scalable=no). */
@media (max-width: 820px) {
  html .composer input,
  html .auth-form input,
  html .search input,
  html .modal-input,
  html .phone-row .cc-select { font-size: 16px; }
}

/* 6. Touch targets: at least 44px for header/icon buttons on touch screens. */
@media (pointer: coarse) {
  html .icon-btn { width: 44px; height: 44px; }
  html .composer-icon { width: 44px; height: 44px; }
}
html button, html a { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 7. Keyboard users get a visible focus ring (the app removed outlines without a replacement),
      and the message menu caret shows when a bubble has keyboard focus, not only on hover. */
html :is(button, [role='button'], a, select, summary):focus-visible {
  outline: 2px solid var(--navy-2, #2c56a6);
  outline-offset: 2px;
  border-radius: 8px;
}
html[data-theme='dark'] :is(button, [role='button'], a, select, summary):focus-visible { outline-color: var(--mint-soft, #5fe3b0); }
html .bubble:focus-within .msg-caret { opacity: 1; }

/* 8. Polish: softer bubble depth, smoother send button, tabular timestamps. */
html .bubble { box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
html[data-theme='dark'] .bubble { box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.35); }
html .send-btn { box-shadow: 0 2px 6px rgba(22, 48, 95, 0.28); }
html .row-time, html .bubble-meta { font-variant-numeric: tabular-nums; }

/* 9. Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  html *, html *::before, html *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}