@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700&display=swap');

:root {
  --bg: #0d0f14;
  --bg-panel: #161922;
  --border: #2a2f3a;
  --text: #e8e6e1;
  --text-muted: #8b8f9c;
  --accent: #ffb454;
  --accent-text: #ffb454;
  --accent-contrast: #de5df7;
  --accent-dim: #c98a3a;
  --error: #ff6b6b;
  --shadow: rgba(0, 0, 0, 0.35);
}

[data-theme="amoled"] {
  --bg: #000000;
  --bg-panel: #121212;
  --border: #262626;
  --text: #f5f5f5;
  --text-muted: #9a9a9a;
  --accent: #ffb454;
  --accent-text: #ffb454;
  --accent-contrast: #1a1305;
  --accent-dim: #c98a3a;
  --error: #ff6b6b;
  --shadow: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] {
  --bg: #eef0f4;
  --bg-panel: #ffffff;
  --border: #dde1e8;
  --text: #1a1d24;
  --text-muted: #666c78;
  --accent: #ffb454;
  --accent-text: #9a5f16;
  --accent-contrast: #1a1305;
  --accent-dim: #c98a3a;
  --error: #c22f2f;
  --shadow: rgba(30, 32, 40, 0.12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', Arial, sans-serif;
  transition: background-color .15s ease, color .15s ease;
}

.wordmark {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* ---------- Splash ---------- */
#splash-screen .logo-mark { width: 64px; height: 64px; margin-bottom: 20px; }
#splash-screen .wordmark { font-size: 28px; color: var(--text); margin: 0 0 6px; }
#splash-screen .welcome-text { color: var(--text-muted); font-size: 15px; margin: 0 0 28px; }
.progress-track {
  width: 220px;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  animation: preencher 1.6s ease-out forwards;
}
@keyframes preencher { to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .progress-fill { animation: none; width: 100%; }
}

/* ---------- Login / Cadastro ---------- */
.auth-panel {
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.auth-panel .logo-mark { width: 40px; height: 40px; margin-bottom: 14px; }
.auth-panel h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 28px;
  color: var(--text);
}
.auth-panel form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.campo {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.campo::placeholder { color: var(--text-muted); }
.campo:focus {
  outline: none;
  border-color: var(--accent);
}

.btn-ok {
  width: 100%;
  padding: 12px;
  margin-top: 4px;
  background: var(--accent);
  color: #1a1305;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.btn-ok:hover { background: #ffc478; }
.btn-ok:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.erro-msg {
  min-height: 16px;
  color: var(--error);
  font-size: 13px;
  text-align: center;
}

.auth-links {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}
.link-sutil {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}
.link-sutil:hover { color: var(--accent); }
.link-sutil:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.oculto { display: none !important; }

/* =========================================================
   HOME / TELA PRINCIPAL (depois do login)
   ========================================================= */
.app-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
}

/* ---------- Topo ---------- */
.topbar {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
}
.topbar-brand { display: flex; align-items: center; gap: 10px; }
.topbar-brand img { width: 24px; height: 24px; }
.topbar-brand span {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 15px;
}
.topbar-right { display: flex; align-items: center; gap: 10px; }

.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-text);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-dots-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
}
.menu-dots-btn:hover { background: var(--bg-panel); color: var(--text); }
.menu-dots-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.badge-flutuante {
  position: absolute;
  top: 2px;
  right: 2px;
}
#btn-pedidos-grupo svg { width: 18px; height: 18px; display: block; }
#btn-inicio-mobile svg { width: 18px; height: 18px; display: block; }

/* ---------- Utilitário: elemento só existe/aparece no layout mobile ---------- */
.mobile-only { display: none; }

/* ---------- Dropdowns ---------- */
.dropdown-wrap { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  min-width: 210px;
  max-width: 260px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 30px var(--shadow);
  z-index: 40;
}
.search-row .dropdown-menu-busca { left: 0; right: auto; }
.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 13px;
}
.dropdown-clicavel { cursor: pointer; }
.dropdown-clicavel:hover { background: var(--bg); }

.switch {
  width: 34px;
  height: 19px;
  border-radius: 20px;
  background: var(--border);
  border: none;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.switch::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--text-muted);
  top: 2px;
  left: 2px;
  transition: transform .15s ease, background-color .15s ease;
}
.switch.ativo { background: var(--accent-dim); }
.switch.ativo::after { transform: translateX(15px); background: var(--accent-contrast); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Corpo (sidebar + main) ---------- */
.app-body { flex: 1; display: flex; min-height: 0; }

.app-sidebar {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 4px 0 12px;
}
.search-row input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--text);
  padding: 10px 0;
  font-size: 13px;
  font-family: inherit;
}
.search-row input::placeholder { color: var(--text-muted); }
.search-row input:focus { outline: none; }
.search-options-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  padding: 6px 8px;
  cursor: pointer;
  font-family: inherit;
}
.search-options-btn:hover { color: var(--text); }

.sidebar-actions { display: flex; flex-direction: column; gap: 8px; }
.btn-compacto { padding: 9px 12px; font-size: 13px; width: auto; }

.btn-outline {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent-text); }
.btn-outline:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.lista-chats { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.item-chat { padding: 10px; border-radius: 8px; cursor: pointer; }
.item-chat:hover, .item-chat.ativo { background: var(--bg-panel); }
.item-chat .nome { font-weight: 600; font-size: 13px; color: var(--text); }
.item-chat .preview {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.item-chat-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.badge-nao-lidas {
  flex-shrink: 0;
  background: #2196f3;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.empty-conversas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 6px;
}
.empty-conversas p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); }

/* ---------- Área principal ---------- */
.app-main { flex: 1; overflow-y: auto; padding: 36px 40px; }

.home-inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; }
.home-section { padding: 26px 0; }
.home-section:first-child { padding-top: 0; }
.home-section + .home-section { border-top: 1px solid var(--border); }
.home-section h2 {
  font-family: 'Sora', 'IBM Plex Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.texto-vazio { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin: 0; }

.ranking-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.ranking-pos { font-family: 'IBM Plex Mono', monospace; color: var(--text-muted); font-size: 12px; width: 14px; }
.ranking-nome { flex: 1; font-size: 13px; }
.ranking-valor { font-size: 12px; color: var(--text-muted); }

.grupo-destaque {
  border-left: 2px solid var(--accent);
  background: var(--bg-panel);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.grupo-destaque strong { font-size: 14px; }
.grupo-destaque span { font-size: 12px; color: var(--text-muted); }

.suporte-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.suporte-row p { margin: 0; font-size: 13px; color: var(--text-muted); max-width: 360px; }

.app-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}
.app-footer a { color: var(--text-muted); text-decoration: none; }
.app-footer a:hover { color: var(--accent-text); }

/* ---------- Conversa aberta ---------- */
.chat-view { display: flex; flex-direction: column; height: 100%; }
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.chat-header .btn-link { padding: 0; font-size: 13px; font-weight: 500; }
.btn-link { background: none; border: none; color: var(--text-muted); cursor: pointer; font-family: inherit; }
.btn-link:hover { color: var(--accent-text); }

.mensagens { flex: 1; padding: 18px 4px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }

.msg {
  max-width: 60%;
  width: fit-content;
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  position: relative;
}
.msg.minha { align-self: flex-end; border-color: var(--accent-dim); }
.msg .quote-box {
  cursor: pointer;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 5px;
}
.msg .quote-box .quote-nome { font-size: 12px; font-weight: 700; color: var(--accent-text); }
.msg .quote-box .quote-snippet {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg .reply-ref { font-size: 12px; background: var(--bg); padding: 4px 6px; border-radius: 4px; margin-bottom: 4px; color: var(--text-muted); }
.msg .conteudo { white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.msg .hora { font-size: 10px; color: var(--text-muted); text-align: right; margin-top: 2px; }
.msg .apagada { font-style: italic; color: var(--text-muted); }
.btn-acessar-link {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--accent-dim);
  background: rgba(255, 180, 84, 0.12);
  color: var(--accent-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-acessar-link:hover { background: rgba(255, 180, 84, 0.22); }
.btn-acessar-link--pendente {
  border-color: var(--error);
  background: rgba(255, 107, 107, 0.1);
  color: var(--error);
}
.btn-acessar-link--pendente:hover { background: rgba(255, 107, 107, 0.18); }
.msg .acoes { display: none; gap: 8px; font-size: 11px; margin-top: 4px; }
.msg:hover .acoes { display: flex; }
.msg .acoes span { cursor: pointer; color: var(--text-muted); }
.msg .acoes span:hover { color: var(--accent-text); }

/* ---------- Deslizar mensagem pra responder (tipo o Zap) ---------- */
.msg { position: relative; touch-action: pan-y; }
.msg.arrastando { transition: none; }
.msg:not(.arrastando) { transition: transform .18s ease; }
.msg .swipe-icone-responder {
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
}

/* Botão de responder sempre visível em áudio/vídeo/imagem/arquivo,
   já que o toque nessas mensagens é "roubado" pelo player/link/anexo. */
.msg .btn-responder-rapido {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity .15s ease, background .15s ease;
}
.msg .btn-responder-rapido:hover { opacity: 1; background: var(--accent); color: var(--accent-contrast); }
.msg.minha .btn-responder-rapido { right: auto; left: 4px; }
.msg-remetente {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.msg-remetente .avatar-circle--sm { width: 18px; height: 18px; font-size: 10px; flex-shrink: 0; }
.msg-remetente-nome { font-size: 12px; font-weight: 700; color: var(--accent-text); }
.msg-remetente-saiu {
  font-size: 10px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.reply-preview {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.reply-preview-accent { width: 3px; align-self: stretch; border-radius: 99px; background: var(--accent); flex-shrink: 0; }
.reply-preview-body { flex: 1; min-width: 0; }
.reply-preview-nome { font-size: 12px; font-weight: 700; color: var(--accent-text); }
.reply-preview-snippet { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-preview button { background: none; border: none; color: var(--text-muted); cursor: pointer; flex-shrink: 0; }

.input-area { display: flex; padding: 12px 4px; gap: 8px; position: relative; }
.input-area input {
  flex: 1;
  padding: 11px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.input-area input::placeholder { color: var(--text-muted); }
.input-area input:focus { outline: none; border-color: var(--accent); }
.input-area button {
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  flex-shrink: 0;
}
.input-area button:hover { background: #ffc478; }

/* ---------- Sugestão de @menção (tipo Zap), digitada dentro do grupo ---------- */
.mencao-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 6px;
  max-height: 180px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  z-index: 5;
}
.mencao-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.mencao-item:hover { background: var(--bg); }
.mencao-item-todos {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg .mencao { color: var(--accent-text); font-weight: 700; }
.msg .mencao-eu { background: rgba(255, 180, 84, .28); border-radius: 4px; padding: 0 2px; }

/* ---------- Barrinha de gravação (tipo Zap): cancelar / tempo / enviar ---------- */
.barra-gravacao {
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
}
.barra-gravacao-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 13px;
}
.barra-gravacao-pulso {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--error);
  animation: zapzinho-pulso-gravacao 1.1s ease-in-out infinite;
}
@keyframes zapzinho-pulso-gravacao {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.75); }
}
#barra-gravacao-timer { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.btn-cancelar-gravacao, .btn-enviar-gravacao {
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-cancelar-gravacao svg, .btn-enviar-gravacao svg { width: 18px; height: 18px; }
.btn-cancelar-gravacao { background: var(--bg-panel); color: var(--error); border: 1px solid var(--border); }
.btn-cancelar-gravacao:hover { border-color: var(--error); }
.btn-enviar-gravacao { background: var(--accent); color: var(--accent-contrast); }
.btn-enviar-gravacao:hover { background: #ffc478; }

/* ---------- Modais (substituem os prompt() feios) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px var(--shadow);
}
.modal-title {
  font-family: 'Sora', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 16px;
}
.modal-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.modal-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
  resize: vertical;
}
.modal-input:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.modal-texto { font-size: 13px; color: var(--text-muted); line-height: 1.4; margin: 0 0 4px; }

.msg-sistema {
  align-self: center;
  max-width: 80%;
  margin: 6px 0;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
  text-align: center;
}

.tag-papel {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.tag-dono { background: #f5a623; color: #3a2900; }
.tag-admin { background: #4c8dff; color: #fff; }
.config-grupo-botoes { display: flex; gap: 6px; flex-shrink: 0; }
.saiu-quando { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.modal-erro { color: var(--error); font-size: 12px; margin: -8px 0 12px; }

/* ---------- Modal de Configurações do grupo (abas Membros / Convite) ---------- */
.modal-box--grupo { max-width: 420px; }
.config-grupo-acoes-topo {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.config-grupo-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.config-grupo-tab {
  border: none;
  background: none;
  color: var(--text-muted);
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 4px 10px;
  margin-right: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 6px;
}
.config-grupo-tab:hover { color: var(--text); }
.config-grupo-tab.ativa { color: var(--accent); border-bottom-color: var(--accent); }
.config-grupo-badge {
  background: var(--accent);
  color: #3a2900;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.config-grupo-corpo { max-height: 55vh; overflow-y: auto; }
.config-grupo-subtitulo-pedidos { margin-top: 16px; }

/* ---------- Permissões do grupo (quem pode mandar mensagem) ---------- */
.permissoes-lista { display: flex; flex-direction: column; gap: 8px; }
.permissao-opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.permissao-opcao:hover { border-color: var(--accent); }
.permissao-opcao--ativa { border-color: var(--accent); background: var(--bg-panel); }
.permissao-opcao input { margin-top: 3px; flex-shrink: 0; }
.permissao-opcao-texto { display: flex; flex-direction: column; gap: 2px; }
.permissao-opcao-texto strong { font-size: 13px; }
.permissao-opcao-texto small { font-size: 11px; color: var(--text-muted); }
.aviso-removido {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px;
  border-top: 1px solid var(--border);
}

/* ---------- Link de convite (configurações do grupo) ---------- */
.modal-subtitulo {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px;
}
.convite-link-row { display: flex; gap: 6px; margin-bottom: 10px; }
.convite-link-row .modal-input { margin-top: 0; font-size: 12px; }
.modal-label-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.modal-label-checkbox input { flex-shrink: 0; }
.tag-removido {
  font-size: 10px;
  font-style: italic;
  color: var(--text-muted);
  text-transform: none;
}
.tag-voce {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ---------- Rodapé com ícones ---------- */
.footer-social { display: flex; align-items: center; gap: 10px; }
.footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--text-muted);
  transition: color .15s ease, background-color .15s ease;
}
.footer-icon:hover { color: var(--accent-text); background: var(--bg-panel); }
.footer-icon svg { width: 16px; height: 16px; }

/* ---------- Avatar no cabeçalho da conversa ---------- */
.avatar-circle--sm { width: 28px; height: 28px; font-size: 12px; }
.avatar-circle--lg { width: 64px; height: 64px; font-size: 24px; }

.chat-header-info { cursor: pointer; }
.chat-header-info:hover { opacity: 0.85; }

.info-grupo-topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.info-grupo-nome { margin: 0; text-align: center; }
.info-grupo-acoes-foto {
  display: flex;
  gap: 14px;
  margin-top: -4px;
}
.info-grupo-descricao {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  margin: 0 0 4px;
}
.info-grupo-descricao--vazia { color: var(--text-muted); font-style: italic; }
.info-grupo-descricao a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.info-grupo-criacao {
  font-size: 11px;
  color: var(--text-muted);
  margin: 10px 0 0;
}
.chat-header-info { display: flex; align-items: center; gap: 10px; }

/* ---------- Clicar na resposta leva até a mensagem original ---------- */
.reply-ref { cursor: pointer; }
.reply-ref:hover { text-decoration: underline; }
.msg-destaque { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Imagem e arquivo dentro da mensagem ---------- */
.msg-imagem { max-width: 220px; border-radius: 8px; display: block; cursor: pointer; }
.msg-arquivo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-text);
  text-decoration: none;
  font-size: 13px;
}
.msg-arquivo:hover { text-decoration: underline; }

/* ---------- Ícones de enviar / gravar / anexar ---------- */
.input-area button svg { width: 18px; height: 18px; }
.input-area button.gravando { background: var(--error); }
#btn-anexo, #btn-audio {
  background: var(--bg-panel);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
#btn-anexo:hover, #btn-audio:hover { color: var(--accent-text); border-color: var(--accent); }

/* ---------- Responsivo ---------- */

/* Telas médias (tablets, janelas pequenas de PC): mantém sidebar + main
   lado a lado, só encolhe um pouco pra caber melhor. */
@media (max-width: 1024px) and (min-width: 761px) {
  .app-sidebar { width: 250px; }
  .app-main { padding: 30px 26px; }
}

/* Celular: sidebar (lista de conversas) e área principal (home ou conversa
   aberta) viram duas telas cheias em vez de duas colunas — não cabem lado a
   lado numa tela estreita. O JS alterna qual das duas aparece adicionando/
   removendo a classe "mostrar-main" no #chat-screen (ver app.js). */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .screen { min-height: 100dvh; }
  .app-shell { height: 100dvh; }
  .auth-panel { width: 100%; max-width: 320px; }
  .topbar { padding: 0 14px; }
  .app-body { flex-direction: column; }

  .app-sidebar {
    width: 100%;
    height: 100%;
    max-height: none;
    border-right: none;
    border-bottom: none;
  }
  .app-main { display: none; height: 100%; padding: 22px 16px; }

  #chat-screen.mobile-home .app-sidebar { display: none; }
  #chat-screen.mobile-home .app-main { display: block; }

  #chat-screen:not(.mobile-home):not(.mostrar-main) .app-sidebar { display: flex; }
  #chat-screen:not(.mobile-home):not(.mostrar-main) .app-main { display: none; }

  #chat-screen.mostrar-main .app-sidebar { display: none; }

  /* Dentro de um grupo/PV: a conversa ocupa toda a altura disponível.
     O topo e o rodapé deixam de reservar espaço físico. */
  #chat-screen.mostrar-main .topbar,
  #chat-screen.mostrar-main .app-footer {
    display: none !important;
  }

  #chat-screen.mostrar-main .app-body {
    flex: 1;
    min-height: 0;
    height: 100%;
  }

  #chat-screen.mostrar-main .app-main {
    display: block;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  #chat-screen.mostrar-main #chat-view {
    height: 100%;
    min-height: 0;
  }

  #chat-screen.mostrar-main .search-options-btn svg { width: 18px; height: 18px; }

  .mobile-only { display: flex; }
  .search-options-btn.mobile-only svg { width: 17px; height: 17px; display: block; }

  .btn-ir-conversas-mobile {
    position: fixed;
    right: 18px;
    bottom: 72px;
    z-index: 50;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    box-shadow: 0 8px 24px var(--shadow);
    cursor: pointer;
  }
  .btn-ir-conversas-mobile:hover { filter: brightness(1.05); }
  .btn-ir-conversas-mobile:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
  .btn-ir-conversas-mobile svg { width: 22px; height: 22px; }

  .msg { max-width: 82%; }
  .suporte-row { flex-direction: column; align-items: flex-start; }
  .app-footer {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 14px 16px;
  }
}

/* =========================================================
   CONFIGURAÇÕES (tema, fundo, fonte, negrito, cor das msgs)
   ========================================================= */

/* ---------- Fundos de conversa (só CSS, não guarda foto nenhuma) ---------- */
[data-fundo="pontos"] #mensagens {
  background-image: radial-gradient(var(--border) 1.2px, transparent 1.2px);
  background-size: 16px 16px;
}
[data-fundo="diagonal"] #mensagens {
  background-image: repeating-linear-gradient(45deg, var(--bg-panel) 0 10px, transparent 10px 20px);
}
[data-fundo="bolhas"] #mensagens {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 180, 84, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 82% 75%, rgba(201, 138, 58, 0.14) 0%, transparent 45%);
}

/* ---------- Fonte alternativa (site todo) ---------- */
[data-fonte="sistema"] body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Negrito geral ---------- */
[data-negrito="1"] body,
[data-negrito="1"] .msg .conteudo,
[data-negrito="1"] .item-chat .nome,
[data-negrito="1"] .ranking-nome,
[data-negrito="1"] .texto-vazio,
[data-negrito="1"] .modal-label,
[data-negrito="1"] .grupo-destaque span {
  font-weight: 600;
}

