/*
 * Café sur téléphone et petits écrans.
 * - Portrait (étroit) : la carte devient un bandeau compact sous les boutons du haut, le
 *   lecteur prend tout le reste ; le chat animé disparaît faute de place.
 * - Paysage (peu de hauteur) : on garde les deux colonnes, sans chat, avec des marges qui
 *   laissent libres le bouton retour (gauche) et le bouton son (droite) ; le bouton du hub
 *   descend en bas de la marge gauche, le haut étant occupé par le lecteur.
 * Invariant : Next, lecture et barre de progression restent visibles sans défilement.
 */
@media (max-width: 760px) {
  .cafe { align-items: stretch; font-size: 18px; }
  .content-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    height: 100%;
    padding: 84px 12px max(12px, env(safe-area-inset-bottom));
  }
  .profile-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 12px 16px;
    text-align: left;
  }
  .cat-container { display: none; }
  .user-name { grid-column: 1; margin: 0; font-size: 1.7rem; }
  .speaker-name-sub { grid-column: 1; margin: 0; font-size: 1.3rem; text-align: left; }
  .next-button { grid-column: 2; grid-row: 1 / span 2; padding: 10px 18px; }
  .message-box { flex: 1; min-height: 0; padding: 16px; }
  .tabs-container { margin-bottom: 12px; }
  .message-title { font-size: 1.5rem; }
  .audio-player-custom { gap: 10px; padding: 12px 16px; }
  .voice-volume-control { display: none; }
  .cat-hotspot { display: none; }
}

@media (max-height: 500px) and (min-width: 561px) {
  .cafe { font-size: 16px; }
  .content-wrapper {
    gap: 14px;
    width: 100%;
    height: 100%;
    padding: 10px 84px max(10px, env(safe-area-inset-bottom));
    flex-direction: row;
    align-items: stretch;
  }
  .profile-card {
    display: flex;
    width: 200px;
    height: auto;
    padding: 16px 12px;
    text-align: center;
  }
  .cat-container { display: none; }
  .user-name { margin: auto 0 6px; font-size: 1.8rem; }
  .speaker-name-sub { margin: 0 0 10px; text-align: center; }
  .next-button { grid-row: auto; }
  .message-box { height: auto; padding: 12px 16px; }
  .tabs-container { margin-bottom: 8px; }
  .message-header { margin-bottom: 4px; }
  .message-title { font-size: 1.4rem; }
  .audio-player-custom { padding: 8px 14px; }
  .cat-hotspot { display: none; }
  .hub-return {
    top: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(6px, env(safe-area-inset-left));
    transform: none;
    padding: .5em .75em;
  }
}