/* Chat styles refatorados para usar variáveis do novo tema */
.avatar { width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.avatar-32 { width:32px; height:32px; font-size:.85rem; flex-shrink:0; }
.avatar-40 { width:40px; height:40px; flex-shrink:0; }
.avatar-text { font-weight:600; }

.bg-gradient { background: linear-gradient(140deg,var(--color-primary),var(--color-accent));}

/* Lista de chats */
.chat-list .list-group-item { border-left:0; border-right:0; }
.chat-item { padding: 1rem !important; cursor: pointer; transition: background var(--transition); }
.chat-item:hover { background: var(--color-bg-alt); }
body.dark-mode .chat-item:hover { background:#252c37; }

/* Chat Item Responsivo - Nova estrutura */
.chat-item-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    gap: 1rem;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.chat-item-main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
}

.chat-item-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.25rem;
}

/* Limitar altura da prévia da mensagem */
.chat-item-content .text-truncate {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 2.8em; /* 2 linhas * 1.4 line-height */
    word-wrap: break-word;
    word-break: break-word;
}

.chat-item-actions {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 0.5rem;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

/* Botões das ações */
.chat-item-actions .btn {
    white-space: nowrap;
}

/* Mobile: abandonar flex no container para evitar bug do Safari
   Empilha tudo com display:block */
@media (max-width: 767px) {
    .chat-item-container { display:block !important; gap: 0 !important; }
    .chat-item-main { display:block !important; width:100% !important; }

    .chat-item-actions {
        display:block !important;
        width:100% !important;
        border-top: 1px solid var(--color-border);
        padding-top: 0.75rem;
        margin-top: 0.25rem;
    }
    body.dark-mode .chat-item-actions { border-top-color: var(--color-border-strong); }

    .chat-item-actions .btn { display:block !important; width:100% !important; }

    /* Força quebra de linha no texto */
    .chat-item-content { word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; }
    .chat-title { font-size: 0.95rem; word-wrap: break-word; word-break: break-word; white-space: normal !important; overflow-wrap: break-word; }

    /* Prévia da mensagem: máximo 3 linhas no mobile */
    .chat-item-content .text-truncate {
        white-space: normal !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        line-height: 1.4 !important;
        max-height: 4.2em !important; /* 3 linhas */
        word-wrap: break-word !important;
        word-break: break-word !important;
        text-overflow: ellipsis !important;
    }

    .chat-time { font-size: 0.75rem; white-space: nowrap; }
    .chat-device-info { font-size: 0.7rem; word-wrap: break-word; word-break: break-all; white-space: normal !important; }
    .chat-device-info code { word-wrap: break-word; word-break: break-all; white-space: normal !important; display: inline-block; max-width: 100%; }
}

/* Telas muito pequenas: apenas ícones */
@media (max-width: 380px) {
    .chat-item-actions .btn-text { display: none; }
    .chat-item-actions .btn { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* Tablet: mantém ao lado mas com menos espaço */
@media (min-width: 768px) and (max-width: 991px) {
    .chat-item-actions { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 0.375rem; }
    .chat-item-actions .btn { font-size: 0.8rem; padding: 0.375rem 0.5rem; }
}

/* Desktop: texto truncado com limite de 2 linhas */
@media (min-width: 768px) {
    .chat-item-content .text-truncate { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.4; max-height: 2.8em; }
}

/* Modal de chat */
.chat-modal { border-radius: var(--radius-lg); overflow:hidden; }

.chat-timeline { background: var(--color-surface-alt); height:70vh; max-height:70vh; overflow-y:auto; padding:16px; }
body.dark-mode .chat-timeline { background:#1d232c; }

/* Linha do tempo */
.msg-row { margin-bottom:8px; display:flex; gap:8px; }
.msg-row.me { justify-content:flex-end; }
.msg-row.you { justify-content:flex-start; }

.bubble { max-width:75%; padding:10px 12px; border-radius:14px; position:relative; font-size:.95rem; box-shadow:0 1px 1px rgba(0,0,0,.05); background:var(--color-surface); border:1px solid var(--color-border); }
.bubble.me { background: #e3f4d7; border-color:#c7e7b4; border-bottom-right-radius:4px; }
.bubble.you { background: var(--color-surface); border-bottom-left-radius:4px; }
body.dark-mode .bubble { background:#252c37; border-color:#303a46; color:var(--color-text); }
body.dark-mode .bubble.me { background:#244b33; border-color:#2f6143; }
body.dark-mode .bubble.you { background:#252c37; }

.bubble .meta { display:block; margin-top:6px; font-size:.7rem; color:var(--color-text-muted); text-align:right; }
body.dark-mode .bubble .meta { color:var(--color-text-faint); }

.bubble .bot-tag { display:inline-block; font-size:.65rem; font-weight:600; background:var(--color-accent); color:#fff; padding:2px 4px; border-radius:4px; margin-bottom:4px; }

.bubble .sender { display:block; font-weight:600; margin-bottom:4px; color:var(--color-text-soft); }
body.dark-mode .bubble .sender { color:var(--color-text-soft); }

.bubble .chat-media { max-width:180px; height:auto; border-radius:10px; display:block; cursor:pointer; margin-top:4px; }
.bubble .audio { display:flex; align-items:center; gap:8px; }
.bubble .audio audio { width:220px; }

/* Destaque temporário */
.bubble.highlighted { animation: chat-highlight 2s ease-in-out; background-color: #fff9d6; }
body.dark-mode .bubble.highlighted { background:#3a4857; }
@keyframes chat-highlight { from { box-shadow:0 0 0 0.5rem rgba(250,204,21,.5);} to { box-shadow:none; } }

/* Scrollbar interno do chat */
.chat-timeline::-webkit-scrollbar { width:8px; }
.chat-timeline::-webkit-scrollbar-thumb { background:var(--color-border-strong); border-radius:6px; }
.chat-timeline::-webkit-scrollbar-thumb:hover { background:var(--color-primary); }
body.dark-mode .chat-timeline::-webkit-scrollbar-thumb { background:#344150; }
body.dark-mode .chat-timeline::-webkit-scrollbar-thumb:hover { background:var(--color-primary); }