/* ---------- Cor das mensagens enviadas ---------- */
[data-cor-enviada="azul"] .msg.minha { border-color: #4c8dff; }
[data-cor-enviada="verde"] .msg.minha { border-color: #3ecf8e; }

/* ---------- Painel de configurações ---------- */
.modal-config { max-width: 420px; max-height: 85vh; overflow-y: auto; }
.config-grupo { margin-bottom: 18px; }
.config-grupo:last-of-type { margin-bottom: 0; }
.config-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.config-linha { display: flex; align-items: center; justify-content: space-between; }
.config-linha .config-label { margin-bottom: 0; }

.swatches { display: flex; gap: 10px; flex-wrap: wrap; }

.swatch-tema {
  width: 38px; height: 38px; border-radius: 9px;
  border: 2px solid var(--border); cursor: pointer; padding: 0;
}
.swatch-tema.ativo { border-color: var(--accent); }
.swatch-dark { background: #0d0f14; }
.swatch-light { background: #eef0f4; }
.swatch-amoled { background: #000000; }

.swatch-fundo {
  width: 52px; height: 38px; border-radius: 9px;
  border: 2px solid var(--border); cursor: pointer; padding: 0;
  background: var(--bg-panel);
}
.swatch-fundo.ativo { border-color: var(--accent); }
.fundo-pontos { background-image: radial-gradient(#8b8f9c88 1.4px, transparent 1.4px); background-size: 8px 8px; }
.fundo-diagonal { background-image: repeating-linear-gradient(45deg, #8b8f9c55 0 4px, transparent 4px 8px); }
.fundo-bolhas { background-image: radial-gradient(circle at 30% 30%, #ffb45488 0%, transparent 60%), radial-gradient(circle at 70% 70%, #c98a3a88 0%, transparent 60%); }

.chip {
  padding: 8px 14px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.chip.ativo { border-color: var(--accent); color: var(--accent-text); }

.swatch-cor {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--border); cursor: pointer; padding: 0;
}
.swatch-cor.ativo { border-color: var(--text); }
.cor-ambar { background: #c98a3a; }
.cor-azul { background: #4c8dff; }
.cor-verde { background: #3ecf8e; }

/* ---------- Privacidade da foto de perfil ---------- */
.privacidade-opcoes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.privacidade-opcao { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.privacidade-opcao input { accent-color: var(--accent); cursor: pointer; }
#privacidade-lista-wrap { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ---------- Trocar de conta ---------- */
.topbar-right .avatar-circle { cursor: pointer; }
#menu-contas { min-width: 230px; max-width: 280px; width: max-content; }
.conta-item { justify-content: flex-start; }
.conta-info { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.conta-info span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-ativa { background: var(--bg); }
.conta-check { color: var(--accent-text); font-size: 13px; flex-shrink: 0; }
.conta-remover { color: var(--text-muted); font-size: 12px; flex-shrink: 0; padding: 2px 4px; }
.conta-remover:hover { color: var(--error); }

/* ---------- Banner de contato desconhecido/salvo ---------- */
.contato-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px 18px;
  margin: 14px auto 4px;
  max-width: 300px;
  border-radius: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
}
.contato-banner span {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.contato-banner .btn-salvar-contato {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.contato-banner .btn-salvar-contato:hover { background: #ffc478; }

/* ---------- Lista de contatos no modal de nova conversa ---------- */
.lista-contatos { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; margin-bottom: 4px; }
.lista-contatos .conta-item { padding: 8px 6px; }

/* ---------- Menu de opções de cada conversa (lista lateral) ---------- */
.item-chat-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.item-chat-titulo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.item-chat-titulo .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-chat-titulo .avatar-circle { flex-shrink: 0; }
.item-menu-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.item-menu-btn:hover { background: var(--bg); color: var(--text); }
.menu-chat-opcoes { right: 0; left: auto; }

/* ---------- Avisos (toast) ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--error);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 12px 32px var(--shadow);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 300;
  max-width: 320px;
  text-align: center;
  pointer-events: none;
}
.toast.mostrar { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-sucesso { border-left-color: var(--accent); }

/* ---------- Menu flutuante (não fica preso a container com scroll) ---------- */
#menu-flutuante {
  position: fixed;
  min-width: 190px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 30px var(--shadow);
  z-index: 250;
}
/* =========================================================
   FUNDOS DE CONVERSA — NOVOS (6 temas)
   ========================================================= */

/* ── Aurora ── */
[data-fundo="aurora"] #mensagens {
  background-image:
    radial-gradient(ellipse at 0%   0%,   rgba(117, 80, 255, .12) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 40%,  rgba(255,180,  84, .13) 0%, transparent 55%),
    radial-gradient(ellipse at 30%  100%, rgba( 62,207, 142, .11) 0%, transparent 55%);
}
/* ── Grade ── */
[data-fundo="grade"] #mensagens {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    linear-gradient(rgba(255,180,84,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,180,84,.04) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}
/* ── Hexágono ── */
[data-fundo="hexagono"] #mensagens {
  background-image:
    repeating-linear-gradient(60deg,  var(--border) 0, var(--border) 1px, transparent 1px, transparent 50%),
    repeating-linear-gradient(-60deg, var(--border) 0, var(--border) 1px, transparent 1px, transparent 50%),
    repeating-linear-gradient(0deg,   var(--border) 0, var(--border) 1px, transparent 1px, transparent 50%);
  background-size: 24px 42px;
}
/* ── Nuvens ── */
[data-fundo="nuvens"] #mensagens {
  background-image:
    radial-gradient(ellipse 70% 50% at 10%  10%,  rgba(255,180, 84,.08) 0%, transparent 100%),
    radial-gradient(ellipse 60% 60% at 90%  20%,  rgba(117, 80,255,.07) 0%, transparent 100%),
    radial-gradient(ellipse 80% 50% at 50%  55%,  rgba( 62,207,142,.06) 0%, transparent 100%),
    radial-gradient(ellipse 55% 70% at 20%  90%,  rgba(255,107,107,.06) 0%, transparent 100%),
    radial-gradient(ellipse 65% 55% at 80%  85%,  rgba(255,180, 84,.07) 0%, transparent 100%);
}
/* ── Granulado (noise via SVG embutido) ── */
[data-fundo="noise"] #mensagens {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
/* ── Ondas ── */
[data-fundo="ondas"] #mensagens {
  background-image:
    repeating-linear-gradient(-45deg,
      transparent 0px, transparent 6px,
      rgba(255,180,84,.07) 6px, rgba(255,180,84,.07) 7px),
    repeating-radial-gradient(ellipse 100% 15px at 50% 0px,
      transparent 0%, transparent 49%,
      rgba(255,180,84,.09) 50%, rgba(255,180,84,.09) 51%,
      transparent 52%);
  background-size: 100% 100%, 100% 28px;
}

/* swatches em miniatura */
.fundo-aurora   { background-image: radial-gradient(ellipse at 0% 0%, #7550ff55 0%, transparent 60%), radial-gradient(ellipse at 100% 100%, #ffb45444 0%, transparent 60%), radial-gradient(ellipse at 50% 100%, #3ecf8e44 0%, transparent 60%); }
.fundo-grade    { background-image: linear-gradient(#8b8f9c55 1px, transparent 1px), linear-gradient(90deg, #8b8f9c55 1px, transparent 1px); background-size: 10px 10px; }
.fundo-hexagono { background-image: repeating-linear-gradient(60deg, #8b8f9c55 0, #8b8f9c55 1px, transparent 1px, transparent 50%), repeating-linear-gradient(-60deg, #8b8f9c55 0, #8b8f9c55 1px, transparent 1px, transparent 50%); background-size: 8px 14px; }
.fundo-nuvens   { background-image: radial-gradient(ellipse 70% 60% at 20% 20%, #ffb45455 0%, transparent 100%), radial-gradient(ellipse 60% 60% at 80% 80%, #7550ff44 0%, transparent 100%); }
.fundo-noise    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E"); background-size: 80px 80px; }
.fundo-ondas    { background-image: repeating-linear-gradient(-45deg, transparent 0 3px, #ffb45433 3px 4px); }

/* =========================================================
   PLAYER DE ÁUDIO
   ========================================================= */
.audio-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  max-width: 260px;
  padding: 2px 0;
}
.audio-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.audio-btn:hover { background: #ffc478; }
.audio-btn:active { transform: scale(.92); }
.audio-icone { width: 17px; height: 17px; }
.audio-player.tocando .audio-btn { box-shadow: 0 0 0 3px rgba(255,180,84,.22); }
.audio-meio { flex: 1; min-width: 0; }
.audio-onda {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  cursor: pointer;
}
.audio-barra {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--border);
  transition: background-color .12s ease;
}
.audio-barra.tocada { background: var(--accent); }
.msg.minha .audio-barra { background: rgba(139,143,156,.55); }
.msg.minha .audio-barra.tocada { background: var(--accent); }
.audio-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
}
.audio-tempo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.audio-velocidade {
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  cursor: pointer;
}
.audio-velocidade:hover { border-color: var(--accent); color: var(--accent-text); }

/* =========================================================
   ENCAMINHAR
   ========================================================= */
.msg-encaminhada {
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.msg .msg-check {
  position: absolute;
  top: 50%;
  left: -26px;
  transform: translateY(-50%) scale(.6);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: transparent;
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.msg.minha .msg-check { left: auto; right: -26px; }
.mensagens.selecionando .msg { cursor: pointer; margin-left: 28px; }
.mensagens.selecionando .msg.minha { margin-left: 0; margin-right: 28px; }
.mensagens.selecionando .msg .msg-check { display: flex; transform: translateY(-50%) scale(1); }
.mensagens.selecionando .msg .acoes { display: none !important; }
.msg.msg-selecionada { border-color: var(--accent); background: rgba(255,180,84,.08); }
.msg.msg-selecionada .msg-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.barra-encaminhar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 4px 10px;
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  background: var(--bg-panel);
  box-shadow: 0 8px 24px var(--shadow);
}
.barra-encaminhar-info { flex: 1; font-size: 12px; color: var(--text-muted); }

/* =========================================================
   PERFIL DA PESSOA + BIO
   ========================================================= */
.modal-box--perfil { max-width: 320px; }
.perfil-foto-grande {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  cursor: zoom-in;
}
.perfil-foto-grande:hover { border-color: var(--accent); }
.perfil-bio {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text);
  text-align: center;
  word-break: break-word;
}
.perfil-bio--vazia { color: var(--text-muted); font-style: italic; }
.perfil-bio-contador {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  #chat-screen.mobile-home .topbar-brand,
  #chat-screen.mobile-home #wrap-avatar-topo {
    display: flex;
  }
  #chat-screen.mobile-home .topbar {
    height: 56px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
  }
}





/* =========================================================
   CHATDEVS AUTH — identidade premium
   Escopo limitado às telas de login e cadastro.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

.auth-screen {
  --auth-bg: #090b10;
  --auth-card: rgba(18, 21, 30, .88);
  --auth-line: rgba(255,255,255,.085);
  --auth-muted: #9299aa;
  --auth-bright: #f4f5f8;
  --auth-lime: #c7f36b;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 42px 28px;
  background: var(--auth-bg);
  background-image: radial-gradient(ellipse at 12% 18%, rgba(121, 151, 83, .13), transparent 35%), radial-gradient(ellipse at 88% 83%, rgba(87, 99, 160, .14), transparent 37%), linear-gradient(135deg, #0b0e14 0%, #090b10 55%, #0d1018 100%);
  color: var(--auth-bright);
  font-family: 'DM Sans', sans-serif;
}
.auth-screen::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .17; background-image: radial-gradient(rgba(255,255,255,.3) .65px, transparent .65px); background-size: 19px 19px;
  mask-image: linear-gradient(110deg, #000, transparent 72%);
}
.auth-ambient { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(1px); }
.auth-ambient-one { width: 330px; height: 330px; left: -210px; top: 22%; border: 1px solid rgba(199,243,107,.16); box-shadow: 0 0 0 35px rgba(199,243,107,.018), 0 0 0 75px rgba(199,243,107,.014); animation: auth-drift 11s ease-in-out infinite alternate; }
.auth-ambient-two { width: 260px; height: 260px; right: -170px; bottom: -110px; background: radial-gradient(circle, rgba(125,139,205,.12), transparent 70%); animation: auth-drift 14s ease-in-out infinite alternate-reverse; }
.auth-layout { width: min(1050px, 100%); margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 465px); align-items: center; gap: clamp(48px, 8vw, 112px); position: relative; z-index: 1; }
.auth-story { min-width: 0; min-height: 540px; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 0 20px; animation: auth-rise .7s cubic-bezier(.2,.75,.25,1) both; }
.auth-brand-lockup { display: inline-flex; align-items: center; gap: 12px; font: 800 21px/1 'Manrope', sans-serif; letter-spacing: -.8px; }
.auth-brand-lockup .logo-mark { width: 38px; height: 38px; margin: 0; filter: drop-shadow(0 0 15px rgba(199,243,107,.12)); }
.brand-accent { color: var(--auth-lime); }
.auth-story-copy { margin: 56px 0 52px; }
.auth-kicker { display: inline-flex; align-items: center; gap: 10px; color: #aeb5c4; font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--auth-lime); box-shadow: 0 0 12px rgba(199,243,107,.65); animation: auth-pulse 3s ease-in-out infinite; }
.auth-story h2 { margin: 25px 0 20px; max-width: 550px; font: 700 clamp(38px, 4.2vw, 57px)/1.12 'Manrope', sans-serif; letter-spacing: -2.8px; }
.auth-story h2 span { color: var(--auth-lime); }
.auth-story-copy p { max-width: 405px; margin: 0; color: #9ba2b1; font-size: 15px; line-height: 1.9; }
.auth-story-foot { display: flex; align-items: center; gap: 12px; color: #a3a9b6; font-size: 12px; }
.auth-orbit-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(199,243,107,.28); border-radius: 10px; color: var(--auth-lime); font-size: 17px; }
.auth-foot-line { height: 1px; width: 58px; background: linear-gradient(90deg, rgba(199,243,107,.45), transparent); margin-left: 2px; }
.auth-card { width: 100%; max-width: none; align-items: stretch; padding: 34px 34px 23px; border: 1px solid rgba(255,255,255,.11); border-radius: 24px; background: linear-gradient(145deg, rgba(25,29,40,.96), rgba(15,18,26,.94)); box-shadow: 0 28px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.045); backdrop-filter: blur(22px); animation: auth-rise .75s cubic-bezier(.2,.75,.25,1) .08s both; position: relative; }
.auth-card::before { content: ''; position: absolute; top: -1px; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(199,243,107,.65), transparent); }
.auth-card-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 27px; border-bottom: 1px solid var(--auth-line); }
.auth-step { color: var(--auth-lime); font: 700 11px 'Manrope', sans-serif; letter-spacing: 1px; }
.auth-step i { color: #626a79; font-style: normal; padding: 0 3px; }
.auth-secure { display: inline-flex; align-items: center; gap: 7px; color: #858d9d; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; }
.auth-secure svg { width: 13px; height: 13px; fill: none; stroke: var(--auth-lime); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.auth-heading { margin: 27px 0 28px; }
.auth-heading h1 { color: var(--auth-bright); margin: 0 0 9px; font: 700 clamp(24px, 2.4vw, 29px)/1.25 'Manrope', sans-serif; letter-spacing: -1.2px; }
.heading-period { color: var(--auth-lime); }
.auth-heading p { margin: 0; color: var(--auth-muted); font-size: 13px; line-height: 1.7; }
.auth-mobile-brand { display: none; }
.auth-card form { gap: 9px; }
.auth-label, .auth-label-row { color: #d9dce4; font-size: 11px; font-weight: 600; letter-spacing: .15px; }
.auth-label-row { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; }
.auth-inline-link { padding: 0; border: 0; background: none; color: var(--auth-lime); font: 600 11px 'DM Sans', sans-serif; cursor: pointer; transition: opacity .2s; }
.auth-inline-link:hover { opacity: .72; }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap > svg { position: absolute; left: 15px; z-index: 1; width: 17px; height: 17px; fill: none; stroke: #788193; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke .22s, transform .22s; }
.auth-input-wrap:focus-within > svg { stroke: var(--auth-lime); transform: scale(1.06); }
.auth-card .campo { min-width: 0; width: 100%; min-height: 51px; padding: 14px 15px 14px 44px; border: 1px solid rgba(255,255,255,.095); border-radius: 12px; background: rgba(7,9,14,.47); color: #f3f5f9; font: 500 13px 'DM Sans', sans-serif; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); transition: border-color .22s, background .22s, box-shadow .22s, transform .22s; }
.auth-card .campo::placeholder { color: #666f80; }
.auth-card .campo:hover { border-color: rgba(255,255,255,.17); }
.auth-card .campo:focus { outline: none; border-color: rgba(199,243,107,.68); background: rgba(8,12,14,.75); box-shadow: 0 0 0 3px rgba(199,243,107,.085), 0 7px 20px rgba(0,0,0,.12); }
.auth-card .erro-msg { min-height: 12px; margin: 2px 0 0; text-align: left; font-size: 11px; }
.auth-submit { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; margin-top: 4px; padding: 13px 17px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: var(--auth-lime); color: #151b0d; font: 700 13px 'DM Sans', sans-serif; box-shadow: 0 7px 22px rgba(153,204,67,.13); transition: transform .22s, box-shadow .22s, background .22s; }
.auth-submit svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s; }
.auth-submit:hover { background: #d5ff82; transform: translateY(-2px); box-shadow: 0 11px 28px rgba(153,204,67,.2); }
.auth-submit:hover svg { transform: translateX(3px); }
.auth-submit:active { transform: translateY(0) scale(.99); }
.auth-submit:focus-visible, .auth-inline-link:focus-visible { outline: 2px solid var(--auth-lime); outline-offset: 3px; }
.auth-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; margin-top: 23px; color: #858d9c; font-size: 11px; }
.auth-card .link-sutil { color: var(--auth-lime); font-size: 11px; font-weight: 700; }
.auth-card .link-sutil span { display: inline-block; margin-left: 2px; transition: transform .2s; }
.auth-card .link-sutil:hover span { transform: translate(2px,-2px); }
.auth-card-bottom { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--auth-line); color: #666e7e; font-size: 10px; }
.auth-bottom-mark { color: var(--auth-lime); font-size: 13px; }
.auth-card-register .auth-heading { margin-bottom: 22px; }
.auth-card-register .auth-card-top { padding-bottom: 22px; }
.auth-card-register .auth-card-bottom { margin-top: 19px; }
@keyframes auth-rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-drift { from { transform: translate3d(0,-10px,0) rotate(-8deg); } to { transform: translate3d(16px,18px,0) rotate(8deg); } }
@keyframes auth-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 12px rgba(199,243,107,.55); } 50% { opacity: .55; box-shadow: 0 0 4px rgba(199,243,107,.25); } }
@media (max-width: 850px) {
  .auth-screen { padding: 28px 20px; }
  .auth-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 35px; }
  .auth-story { min-height: 500px; }
  .auth-story h2 { font-size: clamp(34px, 5vw, 44px); letter-spacing: -2px; }
  .auth-card { padding: 28px 25px 21px; }
}
@media (max-width: 650px) {
  .auth-screen { align-items: center; justify-content: center; padding: 24px 17px; }
  .auth-layout { display: flex; flex-direction: column; gap: 0; width: min(440px, 100%); }
  .auth-story { min-height: auto; width: 100%; padding: 0; }
  .auth-brand-lockup { gap: 9px; font-size: 19px; }
  .auth-brand-lockup .logo-mark { width: 32px; height: 32px; }
  .auth-story-copy { display: none; }
  .auth-story-foot { display: none; }
  .auth-card { margin-top: 25px; padding: 25px 22px 19px; border-radius: 20px; }
  .auth-card-top { padding-bottom: 20px; }
  .auth-heading { margin: 22px 0 24px; }
  .auth-heading h1 { font-size: 26px; }
  .auth-mobile-brand { display: block; margin-bottom: 11px; color: var(--auth-lime); font-size: 9px; font-weight: 700; letter-spacing: 1.7px; }
  .auth-card .campo { min-height: 49px; }
  .auth-card-bottom { margin-top: 20px; }
}
@media (max-width: 360px) {
  .auth-screen { padding: 18px 12px; }
  .auth-card { padding: 22px 17px 17px; }
  .auth-secure { font-size: 8px; }
  .auth-heading h1 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-screen *, .auth-screen *::before, .auth-screen *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* ===== ChatDevs premium UI refresh ===== */
:root { --bg:#0b0d13; --bg-panel:rgba(20,23,33,.88); --border:rgba(150,163,190,.16); --text:#f1f3fa; --text-muted:#9299ad; --accent:#ffb454; --accent-text:#ffbf69; --accent-contrast:#1a1305; --shadow:rgba(0,0,0,.38); --glass:rgba(255,255,255,.035); }
html { min-height:100%; background:var(--bg); }
body { font-family:'DM Sans','Manrope',sans-serif; background:radial-gradient(ellipse at 12% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 36rem),radial-gradient(ellipse at 95% 80%,rgba(113,89,255,.09),transparent 34rem),var(--bg); background-attachment:fixed; letter-spacing:-.012em; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.17; background-image:radial-gradient(rgba(255,255,255,.16) .65px,transparent .65px); background-size:19px 19px; mask-image:linear-gradient(to bottom,black,transparent 78%); }
button,input { font:inherit; } button { transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease,filter .2s ease; } button:active { transform:scale(.975); }
.mdi { font-size:1.22em; line-height:1; vertical-align:-.12em; }
.chat-screen { animation:chatdeves-enter .55s cubic-bezier(.2,.8,.2,1) both; }
.sidebar,.chat-area { backdrop-filter:blur(18px); }
.sidebar { background:linear-gradient(160deg,rgba(25,28,40,.96),rgba(14,16,24,.94)); border-right:1px solid var(--border); }
.sidebar-header { padding:20px 18px; } .sidebar-header strong { font-family:'Manrope',sans-serif;font-size:1.12rem;font-weight:800;letter-spacing:-.035em; }
.btn-link { display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border);border-radius:12px;padding:9px 12px;background:var(--glass);color:var(--text-muted); }
.btn-link:hover { color:var(--text);border-color:color-mix(in srgb,var(--accent) 48%,var(--border));background:color-mix(in srgb,var(--accent) 9%,transparent); }
.action-card { position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;margin:8px 12px;width:calc(100% - 24px);border-radius:16px;text-align:left;font-weight:700;letter-spacing:-.02em; }
.action-card .mdi:first-child { font-size:1.35rem; } .action-card .action-arrow { margin-left:auto;opacity:.65;font-size:1.1rem; }
.btn-primary.action-card { background:linear-gradient(115deg,var(--accent),color-mix(in srgb,var(--accent) 78%,#fff));color:var(--accent-contrast);border:0;box-shadow:0 9px 28px color-mix(in srgb,var(--accent) 17%,transparent); }
.btn-primary.action-card:hover { box-shadow:0 12px 32px color-mix(in srgb,var(--accent) 28%,transparent);filter:saturate(1.08);transform:translateY(-1px); }
.btn-secondary.action-card { margin-top:0;border:1px solid var(--border);background:rgba(255,255,255,.025);color:var(--text); }
.btn-secondary.action-card:hover { border-color:color-mix(in srgb,var(--accent) 40%,var(--border));background:color-mix(in srgb,var(--accent) 6%,transparent); }
.lista-chats { padding:8px 10px 18px; } .lista-chats > * { animation:chatdeves-rise .35s ease both; }
.chat-area { background:rgba(9,11,17,.48); } .chat-header { min-height:66px;display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--border);background:rgba(17,19,28,.72);font-family:'Manrope',sans-serif;font-weight:750; }
.chat-header .mdi { color:var(--accent); } .mensagens { background-color:transparent; }
.input-area { gap:9px;padding:14px;border-top:1px solid var(--border);background:rgba(16,18,26,.86);backdrop-filter:blur(18px); }
.input-area input { min-height:48px;border-radius:15px;border:1px solid var(--border);background:rgba(255,255,255,.045);padding:0 15px;outline:none;color:var(--text);transition:border-color .2s,box-shadow .2s,background .2s; }
.input-area input:focus { border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 11%,transparent);background:rgba(255,255,255,.065); }
.input-area button { border-radius:14px;min-width:44px;min-height:44px; } .input-area button:first-of-type { display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;background:var(--accent);color:var(--accent-contrast);font-weight:750; }
.input-area button:not(:first-of-type) { border:1px solid var(--border);background:var(--glass);color:var(--text-muted); } .input-area button:hover { filter:brightness(1.08); }
.dropdown-menu,.modal-box { border:1px solid var(--border)!important;border-radius:20px!important;background:rgba(20,23,33,.96)!important;box-shadow:0 24px 70px rgba(0,0,0,.48)!important;backdrop-filter:blur(22px);animation:menu-pop .18s cubic-bezier(.2,.8,.2,1) both; }
.dropdown-item { border-radius:10px;margin:4px;transition:background .18s ease,color .18s ease; } .dropdown-item:hover { background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--text); }
.modal-title { font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.03em; } .config-grupo { padding:12px 0;border-bottom:1px solid var(--border); }
.config-label { color:var(--text-muted);font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; }
.swatch-tema { width:31px;height:31px;border:2px solid rgba(255,255,255,.16);box-shadow:inset 0 0 0 2px rgba(0,0,0,.1); }
.swatch-tema.ativo,.swatch-fundo.ativo,.swatch-cor.ativo { outline:2px solid var(--accent);outline-offset:3px;transform:scale(1.05); }
@keyframes chatdeves-enter { from { opacity:0;transform:translateY(7px); } to { opacity:1;transform:translateY(0); } } @keyframes chatdeves-rise { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:translateY(0); } } @keyframes menu-pop { from { opacity:0;transform:translateY(6px) scale(.985); } to { opacity:1;transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important; } }
@media (max-width:680px) { .sidebar-header{padding:15px 14px}.action-card{min-height:50px;border-radius:14px}.input-area{padding:10px;gap:6px}.input-area button:first-of-type span{display:none}.chat-header{min-height:58px;padding:12px 15px} }
[data-theme="midnight"] { --bg:#101426;--bg-panel:#191f36;--border:rgba(143,160,220,.2);--text:#eef1ff;--text-muted:#9ca7c8;--accent:#9c8cff;--accent-text:#b6aaff;--accent-contrast:#17132d;--shadow:rgba(0,0,0,.42); }
[data-theme="ocean"] { --bg:#07171d;--bg-panel:#0e252e;--border:rgba(96,190,204,.2);--text:#e6fbff;--text-muted:#8db4be;--accent:#55d6d0;--accent-text:#72e5df;--accent-contrast:#062021;--shadow:rgba(0,0,0,.4); }
[data-theme="violet"] { --bg:#170e20;--bg-panel:#251633;--border:rgba(200,135,255,.2);--text:#fff0ff;--text-muted:#bda5c9;--accent:#d18bff;--accent-text:#dda5ff;--accent-contrast:#271033;--shadow:rgba(0,0,0,.42); }
[data-theme="forest"] { --bg:#0b1712;--bg-panel:#14241b;--border:rgba(113,201,145,.2);--text:#edfff2;--text-muted:#9ab9a4;--accent:#79dc9c;--accent-text:#8ce7ad;--accent-contrast:#092015;--shadow:rgba(0,0,0,.42); }
.swatch-dark{background:linear-gradient(135deg,#252a38 50%,#10131b 50%)}.swatch-light{background:linear-gradient(135deg,#fff 50%,#dfe4ec 50%)}.swatch-amoled{background:linear-gradient(135deg,#000 50%,#181818 50%)}.swatch-midnight{background:linear-gradient(135deg,#9c8cff 0 32%,#191f36 32%)}.swatch-ocean{background:linear-gradient(135deg,#55d6d0 0 32%,#0e252e 32%)}.swatch-violet{background:linear-gradient(135deg,#d18bff 0 32%,#251633 32%)}.swatch-forest{background:linear-gradient(135deg,#79dc9c 0 32%,#14241b 32%)}

/* ---------- Chat premium: bolhas, wallpaper e painel de aparência ---------- */
#mensagens { position: relative; isolation: isolate; background: transparent; }
#mensagens::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 12% 8%, rgba(139,92,246,.12), transparent 42%), radial-gradient(ellipse at 88% 78%, rgba(255,180,84,.09), transparent 42%); opacity: .85; }
#mensagens.com-wallpaper::before { background-image: linear-gradient(rgba(10,12,18,.43),rgba(10,12,18,.58)),var(--chat-wallpaper-image); background-size: cover; background-position: center; opacity: 1; }
#mensagens .msg { background-color: color-mix(in srgb, var(--bg-panel) calc(100% - (var(--chat-bubble-opacity, 92%))), transparent); border-color: color-mix(in srgb, var(--chat-bubble-color, var(--accent)) 30%, var(--border)); border-radius: 18px 18px 18px 6px; padding: 10px 13px; box-shadow: 0 7px 22px rgba(0,0,0,.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: chatBubbleIn .22s ease both; }
#mensagens .msg.minha { background-color: color-mix(in srgb, var(--chat-bubble-color, var(--accent)) calc(var(--chat-bubble-opacity, 92%)), transparent); color: var(--text); border-color: color-mix(in srgb, var(--chat-bubble-color, var(--accent)) 70%, transparent); border-radius: 18px 18px 6px 18px; }
#mensagens .msg[data-bubble-style="compacto"], #mensagens[data-bubble-style="compacto"] .msg { border-radius: 11px; padding: 7px 10px; box-shadow: none; }
#mensagens[data-bubble-style="vidro"] .msg { background-color: rgba(255,255,255,color-mix(in srgb, white 13%, transparent)); border-color: rgba(255,255,255,.24); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
#mensagens[data-bubble-style="vidro"] .msg.minha { background-color: color-mix(in srgb, var(--chat-bubble-color,#ffb454) var(--chat-bubble-opacity,92%), transparent); }
#mensagens .msg .conteudo { line-height: 1.48; font-size: 14px; }
.chat-header .dropdown-wrap { position: relative; }
.dropdown-menu { z-index: 80; min-width: 220px; padding: 7px; border-radius: 16px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg-panel) 92%, transparent); box-shadow: 0 18px 55px rgba(0,0,0,.32); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 11px 12px; }
.dropdown-item:hover { background: var(--bg); }
.chat-appearance-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,6,12,.68); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: appearanceFade .18s ease both; }
.chat-appearance-panel { width: min(100%, 480px); max-height: min(88dvh, 760px); overflow: auto; border: 1px solid var(--border); border-radius: 24px; color: var(--text); background: var(--bg-panel); box-shadow: 0 28px 90px rgba(0,0,0,.45); animation: appearanceRise .24s cubic-bezier(.2,.75,.25,1) both; }
.appearance-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:22px 22px 17px; border-bottom:1px solid var(--border); background:radial-gradient(ellipse at top right,rgba(255,180,84,.12),transparent 65%); }
.appearance-eyebrow { font-size:10px; letter-spacing:.16em; font-weight:800; color:var(--accent-text); }
.appearance-head h2 { margin:7px 0 5px; font-size:clamp(19px,5vw,24px); letter-spacing:-.04em; }
.appearance-head p { margin:0; color:var(--text-muted); font-size:13px; line-height:1.5; }
.appearance-close { flex:0 0 36px; width:36px;height:36px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font-size:24px;cursor:pointer; }
.appearance-content { padding:20px 22px; }
.appearance-label { display:block; margin:0 0 11px; color:var(--text); font-size:13px; font-weight:700; }
.appearance-color-row { display:flex; align-items:center; gap:14px; margin-bottom:23px; }
#bubble-color { width:48px;height:44px;padding:4px;border:1px solid var(--border);border-radius:13px;background:var(--bg);cursor:pointer; }
.appearance-swatches { display:flex; flex-wrap:wrap; gap:9px; }
.appearance-swatch { width:27px;height:27px;border-radius:50%;background:var(--swatch);border:2px solid rgba(255,255,255,.7);box-shadow:0 0 0 1px var(--border);cursor:pointer;transition:transform .16s ease; }
.appearance-swatch:active { transform:scale(.9); }
.appearance-range-head { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.appearance-range-head output { font-size:12px;color:var(--accent-text);font-weight:800; }
.appearance-range { width:100%; accent-color:var(--accent); margin:0 0 24px; }
.appearance-styles { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:24px; }
.appearance-style { min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--bg);color:var(--text);text-align:left;cursor:pointer; }
.appearance-style.selected { border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 7px 20px rgba(0,0,0,.08); }
.appearance-style b { font-size:12px; }.appearance-style small { font-size:10px;color:var(--text-muted); }
.style-preview { display:block;width:100%;height:34px;margin-bottom:5px;border-radius:9px;background:linear-gradient(120deg,var(--chat-bubble-color,#ffb454),rgba(139,92,246,.5));border:1px solid var(--border); }
.style-compact { border-radius:4px; }.style-glass { background:linear-gradient(120deg,rgba(255,255,255,.4),rgba(255,255,255,.04));backdrop-filter:blur(8px); }
.wallpaper-actions { display:flex;flex-direction:column;gap:9px; }
.appearance-upload { width:100%;display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed var(--border);border-radius:15px;background:var(--bg);color:var(--text);text-align:left;cursor:pointer; }
.appearance-upload > .mdi:first-child { font-size:24px;color:var(--accent-text); }.appearance-upload span { display:flex;flex:1;flex-direction:column;gap:3px; }.appearance-upload b { font-size:13px; }.appearance-upload small { font-size:11px;color:var(--text-muted); }
.appearance-remove { display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border:1px solid var(--border);border-radius:12px;background:transparent;color:var(--text-muted);font-size:12px;cursor:pointer; }.appearance-remove:disabled { opacity:.4;cursor:not-allowed; }
.appearance-footer { position:sticky;bottom:0;display:flex;justify-content:space-between;gap:10px;padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--bg-panel); }
.appearance-reset,.appearance-done { min-height:42px;padding:0 15px;border-radius:12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer; }.appearance-reset { border:1px solid var(--border);background:transparent;color:var(--text-muted); }.appearance-done { border:0;background:var(--accent);color:#17120b; }
@keyframes chatBubbleIn { from { opacity:0;transform:translateY(5px) scale(.99); } to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes appearanceFade { from { opacity:0; } to { opacity:1; } } @keyframes appearanceRise { from { opacity:0;transform:translateY(12px) scale(.985); } to { opacity:1;transform:translateY(0) scale(1); } }
@media (max-width:600px) { .chat-appearance-backdrop { align-items:flex-end;padding:0; } .chat-appearance-panel { width:100%;max-height:90dvh;border-radius:24px 24px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom); } .appearance-head { padding:20px 18px 15px; }.appearance-content { padding:18px; }.appearance-footer { padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }.appearance-reset,.appearance-done { flex:1; } #mensagens .msg { max-width:84%; } }
@media (prefers-reduced-motion: reduce) { #mensagens .msg,.chat-appearance-backdrop,.chat-appearance-panel { animation:none!important; } }

/* Chat header/composer refinement v3 */
.chat-header{display:flex;justify-content:flex-start;gap:12px;min-height:76px;padding:10px 14px;position:relative;z-index:120;background:rgba(15,17,25,.94);overflow:visible}
.chat-back-btn{width:40px;height:42px;flex:0 0 40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.035);color:var(--text);font-size:23px;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}
.chat-back-btn:active{transform:scale(.94)}.chat-back-btn:hover{border-color:var(--accent);background:rgba(255,180,84,.08)}
.chat-header-info{flex:1;min-width:0;justify-content:flex-start;align-items:center;gap:11px;text-align:left}
.chat-header-info .avatar-circle{width:42px;height:42px;flex:0 0 42px;font-size:15px}
.chat-header-contact-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:0}
#chat-header-nome{display:block;max-width:min(58vw,420px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:1.25;font-weight:800;color:var(--text)}
#chat-header-status{display:block;max-width:min(62vw,460px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.3;font-weight:500;color:var(--text-muted)}
#chat-header-status.is-online{color:#4ade80}#chat-header-status.is-online:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#4ade80;margin:0 6px 1px 0;box-shadow:0 0 0 3px rgba(74,222,128,.12)}
.chat-header .dropdown-wrap{margin-left:auto;flex:0 0 42px;display:flex;justify-content:flex-end;z-index:150}
.chat-options-trigger{width:42px;height:42px;display:grid;place-items:center;border:1px solid transparent;border-radius:13px;background:transparent;color:var(--text-muted);font-size:23px;cursor:pointer}
.chat-options-trigger:hover,.chat-options-trigger[aria-expanded="true"]{background:var(--glass);border-color:var(--border);color:var(--text)}
.chat-header .dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:300;min-width:230px;width:max-content;max-width:min(300px,calc(100vw - 28px));padding:8px;border-radius:18px!important;overflow:visible}
#menu-chat-atual .dropdown-item{display:flex;align-items:center;gap:11px;min-height:46px;padding:11px 13px;border-radius:12px;font-size:13px;font-weight:650;line-height:1.35;white-space:normal;cursor:pointer}
#menu-chat-atual .dropdown-item .mdi{flex:0 0 20px;width:20px;font-size:20px;text-align:center;color:var(--accent-text)}
#menu-chat-atual .dropdown-item:hover{background:rgba(255,180,84,.1)}
.input-area{display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));}
.input-area #input-texto{min-width:0;width:0;flex:1;height:48px;min-height:48px;border-radius:16px;padding:0 15px;font-size:14px;line-height:1.35}
.input-area button,.input-area button:first-of-type,.input-area button:not(:first-of-type){width:48px;min-width:48px;height:48px;min-height:48px;flex:0 0 48px;display:grid;place-items:center;padding:0;border:1px solid var(--border);border-radius:15px;background:var(--glass);color:var(--text-muted);box-shadow:none}
.input-area button:last-of-type{background:var(--accent);border-color:transparent;color:var(--accent-contrast)}
.input-area button:hover{border-color:var(--accent);color:var(--text);filter:none;transform:translateY(-1px)}
.input-area button:last-of-type:hover{background:#ffc478;color:#17120b}
.input-area button svg,.input-area button .mdi{display:block;width:22px;height:22px;font-size:22px;line-height:1}
@media(max-width:600px){.chat-header{min-height:72px;padding:9px 12px;gap:9px}.chat-back-btn{width:38px;height:40px;flex-basis:38px;border-radius:12px}.chat-header-info{gap:9px}.chat-header-info .avatar-circle{width:38px;height:38px;flex-basis:38px}.chat-header .dropdown-wrap{flex-basis:38px}.chat-options-trigger{width:38px;height:40px}.chat-header .dropdown-menu{right:0;max-width:calc(100vw - 24px)}.input-area{gap:6px;padding:9px 9px calc(9px + env(safe-area-inset-bottom))}.input-area #input-texto{height:48px;min-height:48px;padding:0 12px;font-size:13px}.input-area button,.input-area button:first-of-type,.input-area button:not(:first-of-type){width:43px;min-width:43px;height:46px;min-height:46px;flex-basis:43px;border-radius:14px}.input-area button svg,.input-area button .mdi{font-size:21px;width:21px;height:21px}#chat-header-nome{max-width:53vw}#chat-header-status{max-width:57vw}}
@media(max-width:360px){.input-area{gap:5px;padding-inline:6px}.input-area button,.input-area button:first-of-type,.input-area button:not(:first-of-type){width:38px;min-width:38px;flex-basis:38px}.input-area #input-texto{padding-inline:10px}}


/* Chat polish v4: menu legível e bolhas com respiro lateral no mobile */
#menu-chat-atual { box-sizing:border-box; }
#menu-chat-atual .dropdown-item {
  display:grid !important;
  grid-template-columns:22px minmax(0,1fr);
  align-items:center !important;
  justify-content:start !important;
  text-align:left !important;
  gap:10px !important;
  width:100%;
  min-width:0;
  white-space:normal !important;
  overflow-wrap:anywhere;
  line-height:1.35 !important;
}
#menu-chat-atual .dropdown-item .mdi {
  display:inline-flex;align-items:center;justify-content:center;
  width:22px !important;min-width:22px;flex:none !important;
  margin:0 !important;line-height:1;font-size:20px !important;
}
#menu-chat-atual .dropdown-item::after { content:none !important; }
#mensagens { padding-left:12px !important; padding-right:12px !important; }
#mensagens .msg { max-width:min(80%, 620px); margin-left:5px; margin-right:5px; box-sizing:border-box; }
#mensagens .msg.minha { margin-left:auto; margin-right:5px; }
@media(max-width:600px) {
  #menu-chat-atual { min-width:0; width:min(290px,calc(100vw - 28px)); }
  #menu-chat-atual .dropdown-item { min-height:48px; padding:12px 13px !important; font-size:14px !important; }
  #mensagens { padding-left:10px !important; padding-right:10px !important; }
  #mensagens .msg { max-width:82%; margin-left:4px; margin-right:4px; }
  #mensagens .msg.minha { margin-left:auto; margin-right:4px; }
}

/* Correção definitiva do menu: ícone e rótulo ficam em colunas estáveis. */
#menu-chat-atual .dropdown-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: left !important;
}
#menu-chat-atual .dropdown-item > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
#menu-chat-atual .dropdown-item .mdi {
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
}
#mensagens .msg .conteudo { font-size: var(--chat-bubble-font-size, 14px) !important; }
@media (max-width: 600px) {
  #menu-chat-atual { width: min(320px, calc(100vw - 24px)) !important; }
  #menu-chat-atual .dropdown-item { padding: 12px 14px !important; font-size: 14px !important; }
}

/* Menu de três pontos mais compacto, sem alterar o restante do chat. */
#menu-chat-atual.dropdown-menu {
  padding: 6px !important;
  gap: 2px;
}
#menu-chat-atual .dropdown-item {
  min-height: 40px !important;
  height: auto;
  padding: 8px 11px !important;
  gap: 9px !important;
  line-height: 1.25 !important;
  font-size: 13px !important;
  border-radius: 10px !important;
}
#menu-chat-atual .dropdown-item .mdi {
  font-size: 18px !important;
  line-height: 1 !important;
}
@media (max-width: 600px) {
  #menu-chat-atual.dropdown-menu {
    padding: 5px !important;
  }
  #menu-chat-atual .dropdown-item {
    min-height: 38px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
  }
}

/* Ajuste final: limitar a largura do menu de opções da conversa. */
.chat-header .dropdown-menu#menu-chat-atual,
#menu-chat-atual.dropdown-menu {
  box-sizing: border-box !important;
  width: 300px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
}
#menu-chat-atual.dropdown-menu > .dropdown-item {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 600px) {
  .chat-header .dropdown-menu#menu-chat-atual,
  #menu-chat-atual.dropdown-menu {
    width: min(290px, calc(100vw - 24px)) !important;
  }
}


/* Ajuste definitivo: menu dos três pontos realmente estreito no mobile. */
.chat-header .dropdown-wrap > .dropdown-menu,
.chat-header .dropdown-menu#menu-chat-atual,
.dropdown-wrap #menu-chat-atual.dropdown-menu,
#menu-chat-atual.dropdown-menu {
  box-sizing: border-box !important;
  width: 224px !important;
  min-width: 224px !important;
  max-width: min(224px, calc(100vw - 24px)) !important;
}
#menu-chat-atual.dropdown-menu > .dropdown-item {
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 360px) {
  .chat-header .dropdown-wrap > .dropdown-menu,
  .chat-header .dropdown-menu#menu-chat-atual,
  .dropdown-wrap #menu-chat-atual.dropdown-menu,
  #menu-chat-atual.dropdown-menu {
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }
}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700&display=swap');

:root {
  --bg: #0d0f14;
  --bg-panel: #161922;
  --border: #2a2f3a;
  --text: #e8e6e1;
  --text-muted: #8b8f9c;
  --accent: #ffb454;
  --accent-text: #ffb454;
  --accent-contrast: #de5df7;
  --accent-dim: #c98a3a;
  --error: #ff6b6b;
  --shadow: rgba(0, 0, 0, 0.35);
}

[data-theme="amoled"] {
  --bg: #000000;
  --bg-panel: #121212;
  --border: #262626;
  --text: #f5f5f5;
  --text-muted: #9a9a9a;
  --accent: #ffb454;
  --accent-text: #ffb454;
  --accent-contrast: #1a1305;
  --accent-dim: #c98a3a;
  --error: #ff6b6b;
  --shadow: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] {
  --bg: #eef0f4;
  --bg-panel: #ffffff;
  --border: #dde1e8;
  --text: #1a1d24;
  --text-muted: #666c78;
  --accent: #ffb454;
  --accent-text: #9a5f16;
  --accent-contrast: #1a1305;
  --accent-dim: #c98a3a;
  --error: #c22f2f;
  --shadow: rgba(30, 32, 40, 0.12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', Arial, sans-serif;
  transition: background-color .15s ease, color .15s ease;
}

.wordmark {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* ---------- Splash ---------- */
#splash-screen .logo-mark { width: 64px; height: 64px; margin-bottom: 20px; }
#splash-screen .wordmark { font-size: 28px; color: var(--text); margin: 0 0 6px; }
#splash-screen .welcome-text { color: var(--text-muted); font-size: 15px; margin: 0 0 28px; }
.progress-track {
  width: 220px;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  animation: preencher 1.6s ease-out forwards;
}
@keyframes preencher { to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .progress-fill { animation: none; width: 100%; }
}

/* ---------- Login / Cadastro ---------- */
.auth-panel {
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.auth-panel .logo-mark { width: 40px; height: 40px; margin-bottom: 14px; }
.auth-panel h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 28px;
  color: var(--text);
}
.auth-panel form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.campo {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.campo::placeholder { color: var(--text-muted); }
.campo:focus {
  outline: none;
  border-color: var(--accent);
}

.btn-ok {
  width: 100%;
  padding: 12px;
  margin-top: 4px;
  background: var(--accent);
  color: #1a1305;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.btn-ok:hover { background: #ffc478; }
.btn-ok:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.erro-msg {
  min-height: 16px;
  color: var(--error);
  font-size: 13px;
  text-align: center;
}

.auth-links {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}
.link-sutil {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}
.link-sutil:hover { color: var(--accent); }
.link-sutil:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.oculto { display: none !important; }

/* =========================================================
   HOME / TELA PRINCIPAL (depois do login)
   ========================================================= */
.app-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
}

/* ---------- Topo ---------- */
.topbar {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
}
.topbar-brand { display: flex; align-items: center; gap: 10px; }
.topbar-brand img { width: 24px; height: 24px; }
.topbar-brand span {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 15px;
}
.topbar-right { display: flex; align-items: center; gap: 10px; }

.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-text);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-dots-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
}
.menu-dots-btn:hover { background: var(--bg-panel); color: var(--text); }
.menu-dots-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.badge-flutuante {
  position: absolute;
  top: 2px;
  right: 2px;
}
#btn-pedidos-grupo svg { width: 18px; height: 18px; display: block; }
#btn-inicio-mobile svg { width: 18px; height: 18px; display: block; }

/* ---------- Utilitário: elemento só existe/aparece no layout mobile ---------- */
.mobile-only { display: none; }

/* ---------- Dropdowns ---------- */
.dropdown-wrap { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  min-width: 210px;
  max-width: 260px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 30px var(--shadow);
  z-index: 40;
}
.search-row .dropdown-menu-busca { left: 0; right: auto; }
.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 13px;
}
.dropdown-clicavel { cursor: pointer; }
.dropdown-clicavel:hover { background: var(--bg); }

.switch {
  width: 34px;
  height: 19px;
  border-radius: 20px;
  background: var(--border);
  border: none;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.switch::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--text-muted);
  top: 2px;
  left: 2px;
  transition: transform .15s ease, background-color .15s ease;
}
.switch.ativo { background: var(--accent-dim); }
.switch.ativo::after { transform: translateX(15px); background: var(--accent-contrast); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Corpo (sidebar + main) ---------- */
.app-body { flex: 1; display: flex; min-height: 0; }

.app-sidebar {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 4px 0 12px;
}
.search-row input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--text);
  padding: 10px 0;
  font-size: 13px;
  font-family: inherit;
}
.search-row input::placeholder { color: var(--text-muted); }
.search-row input:focus { outline: none; }
.search-options-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  padding: 6px 8px;
  cursor: pointer;
  font-family: inherit;
}
.search-options-btn:hover { color: var(--text); }

.sidebar-actions { display: flex; flex-direction: column; gap: 8px; }
.btn-compacto { padding: 9px 12px; font-size: 13px; width: auto; }

.btn-outline {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent-text); }
.btn-outline:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.lista-chats { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.item-chat { padding: 10px; border-radius: 8px; cursor: pointer; }
.item-chat:hover, .item-chat.ativo { background: var(--bg-panel); }
.item-chat .nome { font-weight: 600; font-size: 13px; color: var(--text); }
.item-chat .preview {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.item-chat-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.badge-nao-lidas {
  flex-shrink: 0;
  background: #2196f3;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.empty-conversas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 6px;
}
.empty-conversas p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); }

/* ---------- Área principal ---------- */
.app-main { flex: 1; overflow-y: auto; padding: 36px 40px; }

.home-inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; }
.home-section { padding: 26px 0; }
.home-section:first-child { padding-top: 0; }
.home-section + .home-section { border-top: 1px solid var(--border); }
.home-section h2 {
  font-family: 'Sora', 'IBM Plex Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.texto-vazio { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin: 0; }

.ranking-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.ranking-pos { font-family: 'IBM Plex Mono', monospace; color: var(--text-muted); font-size: 12px; width: 14px; }
.ranking-nome { flex: 1; font-size: 13px; }
.ranking-valor { font-size: 12px; color: var(--text-muted); }

.grupo-destaque {
  border-left: 2px solid var(--accent);
  background: var(--bg-panel);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.grupo-destaque strong { font-size: 14px; }
.grupo-destaque span { font-size: 12px; color: var(--text-muted); }

.suporte-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.suporte-row p { margin: 0; font-size: 13px; color: var(--text-muted); max-width: 360px; }

.app-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}
.app-footer a { color: var(--text-muted); text-decoration: none; }
.app-footer a:hover { color: var(--accent-text); }

/* ---------- Conversa aberta ---------- */
.chat-view { display: flex; flex-direction: column; height: 100%; }
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.chat-header .btn-link { padding: 0; font-size: 13px; font-weight: 500; }
.btn-link { background: none; border: none; color: var(--text-muted); cursor: pointer; font-family: inherit; }
.btn-link:hover { color: var(--accent-text); }

.mensagens { flex: 1; padding: 18px 4px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }

.msg {
  max-width: 60%;
  width: fit-content;
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  position: relative;
}
.msg.minha { align-self: flex-end; border-color: var(--accent-dim); }
.msg .quote-box {
  cursor: pointer;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 5px;
}
.msg .quote-box .quote-nome { font-size: 12px; font-weight: 700; color: var(--accent-text); }
.msg .quote-box .quote-snippet {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg .reply-ref { font-size: 12px; background: var(--bg); padding: 4px 6px; border-radius: 4px; margin-bottom: 4px; color: var(--text-muted); }
.msg .conteudo { white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.msg .hora { font-size: 10px; color: var(--text-muted); text-align: right; margin-top: 2px; }
.msg .apagada { font-style: italic; color: var(--text-muted); }
.btn-acessar-link {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--accent-dim);
  background: rgba(255, 180, 84, 0.12);
  color: var(--accent-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-acessar-link:hover { background: rgba(255, 180, 84, 0.22); }
.btn-acessar-link--pendente {
  border-color: var(--error);
  background: rgba(255, 107, 107, 0.1);
  color: var(--error);
}
.btn-acessar-link--pendente:hover { background: rgba(255, 107, 107, 0.18); }
.msg .acoes { display: none; gap: 8px; font-size: 11px; margin-top: 4px; }
.msg:hover .acoes { display: flex; }
.msg .acoes span { cursor: pointer; color: var(--text-muted); }
.msg .acoes span:hover { color: var(--accent-text); }

/* ---------- Deslizar mensagem pra responder (tipo o Zap) ---------- */
.msg { position: relative; touch-action: pan-y; }
.msg.arrastando { transition: none; }
.msg:not(.arrastando) { transition: transform .18s ease; }
.msg .swipe-icone-responder {
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
}

/* Botão de responder sempre visível em áudio/vídeo/imagem/arquivo,
   já que o toque nessas mensagens é "roubado" pelo player/link/anexo. */
.msg .btn-responder-rapido {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity .15s ease, background .15s ease;
}
.msg .btn-responder-rapido:hover { opacity: 1; background: var(--accent); color: var(--accent-contrast); }
.msg.minha .btn-responder-rapido { right: auto; left: 4px; }
.msg-remetente {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.msg-remetente .avatar-circle--sm { width: 18px; height: 18px; font-size: 10px; flex-shrink: 0; }
.msg-remetente-nome { font-size: 12px; font-weight: 700; color: var(--accent-text); }
.msg-remetente-saiu {
  font-size: 10px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.reply-preview {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.reply-preview-accent { width: 3px; align-self: stretch; border-radius: 99px; background: var(--accent); flex-shrink: 0; }
.reply-preview-body { flex: 1; min-width: 0; }
.reply-preview-nome { font-size: 12px; font-weight: 700; color: var(--accent-text); }
.reply-preview-snippet { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-preview button { background: none; border: none; color: var(--text-muted); cursor: pointer; flex-shrink: 0; }

.input-area { display: flex; padding: 12px 4px; gap: 8px; position: relative; }
.input-area input {
  flex: 1;
  padding: 11px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.input-area input::placeholder { color: var(--text-muted); }
.input-area input:focus { outline: none; border-color: var(--accent); }
.input-area button {
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  flex-shrink: 0;
}
.input-area button:hover { background: #ffc478; }

/* ---------- Sugestão de @menção (tipo Zap), digitada dentro do grupo ---------- */
.mencao-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 6px;
  max-height: 180px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  z-index: 5;
}
.mencao-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.mencao-item:hover { background: var(--bg); }
.mencao-item-todos {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg .mencao { color: var(--accent-text); font-weight: 700; }
.msg .mencao-eu { background: rgba(255, 180, 84, .28); border-radius: 4px; padding: 0 2px; }

/* ---------- Barrinha de gravação (tipo Zap): cancelar / tempo / enviar ---------- */
.barra-gravacao {
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
}
.barra-gravacao-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 13px;
}
.barra-gravacao-pulso {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--error);
  animation: zapzinho-pulso-gravacao 1.1s ease-in-out infinite;
}
@keyframes zapzinho-pulso-gravacao {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.75); }
}
#barra-gravacao-timer { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.btn-cancelar-gravacao, .btn-enviar-gravacao {
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-cancelar-gravacao svg, .btn-enviar-gravacao svg { width: 18px; height: 18px; }
.btn-cancelar-gravacao { background: var(--bg-panel); color: var(--error); border: 1px solid var(--border); }
.btn-cancelar-gravacao:hover { border-color: var(--error); }
.btn-enviar-gravacao { background: var(--accent); color: var(--accent-contrast); }
.btn-enviar-gravacao:hover { background: #ffc478; }

/* ---------- Modais (substituem os prompt() feios) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px var(--shadow);
}
.modal-title {
  font-family: 'Sora', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 16px;
}
.modal-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.modal-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
  resize: vertical;
}
.modal-input:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.modal-texto { font-size: 13px; color: var(--text-muted); line-height: 1.4; margin: 0 0 4px; }

.msg-sistema {
  align-self: center;
  max-width: 80%;
  margin: 6px 0;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
  text-align: center;
}

.tag-papel {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.tag-dono { background: #f5a623; color: #3a2900; }
.tag-admin { background: #4c8dff; color: #fff; }
.config-grupo-botoes { display: flex; gap: 6px; flex-shrink: 0; }
.saiu-quando { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.modal-erro { color: var(--error); font-size: 12px; margin: -8px 0 12px; }

/* ---------- Modal de Configurações do grupo (abas Membros / Convite) ---------- */
.modal-box--grupo { max-width: 420px; }
.config-grupo-acoes-topo {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.config-grupo-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.config-grupo-tab {
  border: none;
  background: none;
  color: var(--text-muted);
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 4px 10px;
  margin-right: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 6px;
}
.config-grupo-tab:hover { color: var(--text); }
.config-grupo-tab.ativa { color: var(--accent); border-bottom-color: var(--accent); }
.config-grupo-badge {
  background: var(--accent);
  color: #3a2900;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.config-grupo-corpo { max-height: 55vh; overflow-y: auto; }
.config-grupo-subtitulo-pedidos { margin-top: 16px; }

/* ---------- Permissões do grupo (quem pode mandar mensagem) ---------- */
.permissoes-lista { display: flex; flex-direction: column; gap: 8px; }
.permissao-opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.permissao-opcao:hover { border-color: var(--accent); }
.permissao-opcao--ativa { border-color: var(--accent); background: var(--bg-panel); }
.permissao-opcao input { margin-top: 3px; flex-shrink: 0; }
.permissao-opcao-texto { display: flex; flex-direction: column; gap: 2px; }
.permissao-opcao-texto strong { font-size: 13px; }
.permissao-opcao-texto small { font-size: 11px; color: var(--text-muted); }
.aviso-removido {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px;
  border-top: 1px solid var(--border);
}

/* ---------- Link de convite (configurações do grupo) ---------- */
.modal-subtitulo {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px;
}
.convite-link-row { display: flex; gap: 6px; margin-bottom: 10px; }
.convite-link-row .modal-input { margin-top: 0; font-size: 12px; }
.modal-label-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.modal-label-checkbox input { flex-shrink: 0; }
.tag-removido {
  font-size: 10px;
  font-style: italic;
  color: var(--text-muted);
  text-transform: none;
}
.tag-voce {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ---------- Rodapé com ícones ---------- */
.footer-social { display: flex; align-items: center; gap: 10px; }
.footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--text-muted);
  transition: color .15s ease, background-color .15s ease;
}
.footer-icon:hover { color: var(--accent-text); background: var(--bg-panel); }
.footer-icon svg { width: 16px; height: 16px; }

/* ---------- Avatar no cabeçalho da conversa ---------- */
.avatar-circle--sm { width: 28px; height: 28px; font-size: 12px; }
.avatar-circle--lg { width: 64px; height: 64px; font-size: 24px; }

.chat-header-info { cursor: pointer; }
.chat-header-info:hover { opacity: 0.85; }

.info-grupo-topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.info-grupo-nome { margin: 0; text-align: center; }
.info-grupo-acoes-foto {
  display: flex;
  gap: 14px;
  margin-top: -4px;
}
.info-grupo-descricao {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  margin: 0 0 4px;
}
.info-grupo-descricao--vazia { color: var(--text-muted); font-style: italic; }
.info-grupo-descricao a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.info-grupo-criacao {
  font-size: 11px;
  color: var(--text-muted);
  margin: 10px 0 0;
}
.chat-header-info { display: flex; align-items: center; gap: 10px; }

/* ---------- Clicar na resposta leva até a mensagem original ---------- */
.reply-ref { cursor: pointer; }
.reply-ref:hover { text-decoration: underline; }
.msg-destaque { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Imagem e arquivo dentro da mensagem ---------- */
.msg-imagem { max-width: 220px; border-radius: 8px; display: block; cursor: pointer; }
.msg-arquivo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-text);
  text-decoration: none;
  font-size: 13px;
}
.msg-arquivo:hover { text-decoration: underline; }

/* ---------- Ícones de enviar / gravar / anexar ---------- */
.input-area button svg { width: 18px; height: 18px; }
.input-area button.gravando { background: var(--error); }
#btn-anexo, #btn-audio {
  background: var(--bg-panel);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
#btn-anexo:hover, #btn-audio:hover { color: var(--accent-text); border-color: var(--accent); }

/* ---------- Responsivo ---------- */

/* Telas médias (tablets, janelas pequenas de PC): mantém sidebar + main
   lado a lado, só encolhe um pouco pra caber melhor. */
@media (max-width: 1024px) and (min-width: 761px) {
  .app-sidebar { width: 250px; }
  .app-main { padding: 30px 26px; }
}

/* Celular: sidebar (lista de conversas) e área principal (home ou conversa
   aberta) viram duas telas cheias em vez de duas colunas — não cabem lado a
   lado numa tela estreita. O JS alterna qual das duas aparece adicionando/
   removendo a classe "mostrar-main" no #chat-screen (ver app.js). */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .screen { min-height: 100dvh; }
  .app-shell { height: 100dvh; }
  .auth-panel { width: 100%; max-width: 320px; }
  .topbar { padding: 0 14px; }
  .app-body { flex-direction: column; }

  .app-sidebar {
    width: 100%;
    height: 100%;
    max-height: none;
    border-right: none;
    border-bottom: none;
  }
  .app-main { display: none; height: 100%; padding: 22px 16px; }

  #chat-screen.mobile-home .app-sidebar { display: none; }
  #chat-screen.mobile-home .app-main { display: block; }

  #chat-screen:not(.mobile-home):not(.mostrar-main) .app-sidebar { display: flex; }
  #chat-screen:not(.mobile-home):not(.mostrar-main) .app-main { display: none; }

  #chat-screen.mostrar-main .app-sidebar { display: none; }

  /* Dentro de um grupo/PV: a conversa ocupa toda a altura disponível.
     O topo e o rodapé deixam de reservar espaço físico. */
  #chat-screen.mostrar-main .topbar,
  #chat-screen.mostrar-main .app-footer {
    display: none !important;
  }

  #chat-screen.mostrar-main .app-body {
    flex: 1;
    min-height: 0;
    height: 100%;
  }

  #chat-screen.mostrar-main .app-main {
    display: block;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  #chat-screen.mostrar-main #chat-view {
    height: 100%;
    min-height: 0;
  }

  #chat-screen.mostrar-main .search-options-btn svg { width: 18px; height: 18px; }

  .mobile-only { display: flex; }
  .search-options-btn.mobile-only svg { width: 17px; height: 17px; display: block; }

  .btn-ir-conversas-mobile {
    position: fixed;
    right: 18px;
    bottom: 72px;
    z-index: 50;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    box-shadow: 0 8px 24px var(--shadow);
    cursor: pointer;
  }
  .btn-ir-conversas-mobile:hover { filter: brightness(1.05); }
  .btn-ir-conversas-mobile:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
  .btn-ir-conversas-mobile svg { width: 22px; height: 22px; }

  .msg { max-width: 82%; }
  .suporte-row { flex-direction: column; align-items: flex-start; }
  .app-footer {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 14px 16px;
  }
}

/* =========================================================
   CONFIGURAÇÕES (tema, fundo, fonte, negrito, cor das msgs)
   ========================================================= */

/* ---------- Fundos de conversa (só CSS, não guarda foto nenhuma) ---------- */
[data-fundo="pontos"] #mensagens {
  background-image: radial-gradient(var(--border) 1.2px, transparent 1.2px);
  background-size: 16px 16px;
}
[data-fundo="diagonal"] #mensagens {
  background-image: repeating-linear-gradient(45deg, var(--bg-panel) 0 10px, transparent 10px 20px);
}
[data-fundo="bolhas"] #mensagens {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 180, 84, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 82% 75%, rgba(201, 138, 58, 0.14) 0%, transparent 45%);
}

/* ---------- Fonte alternativa (site todo) ---------- */
[data-fonte="sistema"] body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Negrito geral ---------- */
[data-negrito="1"] body,
[data-negrito="1"] .msg .conteudo,
[data-negrito="1"] .item-chat .nome,
[data-negrito="1"] .ranking-nome,
[data-negrito="1"] .texto-vazio,
[data-negrito="1"] .modal-label,
[data-negrito="1"] .grupo-destaque span {
  font-weight: 600;
}

/* ---------- Cor das mensagens enviadas ---------- */
[data-cor-enviada="azul"] .msg.minha { border-color: #4c8dff; }
[data-cor-enviada="verde"] .msg.minha { border-color: #3ecf8e; }

/* ---------- Painel de configurações ---------- */
.modal-config { max-width: 420px; max-height: 85vh; overflow-y: auto; }
.config-grupo { margin-bottom: 18px; }
.config-grupo:last-of-type { margin-bottom: 0; }
.config-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.config-linha { display: flex; align-items: center; justify-content: space-between; }
.config-linha .config-label { margin-bottom: 0; }

.swatches { display: flex; gap: 10px; flex-wrap: wrap; }

.swatch-tema {
  width: 38px; height: 38px; border-radius: 9px;
  border: 2px solid var(--border); cursor: pointer; padding: 0;
}
.swatch-tema.ativo { border-color: var(--accent); }
.swatch-dark { background: #0d0f14; }
.swatch-light { background: #eef0f4; }
.swatch-amoled { background: #000000; }

.swatch-fundo {
  width: 52px; height: 38px; border-radius: 9px;
  border: 2px solid var(--border); cursor: pointer; padding: 0;
  background: var(--bg-panel);
}
.swatch-fundo.ativo { border-color: var(--accent); }
.fundo-pontos { background-image: radial-gradient(#8b8f9c88 1.4px, transparent 1.4px); background-size: 8px 8px; }
.fundo-diagonal { background-image: repeating-linear-gradient(45deg, #8b8f9c55 0 4px, transparent 4px 8px); }
.fundo-bolhas { background-image: radial-gradient(circle at 30% 30%, #ffb45488 0%, transparent 60%), radial-gradient(circle at 70% 70%, #c98a3a88 0%, transparent 60%); }

.chip {
  padding: 8px 14px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.chip.ativo { border-color: var(--accent); color: var(--accent-text); }

.swatch-cor {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--border); cursor: pointer; padding: 0;
}
.swatch-cor.ativo { border-color: var(--text); }
.cor-ambar { background: #c98a3a; }
.cor-azul { background: #4c8dff; }
.cor-verde { background: #3ecf8e; }

/* ---------- Privacidade da foto de perfil ---------- */
.privacidade-opcoes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.privacidade-opcao { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.privacidade-opcao input { accent-color: var(--accent); cursor: pointer; }
#privacidade-lista-wrap { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ---------- Trocar de conta ---------- */
.topbar-right .avatar-circle { cursor: pointer; }
#menu-contas { min-width: 230px; max-width: 280px; width: max-content; }
.conta-item { justify-content: flex-start; }
.conta-info { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.conta-info span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-ativa { background: var(--bg); }
.conta-check { color: var(--accent-text); font-size: 13px; flex-shrink: 0; }
.conta-remover { color: var(--text-muted); font-size: 12px; flex-shrink: 0; padding: 2px 4px; }
.conta-remover:hover { color: var(--error); }

/* ---------- Banner de contato desconhecido/salvo ---------- */
.contato-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px 18px;
  margin: 14px auto 4px;
  max-width: 300px;
  border-radius: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
}
.contato-banner span {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.contato-banner .btn-salvar-contato {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.contato-banner .btn-salvar-contato:hover { background: #ffc478; }

/* ---------- Lista de contatos no modal de nova conversa ---------- */
.lista-contatos { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; margin-bottom: 4px; }
.lista-contatos .conta-item { padding: 8px 6px; }

/* ---------- Menu de opções de cada conversa (lista lateral) ---------- */
.item-chat-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.item-chat-titulo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.item-chat-titulo .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-chat-titulo .avatar-circle { flex-shrink: 0; }
.item-menu-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.item-menu-btn:hover { background: var(--bg); color: var(--text); }
.menu-chat-opcoes { right: 0; left: auto; }

/* ---------- Avisos (toast) ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--error);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 12px 32px var(--shadow);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 300;
  max-width: 320px;
  text-align: center;
  pointer-events: none;
}
.toast.mostrar { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-sucesso { border-left-color: var(--accent); }

/* ---------- Menu flutuante (não fica preso a container com scroll) ---------- */
#menu-flutuante {
  position: fixed;
  min-width: 190px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 30px var(--shadow);
  z-index: 250;
}
/* =========================================================
   FUNDOS DE CONVERSA — NOVOS (6 temas)
   ========================================================= */

/* ── Aurora ── */
[data-fundo="aurora"] #mensagens {
  background-image:
    radial-gradient(ellipse at 0%   0%,   rgba(117, 80, 255, .12) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 40%,  rgba(255,180,  84, .13) 0%, transparent 55%),
    radial-gradient(ellipse at 30%  100%, rgba( 62,207, 142, .11) 0%, transparent 55%);
}
/* ── Grade ── */
[data-fundo="grade"] #mensagens {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    linear-gradient(rgba(255,180,84,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,180,84,.04) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}
/* ── Hexágono ── */
[data-fundo="hexagono"] #mensagens {
  background-image:
    repeating-linear-gradient(60deg,  var(--border) 0, var(--border) 1px, transparent 1px, transparent 50%),
    repeating-linear-gradient(-60deg, var(--border) 0, var(--border) 1px, transparent 1px, transparent 50%),
    repeating-linear-gradient(0deg,   var(--border) 0, var(--border) 1px, transparent 1px, transparent 50%);
  background-size: 24px 42px;
}
/* ── Nuvens ── */
[data-fundo="nuvens"] #mensagens {
  background-image:
    radial-gradient(ellipse 70% 50% at 10%  10%,  rgba(255,180, 84,.08) 0%, transparent 100%),
    radial-gradient(ellipse 60% 60% at 90%  20%,  rgba(117, 80,255,.07) 0%, transparent 100%),
    radial-gradient(ellipse 80% 50% at 50%  55%,  rgba( 62,207,142,.06) 0%, transparent 100%),
    radial-gradient(ellipse 55% 70% at 20%  90%,  rgba(255,107,107,.06) 0%, transparent 100%),
    radial-gradient(ellipse 65% 55% at 80%  85%,  rgba(255,180, 84,.07) 0%, transparent 100%);
}
/* ── Granulado (noise via SVG embutido) ── */
[data-fundo="noise"] #mensagens {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
/* ── Ondas ── */
[data-fundo="ondas"] #mensagens {
  background-image:
    repeating-linear-gradient(-45deg,
      transparent 0px, transparent 6px,
      rgba(255,180,84,.07) 6px, rgba(255,180,84,.07) 7px),
    repeating-radial-gradient(ellipse 100% 15px at 50% 0px,
      transparent 0%, transparent 49%,
      rgba(255,180,84,.09) 50%, rgba(255,180,84,.09) 51%,
      transparent 52%);
  background-size: 100% 100%, 100% 28px;
}

/* swatches em miniatura */
.fundo-aurora   { background-image: radial-gradient(ellipse at 0% 0%, #7550ff55 0%, transparent 60%), radial-gradient(ellipse at 100% 100%, #ffb45444 0%, transparent 60%), radial-gradient(ellipse at 50% 100%, #3ecf8e44 0%, transparent 60%); }
.fundo-grade    { background-image: linear-gradient(#8b8f9c55 1px, transparent 1px), linear-gradient(90deg, #8b8f9c55 1px, transparent 1px); background-size: 10px 10px; }
.fundo-hexagono { background-image: repeating-linear-gradient(60deg, #8b8f9c55 0, #8b8f9c55 1px, transparent 1px, transparent 50%), repeating-linear-gradient(-60deg, #8b8f9c55 0, #8b8f9c55 1px, transparent 1px, transparent 50%); background-size: 8px 14px; }
.fundo-nuvens   { background-image: radial-gradient(ellipse 70% 60% at 20% 20%, #ffb45455 0%, transparent 100%), radial-gradient(ellipse 60% 60% at 80% 80%, #7550ff44 0%, transparent 100%); }
.fundo-noise    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E"); background-size: 80px 80px; }
.fundo-ondas    { background-image: repeating-linear-gradient(-45deg, transparent 0 3px, #ffb45433 3px 4px); }

/* =========================================================
   PLAYER DE ÁUDIO
   ========================================================= */
.audio-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  max-width: 260px;
  padding: 2px 0;
}
.audio-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.audio-btn:hover { background: #ffc478; }
.audio-btn:active { transform: scale(.92); }
.audio-icone { width: 17px; height: 17px; }
.audio-player.tocando .audio-btn { box-shadow: 0 0 0 3px rgba(255,180,84,.22); }
.audio-meio { flex: 1; min-width: 0; }
.audio-onda {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  cursor: pointer;
}
.audio-barra {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--border);
  transition: background-color .12s ease;
}
.audio-barra.tocada { background: var(--accent); }
.msg.minha .audio-barra { background: rgba(139,143,156,.55); }
.msg.minha .audio-barra.tocada { background: var(--accent); }
.audio-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
}
.audio-tempo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.audio-velocidade {
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  cursor: pointer;
}
.audio-velocidade:hover { border-color: var(--accent); color: var(--accent-text); }

/* =========================================================
   ENCAMINHAR
   ========================================================= */
.msg-encaminhada {
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.msg .msg-check {
  position: absolute;
  top: 50%;
  left: -26px;
  transform: translateY(-50%) scale(.6);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: transparent;
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.msg.minha .msg-check { left: auto; right: -26px; }
.mensagens.selecionando .msg { cursor: pointer; margin-left: 28px; }
.mensagens.selecionando .msg.minha { margin-left: 0; margin-right: 28px; }
.mensagens.selecionando .msg .msg-check { display: flex; transform: translateY(-50%) scale(1); }
.mensagens.selecionando .msg .acoes { display: none !important; }
.msg.msg-selecionada { border-color: var(--accent); background: rgba(255,180,84,.08); }
.msg.msg-selecionada .msg-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.barra-encaminhar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 4px 10px;
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  background: var(--bg-panel);
  box-shadow: 0 8px 24px var(--shadow);
}
.barra-encaminhar-info { flex: 1; font-size: 12px; color: var(--text-muted); }

/* =========================================================
   PERFIL DA PESSOA + BIO
   ========================================================= */
.modal-box--perfil { max-width: 320px; }
.perfil-foto-grande {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  cursor: zoom-in;
}
.perfil-foto-grande:hover { border-color: var(--accent); }
.perfil-bio {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text);
  text-align: center;
  word-break: break-word;
}
.perfil-bio--vazia { color: var(--text-muted); font-style: italic; }
.perfil-bio-contador {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  #chat-screen.mobile-home .topbar-brand,
  #chat-screen.mobile-home #wrap-avatar-topo {
    display: flex;
  }
  #chat-screen.mobile-home .topbar {
    height: 56px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
  }
}





/* =========================================================
   CHATDEVS AUTH — identidade premium
   Escopo limitado às telas de login e cadastro.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

.auth-screen {
  --auth-bg: #090b10;
  --auth-card: rgba(18, 21, 30, .88);
  --auth-line: rgba(255,255,255,.085);
  --auth-muted: #9299aa;
  --auth-bright: #f4f5f8;
  --auth-lime: #c7f36b;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 42px 28px;
  background: var(--auth-bg);
  background-image: radial-gradient(ellipse at 12% 18%, rgba(121, 151, 83, .13), transparent 35%), radial-gradient(ellipse at 88% 83%, rgba(87, 99, 160, .14), transparent 37%), linear-gradient(135deg, #0b0e14 0%, #090b10 55%, #0d1018 100%);
  color: var(--auth-bright);
  font-family: 'DM Sans', sans-serif;
}
.auth-screen::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .17; background-image: radial-gradient(rgba(255,255,255,.3) .65px, transparent .65px); background-size: 19px 19px;
  mask-image: linear-gradient(110deg, #000, transparent 72%);
}
.auth-ambient { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(1px); }
.auth-ambient-one { width: 330px; height: 330px; left: -210px; top: 22%; border: 1px solid rgba(199,243,107,.16); box-shadow: 0 0 0 35px rgba(199,243,107,.018), 0 0 0 75px rgba(199,243,107,.014); animation: auth-drift 11s ease-in-out infinite alternate; }
.auth-ambient-two { width: 260px; height: 260px; right: -170px; bottom: -110px; background: radial-gradient(circle, rgba(125,139,205,.12), transparent 70%); animation: auth-drift 14s ease-in-out infinite alternate-reverse; }
.auth-layout { width: min(1050px, 100%); margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 465px); align-items: center; gap: clamp(48px, 8vw, 112px); position: relative; z-index: 1; }
.auth-story { min-width: 0; min-height: 540px; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 0 20px; animation: auth-rise .7s cubic-bezier(.2,.75,.25,1) both; }
.auth-brand-lockup { display: inline-flex; align-items: center; gap: 12px; font: 800 21px/1 'Manrope', sans-serif; letter-spacing: -.8px; }
.auth-brand-lockup .logo-mark { width: 38px; height: 38px; margin: 0; filter: drop-shadow(0 0 15px rgba(199,243,107,.12)); }
.brand-accent { color: var(--auth-lime); }
.auth-story-copy { margin: 56px 0 52px; }
.auth-kicker { display: inline-flex; align-items: center; gap: 10px; color: #aeb5c4; font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--auth-lime); box-shadow: 0 0 12px rgba(199,243,107,.65); animation: auth-pulse 3s ease-in-out infinite; }
.auth-story h2 { margin: 25px 0 20px; max-width: 550px; font: 700 clamp(38px, 4.2vw, 57px)/1.12 'Manrope', sans-serif; letter-spacing: -2.8px; }
.auth-story h2 span { color: var(--auth-lime); }
.auth-story-copy p { max-width: 405px; margin: 0; color: #9ba2b1; font-size: 15px; line-height: 1.9; }
.auth-story-foot { display: flex; align-items: center; gap: 12px; color: #a3a9b6; font-size: 12px; }
.auth-orbit-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(199,243,107,.28); border-radius: 10px; color: var(--auth-lime); font-size: 17px; }
.auth-foot-line { height: 1px; width: 58px; background: linear-gradient(90deg, rgba(199,243,107,.45), transparent); margin-left: 2px; }
.auth-card { width: 100%; max-width: none; align-items: stretch; padding: 34px 34px 23px; border: 1px solid rgba(255,255,255,.11); border-radius: 24px; background: linear-gradient(145deg, rgba(25,29,40,.96), rgba(15,18,26,.94)); box-shadow: 0 28px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.045); backdrop-filter: blur(22px); animation: auth-rise .75s cubic-bezier(.2,.75,.25,1) .08s both; position: relative; }
.auth-card::before { content: ''; position: absolute; top: -1px; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(199,243,107,.65), transparent); }
.auth-card-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 27px; border-bottom: 1px solid var(--auth-line); }
.auth-step { color: var(--auth-lime); font: 700 11px 'Manrope', sans-serif; letter-spacing: 1px; }
.auth-step i { color: #626a79; font-style: normal; padding: 0 3px; }
.auth-secure { display: inline-flex; align-items: center; gap: 7px; color: #858d9d; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; }
.auth-secure svg { width: 13px; height: 13px; fill: none; stroke: var(--auth-lime); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.auth-heading { margin: 27px 0 28px; }
.auth-heading h1 { color: var(--auth-bright); margin: 0 0 9px; font: 700 clamp(24px, 2.4vw, 29px)/1.25 'Manrope', sans-serif; letter-spacing: -1.2px; }
.heading-period { color: var(--auth-lime); }
.auth-heading p { margin: 0; color: var(--auth-muted); font-size: 13px; line-height: 1.7; }
.auth-mobile-brand { display: none; }
.auth-card form { gap: 9px; }
.auth-label, .auth-label-row { color: #d9dce4; font-size: 11px; font-weight: 600; letter-spacing: .15px; }
.auth-label-row { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; }
.auth-inline-link { padding: 0; border: 0; background: none; color: var(--auth-lime); font: 600 11px 'DM Sans', sans-serif; cursor: pointer; transition: opacity .2s; }
.auth-inline-link:hover { opacity: .72; }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap > svg { position: absolute; left: 15px; z-index: 1; width: 17px; height: 17px; fill: none; stroke: #788193; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke .22s, transform .22s; }
.auth-input-wrap:focus-within > svg { stroke: var(--auth-lime); transform: scale(1.06); }
.auth-card .campo { min-width: 0; width: 100%; min-height: 51px; padding: 14px 15px 14px 44px; border: 1px solid rgba(255,255,255,.095); border-radius: 12px; background: rgba(7,9,14,.47); color: #f3f5f9; font: 500 13px 'DM Sans', sans-serif; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); transition: border-color .22s, background .22s, box-shadow .22s, transform .22s; }
.auth-card .campo::placeholder { color: #666f80; }
.auth-card .campo:hover { border-color: rgba(255,255,255,.17); }
.auth-card .campo:focus { outline: none; border-color: rgba(199,243,107,.68); background: rgba(8,12,14,.75); box-shadow: 0 0 0 3px rgba(199,243,107,.085), 0 7px 20px rgba(0,0,0,.12); }
.auth-card .erro-msg { min-height: 12px; margin: 2px 0 0; text-align: left; font-size: 11px; }
.auth-submit { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; margin-top: 4px; padding: 13px 17px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: var(--auth-lime); color: #151b0d; font: 700 13px 'DM Sans', sans-serif; box-shadow: 0 7px 22px rgba(153,204,67,.13); transition: transform .22s, box-shadow .22s, background .22s; }
.auth-submit svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s; }
.auth-submit:hover { background: #d5ff82; transform: translateY(-2px); box-shadow: 0 11px 28px rgba(153,204,67,.2); }
.auth-submit:hover svg { transform: translateX(3px); }
.auth-submit:active { transform: translateY(0) scale(.99); }
.auth-submit:focus-visible, .auth-inline-link:focus-visible { outline: 2px solid var(--auth-lime); outline-offset: 3px; }
.auth-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; margin-top: 23px; color: #858d9c; font-size: 11px; }
.auth-card .link-sutil { color: var(--auth-lime); font-size: 11px; font-weight: 700; }
.auth-card .link-sutil span { display: inline-block; margin-left: 2px; transition: transform .2s; }
.auth-card .link-sutil:hover span { transform: translate(2px,-2px); }
.auth-card-bottom { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--auth-line); color: #666e7e; font-size: 10px; }
.auth-bottom-mark { color: var(--auth-lime); font-size: 13px; }
.auth-card-register .auth-heading { margin-bottom: 22px; }
.auth-card-register .auth-card-top { padding-bottom: 22px; }
.auth-card-register .auth-card-bottom { margin-top: 19px; }
@keyframes auth-rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-drift { from { transform: translate3d(0,-10px,0) rotate(-8deg); } to { transform: translate3d(16px,18px,0) rotate(8deg); } }
@keyframes auth-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 12px rgba(199,243,107,.55); } 50% { opacity: .55; box-shadow: 0 0 4px rgba(199,243,107,.25); } }
@media (max-width: 850px) {
  .auth-screen { padding: 28px 20px; }
  .auth-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 35px; }
  .auth-story { min-height: 500px; }
  .auth-story h2 { font-size: clamp(34px, 5vw, 44px); letter-spacing: -2px; }
  .auth-card { padding: 28px 25px 21px; }
}
@media (max-width: 650px) {
  .auth-screen { align-items: center; justify-content: center; padding: 24px 17px; }
  .auth-layout { display: flex; flex-direction: column; gap: 0; width: min(440px, 100%); }
  .auth-story { min-height: auto; width: 100%; padding: 0; }
  .auth-brand-lockup { gap: 9px; font-size: 19px; }
  .auth-brand-lockup .logo-mark { width: 32px; height: 32px; }
  .auth-story-copy { display: none; }
  .auth-story-foot { display: none; }
  .auth-card { margin-top: 25px; padding: 25px 22px 19px; border-radius: 20px; }
  .auth-card-top { padding-bottom: 20px; }
  .auth-heading { margin: 22px 0 24px; }
  .auth-heading h1 { font-size: 26px; }
  .auth-mobile-brand { display: block; margin-bottom: 11px; color: var(--auth-lime); font-size: 9px; font-weight: 700; letter-spacing: 1.7px; }
  .auth-card .campo { min-height: 49px; }
  .auth-card-bottom { margin-top: 20px; }
}
@media (max-width: 360px) {
  .auth-screen { padding: 18px 12px; }
  .auth-card { padding: 22px 17px 17px; }
  .auth-secure { font-size: 8px; }
  .auth-heading h1 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-screen *, .auth-screen *::before, .auth-screen *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* ===== ChatDevs premium UI refresh ===== */
:root { --bg:#0b0d13; --bg-panel:rgba(20,23,33,.88); --border:rgba(150,163,190,.16); --text:#f1f3fa; --text-muted:#9299ad; --accent:#ffb454; --accent-text:#ffbf69; --accent-contrast:#1a1305; --shadow:rgba(0,0,0,.38); --glass:rgba(255,255,255,.035); }
html { min-height:100%; background:var(--bg); }
body { font-family:'DM Sans','Manrope',sans-serif; background:radial-gradient(ellipse at 12% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 36rem),radial-gradient(ellipse at 95% 80%,rgba(113,89,255,.09),transparent 34rem),var(--bg); background-attachment:fixed; letter-spacing:-.012em; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.17; background-image:radial-gradient(rgba(255,255,255,.16) .65px,transparent .65px); background-size:19px 19px; mask-image:linear-gradient(to bottom,black,transparent 78%); }
button,input { font:inherit; } button { transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease,filter .2s ease; } button:active { transform:scale(.975); }
.mdi { font-size:1.22em; line-height:1; vertical-align:-.12em; }
.chat-screen { animation:chatdeves-enter .55s cubic-bezier(.2,.8,.2,1) both; }
.sidebar,.chat-area { backdrop-filter:blur(18px); }
.sidebar { background:linear-gradient(160deg,rgba(25,28,40,.96),rgba(14,16,24,.94)); border-right:1px solid var(--border); }
.sidebar-header { padding:20px 18px; } .sidebar-header strong { font-family:'Manrope',sans-serif;font-size:1.12rem;font-weight:800;letter-spacing:-.035em; }
.btn-link { display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border);border-radius:12px;padding:9px 12px;background:var(--glass);color:var(--text-muted); }
.btn-link:hover { color:var(--text);border-color:color-mix(in srgb,var(--accent) 48%,var(--border));background:color-mix(in srgb,var(--accent) 9%,transparent); }
.action-card { position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;margin:8px 12px;width:calc(100% - 24px);border-radius:16px;text-align:left;font-weight:700;letter-spacing:-.02em; }
.action-card .mdi:first-child { font-size:1.35rem; } .action-card .action-arrow { margin-left:auto;opacity:.65;font-size:1.1rem; }
.btn-primary.action-card { background:linear-gradient(115deg,var(--accent),color-mix(in srgb,var(--accent) 78%,#fff));color:var(--accent-contrast);border:0;box-shadow:0 9px 28px color-mix(in srgb,var(--accent) 17%,transparent); }
.btn-primary.action-card:hover { box-shadow:0 12px 32px color-mix(in srgb,var(--accent) 28%,transparent);filter:saturate(1.08);transform:translateY(-1px); }
.btn-secondary.action-card { margin-top:0;border:1px solid var(--border);background:rgba(255,255,255,.025);color:var(--text); }
.btn-secondary.action-card:hover { border-color:color-mix(in srgb,var(--accent) 40%,var(--border));background:color-mix(in srgb,var(--accent) 6%,transparent); }
.lista-chats { padding:8px 10px 18px; } .lista-chats > * { animation:chatdeves-rise .35s ease both; }
.chat-area { background:rgba(9,11,17,.48); } .chat-header { min-height:66px;display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--border);background:rgba(17,19,28,.72);font-family:'Manrope',sans-serif;font-weight:750; }
.chat-header .mdi { color:var(--accent); } .mensagens { background-color:transparent; }
.input-area { gap:9px;padding:14px;border-top:1px solid var(--border);background:rgba(16,18,26,.86);backdrop-filter:blur(18px); }
.input-area input { min-height:48px;border-radius:15px;border:1px solid var(--border);background:rgba(255,255,255,.045);padding:0 15px;outline:none;color:var(--text);transition:border-color .2s,box-shadow .2s,background .2s; }
.input-area input:focus { border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 11%,transparent);background:rgba(255,255,255,.065); }
.input-area button { border-radius:14px;min-width:44px;min-height:44px; } .input-area button:first-of-type { display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;background:var(--accent);color:var(--accent-contrast);font-weight:750; }
.input-area button:not(:first-of-type) { border:1px solid var(--border);background:var(--glass);color:var(--text-muted); } .input-area button:hover { filter:brightness(1.08); }
.dropdown-menu,.modal-box { border:1px solid var(--border)!important;border-radius:20px!important;background:rgba(20,23,33,.96)!important;box-shadow:0 24px 70px rgba(0,0,0,.48)!important;backdrop-filter:blur(22px);animation:menu-pop .18s cubic-bezier(.2,.8,.2,1) both; }
.dropdown-item { border-radius:10px;margin:4px;transition:background .18s ease,color .18s ease; } .dropdown-item:hover { background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--text); }
.modal-title { font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.03em; } .config-grupo { padding:12px 0;border-bottom:1px solid var(--border); }
.config-label { color:var(--text-muted);font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; }
.swatch-tema { width:31px;height:31px;border:2px solid rgba(255,255,255,.16);box-shadow:inset 0 0 0 2px rgba(0,0,0,.1); }
.swatch-tema.ativo,.swatch-fundo.ativo,.swatch-cor.ativo { outline:2px solid var(--accent);outline-offset:3px;transform:scale(1.05); }
@keyframes chatdeves-enter { from { opacity:0;transform:translateY(7px); } to { opacity:1;transform:translateY(0); } } @keyframes chatdeves-rise { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:translateY(0); } } @keyframes menu-pop { from { opacity:0;transform:translateY(6px) scale(.985); } to { opacity:1;transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important; } }
@media (max-width:680px) { .sidebar-header{padding:15px 14px}.action-card{min-height:50px;border-radius:14px}.input-area{padding:10px;gap:6px}.input-area button:first-of-type span{display:none}.chat-header{min-height:58px;padding:12px 15px} }
[data-theme="midnight"] { --bg:#101426;--bg-panel:#191f36;--border:rgba(143,160,220,.2);--text:#eef1ff;--text-muted:#9ca7c8;--accent:#9c8cff;--accent-text:#b6aaff;--accent-contrast:#17132d;--shadow:rgba(0,0,0,.42); }
[data-theme="ocean"] { --bg:#07171d;--bg-panel:#0e252e;--border:rgba(96,190,204,.2);--text:#e6fbff;--text-muted:#8db4be;--accent:#55d6d0;--accent-text:#72e5df;--accent-contrast:#062021;--shadow:rgba(0,0,0,.4); }
[data-theme="violet"] { --bg:#170e20;--bg-panel:#251633;--border:rgba(200,135,255,.2);--text:#fff0ff;--text-muted:#bda5c9;--accent:#d18bff;--accent-text:#dda5ff;--accent-contrast:#271033;--shadow:rgba(0,0,0,.42); }
[data-theme="forest"] { --bg:#0b1712;--bg-panel:#14241b;--border:rgba(113,201,145,.2);--text:#edfff2;--text-muted:#9ab9a4;--accent:#79dc9c;--accent-text:#8ce7ad;--accent-contrast:#092015;--shadow:rgba(0,0,0,.42); }
.swatch-dark{background:linear-gradient(135deg,#252a38 50%,#10131b 50%)}.swatch-light{background:linear-gradient(135deg,#fff 50%,#dfe4ec 50%)}.swatch-amoled{background:linear-gradient(135deg,#000 50%,#181818 50%)}.swatch-midnight{background:linear-gradient(135deg,#9c8cff 0 32%,#191f36 32%)}.swatch-ocean{background:linear-gradient(135deg,#55d6d0 0 32%,#0e252e 32%)}.swatch-violet{background:linear-gradient(135deg,#d18bff 0 32%,#251633 32%)}.swatch-forest{background:linear-gradient(135deg,#79dc9c 0 32%,#14241b 32%)}

/* ---------- Chat premium: bolhas, wallpaper e painel de aparência ---------- */
#mensagens { position: relative; isolation: isolate; background: transparent; }
#mensagens::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 12% 8%, rgba(139,92,246,.12), transparent 42%), radial-gradient(ellipse at 88% 78%, rgba(255,180,84,.09), transparent 42%); opacity: .85; }
#mensagens.com-wallpaper::before { background-image: linear-gradient(rgba(10,12,18,.43),rgba(10,12,18,.58)),var(--chat-wallpaper-image); background-size: cover; background-position: center; opacity: 1; }
#mensagens .msg { background-color: color-mix(in srgb, var(--bg-panel) calc(100% - (var(--chat-bubble-opacity, 92%))), transparent); border-color: color-mix(in srgb, var(--chat-bubble-color, var(--accent)) 30%, var(--border)); border-radius: 18px 18px 18px 6px; padding: 10px 13px; box-shadow: 0 7px 22px rgba(0,0,0,.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: chatBubbleIn .22s ease both; }
#mensagens .msg.minha { background-color: color-mix(in srgb, var(--chat-bubble-color, var(--accent)) calc(var(--chat-bubble-opacity, 92%)), transparent); color: var(--text); border-color: color-mix(in srgb, var(--chat-bubble-color, var(--accent)) 70%, transparent); border-radius: 18px 18px 6px 18px; }
#mensagens .msg[data-bubble-style="compacto"], #mensagens[data-bubble-style="compacto"] .msg { border-radius: 11px; padding: 7px 10px; box-shadow: none; }
#mensagens[data-bubble-style="vidro"] .msg { background-color: rgba(255,255,255,color-mix(in srgb, white 13%, transparent)); border-color: rgba(255,255,255,.24); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
#mensagens[data-bubble-style="vidro"] .msg.minha { background-color: color-mix(in srgb, var(--chat-bubble-color,#ffb454) var(--chat-bubble-opacity,92%), transparent); }
#mensagens .msg .conteudo { line-height: 1.48; font-size: 14px; }
.chat-header .dropdown-wrap { position: relative; }
.dropdown-menu { z-index: 80; min-width: 220px; padding: 7px; border-radius: 16px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg-panel) 92%, transparent); box-shadow: 0 18px 55px rgba(0,0,0,.32); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 11px 12px; }
.dropdown-item:hover { background: var(--bg); }
.chat-appearance-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,6,12,.68); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: appearanceFade .18s ease both; }
.chat-appearance-panel { width: min(100%, 480px); max-height: min(88dvh, 760px); overflow: auto; border: 1px solid var(--border); border-radius: 24px; color: var(--text); background: var(--bg-panel); box-shadow: 0 28px 90px rgba(0,0,0,.45); animation: appearanceRise .24s cubic-bezier(.2,.75,.25,1) both; }
.appearance-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:22px 22px 17px; border-bottom:1px solid var(--border); background:radial-gradient(ellipse at top right,rgba(255,180,84,.12),transparent 65%); }
.appearance-eyebrow { font-size:10px; letter-spacing:.16em; font-weight:800; color:var(--accent-text); }
.appearance-head h2 { margin:7px 0 5px; font-size:clamp(19px,5vw,24px); letter-spacing:-.04em; }
.appearance-head p { margin:0; color:var(--text-muted); font-size:13px; line-height:1.5; }
.appearance-close { flex:0 0 36px; width:36px;height:36px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font-size:24px;cursor:pointer; }
.appearance-content { padding:20px 22px; }
.appearance-label { display:block; margin:0 0 11px; color:var(--text); font-size:13px; font-weight:700; }
.appearance-color-row { display:flex; align-items:center; gap:14px; margin-bottom:23px; }
#bubble-color { width:48px;height:44px;padding:4px;border:1px solid var(--border);border-radius:13px;background:var(--bg);cursor:pointer; }
.appearance-swatches { display:flex; flex-wrap:wrap; gap:9px; }
.appearance-swatch { width:27px;height:27px;border-radius:50%;background:var(--swatch);border:2px solid rgba(255,255,255,.7);box-shadow:0 0 0 1px var(--border);cursor:pointer;transition:transform .16s ease; }
.appearance-swatch:active { transform:scale(.9); }
.appearance-range-head { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.appearance-range-head output { font-size:12px;color:var(--accent-text);font-weight:800; }
.appearance-range { width:100%; accent-color:var(--accent); margin:0 0 24px; }
.appearance-styles { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:24px; }
.appearance-style { min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--bg);color:var(--text);text-align:left;cursor:pointer; }
.appearance-style.selected { border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 7px 20px rgba(0,0,0,.08); }
.appearance-style b { font-size:12px; }.appearance-style small { font-size:10px;color:var(--text-muted); }
.style-preview { display:block;width:100%;height:34px;margin-bottom:5px;border-radius:9px;background:linear-gradient(120deg,var(--chat-bubble-color,#ffb454),rgba(139,92,246,.5));border:1px solid var(--border); }
.style-compact { border-radius:4px; }.style-glass { background:linear-gradient(120deg,rgba(255,255,255,.4),rgba(255,255,255,.04));backdrop-filter:blur(8px); }
.wallpaper-actions { display:flex;flex-direction:column;gap:9px; }
.appearance-upload { width:100%;display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed var(--border);border-radius:15px;background:var(--bg);color:var(--text);text-align:left;cursor:pointer; }
.appearance-upload > .mdi:first-child { font-size:24px;color:var(--accent-text); }.appearance-upload span { display:flex;flex:1;flex-direction:column;gap:3px; }.appearance-upload b { font-size:13px; }.appearance-upload small { font-size:11px;color:var(--text-muted); }
.appearance-remove { display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border:1px solid var(--border);border-radius:12px;background:transparent;color:var(--text-muted);font-size:12px;cursor:pointer; }.appearance-remove:disabled { opacity:.4;cursor:not-allowed; }
.appearance-footer { position:sticky;bottom:0;display:flex;justify-content:space-between;gap:10px;padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--bg-panel); }
.appearance-reset,.appearance-done { min-height:42px;padding:0 15px;border-radius:12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer; }.appearance-reset { border:1px solid var(--border);background:transparent;color:var(--text-muted); }.appearance-done { border:0;background:var(--accent);color:#17120b; }
@keyframes chatBubbleIn { from { opacity:0;transform:translateY(5px) scale(.99); } to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes appearanceFade { from { opacity:0; } to { opacity:1; } } @keyframes appearanceRise { from { opacity:0;transform:translateY(12px) scale(.985); } to { opacity:1;transform:translateY(0) scale(1); } }
@media (max-width:600px) { .chat-appearance-backdrop { align-items:flex-end;padding:0; } .chat-appearance-panel { width:100%;max-height:90dvh;border-radius:24px 24px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom); } .appearance-head { padding:20px 18px 15px; }.appearance-content { padding:18px; }.appearance-footer { padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }.appearance-reset,.appearance-done { flex:1; } #mensagens .msg { max-width:84%; } }
@media (prefers-reduced-motion: reduce) { #mensagens .msg,.chat-appearance-backdrop,.chat-appearance-panel { animation:none!important; } }

/* Chat header/composer refinement v3 */
.chat-header{display:flex;justify-content:flex-start;gap:12px;min-height:76px;padding:10px 14px;position:relative;z-index:120;background:rgba(15,17,25,.94);overflow:visible}
.chat-back-btn{width:40px;height:42px;flex:0 0 40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.035);color:var(--text);font-size:23px;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}
.chat-back-btn:active{transform:scale(.94)}.chat-back-btn:hover{border-color:var(--accent);background:rgba(255,180,84,.08)}
.chat-header-info{flex:1;min-width:0;justify-content:flex-start;align-items:center;gap:11px;text-align:left}
.chat-header-info .avatar-circle{width:42px;height:42px;flex:0 0 42px;font-size:15px}
.chat-header-contact-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:0}
#chat-header-nome{display:block;max-width:min(58vw,420px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:1.25;font-weight:800;color:var(--text)}
#chat-header-status{display:block;max-width:min(62vw,460px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.3;font-weight:500;color:var(--text-muted)}
#chat-header-status.is-online{color:#4ade80}#chat-header-status.is-online:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#4ade80;margin:0 6px 1px 0;box-shadow:0 0 0 3px rgba(74,222,128,.12)}
.chat-header .dropdown-wrap{margin-left:auto;flex:0 0 42px;display:flex;justify-content:flex-end;z-index:150}
.chat-options-trigger{width:42px;height:42px;display:grid;place-items:center;border:1px solid transparent;border-radius:13px;background:transparent;color:var(--text-muted);font-size:23px;cursor:pointer}
.chat-options-trigger:hover,.chat-options-trigger[aria-expanded="true"]{background:var(--glass);border-color:var(--border);color:var(--text)}
.chat-header .dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:300;min-width:230px;width:max-content;max-width:min(300px,calc(100vw - 28px));padding:8px;border-radius:18px!important;overflow:visible}
#menu-chat-atual .dropdown-item{display:flex;align-items:center;gap:11px;min-height:46px;padding:11px 13px;border-radius:12px;font-size:13px;font-weight:650;line-height:1.35;white-space:normal;cursor:pointer}
#menu-chat-atual .dropdown-item .mdi{flex:0 0 20px;width:20px;font-size:20px;text-align:center;color:var(--accent-text)}
#menu-chat-atual .dropdown-item:hover{background:rgba(255,180,84,.1)}
.input-area{display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));}
.input-area #input-texto{min-width:0;width:0;flex:1;height:48px;min-height:48px;border-radius:16px;padding:0 15px;font-size:14px;line-height:1.35}
.input-area button,.input-area button:first-of-type,.input-area button:not(:first-of-type){width:48px;min-width:48px;height:48px;min-height:48px;flex:0 0 48px;display:grid;place-items:center;padding:0;border:1px solid var(--border);border-radius:15px;background:var(--glass);color:var(--text-muted);box-shadow:none}
.input-area button:last-of-type{background:var(--accent);border-color:transparent;color:var(--accent-contrast)}
.input-area button:hover{border-color:var(--accent);color:var(--text);filter:none;transform:translateY(-1px)}
.input-area button:last-of-type:hover{background:#ffc478;color:#17120b}
.input-area button svg,.input-area button .mdi{display:block;width:22px;height:22px;font-size:22px;line-height:1}
@media(max-width:600px){.chat-header{min-height:72px;padding:9px 12px;gap:9px}.chat-back-btn{width:38px;height:40px;flex-basis:38px;border-radius:12px}.chat-header-info{gap:9px}.chat-header-info .avatar-circle{width:38px;height:38px;flex-basis:38px}.chat-header .dropdown-wrap{flex-basis:38px}.chat-options-trigger{width:38px;height:40px}.chat-header .dropdown-menu{right:0;max-width:calc(100vw - 24px)}.input-area{gap:6px;padding:9px 9px calc(9px + env(safe-area-inset-bottom))}.input-area #input-texto{height:48px;min-height:48px;padding:0 12px;font-size:13px}.input-area button,.input-area button:first-of-type,.input-area button:not(:first-of-type){width:43px;min-width:43px;height:46px;min-height:46px;flex-basis:43px;border-radius:14px}.input-area button svg,.input-area button .mdi{font-size:21px;width:21px;height:21px}#chat-header-nome{max-width:53vw}#chat-header-status{max-width:57vw}}
@media(max-width:360px){.input-area{gap:5px;padding-inline:6px}.input-area button,.input-area button:first-of-type,.input-area button:not(:first-of-type){width:38px;min-width:38px;flex-basis:38px}.input-area #input-texto{padding-inline:10px}}


/* Chat polish v4: menu legível e bolhas com respiro lateral no mobile */
#menu-chat-atual { box-sizing:border-box; }
#menu-chat-atual .dropdown-item {
  display:grid !important;
  grid-template-columns:22px minmax(0,1fr);
  align-items:center !important;
  justify-content:start !important;
  text-align:left !important;
  gap:10px !important;
  width:100%;
  min-width:0;
  white-space:normal !important;
  overflow-wrap:anywhere;
  line-height:1.35 !important;
}
#menu-chat-atual .dropdown-item .mdi {
  display:inline-flex;align-items:center;justify-content:center;
  width:22px !important;min-width:22px;flex:none !important;
  margin:0 !important;line-height:1;font-size:20px !important;
}
#menu-chat-atual .dropdown-item::after { content:none !important; }
#mensagens { padding-left:12px !important; padding-right:12px !important; }
#mensagens .msg { max-width:min(80%, 620px); margin-left:5px; margin-right:5px; box-sizing:border-box; }
#mensagens .msg.minha { margin-left:auto; margin-right:5px; }
@media(max-width:600px) {
  #menu-chat-atual { min-width:0; width:min(290px,calc(100vw - 28px)); }
  #menu-chat-atual .dropdown-item { min-height:48px; padding:12px 13px !important; font-size:14px !important; }
  #mensagens { padding-left:10px !important; padding-right:10px !important; }
  #mensagens .msg { max-width:82%; margin-left:4px; margin-right:4px; }
  #mensagens .msg.minha { margin-left:auto; margin-right:4px; }
}

/* Correção definitiva do menu: ícone e rótulo ficam em colunas estáveis. */
#menu-chat-atual .dropdown-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: left !important;
}
#menu-chat-atual .dropdown-item > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
#menu-chat-atual .dropdown-item .mdi {
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
}
#mensagens .msg .conteudo { font-size: var(--chat-bubble-font-size, 14px) !important; }
@media (max-width: 600px) {
  #menu-chat-atual { width: min(320px, calc(100vw - 24px)) !important; }
  #menu-chat-atual .dropdown-item { padding: 12px 14px !important; font-size: 14px !important; }
}

/* ---------- Perfil completo premium: editor e visualização pública ---------- */
.modal-box--perfil-editor,
.perfil-publico-card {
  width: min(560px, calc(100vw - 28px));
  max-width: 560px;
  max-height: min(88dvh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(18px, 4vw, 28px);
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg-panel, #141722);
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
  position: relative;
  animation: perfilCardIn .22s ease-out both;
}
@keyframes perfilCardIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.perfil-fechar-x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 13px; border: 1px solid var(--border); color: var(--text);
  background: var(--bg, #10121a); font-size: 26px; line-height: 1; cursor: pointer;
}
.perfil-editor-cabecalho, .perfil-publico-hero { display:flex; align-items:center; flex-direction:column; text-align:center; gap:8px; padding: 4px 24px 18px; }
.perfil-editor-avatar { width: 104px; height:104px; font-size:34px; border-width:3px!important; overflow:hidden; }
.perfil-editor-avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.perfil-editor-subtitulo, .perfil-publico-tag { color:var(--text-muted); font-size:12px; margin:0; }
.perfil-editor-campos { display:grid; gap:13px; margin: 2px 0 20px; }
.perfil-campo { display:grid; gap:7px; text-align:left; color:var(--text-muted); font-size:13px; }
.perfil-campo > span { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--text); font-weight:600; }
.perfil-campo small, .perfil-ajuda { color:var(--text-muted); font-size:11px; font-weight:400; }
.perfil-campo input:not([type=color]), .perfil-campo textarea { width:100%; min-width:0; box-sizing:border-box; border:1px solid var(--border); border-radius:13px; padding:12px 13px; background:var(--bg, #10121a); color:var(--text); font:inherit; outline:none; }
.perfil-campo input:focus, .perfil-campo textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim, rgba(255,180,84,.12)); }
.perfil-campo textarea { resize:vertical; min-height:82px; }
.perfil-campo-cor { grid-template-columns:1fr auto; align-items:center; padding:11px 13px; border:1px solid var(--border); border-radius:13px; }
.perfil-campo-cor input { width:42px; height:32px; border:0; padding:0; background:transparent; }
.perfil-socials { display:grid; gap:10px; padding:14px; border:1px solid var(--border); border-radius:16px; background:rgba(127,127,127,.035); }
.perfil-socials .config-label { font-weight:700; }
.perfil-ajuda { margin:-5px 0 0; }
.perfil-social-campo { grid-template-columns:90px minmax(0,1fr); align-items:center; gap:10px; }
.perfil-social-campo > span { font-size:12px; }
.perfil-social-campo input { padding:10px 11px!important; }
.perfil-editor-acoes { position:sticky; bottom:-28px; padding:14px 0 2px; background:var(--bg-panel, #141722); border-top:1px solid var(--border); }
.perfil-publico-hero { padding-top:16px; }
.perfil-foto-grande { width:116px; height:116px; border-radius:50%; object-fit:cover; border:3px solid var(--accent); }
.perfil-publico-hero .info-grupo-nome { margin:5px 0 0; }
.perfil-publico-detalhes { display:grid; gap:10px; margin: 4px 0 20px; }
.perfil-redes-lista { display:grid; gap:8px; }
.perfil-rede-link, .perfil-contato-link { display:flex; align-items:center; gap:11px; min-width:0; padding:12px 13px; border:1px solid var(--border); border-radius:14px; background:rgba(127,127,127,.045); color:var(--text); text-decoration:none; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.perfil-rede-link:hover, .perfil-contato-link:hover { transform:translateY(-1px); border-color:var(--accent); background:var(--accent-dim, rgba(255,180,84,.08)); }
.perfil-rede-icone, .perfil-contato-link > .mdi:first-child { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:10px; background:var(--accent-dim, rgba(255,180,84,.12)); color:var(--accent); font-size:19px; }
.perfil-rede-nome { font-size:13px; font-weight:700; }
.perfil-rede-handle, .perfil-contato-link > span:nth-child(2) { color:var(--text-muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.perfil-rede-externo, .perfil-contato-link > .mdi:last-child { margin-left:auto; color:var(--text-muted); }
.avatar-perfil-abrir { cursor:pointer; }
.avatar-perfil-abrir:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:600px) {
  .modal-box--perfil-editor, .perfil-publico-card { width:calc(100vw - 20px); max-height:90dvh; padding:18px; border-radius:20px; }
  .perfil-social-campo { grid-template-columns:76px minmax(0,1fr); gap:8px; }
  .perfil-social-campo input { font-size:12px!important; }
  .perfil-editor-acoes { bottom:-18px; }
}
@media (prefers-reduced-motion: reduce) { .modal-box--perfil-editor, .perfil-publico-card { animation:none; } }


/* Perfil público: acabamento visual refinado */
.perfil-publico-card {
  isolation: isolate;
  overflow-x: hidden;
}
.perfil-publico-card::before,
.perfil-publico-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  opacity: .16;
}
.perfil-publico-card::before {
  top: 34px;
  left: -92px;
  background: radial-gradient(circle at center, var(--accent, #ffb454) 0%, rgba(255,180,84,.35) 38%, transparent 72%);
}
.perfil-publico-card::after {
  right: -95px;
  bottom: 22px;
  background: radial-gradient(circle at center, #7c8cff 0%, rgba(124,140,255,.3) 40%, transparent 72%);
}
.perfil-publico-hero,
.perfil-publico-detalhes,
.perfil-publico-card > .modal-actions { position: relative; z-index: 1; }
.perfil-bio-card {
  position: relative;
  width: min(100%, 470px);
  box-sizing: border-box;
  margin: 6px auto 0;
  padding: 19px 30px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(127,127,127,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.perfil-bio-card .perfil-bio {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
.perfil-bio-card--vazia { padding-top: 15px; padding-bottom: 15px; }
.perfil-bio-aspas {
  position: absolute;
  color: var(--accent, #ffb454);
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  opacity: .9;
}
.perfil-bio-aspas--abre { top: 7px; left: 11px; }
.perfil-bio-aspas--fecha { right: 11px; bottom: 2px; }
.perfil-publico-detalhes {
  width: min(100%, 500px);
  margin: 4px auto 20px;
}
.perfil-contato-link,
.perfil-redes-lista {
  width: 100%;
  box-sizing: border-box;
}
.perfil-rede-link,
.perfil-contato-link { padding: 10px 12px; gap: 10px; }
@media (max-width: 600px) {
  .perfil-publico-detalhes { width: calc(100% - 18px); }
  .perfil-bio-card { padding: 18px 28px; }
  .perfil-publico-card::before, .perfil-publico-card::after { width: 150px; height: 150px; }
}

/* ChatDevs Home Premium — cartões separados e melhor respiro mobile */
.app-sidebar {
  gap: 16px;
  padding: 18px 16px 20px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255,180,84,.045), transparent 42%),
    var(--bg);
}
.search-row {
  min-height: 48px;
  gap: 8px;
  padding: 0 8px 0 15px;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--bg-panel), color-mix(in srgb, var(--bg-panel) 88%, var(--accent) 12%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.search-row:focus-within {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent);
}
.search-row input { font-size: 14px; }
.search-options-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}
.search-options-btn:hover { background: rgba(255,255,255,.045); }
.sidebar-actions { gap: 10px; }
.sidebar-actions .btn,
.sidebar-actions button,
.sidebar-actions .btn-outline {
  min-height: 48px;
  border-radius: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.sidebar-actions .btn:hover,
.sidebar-actions button:hover,
.sidebar-actions .btn-outline:hover { transform: translateY(-1px); }
.sidebar-actions .btn:not(.btn-outline) {
  box-shadow: 0 5px 18px rgba(255,180,84,.12), inset 0 1px 0 rgba(255,255,255,.2);
}
.sidebar-actions .btn-outline { background: rgba(255,255,255,.012); }

.lista-chats {
  gap: 11px !important;
  padding: 8px 2px 20px !important;
  overflow: visible;
}
.lista-chats > .item-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 13px 12px !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 17px !important;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--bg-panel) 94%, white 6%),
    color-mix(in srgb, var(--bg-panel) 98%, var(--accent) 2%));
  box-shadow: 0 5px 16px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.025);
  isolation: isolate;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  animation: home-card-enter .28s ease both;
}
.lista-chats > .item-chat::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 17px 0 0 17px;
  background: var(--accent);
  opacity: 0;
  transition: opacity .18s ease;
}
.lista-chats > .item-chat:hover,
.lista-chats > .item-chat:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 9px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035);
}
.lista-chats > .item-chat:hover::before,
.lista-chats > .item-chat.ativo::before { opacity: .9; }
.lista-chats > .item-chat.ativo {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--bg-panel) 90%, var(--accent) 10%),
    var(--bg-panel));
}
.item-chat-topo { gap: 10px !important; min-width: 0; }
.item-chat-titulo { gap: 12px !important; flex: 1; }
.item-chat-titulo .avatar-circle {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, var(--accent) 25%);
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
.item-chat .nome { font-size: 14px !important; letter-spacing: -.015em; }
.item-menu-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 11px !important;
  background: rgba(0,0,0,.13);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.item-menu-btn:hover { transform: scale(1.04); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.item-chat-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 2px 0 54px;
  min-height: 18px;
}
.item-chat .preview {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
.badge-nao-lidas { box-shadow: 0 0 0 3px color-mix(in srgb, #2196f3 13%, transparent); }

/* Home e área vazia com hierarquia visual mais consistente */
.app-main {
  background:
    radial-gradient(ellipse at 82% 0%, rgba(255,180,84,.035), transparent 34%),
    var(--bg);
}
.home-inner { gap: 8px; }
.home-section {
  padding: 24px 0;
  border-radius: 18px;
}
.home-section h2 { letter-spacing: -.035em; }
.empty-conversas {
  border: 1px dashed color-mix(in srgb, var(--border) 85%, var(--accent) 15%);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.018), transparent);
}
.empty-conversas p { max-width: 290px; margin: 0 auto; line-height: 1.75; }

@keyframes home-card-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .app-sidebar { padding: 14px 16px 18px; gap: 14px; }
  .lista-chats { gap: 12px !important; padding: 8px 1px 20px !important; }
  .lista-chats > .item-chat { padding: 13px 12px 12px !important; border-radius: 16px !important; }
  .item-chat-titulo { gap: 12px !important; }
  .item-chat-titulo .avatar-circle { width: 42px; height: 42px; flex-basis: 42px; }
  .item-chat-preview-row { padding-left: 54px; }
  .sidebar-actions { gap: 9px; }
  .sidebar-actions .btn,
  .sidebar-actions button,
  .sidebar-actions .btn-outline { min-height: 47px; }
  .app-main { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .lista-chats > .item-chat { animation: none !important; transition: none !important; }
  .item-chat, .item-menu-btn, .sidebar-actions button, .search-row { transition: none !important; }
}


/* =========================================================
   HOME MOBILE PREMIUM — cards mais claros e legíveis
   Ajustes finais isolados para evitar conflito com regras antigas.
   ========================================================= */
.lista-chats {
  display: flex;
  flex-direction: column;
  gap: 14px !important;
  padding: 10px 2px 22px !important;
}
.lista-chats > .item-chat {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 88px;
  padding: 15px 15px 14px !important;
  margin: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--bg-panel) 96%, white 4%), var(--bg-panel)) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.025) !important;
  animation: home-card-enter .32s ease both;
}
.lista-chats > .item-chat + .item-chat { margin-top: 0 !important; }
.lista-chats > .item-chat .item-chat-topo {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0;
}
.lista-chats > .item-chat .item-chat-titulo {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  flex: 1 1 auto;
  min-width: 0;
}
.lista-chats > .item-chat .item-chat-titulo .avatar-circle {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  margin: 0 !important;
}
.lista-chats > .item-chat .nome {
  display: block;
  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lista-chats > .item-chat .item-menu-btn {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
}
.lista-chats > .item-chat .item-chat-preview-row {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  min-width: 0;
  min-height: 22px;
  /* Avatar (48px) + espaço entre avatar e nome (13px) */
  padding: 0 3px 0 61px !important;
  margin: 0 !important;
}
.lista-chats > .item-chat .preview {
  display: block;
  min-width: 0;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.lista-chats > .item-chat .badge-nao-lidas { flex-shrink: 0; }
.lista-chats > .item-chat:hover,
.lista-chats > .item-chat:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important;
}

@media (max-width: 600px) {
  .app-sidebar { padding: 15px 16px 20px !important; }
  .app-sidebar .search-row,
  .app-sidebar input[type="search"],
  .app-sidebar input[placeholder*="Buscar"] {
    min-height: 52px;
    font-size: 16px !important;
    border-radius: 15px;
  }
  .sidebar-actions { gap: 10px !important; }
  .sidebar-actions .btn,
  .sidebar-actions button,
  .sidebar-actions .btn-outline {
    min-height: 52px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
  }
  .lista-chats { gap: 13px !important; padding: 10px 0 24px !important; }
  .lista-chats > .item-chat {
    padding: 15px 14px 14px !important;
    border-radius: 17px !important;
  }
  .lista-chats > .item-chat .item-chat-titulo { gap: 13px !important; }
  .lista-chats > .item-chat .item-chat-titulo .avatar-circle {
    width: 48px !important; height: 48px !important; flex-basis: 48px !important;
  }
  .lista-chats > .item-chat .nome { font-size: 18px !important; }
  .lista-chats > .item-chat .item-chat-preview-row { padding-left: 61px !important; }
  .lista-chats > .item-chat .preview { font-size: 14.5px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .lista-chats > .item-chat { animation: none !important; transition: none !important; }
}


/* Correção de regressão: player de áudio compacto e wallpaper estável no mobile. */
#mensagens {
  position: relative !important;
  isolation: isolate !important;
  background-color: var(--bg, #0b0d12) !important;
  background-attachment: scroll !important;
}
#mensagens.com-wallpaper::before {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transform: none !important;
}
#mensagens .msg:has(.audio-player) {
  display: block !important;
  box-sizing: border-box !important;
  width: fit-content !important;
  max-width: min(82%, 310px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 10px 6px !important;
  overflow: hidden !important;
}
#mensagens .msg:has(.audio-player) .conteudo {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
#mensagens .msg .audio-player {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: min(270px, 68vw) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
}
#mensagens .msg .audio-player .audio-btn {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
}
#mensagens .msg .audio-player .audio-icone {
  width: 20px !important;
  height: 20px !important;
}
#mensagens .msg .audio-player .audio-meio {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
#mensagens .msg .audio-player .audio-onda {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  gap: 2px !important;
  overflow: hidden !important;
}
#mensagens .msg .audio-player .audio-barra {
  flex: 1 1 2px !important;
  min-width: 2px !important;
  max-width: 4px !important;
  border-radius: 3px !important;
}
#mensagens .msg .audio-player .audio-rodape {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 16px !important;
  margin: 0 !important;
  gap: 6px !important;
}
#mensagens .msg .audio-player .audio-tempo,
#mensagens .msg .audio-player .audio-velocidade {
  font-size: 12px !important;
  line-height: 1.15 !important;
}
#mensagens .msg .audio-player .audio-velocidade {
  flex: 0 0 auto !important;
  padding: 2px 7px !important;
}
#mensagens .msg .audio-player > audio { display: none !important; }
@media (max-width: 600px) {
  #mensagens .msg:has(.audio-player) { max-width: min(84%, 300px) !important; }
  #mensagens .msg .audio-player { width: min(250px, 66vw) !important; }
  #mensagens.com-wallpaper::before { background-position: center center !important; }
}


/* FIX DEFINITIVO: mensagens de mídia e wallpaper estável */
#mensagens {
  position: relative !important;
  isolation: isolate !important;
  overflow-x: hidden !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
}
/* O wallpaper é pintado no próprio scrollport, não num pseudo-elemento que
   pode acompanhar o conteúdo e parecer saltar quando chegam novas mídias. */
#mensagens.com-wallpaper {
  background-image: linear-gradient(rgba(10,12,18,.43), rgba(10,12,18,.58)), var(--chat-wallpaper-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}
#mensagens.com-wallpaper::before {
  content: none !important;
  display: none !important;
}
/* Imagens nunca podem herdar dimensões de vídeo/player ou esticar a bolha. */
#mensagens .msg .conteudo:has(> .msg-imagem) {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#mensagens .msg .msg-imagem {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: min(220px, 58vw) !important;
  max-height: 320px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  margin: 0 !important;
}
#mensagens .msg:has(.audio-player) {
  display: block !important;
  width: fit-content !important;
  max-width: min(82%, 300px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 10px 6px !important;
  overflow: hidden !important;
}
#mensagens .msg:has(.audio-player) .conteudo,
#mensagens .msg .audio-player {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
}
#mensagens .msg .audio-player {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 9px !important;
  width: min(250px, 64vw) !important;
  max-width: 100% !important;
  padding: 0 !important;
}
#mensagens .msg .audio-player .audio-btn {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
}
#mensagens .msg .audio-player .audio-meio {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 3px !important;
}
#mensagens .msg .audio-player .audio-onda {
  height: 23px !important;
  min-height: 23px !important;
  max-height: 23px !important;
  overflow: hidden !important;
}
#mensagens .msg .audio-player .audio-rodape {
  min-height: 16px !important;
  margin: 0 !important;
}
/* Oculta apenas mensagens realmente sem conteúdo, sem afetar mensagens de texto apagadas. */
#mensagens .msg:has(> .conteudo:empty):not(:has(.hora)):not(:has(.acoes)),
#mensagens .msg:has(> .conteudo .audio-player:empty) {
  display: none !important;
}
@media (max-width: 600px) {
  #mensagens.com-wallpaper { background-position: center center !important; }
  #mensagens .msg .msg-imagem { max-width: min(220px, 58vw) !important; max-height: 300px !important; }
  #mensagens .msg:has(.audio-player) { max-width: min(82%, 300px) !important; }
  #mensagens .msg .audio-player { width: min(250px, 64vw) !important; }
}

