/* =========================================================
   CHAT - Detalle conversación (Admin)
   ========================================================= */

/* =========================
   Shell / Layout
   ========================= */
.chat-shell {
    max-width: 980px;
    margin: 0 auto;
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    overflow: hidden;
}

/* =========================
   Header (pro + compacto)
   ========================= */
.chat-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.chat-header-left {
    min-width: 0;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(0,0,0,.55);
    text-decoration: none;
    margin-bottom: 6px;
}

    .back-link:hover {
        text-decoration: underline;
    }

.chat-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Avatar */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 14px;
    color: #0b5b69;
    background: rgba(23,162,184,.14);
    border: 1px solid rgba(23,162,184,.22);
    flex: 0 0 auto;
}

.chat-title {
    min-width: 0;
}

    .chat-title .name {
        font-weight: 900;
        font-size: 16px;
        line-height: 1.15;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
    }

    .chat-title .phone {
        font-weight: 700;
        color: #0d6efd;
        white-space: nowrap;
    }

    .chat-title .meta {
        margin-top: 6px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

/* Chips */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(0,0,0,.03);
    color: rgba(0,0,0,.75);
}

.chip-id {
    background: rgba(0,0,0,.04);
}

.chip-status.is-pending {
    background: rgba(255,193,7,.14);
    border-color: rgba(255,193,7,.35);
    color: #8a6d00;
}

.chip-status.is-assigned {
    background: rgba(13,110,253,.10);
    border-color: rgba(13,110,253,.22);
    color: #0b5ed7;
}

.chip-status.is-closed {
    background: rgba(108,117,125,.12);
    border-color: rgba(108,117,125,.25);
    color: #495057;
}

.chip-assigned {
    background: rgba(25,135,84,.08);
    border-color: rgba(25,135,84,.18);
    color: #146c43;
}

/* Header actions */
.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Botón cerrar natural */
.btn-close-chat {
    border: 1px solid rgba(0,0,0,.10);
    background: #17a2b8;
    color: #fff;
    border-radius: 12px;
    padding: 8px 14px;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 22px rgba(23,162,184,.18);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .btn-close-chat:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(23,162,184,.24);
    }

/* =========================
   Messages container
   ========================= */
.chat-messages {
    height: calc(100vh - 310px);
    min-height: 420px;
    overflow-y: auto;
    padding: 14px;
    background: radial-gradient(1200px 500px at 10% 0%, rgba(23,162,184,.12), transparent 60%), linear-gradient(180deg, #f7f9fc, #ffffff);
}

/* =========================
   Day separator (NO sticky)
   ========================= */
.day-sep {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin: 12px 0;
    pointer-events: none;
}

    .day-sep span {
        pointer-events: none;
        font-size: 12px;
        font-weight: 850;
        letter-spacing: .6px;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(0,0,0,.06);
        border: 1px solid rgba(0,0,0,.10);
        color: rgba(0,0,0,.55);
        box-shadow: 0 6px 16px rgba(0,0,0,.06);
    }

/* =========================
   System messages (badge centered)
   ========================= */
.sys-row {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.sys-badge {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    max-width: min(820px, 92%);
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(108,117,125,.10);
    border: 1px dashed rgba(108,117,125,.35);
    color: rgba(0,0,0,.65);
}

.sys-text {
    font-size: 13px;
    font-weight: 650;
}

.sys-time {
    font-size: 11.5px;
    color: rgba(0,0,0,.45);
    white-space: nowrap;
}

/* =========================
   Message rows + bubbles
   ========================= */
.msg-row {
    display: flex;
    margin: 8px 0;
}

    .msg-row.in {
        justify-content: flex-start;
    }

    .msg-row.out {
        justify-content: flex-end;
    }

.bubble {
    max-width: min(640px, 86%);
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

.msg-row.in .bubble {
    border-top-left-radius: 8px;
}

.msg-row.out .bubble {
    background: rgba(23,162,184,.12);
    border-color: rgba(23,162,184,.22);
    border-top-right-radius: 8px;
}

.bubble .body {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px;
    line-height: 1.35;
}

.bubble .meta {
    margin-top: 6px;
    font-size: 11.5px;
    color: rgba(0,0,0,.55);
    text-align: right;
}

/* =========================
   Chat toast (top inside messages)
   ========================= */
.chat-toast {
    position: sticky;
    top: 70px;
    z-index: 9;
    width: fit-content;
    margin: 0 auto 10px auto;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(23,162,184,.12);
    border: 1px solid rgba(23,162,184,.25);
    color: #0b5b69;
    font-weight: 700;
    font-size: 13px;
}

/* =========================
   Footer / Composer
   ========================= */
.chat-footer {
    padding: 10px 12px;
    border-top: 1px solid rgba(0,0,0,.08);
    background: #fff;
}

.chat-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(0,0,0,.02);
    display: grid;
    place-items: center;
}

.chat-text {
    flex: 1;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px; /* menos "píldora" */
    padding: 12px 14px;
    font-size: 15px;
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .chat-text:focus {
        border-color: rgba(13,110,253,.35);
        box-shadow: 0 0 0 4px rgba(13,110,253,.12);
    }

.chat-hint {
    margin-top: 6px;
    font-size: 11.5px;
    color: rgba(0,0,0,.45);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px) {
    .chat-header {
        flex-direction: column;
        align-items: stretch;
    }

    .chat-header-actions {
        justify-content: flex-start;
    }

        .chat-header-actions .btn {
            flex: 1;
        }

    .chat-messages {
        height: calc(100vh - 360px);
    }
}