:root {
    --accent: #00a884;
    --accent-light: #00d9a4;
    --accent-glow: rgba(0, 168, 132, 0.35);
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background: #0b0f12; display: flex; height: 100vh; overflow: hidden; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.5); } 70% { transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pulso { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes respirar { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 5px rgba(0,168,132,0); } }
@keyframes girar { to { transform: rotate(360deg); } }

/* Barra Lateral */
.sidebar { width: 400px; background: #111b21; border-right: 1px solid #222d34; display: flex; flex-direction: column; z-index: 2; flex-shrink: 0; animation: fadeIn 0.4s var(--ease-out); }
.header {
    background: rgba(32,44,51,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: #e9edef; padding: 12px 20px; font-weight: 600; font-size: 18px; display: flex; align-items: center;
    justify-content: space-between; height: 60px; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.header-user { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; overflow: hidden; cursor: pointer; padding: 4px 8px; margin: -4px -8px; border-radius: 10px; transition: background 0.2s var(--ease-out); }
.header-user:hover { background: rgba(255,255,255,0.05); }
.header-user:hover .avatar { transform: scale(1.05); }
.header-user .avatar { width: 36px; height: 36px; font-size: 14px; flex-shrink: 0; transition: transform 0.2s var(--ease-spring); }
.header-user-textos { display: flex; flex-direction: column; overflow: hidden; gap: 2px; }
.header-user-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.conexao-status { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: #8696a0; }
.conexao-bolinha { width: 7px; height: 7px; border-radius: 50%; background: #6b7280; flex-shrink: 0; transition: background 0.3s; }
.conexao-status.conectado .conexao-bolinha { background: var(--accent); animation: respirar 2.4s ease-in-out infinite; }
.conexao-status.desconectado .conexao-bolinha { background: #f87171; }
.conexao-status:not(.conectado):not(.desconectado) .conexao-bolinha { animation: pulso 1s ease-in-out infinite; }
.conexao-status.conectado .conexao-texto::after { content: 'Conectado'; }
.conexao-status.desconectado .conexao-texto::after { content: 'Desconectado'; }
.conexao-status:not(.conectado):not(.desconectado) .conexao-texto::after { content: 'Verificando...'; }
.conexao-status .conexao-texto { font-size: 0; }
.conexao-status .conexao-texto::after { font-size: 11px; }
.header-right-actions { display: flex; align-items: center; gap: 8px; }
.header-logo-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(198, 161, 78, 0.1);
    border: 1px solid rgba(198, 161, 78, 0.22);
    transition: transform 0.2s var(--ease-spring), background 0.2s, border-color 0.2s;
    flex-shrink: 0;
    overflow: hidden;
}
.header-logo-badge:hover {
    background: rgba(198, 161, 78, 0.2);
    border-color: rgba(198, 161, 78, 0.45);
    transform: scale(1.06);
}
.header-logo-img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    display: block;
}
.logout-btn { background: none; border: none; color: #8696a0; cursor: pointer; padding: 6px; border-radius: 8px; display: flex; align-items: center; transition: background 0.15s var(--ease-out), color 0.15s, transform 0.15s var(--ease-spring); }
.logout-btn:hover { background: #2a3942; color: #e9edef; transform: rotate(-8deg); }
.logout-btn svg { width: 20px; height: 20px; fill: currentColor; }

.search-container { padding: 10px 14px; background: #111b21; border-bottom: 1px solid #222d34; display: flex; gap: 8px; }
.search-container input { flex: 1; padding: 8px 12px; border: none; border-radius: 8px; background: #202c33; color: #d1d7db; font-size: 14px; outline: none; transition: background 0.2s var(--ease-out), box-shadow 0.2s; }
.search-container input:focus { background: #2a3942; box-shadow: 0 0 0 2px rgba(0,168,132,0.25); }
.search-container button.sync-btn { background: #202c33; color: #aebac1; border: none; border-radius: 8px; padding: 0 12px; cursor: pointer; transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-spring); }
.search-container button.sync-btn:hover { background: #2a3942; color: #e9edef; transform: translateY(-1px); }
.search-container button.sync-btn:active { transform: scale(0.92); }

/* Abas numa linha só: se não couberem na largura da sidebar, rolam na
   horizontal (antes quebravam em duas linhas e "Grupos" ficava cortado). */
.tabs-container { display: flex; flex-wrap: nowrap; gap: 6px; padding: 8px 14px; background: #111b21; border-bottom: 1px solid #222d34; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.tabs-container::-webkit-scrollbar { display: none; }
.tab-btn { flex-shrink: 0; white-space: nowrap; scroll-snap-align: start; line-height: 1.2; background: transparent; border: none; color: #8696a0; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 16px; cursor: pointer; transition: background 0.2s var(--ease-out), color 0.2s, transform 0.15s var(--ease-spring); }
.tab-btn:hover { background: #202c33; color: #d1d7db; }
.tab-btn:active { transform: scale(0.95); }
.tab-btn.ativa { background: rgba(0,168,132,0.18); color: var(--accent-light); box-shadow: 0 0 0 1px rgba(0,168,132,0.25) inset; }

.chat-list { flex: 1; overflow-y: auto; background: #111b21; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.chat-item { padding: 12px 16px; border-bottom: 1px solid #222d34; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: background 0.18s var(--ease-out), border-color 0.18s; border-left: 3px solid transparent; animation: fadeInUp 0.35s var(--ease-out) backwards; }
.chat-item:nth-child(-n+12) { animation-delay: calc(var(--indice, 0) * 22ms); }
.chat-item:hover { background: #182229; }
.chat-item:hover .avatar { transform: scale(1.04); }
.chat-item.ativo { background: #2a3942; border-left-color: var(--accent); }
.chat-item.oculto { display: none !important; }

.avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 20px; flex-shrink: 0; background-size: cover; background-position: center; transition: transform 0.2s var(--ease-spring); }

.chat-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.chat-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.chat-name { font-weight: 500; color: #e9edef; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.chat-numero { font-size: 12.5px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.chat-time { font-size: 12px; color: #8696a0; flex-shrink: 0; }
.chat-last-msg { font-size: 14px; color: #8696a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.chat-last-msg > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.last-msg-check { display: inline-flex; align-items: center; justify-content: center; color: #53bdeb; margin-right: 4px; flex-shrink: 0; }
.chat-item.ativo .chat-last-msg, .chat-item.ativo .chat-numero { color: #aebac1; }

.badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; margin-left: 8px; display: inline-block; vertical-align: middle; line-height: 1; }
.badge.grupo { background: rgba(2, 132, 199, 0.2); color: #38bdf8; }
.badge.canal { background: rgba(219, 39, 119, 0.2); color: #f472b6; }
.badge.negocio { background: rgba(75, 85, 99, 0.2); color: #9ca3af; }

/* Skeleton de carregamento */
.skeleton-item { padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; background: #202c33; flex-shrink: 0; animation: pulso 1.4s ease-in-out infinite; }
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line { height: 10px; border-radius: 4px; background: #202c33; animation: pulso 1.4s ease-in-out infinite; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }

/* Janela Principal do Chat */
.main { flex: 1; display: flex; flex-direction: column; background: #0b141a; position: relative; }
.main::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png'); opacity: 0.04; filter: invert(1); z-index: 0; pointer-events: none; }

.chat-header {
    padding: 10px 20px; background: rgba(32,44,51,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.04); display: flex; align-items: center; gap: 15px; height: 60px;
    box-sizing: border-box; z-index: 1; animation: fadeInDown 0.3s var(--ease-out);
}
.chat-header .chat-name { font-weight: 500; font-size: 16px; color: #e9edef; }
.chat-header > div:first-child { transition: opacity 0.15s; border-radius: 8px; }
.chat-header > div:first-child:hover { opacity: 0.85; }

/* Mensagens */
.messages {
    flex: 1; padding: 20px 5%; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; z-index: 1;
    background-color: #0b141a;
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
    background-repeat: repeat;
    background-blend-mode: overlay;
    opacity: 0.95;
}
.carregar-mais { align-self: center; background: #202c33; color: #8696a0; border: none; padding: 8px 16px; border-radius: 8px; font-size: 13px; cursor: pointer; margin-bottom: 8px; transition: background 0.15s var(--ease-out), color 0.15s, transform 0.15s; }
.carregar-mais:hover { background: #2a3942; color: #e9edef; transform: translateY(-1px); }

.msg {
    padding: 6px 10px 8px 10px; border-radius: 10px; max-width: 65%; word-break: break-word; font-size: 14.5px;
    line-height: 20px; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,.25); margin-bottom: 4px; display: inline-block;
    color: #e9edef; animation: fadeInUp 0.28s var(--ease-spring) backwards;
}
.msg.recebida { background: #202c33; align-self: flex-start; border-top-left-radius: 2px; }
.msg.enviada { background: #005c4b; align-self: flex-end; border-top-right-radius: 2px; }

.msg.recebida::before { content: ''; position: absolute; top: 0; left: -8px; width: 0; height: 0; border-top: 10px solid #202c33; border-left: 10px solid transparent; }
.msg.enviada::before { content: ''; position: absolute; top: 0; right: -8px; width: 0; height: 0; border-top: 10px solid #005c4b; border-right: 10px solid transparent; }

.msg-doc { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; margin-bottom: 4px; cursor: pointer; transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-spring); }
.msg-doc:hover { background: rgba(0,0,0,0.32); transform: translateY(-1px); }
.msg-doc svg { width: 30px; height: 30px; fill: var(--accent); flex-shrink: 0; }
.msg-doc-name { font-weight: 500; font-size: 14px; word-break: break-all; }

.msg-media img, .msg-media video { max-width: 330px; max-height: 380px; width: auto; height: auto; object-fit: contain; border-radius: 8px; display: block; cursor: pointer; transition: transform 0.2s var(--ease-spring), opacity 0.15s; }
.msg-media img:hover, .msg-media video:hover { opacity: 0.96; }

/* Figurinhas / Stickers sem fundo nem balão de mensagem */
.msg.msg-sticker-bubble {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
}
.msg.msg-sticker-bubble::before {
    display: none !important;
}
.msg-sticker-wrapper {
    padding: 4px;
    display: inline-block;
}
.msg-sticker-img {
    width: 145px;
    height: 145px;
    object-fit: contain;
    display: block;
    cursor: pointer;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.38));
    transition: transform 0.2s var(--ease-spring);
}
.msg-sticker-img:hover {
    transform: scale(1.06);
}

/* GIF em loop automático com badge */
.msg-gif-box {
    position: relative;
    margin-bottom: 4px;
    display: inline-block;
    max-width: 290px;
    border-radius: 8px;
    overflow: hidden;
}
.msg-gif-box video {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    border-radius: 8px;
}
.gif-tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    letter-spacing: 0.6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Álbum de Fotos Agrupadas (Grid WhatsApp Web) */
.msg-album-grid {
    display: grid;
    gap: 4px;
    width: 100%;
    max-width: 330px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 4px;
}
.msg-album-grid.count-2 {
    grid-template-columns: 1fr 1fr;
    height: auto;
    max-height: 240px;
}
.msg-album-grid.count-3 {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 220px;
}
.msg-album-grid.count-3 .album-thumb:first-child {
    grid-row: 1 / span 2;
}
.msg-album-grid.count-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 240px;
}

.album-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 110px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(0,0,0,0.06);
    border-radius: 6px;
}
.album-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease, opacity 0.15s ease;
}
.album-thumb img:hover {
    transform: scale(1.03);
    opacity: 0.94;
}
.album-more {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.chat-item-pin { font-size: 11px; margin-left: 4px; color: var(--accent-light); }
.chat-action-btn { background: none; border: none; color: #aebac1; cursor: pointer; padding: 6px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.chat-action-btn:hover { background: rgba(255,255,255,0.08); color: #e9edef; }

/* Player de áudio custom */
.audio-player { display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: 280px; padding: 6px 4px; }
.audio-player audio { display: none; }
.audio-play-btn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.12); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-spring); }
.audio-play-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.06); }
.audio-play-btn:active { transform: scale(0.92); }
.audio-play-btn svg { width: 16px; height: 16px; fill: #e9edef; }
.audio-track { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.audio-progress-bar { position: relative; height: 3px; background: rgba(255,255,255,0.18); border-radius: 2px; cursor: pointer; }
.audio-progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--accent); border-radius: 2px; }
.audio-progress-thumb { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); left: 0%; box-shadow: 0 0 0 3px rgba(0,168,132,0.15); transition: box-shadow 0.15s; }
.audio-progress-bar:hover .audio-progress-thumb { box-shadow: 0 0 0 5px rgba(0,168,132,0.22); }
.audio-time { font-size: 11px; color: rgba(255,255,255,0.55); }

.msg-sender { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.msg-remetente-prefixo { color: #8cf0cf; font-weight: 700; }
.msg-content { margin-bottom: 2px; }
.msg-time { font-size: 11px; color: rgba(255,255,255,0.6); float: right; margin-left: 15px; margin-top: 4px; }

.date-separator { align-self: center; background: rgba(24,34,41,0.9); backdrop-filter: blur(6px); padding: 6px 14px; border-radius: 10px; font-size: 12.5px; color: #8696a0; box-shadow: 0 1px 0.5px rgba(11,20,26,.13); margin: 12px 0; text-transform: uppercase; animation: fadeIn 0.4s var(--ease-out); }

/* Rodapé / Input */
.footer {
    padding: 12px 20px; background: rgba(32,44,51,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; gap: 10px; align-items: center; z-index: 1; border-top: 1px solid rgba(255,255,255,0.04);
}
.footer input { flex: 1; padding: 12px 16px; border: none; border-radius: 8px; outline: none; background: #2a3942; color: #e9edef; font-size: 15px; transition: box-shadow 0.2s; }
.footer input:focus { box-shadow: 0 0 0 2px rgba(0,168,132,0.25); }
.footer button { background: var(--accent); color: white; border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s var(--ease-out), transform 0.15s var(--ease-spring), box-shadow 0.2s; flex-shrink: 0; }
.footer button:hover { background: #019574; transform: scale(1.08); box-shadow: 0 4px 14px var(--accent-glow); }
.footer button:active { transform: scale(0.92); }
.footer button svg { width: 20px; height: 20px; fill: white; margin-left: 2px; }
.footer button.attach-btn, .footer button.mic-btn { background: #2a3942; }
.footer button.attach-btn:hover, .footer button.mic-btn:hover { background: #334049; box-shadow: none; }
.footer button.attach-btn svg, .footer button.mic-btn svg { fill: #aebac1; margin-left: 0; }
.footer button.mic-btn.gravando { background: #f87171; animation: respirar 1.2s ease-in-out infinite; }
.footer button.mic-btn.gravando svg { fill: white; }

/* Drag and Drop Overlay no Chat */
.drag-drop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 20, 26, 0.88);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.drag-drop-overlay.ativo {
    display: flex;
}
.drag-drop-box {
    border: 2px dashed #00a884;
    background: rgba(0, 168, 132, 0.08);
    border-radius: 16px;
    padding: 40px 60px;
    text-align: center;
    color: #e9edef;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: respirar 2s infinite ease-in-out;
}
.drag-drop-box h3 {
    font-size: 18px;
    font-weight: 600;
    color: #00a884;
}
.drag-drop-box p {
    font-size: 13.5px;
    color: #8696a0;
}

body.theme-light .drag-drop-overlay {
    background: rgba(240, 242, 245, 0.88);
}
body.theme-light .drag-drop-box {
    color: #111b21;
    background: rgba(0, 168, 132, 0.06);
}

/* Formatação de texto: recolhida numa gaveta que abre acima do botão "Aa",
   em vez de 4 botões sempre visíveis poluindo a área de escrita. */
.format-gaveta {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.format-toggle-icone {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1;
}
.format-toggle[aria-expanded="true"] {
    color: var(--accent-light, #00a884) !important;
    background: rgba(0,168,132,0.14) !important;
}
.format-toolbar {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 6px);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: #233138;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    z-index: 30;
}
.format-gaveta.aberta .format-toolbar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.format-btn {
    background: transparent !important;
    color: #aebac1 !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    box-shadow: none !important;
}
.format-btn:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    transform: none !important;
}

body.theme-light .format-toolbar {
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(11,20,26,0.16), 0 0 0 1px #e9edef;
}
body.theme-light .format-btn {
    color: #54656f !important;
}
body.theme-light .format-btn:hover {
    background: #d1d7db !important;
    color: #111b21 !important;
}

/* Formatação rica nas mensagens (WhatsApp Markdown) */
.msg-content strong {
    font-weight: 700;
}
.msg-content em {
    font-style: italic;
}
.msg-content del {
    text-decoration: line-through;
    opacity: 0.85;
}
.msg-content .msg-code-block {
    display: block;
    background: rgba(0,0,0,0.3);
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    margin: 6px 0;
    white-space: pre-wrap;
    border-left: 3px solid var(--accent);
}
.msg-content .msg-inline-code {
    background: rgba(0,0,0,0.25);
    padding: 2px 5px;
    border-radius: 4px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12.5px;
}

body.theme-light .msg-content .msg-code-block {
    background: rgba(0,0,0,0.06);
    border-left-color: #00a884;
    color: #111b21;
}
body.theme-light .msg-content .msg-inline-code {
    background: rgba(0,0,0,0.06);
    color: #111b21;
}

/* Menções nos grupos WhatsApp */
.msg-mention {
    color: #53bdeb;
    font-weight: 600;
    cursor: pointer;
    background: rgba(83, 189, 235, 0.12);
    padding: 1px 4px;
    border-radius: 4px;
    transition: background 0.15s;
}
.msg-mention:hover {
    background: rgba(83, 189, 235, 0.22);
}

body.theme-light .msg-mention {
    color: #027eb5;
    background: rgba(2, 126, 181, 0.1);
}
body.theme-light .msg-mention:hover {
    background: rgba(2, 126, 181, 0.18);
}

/* Popover de Autocomplete de Menções (@) */
.mencoes-popover {
    position: absolute;
    bottom: 64px;
    left: 20px;
    width: 320px;
    max-height: 260px;
    background: #202c33;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    z-index: 50;
    overflow: hidden;
    animation: fadeInUp 0.15s ease-out;
}
.mencoes-header {
    padding: 8px 12px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    color: #8696a0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
}
.mencoes-lista {
    overflow-y: auto;
    max-height: 220px;
    padding: 4px 0;
}
.mencao-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.12s;
}
.mencao-item:hover, .mencao-item.selecionado {
    background: #2a3942;
}
.mencao-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
}
.mencao-info {
    flex: 1;
    min-width: 0;
}
.mencao-nome {
    font-size: 14px;
    font-weight: 500;
    color: #e9edef;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mencao-numero {
    font-size: 12px;
    color: #8696a0;
}
.mencao-admin-badge {
    font-size: 10px;
    background: rgba(0, 168, 132, 0.2);
    color: #00a884;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}

body.theme-light .mencoes-popover {
    background: #ffffff;
    border-color: #e9edef;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
body.theme-light .mencoes-header {
    color: #54656f;
    border-bottom-color: #f0f2f5;
    background: #f7f8fa;
}
body.theme-light .mencao-item:hover, body.theme-light .mencao-item.selecionado {
    background: #f0f2f5;
}
body.theme-light .mencao-nome {
    color: #111b21;
}

.upload-progress { padding: 4px 20px; background: #202c33; color: #8696a0; font-size: 12px; z-index: 1; animation: fadeIn 0.2s; }

/* Mídia apagada no WhatsApp ou removida pela regra de retenção. */
.msg-midia-expirada { color: #8696a0; font-size: 12.5px; font-style: italic; display: inline-block; padding: 4px 0; }

/* Nome do atendente antes do campo: discreto, para não competir com o texto. */
.remetente-inline { font-size: 12px; font-weight: 500; color: #8696a0; flex-shrink: 0; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; margin-left: 4px; }
.remetente-inline:empty { display: none; }

.vazio { margin: auto; color: #8696a0; font-size: 15px; text-align: center; background: rgba(32,44,51,0.9); backdrop-filter: blur(8px); padding: 20px 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); z-index: 1; animation: fadeInUp 0.35s var(--ease-out); }

/* Welcome / Empty State Screen */
.welcome-empty-state {
    max-width: 440px;
    width: 90%;
    margin: auto;
    padding: 36px 32px;
    background: rgba(17, 27, 33, 0.88);
    border: 1px solid rgba(198, 161, 78, 0.15);
    border-radius: 20px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), 0 0 40px rgba(198, 161, 78, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.welcome-logo-box {
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: radial-gradient(circle at 30% 30%, rgba(198, 161, 78, 0.18), rgba(198, 161, 78, 0.03));
    border: 1px solid rgba(198, 161, 78, 0.3);
    box-shadow: 0 8px 24px rgba(198, 161, 78, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}
.welcome-logo-box:hover {
    transform: scale(1.06) translateY(-2px);
    box-shadow: 0 12px 28px rgba(198, 161, 78, 0.25);
}
.welcome-logo-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.welcome-title {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: #e9edef;
    letter-spacing: -0.3px;
}
.welcome-gold {
    color: #C6A14E;
}
.welcome-subtitle {
    margin: 0 0 20px 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #8696a0;
    max-width: 340px;
}
.welcome-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 500;
    color: #7b8c95;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
}
.welcome-footer-badge svg {
    color: var(--accent);
}

.chat-unread { background: var(--accent); color: #111b21; border-radius: 10px; padding: 2px 6px; font-size: 11px; font-weight: bold; line-height: 14px; min-width: 20px; text-align: center; animation: popIn 0.3s var(--ease-spring); }
.msg-status { display: inline-block; margin-left: 4px; vertical-align: middle; }
.msg-editado-tag { font-style: italic; opacity: 0.8; margin-right: 4px; }
.msg-status svg { width: 15px; height: 15px; fill: rgba(255,255,255,0.6); transition: fill 0.3s; }
.msg-status.read svg { fill: #53bdeb; }

.profile-panel {
    width: 400px; background: rgba(17,27,33,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid #222d34; display: flex; flex-direction: column; transform: translateX(100%);
    transition: transform 0.35s var(--ease-spring); position: absolute; right: 0; top: 0; bottom: 0; z-index: 3;
}
.profile-panel.open { transform: translateX(0); box-shadow: -8px 0 32px rgba(0,0,0,0.35); }
.profile-header-bar { padding: 15px 20px; background: #202c33; color: #e9edef; display: flex; align-items: center; gap: 20px; font-weight: 500; font-size: 16px; border-bottom: 1px solid #222d34; height: 60px; }
.profile-close { cursor: pointer; display: flex; align-items: center; transition: transform 0.15s var(--ease-spring); border-radius: 50%; padding: 4px; }
.profile-close:hover { transform: rotate(90deg); background: rgba(255,255,255,0.08); }
.profile-close svg { width: 24px; height: 24px; fill: #aebac1; }
.profile-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; background: transparent; }
.profile-section { background: rgba(17,27,33,0.6); padding: 20px; text-align: center; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.profile-pic { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px auto; background: #2a3942; display: flex; align-items: center; justify-content: center; font-size: 60px; color: white; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,0.3); transition: transform 0.25s var(--ease-spring); }
.profile-pic:hover { transform: scale(1.03); }
.profile-pic img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.profile-name { font-size: 20px; color: #e9edef; margin-bottom: 5px; }
.profile-number { font-size: 16px; color: #8696a0; }
.profile-about-section { background: rgba(17,27,33,0.6); padding: 14px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); text-align: left; }
.profile-about-title { font-size: 14px; color: var(--accent); margin-bottom: 8px; }
.profile-about-text { font-size: 16px; color: #e9edef; }

.profile-participantes-section { background: rgba(17,27,33,0.6); padding: 14px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); text-align: left; }
.participante-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #222d34; font-size: 14px; color: #e9edef; transition: padding-left 0.15s; }
.participante-item:hover { padding-left: 4px; }
.participante-item:last-child { border-bottom: none; }
.participante-admin { font-size: 11px; color: var(--accent); }

/* Lightbox de Imagem Pro */
.lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px);
    z-index: 1000; display: none; align-items: center; justify-content: center;
    overflow: hidden; user-select: none; animation: fadeIn 0.2s var(--ease-out);
}
.lightbox.open { display: flex; }

.lightbox-top-bar {
    position: absolute; top: 16px; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; z-index: 1010; pointer-events: auto;
}

.lightbox-counter {
    background: rgba(32, 44, 51, 0.85); color: #e9edef; backdrop-filter: blur(12px);
    padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.lightbox-tools {
    display: flex; align-items: center; gap: 8px;
    background: rgba(32, 44, 51, 0.85); backdrop-filter: blur(12px);
    padding: 4px 10px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.lightbox-tool-btn {
    background: transparent; border: none; color: #e9edef; font-size: 15px;
    padding: 6px 10px; border-radius: 16px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s;
}
.lightbox-tool-btn:hover { background: rgba(255,255,255,0.15); transform: scale(1.08); }
.lightbox-tool-btn:active { transform: scale(0.95); }

.lightbox-close {
    background: rgba(32, 44, 51, 0.85); border: 1px solid rgba(255,255,255,0.1);
    color: #e9edef; width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 18px; transition: background 0.15s, transform 0.15s;
}
.lightbox-close:hover { background: rgba(239, 68, 68, 0.8); transform: rotate(90deg); color: #fff; }

.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(32, 44, 51, 0.85); color: #ffffff; border: 1px solid rgba(255,255,255,0.1);
    font-size: 38px; width: 52px; height: 52px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 1010; transition: background 0.15s, transform 0.15s, opacity 0.15s;
    line-height: 1; padding-bottom: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.lightbox-nav:hover { background: var(--accent); color: #111b21; transform: translateY(-50%) scale(1.08); }
.lightbox-nav[disabled] { opacity: 0.2; cursor: not-allowed; pointer-events: none; }
.lightbox-nav.prev { left: 24px; }
.lightbox-nav.next { right: 24px; }

.lightbox-content {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100vw; height: 100vh; overflow: hidden;
}

#lightbox-img {
    max-width: 82vw; max-height: 82vh; object-fit: contain;
    border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    cursor: grab; transition: transform 0.08s ease-out; transform-origin: center center;
}
#lightbox-img.dragging { cursor: grabbing; transition: none; }

/* Modal genérico (edição de perfil, etc.) */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 15;
    display: none; align-items: center; justify-content: center; animation: fadeIn 0.2s var(--ease-out);
}
.modal-backdrop.open { display: flex; }
.modal-card {
    background: #202c33; border-radius: 14px; padding: 24px; width: 340px; max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5); animation: fadeInUp 0.25s var(--ease-spring);
}
.modal-titulo { font-size: 18px; font-weight: 600; color: #e9edef; margin-bottom: 18px; }
.modal-field { margin-bottom: 20px; }
.modal-field label { display: block; color: #8696a0; font-size: 13px; margin-bottom: 6px; }
.modal-field input { width: 100%; padding: 10px 12px; border: none; border-radius: 8px; background: #2a3942; color: #e9edef; font-size: 14px; outline: none; transition: box-shadow 0.2s; }
.modal-field input:focus { box-shadow: 0 0 0 2px rgba(0,168,132,0.3); }
.modal-aviso { font-size: 12px; color: #8696a0; line-height: 1.5; margin-bottom: 18px; padding: 10px 12px; background: rgba(255,255,255,0.03); border-radius: 8px; border-left: 3px solid #53bdeb; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; }

.btn-editar-contato { margin-top: 14px; background: rgba(255,255,255,0.06); color: #aebac1; border: none; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background 0.15s var(--ease-out), color 0.15s, transform 0.15s var(--ease-spring); }
.btn-editar-contato:hover { background: rgba(255,255,255,0.12); color: #e9edef; transform: translateY(-1px); }
.btn-editar-contato:active { transform: scale(0.96); }
.btn-editar-contato svg { width: 14px; height: 14px; fill: currentColor; }
.modal-btn { background: var(--accent); color: white; border: none; padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-spring); }
.modal-btn:hover { background: #019574; transform: translateY(-1px); }
.modal-btn:active { transform: scale(0.96); }
.modal-btn.secundario { background: transparent; color: #aebac1; }
.modal-btn.secundario:hover { background: rgba(255,255,255,0.06); }

/* Toasts */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 20; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.toast {
    background: rgba(32,44,51,0.95); backdrop-filter: blur(10px); color: #e9edef; padding: 12px 16px; border-radius: 10px;
    font-size: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.4); display: flex; align-items: center; gap: 10px; max-width: 340px;
    border-left: 4px solid var(--accent); animation: toast-in 0.3s var(--ease-spring);
}
.toast.saindo { animation: toast-out 0.2s ease-in forwards; }
.toast.erro { border-left-color: #f87171; }
.toast.sucesso { border-left-color: var(--accent); }
.toast.info { border-left-color: #53bdeb; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(0.96); } }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; transition: background 0.2s; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }

/* --- RECURSOS PRO DE ATENDIMENTO --- */

/* Notas Internas (Private Agent Notes) */
.msg.interna, .msg.nota_interna {
    background: #3a2e05 !important;
    border-left: 4px solid #f59e0b;
    align-self: center;
    max-width: 85%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.msg.interna::before, .msg.nota_interna::before { display: none !important; }
.nota-tag {
    display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; background: rgba(245,158,11,0.25);
    color: #fbbf24; padding: 2px 6px; border-radius: 4px; margin-bottom: 4px;
}

/* Modo de Envio (Mensagem vs Nota Interna) */
.envio-modo-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 6px; width: 100%; }
.envio-modo-btn {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #8696a0;
    padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; cursor: pointer;
    transition: all 0.2s var(--ease-out);
}
.envio-modo-btn:hover { background: rgba(255,255,255,0.12); color: #e9edef; }
.envio-modo-btn.ativo-cliente { background: rgba(0,168,132,0.2); border-color: var(--accent); color: var(--accent-light); font-weight: 600; }
.envio-modo-btn.ativo-nota { background: rgba(245,158,11,0.25); border-color: #f59e0b; color: #fbbf24; font-weight: 600; }

/* Respostas Rápidas / Popover */
.btn-respostas {
    background: rgba(255,255,255,0.06); border: none; color: #aebac1; font-size: 14px;
    padding: 6px 10px; border-radius: 8px; cursor: pointer; display: flex; align-items: center;
    gap: 5px; font-weight: 500; transition: background 0.15s, transform 0.15s var(--ease-spring);
}
.btn-respostas:hover { background: rgba(255,255,255,0.14); color: #e9edef; transform: translateY(-1px); }

.respostas-popover {
    position: absolute; bottom: 65px; left: 20px; right: 20px; max-width: 450px; background: #202c33;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 36px rgba(0,0,0,0.5);
    z-index: 10; display: none; flex-direction: column; overflow: hidden; animation: fadeInUp 0.2s var(--ease-spring);
}
.respostas-popover.open { display: flex; }
.respostas-header { padding: 10px 14px; background: #111b21; border-bottom: 1px solid #222d34; font-size: 13px; font-weight: 600; color: #8696a0; display: flex; justify-content: space-between; align-items: center; }
.respostas-lista { max-height: 220px; overflow-y: auto; }
.resposta-item { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: background 0.15s; }
.resposta-item:hover { background: #2a3942; }
.resposta-item:last-child { border-bottom: none; }
.resposta-atalho { font-weight: 700; color: var(--accent-light); font-size: 13px; margin-right: 8px; }
.resposta-titulo { color: #e9edef; font-weight: 500; font-size: 13px; }
.resposta-texto { font-size: 12px; color: #8696a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* Player de Áudio - Botão Velocidade 1.5x / 2x */
.audio-speed-btn {
    background: rgba(255,255,255,0.12); border: none; color: #e9edef; font-size: 11px;
    font-weight: 700; padding: 3px 6px; border-radius: 6px; cursor: pointer; flex-shrink: 0;
    transition: background 0.15s, transform 0.15s var(--ease-spring);
}
.audio-speed-btn:hover { background: rgba(255,255,255,0.22); transform: scale(1.05); }

/* Status da Conversa (Aberto vs Resolvido) */
.btn-status-chat {
    background: rgba(255,255,255,0.08); border: none; color: #aebac1; font-size: 12px;
    font-weight: 600; padding: 6px 12px; border-radius: 14px; cursor: pointer; display: flex;
    align-items: center; gap: 6px; transition: all 0.2s var(--ease-out);
}
.btn-status-chat:hover { background: rgba(255,255,255,0.16); color: #e9edef; }
.btn-status-chat.resolvido { background: rgba(16,185,129,0.2); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }

/* Tags / Etiquetas */
.tags-container { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag-pill {
    font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px;
    display: inline-flex; align-items: center; gap: 4px; line-height: 1.2;
}
.tag-novo { background: rgba(59,130,246,0.25); color: #60a5fa; }
.tag-atendimento { background: rgba(245,158,11,0.25); color: #fbbf24; }
.tag-vip { background: rgba(168,85,247,0.25); color: #c084fc; }
.tag-suporte { background: rgba(239,68,68,0.25); color: #f87171; }
.tag-venda { background: rgba(16,185,129,0.25); color: #34d399; }

/* Busca na Conversa Ativa */
.chat-search-bar {
    position: absolute; top: 60px; left: 0; right: 0; background: #111b21;
    border-bottom: 1px solid #222d34; padding: 8px 16px; display: none; align-items: center;
    gap: 10px; z-index: 5; animation: fadeInDown 0.2s var(--ease-out);
}
.chat-search-bar.open { display: flex; }
.chat-search-bar input {
    flex: 1; padding: 8px 12px; border: none; border-radius: 8px; background: #202c33;
    color: #e9edef; font-size: 14px; outline: none;
}
.chat-context-menu {
    position: fixed; background: #233138; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.55); padding: 6px 0;
    z-index: 100; display: none; min-width: 190px; animation: fadeIn 0.15s ease-out;
}
.chat-context-menu.open { display: block; }
.context-menu-item {
    padding: 9px 16px; font-size: 13.5px; color: #d1d7db; cursor: pointer;
    display: flex; align-items: center; gap: 10px; transition: background 0.12s, color 0.12s;
}
.context-menu-item:hover { background: #182229; color: #e9edef; }
.context-menu-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0; }

/* Popover de Emojis */
.emoji-popover {
    position: absolute; bottom: 65px; left: 16px; background: #202c33;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 36px rgba(0,0,0,0.5);
    z-index: 15; padding: 12px; width: 320px; animation: fadeInUp 0.2s var(--ease-spring);
}
.emoji-grid {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; font-size: 20px; text-align: center; max-height: 200px; overflow-y: auto;
}
.emoji-item {
    cursor: pointer; padding: 4px; border-radius: 6px; transition: background 0.15s, transform 0.15s; user-select: none;
}
.emoji-item:hover { background: rgba(255,255,255,0.12); transform: scale(1.2); }

/* Quick Reaction Bar & Message Actions */
.msg { position: relative; }
.msg-action-bar {
    position: absolute; top: -14px; right: 10px; background: #233138; border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px; padding: 2px 8px; display: none; gap: 6px; align-items: center; z-index: 4;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); animation: fadeIn 0.15s ease-out;
}
.msg:hover .msg-action-bar { display: flex; }
.msg-action-btn {
    background: none; border: none; color: #aebac1; font-size: 14px; cursor: pointer; padding: 2px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, color 0.15s;
}
.msg-action-btn:hover { color: #e9edef; transform: scale(1.2); }
.msg-reaction-tag {
    position: absolute; bottom: -10px; right: 10px; background: #233138; border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px; padding: 1px 6px; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); z-index: 3;
}
.encaminhar-item {
    padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); cursor: pointer; display: flex;
    align-items: center; justify-content: space-between; transition: background 0.15s;
}
.encaminhar-item:hover { background: #2a3942; }

/* Quoted / Replied Message Container (WhatsApp Style) */
.msg-quoted {
    background: rgba(0, 0, 0, 0.2);
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 12px;
    cursor: pointer;
}
.msg.recebida .msg-quoted {
    border-left-color: var(--accent-light);
    background: rgba(255, 255, 255, 0.05);
}
.msg-quoted-author {
    color: var(--accent-light);
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 11.5px;
}
.msg-quoted-text {
    color: #8696a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px;
    font-size: 12px;
}

/* Quoted Message Scroll & Highlight Flash Animation */
@keyframes msgHighlightPulse {
    0% { background-color: rgba(0, 168, 132, 0.4); box-shadow: 0 0 12px rgba(0, 168, 132, 0.5); }
    50% { background-color: rgba(0, 168, 132, 0.5); box-shadow: 0 0 18px rgba(0, 168, 132, 0.7); }
    100% { background-color: transparent; box-shadow: none; }
}
.msg.msg-highlight {
    animation: msgHighlightPulse 1.8s ease-in-out forwards;
    border-radius: 8px;
}

/* Botões de Ação do Cabeçalho (Tema e Fonte) */
.header-action-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #aebac1;
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.header-action-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #e9edef;
    transform: scale(1.06);
}
/* Botão de aprovação de atendentes (só admin) — é um link, não um <button>. */
a.header-action-btn { text-decoration: none; position: relative; }
.header-action-btn[hidden],
.admin-pendentes[hidden] { display: none !important; }
.admin-pendentes {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #f59e0b;
    color: #111b21;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* ==================== TEMA CLARO (.theme-light) COMPLETO ==================== */
body.theme-light {
    background: #e9edef;
    color: #111b21;
}

body.theme-light ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}
/* A lista mantinha o fundo escuro do tema escuro: a faixa da barra de rolagem
   (transparente) deixava esse fundo aparecer como uma barra preta. */
body.theme-light .chat-list {
    background: #ffffff;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
body.theme-light ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

body.theme-light .sidebar {
    background: #ffffff;
    border-right-color: #e9edef;
}
body.theme-light .header {
    background: #f0f2f5;
    color: #111b21;
    border-bottom-color: #d1d7db;
}
body.theme-light .header-user-nome { color: #111b21; }
body.theme-light .conexao-status { color: #667781; }
body.theme-light .search-container {
    background: #ffffff;
    border-bottom-color: #e9edef;
}
body.theme-light .search-container input {
    background: #f0f2f5;
    color: #111b21;
}
body.theme-light .search-container input::placeholder { color: #667781; }
body.theme-light .sync-btn, body.theme-light .header-action-btn {
    background: #f0f2f5;
    border-color: #d1d7db;
    color: #54656f;
}
body.theme-light .sync-btn:hover, body.theme-light .header-action-btn:hover {
    background: #e9edef;
    color: #111b21;
}
body.theme-light .tabs-container {
    background: #ffffff;
    border-bottom-color: #e9edef;
}
body.theme-light .tab-btn {
    background: #f0f2f5;
    color: #54656f;
}
body.theme-light .tab-btn.ativa {
    background: #00a884;
    color: #ffffff;
}
body.theme-light .chat-item {
    background: #ffffff;
    border-bottom-color: #f5f6f8;
}
body.theme-light .chat-item:hover, body.theme-light .chat-item.ativo {
    background: #f0f2f5;
}
body.theme-light .chat-name { color: #111b21; }
body.theme-light .chat-time { color: #667781; }
body.theme-light .chat-last-msg { color: #667781; }

body.theme-light .main {
    background-color: #efeae2;
}
body.theme-light .messages {
    background-color: #efeae2 !important;
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png') !important;
    background-blend-mode: soft-light !important;
    opacity: 1 !important;
}
body.theme-light .main::before {
    filter: none;
    opacity: 0.08;
}
body.theme-light .chat-header {
    background: #f0f2f5;
    color: #111b21;
    border-bottom-color: #d1d7db;
}
body.theme-light .chat-header-name { color: #111b21; }
body.theme-light .chat-action-btn { color: #54656f; }
body.theme-light .chat-action-btn:hover { background: #e9edef; color: #111b21; }

body.theme-light .footer {
    background: #f0f2f5;
    border-top-color: #d1d7db;
}
body.theme-light #input-mensagem {
    background: #ffffff;
    color: #111b21;
    border: 1px solid #d1d7db;
}
body.theme-light #input-mensagem::placeholder { color: #8696a0; }
body.theme-light .footer button.attach-btn, 
body.theme-light .footer button.mic-btn {
    background: #f0f2f5;
    border: 1px solid #d1d7db;
}
body.theme-light .footer button.attach-btn svg, 
body.theme-light .footer button.mic-btn svg {
    fill: #54656f;
}
body.theme-light .footer button.attach-btn:hover, 
body.theme-light .footer button.mic-btn:hover {
    background: #e9edef;
}
body.theme-light .remetente-inline {
    color: #667781;
}

/* Balões de Mensagem */
body.theme-light .msg.recebida {
    background: #ffffff;
    color: #111b21;
    box-shadow: 0 1px 1px rgba(11,20,26,0.14);
}
body.theme-light .msg.recebida::before {
    border-top-color: #ffffff;
}
body.theme-light .msg.enviada {
    background: #d9fdd3;
    color: #111b21;
    box-shadow: 0 1px 1px rgba(11,20,26,0.14);
}
body.theme-light .msg.enviada::before {
    border-top-color: #d9fdd3;
}

/* Prefixo do Remetente */
body.theme-light .msg-remetente-prefixo {
    color: #075e54 !important;
    font-weight: 700 !important;
}
body.theme-light .msg.enviada .msg-remetente-prefixo {
    color: #075e54 !important;
    font-weight: 700 !important;
}
body.theme-light .msg.recebida .msg-remetente-prefixo {
    color: #025144 !important;
    font-weight: 700 !important;
}

/* Nota Interna */
body.theme-light .msg.nota_interna {
    background: #fffbeb !important;
    color: #78350f !important;
    border: 1px solid #fde68a !important;
    box-shadow: 0 1px 2px rgba(180,83,9,0.12) !important;
}
body.theme-light .msg.nota_interna .nota-tag {
    color: #b45309 !important;
}

/* Player de Áudio no Tema Claro */
body.theme-light .audio-player {
    color: #111b21;
}
body.theme-light .audio-play-btn {
    background: #00a884 !important;
    box-shadow: 0 2px 6px rgba(0, 168, 132, 0.3) !important;
}
body.theme-light .audio-play-btn:hover {
    background: #019574 !important;
    transform: scale(1.06);
}
body.theme-light .audio-play-btn svg {
    fill: #ffffff !important;
}
body.theme-light .audio-progress-bar {
    background: rgba(0, 0, 0, 0.15) !important;
}
body.theme-light .audio-progress-fill {
    background: #00a884 !important;
}
body.theme-light .audio-progress-thumb {
    background: #00a884 !important;
    box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.25) !important;
}
body.theme-light .audio-time {
    color: #667781 !important;
    font-weight: 500 !important;
}
body.theme-light .audio-speed-btn {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #111b21 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
body.theme-light .audio-speed-btn:hover {
    background: rgba(0, 0, 0, 0.16) !important;
}

/* Mensagens Respondidas / Citadas */
body.theme-light .msg-quoted {
    background: rgba(0, 0, 0, 0.05) !important;
    border-left-color: #00a884 !important;
}
body.theme-light .msg.enviada .msg-quoted {
    background: rgba(0, 0, 0, 0.06) !important;
    border-left-color: #075e54 !important;
}
body.theme-light .msg.enviada .msg-quoted-author {
    color: #075e54 !important;
    font-weight: 700 !important;
}
body.theme-light .msg.recebida .msg-quoted-author {
    color: #00a884 !important;
    font-weight: 700 !important;
}
body.theme-light .msg-quoted-text {
    color: #54656f !important;
}

/* Documentos / Anexos */
body.theme-light .msg-doc {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    padding: 6px 10px;
}
body.theme-light .msg-doc svg {
    fill: #00a884 !important;
}
body.theme-light .msg-doc-name {
    color: #111b21 !important;
}

/* Hora da Mensagem & Ticks */
body.theme-light .msg-time {
    color: #667781 !important;
}
body.theme-light .msg-status svg {
    fill: #8696a0;
}
body.theme-light .msg-status svg[style*="fill: #53bdeb"] {
    fill: #53bdeb !important;
}

/* Separador de Data */
body.theme-light .date-separator {
    background: #ffffff;
    color: #54656f;
    box-shadow: 0 1px 1px rgba(11,20,26,0.14);
    border: 1px solid #e9edef;
}

/* Reações e Barra de Ações Rápidas */
body.theme-light .msg-action-bar {
    background: #ffffff !important;
    border: 1px solid #d1d7db !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
}
body.theme-light .msg-action-btn {
    color: #54656f !important;
}
body.theme-light .msg-action-btn:hover {
    color: #111b21 !important;
    background: #f0f2f5 !important;
}
body.theme-light .msg-reaction-tag {
    background: #ffffff !important;
    border: 1px solid #d1d7db !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
    color: #111b21 !important;
}

/* Popover de Emojis e Menu de Contexto */
body.theme-light .emoji-popover,
body.theme-light .chat-context-menu {
    background: #ffffff !important;
    border: 1px solid #d1d7db !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.16) !important;
}
body.theme-light .emoji-item:hover {
    background: #f0f2f5 !important;
}
body.theme-light .context-menu-item {
    color: #111b21 !important;
}
body.theme-light .context-menu-item:hover {
    background: #f0f2f5 !important;
}
body.theme-light .context-menu-divider {
    background: #e9edef !important;
}
body.theme-light .encaminhar-item {
    border-bottom-color: #e9edef !important;
    color: #111b21 !important;
}
body.theme-light .encaminhar-item:hover {
    background: #f0f2f5 !important;
}

/* Respostas Rápidas Popover */
body.theme-light .quick-replies-popover {
    background: #ffffff !important;
    border: 1px solid #d1d7db !important;
}
body.theme-light .resposta-item:hover {
    background: #f0f2f5 !important;
}
body.theme-light .resposta-titulo {
    color: #111b21 !important;
}
body.theme-light .resposta-texto {
    color: #667781 !important;
}

/* Botão Carregar Mais e Estado Vazio */
body.theme-light .carregar-mais {
    background: #ffffff !important;
    color: #54656f !important;
    border: 1px solid #d1d7db !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}
body.theme-light .carregar-mais:hover {
    background: #f0f2f5 !important;
    color: #111b21 !important;
}
body.theme-light .vazio {
    background: #ffffff !important;
    color: #54656f !important;
    border: 1px solid #d1d7db !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
body.theme-light .upload-progress {
    background: #f0f2f5 !important;
    color: #54656f !important;
    border-bottom: 1px solid #d1d7db !important;
}

/* Busca na Conversa */
body.theme-light .chat-search-bar {
    background: #f0f2f5 !important;
    border-bottom: 1px solid #d1d7db !important;
}
body.theme-light .chat-search-bar input {
    background: #ffffff !important;
    color: #111b21 !important;
    border: 1px solid #d1d7db !important;
}

/* Modais no Tema Claro */
body.theme-light .modal {
    background: #ffffff !important;
    color: #111b21 !important;
    border: 1px solid #d1d7db !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.18) !important;
}
body.theme-light .modal h3 { color: #111b21 !important; }
body.theme-light .modal p { color: #54656f !important; }
body.theme-light .modal input,
body.theme-light .modal textarea,
body.theme-light .modal select {
    background: #f0f2f5 !important;
    color: #111b21 !important;
    border: 1px solid #d1d7db !important;
}
body.theme-light .modal input::placeholder,
body.theme-light .modal textarea::placeholder {
    color: #8696a0 !important;
}
body.theme-light .modal label {
    color: #54656f !important;
}
body.theme-light .modal-btn-cancelar {
    background: #f0f2f5 !important;
    color: #54656f !important;
    border: 1px solid #d1d7db !important;
}
body.theme-light .modal-btn-cancelar:hover {
    background: #e9edef !important;
    color: #111b21 !important;
}
body.theme-light .modal-progress-bar-bg {
    background: #e9edef !important;
}
body.theme-light .modal-operacao-step {
    color: #667781 !important;
}

/* Painel de Perfil / Dados do Contato Completo */
body.theme-light .profile-panel {
    background: #f0f2f5 !important;
    border-left: 1px solid #d1d7db !important;
    color: #111b21 !important;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12) !important;
}
body.theme-light .profile-header-bar {
    background: #ffffff !important;
    color: #111b21 !important;
    border-bottom: 1px solid #e9edef !important;
}
body.theme-light .profile-close svg {
    fill: #54656f !important;
}
body.theme-light .profile-close:hover {
    background: #f0f2f5 !important;
}
body.theme-light .profile-body {
    background: #f0f2f5 !important;
}
body.theme-light .profile-section {
    background: #ffffff !important;
    border-bottom: 1px solid #e9edef !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
body.theme-light .profile-pic {
    background: #e9edef !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}
body.theme-light .profile-name {
    color: #111b21 !important;
    font-weight: 600 !important;
}
body.theme-light .profile-number {
    color: #667781 !important;
}
body.theme-light .profile-about-section {
    background: #ffffff !important;
    border-bottom: 1px solid #e9edef !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
body.theme-light .profile-about-title {
    color: #00a884 !important;
    font-weight: 600 !important;
}
body.theme-light .profile-about-text {
    color: #111b21 !important;
}
body.theme-light .profile-participantes-section {
    background: #ffffff !important;
    border-bottom: 1px solid #e9edef !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
body.theme-light .participante-item {
    border-bottom-color: #e9edef !important;
    color: #111b21 !important;
}
body.theme-light .participante-admin {
    color: #00a884 !important;
    font-weight: 600 !important;
}
body.theme-light .btn-editar-contato {
    background: #f0f2f5 !important;
    color: #54656f !important;
    border: 1px solid #d1d7db !important;
}
body.theme-light .btn-editar-contato:hover {
    background: #e9edef !important;
    color: #111b21 !important;
}

/* ==================== TAMANHO DA FONTE ==================== */
body.font-size-medium .msg .msg-content {
    font-size: 16px !important;
    line-height: 22px !important;
}
body.font-size-medium .chat-name {
    font-size: 16px !important;
}
body.font-size-medium .chat-last-msg {
    font-size: 14px !important;
}
body.font-size-medium #input-mensagem {
    font-size: 16px !important;
}
body.font-size-medium .chat-header-name {
    font-size: 17px !important;
}

body.font-size-large .msg .msg-content {
    font-size: 18.5px !important;
    line-height: 26px !important;
}
body.font-size-large .chat-name {
    font-size: 17.5px !important;
}
body.font-size-large .chat-last-msg {
    font-size: 15.5px !important;
}
body.font-size-large #input-mensagem {
    font-size: 17.5px !important;
}
body.font-size-large .chat-header-name {
    font-size: 19px !important;
}

@keyframes spinAnimation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spin-anim {
    animation: spinAnimation 0.8s linear infinite;
    transform-origin: center center;
}