/* /assets/css/chat.css — identidade visual da Escrita Terapêutica (por cima do tema base) */

/* Paleta estilo WhatsApp: fundo creme, balão verde claro, verde nos botões */
:root,
[data-bs-theme="light"] {
  --bs-primary: #12994f;
  --bs-primary-rgb: 18, 153, 79;
  --bs-link-color: #0b7a43;
  --bs-link-color-rgb: 11, 122, 67;
  --bs-link-hover-color: #086033;
  --bs-link-hover-color-rgb: 8, 96, 51;
  --app-bg: #f7f5f3;
  --app-card: #ffffff;
  --app-border: #e6e2dd;
  --app-accent-soft: #ecf6ee;
  --app-mine: #d9fdd3;
  --app-theirs: #ffffff;
  --app-reply: #f6f5f4;
  --app-chat-bg: #f7f5f3;
}

[data-bs-theme="dark"] {
  --bs-primary: #2ec27e;
  --bs-primary-rgb: 46, 194, 126;
  --bs-link-color: #4fd496;
  --bs-link-color-rgb: 79, 212, 150;
  --bs-link-hover-color: #7fe3b4;
  --bs-link-hover-color-rgb: 127, 227, 180;
  --app-bg: #111b21;
  --app-card: #202c33;
  --app-border: #2a3942;
  --app-accent-soft: #1b2a30;
  --app-mine: #005c4b;
  --app-theirs: #202c33;
  --app-reply: #1b262c;
  --app-chat-bg: #0b141a;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #0e7d40;
  --bs-btn-hover-border-color: #0e7d40;
  --bs-btn-active-bg: #0a6a35;
  --bs-btn-active-border-color: #0a6a35;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #06210f;
  --bs-btn-hover-color: #06210f;
  --bs-btn-hover-bg: #5fe0a2;
  --bs-btn-hover-border-color: #5fe0a2;
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
}

body { background: var(--app-bg); font-family: "Roboto", system-ui, sans-serif; }
.card { background: var(--app-card); border-color: var(--app-border); }

/* ------------------------------------------------------------------ app */
/* ------------------------------------------------------------------ topo: nome + faixa de botões */
.app-top {
  position: sticky; top: 0; z-index: 1030;
  background: var(--app-card);
  border-bottom: 1px solid var(--app-border);
  box-shadow: 0 1px 8px rgba(40, 40, 30, .05);
}
.app-brand { text-align: center; padding: .65rem 1rem .15rem; }
.app-brand a { color: var(--bs-primary); font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; text-decoration: none; }

.app-tabs {
  display: flex; justify-content: center; gap: .25rem;
  width: min(100%, 680px); margin: 0 auto; padding: .25rem .5rem .45rem;
}
.app-tab-form { display: contents; margin: 0; }
.app-tab {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  padding: .4rem .2rem .35rem;
  border: 0; border-radius: .7rem; background: transparent;
  color: var(--bs-secondary-color); font: inherit; font-size: .74rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.app-tab:hover { background: var(--app-accent-soft); color: var(--bs-primary); }
.app-tab:active { transform: scale(.96); }
.app-tab.is-active { background: var(--app-accent-soft); color: var(--bs-primary); font-weight: 700; }
.app-tab.is-active::after {
  content: ''; position: absolute; left: 22%; right: 22%; bottom: -.2rem; height: 3px; border-radius: 3px; background: var(--bs-primary);
}
.app-tab-exit:hover { background: rgba(229, 72, 77, .1); color: #e5484d; }
.app-tab-icon { position: relative; display: inline-flex; }
.app-tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.app-tab-badge {
  position: absolute; top: -.35rem; right: -.65rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: 999px; background: #e5484d; color: #fff; font-size: .65rem; font-weight: 700; line-height: 1.15rem; text-align: center;
}

/* telas largas: ícone ao lado do texto */
@media (min-width: 576px) {
  .app-brand { padding-top: .8rem; }
  .app-brand a { font-size: 1.3rem; }
  .app-tab { flex-direction: row; gap: .5rem; padding: .55rem .6rem; font-size: .9rem; }
  .app-tab.is-active::after { left: 18%; right: 18%; }
}

/* chat em tela cheia no celular: topo mais baixo para sobrar espaço às mensagens e ao teclado */
@media (max-width: 575.98px) {
  .app-fullheight .app-brand { padding: .3rem 1rem 0; }
  .app-fullheight .app-brand a { font-size: .98rem; }
  .app-fullheight .app-tabs { padding-bottom: .3rem; }
  .app-fullheight .app-tab { padding-block: .25rem .2rem; }
}
.app-main { padding-block: 1.75rem 2rem; }
.app-footer { padding-block: 0 2rem; }

/* texto de apoio com respiro antes do campo de escrita */
.write-intro { margin-bottom: 1.25rem; line-height: 1.6; }

.write-area {
  font-size: 1.1rem;
  line-height: 1.7;
  padding: 1.1rem 1.25rem;
  background: var(--app-card);
  border-color: var(--app-border);
  min-height: 46vh;
  resize: vertical;
}
.write-area:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18); }

