/* ============================================================
   Hub — CORRECTIFS TELEPHONE (v817, agent mobile-1211, 12/11, demande SHINO)
   Fichier charge en DERNIER : seulement des regles @media telephone (<= 768 px),
   rien ne change sur ordinateur. Un correctif = un bloc commente.
   ============================================================ */
@media (max-width: 768px) {

  /* 1. Menu lateral (3 traits) : OPAQUE + fond qui assombrit la page (avant : verre translucide, textes superposes) */
  :root body.hub-app > .sidebar.mobile-open,
  :root[data-theme] body.hub-app > .sidebar.mobile-open {
    background: var(--bg-secondary, #0a0a0a) !important;
    background-image: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    width: min(300px, 84vw) !important;
    left: 0 !important;
    box-shadow: 18px 0 60px rgba(0,0,0,.75) !important;
    border-right: 1px solid var(--border-light, rgba(255,255,255,.12)) !important;
    overflow-y: auto !important; overscroll-behavior: contain;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
  :root body.hub-app > .sidebar:not(.mobile-open) { left: -320px !important; }
  .sidebar-overlay.active {
    background: rgba(0,0,0,.72) !important;
    backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important;
  }
  body:has(.sidebar.mobile-open) { overflow: hidden; }

  /* 2. Commandes : cartes de commande qui debordaient (grille fixe 112+34+200+112+70 px) -> boutons sur 2 lignes max, jamais hors ecran */
  .vd-order { grid-template-columns: 44px minmax(0, 1fr) auto !important; min-width: 0; }
  .vd-order > * { min-width: 0; }
  .vd-o-a {
    display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
    grid-column: 1 / -1 !important; justify-content: stretch !important; margin-top: 8px;
  }
  .vd-o-a > span:empty { display: none !important; }
  .vd-o-a > * { flex: 1 1 calc(50% - 6px); min-width: 0 !important; max-width: 100%; }
  .vd-o-a .cp-btn { width: 100% !important; justify-content: center; min-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vd-o-a select { width: 100%; min-height: 40px; }
  .vd-o-a > .oa-dl { flex: 0 0 44px !important; }
  .vd-o-a > .oa-label { flex: 1 1 calc(100% - 50px); }
  /* filtres (A expedier / Expediees / Terminees...) : passent a la ligne au lieu d'etre coupes */
  #page-commandes .pp-chips, #page-commandes .vd-chips, #page-commandes .vd-filters { flex-wrap: wrap !important; overflow: visible !important; }
  #page-commandes .pp-chip { flex: none; }
  /* cartes de chiffres (a expedier / a encaisser / benefice) */
  #page-commandes :is(.vd-sum, .vd-sums, .vd-totals) { flex-wrap: wrap !important; }

  /* 2 bis. Preparer les colis : grille de boutons de 446 px (sortait de l'ecran) + transporteurs vides sur toute la hauteur */
  .pk-it { grid-template-columns: 30px 48px minmax(0, 1fr) !important; }
  .pk-it > .pk-dl, .pk-it > .pk-a { grid-column: 1 / -1 !important; }
  .pk-a { display: flex !important; flex-wrap: wrap; gap: 6px; }
  .pk-a > * { flex: 1 1 calc(50% - 6px); height: 38px !important; }
  .pk-a > .oa-dl { flex: 0 0 44px !important; }
  .pk-a > .oa-label { flex: 1 1 calc(100% - 50px); }
  .pk-cars { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .pk-cars::-webkit-scrollbar { display: none; }
  .pk-cars > .pk-car { flex: none; }
  .pk-cars > .pk-car.empty { display: none !important; }

  /* 3. Notifications : bandeau du haut (texte ecrase mot par mot) + periodes (« Ce mois-ci » sur 3 lignes) */
  .nf2-hero { flex-wrap: wrap; padding: 16px !important; gap: 12px !important; }
  .nf2-hx { flex: 1 1 180px !important; }
  .nf2-hx b { font-size: 18px !important; }
  .nf2-hx span { white-space: normal; }
  .nf2-hero > :last-child:not(.nf2-hx):not(.nf2-bell) { flex: 1 1 100%; }
  .nf2-seg { display: flex !important; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nf2-main, .nf2-tools, .nf2-tools > * { min-width: 0 !important; max-width: 100%; }
  .nf2-tools > .nf2-seg { flex: 1 1 100%; }
  .nf2-seg::-webkit-scrollbar { display: none; }
  .nf2-seg button { white-space: nowrap; flex: none; }

  /* 4. Statistiques / Dashboard : gros chiffres qui passaient a la ligne (« 1 396,00 » puis « € ») */
  .vd-kpi-v { font-size: clamp(19px, 6.2vw, 26px) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* 5. Creation d'annonce : colonne de 441 px dans un ecran de 366 px (zone photos coupee) */
  #page-annonce .ls-grid, .ls-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .ls-col { min-width: 0 !important; }
  .ls-photos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* 6. Prolongation : titre + legende ecrases */
  .prolong-section-header { flex-wrap: wrap; gap: 8px; }
  .prolong-legend { flex-wrap: wrap; gap: 6px 12px; }
  .prolong-legend-item { white-space: nowrap; }

  /* 7. Chatbox : la liste prend tout l'ecran ; une conversation ouverte prend tout l'ecran (bouton retour) ; panneaux opaques */
  .chatbox-layout:not(.hm-conv-on) .conv-list-panel { height: 100% !important; border-bottom: 0 !important; }
  .chatbox-layout:not(.hm-conv-on) .chat-panel { display: none !important; }
  .chatbox-layout.hm-conv-on .conv-list-panel { display: none !important; }
  .chatbox-layout.hm-conv-on .chat-panel { height: 100% !important; flex: 1 1 auto; }
  .hm-back { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: 4px; flex: none;
    border-radius: 12px; border: 1px solid var(--border-light, rgba(255,255,255,.14)); background: var(--bg-card, #111); color: var(--text-primary, #f5f5f5); cursor: pointer; }
  .hm-back svg { width: 20px; height: 20px; }
  :root[data-theme] :is(.conv-list-panel, .chat-header, .chat-input-area) { background-color: var(--bg-secondary, #0a0a0a) !important; }
  :root[data-theme] .item-detail-panel { background: var(--bg-secondary, #0a0a0a) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; position: fixed !important; inset: 0 !important; z-index: 99990 !important; width: 100% !important; overflow-y: auto; padding-top: env(safe-area-inset-top); }

  #chat-header { flex-wrap: wrap !important; row-gap: 6px; }
  #chat-header .chat-header-center { display: none !important; }
  #chat-header .chat-user-info { min-width: 0; flex: 1 1 140px; }
  #chat-header .chat-actions { flex-wrap: wrap !important; justify-content: flex-end; gap: 4px !important; min-width: 0; max-width: 100%; }

  /* 8. Studio IA / Bibliotheque : visionneuses au-dessus de tout, bouton fermer toujours visible (avant : cache sous la barre du haut) */
  #st-viewer, #st-lightbox { z-index: 100000 !important; background: rgba(0,0,0,.94) !important; padding: 0 !important; }
  #st-viewer .st-vw-close, #st-lightbox .st-lb-close {
    position: fixed !important; top: calc(10px + env(safe-area-inset-top)) !important; right: 12px !important; left: auto !important;
    width: 44px !important; height: 44px !important; border-radius: 50% !important; font-size: 26px !important; z-index: 3 !important;
    background: rgba(30,30,32,.92) !important; border: 1px solid rgba(255,255,255,.2) !important; color: #fff !important; display: inline-flex !important;
  }
  #st-viewer .st-vw-nav, #st-lightbox .st-lb-nav { display: inline-flex !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: rgba(30,30,32,.85) !important; color: #fff !important; z-index: 3 !important; }
  #st-viewer .st-vw-nav { position: fixed !important; top: 46% !important; bottom: auto !important; }
  #st-viewer .st-vw-prev { left: 8px !important; } #st-viewer .st-vw-next { right: 8px !important; }
  #st-lightbox .st-lb-prev { left: 8px !important; top: 30% !important; } #st-lightbox .st-lb-next { right: 8px !important; top: 30% !important; }
  #st-viewer .st-vw-fig { max-width: 100vw !important; padding: 60px 10px calc(16px + env(safe-area-inset-bottom)); }
  #st-viewer .st-vw-fig img { max-width: 100% !important; max-height: 74vh !important; }
  #st-viewer .st-vw-fig figcaption { flex-wrap: wrap; justify-content: center; }
  #st-lightbox .st-lb-box { background: var(--bg-secondary, #0a0a0a) !important; height: 100dvh !important; width: 100vw !important; border-radius: 0 !important; border: 0 !important; }
  #st-lightbox .st-lb-img { padding-top: calc(58px + env(safe-area-inset-top)); }
  .hm-swipe-hint { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); font-size: 11.5px; color: rgba(255,255,255,.55); z-index: 3; pointer-events: none; white-space: nowrap; }
  #st-lightbox .hm-swipe-hint { display: none; }

  /* 9. Boutons flottants (micro + musique) : plus petits, et la page se termine au-dessus d'eux */
  :root body.hub-app > .main { padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important; }
  .page { min-width: 0; max-width: 100%; }
  img, video, canvas { max-width: 100%; }
}