/*───────────────────────────────────────────────
 DJOBI – Version Bureau (PC)
───────────────────────────────────────────────*/
@media (min-width: 1025px) {

    /* Structure du header */
    .djobi-tc-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding: 15px 20px;
        background: var(--djobi-header, #0073aa);
        color: #fff;
        border-radius: 8px 8px 0 0;
    }

    .djobi-tc-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
    }

    .djobi-tc-header p {
        margin: 3px 0 0;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.85);
    }

    /* Bouton principal : Créer un ticket */
    .djobi-tc-header .djobi-create-ticket,
    .djobi-tc-header #djobi-tc-new-desktop,
    .djobi-tc-header .djobi-primary-btn-desktop {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: #fff;
        color: #0073aa;
        font-size: 15px;
        font-weight: 600;
        padding: 10px 20px;
        border-radius: 6px;
        border: 2px solid #fff;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .djobi-tc-header .djobi-create-ticket:hover,
    .djobi-tc-header #djobi-tc-new-desktop:hover,
    .djobi-tc-header .djobi-primary-btn-desktop:hover {
        background: #0073aa;
        color: #fff;
        border-color: #fff;
        transform: translateY(-1px);
    }

    /* Cache les boutons mobiles */
    .djobi-mobile-actions {
        display: none !important;
    }
}

/*───────────────────────────────────────────────
 DJOBI – Version Tablette et Mobile
───────────────────────────────────────────────*/
@media (max-width: 1024px) {

    /* Structure générale */
    .djobi-ticket-center {
        min-height: 420px;
    }

    .djobi-tc-header {
        display: block;
        position: relative;
        background: var(--djobi-header, #0073aa);
        color: #fff;
        border-radius: 8px 8px 0 0;
        padding: 15px 20px;
    }

    .djobi-tc-header h3 {
        font-size: 18px;
        margin: 0;
        font-weight: 600;
    }

    .djobi-tc-header p {
        font-size: 13px;
        margin: 5px 0 10px;
        color: rgba(255, 255, 255, 0.9);
    }

    /* Cache le bouton PC sur mobile */
    .djobi-tc-header .djobi-create-ticket,
    .djobi-tc-header #djobi-tc-new-desktop,
    .djobi-tc-header .djobi-primary-btn-desktop {
        display: none !important;
    }

    /* Barre d’action mobile (flèche et +) */
    .djobi-mobile-actions {
        display: flex !important;
        gap: 10px;
        margin-top: 10px;
        align-items: center;
        position: relative;
        z-index: 10;
    }

    /* Style des boutons ronds */
    .djobi-mobile-actions button {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        border: 2px solid #fff;
        background: #0073aa;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(0,0,0,.12);
        transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }

    .djobi-mobile-actions button:hover {
        background: #fff;
        color: #0073aa;
        transform: translateY(-1px);
    }

    /* Bouton retour (flèche) */
    .djobi-mobile-actions .djobi-tc-back {
        display: none;
    }

    .djobi-tc-body.ticket-open .djobi-mobile-actions .djobi-tc-back {
        display: inline-flex !important;
    }

    /* Layout général */
    .djobi-tc-body {
        display: block;
    }

    .djobi-tc-list {
        width: 100% !important;
        border-right: none;
    }

    .djobi-tc-chat {
        display: none;
        position: relative;
    }

    .djobi-tc-body.ticket-open .djobi-tc-list {
        display: none;
    }

    .djobi-tc-body.ticket-open .djobi-tc-chat {
        display: block;
        width: 100% !important;
    }

    .djobi-tc-chat .djobi-tc-chat-inner {
        margin-top: 14px;
    }
}

/*───────────────────────────────────────────────
 DJOBI – Masquer bouton desktop sur mobile strict
───────────────────────────────────────────────*/
@media (max-width: 900px) {
    .djobi-tc-header-right {
        display: none !important;
    }
}
/*───────────────────────────────────────────────
 Correctif mobile – affichage propre de la liste et du chat
───────────────────────────────────────────────*/
@media (max-width: 1024px) {

    /* Conteneur global stable */
    .djobi-tc-body {
        position: relative;
        min-height: 60vh;
        background: var(--djobi-wrapper, #f4f6fa);
        overflow: hidden;
    }

    /* Liste des tickets */
    .djobi-tc-list {
        display: block;
        position: relative;
        width: 100%;
        height: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: opacity 0.2s ease;
        z-index: 2;
        background: var(--djobi-wrapper, #f4f6fa);
    }

    /* Chat par défaut caché */
    .djobi-tc-chat {
        display: none;
        position: relative;
        width: 100%;
        background: var(--djobi-wrapper, #f4f6fa);
        z-index: 3;
        overflow: hidden;
    }

    /* Quand un ticket est ouvert → on cache la liste */
    .djobi-tc-body.ticket-open .djobi-tc-list {
        display: none !important;
    }

    /* Et on montre le chat à la place */
    .djobi-tc-body.ticket-open .djobi-tc-chat {
        display: block !important;
    }

    /* Chat interne */
    .djobi-tc-chat .djobi-tc-chat-inner {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - 220px);
        padding-bottom: 10px;
    }

    /* Supprime toute transition parasite */
    .djobi-tc-list,
    .djobi-tc-chat {
        transform: none !important;
        animation: none !important;
    }
}
/*───────────────────────────────────────────────
 Correctif mobile : tickets invisibles au scroll
───────────────────────────────────────────────*/
@media (max-width: 1024px) {

  /* Empêche les effets de "rebond" qui font perdre le calque */
  html, body {
    overscroll-behavior: none;
  }

  /* La zone principale reste dans le flux normal */
  .djobi-ticket-center {
    position: relative;
    min-height: 100vh;
    background: var(--djobi-wrapper, #f4f6fa);
    overflow: visible;
  }

  /* Liste des tickets : fix visuel complet */
  .djobi-tc-list {
    max-height: calc(100vh - 180px);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    background: var(--djobi-wrapper, #f4f6fa);
    position: relative;
    z-index: 1;
  }

  /* Zone du chat : même stabilité */
  .djobi-tc-chat {
    max-height: calc(100vh - 180px);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    background: var(--djobi-wrapper, #f4f6fa);
    position: relative;
    z-index: 1;
  }

  /* Supprime tout effet de "scroll chaining" vertical */
  .djobi-tc-body {
    overscroll-behavior-y: contain;
  }
}
/*───────────────────────────────────────────────
 Correctif visuel mobile – fond et scroll stable
───────────────────────────────────────────────*/
@media (max-width: 1024px) {
  .djobi-ticket-center {
    background: var(--djobi-wrapper, #f4f6fa);
    min-height: auto;
    overflow: hidden;
  }

  .djobi-tc-body {
    background: transparent;
  }

  .djobi-tc-list {
    background: var(--djobi-wrapper, #f4f6fa);
    overflow-y: auto;
    max-height: calc(100vh - 160px);
  }

  .djobi-tc-chat {
    background: var(--djobi-wrapper, #f4f6fa);
    overflow-y: auto;
    max-height: calc(100vh - 160px);
  }
}
/*───────────────────────────────────────────────
 Rétablissement du scroll global mobile
───────────────────────────────────────────────*/
@media (max-width: 1024px) {
  html, body {
    overscroll-behavior: auto !important;
  }

  .djobi-ticket-center {
    overscroll-behavior: contain !important;
  }
}