/*
 * koboss-fix.css — Correction layout mobile v4
 *
 * Problème : espace au-dessus du bouton ≠ espace en-dessous
 *
 * Cause :
 *   Avec flex-start, padding-top = 1.5rem mais le bas du bouton est suivi
 *   du texte de statut (~26px) + l'arrondi de section (rounded-t-3xl = 24px)
 *   → l'œil perçoit ~50px en bas vs ~24px en haut.
 *
 * Solution v4 :
 *   - main → flex-1 + justify-center (centre le groupe micro+statut)
 *   - padding-top = ~3rem pour décaler le centre vers le haut,
 *     compensant exactement : statut (~26px) + border-radius visuel (~24px)
 *   - section → hauteur fixe 55% (toujours visible, barre de saisie incluse)
 */

/* ── 1. Body : 100dvh corrige le bug viewport Safari/iOS ──────────────── */
body {
  height: 100dvh !important;
}
@supports not (height: 100dvh) {
  body { height: 100vh !important; }
}

/* ── 2. Main : flex-1 + justify-center + padding-top compensé ─────────── */
main {
  flex: 1 1 0% !important;
  justify-content: center !important;
  /* padding-top = hauteur_statut seule (~26px) = 1.625rem */
  padding: 1.625rem 0.75rem 0 0.75rem !important;
}

/* ── 3. Bouton micro : 96px ───────────────────────────────────────────── */
#mic-btn {
  width: 6rem !important;    /* 96px */
  height: 6rem !important;
}

/* ── 4. Statut micro : marge réduite ─────────────────────────────────── */
#mic-status {
  margin-top: 0.375rem !important;
}

/* ── 5. Section chat : hauteur fixe 55% ──────────────────────────────── */
section {
  flex: 0 0 55% !important;
  height: 55% !important;
  min-height: 0 !important;
}

/* ── 6. Barre de saisie : safe area iOS home indicator ───────────────── */
section > div:last-child {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
}