/*
 * 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.
 */

/* ── Чат на телефоне: панель в высоту экрана ──
   Лента тянется, поле ввода прижато вниз — свежее сообщение всегда на виду,
   страницу не нужно дотягивать. 8.5rem = верхнее (4rem) + нижнее (4rem) меню
   + зазор; dvh следит за клавиатурой (viewport: interactive-widget=resizes-content).
   Пока в поле набирают, нижнее меню и второстепенные ряды прячутся —
   освобождают место под переписку. С sm — прежняя раскладка по высоте контента. */
@media (max-width: 639px) {
  .chat-pane {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 8.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 320px;
  }
  .chat-pane-messages { flex: 1 1 0; min-height: 0; }
  .chat-pane > * { flex-shrink: 0; }
  .chat-pane > .chat-pane-messages { flex-shrink: 1; }
  body:has(.chat-composer:focus) .mobile-bottom-nav { display: none; }
  body:has(.chat-composer:focus) .chat-pane {
    height: calc(100dvh - 4.5rem - env(safe-area-inset-top));
  }
  body:has(.chat-composer:focus) .chat-tools,
  body:has(.chat-composer:focus) .chat-secondary { display: none; }
}