/* =========================================================
   CORREÇÕES: modais, balões de mídia, botão de responder, arquivos
   (fica no fim do arquivo de propósito, pra vencer o que veio antes)
   ========================================================= */

/* Modal sempre acima do cabeçalho do chat (120), dropdowns (300) e painel de aparência (1000) */
.modal-overlay { z-index: 2000; }

/* Balão nunca é espremido pelo contêiner flex da conversa */
#mensagens .msg { flex-shrink: 0; }

/* Mídia: sem pre-wrap, que transformava espaço/quebra do HTML em linhas em branco */
.msg .conteudo.conteudo-midia { white-space: normal; }

/* Botão de responder fica FORA do balão, centralizado, sem cobrir o conteúdo */
#mensagens .msg .btn-responder-rapido {
  top: 50%;
  left: auto;
  right: -34px;
  transform: translateY(-50%);
}
#mensagens .msg.minha .btn-responder-rapido { right: auto; left: -34px; }
#mensagens .msg.arrastando .btn-responder-rapido,
.mensagens.selecionando .msg .btn-responder-rapido { opacity: 0; pointer-events: none; }

/* Cartão de arquivo: ícone do tipo + nome */
.arq-cartao {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  max-width: 280px;
  padding: 2px 0;
  color: inherit;
  text-decoration: none;
}
.arq-icone { width: 36px; height: 44px; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.28)); }
.arq-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.arq-nome {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.arq-cartao:hover .arq-nome { text-decoration: underline; }
.arq-sub { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; opacity: .72; }

/* Menus do topo (⋮ da conta e troca de conta) ficam acima do cabeçalho do chat (z-index 120).
   Sem isso, o .topbar não cria camada própria e os menus (z-index 80) passavam por baixo. */
.topbar { position: relative; z-index: 500; }
/* menu flutuante da lista de conversas e avisos (toast) também acima de tudo, inclusive do modal (2000) */
#menu-flutuante { z-index: 600; }
.toast { z-index: 3000; }

/* ===== Barra de mensagem: anexo + (microfone | enviar) ===== */
.input-area #btn-anexo,.input-area #btn-enviar,.input-area #btn-audio,.input-area #btn-video{width:48px;min-width:48px;height:48px;min-height:48px;flex:0 0 48px;display:grid;place-items:center;padding:0;border:1px solid var(--border);border-radius:15px;background:var(--glass);color:var(--text-muted);box-shadow:none}
.input-area #btn-enviar{background:var(--accent);border-color:transparent;color:var(--accent-contrast)}
.input-area #btn-enviar span{display:none}
.input-area #btn-anexo:hover,.input-area #btn-audio:hover,.input-area #btn-video:hover{border-color:var(--accent);color:var(--text)}
.input-area #btn-enviar:hover{background:#ffc478;color:#17120b}
@media (max-width:900px), (pointer:coarse){
  /* celular/touch: barra + clipe + microfone. Digitou algo, o microfone dá lugar ao enviar. No PC fica como estava. */
  .input-area #btn-video{display:none!important}
  .input-area #btn-enviar{display:none!important}
  .input-area.digitando #btn-enviar{display:grid!important}
  .input-area.digitando #btn-audio{display:none!important}
  .input-area #btn-anexo,.input-area #btn-enviar,.input-area #btn-audio{width:44px;min-width:44px;flex-basis:44px;height:46px;min-height:46px;border-radius:14px}
}
.input-area #input-anexo{display:none!important}

/* Autenticação premium: verificação e acesso Google */
.auth-google-btn{width:100%;min-height:50px;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(255,255,255,.045);color:var(--auth-text,#f5f6f8);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:transform .22s ease,border-color .22s ease,background .22s ease}
.auth-google-btn:hover{transform:translateY(-2px);border-color:rgba(199,243,107,.6);background:rgba(199,243,107,.07)}
.google-g{display:block;width:21px;height:21px;flex:0 0 21px;border-radius:0;background:transparent;box-shadow:none}
.auth-layout-verify{width:min(500px,100%);display:flex;justify-content:center}.auth-verify-card{width:100%;animation:verifyCardIn .55s cubic-bezier(.2,.8,.2,1) both}.verify-orbit{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;margin:4px auto 18px;background:linear-gradient(145deg,rgba(199,243,107,.2),rgba(114,228,189,.06));border:1px solid rgba(199,243,107,.35);color:var(--auth-lime,#c7f36b);font-size:38px;box-shadow:0 0 44px rgba(199,243,107,.1);animation:verifyFloat 3.4s ease-in-out infinite}.verify-code-input{width:100%;text-align:center;letter-spacing:.55em;font-size:28px!important;font-weight:800!important;padding-left:.55em!important;font-variant-numeric:tabular-nums}.verify-help{font-size:12px;line-height:1.65;color:var(--text-muted,#9da5b5);text-align:center;margin:18px 0 6px;max-width:420px;margin-left:auto;margin-right:auto}.perfil-contato-virtual{display:flex!important;align-items:center;gap:10px}.perfil-numero-copiar{margin-left:auto;border:0;background:transparent;color:inherit;font-size:17px;cursor:pointer;padding:4px 8px;border-radius:8px}.perfil-numero-copiar:hover{background:rgba(255,255,255,.08)}
@keyframes verifyCardIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes verifyFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.verify-orbit,.auth-verify-card{animation:none!important}.auth-google-btn{transition:none!important}}

/* Número de contato virtual fixo no editor de perfil */
.perfil-contato-fixo { padding: 13px 14px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(135deg, var(--bg-panel), var(--bg)); }
.perfil-numero-fixo-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); }
.perfil-numero-fixo-linha strong { color: var(--accent-text, var(--accent)); font-size: 20px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.perfil-numero-fixo-linha .btn-outline { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }

/* Texto auxiliar compacto do número virtual do perfil */
.perfil-contato-fixo > small{display:block;font-size:10px;line-height:1.4;margin-top:7px;color:var(--text-muted,#9da5b5)}


/* ChatDevs premium message reactions, pinned messages and archive actions */
#mensagens .msg { position:relative; overflow:visible; }
.message-reactions { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:5px; min-height:0; }
.message-reactions:not(.tem-reacoes) { min-height:0; }
.reaction-chip { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:29px; height:27px; padding:3px 7px; border:1px solid color-mix(in srgb,var(--border) 78%,transparent); border-radius:999px; background:color-mix(in srgb,var(--bg-panel) 88%,transparent); color:var(--text); font-size:11px; font-weight:600; line-height:1; cursor:pointer; box-shadow:0 2px 7px rgba(0,0,0,.10); transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.reaction-chip:hover { transform:translateY(-2px); border-color:var(--accent); }
.reaction-chip.minha-reacao { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 18%,var(--bg-panel)); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent); }
.reaction-chip img,.reaction-option img { display:block; width:20px; height:20px; object-fit:contain; image-rendering:auto; }
.reaction-chip span { min-width:7px; }
.reaction-picker { display:none; position:absolute; z-index:80; bottom:calc(100% + 9px); left:0; align-items:center; gap:3px; padding:7px; border:1px solid color-mix(in srgb,var(--border) 85%,transparent); border-radius:18px; background:color-mix(in srgb,var(--bg-panel) 94%,#10131b); box-shadow:0 14px 38px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); animation:reactionPickerIn .16s ease both; }
.reaction-picker.aberto { display:flex; }
.reaction-option { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; padding:5px; border:0; border-radius:11px; background:transparent; cursor:pointer; transition:transform .15s ease,background .15s ease; }
.reaction-option:hover,.reaction-option:focus-visible { outline:0; background:color-mix(in srgb,var(--accent) 15%,transparent); transform:scale(1.14); }
.reaction-option img { width:23px; height:23px; }
.msg-fixada { display:flex; align-items:center; gap:6px; margin:-2px 0 8px; color:var(--accent-text,var(--accent)); font-size:10px; font-weight:800; letter-spacing:.025em; }
.msg-fixada .mdi { font-size:13px; }
@keyframes reactionPickerIn { from { opacity:0; transform:translateY(5px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
#menu-flutuante .dropdown-item .mdi { width:19px; flex:0 0 19px; font-size:18px; color:var(--accent-text,var(--accent)); }
.item-chat .preview .mdi-pin-outline { color:var(--accent-text,var(--accent)); font-size:12px; }
@media(max-width:600px) {
  .reaction-picker { max-width:calc(100vw - 44px); gap:1px; padding:5px; }
  .reaction-option { width:32px; height:32px; flex-basis:32px; }
  .reaction-option img { width:22px; height:22px; }
  .reaction-chip { height:26px; }
}
@media(prefers-reduced-motion:reduce) { .reaction-picker,.reaction-chip,.reaction-option { animation:none!important; transition:none!important; } }
@media(max-width:600px) {
  #mensagens .msg .acoes { display:flex; flex-wrap:wrap; gap:8px; opacity:.88; }
  #mensagens .msg .acoes span { padding:3px 0; }
}


/* Chat interactions: actions stay hidden until long-press/context menu. */
#mensagens .msg .acoes { display:none !important; opacity:0; pointer-events:none; }
#mensagens .msg.menu-mensagem-aberto .acoes { display:flex !important; opacity:1; pointer-events:auto; animation:msgActionsIn .16s ease both; }
#mensagens .msg { -webkit-touch-callout:none; }
#mensagens .msg.menu-mensagem-aberto { z-index:12; }
#mensagens .msg .btn-responder-rapido { display:none !important; }
@keyframes msgActionsIn { from { opacity:0; transform:translateY(5px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Quick reaction rail appears only after double-tap; plus opens the full emoji keyboard. */
.reaction-picker { display:none !important; }
.reaction-picker.aberto { display:flex !important; }
.reaction-picker.completo { display:block !important; width:min(344px, calc(100vw - 42px)); max-height:min(310px, 44vh); overflow:hidden; padding:8px; }
.reaction-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:2px; max-height:calc(min(310px, 44vh) - 43px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.reaction-grid .reaction-option { width:100%; min-width:0; height:34px; padding:4px; }
.reaction-grid .reaction-option img { width:23px; height:23px; }
.reaction-picker-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 3px 1px; color:var(--text-muted); font-size:10px; border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent); }
.reaction-more { border:1px solid color-mix(in srgb,var(--border) 75%,transparent); background:color-mix(in srgb,var(--bg-panel) 85%,white 4%); color:var(--text); font-size:19px; }
.reaction-close { border:0; background:transparent; color:var(--text-muted); font-size:19px; cursor:pointer; }
@media(max-width:600px) { .reaction-picker.completo { left:0; width:min(344px,calc(100vw - 38px)); } .reaction-grid { grid-template-columns:repeat(7,minmax(0,1fr)); } }

/* WhatsApp-like pinned message index above the conversation history. */
.mensagem-fixada-topo { display:flex; align-items:center; gap:10px; width:100%; min-width:0; padding:10px 15px; text-align:left; border:0; border-bottom:1px solid color-mix(in srgb,var(--border) 75%,transparent); background:color-mix(in srgb,var(--bg-panel) 96%,#fff 2%); color:var(--text); cursor:pointer; }
.pin-banner-icon { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border:1px solid color-mix(in srgb,var(--accent) 25%,var(--border)); border-radius:10px; color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,transparent); }
.pin-banner-copy { display:flex; flex:1; flex-direction:column; gap:2px; min-width:0; }
.pin-banner-copy strong { font-size:11px; font-weight:750; letter-spacing:.02em; }
.pin-banner-copy small { overflow:hidden; color:var(--text-muted); font-size:11px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.pin-banner-arrow { color:var(--text-muted); font-size:19px; }
#mensagens .msg-destacada { animation:pinnedMessageFlash 1.4s ease; }
@keyframes pinnedMessageFlash { 0%,100% { filter:none; } 30%,65% { filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 42%,transparent)); } }

/* Compact matte conversation cards and archive shortcut at the top. */
.lista-chats { gap:6px !important; padding:6px 1px 16px !important; }
.lista-chats > .item-chat { gap:5px !important; min-height:0 !important; padding:10px 11px !important; border:1px solid #343943 !important; border-radius:14px !important; background:linear-gradient(145deg,#191c22,#15171c) !important; box-shadow:0 3px 10px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.018) !important; }
.lista-chats > .item-chat:hover,.lista-chats > .item-chat:focus-within { transform:none; border-color:#4b5361 !important; box-shadow:0 5px 13px rgba(0,0,0,.2) !important; }
.lista-chats > .item-chat.ativo { border-color:#596170 !important; background:linear-gradient(145deg,#20242b,#191c22) !important; }
.lista-chats > .item-chat .item-chat-titulo { gap:10px !important; }
.lista-chats > .item-chat .item-chat-titulo .avatar-circle { width:39px !important; height:39px !important; flex-basis:39px !important; }
.lista-chats > .item-chat .nome { font-size:13px !important; line-height:1.25 !important; font-weight:700 !important; }
.lista-chats > .item-chat .item-menu-btn { width:28px !important; height:28px !important; flex-basis:28px !important; border-radius:9px !important; }
.lista-chats > .item-chat .item-chat-preview-row { padding:0 1px 0 49px !important; gap:8px !important; min-height:16px !important; }
.lista-chats > .item-chat .preview { min-width:0; flex:1; font-size:11px !important; line-height:1.35 !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-chat-meta { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex:0 0 auto; }
.item-chat-meta time { color:#8c94a3; font-size:10px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.item-chat-meta .badge-nao-lidas { min-width:17px; height:17px; padding:0 4px; font-size:9px; }
.caixa-arquivadas { display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; margin:0 0 4px; border:1px solid #343943; border-radius:13px; background:linear-gradient(145deg,#202329,#181a20); color:var(--text); text-align:left; cursor:pointer; }
.caixa-arquivadas-icone { display:grid; place-items:center; width:37px; height:37px; flex:0 0 37px; border-radius:11px; color:#c2c8d2; background:#2b3039; font-size:19px; }
.caixa-arquivadas-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; }
.caixa-arquivadas-copy strong { font-size:12px; font-weight:750; }
.caixa-arquivadas-copy small { color:var(--text-muted); font-size:10px; }
.caixa-arquivadas > .mdi-chevron-right { color:var(--text-muted); font-size:18px; }
@media(max-width:600px) { .lista-chats { gap:6px !important; padding:5px 0 14px !important; } .lista-chats > .item-chat { padding:9px 10px !important; } .lista-chats > .item-chat .item-chat-titulo .avatar-circle { width:37px !important; height:37px !important; flex-basis:37px !important; } .lista-chats > .item-chat .item-chat-preview-row { padding-left:47px !important; } }
@media(prefers-reduced-motion:reduce) { #mensagens .msg.menu-mensagem-aberto .acoes,.msg-destacada { animation:none !important; } }

.item-chat-meta time { display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.item-chat-time-hour { color:#c4cad4; font-size:10px; line-height:1.2; }
.item-chat-time-date { color:#777f8e; font-size:9px; line-height:1.2; }


/* Setinha ▾ do PC desativada: menu abre por clique direito ou clicar e segurar */
#mensagens .msg .btn-menu-msg { display:none !important; }
#mensagens .msg { -webkit-user-select:text; user-select:text; }

/* Menu aberto: sem contorno retangular, só um brilho suave no balão */
#mensagens .msg.menu-mensagem-aberto { box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent), 0 6px 18px rgba(0,0,0,.25); }
#mensagens .msg.menu-mensagem-aberto .conteudo { outline:none !important; }


/* ===== Lote 1: separador de data, seletor de reação global, fixar com prazo, mídias e links ===== */
.msg-data-sep { align-self:center; display:flex; justify-content:center; margin:10px 0 6px; }
.msg-data-sep span { padding:4px 12px; border-radius:999px; background:color-mix(in srgb,var(--bg-panel) 92%,transparent); border:1px solid color-mix(in srgb,var(--border) 70%,transparent); color:var(--text-muted); font-size:11px; font-weight:600; letter-spacing:.01em; }

#reaction-picker-global { z-index:9999; }

.opcoes-duracao { display:flex; flex-direction:column; gap:8px; margin:6px 0 12px; }
.opcao-duracao { display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:12px; background:transparent; color:var(--text); font:inherit; font-size:14px; cursor:pointer; text-align:left; transition:border-color .15s ease,background .15s ease; }
.opcao-duracao:hover,.opcao-duracao:focus-visible { outline:0; border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.opcao-duracao .mdi { font-size:19px; color:var(--accent-text,var(--accent)); }

.modal-box--midias { max-width:480px; }
.midias-abas { display:flex; gap:6px; margin:0 0 12px; }
.midias-aba { flex:1; padding:8px 10px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--text-muted); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.midias-aba.ativa { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--text); }
.midias-conteudo { max-height:min(55vh,420px); overflow-y:auto; margin-bottom:10px; overscroll-behavior:contain; }
.midias-vazio { margin:18px 0 6px; text-align:center; color:var(--text-muted); font-size:13px; }
.midias-nota { margin:0 0 6px; text-align:center; color:var(--text-muted); font-size:11px; opacity:.8; }
.midias-grade { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.midias-item { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:color-mix(in srgb,var(--bg-panel) 80%,#000 10%); cursor:pointer; }
.midias-item img,.midias-item video { width:100%; height:100%; object-fit:cover; display:block; }
.midias-play { position:absolute; inset:0; display:grid; place-items:center; font-size:30px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6); pointer-events:none; }
.midias-item--expirada { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--text-muted); cursor:default; }
.midias-item--expirada .mdi { font-size:22px; }
.midias-lista { display:flex; flex-direction:column; gap:6px; }
.midias-linha { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.midias-linha:hover:not(:disabled) { border-color:var(--accent); }
.midias-linha:disabled,.midias-linha--expirada { opacity:.55; cursor:default; }
.midias-linha .mdi { font-size:20px; flex:0 0 20px; color:var(--accent-text,var(--accent)); }
.midias-linha-txt { display:flex; flex-direction:column; min-width:0; gap:2px; }
.midias-linha-txt strong { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.midias-linha-txt small { font-size:11px; color:var(--text-muted); }


/* ===== Pré-visualização de mídia + editor de foto ===== */
.previa-overlay { position:fixed; inset:0; z-index:2500; display:flex; flex-direction:column; background:rgba(8,10,15,.97); color:var(--text); padding-top:env(safe-area-inset-top); touch-action:manipulation; }
.previa-topo { display:flex; align-items:center; gap:10px; padding:10px 12px; }
.previa-fechar { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--border); border-radius:13px; background:var(--glass); color:var(--text); font-size:22px; cursor:pointer; }
.previa-titulo { font-size:14px; font-weight:700; color:var(--text-muted); }
.previa-palco { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:6px 12px; }
.previa-palco--arquivo { flex-direction:column; gap:8px; text-align:center; }
.previa-palco--arquivo strong { max-width:90%; word-break:break-word; font-size:15px; }
.previa-palco--arquivo small { color:var(--text-muted); }
.previa-palco--arquivo audio { width:min(360px,90%); margin-top:10px; }
.previa-icone { font-size:64px; color:var(--accent-text,var(--accent)); }
.previa-midia { max-width:100%; max-height:100%; border-radius:12px; object-fit:contain; }
.previa-wrap { position:relative; display:inline-block; max-width:100%; max-height:100%; line-height:0; }
.previa-wrap canvas { display:block; max-width:100%; max-height:calc(100vh - 250px); max-height:calc(100dvh - 250px); border-radius:10px; touch-action:none; }
.previa-corte { position:absolute; border:2px solid #fff; box-shadow:0 0 0 9999px rgba(0,0,0,.55); touch-action:none; cursor:move; box-sizing:border-box; }
.previa-corte i { position:absolute; width:26px; height:26px; background:#fff; border-radius:50%; box-shadow:0 1px 6px rgba(0,0,0,.5); }
.previa-corte i[data-h="nw"] { left:-13px; top:-13px; cursor:nwse-resize; }
.previa-corte i[data-h="ne"] { right:-13px; top:-13px; cursor:nesw-resize; }
.previa-corte i[data-h="sw"] { left:-13px; bottom:-13px; cursor:nesw-resize; }
.previa-corte i[data-h="se"] { right:-13px; bottom:-13px; cursor:nwse-resize; }
.previa-ferramentas { display:flex; justify-content:center; gap:10px; padding:8px 12px; }
.previa-ferramentas button { display:flex; align-items:center; gap:7px; padding:9px 16px; border:1px solid var(--border); border-radius:999px; background:var(--glass); color:var(--text); font:inherit; font-size:13px; font-weight:650; cursor:pointer; }
.previa-ferramentas button:hover { border-color:var(--accent); }
.previa-ferramentas .mdi { font-size:18px; color:var(--accent-text,var(--accent)); }
.previa-barra { display:flex; justify-content:center; gap:10px; padding:12px; }
.previa-barra--texto { flex-direction:column; align-items:stretch; max-width:520px; width:100%; margin:0 auto; box-sizing:border-box; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
.previa-barra--texto input { height:44px; padding:0 14px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.06); color:var(--text); font:inherit; font-size:14px; outline:none; }
.previa-barra--texto input:focus { border-color:var(--accent); }
.previa-cores { display:flex; justify-content:center; gap:10px; }
.previa-cor { width:30px; height:30px; border-radius:50%; border:2px solid rgba(255,255,255,.35); cursor:pointer; padding:0; }
.previa-cor.ativa { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent); }
.previa-linha-texto { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.previa-rodape { display:flex; align-items:center; gap:10px; padding:10px 12px calc(12px + env(safe-area-inset-bottom)); }
.previa-rodape input { flex:1; min-width:0; height:48px; padding:0 15px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.06); color:var(--text); font:inherit; font-size:14px; outline:none; }
.previa-rodape input:focus { border-color:var(--accent); }
.previa-rodape-espaco { flex:1; }
.previa-enviar { width:50px; height:50px; flex:0 0 50px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--accent); color:var(--accent-contrast); font-size:23px; cursor:pointer; }
.previa-enviar:disabled { opacity:.7; cursor:default; }
.previa-overlay .oculto { display:none !important; }
.legenda-midia { margin-top:6px; }


/* Mitto premium refinement: restrained lime, consistent scale and app-like density. */
:root { --mitto-lime:#c7f36b; --mitto-lime-soft:rgba(199,243,107,.12); }
.auth-screen { --auth-lime:var(--mitto-lime); background:radial-gradient(ellipse at 80% 10%,rgba(199,243,107,.075),transparent 34%),#090b0e; padding:clamp(16px,3vw,36px); }
.auth-screen::before { opacity:.055; background-size:24px 24px; }
.auth-ambient-one,.auth-ambient-two { opacity:.45; }
.auth-layout { width:min(980px,100%); grid-template-columns:minmax(0,1fr) minmax(340px,410px); gap:clamp(28px,5vw,72px); }
.auth-story { min-height:440px; }
.auth-story h2 { font-size:clamp(32px,3.7vw,49px); line-height:1.13; letter-spacing:-1.9px; }
.auth-story-copy p { font-size:14px; line-height:1.75; }
.auth-card { padding:clamp(22px,3vw,30px); border-radius:20px; border-color:rgba(255,255,255,.09); background:rgba(17,20,25,.88); box-shadow:0 22px 60px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035); backdrop-filter:blur(16px); }
.auth-card::before { left:22%;right:22%;opacity:.5; }
.auth-card-top { padding-bottom:19px; }
.auth-heading { margin:22px 0 22px; }
.auth-heading h1 { font-size:clamp(23px,2vw,28px); letter-spacing:-.8px; }
.auth-card .campo { min-height:47px; border-radius:10px; }
.auth-submit { min-height:47px; border-radius:10px; box-shadow:none; }
.auth-submit:hover { box-shadow:0 5px 18px rgba(199,243,107,.12); }
.auth-google-btn { min-height:45px; border-radius:10px; }
.auth-card-bottom { margin-top:18px; padding-top:14px; }
/* Responsive density across the actual app, without changing its behavior. */
.app-shell { --accent:#c7f36b; }
.topbar { min-height:56px; padding-inline:clamp(12px,2vw,24px); }
.topbar-brand { gap:8px; }
.topbar-brand img { width:22px;height:22px; }
.topbar-brand span { font-size:16px; }
.app-body { min-height:0; }
.app-sidebar { width:clamp(280px,29vw,350px); min-width:0; }
.sidebar-actions { gap:7px; }
.sidebar-actions .btn-ok,.sidebar-actions .btn-outline { min-height:40px; border-radius:10px; }
.search-row { gap:6px; }
#busca-input { min-height:42px; border-radius:11px; }
.lista-chats { padding:6px 8px; }
.chat-header { min-height:62px; padding:12px clamp(12px,2vw,22px); }
.chat-header-info { min-width:0; }
.chat-header-contact-copy span { font-size:14px; }
.chat-header-contact-copy small { font-size:11px; }
.input-area { gap:8px; padding:12px clamp(10px,2vw,18px); }
.input-area textarea { min-height:42px; max-height:120px; border-radius:13px; }
.home-inner { width:min(100%,900px); padding:clamp(16px,3vw,32px); }
.home-section { border-radius:15px; padding:clamp(14px,2vw,20px); margin-bottom:14px; }
.home-section h2 { font-size:clamp(14px,1.2vw,17px); margin-bottom:10px; }
/* Profile editor additions */
.perfil-banner-editor { min-height:104px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; padding:15px; border:1px dashed var(--border); border-radius:14px; background-color:rgba(255,255,255,.025); background-size:cover; background-position:center; color:var(--text-muted); }
.perfil-banner-editor::before { content:""; position:absolute; inset:0; background:rgba(8,10,14,.56); opacity:0; transition:opacity .2s; }
.perfil-banner-editor.tem-banner::before { opacity:1; }
.perfil-banner-editor > * { position:relative; z-index:1; }
.perfil-banner-editor > .mdi { font-size:20px; }
.perfil-banner-editor .btn-outline { min-height:34px; padding:7px 11px; font-size:11px; }
.perfil-detalhes-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.perfil-detalhes-grid select { width:100%; min-width:0; box-sizing:border-box; min-height:42px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--bg,#10121a); color:var(--text); font:inherit; }
.perfil-campo-full { grid-column:1/-1; }
.perfil-publico-banner { height:clamp(100px,22vw,160px); margin:-2px -2px 10px; border-radius:15px; background-size:cover; background-position:center; position:relative; overflow:hidden; }
.perfil-publico-banner::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(12,14,18,.35)); }
.perfil-meta-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:6px; }
.perfil-meta-item { min-width:0; display:flex; align-items:center; gap:9px; padding:10px 11px; border:1px solid var(--border); border-radius:11px; color:var(--text); font-size:12px; overflow-wrap:anywhere; background:rgba(127,127,127,.035); }
.perfil-meta-item .mdi { flex:0 0 auto; color:var(--accent); font-size:17px; }
@media (max-width:850px) {
 .auth-screen { padding:22px 18px; }
 .auth-layout { grid-template-columns:minmax(0,1fr) minmax(320px,390px); gap:24px; }
 .auth-story { min-height:400px; }
 .auth-story h2 { font-size:clamp(30px,4.2vw,40px); letter-spacing:-1.4px; }
 .auth-card { padding:24px 21px; }
 .app-sidebar { width:clamp(260px,34vw,310px); }
}
@media (max-width:650px) {
 .auth-screen { padding: max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom)); overflow-y:auto; align-items:flex-start; }
 .auth-layout { width:min(420px,100%); margin:auto; }
 .auth-card { margin-top:18px; padding:22px 19px 17px; border-radius:17px; }
 .auth-heading { margin:20px 0; }
 .auth-heading h1 { font-size:24px; }
 .auth-card .campo { min-height:46px; font-size:13px; }
 .auth-card-bottom { font-size:9px; }
 .app-sidebar { width:100%; }
 .home-inner { padding:14px; }
 .home-section { padding:14px; margin-bottom:10px; }
 .perfil-detalhes-grid { gap:10px; }
 .modal-box--perfil-editor,.perfil-publico-card { width:calc(100vw - 16px); max-height:calc(100dvh - 20px); padding:15px; border-radius:16px; }
 .perfil-editor-avatar { width:82px;height:82px;font-size:27px; }
 .perfil-editor-campos { gap:11px; }
 .perfil-banner-editor { min-height:86px; }
 .perfil-meta-item { padding:9px; font-size:11px; }
}
@media (max-width:360px) {
 .auth-screen { padding-inline:10px; }
 .auth-card { padding:19px 15px 15px; }
 .perfil-detalhes-grid { grid-template-columns:minmax(0,1fr); }
 .perfil-campo-full { grid-column:auto; }
 .perfil-meta-grid { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
 .auth-ambient-one,.auth-ambient-two,.auth-story,.auth-card,.perfil-banner-editor::before { animation:none!important; transition:none!important; }
}

/* ================================================================
   MITTO / VISUAL SYSTEM 02 — editorial, compact, product-first
   A single finishing layer; existing interactions and layout contracts stay intact.
   ================================================================ */
:root {
  --mitto-lime:#c8f169;
  --mitto-lime-rgb:200,241,105;
  --accent:#c8f169;
  --accent-text:#c8f169;
  --accent-dim:#a6cf4b;
  --accent-contrast:#10140a;
  --font-ui:'DM Sans',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Manrope','DM Sans',sans-serif;
  --surface-1:#111419;
  --surface-2:#171b21;
  --surface-3:#1c2129;
  --line-soft:rgba(255,255,255,.075);
  --line-strong:rgba(255,255,255,.12);
}
html { color-scheme:dark; }
body { font-family:var(--font-ui); letter-spacing:-.012em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button,input,textarea,select { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--mitto-lime); outline-offset:3px; }
::selection { background:rgba(var(--mitto-lime-rgb),.25); color:#f7f9f2; }

/* Quiet, tactile controls */
.btn-ok,.btn-outline,.menu-dots-btn,.search-options-btn,.item-menu-btn,.chat-back-btn {
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.btn-ok { background:var(--mitto-lime); color:#14180c; border:1px solid rgba(var(--mitto-lime-rgb),.7); font-weight:750; }
.btn-ok:hover { background:#d6ff80; box-shadow:0 5px 18px rgba(var(--mitto-lime-rgb),.12); transform:translateY(-1px); }
.btn-outline { border-color:var(--line-strong); background:rgba(255,255,255,.025); }
.btn-outline:hover { border-color:rgba(var(--mitto-lime-rgb),.35); background:rgba(var(--mitto-lime-rgb),.06); }
input,textarea,select { accent-color:var(--mitto-lime); }

/* App chrome */
.app-shell { background:#0b0d10; color:#edf0e9; --accent:var(--mitto-lime); }
.topbar { min-height:60px; padding:0 clamp(14px,2vw,28px); background:rgba(13,15,18,.94); border-bottom:1px solid var(--line-soft); box-shadow:0 8px 26px rgba(0,0,0,.12); backdrop-filter:blur(18px); }
.topbar-brand { gap:10px; }
.topbar-brand img { width:25px; height:25px; filter:drop-shadow(0 0 10px rgba(var(--mitto-lime-rgb),.12)); }
.topbar-brand span { font-family:var(--font-display); font-size:17px; font-weight:800; letter-spacing:-.055em; }
.topbar-right { gap:10px; }
#avatar-topo { border:1px solid rgba(var(--mitto-lime-rgb),.28); box-shadow:0 0 0 3px rgba(var(--mitto-lime-rgb),.045); }
.app-body { background:#0b0d10; }
.app-sidebar { background:#101216; border-right:1px solid var(--line-soft); }
.search-row { padding:14px 14px 10px; gap:7px; }
#busca-input { background:#171a20; border:1px solid #292e36; color:#eef1e9; min-height:43px; padding-inline:13px; font-size:13px; border-radius:12px; transition:border-color .18s,box-shadow .18s,background .18s; }
#busca-input::placeholder { color:#747b85; }
#busca-input:focus { border-color:rgba(var(--mitto-lime-rgb),.42); background:#191d23; box-shadow:0 0 0 3px rgba(var(--mitto-lime-rgb),.07); outline:0; }
.search-options-btn { width:37px; min-width:37px; height:39px; border:1px solid transparent; border-radius:10px; color:#9da4ae; background:transparent; }
.search-options-btn:hover,.menu-dots-btn:hover { color:var(--mitto-lime); background:rgba(var(--mitto-lime-rgb),.07); border-color:rgba(var(--mitto-lime-rgb),.15); }
.sidebar-actions { padding:4px 14px 13px; gap:8px; }
.sidebar-actions .btn-ok,.sidebar-actions .btn-outline { min-height:39px; font-size:12px; font-weight:700; letter-spacing:-.01em; }
.sidebar-actions .btn-ok { box-shadow:0 4px 12px rgba(var(--mitto-lime-rgb),.07); }
.lista-chats { padding:5px 9px 18px !important; gap:5px !important; }
.lista-chats > .item-chat { position:relative; border:1px solid transparent !important; background:transparent !important; border-radius:13px !important; padding:10px 10px !important; box-shadow:none !important; transition:background .18s ease,border-color .18s ease !important; }
.lista-chats > .item-chat::before { display:none !important; }
.lista-chats > .item-chat:hover,.lista-chats > .item-chat:focus-within { background:rgba(255,255,255,.035) !important; border-color:rgba(255,255,255,.055) !important; transform:none !important; }
.lista-chats > .item-chat.ativo { background:linear-gradient(100deg,rgba(var(--mitto-lime-rgb),.095),rgba(var(--mitto-lime-rgb),.025)) !important; border-color:rgba(var(--mitto-lime-rgb),.18) !important; }
.lista-chats > .item-chat .item-chat-titulo { gap:10px !important; }
.lista-chats > .item-chat .item-chat-titulo .avatar-circle { width:40px !important; height:40px !important; flex-basis:40px !important; border:1px solid rgba(255,255,255,.09); box-shadow:none; }
.lista-chats > .item-chat .nome { color:#e9ece5; font-family:var(--font-ui); font-size:13px !important; font-weight:700 !important; letter-spacing:-.025em; }
.lista-chats > .item-chat .item-chat-preview-row { padding-left:50px !important; gap:8px !important; }
.lista-chats > .item-chat .preview { color:#858c96; font-size:11.5px !important; line-height:1.45 !important; }
.lista-chats > .item-chat .item-chat-meta time { color:#747b85; font-size:10px; }
.lista-chats > .item-chat .item-menu-btn { color:#7e858e; border:1px solid transparent; background:transparent; }
.lista-chats > .item-chat .item-menu-btn:hover { color:var(--mitto-lime); background:rgba(var(--mitto-lime-rgb),.07); border-color:rgba(var(--mitto-lime-rgb),.13); }
.badge-nao-lidas { background:var(--mitto-lime) !important; color:#15190d !important; font-size:10px !important; font-weight:800 !important; box-shadow:0 0 0 3px rgba(var(--mitto-lime-rgb),.07); }
.caixa-arquivadas { width:100%; border:1px solid rgba(255,255,255,.07); background:#171a20; border-radius:12px; padding:10px 12px; margin:1px 0 5px; color:#e9ece5; display:flex; align-items:center; gap:10px; text-align:left; transition:border-color .18s,background .18s; }
.caixa-arquivadas:hover { background:#1b2026; border-color:rgba(var(--mitto-lime-rgb),.22); }
.caixa-arquivadas-icone { width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(var(--mitto-lime-rgb),.08);color:var(--mitto-lime);font-size:17px; }
.caixa-arquivadas-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.caixa-arquivadas-copy strong { font-size:12px; }
.caixa-arquivadas-copy small { color:#858c96; font-size:10px; }
.empty-conversas { padding:24px 18px; }
.empty-conversas p { max-width:250px; margin:auto; color:#858c96; font-size:12px; line-height:1.7; }

/* Main home: bespoke landing surface inside the app, not a marketing website */
.app-main { min-width:0; padding:clamp(18px,3.1vw,42px); background:radial-gradient(ellipse at 83% 3%,rgba(var(--mitto-lime-rgb),.045),transparent 28%),#0b0d10; }
.home-inner { width:min(100%,1000px); max-width:1000px; gap:0; padding:0; }
.home-hero { position:relative; isolation:isolate; overflow:hidden; border:1px solid rgba(255,255,255,.09); border-radius:22px; padding:clamp(20px,3vw,34px); background:linear-gradient(115deg,#171b20 0%,#12151a 58%,#171c1a 100%); box-shadow:0 22px 60px rgba(0,0,0,.19),inset 0 1px rgba(255,255,255,.035); }
.home-hero::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(110deg,#000,transparent 78%); }
.home-hero-glow { position:absolute; z-index:-1; width:340px;height:340px;right:7%;top:-54%;border-radius:50%;background:rgba(var(--mitto-lime-rgb),.09);filter:blur(64px);pointer-events:none; }
.home-hero-topline { display:flex;align-items:center;gap:9px;color:#9da49b;font-size:9px;font-weight:800;letter-spacing:.17em; }
.home-live-dot { width:6px;height:6px;border-radius:50%;background:var(--mitto-lime);box-shadow:0 0 0 4px rgba(var(--mitto-lime-rgb),.09);animation:mitto-pulse 3.2s ease-in-out infinite; }
.home-hero-mark { margin-left:auto; width:33px;height:33px;border:1px solid rgba(255,255,255,.1);border-radius:11px;display:grid;place-items:center;color:var(--mitto-lime);font-size:17px;background:rgba(255,255,255,.025); }
.home-hero-content { min-height:265px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(180px,.8fr);align-items:center;gap:14px;padding:16px 0 13px; }
.home-hero-copy { position:relative;z-index:1; }
.home-eyebrow { margin:0 0 13px;color:var(--mitto-lime);font-size:9px;font-weight:800;letter-spacing:.19em; }
.home-hero h1 { margin:0;max-width:600px;color:#f2f4ed;font-family:var(--font-display);font-size:clamp(30px,4vw,49px);line-height:1.08;letter-spacing:-.075em;font-weight:800; }
.home-hero h1 span { color:var(--mitto-lime); }
.home-hero-description { max-width:420px;margin:16px 0 22px;color:#9da39d;font-size:13px;line-height:1.75;letter-spacing:-.01em; }
.home-hero-actions { display:flex;flex-wrap:wrap;gap:9px; }
.home-primary-action,.home-secondary-action { min-height:43px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 14px;border-radius:11px;font-size:11px;font-weight:800;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease; }
.home-primary-action { border:1px solid var(--mitto-lime);background:var(--mitto-lime);color:#15190e;box-shadow:0 7px 20px rgba(var(--mitto-lime-rgb),.09); }
.home-primary-action:hover { background:#d7ff85;box-shadow:0 9px 24px rgba(var(--mitto-lime-rgb),.16);transform:translateY(-2px); }
.home-primary-action > .mdi:first-child { font-size:17px; }
.home-action-arrow { margin-left:7px;font-size:15px;opacity:.7; }
.home-secondary-action { color:#e2e6de;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.11); }
.home-secondary-action:hover { background:rgba(255,255,255,.07);border-color:rgba(var(--mitto-lime-rgb),.25);transform:translateY(-2px); }
.home-secondary-action .mdi { font-size:16px;color:var(--mitto-lime); }
.home-hero-visual { position:relative;min-height:215px;display:grid;place-items:center;overflow:visible; }
.home-orbit { position:absolute;left:50%;top:50%;border:1px solid rgba(var(--mitto-lime-rgb),.15);border-radius:50%;transform:translate(-50%,-50%) rotate(-19deg); }
.home-orbit-one { width:205px;height:145px;animation:mitto-orbit 18s linear infinite; }
.home-orbit-two { width:150px;height:205px;border-color:rgba(255,255,255,.075);transform:translate(-50%,-50%) rotate(33deg);animation:mitto-orbit-reverse 24s linear infinite; }
.home-visual-core { position:relative;width:94px;height:94px;display:grid;place-items:center;border-radius:29px;border:1px solid rgba(var(--mitto-lime-rgb),.26);background:linear-gradient(145deg,rgba(var(--mitto-lime-rgb),.13),rgba(255,255,255,.035));box-shadow:0 0 0 12px rgba(var(--mitto-lime-rgb),.025),0 22px 50px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.1);animation:mitto-float 6s ease-in-out infinite; }
.home-visual-core img { width:48px;height:48px;filter:drop-shadow(0 0 14px rgba(var(--mitto-lime-rgb),.15)); }
.home-float-chip { position:absolute;display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(23,27,31,.84);color:#c9cec5;font-size:9px;font-weight:700;box-shadow:0 9px 25px rgba(0,0,0,.18);backdrop-filter:blur(12px);white-space:nowrap; }
.home-float-chip .mdi { color:var(--mitto-lime);font-size:13px; }
.home-float-chip-one { top:22%;left:2%;animation:mitto-float 7s ease-in-out infinite; }
.home-float-chip-two { right:0;bottom:18%;animation:mitto-float 8s ease-in-out -2s infinite; }
.home-hero-foot { display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:14px;border-top:1px solid rgba(255,255,255,.075);color:#858d85;font-size:9px;font-weight:600; }
.home-hero-foot span { display:inline-flex;align-items:center;gap:6px; }
.home-hero-foot .mdi { font-size:13px;color:#a5b58a; }
.home-hero-foot-separator { width:3px;height:3px;border-radius:50%;background:#4b534a; }
.home-dashboard-label { display:flex;align-items:center;gap:11px;margin:25px 2px 10px;color:#7d857c;font-size:9px;font-weight:800;letter-spacing:.16em; }
.home-dashboard-label span:last-child { color:#596057;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.04em; }
.home-dashboard-line { flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.1),transparent); }
.home-section { min-width:0;padding:20px !important;margin:0 0 12px !important;border:1px solid rgba(255,255,255,.075) !important;border-radius:16px;background:linear-gradient(145deg,rgba(24,28,33,.93),rgba(17,20,24,.96));box-shadow:0 7px 20px rgba(0,0,0,.08); }
.home-section + .home-section { border-top:1px solid rgba(255,255,255,.075) !important; }
.home-section-heading { display:flex;align-items:center;gap:11px;margin-bottom:15px; }
.home-section-icon { flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;border:1px solid rgba(var(--mitto-lime-rgb),.13);background:rgba(var(--mitto-lime-rgb),.055);color:var(--mitto-lime);font-size:18px; }
.home-section-heading h2 { margin:0 0 3px !important;color:#e8ece4;font-family:var(--font-display);font-size:14px !important;font-weight:800;letter-spacing:-.045em;line-height:1.25; }
.home-section-heading p { margin:0;color:#858d86;font-size:10px;line-height:1.5; }
.home-news-empty { padding:14px 0 2px; }
.home-news-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.home-news-card { min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.018);transition:border-color .2s ease,transform .2s ease,background .2s ease; }
.home-news-card:hover { border-color:rgba(var(--mitto-lime-rgb),.2);background:rgba(255,255,255,.03);transform:translateY(-2px); }
.home-news-image,.home-news-image-placeholder { display:grid;width:100%;height:clamp(95px,14vw,155px);object-fit:cover;background:#1c2223;color:#899b70;place-items:center;font-size:24px; }
.home-news-copy { padding:13px; }
.home-news-kicker { display:block;margin-bottom:7px;color:var(--mitto-lime);font-size:8px;font-weight:800;letter-spacing:.13em; }
.home-news-copy h3 { margin:0 0 6px;color:#e9ede6;font-size:12px;font-weight:800;line-height:1.4; }
.home-news-copy p { margin:0;color:#8f978e;font-size:11px;line-height:1.65;overflow-wrap:anywhere; }
.ranking-row { display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid rgba(255,255,255,.055); }
.ranking-row:first-child { border-top:0; }
.ranking-pos { flex:0 0 27px;width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.045);color:#9da59a;font-family:'IBM Plex Mono',monospace;font-size:10px; }
.ranking-row:first-child .ranking-pos { background:rgba(var(--mitto-lime-rgb),.11);color:var(--mitto-lime); }
.ranking-nome { min-width:0;color:#e4e8df;font-size:12px;font-weight:700;overflow-wrap:anywhere; }
.ranking-valor { margin-left:auto;text-align:right;color:#858d86;font-size:10px; }
.grupo-destaque { border:1px solid rgba(var(--mitto-lime-rgb),.13);border-left:3px solid var(--mitto-lime);border-radius:12px;background:linear-gradient(100deg,rgba(var(--mitto-lime-rgb),.055),rgba(255,255,255,.015));padding:15px 16px;gap:6px; }
.grupo-destaque strong { color:#e8ece4;font-family:var(--font-display);font-size:13px;letter-spacing:-.025em; }
.grupo-destaque span { color:#8f978e;font-size:10px; }
.home-support-section { background:linear-gradient(110deg,rgba(var(--mitto-lime-rgb),.04),rgba(17,20,24,.96) 65%); }
.suporte-row p { color:#959d94;font-size:11px;line-height:1.65; }
.suporte-row .btn-outline { min-height:37px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;color:#e4e8df;font-size:10px;font-weight:700;text-decoration:none; }

/* Conversation surface and message composition */
.chat-header { min-height:66px;padding:11px clamp(12px,2vw,24px);background:rgba(16,19,23,.96);border-bottom:1px solid var(--line-soft);backdrop-filter:blur(14px); }
.chat-header-info { gap:11px; }
.chat-header-contact-copy span { color:#edf0e8;font-family:var(--font-display);font-size:13px;font-weight:800;letter-spacing:-.035em; }
.chat-header-contact-copy small { color:#899188;font-size:10px; }
.chat-header .avatar-circle { border:1px solid rgba(255,255,255,.09); }
.input-area { border-top:1px solid var(--line-soft);background:rgba(15,18,21,.96);padding:12px clamp(10px,2vw,22px); }
.input-area textarea { background:#1a1e24;border:1px solid #30363d;border-radius:13px;color:#edf0e8;font-size:13px;line-height:1.5; }
.input-area textarea:focus { border-color:rgba(var(--mitto-lime-rgb),.35);box-shadow:0 0 0 3px rgba(var(--mitto-lime-rgb),.05);outline:0; }

/* Profile editor and public profile */
.modal-box--perfil-editor,.perfil-publico-card { border:1px solid rgba(255,255,255,.12) !important;background:rgba(18,21,25,.96) !important;box-shadow:0 28px 90px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.035) !important;backdrop-filter:blur(24px); }
.perfil-banner-editor { border-color:rgba(255,255,255,.15);background-image:linear-gradient(135deg,rgba(var(--mitto-lime-rgb),.04),rgba(255,255,255,.015));transition:border-color .2s,background-color .2s; }
.perfil-banner-editor:hover { border-color:rgba(var(--mitto-lime-rgb),.38); }
.perfil-meta-item { background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.075); }
.perfil-meta-item .mdi { color:var(--mitto-lime); }

/* Entry screens */
.auth-screen { background:radial-gradient(ellipse at 78% 16%,rgba(var(--mitto-lime-rgb),.07),transparent 32%),#090b0d; }
.auth-screen::before { opacity:.035; }
.auth-brand-lockup > span { font-family:var(--font-display);font-weight:800;letter-spacing:-.07em; }
.brand-accent { color:var(--mitto-lime); }
.auth-story h2 { font-family:var(--font-display);font-weight:800;letter-spacing:-.075em; }
.auth-story h2 span { color:var(--mitto-lime); }
.auth-kicker { color:#9aa296;letter-spacing:.16em; }
.auth-card { border-color:rgba(255,255,255,.09);background:rgba(17,20,24,.9); }
.auth-heading h1 { font-family:var(--font-display);font-weight:800;letter-spacing:-.065em; }
.auth-label { color:#c0c6bc; }
.auth-input-wrap { border-radius:12px; }
.auth-input-wrap:focus-within { border-color:rgba(var(--mitto-lime-rgb),.4);box-shadow:0 0 0 3px rgba(var(--mitto-lime-rgb),.055); }
.auth-card .campo { color:#eef1e9;background:#171b20;border-color:#2b3037; }
.auth-card .campo::placeholder { color:#737b83; }
.auth-submit { background:var(--mitto-lime);color:#14180d; }
.auth-submit:hover { background:#d7ff85; }
.auth-inline-link,.link-sutil { color:var(--mitto-lime); }
.auth-google-btn { border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.025); }
.auth-google-btn:hover { border-color:rgba(var(--mitto-lime-rgb),.25);background:rgba(255,255,255,.045); }

/* Motion is restrained and never required to understand the interface. */
@keyframes mitto-pulse { 0%,100% { box-shadow:0 0 0 4px rgba(var(--mitto-lime-rgb),.08); } 50% { box-shadow:0 0 0 6px rgba(var(--mitto-lime-rgb),.025); } }
@keyframes mitto-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes mitto-orbit { from { transform:translate(-50%,-50%) rotate(-19deg); } to { transform:translate(-50%,-50%) rotate(341deg); } }
@keyframes mitto-orbit-reverse { from { transform:translate(-50%,-50%) rotate(33deg); } to { transform:translate(-50%,-50%) rotate(-327deg); } }
@media (max-width:900px) {
 .app-main { padding:22px; }
 .home-hero { border-radius:19px; }
 .home-hero-content { grid-template-columns:minmax(0,1.25fr) minmax(140px,.75fr);min-height:235px; }
 .home-hero-visual { min-height:190px; }
 .home-orbit-one { width:170px;height:125px; }
 .home-orbit-two { width:128px;height:170px; }
 .home-visual-core { width:78px;height:78px;border-radius:24px; }
 .home-visual-core img { width:40px;height:40px; }
 .home-float-chip { font-size:8px;padding:7px 8px; }
}
@media (max-width:650px) {
 .topbar { min-height:54px;padding-inline:13px; }
 .topbar-brand img { width:23px;height:23px; }
 .topbar-brand span { font-size:16px; }
 .app-sidebar { width:100%; }
 .app-main { padding:14px 12px calc(20px + env(safe-area-inset-bottom)); }
 .home-inner { width:100%; }
 .home-hero { padding:18px 16px 14px;border-radius:17px; }
 .home-hero-topline { font-size:8px;letter-spacing:.12em; }
 .home-hero-mark { width:30px;height:30px; }
 .home-hero-content { display:block;min-height:0;padding:23px 0 20px; }
 .home-eyebrow { font-size:8px;margin-bottom:11px; }
 .home-hero h1 { font-size:clamp(31px,8.2vw,39px);letter-spacing:-.075em; }
 .home-hero-description { max-width:350px;margin:13px 0 17px;font-size:12px;line-height:1.7; }
 .home-hero-actions { gap:8px; }
 .home-primary-action,.home-secondary-action { min-height:41px;padding-inline:11px;font-size:10px;border-radius:10px; }
 .home-primary-action { flex:1; }
 .home-secondary-action { flex:0 0 auto; }
 .home-action-arrow { margin-left:1px; }
 .home-hero-visual { display:none; }
 .home-hero-foot { gap:8px;padding-top:12px;font-size:8px; }
 .home-hero-foot-separator { margin-inline:1px; }
 .home-dashboard-label { margin:20px 2px 9px;font-size:8px; }
 .home-section { padding:15px !important;margin-bottom:9px !important;border-radius:14px; }
 .home-section-heading { gap:9px;margin-bottom:12px; }
 .home-section-icon { width:32px;height:32px;flex-basis:32px;border-radius:10px;font-size:16px; }
 .home-section-heading h2 { font-size:13px !important; }
 .home-section-heading p { font-size:9px; }
 .home-news-list { grid-template-columns:minmax(0,1fr);gap:9px; }
 .home-news-card { display:grid;grid-template-columns:92px minmax(0,1fr);min-height:94px; }
 .home-news-image,.home-news-image-placeholder { height:100%;min-height:94px; }
 .home-news-copy { padding:11px; }
 .home-news-kicker { font-size:7px;margin-bottom:5px; }
 .home-news-copy h3 { font-size:11px; }
 .home-news-copy p { font-size:10px; }
 .ranking-row { gap:9px;padding:10px 0; }
 .ranking-pos { flex-basis:25px;width:25px;height:25px; }
 .ranking-nome { font-size:11px; }
 .ranking-valor { max-width:52%;font-size:9px; }
 .suporte-row { align-items:flex-start; }
 .suporte-row p { flex:1;min-width:140px; }
 .suporte-row .btn-outline { white-space:nowrap; }
 .lista-chats { padding:5px 8px 14px !important; }
 .lista-chats > .item-chat { padding:10px !important; }
 .chat-header { min-height:58px;padding:9px 12px; }
 .input-area { padding:9px 10px calc(9px + env(safe-area-inset-bottom)); }
 .auth-screen { padding: max(14px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom)); }
 .auth-layout { width:min(420px,100%); }
 .auth-story { min-height:0; }
 .auth-story h2 { font-size:clamp(29px,8vw,36px); }
 .auth-card { margin-top:14px;padding:21px 18px 16px; }
}
@media (max-width:380px) {
 .app-main { padding-inline:9px; }
 .home-hero { padding:16px 13px 12px; }
 .home-hero h1 { font-size:30px; }
 .home-hero-foot { font-size:7px;gap:6px; }
 .home-primary-action,.home-secondary-action { gap:6px;padding-inline:9px; }
 .home-secondary-action { flex:1; }
 .home-news-card { grid-template-columns:78px minmax(0,1fr); }
 .home-section { padding:13px !important; }
 .suporte-row { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after { scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important; }
}

/* Consistent icon rhythm: icons align to the same optical baseline as labels. */
.topbar .mdi,.search-options-btn .mdi,.menu-dots-btn .mdi,.item-menu-btn .mdi { display:inline-flex;align-items:center;justify-content:center;line-height:1; }
.search-options-btn .mdi { font-size:18px; }
.menu-dots-btn .mdi,.item-menu-btn .mdi { font-size:19px; }
.sidebar-actions .mdi { font-size:15px;vertical-align:-1px; }

/* Mitto refinement: profile banner sits behind the avatar, not above it */
.perfil-publico-card { isolation:isolate; padding-top:18px!important; }
.perfil-publico-card > .perfil-publico-banner { position:absolute; z-index:0; top:0; left:0; right:0; height:clamp(145px,34vw,190px); margin:0; border-radius:inherit; background-position:center 42%; }
.perfil-publico-card > .perfil-publico-banner::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,10,13,.12) 0%,rgba(14,17,20,.22) 48%,rgba(17,20,23,.98) 100%); }
.perfil-publico-card > .perfil-publico-banner::after { inset:55% 0 0; background:linear-gradient(transparent,rgba(17,20,23,.98)); }
.perfil-publico-card > .perfil-publico-hero { position:relative; z-index:1; padding-top:clamp(82px,19vw,112px); }
.perfil-publico-card .perfil-foto-grande { width:clamp(104px,25vw,132px); height:clamp(104px,25vw,132px); border:3px solid var(--accent,#c7f36b); box-shadow:0 0 0 5px rgba(15,18,20,.72),0 12px 32px rgba(0,0,0,.35); }
.perfil-publico-card .perfil-publico-detalhes { position:relative; z-index:1; }
.perfil-publico-card .perfil-publico-hero .info-grupo-nome { font-size:clamp(20px,5vw,25px); letter-spacing:-.035em; }
.perfil-publico-card .perfil-publico-tag { font-size:12px; }
/* Conversation rows become deliberate, tactile cards rather than loose text rows */
#lista-conversas .item-chat, #conversas-lista .item-chat, .lista-conversas .item-chat, #lista-chats .item-chat {
  margin:0 0 9px; padding:13px 14px; border:1px solid rgba(255,255,255,.075); border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:0 4px 14px rgba(0,0,0,.08); transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.item-chat:hover { border-color:rgba(198,242,99,.22); background:rgba(198,242,99,.045); }
.item-chat.ativo { border-color:rgba(198,242,99,.42); background:linear-gradient(120deg,rgba(198,242,99,.10),rgba(255,255,255,.025)); box-shadow:inset 3px 0 0 #c6f263,0 8px 22px rgba(0,0,0,.12); }
.item-chat .nome { font-size:14px!important; font-weight:700!important; letter-spacing:-.015em; }
.item-chat .preview { font-size:12.5px; line-height:1.45; }
.item-chat .avatar-circle { box-shadow:0 0 0 2px rgba(255,255,255,.035); }
.item-chat-meta time { font-size:11px; }
@media(max-width:600px) {
 .perfil-publico-card > .perfil-publico-banner { height:155px; }
 .perfil-publico-card > .perfil-publico-hero { padding-top:88px; }
 #lista-conversas .item-chat, #conversas-lista .item-chat, .lista-conversas .item-chat, #lista-chats .item-chat { padding:12px; margin-bottom:8px; border-radius:14px; }
}
@media(prefers-reduced-motion:reduce) { .item-chat,.perfil-publico-card .perfil-foto-grande { transition:none!important; } }

/* Mitto home polish v2: strong, visible conversation cards despite legacy overrides */
#lista-chats.lista-chats { display:flex !important; flex-direction:column !important; gap:10px !important; padding:12px 10px 24px !important; }
#lista-chats.lista-chats > .item-chat {
  display:flex !important; position:relative; margin:0 !important; padding:15px 15px !important; gap:10px !important;
  border:1px solid #2b3038 !important; border-radius:17px !important;
  background:linear-gradient(145deg,#1b1f25 0%,#171a20 72%,#15181d 100%) !important;
  box-shadow:0 7px 20px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025) !important;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease !important;
}
#lista-chats.lista-chats > .item-chat::before { display:none !important; }
#lista-chats.lista-chats > .item-chat:hover,
#lista-chats.lista-chats > .item-chat:focus-within { background:linear-gradient(145deg,#20252b,#191d23) !important; border-color:#414a54 !important; box-shadow:0 9px 24px rgba(0,0,0,.23) !important; }
#lista-chats.lista-chats > .item-chat.ativo { border-color:rgba(198,242,99,.48) !important; background:linear-gradient(110deg,rgba(198,242,99,.105),#1b1f25 68%) !important; box-shadow:inset 3px 0 #c6f263,0 8px 22px rgba(0,0,0,.18) !important; }
#lista-chats.lista-chats > .item-chat .item-chat-titulo { min-width:0; gap:12px !important; }
#lista-chats.lista-chats > .item-chat .item-chat-titulo .avatar-circle { width:46px !important; height:46px !important; flex:0 0 46px !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 0 0 3px rgba(255,255,255,.025) !important; }
#lista-chats.lista-chats > .item-chat .nome { color:#f0f2ed !important; font-size:14px !important; font-weight:700 !important; letter-spacing:-.02em !important; }
#lista-chats.lista-chats > .item-chat .item-chat-preview-row { padding-left:58px !important; margin-top:3px; gap:8px !important; }
#lista-chats.lista-chats > .item-chat .preview { color:#969da7 !important; font-size:12.5px !important; line-height:1.45 !important; }
#lista-chats.lista-chats > .item-chat .item-chat-meta time { color:#7e8792 !important; font-size:10.5px !important; }
#lista-chats.lista-chats > .item-chat .item-menu-btn { width:32px !important; height:32px !important; border-radius:10px !important; }
.home-hero { border:1px solid rgba(255,255,255,.09) !important; border-radius:24px !important; background:radial-gradient(ellipse at 85% 12%,rgba(198,242,99,.095),transparent 38%),linear-gradient(145deg,#191d22,#111317 78%) !important; box-shadow:0 18px 48px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.035) !important; overflow:hidden; }
.home-hero-topline { letter-spacing:.12em !important; }
.home-hero h1 { letter-spacing:-.055em !important; line-height:1.02 !important; }
.home-hero h1 span { color:#c6f263 !important; }
.home-primary-action { box-shadow:0 8px 22px rgba(198,242,99,.12) !important; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease !important; }
.home-primary-action:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(198,242,99,.18) !important; filter:brightness(1.035); }
.home-secondary-action { border-color:#353b43 !important; background:rgba(255,255,255,.025) !important; }
.home-section { border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:16px; background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008)); }
.home-section-heading h2 { letter-spacing:-.035em; }
@media(max-width:600px) {
  #lista-chats.lista-chats { gap:9px !important; padding:10px 3px 20px !important; }
  #lista-chats.lista-chats > .item-chat { padding:13px 12px !important; border-radius:15px !important; }
  #lista-chats.lista-chats > .item-chat .item-chat-titulo .avatar-circle { width:42px !important; height:42px !important; flex-basis:42px !important; }
  #lista-chats.lista-chats > .item-chat .item-chat-preview-row { padding-left:54px !important; }
  .home-hero { border-radius:20px !important; }
}
@media(prefers-reduced-motion:reduce) { .home-primary-action,#lista-chats.lista-chats > .item-chat { transition:none !important; } }


/* ---------- Mitto premium: administração de grupos e avisos do sistema ---------- */
#modal-root .modal-overlay {
  background: rgba(4, 6, 8, .76) !important;
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  backdrop-filter: blur(9px) saturate(115%);
  animation: mittoGroupOverlayIn .22s ease both;
}
#modal-root .modal-box--grupo {
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  max-height: min(84dvh, 780px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 3.4vw, 28px) !important;
  border: 1px solid rgba(255,255,255,.105) !important;
  border-radius: 25px !important;
  color: #f0f2f5;
  background: radial-gradient(ellipse at 100% 0%, rgba(198,242,99,.09), transparent 38%), linear-gradient(150deg, rgba(24,28,34,.985), rgba(15,18,22,.99) 70%) !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.045) !important;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  animation: mittoGroupModalIn .32s cubic-bezier(.2,.8,.2,1) both;
}
#modal-root .modal-box--grupo .modal-title {
  font-size: clamp(19px, 3vw, 25px) !important;
  letter-spacing: -.045em !important;
  line-height: 1.2;
  margin: 0 0 22px !important;
}
#modal-root .config-grupo-tabs {
  gap: 5px !important;
  margin: 0 0 17px !important;
  padding: 0 0 2px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom-color: rgba(255,255,255,.09) !important;
}
#modal-root .config-grupo-tabs::-webkit-scrollbar { display:none; }
#modal-root .config-grupo-tab {
  position: relative;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 12px 13px 14px !important;
  border: 0 !important;
  border-radius: 11px 11px 0 0;
  color: #969eaa !important;
  font-size: 13px !important;
  transition: color .18s ease, background .18s ease !important;
}
#modal-root .config-grupo-tab:hover { color:#eef2f4 !important; background:rgba(255,255,255,.035) !important; }
#modal-root .config-grupo-tab.ativa { color:#c6f263 !important; background:linear-gradient(180deg,rgba(198,242,99,.09),rgba(198,242,99,0)) !important; }
#modal-root .config-grupo-tab.ativa::after {
  content:""; position:absolute; left:12px; right:12px; bottom:-2px; height:3px;
  border-radius:5px; background:#c6f263; box-shadow:0 0 14px rgba(198,242,99,.25);
}
#modal-root .config-grupo-badge { background:#c6f263 !important; color:#171b12 !important; }
#modal-root .config-grupo-corpo { flex:1 1 auto; min-height:0; max-height:54dvh !important; padding:1px 3px 6px 0; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#414850 transparent; }
#modal-root .config-grupo-painel { animation: mittoGroupPanelIn .22s ease both; }
#modal-root .config-grupo-acoes-topo { gap:9px !important; margin:0 0 14px !important; }
#modal-root .config-grupo-acoes-topo .btn-outline,
#modal-root .config-grupo-botoes .btn-outline {
  min-height:41px; border-radius:12px !important; padding:10px 13px !important;
  border-color:rgba(255,255,255,.12) !important; background:rgba(255,255,255,.035) !important;
  color:#e8ebef !important; font-size:12px !important; font-weight:650;
  transition:transform .18s ease,border-color .18s ease,background .18s ease !important;
}
#modal-root .config-grupo-acoes-topo .btn-outline:hover,
#modal-root .config-grupo-botoes .btn-outline:hover { transform:translateY(-1px); border-color:rgba(198,242,99,.4) !important; background:rgba(198,242,99,.07) !important; }
#modal-root .lista-contatos { display:flex; flex-direction:column; gap:9px !important; max-height:none !important; margin:0 !important; }
#modal-root .lista-contatos .conta-item {
  display:flex; align-items:center; gap:12px; min-width:0;
  padding:12px !important; border:1px solid rgba(255,255,255,.075); border-radius:16px;
  background:linear-gradient(120deg,rgba(255,255,255,.035),rgba(255,255,255,.014));
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
#modal-root .lista-contatos .conta-item:hover { transform:translateY(-1px); border-color:rgba(198,242,99,.19); background:rgba(255,255,255,.045); }
#modal-root .conta-info { gap:11px !important; color:#edf0f3; font-weight:600; }
#modal-root .conta-info .avatar-circle { width:40px !important; height:40px !important; flex:0 0 40px; border:1px solid rgba(255,255,255,.13); box-shadow:0 0 0 3px rgba(255,255,255,.025); }
#modal-root .config-grupo-botoes { flex-wrap:wrap; justify-content:flex-end; gap:7px !important; }
#modal-root .tag-papel { padding:4px 8px !important; font-size:9px !important; letter-spacing:.045em; }
#modal-root .modal-actions { margin-top:17px !important; padding-top:14px; border-top:1px solid rgba(255,255,255,.075); }
#modal-root .modal-actions .btn-ok { min-height:43px; padding:0 22px !important; border-radius:12px !important; font-weight:750; box-shadow:0 7px 20px rgba(198,242,99,.12); transition:transform .18s ease,filter .18s ease; }
#modal-root .modal-actions .btn-ok:hover { transform:translateY(-1px); filter:brightness(1.04); }
#modal-root .permissao-opcao { border-radius:14px !important; padding:14px !important; background:rgba(255,255,255,.025) !important; border-color:rgba(255,255,255,.09) !important; transition:border-color .18s ease,background .18s ease; }
#modal-root .permissao-opcao:has(input:checked), #modal-root .permissao-opcao--ativa { border-color:rgba(198,242,99,.4) !important; background:rgba(198,242,99,.055) !important; }
#modal-root .permissao-opcao-texto strong { font-size:13px; }
#modal-root .permissao-opcao-texto small { display:block; margin-top:4px; line-height:1.45; color:#929aa6; }

/* Avisos de sistema dentro da conversa: entrada, saída e alterações do grupo. */
#mensagens .msg-sistema, .mensagens .msg-sistema, .msg-sistema {
  position:relative;
  width:fit-content; max-width:min(86%, 440px);
  margin:10px auto !important;
  padding:8px 13px 8px 30px !important;
  border:1px solid rgba(198,242,99,.13) !important;
  border-radius:13px !important;
  background:linear-gradient(110deg,rgba(198,242,99,.065),rgba(22,26,31,.84) 72%) !important;
  color:#aab2bc !important;
  font-family:inherit; font-size:11.5px !important; font-style:normal !important;
  line-height:1.5; text-align:left !important;
  box-shadow:0 5px 16px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.025);
  overflow-wrap:anywhere;
  animation:mittoSystemNoticeIn .42s cubic-bezier(.2,.8,.2,1) both;
}
#mensagens .msg-sistema::before, .mensagens .msg-sistema::before, .msg-sistema::before {
  content:""; position:absolute; left:12px; top:50%; width:6px; height:6px;
  transform:translateY(-50%); border-radius:50%; background:#c6f263;
  box-shadow:0 0 10px rgba(198,242,99,.38);
}
#mensagens .msg-sistema + .msg-sistema, .mensagens .msg-sistema + .msg-sistema { margin-top:5px !important; }
@keyframes mittoGroupOverlayIn { from { opacity:0; } to { opacity:1; } }
@keyframes mittoGroupModalIn { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes mittoGroupPanelIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@keyframes mittoSystemNoticeIn { from { opacity:0; transform:translateY(7px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(max-width:600px) {
  #modal-root .modal-overlay { align-items:flex-end !important; padding:8px !important; }
  #modal-root .modal-box--grupo { width:100% !important; max-width:none !important; max-height:88dvh !important; padding:19px 15px 14px !important; border-radius:23px 23px 17px 17px !important; }
  #modal-root .modal-box--grupo .modal-title { margin-bottom:17px !important; }
  #modal-root .config-grupo-tab { padding:11px 10px 13px !important; font-size:12px !important; }
  #modal-root .config-grupo-corpo { max-height:57dvh !important; }
  #modal-root .lista-contatos .conta-item { align-items:flex-start; flex-wrap:wrap; padding:11px !important; }
  #modal-root .conta-info { flex:1 1 100%; }
  #modal-root .config-grupo-botoes { width:100%; padding-left:51px; justify-content:flex-start; }
  #modal-root .config-grupo-botoes .btn-outline { min-height:37px; padding:8px 10px !important; }
  #modal-root .config-grupo-acoes-topo .btn-outline { flex:1 1 auto; }
  .msg-sistema { max-width:91% !important; font-size:11px !important; }
}
@media(prefers-reduced-motion:reduce) {
  #modal-root .modal-overlay, #modal-root .modal-box--grupo, #modal-root .config-grupo-painel,
  .msg-sistema { animation:none !important; transition:none !important; }
}

/* Mitto Group Identity + rich link previews */
.info-grupo-topo--banner{position:relative;isolation:isolate;min-height:225px;padding:0 22px 18px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden;border-radius:24px 24px 0 0;margin:-4px -4px 18px}
.info-grupo-banner{position:absolute;z-index:-2;inset:0 0 52px;background:radial-gradient(ellipse at 20% 20%,rgba(199,244,93,.24),transparent 45%),linear-gradient(135deg,#252a2b,#101318 68%);background-position:center;background-size:cover}
.info-grupo-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,15,.12),rgba(15,18,22,.96))}
.info-grupo-avatar{position:relative;z-index:1;width:104px!important;height:104px!important;min-width:104px;min-height:104px;border:4px solid var(--accent,#c7f45d);box-shadow:0 10px 32px #0009;background:#171a20;margin-top:92px}
.info-grupo-topo--banner .info-grupo-nome{margin:12px 0 0;font-size:clamp(23px,5vw,30px);letter-spacing:-.035em}
.info-grupo-topo--banner .info-grupo-acoes-foto{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:14px}
.info-grupo-acoes-foto .link-sutil{border:1px solid var(--border, #343943);border-radius:12px;padding:10px 13px;background:rgba(255,255,255,.035);transition:transform .18s ease,border-color .18s ease,background .18s ease}
.info-grupo-acoes-foto .link-sutil:hover{transform:translateY(-1px);border-color:var(--accent,#c7f45d);background:rgba(199,244,93,.08)}
.info-grupo-acoes-foto .mdi{margin-right:5px;color:var(--accent,#c7f45d)}
.link-preview-card{display:flex;align-items:center;gap:12px;max-width:min(360px,100%);margin:10px 0 4px;padding:12px 14px;border:1px solid var(--border, #343943);border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.025));color:inherit;text-decoration:none;overflow:hidden;transition:border-color .18s ease,transform .18s ease,background .18s ease}
.link-preview-card:hover{border-color:var(--accent,#c7f45d);transform:translateY(-1px);background:rgba(199,244,93,.06)}
.link-preview-favicon{width:42px;height:42px;flex:0 0 42px;position:relative;display:grid;place-items:center;border-radius:12px;background:rgba(199,244,93,.1);color:var(--accent,#c7f45d)}
.link-preview-favicon img{width:24px;height:24px;object-fit:contain;position:relative;z-index:1}.link-preview-favicon .mdi{position:absolute;font-size:22px}
.link-preview-copy{min-width:0;display:flex;flex:1;flex-direction:column;gap:4px}.link-preview-copy strong{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.link-preview-copy small{font-size:12px;color:var(--text-muted,#969eac);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.link-preview-open{color:var(--accent,#c7f45d);font-size:19px;flex:0 0 auto}
.msg-sistema{max-width:min(88%,480px);margin:16px auto;padding:9px 15px;border:1px solid rgba(199,244,93,.12);border-radius:999px;background:rgba(18,22,24,.78);color:var(--text-muted,#a2a8b5);font-size:12px;line-height:1.45;text-align:center;box-shadow:0 5px 18px rgba(0,0,0,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:mittoNoticeIn .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes mittoNoticeIn{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
#btn-anexo .mdi{font-size:23px;line-height:1}
@media(max-width:600px){.info-grupo-topo--banner{min-height:218px;padding-inline:12px}.info-grupo-avatar{width:94px!important;height:94px!important;min-width:94px;min-height:94px;margin-top:90px}.info-grupo-topo--banner .info-grupo-acoes-foto{gap:6px}.info-grupo-acoes-foto .link-sutil{font-size:12px;padding:9px 10px}.link-preview-card{max-width:100%;padding:10px 11px;border-radius:14px}.link-preview-favicon{width:38px;height:38px;flex-basis:38px}}
@media(prefers-reduced-motion:reduce){.link-preview-card,.info-grupo-acoes-foto .link-sutil{transition:none}.msg-sistema{animation:none}}


/* Fix do ícone de anexo e alinhamento da barra de composição */
.input-area #btn-anexo .mdi,
.input-area #btn-audio .mdi,
.input-area #btn-enviar .mdi { display:block; font-size:23px; line-height:1; opacity:1; visibility:visible; }
.input-area #btn-anexo { position:relative; z-index:1; overflow:visible; }
.input-area { align-items:center; gap:10px; }
.input-area #input-texto { min-width:0; min-height:48px; align-self:center; }
@media (max-width:600px) {
  .input-area { padding:10px 12px max(10px, env(safe-area-inset-bottom)); gap:8px; align-items:center; }
  .input-area #input-texto { height:48px; min-height:48px; padding-top:0; padding-bottom:0; line-height:1.35; }
  .input-area #btn-anexo,.input-area #btn-enviar,.input-area #btn-audio { height:48px; min-height:48px; width:46px; min-width:46px; flex:0 0 46px; align-self:center; }
}
.mencao-perfil { appearance:none; -webkit-appearance:none; display:inline; margin:0; padding:0 2px; border:0; border-radius:4px; background:transparent; color:var(--accent-text,var(--accent)); font:inherit; font-weight:700; line-height:inherit; cursor:pointer; vertical-align:baseline; }
.mencao-perfil:hover,.mencao-perfil:focus-visible { text-decoration:underline; outline:none; background:color-mix(in srgb,var(--accent) 12%,transparent); }
@media(prefers-reduced-motion:reduce){.mencao-perfil{transition:none!important}}

/* Correção estrutural do cartão de informações do grupo: banner compacto e avatar sobreposto. */
#modal-root .modal-box--info-grupo {
  width: min(100%, 590px) !important;
  max-width: 590px !important;
  max-height: min(88dvh, 760px) !important;
  overflow-y: auto !important;
  display: block !important;
  padding: clamp(18px, 3vw, 26px) !important;
  border-radius: 26px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(198,242,99,.25) transparent;
}
#modal-root .modal-box--info-grupo .info-grupo-topo--banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0 !important;
  margin: calc(clamp(18px, 3vw, 26px) * -1) calc(clamp(18px, 3vw, 26px) * -1) 22px !important;
  padding: 0 18px 20px !important;
  overflow: hidden;
  border-radius: 25px 25px 0 0;
  isolation: isolate;
}
#modal-root .modal-box--info-grupo .info-grupo-banner {
  z-index: -1 !important;
  inset: 0 0 auto !important;
  height: 164px !important;
  background-position: center 42%;
  background-size: cover;
  background-color: #171b20;
}
#modal-root .modal-box--info-grupo .info-grupo-banner::after {
  background: linear-gradient(180deg,rgba(8,10,13,.12) 0%,rgba(12,15,19,.26) 48%,#12161c 100%) !important;
}
#modal-root .modal-box--info-grupo .info-grupo-avatar {
  width: 104px !important;
  height: 104px !important;
  min-width: 104px !important;
  min-height: 104px !important;
  flex: 0 0 104px;
  margin: 108px 0 0 !important;
  border: 4px solid #c6f263 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 0 6px rgba(17,20,25,.52) !important;
}
#modal-root .modal-box--info-grupo .info-grupo-nome {
  margin: 14px 0 0 !important;
  max-width: 100%;
  text-align: center;
  font-size: clamp(23px, 4vw, 30px) !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere;
}
#modal-root .modal-box--info-grupo .info-grupo-acoes-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
}
#modal-root .modal-box--info-grupo .info-grupo-acoes-foto .link-sutil {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
  color: #c6f263;
  font-size: 13px;
  line-height: 1.25;
}
#modal-root .modal-box--info-grupo .info-grupo-descricao {
  margin: 0 0 15px !important;
  padding: 16px 17px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
  color: #eef0f4;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
#modal-root .modal-box--info-grupo .info-grupo-descricao--vazia { color: #939baa; }
#modal-root .modal-box--info-grupo .info-grupo-criacao {
  margin: 0 0 9px !important;
  color: #9ba3b1;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#modal-root .modal-box--info-grupo .modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px !important;
  padding-top: 17px;
  border-top: 1px solid rgba(255,255,255,.085);
}
#modal-root .modal-box--info-grupo .modal-actions > button {
  min-height: 46px;
  border-radius: 13px !important;
}
@media (max-width: 600px) {
  #modal-root .modal-overlay:has(.modal-box--info-grupo) {
    align-items: center !important;
    padding: 12px !important;
  }
  #modal-root .modal-box--info-grupo {
    width: 100% !important;
    max-width: 460px !important;
    max-height: min(86dvh, 720px) !important;
    padding: 17px !important;
    border-radius: 22px !important;
  }
  #modal-root .modal-box--info-grupo .info-grupo-topo--banner {
    margin: -17px -17px 18px !important;
    padding: 0 12px 17px !important;
  }
  #modal-root .modal-box--info-grupo .info-grupo-banner { height: 142px !important; }
  #modal-root .modal-box--info-grupo .info-grupo-avatar {
    width: 88px !important; height: 88px !important;
    min-width: 88px !important; min-height: 88px !important; flex-basis: 88px;
    margin-top: 94px !important;
    border-width: 3px !important;
  }
  #modal-root .modal-box--info-grupo .info-grupo-nome { margin-top: 12px !important; font-size: 24px !important; }
  #modal-root .modal-box--info-grupo .info-grupo-acoes-foto { gap: 7px; margin-top: 13px; }
  #modal-root .modal-box--info-grupo .info-grupo-acoes-foto .link-sutil { min-height: 40px; padding: 9px 11px; font-size: 12px; }
  #modal-root .modal-box--info-grupo .info-grupo-descricao { padding: 13px 14px; font-size: 14px; }
  #modal-root .modal-box--info-grupo .modal-actions { gap: 8px; }
  #modal-root .modal-box--info-grupo .modal-actions > button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  #modal-root .modal-box--info-grupo,
  #modal-root .modal-box--info-grupo * { animation: none !important; transition: none !important; }
}

/* Group info actions: stable two-column grid (2x2) on all screen sizes. */
#modal-root .modal-box--info-grupo .info-grupo-acoes-foto { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; justify-content:stretch; gap:9px; width:min(100%,560px); margin:18px auto 0; }
#modal-root .modal-box--info-grupo .info-grupo-acoes-foto .link-sutil { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-width:0; min-height:48px; padding:11px 12px; white-space:normal; text-align:center; line-height:1.25; }
#modal-root .modal-box--info-grupo .info-grupo-acoes-foto .link-sutil .mdi { flex:0 0 auto; font-size:18px; }
#modal-root .modal-box--info-grupo .info-grupo-acoes-foto .link-sutil:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); }
@media(max-width:600px){#modal-root .modal-box--info-grupo .info-grupo-acoes-foto{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:15px}#modal-root .modal-box--info-grupo .info-grupo-acoes-foto .link-sutil{min-height:46px;padding:10px 8px;font-size:12px}}
/* Emoji reactions: native glyphs, searchable categories and reliable compact picker. */
#reaction-picker-global.reaction-picker.completo{width:min(370px,calc(100vw - 24px));max-height:min(390px,58vh);padding:10px;overflow:hidden;border-radius:18px}
.reaction-picker-tools{display:flex;gap:8px;align-items:center;padding-bottom:8px}
.reaction-search{width:100%;min-width:0;height:36px;padding:0 11px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;font-size:13px;outline:none}
.reaction-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
.reaction-categories{display:flex;gap:5px;overflow-x:auto;padding:0 0 8px;scrollbar-width:thin}
.reaction-category{flex:0 0 auto;padding:6px 9px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text-muted);font-size:11px;cursor:pointer}
.reaction-category.ativa{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent-text,var(--accent))}
.reaction-grid .reaction-option{font-family:system-ui,'Apple Color Emoji','Segoe UI Emoji',sans-serif;font-size:23px;line-height:1}
.reaction-grid .reaction-option img,.reaction-chip img{display:none!important}
.reaction-chip-emoji{font-family:system-ui,'Apple Color Emoji','Segoe UI Emoji',sans-serif;font-size:16px;line-height:1}
.reaction-picker-foot{font-size:11px}
.reaction-empty{grid-column:1/-1;padding:12px;color:var(--text-muted);font-size:12px;text-align:center}
@media(max-width:600px){#reaction-picker-global.reaction-picker.completo{width:min(370px,calc(100vw - 20px));max-height:min(410px,60vh)}.reaction-grid{max-height:calc(min(410px,60vh) - 112px);grid-template-columns:repeat(7,minmax(0,1fr))}.reaction-grid .reaction-option{height:36px;font-size:22px}}

/* =========================================================
   MITTO SIGNATURE REFRESH — home, autenticação e splash
   Camada visual isolada: não altera lógica ou fluxos existentes.
   ========================================================= */
:root {
  --bg: #0a0c10;
  --bg-panel: rgba(22,25,32,.92);
  --border: rgba(177,188,205,.15);
  --text: #f2f4f8;
  --text-muted: #929baa;
  --accent: #c7f36b;
  --accent-text: #c7f36b;
  --accent-contrast: #151b0b;
  --accent-dim: #a4d94b;
  --shadow: rgba(0,0,0,.42);
  --glass: rgba(255,255,255,.035);
}
body { font-family:'DM Sans','Manrope',sans-serif; }

/* Loading / splash: restrained motion, centered brand and clear progress. */
#splash-screen {
  position:relative; isolation:isolate; overflow:hidden; min-height:100vh; min-height:100dvh;
  padding:28px 20px; gap:0; color:#f4f6f8;
  background:radial-gradient(ellipse at 50% 42%,rgba(199,243,107,.10),transparent 28%),radial-gradient(ellipse at 12% 0%,rgba(199,243,107,.065),transparent 36%),#090b0f;
}
#splash-screen::before,#splash-screen::after { content:'';position:absolute;z-index:-1;pointer-events:none;border-radius:50%; }
#splash-screen::before { width:min(68vw,440px);aspect-ratio:1;left:50%;top:42%;border:1px solid rgba(199,243,107,.11);transform:translate(-50%,-50%);box-shadow:0 0 0 28px rgba(199,243,107,.018),0 0 0 70px rgba(199,243,107,.012);animation:splash-orbit 12s ease-in-out infinite alternate; }
#splash-screen::after { width:220px;height:220px;left:calc(50% - 110px);top:calc(42% - 110px);background:radial-gradient(circle,rgba(199,243,107,.09),transparent 68%);filter:blur(10px);animation:splash-glow 3.8s ease-in-out infinite; }
#splash-screen .logo-mark { width:clamp(62px,12vw,82px);height:auto;max-height:82px;object-fit:contain;margin:0 0 20px;filter:drop-shadow(0 0 22px rgba(199,243,107,.22));animation:splash-logo-in .8s cubic-bezier(.2,.8,.2,1) both,splash-logo-float 4.5s ease-in-out .8s infinite; }
#splash-screen .wordmark { margin:0 0 8px;font:800 clamp(30px,5vw,38px)/1 'Manrope',sans-serif;letter-spacing:-1.7px;color:#f4f6f8; }
#splash-screen .wordmark::after { content:'.';color:#c7f36b; }
#splash-screen .welcome-text { margin:0 0 34px;color:#929baa;font-size:clamp(13px,2vw,15px);letter-spacing:.01em; }
#splash-screen .progress-track { width:min(240px,68vw);height:4px;border-radius:999px;background:rgba(255,255,255,.09);box-shadow:0 0 0 1px rgba(255,255,255,.025); }
#splash-screen .progress-fill { border-radius:inherit;background:linear-gradient(90deg,#a7d94b,#d9ff8a);box-shadow:0 0 16px rgba(199,243,107,.35); }

/* Auth: sharper hierarchy, calmer glass and better touch targets. */
.auth-screen { --auth-lime:#c7f36b; background-color:#090b10; background-image:radial-gradient(ellipse at 8% 8%,rgba(199,243,107,.10),transparent 34%),radial-gradient(ellipse at 92% 88%,rgba(109,124,166,.10),transparent 38%),linear-gradient(135deg,#0a0c11,#090b10 55%,#0e1118); }
.auth-screen::before { opacity:.10;background-size:24px 24px; }
.auth-ambient-one { border-color:rgba(199,243,107,.19);box-shadow:0 0 0 38px rgba(199,243,107,.022),0 0 0 82px rgba(199,243,107,.012); }
.auth-ambient-two { background:radial-gradient(circle,rgba(199,243,107,.085),transparent 70%); }
.auth-layout { width:min(1120px,100%);grid-template-columns:minmax(0,1fr) minmax(390px,470px);gap:clamp(36px,7vw,94px); }
.auth-story h2 { max-width:600px;font-size:clamp(40px,4.6vw,62px);line-height:1.08;letter-spacing:-2.8px; }
.auth-story-copy p { font-size:15px;line-height:1.85; }
.auth-card { border-radius:26px;padding:clamp(26px,3vw,36px);background:linear-gradient(145deg,rgba(25,29,38,.97),rgba(14,17,24,.97));border-color:rgba(255,255,255,.105);box-shadow:0 30px 100px rgba(0,0,0,.43),inset 0 1px 0 rgba(255,255,255,.045); }
.auth-card::before { left:18%;right:18%;background:linear-gradient(90deg,transparent,rgba(199,243,107,.72),transparent); }
.auth-card-top { padding-bottom:22px; }
.auth-heading { margin:25px 0 25px; }
.auth-heading h1 { font-size:clamp(25px,2.4vw,31px);letter-spacing:-1.25px; }
.auth-heading p { font-size:13px;line-height:1.75; }
.auth-label,.auth-label-row { font-size:12px; }
.auth-card form { gap:10px; }
.auth-card .campo { min-height:53px;border-radius:13px;background:rgba(5,7,11,.52);font-size:14px; }
.auth-card .campo:focus { border-color:rgba(199,243,107,.78);box-shadow:0 0 0 4px rgba(199,243,107,.09),0 8px 24px rgba(0,0,0,.16); }
.auth-submit { min-height:54px;border-radius:13px;background:linear-gradient(110deg,#c7f36b,#d5fb8b);box-shadow:0 8px 24px rgba(157,204,74,.14);font-size:14px; }
.auth-google-btn { min-height:50px;border-radius:13px;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.035);transition:background .2s,border-color .2s,transform .2s; }
.auth-google-btn:hover { background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.2);transform:translateY(-1px); }
.auth-switch { font-size:12px; }
.auth-card .link-sutil,.auth-inline-link { font-size:12px;color:#c7f36b; }
.auth-card-bottom { font-size:11px; }

/* Conversation home: coherent app surface and individual conversation cards. */
#chat-screen { background:linear-gradient(160deg,rgba(17,20,27,.97),rgba(9,11,15,.99)); }
#chat-screen .topbar { background:rgba(12,14,19,.88);border-bottom:1px solid rgba(255,255,255,.075);backdrop-filter:blur(20px); }
#chat-screen .app-body { gap:0; }
#chat-screen .app-sidebar { width:clamp(300px,31vw,370px);padding:18px 14px 14px;background:linear-gradient(180deg,rgba(17,20,27,.98),rgba(12,14,19,.98));border-right:1px solid rgba(255,255,255,.075);gap:14px; }
#chat-screen .search-row { min-height:54px;gap:8px;padding:4px 8px 4px 15px;border-radius:17px;border-color:rgba(160,173,193,.16);background:linear-gradient(110deg,rgba(255,255,255,.045),rgba(199,243,107,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
#chat-screen .search-row input { padding:10px 0;font-size:14px; }
#chat-screen .search-options-btn { min-width:38px;min-height:38px;border-radius:12px; }
#chat-screen .search-options-btn:hover { background:rgba(255,255,255,.06);color:var(--accent); }
#chat-screen .sidebar-actions { gap:9px; }
#chat-screen .action-card { min-height:54px;margin:0;width:100%;border-radius:16px;padding:0 17px;font-size:14px; }
#chat-screen .btn-primary.action-card { background:linear-gradient(110deg,#c7f36b,#d5fb8b);box-shadow:0 8px 24px rgba(157,204,74,.12); }
#chat-screen .btn-secondary.action-card { background:rgba(255,255,255,.025);border-color:rgba(160,173,193,.16); }
#chat-screen .lista-chats { gap:8px;padding:4px 0 16px;overscroll-behavior:contain; }
#chat-screen .item-chat { position:relative;display:block;padding:14px 13px;border:1px solid rgba(160,173,193,.105);border-radius:17px;background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.016));box-shadow:0 5px 18px rgba(0,0,0,.09);transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
#chat-screen .item-chat:hover { transform:translateY(-1px);border-color:rgba(199,243,107,.25);background:linear-gradient(135deg,rgba(199,243,107,.055),rgba(255,255,255,.02));box-shadow:0 9px 24px rgba(0,0,0,.16); }
#chat-screen .item-chat.ativo { border-color:rgba(199,243,107,.36);background:linear-gradient(135deg,rgba(199,243,107,.09),rgba(255,255,255,.025));box-shadow:inset 3px 0 0 #c7f36b,0 8px 22px rgba(0,0,0,.12); }
#chat-screen .item-chat .nome { font-family:'Manrope','DM Sans',sans-serif;font-size:14px;font-weight:800;letter-spacing:-.025em; }
#chat-screen .item-chat .preview { font-size:12.5px;line-height:1.5; }
#chat-screen .item-chat img { border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 3px rgba(255,255,255,.025); }
#chat-screen .app-main { background:radial-gradient(ellipse at 50% 0%,rgba(199,243,107,.035),transparent 40%),rgba(8,10,14,.36); }
#chat-screen .home-inner { max-width:720px;gap:4px; }
#chat-screen .home-section { padding:28px 0; }
#chat-screen .home-section:first-child { padding-top:4px; }
#chat-screen .home-section h2 { font-family:'Manrope',sans-serif;font-size:clamp(23px,2.5vw,30px);font-weight:800;letter-spacing:-.045em;line-height:1.2;margin-bottom:12px; }
#chat-screen .home-section + .home-section { border-top-color:rgba(255,255,255,.075); }
#chat-screen .grupo-destaque { border:1px solid rgba(199,243,107,.19);border-left:3px solid #c7f36b;border-radius:15px;background:linear-gradient(115deg,rgba(199,243,107,.075),rgba(255,255,255,.02));padding:16px 18px;gap:6px; }
#chat-screen .grupo-destaque strong { font-family:'Manrope',sans-serif;font-size:15px; }
#chat-screen .app-footer { border-top-color:rgba(255,255,255,.075);background:rgba(8,10,14,.62); }

@keyframes splash-orbit { from{transform:translate(-50%,-50%) rotate(-8deg) scale(.96)}to{transform:translate(-50%,-50%) rotate(8deg) scale(1.04)} }
@keyframes splash-glow { 0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)} }
@keyframes splash-logo-in { from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes splash-logo-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)} }
@media(max-width:850px) {
  .auth-layout { grid-template-columns:minmax(0,1fr) minmax(330px,420px);gap:30px; }
  .auth-story h2 { font-size:clamp(34px,5vw,46px); }
  #chat-screen .app-sidebar { width:320px; }
}
@media(max-width:650px) {
  .auth-screen { padding:20px 14px;justify-content:center; }
  .auth-layout { width:min(440px,100%); }
  .auth-card { margin-top:20px;padding:24px 20px 19px;border-radius:22px; }
  .auth-heading { margin:21px 0 22px; }
  .auth-heading h1 { font-size:26px; }
  #chat-screen .app-sidebar { width:100%;padding:15px 13px 12px;border-right:0; }
  #chat-screen .search-row { min-height:52px;border-radius:16px; }
  #chat-screen .action-card { min-height:52px; }
  #chat-screen .lista-chats { gap:9px;padding-top:3px; }
  #chat-screen .item-chat { padding:13px 12px;border-radius:16px; }
  #chat-screen .app-main { padding:26px 18px; }
  #chat-screen .home-section { padding:22px 0; }
  #chat-screen .app-footer { gap:12px;padding:13px 14px; }
  #splash-screen .welcome-text { margin-bottom:30px; }
}
@media(max-width:380px) {
  .auth-screen { padding:14px 10px; }
  .auth-card { padding:21px 16px 17px; }
  .auth-card-top { gap:10px; }
  .auth-secure { letter-spacing:.6px; }
  #chat-screen .app-sidebar { padding-left:10px;padding-right:10px; }
  #chat-screen .item-chat { padding:12px 10px; }
}
@media(prefers-reduced-motion:reduce) {
  #splash-screen::before,#splash-screen::after,#splash-screen .logo-mark { animation:none!important; }
  #chat-screen .item-chat,#chat-screen button,.auth-screen * { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
}


/* ---------- Chamadas individuais Mitto (WebRTC) ---------- */
.call-header-btn{width:40px;height:40px;flex:0 0 40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(199,243,107,.16);border-radius:13px;background:rgba(199,243,107,.055);color:var(--accent,#c7f36b);font-size:21px;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.call-header-btn:hover{background:rgba(199,243,107,.13);border-color:rgba(199,243,107,.38);transform:translateY(-1px)}
.call-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(0,0,0,.76);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#f5f7f4}
.call-overlay[hidden],[hidden].call-incoming-view,[hidden].call-active-view,[hidden].call-connecting-view{display:none!important}
.call-panel{position:relative;width:min(520px,100%);max-height:min(92dvh,850px);overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(199,243,107,.2);border-radius:30px;background:radial-gradient(ellipse at 50% -20%,rgba(199,243,107,.12),transparent 48%),linear-gradient(145deg,#171b20,#0b0d10 72%);box-shadow:0 35px 100px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.06);animation:mittoCallEnter .28s cubic-bezier(.2,.8,.2,1) both}
.call-panel-top{display:flex;align-items:center;gap:10px;padding:17px 20px;border-bottom:1px solid rgba(255,255,255,.07);font-weight:800;letter-spacing:.02em}.call-panel-top>span:nth-child(2){display:flex;flex-direction:column;gap:2px}.call-panel-top small{font-size:9px;letter-spacing:.18em;color:#9ba39b;font-weight:700}.call-brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:rgba(199,243,107,.12);color:#c7f36b;font-size:21px}.call-close-min{margin-left:auto;width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#aab0b8;font-size:19px;cursor:pointer}
.call-incoming-view,.call-connecting-view{padding:36px 24px 30px;text-align:center}.call-avatar-wrap{position:relative;width:124px;height:124px;margin:0 auto 24px;display:grid;place-items:center}.call-avatar{width:112px;height:112px;display:grid;place-items:center;overflow:hidden;border-radius:50%;border:2px solid #c7f36b;background:linear-gradient(145deg,#252b2d,#0c0f11);color:#c7f36b;font-size:44px;box-shadow:0 0 0 8px rgba(199,243,107,.055),0 0 45px rgba(199,243,107,.14)}.call-avatar img{width:100%;height:100%;object-fit:cover}.call-pulse-ring{position:absolute;inset:0;border:1px solid rgba(199,243,107,.5);border-radius:50%;animation:mittoCallPulse 2s ease-out infinite}.call-incoming-view h2,.call-connecting-view h2{margin:0;color:#f6f7f4;font-size:clamp(23px,5vw,30px);letter-spacing:-.04em}.call-incoming-view p,.call-connecting-view p{margin:10px 0 30px;color:#9da5a4;font-size:14px}.call-incoming-actions{display:flex;justify-content:center;gap:34px}.call-action{min-width:94px;display:flex;flex-direction:column;align-items:center;gap:9px;border:0;background:none;color:#f4f5f2;font:600 12px/1.2 'DM Sans',sans-serif;cursor:pointer}.call-action .mdi{width:60px;height:60px;display:grid;place-items:center;border-radius:50%;font-size:27px;box-shadow:0 9px 25px rgba(0,0,0,.3)}.call-accept .mdi{background:#c7f36b;color:#11150a}.call-decline .mdi{background:#ed4b5a;color:white}.call-connecting-view .call-action{margin:24px auto 0}.call-spinner{width:48px;height:48px;margin:0 auto 22px;border:3px solid rgba(199,243,107,.16);border-top-color:#c7f36b;border-radius:50%;animation:mittoCallSpin .8s linear infinite}
.call-active-view{min-height:450px;display:flex;flex-direction:column}.call-stage{position:relative;isolation:isolate;min-height:390px;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,rgba(199,243,107,.13),transparent 38%),#090b0c}.call-audio-visual{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:330px}.call-audio-visual .call-avatar{width:140px;height:140px;font-size:54px}.call-audio-orbit{position:absolute;width:205px;height:205px;border:1px solid rgba(199,243,107,.18);border-radius:50%;box-shadow:0 0 60px rgba(199,243,107,.05);animation:mittoCallPulse 3s ease-out infinite}.call-remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#090b0c;display:none}.call-stage.has-remote-video .call-remote-video{display:block}.call-stage.has-remote-video .call-audio-visual{display:none}.call-local-video{position:absolute;right:15px;top:15px;width:clamp(82px,24%,125px);aspect-ratio:3/4;object-fit:cover;border-radius:18px;border:1px solid rgba(199,243,107,.65);background:#171b1c;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:2;display:none}.call-peer-caption{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:42px 20px 20px;display:flex;flex-direction:column;gap:4px;background:linear-gradient(transparent,rgba(0,0,0,.78));pointer-events:none}.call-peer-caption strong{font-size:20px}.call-peer-caption span{font-size:12px;color:#d0d6ce}.call-controls{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,18px);padding:19px 12px calc(18px + env(safe-area-inset-bottom));background:rgba(12,14,15,.98);border-top:1px solid rgba(255,255,255,.06)}.call-control{width:68px;min-width:0;flex:1;max-width:76px;display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:transparent;color:#c4cac2;font-size:10px;cursor:pointer}.call-control .mdi{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.11);border-radius:17px;background:#202426;font-size:22px;transition:background .18s ease,color .18s ease}.call-control.is-off .mdi{background:rgba(237,75,90,.15);border-color:rgba(237,75,90,.32);color:#ff7d87}.call-control.call-end .mdi{background:#e74756;color:#fff;border-color:#e74756}.call-security-note{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;padding:12px 16px 15px;border-top:1px solid rgba(255,255,255,.05);color:#7e8981;text-align:center;font-size:10px}.call-security-note .mdi{color:#c7f36b;font-size:13px}
@keyframes mittoCallEnter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes mittoCallPulse{0%{transform:scale(.92);opacity:.8}100%{transform:scale(1.22);opacity:0}}@keyframes mittoCallSpin{to{transform:rotate(360deg)}}
@media(max-width:600px){.call-overlay{padding:0;align-items:stretch}.call-panel{width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0}.call-panel-top{padding:calc(12px + env(safe-area-inset-top)) 16px 13px}.call-incoming-view,.call-connecting-view{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px}.call-active-view{flex:1;min-height:0}.call-stage{min-height:0;flex:1}.call-controls{gap:7px;padding:16px 6px calc(17px + env(safe-area-inset-bottom))}.call-control{width:auto;flex:1;max-width:66px;font-size:9px}.call-control .mdi{width:45px;height:45px;border-radius:15px}.call-security-note{padding-bottom:calc(10px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.call-panel,.call-pulse-ring,.call-audio-orbit,.call-spinner,.call-header-btn{animation:none!important;transition:none!important}}


/* Chamadas em grupo: presença compacta no cabeçalho e sala WebRTC */
.group-call-presence{display:flex;align-items:center;gap:8px;min-width:0;padding:5px 7px 5px 10px;border:1px solid rgba(190,242,100,.25);border-radius:13px;background:rgba(190,242,100,.08);color:#d5fa76;}
.group-call-presence.oculto{display:none!important}.group-call-presence-copy{display:flex;align-items:center;gap:5px;white-space:nowrap}.group-call-presence-copy .mdi{font-size:17px}.group-call-presence-copy b{font-size:12px}.group-call-presence-copy small{font-size:11px;color:#c2c9bb;font-variant-numeric:tabular-nums}.group-call-presence button{border:0;border-radius:9px;padding:7px 10px;background:#c7f36b;color:#10130c;font-weight:750;white-space:nowrap}.group-call-presence button.joined{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#f2f5ee}
.group-call-overlay{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#f5f7f4}.group-call-overlay[hidden]{display:none!important}.group-call-panel{display:flex;flex-direction:column;width:min(940px,100%);height:min(850px,92dvh);min-height:420px;overflow:hidden;border:1px solid rgba(190,242,100,.2);border-radius:26px;background:linear-gradient(155deg,#171b1c,#0b0e0f 72%);box-shadow:0 25px 90px #0009}.group-call-top{display:flex;align-items:center;justify-content:space-between;padding:17px 22px;border-bottom:1px solid #ffffff12}.group-call-top>span{display:flex;align-items:center;gap:9px;font-weight:800}.group-call-top>span>.mdi{color:#c7f36b;font-size:23px}.group-call-top small{display:block;margin-left:5px;color:#9ca69b;font-size:10px;letter-spacing:.12em}.group-call-top button{width:38px;height:38px;border:1px solid #ffffff17;border-radius:12px;background:#ffffff08;color:#f4f4f4}.group-call-heading{padding:18px 22px 8px}.group-call-heading h2{margin:0;font-size:clamp(19px,3vw,27px)}.group-call-heading p{margin:6px 0 0;color:#b6c0b2;font-size:13px}.group-call-media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));grid-auto-rows:minmax(145px,1fr);gap:12px;padding:14px 20px;overflow:auto;flex:1;align-content:center}.group-call-tile{position:relative;display:flex;align-items:center;justify-content:center;min-height:140px;overflow:hidden;border:1px solid #ffffff17;border-radius:19px;background:radial-gradient(ellipse at 50% 35%,#28302a,#111516 68%)}.group-call-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#090b0c}.group-call-tile audio{display:none}.group-call-tile .tile-avatar{display:flex;align-items:center;justify-content:center;width:76px;height:76px;border:2px solid #c7f36b;border-radius:50%;overflow:hidden;background:#1d2420;color:#c7f36b;font-size:26px;font-weight:800}.group-call-tile .tile-avatar img{width:100%;height:100%;object-fit:cover}.group-call-tile .tile-name{position:absolute;left:10px;right:10px;bottom:9px;padding:7px 10px;border-radius:10px;background:#050707b8;font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-call-tile.local-tile{border-color:#c7f36b66}.group-call-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 20px calc(17px + env(safe-area-inset-bottom));border-top:1px solid #ffffff12}.group-call-controls button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:76px;padding:10px 12px;border:1px solid #ffffff1a;border-radius:15px;background:#ffffff09;color:#edf0e9;font-size:11px}.group-call-controls button .mdi{font-size:21px}.group-call-controls button.off{color:#c7f36b;background:#c7f36b12}.group-call-controls button.danger{background:#e74c4c;color:#fff;border-color:#e74c4c}
@media(max-width:600px){.group-call-presence{gap:5px;padding:4px 5px 4px 7px;border-radius:10px}.group-call-presence-copy{gap:3px}.group-call-presence-copy .mdi{font-size:15px}.group-call-presence-copy b,.group-call-presence-copy small{font-size:10px}.group-call-presence button{padding:6px 7px;font-size:11px}.group-call-panel{width:100%;height:100dvh;min-height:0;border:0;border-radius:0}.group-call-top{padding:calc(12px + env(safe-area-inset-top)) 15px 12px}.group-call-heading{padding:15px 16px 4px}.group-call-media-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(130px,1fr);gap:8px;padding:12px}.group-call-tile{min-height:125px;border-radius:15px}.group-call-controls{gap:8px;padding:12px 8px calc(15px + env(safe-area-inset-bottom))}.group-call-controls button{min-width:0;flex:1;max-width:110px;padding:9px 5px}.chat-header{gap:6px}}

/* ---------- Personalização global real: destaque e degradê ---------- */
body, .app-shell, #chat-screen, .topbar, .sidebar, .chat-main, .modal-box {
  background-image: var(--site-gradient, none);
}
body { background-attachment: fixed; }
.swatches-paleta .swatch-cor { width: 30px; height: 30px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.swatches-paleta .swatch-cor.ativo { outline: 2px solid var(--accent); outline-offset: 3px; border-color: var(--text); }
.swatches-degrade { gap: 7px; }
.chip-degrade { background: var(--preview-gradient), var(--bg-panel); background-size: cover; color: var(--text); border-color: var(--border); }
.chip-degrade.ativo { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.config-notif { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 11px; margin-top:6px; border:1px solid var(--border); border-radius:10px; color:var(--text); background:var(--bg-panel); font-size:13px; }
.config-notif input { width:17px; height:17px; accent-color:var(--accent); }


/* Status de entrega/leitura e presença em tempo real */
.msg .hora { display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.msg-receipt { display:inline-block; font-size:13px; line-height:1; font-weight:700; letter-spacing:-3px; padding-right:3px; color:var(--text-muted); }
.msg-receipt.receipt-delivered { color:var(--text-muted); }
.msg-receipt.receipt-read { color:#36aee8; }
#chat-header-status.is-typing { color:var(--accent, #a3e635); font-weight:600; }

/* Status de digitação e recibos de mensagem */
#chat-header-status.is-typing { display:inline-flex; align-items:center; gap:5px; }
.typing-dots { display:inline-flex; align-items:center; gap:3px; height:12px; }
.typing-dots i { display:block; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.45; animation:mitto-typing-dot 1s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay:.16s; }
.typing-dots i:nth-child(3) { animation-delay:.32s; }
@keyframes mitto-typing-dot { 0%,60%,100% { transform:translateY(0); opacity:.4; } 30% { transform:translateY(-3px); opacity:1; } }
.msg-receipt.receipt-sent { color:var(--text-muted, #9299a8); letter-spacing:0; }
.msg-receipt.receipt-delivered { color:var(--text-muted, #9299a8); letter-spacing:-3px; }
.msg-receipt.receipt-read { color:#36aee8; letter-spacing:-3px; }


/* Indicador de presença: aro giratório com espaçamento do texto */
#chat-header-status.is-online, #chat-header-status.is-offline { display:inline-flex; align-items:center; gap:8px; }
#chat-header-status.is-online { color:#4ade80; }
#chat-header-status.is-offline { color:var(--text-muted, #9299a8); }
.presence-spinner { display:inline-block; width:10px; height:10px; flex:0 0 10px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:mitto-presence-spin .85s linear infinite; }
.is-online .presence-spinner { color:#4ade80; }
.is-offline .presence-spinner { color:#9299a8; }
.presence-last-seen { margin-left:2px; font-variant-numeric:tabular-nums; opacity:.9; }
@keyframes mitto-presence-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .presence-spinner { animation-duration:2.5s; } }