/*
 * PsychAssist — mobile.css  (v2)
 * Approche : le panneau analyse démarre caché sur mobile.
 * JS ajoute .mobile-open pour l'afficher → slide depuis la droite.
 * Desktop : @media min-width restaure tout à l'identique.
 */

/* ── Éléments uniquement mobiles (cachés sur desktop) ─────────── */
.mobile-menu-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r);
  border: none; background: transparent;
  font-size: 22px; cursor: pointer;
  color: var(--ink-400);
  transition: background var(--t) var(--ease);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn:active { background: var(--navy-50); }

.ap-mobile-back {
  display: none; /* visible only on mobile via media query */
}

.mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10,24,39,.55);
  z-index: 98;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mobile-overlay.show { display: block; }


/* ═══════════════════════════════════════════════════════════════
   TABLETTE + TÉLÉPHONE  ≤ 900px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Hamburger visible */
  .mobile-menu-btn { display: flex; }

  /* Bouton retour dans le panneau d'analyse */
  .ap-mobile-back {
    display: flex !important;
    align-items: center; gap: 5px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--navy-50);
    color: var(--navy-800);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Sidebar : overlay depuis la gauche ── */
  .sidebar {
    position: fixed !important;
    left: -280px; top: 0; bottom: 0;
    z-index: 100;
    transition: left .28s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
  }
  .sidebar.mobile-open {
    left: 0;
    box-shadow: 4px 0 24px rgba(10,24,39,.28);
  }

  /* ── Panneau analyse : plein écran overlay depuis la droite ── */
  /* Toujours hors-écran par défaut sur mobile */
  .analysis-panel {
    position: fixed !important;
    inset: 0 !important;              /* couvre tout l'écran */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: translateX(100%);      /* caché à droite */
    transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
    border-left: none !important;
    box-shadow: none;
    z-index: 99;
  }

  /* .hidden : reste hors-écran (override la règle desktop width:0) */
  .analysis-panel.hidden {
    transform: translateX(100%) !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* .mobile-open : panneau visible (ajouté par JS) */
  .analysis-panel.mobile-open {
    transform: translateX(0) !important;
  }

  /* Poignée de resize : inutile sur tactile */
  .ap-resize-handle { display: none !important; }

  /* FIX 2 : scroll vertical dans le panneau d'analyse
     Le panneau est position:fixed plein écran → flex column
     ap-top fixe en haut, #apContent prend le reste et défile */
  .analysis-panel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #apContent {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch; /* scroll fluide iOS */
    min-height: 0 !important;
  }

  .ap-body {
    overflow-y: visible !important; /* le scroll est géré par #apContent */
    flex: none !important;
  }

  .ap-empty {
    flex: none !important;
    padding: 40px 24px !important;
  }

  /* Boutons ap-btn plus grands */
  .ap-btn { padding: 7px 11px; font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════
   DESKTOP > 900px — restauration complète du comportement original
═══════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {

  .mobile-menu-btn   { display: none !important; }
  .ap-mobile-back    { display: none !important; }
  .mobile-overlay    { display: none !important; }

  /* Panneau : comportement flex column original */
  .analysis-panel {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 380px !important;
    min-width: 280px !important;
    max-width: 680px !important;
    transition: width .25s cubic-bezier(.4,0,.2,1) !important;
    border-left: 1px solid var(--border-light) !important;
    box-shadow: -4px 0 20px rgba(10,24,39,.07) !important;
    z-index: auto !important;
  }

  .analysis-panel.hidden {
    width: 0 !important;
    min-width: 0 !important;
    border-left: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* .mobile-open ignoré sur desktop */
  .analysis-panel.mobile-open { transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   SMARTPHONE ≤ 600px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Barre haute */
  .main-top   { padding: 0 10px; height: 50px; gap: 6px; }
  .mode-badge { font-size: 11px; padding: 4px 9px; max-width: 150px;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top-btn    { padding: 5px 8px; font-size: 11px; gap: 3px; }

  /* Chat */
  .chat-area { padding: 12px 10px; gap: 10px; }
  .msg       { max-width: 96%; }
  .bubble    { padding: 9px 12px; font-size: 12.5px; line-height: 1.6; }
  .avatar    { width: 28px; height: 28px; font-size: 9.5px; margin-top: 1px; }

  /* Zone de saisie — textarea au-dessus, boutons en dessous */
  .input-wrap { padding: 10px 10px 14px; }

  /* FIX 1 : colonne au lieu de ligne */
  .input-row {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .input-textarea {
    width: 100%;
    min-height: 80px;       /* Plus haut car seul sur sa ligne */
    max-height: 160px;
    padding: 12px 14px;
    font-size: 16px;         /* empêche le zoom auto sur iOS */
    line-height: 1.55;
    border-radius: var(--r-md);
    resize: none;
  }

  /* Boutons côte à côte sur leur propre ligne */
  .input-btns {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
  }

  .btn-analyze {
    flex: 1.5;
    padding: 13px 10px;
    font-size: 14px;
    font-weight: 700;
    justify-content: center;
    border-radius: var(--r-md);
  }

  .btn-send {
    flex: 1;
    padding: 13px 10px;
    font-size: 14px;
    justify-content: center;
    border-radius: var(--r-md);
  }

  /* Bannière avertissement */
  .warn-banner { padding: 5px 10px; font-size: 10px; line-height: 1.5; }

  /* Panneau analyse : en-tête plus compact */
  .ap-top { padding: 0 10px; height: 52px; gap: 6px; }
  .ap-title { font-size: 11px; }
  .ap-body  { padding: 12px; }

  /* Zone sécurisée iPhone (notch / home bar) */
  .input-wrap {
    padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
  }
}


/* ═══════════════════════════════════════════════════════════════
   PAYSAGE (hauteur < 500px)
═══════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .input-textarea  { min-height: 40px; }
  .btn-analyze, .btn-send { padding: 10px 8px; }
  .chat-area { padding: 8px 10px; }
  .main-top  { height: 44px; }
}