/**
 * Archivo NUEVO: assets/css/shared/exchange-thread.css
 * Origen: maqueta "La Tienda Natural - Intercambios.html", bloque
 *         "shared/ NUEVO — .ltn-chat-*"
 * Versión: 1.0.0
 * Creado: DEUDA-CSS-004, Fase 2 — 2026-08-16
 *
 * Hilo de conversación rediseñado. Sustituye a .chat-card y familia de
 * shared/exchange-chat.css (Fase 1, nunca activado) en
 * dashboard-propuesta-detalle.php. Nombre de archivo deliberadamente
 * distinto de exchange-chat.css para no confundir el componente legacy
 * (aún sin retirar, ver diagnóstico de esta fase) con el nuevo.
 *
 * Requiere shared/forms.css (.ltn-form-textarea) para el compositor.
 *
 * Uso:
 *   <div class="ltn-chat">
 *     <div class="ltn-chat__thread">
 *       <div class="ltn-chat__msg ltn-chat__msg--own">
 *         <span class="ltn-chat__author">Tú</span>
 *         <div class="ltn-chat__bubble">...</div>
 *         <span class="ltn-chat__time">...</span>
 *       </div>
 *     </div>
 *     <div class="ltn-chat__form">
 *       <textarea class="ltn-form-textarea">...</textarea>
 *       <button class="ltn-button">Enviar</button>
 *     </div>
 *   </div>
 */

.ltn-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.ltn-chat__thread {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ltn-gray-50);
    min-height: 340px;
    max-height: 460px;
}

.ltn-chat__msg {
    max-width: 78%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ltn-chat__msg--own {
    align-self: flex-end;
    align-items: flex-end;
}

.ltn-chat__author {
    font-size: var(--ltn-font-size-xs);
    font-weight: 700;
    color: var(--ltn-gray-500);
}

.ltn-chat__bubble {
    padding: 11px 15px;
    border-radius: 14px;
    font-size: var(--ltn-font-size-md);
    line-height: 1.55;
    background: var(--ltn-white);
    border: 1px solid var(--ltn-gray-200);
    color: var(--ltn-gray-700);
    border-bottom-left-radius: 4px;
    word-wrap: break-word;
}

.ltn-chat__msg--own .ltn-chat__bubble {
    background: var(--ltn-green-primary);
    border-color: var(--ltn-green-primary);
    color: var(--ltn-white);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 4px;
}

.ltn-chat__time {
    font-size: 10.5px;
    color: var(--ltn-gray-400);
}

.ltn-chat__msg--system {
    align-self: center;
    max-width: 100%;
    align-items: center;
}

.ltn-chat__system {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--ltn-green-bg);
    color: var(--ltn-green-dark);
    font-size: var(--ltn-font-size-xs);
    font-weight: 600;
}

.ltn-chat__form {
    border-top: 1px solid var(--ltn-gray-200);
    padding: 14px 20px;
    background: var(--ltn-white);
    display: flex;
    gap: 11px;
    align-items: flex-end;
}

/* Único override sobre .ltn-form-textarea: el compositor del chat no debe
   redimensionarse a mano dentro de una columna sticky. */
.ltn-chat__form .ltn-form-textarea {
    flex: 1;
    resize: none;
}

.ltn-chat__closed {
    padding: 16px 20px;
    background: var(--ltn-gray-100);
    border-top: 1px solid var(--ltn-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: var(--ltn-font-size-sm);
    color: var(--ltn-gray-500);
}

@media (max-width: 768px) {
    .ltn-chat__thread {
        min-height: 300px;
    }

    .ltn-chat__msg {
        max-width: 92%;
    }
}