.text-card {
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.text-card.is-sealed { background: var(--app-accent-soft); border-style: dashed; }
.text-body-content { white-space: normal; overflow-wrap: anywhere; line-height: 1.65; margin-top: .6rem; }
.reply-box {
  margin-top: .9rem;
  padding: .8rem 1rem;
  border-left: 3px solid var(--bs-primary);
  background: var(--app-reply);
  border-radius: 0 .5rem .5rem 0;
}
.attach-img { max-width: min(100%, 320px); max-height: 320px; border-radius: .5rem; display: block; }
.attach-video { max-width: min(100%, 420px); border-radius: .5rem; }
.w-md-auto { width: 100%; }
@media (min-width: 768px) { .w-md-auto { width: auto; } }

/* ------------------------------------------------------------ login / termos */
.login-body { background: var(--app-bg); min-height: 100vh; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.login-card {
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(60, 35, 15, .14);
}
.login-image { position: relative; background-size: cover; background-position: center; min-height: 520px; }
.login-image-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(30,15,5,.35)); }
.login-form { padding: 2.25rem 2.25rem 2rem; display: flex; flex-direction: column; justify-content: center; }
.login-brand { font-weight: 700; color: var(--bs-primary); letter-spacing: .02em; }
.login-title { font-size: 1.9rem; font-weight: 700; line-height: 1.2; margin-bottom: .6rem; }
.login-benefits { padding-left: 1.1rem; margin: 1rem 0 1.5rem; color: var(--bs-secondary-color); }
.login-benefits li { margin-bottom: .45rem; }
.login-emergency { border-top: 1px solid var(--app-border); padding-top: .9rem; }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  padding: .85rem 1.25rem;
  background: #fff; color: #3c4043;
  border: 2px solid #dadce0; border-radius: .6rem;
  font-weight: 600; font-size: 1rem; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.btn-google:hover { border-color: var(--bs-primary); box-shadow: 0 6px 20px rgba(18, 153, 79, .22); color: #3c4043; transform: translateY(-1px); }

.terms-card {
  width: min(100%, 640px);
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 18px 50px rgba(60, 35, 15, .12);
}
.terms-list { padding-left: 1.2rem; margin-bottom: 1.5rem; }
.terms-list li { margin-bottom: .7rem; line-height: 1.55; }

@media (max-width: 767.98px) {
  .login-card { grid-template-columns: 1fr; }
  .login-image { min-height: 200px; order: -1; }
  .login-form { padding: 1.5rem 1.25rem; }
  .login-title { font-size: 1.55rem; }
  .terms-card { padding: 1.4rem 1.2rem; }
}

/* ------------------------------------------------------------- lista admin */
.wa-list-item { display: flex; gap: .85rem; align-items: flex-start; background: var(--app-card); border-color: var(--app-border); }
.min-w-0 { min-width: 0; }
.wa-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.dot-online {
  display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
  background: #1fa971; margin-left: .35rem; vertical-align: middle;
}

/* ----------------------------------------------------------------- chat */
.app-fullheight { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.app-fullheight .app-top { flex: 0 0 auto; }
.app-main-full { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.wa-chat {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  width: min(100%, 900px); margin: 0 auto;
  background: var(--app-chat-bg) url('../images/chat.webp') center / cover no-repeat;
  border-inline: 1px solid var(--app-border);
}
[data-bs-theme="dark"] .wa-chat {
  background-image: linear-gradient(rgba(11, 20, 26, .93), rgba(11, 20, 26, .93)), url('../images/chat.webp');
}
.wa-header {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .9rem;
  background: var(--app-card); border-bottom: 1px solid var(--app-border);
}
.wa-back { font-size: 1.8rem; line-height: 1; text-decoration: none; padding-inline: .25rem; }
.wa-avatar {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bs-primary); color: #fff; font-weight: 700;
}
[data-bs-theme="dark"] .wa-avatar { color: #06210f; }
.wa-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.wa-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-status { font-size: .78rem; color: var(--bs-secondary-color); }
.wa-status.is-online { color: #1fa971; }
.wa-header-extra { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

.wa-messages {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 1rem .9rem;
  display: flex; flex-direction: column; gap: .35rem;
  scroll-behavior: smooth;
}
.wa-empty { margin: auto; max-width: 320px; text-align: center; color: var(--bs-secondary-color); font-size: .9rem; padding: .9rem 1rem; background: var(--app-card); border-radius: .6rem; }
.wa-day { align-self: center; margin: .6rem 0 .3rem; }
.wa-day span { font-size: .75rem; padding: .2rem .7rem; background: var(--app-card); color: var(--bs-secondary-color); border-radius: 999px; border: 1px solid var(--app-border); }
.wa-more { align-self: center; }

.wa-msg {
  max-width: min(82%, 560px);
  padding: .45rem .65rem .3rem;
  border-radius: .75rem;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
  overflow-wrap: anywhere;
}
.wa-msg.mine { align-self: flex-end; background: var(--app-mine); border-bottom-right-radius: .2rem; }
.wa-msg.theirs { align-self: flex-start; background: var(--app-theirs); border-bottom-left-radius: .2rem; }
.wa-body { line-height: 1.45; }
.wa-attach { margin-bottom: .3rem; }
.wa-attach audio { width: min(260px, 100%); }
.wa-meta { text-align: right; font-size: .68rem; color: var(--bs-secondary-color); margin-top: .1rem; }
.wa-tick { margin-left: .2rem; }
.wa-tick.read { color: #2b8fd6; }

.wa-composer {
  background: var(--app-card); border-top: 1px solid var(--app-border);
  padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom, 0px));
}
.wa-files { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.wa-chip { background: var(--app-accent-soft); border: 1px solid var(--app-border); border-radius: 999px; padding: .15rem .35rem .15rem .7rem; font-size: .8rem; }
.wa-chip button { border: 0; background: transparent; font-size: 1.1rem; line-height: 1; padding: 0 .35rem; color: inherit; }
.wa-row { display: flex; align-items: flex-end; gap: .45rem; }
.wa-row textarea {
  flex: 1 1 auto; resize: none; max-height: 140px;
  border: 1px solid var(--app-border); border-radius: 1.2rem;
  padding: .55rem .9rem; background: var(--app-bg); color: inherit; line-height: 1.35;
}
.wa-row textarea:focus { outline: none; border-color: var(--bs-primary); }
.wa-btn, .wa-send {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 0; display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.wa-btn { background: transparent; }
.wa-btn.is-recording { background: #e5484d; animation: wa-pulse 1.1s infinite; }
.wa-send { background: var(--bs-primary); color: #fff; }
[data-bs-theme="dark"] .wa-send { color: #06210f; }
.wa-send:disabled { opacity: .55; }
@keyframes wa-pulse { 50% { opacity: .55; } }

/* iPhone/iPad: campo com fonte menor que 16px faz o Safari dar zoom ao tocar, e a página passa a
   "andar para o lado" (o botão de enviar some pela direita). Fonte de 16px nos campos no celular. */
@media (max-width: 991.98px) {
  textarea, input[type="text"], input[type="email"], input[type="search"], input[type="datetime-local"], select, .form-control {
    font-size: 16px;
  }
}
html { -webkit-text-size-adjust: 100%; }

/* ícones do compositor herdam a cor; textarea só mostra rolagem quando passa do limite */
.wa-btn { color: var(--bs-secondary-color); }
.wa-row textarea { overflow-y: hidden; }

/* ------------------------------------------------------- player de áudio (estilo WhatsApp) */
.wa-audio { display: flex; align-items: center; gap: .6rem; width: min(280px, 64vw); min-width: 210px; padding: .15rem 0; }
.wa-audio-play {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0;
  background: var(--bs-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
[data-bs-theme="dark"] .wa-audio-play { color: #06210f; }
.wa-audio-mid { flex: 1 1 auto; min-width: 0; }
/* onda em barras: as já tocadas ficam verdes; clique ou arraste para avançar */
.wa-audio-wave {
  display: flex; align-items: center; gap: 2px; height: 30px; margin: 0 0 .1rem;
  cursor: pointer; touch-action: none; outline: none; user-select: none;
}
.wa-audio-wave i { flex: 1 1 0; min-width: 2px; max-width: 4px; border-radius: 2px; background: rgba(120, 130, 135, .45); transition: background .1s; }
.wa-audio-wave i.on { background: var(--bs-primary); }
.wa-audio-wave:focus-visible { outline: 2px solid rgba(var(--bs-primary-rgb), .5); outline-offset: 2px; }

/* "digitando…" / "gravando áudio…" no cabeçalho */
.wa-status.is-activity { font-style: italic; }
.wa-mic-blink { display: inline-flex; vertical-align: middle; animation: wa-pulse 1s infinite; }
.wa-mic-blink svg { width: 14px; height: 14px; }
.wa-audio-info { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--bs-secondary-color); }
.wa-audio-speed { border: 0; background: rgba(120, 130, 135, .22); border-radius: 999px; padding: 0 .55rem; font-size: .72rem; color: inherit; line-height: 1.5; }

/* ------------------------------------------------------- barra de gravação (estilo WhatsApp) */
.wa-rec-bar { display: flex; align-items: center; gap: .7rem; padding: .35rem .4rem .6rem; }
.wa-rec-time { font-variant-numeric: tabular-nums; font-size: 1.05rem; min-width: 2.6rem; }
.wa-rec-wave { flex: 1 1 auto; min-width: 0; width: 100%; height: 34px; }
.wa-rec-dot { flex: 0 0 auto; width: .8rem; height: .8rem; border-radius: 50%; background: #e5484d; border: 0; padding: 0; }
.wa-rec-dot.is-blink { animation: wa-pulse 1s infinite; }
.wa-rec-dot.is-play {
  width: 2.3rem; height: 2.3rem; background: var(--bs-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; animation: none; cursor: pointer;
}
[data-bs-theme="dark"] .wa-rec-dot.is-play { color: #06210f; }
.wa-rec-dot.is-playing { outline: 3px solid rgba(var(--bs-primary-rgb), .3); }
.wa-rec-actions { display: flex; align-items: center; gap: .6rem; }
.wa-rec-del {
  flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; border: 0;
  background: rgba(229, 72, 77, .14); color: #e5484d; display: flex; align-items: center; justify-content: center;
}
.wa-rec-pause {
  flex: 1 1 auto; height: 3rem; border-radius: 999px; border: 0; background: var(--app-bg); color: inherit;
  display: flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 500;
}
.wa-rec .wa-send { width: 3rem; height: 3rem; }

/* ------------------------------------------------------------------ botão claro/escuro (lua no claro, sol no escuro) */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  width: 2.4rem; height: 2.4rem; padding: 0;
  border: 1px solid var(--app-border); border-radius: 999px;
  background: var(--app-card); color: var(--bs-body-color);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.theme-toggle:hover { background: var(--app-accent-soft); color: var(--bs-primary); border-color: var(--bs-primary); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle:focus-visible { outline: 2px solid rgba(var(--bs-primary-rgb), .5); outline-offset: 2px; }
.theme-toggle .ico-sun, .theme-toggle .lbl-to-light { display: none; }
[data-bs-theme="dark"] .theme-toggle .ico-moon, [data-bs-theme="dark"] .theme-toggle .lbl-to-dark { display: none; }
[data-bs-theme="dark"] .theme-toggle .ico-sun { display: block; }
[data-bs-theme="dark"] .theme-toggle .lbl-to-light { display: inline; }
.theme-toggle.with-label { width: auto; padding: 0 .9rem 0 .75rem; font-size: .85rem; font-weight: 500; }

/* no topo do sistema: canto direito, sem atrapalhar o nome centralizado */
.app-brand { position: relative; }
.app-brand-tools { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); display: inline-flex; }
.app-brand-tools .theme-toggle { width: 2.1rem; height: 2.1rem; }
@media (max-width: 575.98px) {
  .app-fullheight .app-brand-tools .theme-toggle { width: 1.9rem; height: 1.9rem; }
}

/* interruptores e caixas marcadas na cor da marca (o tema base usa roxo) */
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-check-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2); }

/* ------------------------------------------------------------------ painel: busca, filtros e documentos */
.admin-search { display: flex; gap: .5rem; }
.admin-search .form-control { flex: 1 1 auto; min-width: 0; }
.admin-filters { display: flex; flex-wrap: wrap; gap: .4rem; }

.doc-link {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem .8rem; border: 1px solid var(--app-border); border-radius: .6rem;
  background: var(--app-accent-soft); color: inherit; text-decoration: none; max-width: 100%;
}
.doc-link:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.doc-name { font-weight: 500; overflow-wrap: anywhere; }
.doc-size { font-size: .8rem; color: var(--bs-secondary-color); }
.doc-action { margin-left: auto; font-size: .85rem; font-weight: 600; color: var(--bs-primary); }

/* ------------------------------------------------------------------ lista do painel: linha fina */
.admin-rows { border: 1px solid var(--app-border); border-radius: .75rem; background: var(--app-card); overflow: hidden; }
.admin-row {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .85rem;
  border-bottom: 1px solid var(--app-border);
}
.admin-row:last-child { border-bottom: 0; }
.admin-row:hover { background: var(--app-accent-soft); }
.admin-row.is-blocked { opacity: .65; }
.admin-avatar {
  position: relative; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bs-primary); color: #fff; font-weight: 700;
}
[data-bs-theme="dark"] .admin-avatar { color: #06210f; }
.dot-avatar { position: absolute; right: -1px; bottom: -1px; margin: 0; border: 2px solid var(--app-card); width: .75rem; height: .75rem; }
.admin-who { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.admin-name { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-weight: 600; }
.admin-name > .text-truncate { max-width: 100%; }
.admin-email { font-size: .82rem; color: var(--bs-secondary-color); }
.admin-tools { flex: 0 0 auto; display: flex; align-items: center; gap: .3rem; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0;
  border: 1px solid transparent; border-radius: .5rem; background: transparent; color: var(--bs-secondary-color);
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--app-accent-soft); color: var(--bs-primary); border-color: var(--app-border); }
.icon-btn-primary { color: var(--bs-primary); }
.icon-btn-danger:hover, .icon-btn-danger.is-on { color: #e5484d; background: rgba(229, 72, 77, .12); }
.admin-switch { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 0 .35rem; padding-left: .55rem; border-left: 1px solid var(--app-border); font-size: .8rem; color: var(--bs-secondary-color); cursor: pointer; }
.admin-switch .form-check-input { margin: 0; cursor: pointer; }

/* celular: nome em cima, ícones e interruptor numa segunda linha fina */
@media (max-width: 575.98px) {
  .admin-row { flex-wrap: wrap; row-gap: .35rem; }
  .admin-who { flex: 1 1 calc(100% - 3.5rem); }
  .admin-tools { flex: 1 1 100%; justify-content: space-between; padding-left: 3.15rem; }
}

/* tela Editar: foto e dados da pessoa */
.profile-card { display: flex; gap: 1rem; align-items: center; padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--app-border); border-radius: .75rem; background: var(--app-card); }
.profile-photo { flex: 0 0 auto; width: 6rem; height: 6rem; border-radius: 50%; overflow: hidden; background: var(--bs-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 700; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-data { margin: 0; display: grid; gap: .25rem; min-width: 0; }
.profile-data dt { display: inline; font-weight: 500; color: var(--bs-secondary-color); font-size: .8rem; margin-right: .35rem; }
.profile-data dd { display: inline; margin: 0; font-size: .9rem; }
@media (max-width: 575.98px) { .profile-card { flex-direction: column; text-align: center; } }

/* interruptor da conversa (liga/desliga) e aviso amarelo legível */
.admin-switch.form-switch { padding-left: .55rem; min-height: 0; }
.admin-switch .form-check-input { float: none; width: 2.1rem; height: 1.15rem; margin: 0; }
.alert-warning { background: #fff3cd; border-color: #f1d98a; color: #5b4300; }
[data-bs-theme="dark"] .alert-warning { background: #3a2f10; border-color: #6b5518; color: #f3d98b; }

/* administrador: escudo e selo em anil, para se destacar do verde da marca */
:root, [data-bs-theme="light"] { --admin-indigo: #4f46e5; --admin-indigo-soft: rgba(79, 70, 229, .12); }
[data-bs-theme="dark"] { --admin-indigo: #a5b4fc; --admin-indigo-soft: rgba(129, 140, 248, .18); }
.admin-shield { display: inline-flex; color: var(--admin-indigo); }
.badge-admin { background: var(--admin-indigo-soft); color: var(--admin-indigo); font-weight: 600; }
.admin-row.is-admin .admin-avatar { background: var(--admin-indigo); box-shadow: 0 0 0 2px var(--admin-indigo-soft); }
[data-bs-theme="dark"] .admin-row.is-admin .admin-avatar { color: #1e1b4b; }

/* ------------------------------------------------------------------ ficha: lápis, lixeira e lista de anexos */
.card-tools { display: inline-flex; gap: .2rem; margin-left: auto; }
.attach-edit-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.attach-edit-list li {
  display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem;
  border: 1px solid var(--app-border); border-radius: .6rem; background: var(--app-accent-soft);
}
.attach-thumb { width: 2.6rem; height: 2.6rem; border-radius: .4rem; object-fit: cover; flex: 0 0 auto; }
.attach-kind { width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; flex: 0 0 auto; }
.attach-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.attach-size { flex: 0 0 auto; font-size: .8rem; color: var(--bs-secondary-color); }

/* ------------------------------------------------------------------ marca de áudio ouvido */
.wa-audio-flag { display: inline-flex; align-items: center; color: var(--bs-secondary-color); margin-left: .15rem; }
.wa-audio-flag.is-unheard { color: var(--bs-primary); }
.wa-audio-flag.is-sent-heard { color: #2b8fd6; }
.wa-audio-info { gap: .35rem; }
.wa-audio-info .wa-audio-speed { margin-left: auto; }
/* áudio recebido ainda não ouvido: anel pulsando no botão de tocar */
.wa-audio.is-unheard .wa-audio-play { box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .28); animation: wa-ring 1.8s ease-out infinite; }
@keyframes wa-ring { 0% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), .45); } 100% { box-shadow: 0 0 0 9px rgba(var(--bs-primary-rgb), 0); } }

/* ------------------------------------------------------------------ responder a uma mensagem */
.wa-msg { position: relative; }
.wa-msg.is-selected { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.wa-msg.is-flash { animation: wa-flash 1.3s ease; }
@keyframes wa-flash { 0%, 60% { box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .35); } 100% { box-shadow: 0 1px 1px rgba(0, 0, 0, .08); } }

.wa-quote {
  display: block; margin: 0 0 .35rem; padding: .3rem .55rem; border-left: 4px solid #6a7cff; border-radius: .4rem;
  background: rgba(0, 0, 0, .06); cursor: pointer; line-height: 1.3; overflow: hidden;
}
.wa-quote.is-mine { border-left-color: var(--bs-primary); }
.wa-quote strong { display: block; font-size: .78rem; color: #4f5fd6; }
.wa-quote.is-mine strong { color: var(--bs-primary); }
.wa-quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .85rem; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
[data-bs-theme="dark"] .wa-quote { background: rgba(255, 255, 255, .07); }
[data-bs-theme="dark"] .wa-quote strong { color: #a5b4fc; }

/* botão de responder ao passar o mouse (no celular se responde segurando a mensagem) */
.wa-reply-btn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 1.7rem; height: 1.7rem; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .12); color: inherit;
  opacity: 0; transition: opacity .15s; cursor: pointer; z-index: 2;
}
.wa-msg.theirs .wa-reply-btn { right: -2.1rem; }
.wa-msg.mine .wa-reply-btn { left: -2.1rem; }
.wa-msg:hover .wa-reply-btn, .wa-reply-btn:focus-visible { opacity: .9; }
@media (pointer: coarse) {
  .wa-reply-btn { display: none; }
  .wa-msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* barra "respondendo a…" acima do campo de mensagem */
.wa-replybar {
  display: flex; align-items: stretch; gap: .5rem; margin: 0 0 .5rem; padding: .35rem .5rem .35rem .65rem;
  border-left: 4px solid var(--bs-primary); border-radius: .5rem; background: var(--app-accent-soft);
}
.wa-replybar-quote { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.wa-replybar-quote strong { display: block; font-size: .8rem; color: var(--bs-primary); }
.wa-replybar-quote span { display: block; font-size: .85rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-replybar-close { flex: 0 0 auto; width: 1.9rem; border: 0; background: transparent; color: var(--bs-secondary-color); font-size: 1.5rem; line-height: 1; cursor: pointer; }


/* Resposta que o participante pode escolher ler antes do texto abrir */
.reply-new { background: var(--app-accent-soft); border-left-style: dashed; }

/* links colados no chat: só clicáveis, sem prévia */
.wa-body .wa-link { color: inherit; text-decoration: underline; word-break: break-all; }

/* admin: apagar mensagem/anexo (lixeira discreta ao lado da hora) */
.wa-del-btn {
  border: 0; background: none; padding: 0 .3rem 0 0; margin: 0; color: inherit; opacity: .45; cursor: pointer;
  display: inline-flex; vertical-align: middle; line-height: 1;
}
.wa-del-btn:hover, .wa-del-btn:focus-visible { opacity: 1; color: #e5484d; }