/* =========================================================================
 * BAZA-S226 — Mode DESKTOP natif : rail de navigation latéral (WhatsApp Desktop).
 *
 * Suite de la fondation S224 (dé-cadrage de la coque téléphone, dans index.css).
 * Ici on transforme la barre d'onglets basse en un RAIL VERTICAL fixe à gauche,
 * présent sur les écrans à onglets (Profils / Messages / Groupes / Moi), et on
 * borne la largeur du contenu pour la lisibilité sur grand écran. Un fil de
 * conversation ouvert occupe toute la fenêtre (la coque masque alors les onglets,
 * parité avec le comportement mobile existant — aucune régression).
 *
 * SERVI DEPUIS public/ + <link> (jamais fusionné par Vite dans assets/index-*.css)
 * afin de NE PAS toucher au hash de la coque CSS GELÉE S141 (même mécanisme que
 * public/s215-scroll-red-bands.css). Strictement additif et gardé par
 * `:root[data-baza-desktop='1']` + largeur ≥ 900px : AUCUN effet sur mobile / PWA /
 * APK, aucune modification du DOM ni de la logique viewport iOS S64D/S173.
 * ========================================================================= */
@media (min-width: 900px) {
  /* Réserve la gouttière du rail dans la coque plein écran S224. */
  :root[data-baza-desktop='1'] .device-screen .app {
    padding-left: 84px;
  }

  /* Barre d'onglets → rail vertical FIXE à gauche (pleine hauteur de fenêtre). */
  :root[data-baza-desktop='1'] .app > .tabbar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 84px;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 16px 0;
    border-top: none;
    border-right: 1px solid var(--divider);
    background-color: #f0f2f5;
    z-index: 40;
  }

  :root[data-baza-desktop='1'] .app > .tabbar .tab {
    flex: 0 0 auto;
    width: 100%;
    padding: 12px 4px;
    border-radius: 12px;
  }

  /* Accent d'onglet actif : bord GAUCHE (au lieu du bord haut en mobile). */
  :root[data-baza-desktop='1'] .app > .tabbar .tab.is-active::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 3px;
    height: 26px;
    border-radius: 0 3px 3px 0;
  }

  /* Contenu borné pour la lisibilité (colonne confortable, calée sur le rail). */
  :root[data-baza-desktop='1'] .app > .screen {
    max-width: 860px;
    min-width: 0;
  }

  /* Le bandeau « Installer l'app » (invite PWA mobile) n'a pas de sens en desktop
     natif : masqué pour garder le rail propre. */
  :root[data-baza-desktop='1'] .install-banner {
    display: none;
  }
}

/* =========================================================================
 * BAZA-S226B — Messagerie DESKTOP en DEUX PANNEAUX (WhatsApp Desktop).
 *
 * Correctif de revue S226 (la version rail-seul laissait une grande zone
 * blanche à droite). À partir de 1000px et en mode desktop natif, l'onglet
 * Messages rend SIMULTANÉMENT (DOM piloté par React, cf. `desktopTwoPaneMessages`
 * dans RealAppShell) : la colonne LISTE à gauche + le fil CONVERSATION à droite.
 * Sans sélection, le panneau droit affiche un ÉTAT VIDE Baza (jamais une page
 * blanche). Strictement additif, gardé par `:root[data-baza-desktop='1']` +
 * `≥1000px` : AUCUN effet mobile / PWA / APK (le conteneur `.s226b-messages-desktop`
 * n'est même pas monté hors desktop). Aucune règle ne touche la coque CSS gelée S141.
 * ========================================================================= */
@media (min-width: 1000px) {
  /* La colonne de contenu bornée à 860px (rail) laisse place à la pleine largeur
     dès que la vue deux panneaux est montée. */
  :root[data-baza-desktop='1'] .app > .screen:has(.s226b-messages-desktop) {
    max-width: none;
  }

  /* Conteneur : remplit la zone-écran, deux colonnes côte à côte. */
  :root[data-baza-desktop='1'] .s226b-messages-desktop {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow: hidden;
  }

  /* Colonne LISTE (gauche) : largeur confortable et bornée (360–440px), défile
     seule ; garde son en-tête « Messages » et sa liste (composant réutilisé). */
  :root[data-baza-desktop='1'] .s226b-msg-list {
    flex: 0 0 clamp(360px, 32vw, 440px);
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--divider);
    background-color: var(--surface);
  }

  /* Panneau CONVERSATION (droite) : occupe tout le reste ; héberge le fil réel
     (`.conversation-screen`, déjà en flux à ≥768px) OU l'état vide. */
  :root[data-baza-desktop='1'] .s226b-msg-thread {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* En deux panneaux, le bouton « retour » du fil (utile en mobile pour revenir à
     la liste) n'a plus d'objet : la liste est toujours visible. Masqué proprement. */
  :root[data-baza-desktop='1'] .s226b-msg-thread .thread-back {
    display: none;
  }

  /* État VIDE Baza (aucune conversation sélectionnée) — jamais une page blanche. */
  :root[data-baza-desktop='1'] .s226b-msg-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px;
    text-align: center;
    background-color: var(--chat-bg, #f0f2f5);
  }

  :root[data-baza-desktop='1'] .s226b-msg-empty-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    opacity: 0.9;
  }

  :root[data-baza-desktop='1'] .s226b-msg-empty-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    color: #111b21;
  }

  :root[data-baza-desktop='1'] .s226b-msg-empty-hint {
    margin: 0;
    max-width: 360px;
    font-size: 0.95rem;
    color: #667781;
  }
}