/* tchat-window.css — Fenêtre flottante du Tchat, calquée sur la fenêtre de rédaction des
   emails (.compose-window), avec drag sur l'en-tête (spécifique au tchat).
   Remplace l'ancienne modale #tchat-modal / le widget réduit #tchat-mini. */

.tchat-window {
    position: fixed;
    right: 24px;
    bottom: 0;
    width: 760px;
    height: min(640px, calc(100vh - 70px));
    max-width: calc(100vw - 16px);
    background: #fff;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1055;
}

/* Réduit : seul l'en-tête reste visible (clic sur l'en-tête pour restaurer). */
.tchat-window.tchat-min { height: auto !important; width: 300px; }
.tchat-window.tchat-min .tchat-body-wrap { display: none; }

/* Agrandi : grande fenêtre centrée (drag désactivé dans cet état). */
.tchat-window.tchat-max {
    right: auto; left: 50%; bottom: auto; top: 24px;
    transform: translateX(-50%);
    width: min(1200px, 95vw); height: calc(100vh - 48px);
    border-radius: 8px;
}
/* Quand l'utilisateur a déplacé la fenêtre, on pilote la position en left/top. */
.tchat-window.tchat-positioned { right: auto; bottom: auto; }
.tchat-window.tchat-dragging { transition: none; user-select: none; }

.tchat-header {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--color-tchat, #d96a02); color: var(--color-tchat-text, #fff);
    padding: 6px 8px 6px 14px;
    cursor: move; flex-shrink: 0; user-select: none;
}
.tchat-window.tchat-max .tchat-header { cursor: default; }
.tchat-title { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; }
.tchat-header-actions { display: flex; gap: 2px; flex-shrink: 0; }
.tchat-icon-btn {
    background: none; border: 0; color: inherit; opacity: .85;
    width: 28px; height: 28px; border-radius: 4px; line-height: 1; cursor: pointer;
}
.tchat-icon-btn:hover { background: rgba(255, 255, 255, .18); opacity: 1; }

/* Corps : conteneur flex qui reçoit le layout de tchat.php. */
.tchat-body-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }

/* ── Layout dédié (2 colonnes) ────────────────────────────────────────────── */
.tchat-window .tchat-layout { flex: 1 1 auto; display: flex; min-height: 0; width: 100%; }

