/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Messenger master/detail responsiveness.
 *
 * Desktop (>= lg / 1024px): both panes are always visible (Tailwind utilities
 * on the panes handle this). Mobile/tablet (< lg): the list shows first; when
 * a conversation is selected the messenger controller flips
 * data-messenger-view-value to "detail", revealing the conversation full-width
 * and hiding the list — phone texting-app behavior. A "back" control flips it
 * back to "list".
 */
@media (max-width: 1023px) {
  .messenger-shell[data-messenger-view-value="detail"] .messenger-list {
    display: none;
  }

  .messenger-shell[data-messenger-view-value="detail"] .messenger-detail {
    display: flex;
  }
}

/*
 * Default width of the resizable conversation list pane (desktop only). The
 * resizable controller overrides --list-w on drag and restores it from
 * localStorage on connect; this is the fallback before any of that runs.
 */
.messenger-shell {
  --list-w: 20rem;
}