/* ─── Mobile — WhSP (iPhone PWA) ────────────────────────────────────────────── */
/* Tutti gli stili @media (max-width: 768px) sono qui.                           */
/* Caricato DOPO style.css in index.html — sovrascrive dove necessario.          */

/* ─── Contenimento orizzontale — nessuno scroll laterale ────────────────────── */
@media (max-width: 768px) {
  html {
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .app-shell,
  .main-content {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Tab container generici */
  .tab-shell,
  .archivio-shell,
  .storico-shell {
    overflow-x: hidden;
  }

  /* Emoji picker: adatta alla larghezza schermo */
  .emoji-panel {
    width: calc(100vw - 32px);
    max-width: 320px;
    left: 0;
  }

  /* Tabelle: scroll interno orizzontale, non fa scorrere la pagina */
  .fiera-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── App shell & navigazione ─────────────────────────────────────────────── */
@media (max-width: 768px) {

  .app-shell {
    flex-direction: column;
  }

  /* Sidebar → tab bar fissa in basso con safe area iPhone */
  .sidebar {
    width: 100%;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .sidebar-logo   { display: none; }
  .sidebar-footer { display: none; }

  /* Tab bar: 5 voci distribuite uniformemente su tutta la larghezza */
  .nav-menu {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0;
    overflow: hidden;
  }

  .nav-item {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6px 4px;
    gap: 3px;
    border-left: none;
    border-top: 3px solid transparent;
  }

  .nav-item.active {
    border-left: none;
    border-top-color: var(--giallo);
  }

  .nav-icon  { font-size: 24px; }
  .nav-label { font-size: 11px; white-space: nowrap; }

  /* Header mobile in cima */
  .mobile-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    background: var(--blu);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
    border-bottom: 2px solid var(--giallo);
  }

  .mobile-logo  { height: 36px; width: auto; }
  .mobile-title { color: var(--giallo); font-size: 16px; font-weight: bold; }

  /* Main content: spazio tra header e tab bar — dvh per tastiera iOS */
  .main-content {
    margin-top: calc(54px + env(safe-area-inset-top, 0px));
    height: calc(100dvh - 54px - env(safe-area-inset-top, 0px) - 56px - env(safe-area-inset-bottom, 0px));
    padding-bottom: 0;
  }

  /* Chat shell — colonna singola */
  .chat-shell {
    flex-direction: column;
  }

  .conv-list {
    width: 100%;
    height: 100%;
    border-right: none;
  }

  /* Chat area aperta — copre tutto tranne la tab bar (con safe area).
     max() garantisce che con tastiera aperta il bottom segua la tastiera
     invece di restare dietro di essa (--keyboard-offset aggiornato via JS). */
  .chat-area {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: max(calc(56px + env(safe-area-inset-bottom, 0px)), var(--keyboard-offset));
    z-index: 50;
    display: none;
  }

  .chat-area.mobile-visible {
    display: flex;
    z-index: 102; /* sopra il mobile-header (101) */
  }

  /* Header chat — pulsante back */
  .chat-header {
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  }

  .btn-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--crema);
    border: none;
    cursor: pointer;
    font-size: 18px;
    flex-shrink: 0;
  }

  /* Bolle più larghe su mobile */
  .bolla { max-width: 85%; }

  /* Bottone profilo cliente nell'header chat */
  .btn-profilo-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--crema);
    border: none;
    cursor: pointer;
    font-size: 18px;
    flex-shrink: 0;
  }

  /* Overlay profilo cliente — full-screen sopra la chat */
  .profilo-overlay {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 103;
    background: #f9f6ea;
    overflow: hidden;
  }

  .profilo-overlay-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
    background: var(--blu);
    border-bottom: 2px solid var(--giallo);
    flex-shrink: 0;
  }

  .profilo-overlay-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--giallo);
  }

  .profilo-overlay-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
  }
}

/* ─── Pannello destro: nascosto su mobile ──────────────────────────────────── */
@media (max-width: 768px) {
  .pannello-dx {
    display: none;
  }
}

/* ─── Media tab ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .media-tab {
    padding: 12px;
    max-width: 100%;
    overflow-x: hidden;
  }

  .media-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 20px;
  }

  .media-upload-section .media-upload-inner {
    flex-direction: column !important;
  }

  .media-dropzone {
    width: 100% !important;
    min-height: 80px;
  }
}

/* ─── Modelli tab ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .modelli-toolbar {
    gap: 8px;
    padding: 10px 12px;
  }

  .stato-badges { display: none; }

  .modelli-layout {
    flex-direction: column;
    overflow: hidden;
  }

  .modelli-lista {
    width: 100%;
    min-width: unset;
    border-right: none;
    overflow-y: auto;
    flex-shrink: 0;
  }

  .mobile-hidden { display: none !important; }
}