/* Colonne GAUCHE : onglets (fixes) + recherche (fixe) + liste (scrollable). */
.tchat-window .tchat-sidebar {
    flex: 0 0 42%; max-width: 42%; min-width: 0;
    display: flex; flex-direction: column; min-height: 0;
    border-right: 1px solid var(--ct-border-color, #e5e8eb);
}
.tchat-window .tchat-tabs { flex: 0 0 auto; flex-wrap: nowrap; margin: 0; }
.tchat-window .tchat-tabs .nav-item { flex: 0 1 auto; }
.tchat-window .tchat-tabs .nav-link { padding: .45rem .6rem; font-size: .82rem; white-space: nowrap; }
.tchat-window .tchat-search { flex: 0 0 auto; padding: 8px 10px; border-bottom: 1px solid var(--ct-border-color, #eef0f2); }
.tchat-window .tchat-userlist { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 10px; }

/* Colonne DROITE : fil de messages (scrollable, ancré en bas) + saisie (fixe). */
.tchat-window .tchat-main { flex: 1 1 58%; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.tchat-window .tchat-messages {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column;   /* + margin-top:auto sur la liste = ancrage bas */
    padding-top: 8px;
}
.tchat-window .tchat-messages > #tchat-messages-list { margin-top: auto; width: 100%; }
.tchat-window .tchat-compose { flex: 0 0 auto; border-top: 1px solid var(--ct-border-color, #eef0f2); }
.tchat-window .tchat-attach-preview:empty { display: none; }
.tchat-window .tchat-attach-preview { padding: 6px 10px 0; max-height: 140px; overflow-y: auto; }
.tchat-window .tchat-attach-chip { display: flex; align-items: center; gap: 8px; background: var(--ct-light, #f6f7fb); border: 1px solid var(--ct-border-color, #e5e8eb); border-radius: 6px; padding: 5px 8px; margin-bottom: 5px; }
.tchat-window .tchat-attach-chip .ta-name { font-weight: 600; }
[data-bs-theme=dark] .tchat-window .tchat-attach-chip { background: #343a40; border-color: #3d4650; }

/* La fenêtre tchat est à z-index 1055 (comme les modales) : on remonte la modale de sélection
   de documents au-dessus d'elle. */
#tchat-doc-modal { z-index: 1065; }

.tchat-window .card { border-radius: 0; }

/* Menu « 3 points » d'un message : en position absolue (apparaît au survol) pour ne JAMAIS
   pousser les autres messages vers le bas faute de place. On le place dans la gouttière OPPOSÉE
   à la bulle : à droite pour mes messages (bulle à gauche), à gauche pour ceux des autres
   (classe .odd, bulle à droite) — sinon il passe sous l'avatar. */
.tchat-window .conversation-list li { position: relative; }
.tchat-window .conversation-list li .conversation-actions { position: absolute; top: 2px; right: 6px; left: auto; z-index: 3; float: none; }
.tchat-window .conversation-list li.odd .conversation-actions { right: auto; left: 6px; }

/* Préserve les retours à la ligne saisis dans les messages (textarea). */
.tchat-window .ctext-wrap p { white-space: pre-wrap; word-break: break-word; }

/* Largeur max de la bulle (évite le débordement horizontal sur les longs contenus). */
.tchat-window .conversation-list .ctext-wrap { max-width: min(85%, 480px); }
.tchat-window #tchat-messages-scroll { overflow-x: hidden; }

/* ── Cartes de pièces jointes ─────────────────────────────────────────────── */
.tchat-window .tchat-attachments { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.tchat-window .tchat-file {
    display: flex; align-items: flex-start; gap: 12px;
    width: 320px; max-width: 100%;
    background: var(--ct-light, #f6f7fb);
    border: 1px solid var(--ct-border-color, #e5e8eb);
    border-radius: 10px; padding: 10px;
}
/* Colonne gauche : icône du fichier + boutons (télécharger / aperçu) empilés dessous. */
.tchat-window .tchat-file-left { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tchat-window .tchat-file-badge {
    width: 52px; height: 52px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; background: rgba(0, 0, 0, .05); line-height: 1;
}
.tchat-window .tchat-file-badge i { font-size: inherit; line-height: 1; }
/* Zone texte élargie : nom sur 3 lignes max + taille. */
.tchat-window .tchat-file-info { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.tchat-window .tchat-file-name {
    font-weight: 600; font-size: .85rem; line-height: 1.3; color: var(--ct-body-color, #313a46);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.tchat-window .tchat-file-meta { font-size: .72rem; color: #8a929c; text-transform: uppercase; letter-spacing: .02em; margin-top: 3px; }
.tchat-window .tchat-file-actions { display: flex; gap: 4px; }
.tchat-window .tchat-file-actions a {
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; font-size: 1.1rem; text-decoration: none;
}
.tchat-window .tchat-file-actions a:hover { background: rgba(0, 0, 0, .09); }
[data-bs-theme=dark] .tchat-window .tchat-file { background: #2b3035; border-color: #3d4650; }
[data-bs-theme=dark] .tchat-window .tchat-file-badge { background: rgba(255, 255, 255, .08); }
[data-bs-theme=dark] .tchat-window .tchat-file-name { color: #e9ecef; }
[data-bs-theme=dark] .tchat-window .tchat-file-actions a:hover { background: rgba(255, 255, 255, .1); color: #e9ecef; }

/* Zone de saisie : textarea auto-extensible, plafonnée à ~3 lignes puis défilement. */
.tchat-window .tchat-input {
    resize: none; overflow-y: auto;
    line-height: 1.4; min-height: 38px; max-height: calc(1.4em * 3 + 14px);
}

/* Sous 560px de fenêtre (mobile) : plein écran + colonnes empilées. */
@media (max-width: 560px) {
    .tchat-window:not(.tchat-min) { right: 0; left: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 85vh; border-radius: 0; transform: none; }
    .tchat-window .tchat-layout { flex-direction: column; }
    .tchat-window .tchat-sidebar { flex: 0 0 40%; max-width: 100%; border-right: 0; border-bottom: 1px solid var(--ct-border-color, #e5e8eb); }
    .tchat-window .tchat-main { flex: 1 1 60%; }
}

/* Thème sombre */
[data-bs-theme=dark] .tchat-window { background: #2b3035; color: #e9ecef; }
[data-bs-theme=dark] .tchat-window .tchat-sidebar,
[data-bs-theme=dark] .tchat-window .tchat-search,
[data-bs-theme=dark] .tchat-window .tchat-compose { border-color: #3d4650; }
[data-bs-theme=dark] .tchat-window .bg-light { background-color: #343a40 !important; }