/* =====================================================
   YOUKUT — design tokens
   Canvas escuro "dusk", acento âmbar + periwinkle,
   Space Grotesk (display) + Inter (corpo)
===================================================== */
:root {
  --bg: #161320;
  --surface: #1F1B2E;
  --surface-2: #262138;
  --border: #322C46;
  --text: #F2EFEA;
  --text-muted: #9992AC;
  --accent: #FFB84D;
  --accent-ink: #1A1508;
  --accent-2: #8EA7FF;
  --danger: #FF6B6B;
  --success: #6BCB77;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 8px 30px rgba(0,0,0,0.35);
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* =====================================================
   AUTH 2026 — calma social, vínculo e confiança
===================================================== */
:root {
  --bg: #12101b;
  --surface: #1b1728;
  --surface-2: #231e34;
  --border: #352e4a;
  --text-muted: #aaa3ba;
  --radius: 16px;
}

:where(button, a, input, textarea, select):focus-visible {
  outline: 3px solid rgba(142, 167, 255, .55);
  outline-offset: 3px;
}

.auth-screen {
  min-height: 100svh;
  background: #12101b;
  isolation: isolate;
}
.auth-visual { position: relative; overflow: hidden; }
.auth-visual::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,17,.08), rgba(10,8,17,.42));
  pointer-events: none;
}
.auth-visual-content {
  position: relative; z-index: 2; min-height: 100%; padding: clamp(28px, 5vw, 72px);
  display: flex; flex-direction: column;
}
.auth-visual-top { display: flex; align-items: center; gap: 10px; }
.auth-brand-caption {
  margin-left: auto; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.68); border: 1px solid rgba(255,255,255,.18);
  padding: 7px 10px; border-radius: 999px; backdrop-filter: blur(12px);
}
.auth-visual-middle { margin: auto 0; max-width: 660px; }
.auth-eyebrow, .auth-form-eyebrow {
  display: block; color: #ffd27d; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; margin-bottom: 16px;
}
.auth-visual-middle h2 {
  font-size: clamp(42px, 5.4vw, 76px); line-height: .98; letter-spacing: -.055em;
  max-width: 760px; margin-bottom: 24px; text-wrap: balance;
}
.auth-visual-middle p { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.65; max-width: 610px; color: rgba(255,255,255,.78); }
.auth-visual-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; max-width: 660px; }
.auth-float-card {
  position: static !important; transform: none !important; display: flex; align-items: center;
  background: rgba(19,16,29,.48); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px); border-radius: 18px; padding: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.16);
}
.auth-float-icon {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 13px; background: rgba(255,184,77,.16); color: #ffd27d;
}
.auth-float-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.auth-float-card strong { display: block; font-size: 14px; }
.auth-float-card small { display: block; margin-top: 3px; color: rgba(255,255,255,.64); }
.auth-visual-foot { display: flex; gap: 24px; margin-top: 20px; color: rgba(255,255,255,.58); font-size: 12px; }
.auth-visual-foot span { display: flex; align-items: center; gap: 7px; }
.auth-visual-foot i { width: 6px; height: 6px; border-radius: 50%; background: #78d58b; box-shadow: 0 0 0 4px rgba(120,213,139,.12); }

.auth-form-panel {
  background:
    radial-gradient(circle at 75% 12%, rgba(142,167,255,.08), transparent 28%),
    #12101b;
  padding: clamp(22px, 4vw, 58px);
}
.auth-card { width: min(100%, 470px); padding: 0; background: transparent; box-shadow: none; }
.auth-card-heading h2 { font-size: clamp(30px, 3vw, 42px); letter-spacing: -.04em; line-height: 1.05; text-wrap: balance; }
.auth-card-heading p { color: var(--text-muted); line-height: 1.55; }
.auth-form-eyebrow { color: var(--accent-2); margin-bottom: 12px; }
.auth-tabs { padding: 5px; border: 1px solid var(--border); background: rgba(255,255,255,.025); border-radius: 14px; }
.auth-tab { border-radius: 10px; min-height: 42px; }
.auth-form { gap: 16px; }
.auth-form label > span { font-size: 12px; font-weight: 650; color: #d7d2df; letter-spacing: .015em; }
.auth-form input:not([type="checkbox"]) {
  min-height: 50px; border-radius: 13px; background: rgba(255,255,255,.035);
  border-color: #39324d; padding: 13px 14px;
}
.auth-form input:not([type="checkbox"]):hover { border-color: #4b4164; }
.auth-form input:not([type="checkbox"]):focus { border-color: var(--accent-2); box-shadow: 0 0 0 4px rgba(142,167,255,.1); }
.auth-form .btn-primary { min-height: 50px; border-radius: 13px; font-size: 15px; box-shadow: 0 12px 30px rgba(255,184,77,.14); }
.auth-forgot-link { width: fit-content; margin-inline: auto; }
.auth-secure-note { display: flex; justify-content: center; align-items: center; gap: 7px; color: #817a91; font-size: 11px; margin: 2px 0 0; }
.auth-secure-note svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.auth-consent { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.auth-consent input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--accent); }
.auth-consent a, .auth-footer a { color: #c9d3ff; text-decoration: none; }
.auth-consent a:hover, .auth-footer a:hover { text-decoration: underline; }
.auth-password-strength { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 8px; }
.auth-password-strength > span { height: 3px; background: #3a334b; border-radius: 3px; transition: background .2s; }
.auth-password-strength small { grid-column: 1 / -1; color: var(--text-muted); margin-top: 1px; }
.auth-password-strength[data-score="1"] > span:nth-child(1) { background: #ff8a70; }
.auth-password-strength[data-score="2"] > span:nth-child(-n+2) { background: #ffbf5f; }
.auth-password-strength[data-score="3"] > span { background: #78d58b; }
.auth-footer { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; font-size: 11px; color: #6f687d; }

@media (max-width: 900px) {
  .auth-form-panel { padding: 26px 20px 34px; align-items: flex-start; }
  .auth-card { margin: 0 auto; }
  .auth-brand-mobile { margin-bottom: 30px; }
}
@media (max-width: 520px) {
  .auth-card-heading h2 { font-size: 31px; }
  .auth-form-panel { padding-inline: 18px; }
  .auth-form input:not([type="checkbox"]), .auth-form .btn-primary { min-height: 52px; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Página dedicada de chat tem altura própria, calculada via JS — o
   scroll da PÁGINA precisa ficar travado (só a lista de conversas e as
   mensagens rolam internamente), senão o body rola junto e desalinha
   tudo: o cabeçalho fixo passa a "comer" conteúdo por cima e a barra de
   mensagem some por baixo da tela. */
body.chat-page-active {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

.hidden { display: none !important; }
.muted { color: var(--text-muted); }

img { max-width: 100%; display: block; }

button { font-family: inherit; cursor: pointer; }
input, textarea {
  font-family: inherit;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  /* 16px é o mínimo pra iOS Safari não forçar zoom automático ao focar
     o campo (abaixo disso, ele dá zoom in e às vezes não volta certo) */
  font-size: 16px;
  outline: none;
  transition: border-color .15s ease;
}
input:focus, textarea:focus { border-color: var(--accent-2); }
textarea { resize: vertical; font-family: inherit; }

/* ---------- Botões ---------- */
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  transition: transform .12s ease, filter .12s ease;
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  transition: border-color .15s ease, background .15s ease;
}
.btn-secondary:hover { border-color: var(--accent-2); background: var(--surface-2); }

.btn-sm { padding: 7px 16px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-icon {
  background: none; border: none; font-size: 20px; color: var(--text-muted);
  display: inline-flex; align-items: center; padding: 6px; border-radius: 8px;
}
.btn-icon:hover { background: var(--surface-2); }
.btn-remove-img {
  position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.6); color: #fff;
  border: none; border-radius: 50%; width: 26px; height: 26px; font-size: 16px; line-height: 1;
}

/* ---------- Avatares ---------- */
.avatar { border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 2px solid var(--border); }

/* Indicador de status online — um "wrap" em volta do avatar, com a
   bolinha posicionada no canto inferior direito */
.avatar-wrap { position: relative; display: inline-block; line-height: 0; flex-shrink: 0; }
.avatar-wrap .avatar { display: block; }
.online-dot {
  position: absolute; bottom: 0; right: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--success); border: 2px solid var(--bg);
}
.avatar-lg + .online-dot, .avatar-wrap.avatar-wrap-lg .online-dot { width: 16px; height: 16px; border-width: 3px; }
.avatar-sm { width: 36px; height: 36px; }
.avatar-md { width: 46px; height: 46px; }
.avatar-lg { width: 96px; height: 96px; border-width: 3px; border-color: var(--bg); }

/* =====================================================
   TELA DE AUTENTICAÇÃO — split-screen
   Esquerda: arte gerada (SVG) com a proposta da marca.
   Direita: formulário de login/cadastro.
===================================================== */
.auth-screen {
  min-height: 100vh;
  display: flex;
}

/* ---------- Painel visual (esquerda) ---------- */
.auth-visual {
  position: relative;
  flex: 1.1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 48px;
  color: var(--text);
}
.auth-visual-bg { position: absolute; inset: 0; z-index: 0; }
.auth-visual-svg { width: 100%; height: 100%; display: block; }

.auth-orbit circle { animation: authOrbitSpin 60s linear infinite; transform-origin: 400px 500px; }
.auth-blob-1 circle { animation: authFloat 9s ease-in-out infinite; }
.auth-blob-2 circle { animation: authFloat 11s ease-in-out infinite reverse; }
@keyframes authOrbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes authFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-24px); }
}

.auth-visual-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: calc(100vh - 96px);
}

.auth-visual-top { display: flex; align-items: center; gap: 8px; }
.auth-visual-brand { font-family: var(--font-display); font-weight: 700; font-size: 18px; }

.auth-visual-middle { max-width: 440px; margin: auto 0; }
.auth-visual-middle h2 {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 16px;
}
.auth-visual-middle p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.auth-visual-cards { display: flex; flex-direction: column; gap: 12px; max-width: 340px; }
.auth-float-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(20, 14, 38, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  animation: authFloat 7s ease-in-out infinite;
}
.auth-float-card.card-2 { animation-duration: 8.5s; animation-delay: .4s; }
.auth-float-icon { font-size: 20px; }
.auth-float-card strong { display: block; font-size: 13px; }
.auth-float-card small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }

/* ---------- Painel de formulário (direita) ---------- */
.auth-form-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: radial-gradient(circle at 0% 50%, rgba(138, 47, 196, 0.18), transparent 55%), var(--bg);
  overflow-y: auto;
  max-height: 100vh;
}

.auth-card { width: 100%; max-width: 380px; }

.auth-brand-mobile { display: none; text-align: center; margin-bottom: 24px; }

.auth-card-heading { margin-bottom: 24px; }
.auth-card-heading h2 {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}
.auth-card-heading p { color: var(--text-muted); font-size: 13.5px; margin: 0; }

.auth-brand { text-align: center; }
.auth-brand-mark { color: var(--accent); font-size: 28px; }
.auth-brand h1 {
  font-family: var(--font-display);
  font-size: 28px;
  margin: 4px 0 2px;
  letter-spacing: -0.5px;
  display: inline;
}
.auth-brand p { color: var(--text-muted); margin: 4px 0 0; font-size: 13px; }

.auth-tabs { display: flex; background: var(--surface-2); border-radius: 999px; padding: 4px; margin-bottom: 20px; }
.auth-tab {
  flex: 1; border: none; background: none; color: var(--text-muted);
  padding: 9px; border-radius: 999px; font-weight: 600; font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.auth-tab.active { background: var(--accent); color: var(--accent-ink); }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.form-error { color: var(--danger); font-size: 13px; margin: -6px 0 0; min-height: 16px; }

.auth-forgot-link {
  background: none;
  border: none;
  color: var(--accent-2);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  padding: 2px;
  margin: -4px auto 0;
  cursor: pointer;
}
.auth-forgot-link:hover { text-decoration: underline; }

/* Campo de senha com botão de mostrar/ocultar — o input ganha padding
   à direita pra não ficar por baixo do ícone */
.auth-password-field { position: relative; display: flex; }
.auth-password-field input { flex: 1; padding-right: 40px; }
.auth-password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: color .15s ease, background .15s ease;
}
.auth-password-toggle:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.auth-password-toggle svg.hidden { display: none; }

/* Dica de formato — fica visível o tempo todo (diferente de
   placeholder, que some assim que a pessoa começa a digitar, bem na
   hora que ela mais precisa lembrar da regra) */
.auth-field-hint {
  display: block; color: var(--text-muted); font-size: 11.5px;
  font-weight: 400; margin-top: 5px;
}

/* Foco mais visível nos campos de acesso — o outline padrão do
   navegador é removido globalmente (ver regra base de input/textarea),
   então sem isso o foco por teclado (Tab) fica quase imperceptível,
   só a borda mudando de cor sutilmente */
.auth-form input:focus,
.auth-password-field input:focus,
#forgot-password-form input:focus,
#change-password-form input:focus {
  box-shadow: 0 0 0 3px rgba(142, 167, 255, 0.25);
}
.auth-tab:focus-visible,
.auth-password-toggle:focus-visible,
.auth-forgot-link:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}

.modal-subtitle { color: var(--text-muted); font-size: 13.5px; margin: -8px 0 18px; line-height: 1.5; }

.forgot-success { text-align: center; padding: 12px 0 4px; }
.forgot-success-icon { font-size: 32px; display: block; margin-bottom: 12px; }
.forgot-success p { color: var(--text-muted); font-size: 13.5px; line-height: 1.5; margin: 0; }

/* ---------- Responsivo: some com o painel visual em telas menores ---------- */
@media (max-width: 880px) {
  .auth-visual { display: none; }
  .auth-brand-mobile { display: block; }
  .auth-form-panel { padding: 32px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-orbit circle, .auth-blob-1 circle, .auth-blob-2 circle, .auth-float-card { animation: none !important; }
}

/* =====================================================
   APP PRINCIPAL
===================================================== */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 24px;
  padding-top: calc(12px + var(--safe-top-forced, env(safe-area-inset-top))); /* não fica embaixo do notch/barra de status no iOS */
  background: rgba(22,19,32,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Reforço garantido: quando o app roda instalado (modo standalone),
   força um espaço fixo no topo — não depende de env() nem de nenhum
   cálculo em JavaScript funcionar. Isso sempre vence qualquer outra
   regra, propositalmente, porque as tentativas anteriores baseadas em
   cálculo automático não estavam se aplicando nesse aparelho por um
   motivo que não conseguimos identificar. */
@media (display-mode: standalone) {
  .topbar { padding-top: 54px !important; }
}
.topbar-brand {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  white-space: nowrap;
  background: none; border: none; color: var(--text);
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px 2px; cursor: pointer;
  transition: opacity .15s ease;
}
.topbar-brand:hover { opacity: 0.8; }
.topbar-search { position: relative; flex: 1; max-width: 360px; }
.topbar-search input { width: 100%; }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  max-height: 320px; overflow-y: auto; box-shadow: var(--shadow); z-index: 30;
}
.search-result-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
}
.search-result-item:hover { background: var(--surface-2); }
.search-result-item .name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-item .username { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-item > div { min-width: 0; flex: 1; }

.topbar-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topbar-nav-center { display: flex; align-items: center; gap: 6px; }
.nav-link {
  background: none; border: none; color: var(--text-muted); font-weight: 600; font-size: 14px;
  padding: 8px 14px; border-radius: 999px; transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.active { color: var(--accent); }
.nav-logout { color: var(--danger); }
.nav-profile-btn { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px !important; }
.nav-profile-btn .avatar { flex-shrink: 0; }
.nav-profile-btn span {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main { max-width: 640px; margin: 0 auto; padding: 24px 16px 80px; }
.view { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Banner de verificação de e-mail ---------- */
.verify-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255, 184, 77, 0.12); border: 1px solid rgba(255, 184, 77, 0.35);
  color: var(--text); font-size: 13px; padding: 10px 16px; border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.verify-banner button {
  background: var(--accent); color: var(--accent-ink); border: none; border-radius: 999px;
  padding: 6px 14px; font-size: 12px; font-weight: 700; flex-shrink: 0;
}

/* ---------- Abas de feed ---------- */
.feed-tabs { display: flex; background: var(--surface-2); border-radius: 999px; padding: 4px; margin-bottom: 16px; max-width: 280px; }

/* Botão "X novos posts" — aparece quando o polling detecta posts
   novos, mas NUNCA insere nada sozinho. A pessoa decide quando quer
   ver, evitando que o feed "pule" embaixo do dedo dela. */
.new-posts-btn {
  display: block; width: 100%; margin: 0 auto 16px;
  background: var(--accent); color: var(--accent-ink); border: none;
  border-radius: var(--radius); padding: 12px; font-weight: 700; font-size: 14px;
  cursor: pointer; animation: newPostsPop .25s ease;
}
.new-posts-btn:hover { filter: brightness(1.08); }
@keyframes newPostsPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.feed-tab {
  flex: 1; border: none; background: none; color: var(--text-muted);
  padding: 8px; border-radius: 999px; font-weight: 600; font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.feed-tab.active { background: var(--accent); color: var(--accent-ink); }

/* ---------- Bloquear / Denunciar ---------- */
.btn-danger-outline { border-color: var(--danger); color: var(--danger); }
.btn-danger-outline:hover { background: rgba(255, 107, 107, 0.1); border-color: var(--danger); }
.btn-icon-only {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  width: 38px; height: 38px; border-radius: 999px; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon-only:hover { border-color: var(--danger); color: var(--danger); }
.post-report-btn { background: none; border: none; color: var(--text-muted); font-size: 13px; margin-left: auto; }
.post-report-btn:hover { color: var(--danger); }

/* ---------- Composer ---------- */
.composer {
  display: flex; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 20px;
}
.composer-body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.composer-body textarea {
  width: 100%; min-height: 60px; border: none; background: none; padding: 6px 0; font-size: 15px;
}
.composer-body textarea:focus { border: none; }
.composer-preview-wrap { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.composer-preview { width: 100%; max-height: 280px; object-fit: cover; }
#composer-preview-video { width: 100%; max-height: 280px; display: block; }
.composer-actions { display: flex; justify-content: space-between; align-items: center; }

/* ---------- Feed / Posts ---------- */
.feed-list { display: flex; flex-direction: column; gap: 14px; }
.post-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; animation: fadeIn .3s ease;
}
.post-header { display: flex; gap: 10px; align-items: center; }
.post-header-meta { display: flex; flex-direction: column; }
.post-author { font-weight: 700; font-size: 14px; cursor: pointer; }
.post-author:hover { color: var(--accent-2); }
.post-time { color: var(--text-muted); font-size: 12px; }
.post-edit {
  margin-left: auto; background: none; border: none; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; padding: 4px;
}
.post-edit:hover { color: var(--accent); }
.post-delete {
  background: none; border: none; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; padding: 4px;
}
.post-delete:hover { color: var(--danger); }
.post-edited-tag { font-style: italic; opacity: 0.8; }
.post-content { margin: 12px 0; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; }
.post-edit-form { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.post-edit-textarea {
  width: 100%; min-height: 80px; resize: vertical; font-size: 14.5px; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 10px; font-family: inherit;
}
.post-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
.post-image { border-radius: var(--radius-sm); margin: 12px 0 6px; width: 100%; max-height: 460px; object-fit: cover; }
.post-video { border-radius: var(--radius-sm); margin: 12px 0 6px; width: 100%; max-height: 460px; display: block; background: #000; }
.post-actions { display: flex; gap: 18px; padding-top: 10px; border-top: 1px solid var(--border); }
.post-action {
  display: flex; align-items: center; gap: 6px; background: none; border: none;
  color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 4px;
  transition: color .15s ease;
}
.post-action:hover { color: var(--text); }
.post-action.liked { color: var(--accent); }
.post-action .icon { width: 18px; height: 18px; transition: transform .15s ease; }
.post-action.liked .icon { animation: pop .28s ease; color: var(--accent); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---------- Comentários inline (feed) ---------- */
.post-comments { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.post-comments-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.inline-comment { display: flex; gap: 8px; align-items: flex-start; }
.inline-comment .avatar { flex-shrink: 0; cursor: pointer; }
.inline-comment-body { flex: 1; min-width: 0; }
.inline-comment-bubble { font-size: 13px; line-height: 1.4; }
.inline-comment-author { font-weight: 700; margin-right: 6px; cursor: pointer; }
.inline-comment-author:hover { text-decoration: underline; }
.inline-comment-text { color: var(--text); word-wrap: break-word; }

.inline-comment-actions {
  display: flex; align-items: center; gap: 12px; margin-top: 3px;
  font-size: 11.5px; color: var(--text-muted);
}
.inline-comment-time { color: var(--text-muted); }
.inline-comment-reply-btn, .inline-comment-toggle-replies {
  background: none; border: none; color: var(--text-muted); font-size: 11.5px;
  font-weight: 700; padding: 0; cursor: pointer;
}
.inline-comment-reply-btn:hover, .inline-comment-toggle-replies:hover { color: var(--accent-2); }
.inline-comment-toggle-replies { color: var(--accent-2); }

.inline-comment-edit-btn, .inline-comment-delete-btn {
  background: none; border: none; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  margin-left: auto; cursor: pointer;
}
.inline-comment-delete-btn { margin-left: 4px; }
.inline-comment-edit-btn:hover { color: var(--accent); }
.inline-comment-delete-btn:hover { color: var(--danger); }

.inline-comment-edit-form { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.inline-comment-edit-input {
  flex: 1; min-width: 0; font-size: 13px; padding: 6px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text);
}
.inline-comment-edit-cancel, .inline-comment-edit-save {
  font-size: 11.5px; font-weight: 700; border: none; border-radius: 999px;
  padding: 6px 10px; cursor: pointer; flex-shrink: 0;
}
.inline-comment-edit-cancel { background: var(--surface-2); color: var(--text-muted); }
.inline-comment-edit-save { background: var(--accent); color: var(--accent-ink); }

.inline-comment-like-btn {
  display: inline-flex; align-items: center; gap: 3px;
  background: none; border: none; color: var(--text-muted);
  font-size: 11px; font-weight: 700; padding: 0; cursor: pointer;
}
.inline-comment-like-btn .comment-like-icon svg { width: 13px; height: 13px; display: block; }
.inline-comment-like-btn:hover { color: var(--accent); }
.inline-comment-like-btn.liked { color: var(--accent); }
.inline-comment-like-btn.liked .comment-like-icon svg { animation: pop .28s ease; }

.inline-reply-form { display: flex; gap: 6px; margin-top: 6px; }
.inline-reply-input { flex: 1; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; }

/* ---------- Respostas: indentadas e destacadas com faixa lateral ---------- */
.inline-comment-replies {
  display: flex; flex-direction: column; gap: 8px;
  margin: 8px 0 0 20px; padding-left: 14px;
  border-left: 2px solid var(--accent-2);
}
.inline-reply { display: flex; gap: 7px; align-items: flex-start; }
.inline-reply-body { flex: 1; min-width: 0; }
.avatar-xs { width: 24px; height: 24px; flex-shrink: 0; }
.inline-reply-bubble {
  background: rgba(142, 167, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12.5px;
}
.inline-reply .inline-comment-actions { margin-top: 3px; margin-left: 2px; }
.post-comments-viewall {
  background: none; border: none; color: var(--text-muted); font-size: 12.5px;
  font-weight: 600; padding: 2px 0 8px; display: block;
}
.post-comments-viewall:hover { color: var(--accent-2); }

/* ---------- Barra de comentário: input + botão "grudados" numa pílula só ---------- */
.post-comment-form, .inline-reply-form {
  display: flex; align-items: center; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 4px 4px 14px;
  transition: border-color .15s ease;
}
.post-comment-form:focus-within, .inline-reply-form:focus-within { border-color: var(--accent-2); }
.post-comment-input, .inline-reply-input {
  flex: 1; border: none; background: none; padding: 8px 0; font-size: 13px;
}
.post-comment-input:focus, .inline-reply-input:focus { border: none; }
.comment-send-btn {
  background: var(--accent); color: var(--accent-ink); border: none; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.comment-send-btn:hover { filter: brightness(1.08); transform: scale(1.05); }
.comment-send-btn:disabled { opacity: 0.4; pointer-events: none; }
.comment-send-btn .spinner {
  width: 14px; height: 14px; border: 2px solid rgba(26,21,8,0.35); border-top-color: var(--accent-ink);
  border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Recém publicado: pequeno destaque de entrada */
.inline-comment.just-added, .inline-reply.just-added { animation: commentPopIn .35s ease; }
@keyframes commentPopIn {
  from { opacity: 0; transform: translateY(6px); background-color: rgba(255,184,77,0.12); }
  to { opacity: 1; transform: translateY(0); }
}

/* Comentário/resposta apontado por uma notificação — destaque temporário
   pra pessoa achar rápido, sem precisar procurar numa thread grande */
.inline-comment.comment-highlight .inline-comment-bubble,
.inline-reply.comment-highlight .inline-comment-bubble {
  animation: commentTargetGlow 2.2s ease;
  border-radius: var(--radius-sm);
}
@keyframes commentTargetGlow {
  0% { background-color: rgba(255,184,77,0.35); box-shadow: 0 0 0 2px rgba(255,184,77,0.5); }
  70% { background-color: rgba(255,184,77,0.35); box-shadow: 0 0 0 2px rgba(255,184,77,0.5); }
  100% { background-color: transparent; box-shadow: none; }
}

/* Mesmo destaque, aplicado quando a pessoa toca numa citação de
   resposta (chat 1:1 ou grupo) e é levada até a mensagem original */
.msg-jump-highlight .chat-bubble,
.msg-jump-highlight .chat-msg-image {
  animation: commentTargetGlow 1.6s ease;
  border-radius: var(--radius-sm);
}

/* No mobile, na página do post individual, a barra de comentar fica fixa
   no rodapé — sempre à mão, sem precisar rolar até ela */
@media (max-width: 640px) {
  #post-page-content { padding-bottom: 78px; }
  .post-comment-form-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--surface); border: none; border-top: 1px solid var(--border);
    border-radius: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .post-comment-form-sticky .post-comment-input { font-size: 16px; } /* evita zoom do iOS */

  /* Na página de post, o balão flutuante de chat ficava sobreposto ao
     botão de enviar comentário (os dois disputam o canto inferior
     direito) — some enquanto essa barra fixa está na tela. No
     desktop isso não acontece (a barra de comentário não é fixa lá),
     por isso essa regra só vale aqui dentro do mobile. */
  body.post-page-active .chat-fab { display: none; }
  body.group-chat-active .chat-fab { display: none; }

  /* No mobile, o nome ao lado do avatar na barra superior é
     redundante (o avatar já indica "essa é sua conta") e ocupa um
     espaço que faz falta numa tela pequena — mantém só o avatar,
     igual Instagram/Twitter fazem no próprio app mobile. */
  #nav-profile-name { display: none; }
}

.empty-state { text-align: center; color: var(--text-muted); padding: 40px 0; }

/* ---------- Perfil ---------- */
.profile-cover {
  height: 140px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(120deg, rgba(255,184,77,0.35), rgba(142,167,255,0.35));
  background-size: cover; background-position: center;
}
.profile-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; }
.profile-info { display: flex; gap: 16px; padding: 20px 20px 18px; align-items: flex-end; flex-wrap: wrap; }
#profile-avatar { margin-top: -56px; }

/* Foto de perfil um pouco maior no desktop (só a da tela de perfil —
   avatar-lg é compartilhada com chat de grupo e modais de edição, que
   não devem crescer junto). Overlap com a capa (margin-top negativo)
   recalculado na mesma proporção do tamanho original. */
@media (min-width: 641px) {
  #profile-avatar { width: 110px; height: 110px; margin-top: -64px; }
}
.profile-meta { flex: 1; min-width: 200px; }
.profile-meta h2 { font-family: var(--font-display); margin: 8px 0 0; }
.profile-meta p { margin: 4px 0; font-size: 14px; }
#profile-bio { white-space: pre-wrap; line-height: 1.5; }
.profile-details {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 2px;
  font-size: 12.5px; color: var(--text-muted);
}
.profile-details span { display: inline-flex; align-items: center; gap: 4px; }
.profile-interests { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.interest-tag {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.profile-stats { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.profile-stats strong { color: var(--text); }
.profile-stat-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  padding: 2px 0;
  cursor: pointer;
}
.profile-stat-btn:hover { color: var(--accent-2); }
.profile-stat-btn:hover strong { color: var(--accent-2); }
.profile-stat-btn.disabled { cursor: default; }
.profile-stat-btn.disabled:hover { color: var(--text-muted); }
.profile-stat-btn.disabled:hover strong { color: var(--text); }
.profile-actions { display: flex; gap: 8px; padding-top: 12px; flex-wrap: wrap; }
.btn-message { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Seguidores / Seguindo ---------- */
.follow-list-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.follow-list-tabs { display: flex; background: var(--surface-2); border-radius: 999px; padding: 4px; flex: 1; }
.follow-list-tab {
  flex: 1; border: none; background: none; color: var(--text-muted);
  padding: 8px; border-radius: 999px; font-weight: 600; font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.follow-list-tab.active { background: var(--accent); color: var(--accent-ink); }

.follow-list-items { display: flex; flex-direction: column; gap: 2px; }
.follow-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  transition: background .12s ease;
}
.follow-list-row:hover { background: var(--surface); }
.follow-list-row-info { flex: 1; min-width: 0; cursor: pointer; }
.follow-list-row-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-list-row-username { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-list-row-bio {
  font-size: 12.5px; color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.follow-list-row .btn-primary,
.follow-list-row .btn-secondary { flex-shrink: 0; padding: 7px 16px; font-size: 12.5px; }
.profile-view-time { flex-shrink: 0; font-size: 12px; color: var(--text-muted); }

/* ---------- Menu de ações do membro (⋮), evita botões de texto
   competindo por espaço com o nome num painel estreito ---------- */
.group-member-menu-wrap { position: relative; flex-shrink: 0; }
.group-member-menu-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: none; border: none; border-radius: 50%;
  color: var(--text-muted); cursor: pointer;
}
.group-member-menu-btn:hover { background: var(--surface-2); color: var(--text); }
.group-member-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); min-width: 180px; overflow: hidden;
  display: flex; flex-direction: column;
}
.group-member-menu-item {
  background: none; border: none; text-align: left; padding: 10px 14px;
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
.group-member-menu-item:hover { background: var(--surface); }
.group-member-menu-item.danger { color: var(--danger); }

.group-request-row { padding: 12px; border-radius: var(--radius-sm); }
.group-request-row:hover { background: var(--surface); }
.group-request-row-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.group-request-row-actions { display: flex; gap: 8px; }
.group-request-row-actions button { flex: 1; }

.premium-locked {
  text-align: center; padding: 32px 16px;
}
.premium-locked-icon { font-size: 36px; display: block; margin-bottom: 12px; }
.premium-locked p { margin: 4px 0; }
.premium-locked-desc { color: var(--text-muted); font-size: 13px; }

/* ---------- Modais ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(10,8,16,0.7);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
}
.modal-content {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; width: 100%; max-width: 440px; max-height: 85vh; overflow-y: auto; position: relative;
  box-shadow: var(--shadow);
}
.modal-content h3 { font-family: var(--font-display); margin-top: 0; }
.modal-close {
  position: absolute; top: 16px; right: 16px; background: none; border: none;
  color: var(--text-muted); font-size: 22px; line-height: 1;
}
.modal-close:hover { color: var(--text); }

.confirm-modal-content { max-width: 340px; text-align: center; }
#confirm-modal-message { margin: 4px 0 20px; font-size: 15px; line-height: 1.5; }
.confirm-modal-actions { display: flex; gap: 10px; }
.confirm-modal-actions button { flex: 1; }
.btn-danger-fill { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-fill:hover { filter: brightness(1.1); }

#edit-profile-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }

/* Regra genérica pra qualquer formulário dentro de modal — sem isso,
   cada label+input fica só com o comportamento padrão do navegador
   (inline), causando texto e campo brigando espaço na mesma linha */
.modal-content form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.modal-content form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.modal-content form input, .modal-content form textarea, .modal-content form select {
  font-size: 15px; font-weight: 400; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-family: inherit;
}

.edit-email-row { display: flex; align-items: flex-end; gap: 10px; }
.edit-email-row label { flex: 1; }
#edit-email { opacity: 0.65; cursor: not-allowed; }
.edit-email-verified-badge {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--success); font-size: 12.5px; font-weight: 700;
  padding: 8px 0 10px; flex-shrink: 0;
}
.edit-email-row .btn-sm { flex-shrink: 0; margin-bottom: 2px; }
#edit-profile-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.edit-form-row { display: flex; gap: 12px; }
.edit-form-row label { flex: 1; }

/* ---------- Página de editar perfil ---------- */
.edit-profile-header {
  display: flex; align-items: center; gap: 12px;
  max-width: 520px; margin: 0 auto 16px;
}
.edit-profile-header h2 { font-family: var(--font-display); margin: 0; font-size: 20px; }

/* ---------- Botão de destaque: ativar notificações push ---------- */
.push-cta-btn {
  display: flex; align-items: center; gap: 14px;
  max-width: 520px; width: 100%; margin: 0 auto 16px;
  background: linear-gradient(120deg, rgba(255,184,77,0.16), rgba(142,167,255,0.12));
  border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 16px 18px; text-align: left; cursor: pointer;
  color: var(--text); font-family: inherit;
  transition: transform .12s ease, filter .12s ease;
}
.push-cta-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.push-cta-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink);
}
.push-cta-icon svg { width: 20px; height: 20px; }
.push-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.push-cta-text strong { font-size: 14.5px; }
.push-cta-text span { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.push-cta-arrow { font-size: 24px; color: var(--accent); flex-shrink: 0; }

/* Quando já está ativado (texto muda pra "Desativar") — visual mais neutro, sem gritar */
.push-cta-btn.active {
  background: var(--surface-2); border-color: var(--border);
}
.push-cta-btn.active .push-cta-icon { background: var(--surface); color: var(--accent); }
.push-cta-btn.active .push-cta-arrow { color: var(--text-muted); }

.push-cta-btn:disabled { opacity: 0.5; cursor: default; }

/* Variante neutra — pra ações que não são "incentivadas" (tipo os
   outros botões amarelos), mas também não são perigosas o bastante
   pra ficarem vermelhas. Sair é o caso de uso: neutro comunica
   melhor "isso é só utilitário" */
.push-cta-btn-neutral {
  background: var(--surface-2); border-color: var(--border);
}
.push-cta-btn-neutral .push-cta-icon { background: var(--surface); color: var(--text-muted); }
.push-cta-btn-neutral .push-cta-arrow { color: var(--text-muted); }

.edit-language-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  max-width: 520px; width: 100%; margin: 0 auto 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px;
}
.edit-language-card label { font-size: 14.5px; font-weight: 600; }
.edit-language-card select {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 8px 12px; font-size: 14px; cursor: pointer;
}
.push-cta-btn:disabled:hover { transform: none; filter: none; }

.edit-profile-card {
  max-width: 520px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
#edit-profile-form { padding: 0 24px 24px; }

.edit-cover-wrap {
  position: relative; height: 140px; margin: 0 0 44px;
  background: linear-gradient(120deg, rgba(255,184,77,0.35), rgba(142,167,255,0.35));
  overflow: visible;
}
.edit-cover-preview { position: absolute; inset: 0; background-size: cover; background-position: center; }
.edit-cover-upload-btn {
  position: absolute; bottom: 10px; right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(10, 8, 16, 0.6); backdrop-filter: blur(6px);
  color: #fff; border-radius: 50%; cursor: pointer; border: 1px solid rgba(255,255,255,0.2);
}
.edit-cover-upload-btn:hover { background: rgba(10, 8, 16, 0.8); }

.edit-avatar-wrap {
  position: absolute; left: 24px; bottom: -40px;
}
.edit-avatar-wrap .avatar { border: 3px solid var(--surface); }
.edit-avatar-wrap .btn-add-story { bottom: 0; right: -2px; }

.edit-profile-card > .auth-forgot-link { display: block; padding: 0 24px 4px; margin: -8px 0 0; }
.edit-profile-card > .auth-forgot-link:last-of-type { padding-bottom: 22px; }

.comments-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; max-height: 320px; overflow-y: auto; }
.comment-item { display: flex; gap: 10px; }
.comment-bubble { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13.5px; }
.comment-author { font-weight: 700; font-size: 12.5px; margin-bottom: 2px; }
.comment-form { display: flex; gap: 8px; }
.comment-form input { flex: 1; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  padding: 12px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow); z-index: 200; animation: toastIn .25s ease;
}
.toast.error { border-color: var(--danger); color: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Descobrir pessoas ---------- */
.discover-hero { text-align: center; margin-bottom: 20px; }
.discover-hero h2 { font-family: var(--font-display); font-size: 22px; margin: 0 0 6px; }
.discover-hero p { color: var(--text-muted); font-size: 13.5px; margin: 0; }

.discover-nearby-bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.btn-nearby { display: inline-flex; align-items: center; gap: 6px; }
.discover-nearby-hint { text-align: center; font-size: 11.5px; color: var(--text-muted); max-width: 440px; margin: 0 auto 20px; line-height: 1.5; }

.discover-filters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}
.discover-filters input { width: 100%; }
.discover-filters .btn-primary,
.discover-filters .btn-secondary { grid-column: span 1; }

.discover-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.discover-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 14px;
  text-align: center;
  transition: transform .15s ease, border-color .15s ease;
}
.discover-card:hover { transform: translateY(-3px); border-color: var(--accent-2); }
.discover-card .avatar { width: 64px; height: 64px; margin: 0 auto 10px; cursor: pointer; }
.discover-card-name { font-weight: 700; font-size: 14px; cursor: pointer; }
.discover-card-username { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.discover-card-meta {
  font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap;
}
.discover-card-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 12px; }
.discover-card .btn-primary,
.discover-card .btn-secondary { width: 100%; padding: 8px; font-size: 12.5px; }

@media (max-width: 640px) {
  .discover-filters { grid-template-columns: 1fr; }
  .discover-grid { grid-template-columns: 1fr; }
  .topbar { gap: 10px; padding: 10px 14px; }
  .topbar-brand { display: none; }
  .topbar-nav { gap: 2px; }
  .nav-link { padding: 8px 10px; font-size: 13px; }
  .main { padding: 16px 10px 70px; }
  .profile-info { flex-direction: column; align-items: flex-start; }

  /* Some com o campo de busca rápida no mobile — sobra só o ícone de
     lupa (nav-discover) no menu, que já leva pra página de busca */
  .topbar-search { display: none; }

  /* Três zonas: Feed fixo à esquerda, ícones (buscar/chat/grupos/
     notificações) centralizados de verdade no meio, avatar fixo à
     direita — usa Grid com colunas 1fr/auto/1fr, que centraliza a
     coluna do meio mesmo que Feed e o avatar tenham larguras
     diferentes (flexbox simples não garantiria isso). */
  .topbar-nav {
    flex: 1; margin-left: 0;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  }
  .topbar-nav > .nav-link[data-route="feed"] { grid-column: 1; justify-self: start; }
  .topbar-nav-center { grid-column: 2; display: flex; align-items: center; gap: 2px; }
  .topbar-nav > .nav-profile-btn { grid-column: 3; justify-self: end; }

  /* Dropdown de resultados de busca vira um painel largo e fixo,
     independente do tamanho (espremido) do campo de busca no header */
  .search-results {
    position: fixed;
    top: calc(60px + var(--safe-top-forced, env(safe-area-inset-top)));
    left: 8px;
    right: 8px;
    max-height: 60vh;
  }

  /* Reforço: garante 16px mesmo se algum componente específico
     sobrescrever o font-size do input em telas pequenas */
  input, textarea, select { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =====================================================
   STORIES
===================================================== */

/* ---------- Anel colorido no avatar ---------- */
.avatar.has-story {
  padding: 3px;
  background: linear-gradient(135deg, var(--accent) 0%, #ff6fb0 50%, var(--accent-2) 100%);
  border-color: transparent;
  cursor: pointer;
  transition: transform .15s ease;
}
.avatar.has-story:hover { transform: scale(1.04); }

/* ---------- Botão de adicionar story no próprio perfil ---------- */
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.btn-add-story {
  position: absolute; bottom: 2px; right: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); border: 3px solid var(--bg);
  font-size: 16px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.btn-add-story:hover { transform: scale(1.1); }

/* ---------- Preview no modal de criar story ---------- */
.story-modal-preview { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius-sm); margin: 4px 0; }

/* ---------- Visualizador estilo Instagram ---------- */
.story-viewer {
  position: fixed; inset: 0; background: #000; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.story-viewer-progress {
  position: absolute; top: calc(12px + var(--safe-top-forced, env(safe-area-inset-top))); left: 12px; right: 12px;
  display: flex; gap: 4px; z-index: 2;
}
.story-progress-bar {
  flex: 1; height: 3px; background: rgba(255,255,255,0.35); border-radius: 2px; overflow: hidden;
}
.story-progress-fill { height: 100%; width: 0%; background: #fff; }

.story-viewer-header {
  position: absolute; top: calc(26px + var(--safe-top-forced, env(safe-area-inset-top))); left: 12px; right: 12px;
  display: flex; align-items: center; gap: 10px; z-index: 2;
}
.story-viewer-name { color: #fff; font-weight: 700; font-size: 14px; }
.story-viewer-time { color: rgba(255,255,255,0.7); font-size: 12.5px; margin-left: -4px; }
.story-viewer-icon-btn {
  background: none; border: none; color: #fff; font-size: 20px; cursor: pointer;
  padding: 4px; line-height: 1; opacity: 0.85;
  display: inline-flex; align-items: center; justify-content: center;
}
.story-viewer-icon-btn:hover { opacity: 1; }
#story-viewer-close { margin-left: auto; }

.story-viewer-body {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; max-width: 480px; max-height: 100vh;
}
.story-viewer-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }

.story-nav-btn {
  position: absolute; top: 0; bottom: 0; width: 25%;
  background: none; border: none; color: rgba(255,255,255,0.6);
  display: flex; align-items: center; opacity: 0; transition: opacity .15s ease;
}
.story-nav-prev { left: 0; justify-content: flex-start; padding-left: 8px; }
.story-nav-next { right: 0; justify-content: flex-end; padding-right: 8px; }
.story-viewer-body:hover .story-nav-btn { opacity: 1; }
.story-nav-btn svg { width: 26px; height: 26px; }

.story-viewer-caption {
  position: absolute; bottom: 64px; left: 16px; right: 16px;
  color: #fff; text-align: center; font-size: 14px; line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6); z-index: 2;
}

.story-viewer-footer {
  position: absolute; bottom: 18px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 2;
}
.story-like-btn {
  background: none; border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 6px; opacity: 0.9; transition: transform .15s ease;
}
.story-like-btn:hover { opacity: 1; transform: scale(1.1); }
.story-like-btn.liked svg { animation: pop .28s ease; }
.story-like-count { color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }

@media (max-width: 640px) {
  .story-viewer-body { max-width: 100%; }
}

/* =====================================================
   LIGHTBOX DE IMAGEM (usado no chat)
===================================================== */
.image-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.image-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain; }
.image-lightbox-close {
  position: absolute; top: calc(18px + var(--safe-top-forced, env(safe-area-inset-top))); right: 22px; background: none; border: none;
  color: #fff; font-size: 32px; line-height: 1; cursor: pointer; opacity: 0.85;
}
.image-lightbox-close:hover { opacity: 1; }

/* =====================================================
   TOASTS DE NOTIFICAÇÃO EM TEMPO REAL
===================================================== */
.notif-toast-container {
  position: fixed; top: 76px; right: 20px; z-index: 250;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none;
}
.notif-toast-card {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 12px 14px; width: 300px; max-width: calc(100vw - 40px);
  cursor: pointer; animation: notifToastIn .25s ease;
}
.notif-toast-card:hover { border-color: var(--accent-2); }
.notif-toast-card.leaving { animation: notifToastOut .2s ease forwards; }
@keyframes notifToastIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes notifToastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(24px); }
}
.notif-toast-text { font-size: 12.5px; line-height: 1.4; flex: 1; min-width: 0; }
.notif-toast-text strong { font-weight: 700; }
.notif-toast-icon { font-size: 14px; flex-shrink: 0; }

@media (max-width: 640px) {
  .notif-toast-container { top: 66px; right: 10px; left: 10px; align-items: stretch; }
  .notif-toast-card { width: auto; }
}

/* ---------- Menções (@usuario) ---------- */
.mention-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.mention-link:hover { text-decoration: underline; }

.mention-dropdown {
  position: fixed;
  z-index: 500;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
.mention-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 7px 8px; border-radius: 7px;
  background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 13.5px;
}
.mention-dropdown-item.active,
.mention-dropdown-item:hover { background: rgba(255,255,255,0.07); }
.mention-dropdown-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.mention-dropdown-name {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mention-dropdown-username {
  color: var(--text-muted); font-size: 12px;
  margin-left: auto; flex-shrink: 0;
}

/* ---------- Grupos ---------- */
.edit-profile-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }

.groups-list { display: flex; flex-direction: column; gap: 10px; }
.group-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: background .12s ease;
}
.group-card:hover { background: var(--surface-2); }
.group-card-info { flex: 1; min-width: 0; }
.group-card-name { font-weight: 700; font-size: 14.5px; }
.group-card-member-tag {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  background: var(--accent); color: var(--accent-ink); padding: 2px 7px; border-radius: 999px;
  vertical-align: middle;
}
.group-role-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: var(--accent-ink); vertical-align: middle;
  cursor: default;
}
.group-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.group-card-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-unread-dot {
  position: absolute; bottom: 0; right: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--danger); border: 2px solid var(--bg);
}

.group-chat-header-wrap {
  max-width: 640px; margin: 0 auto 12px; position: relative;
}
.group-chat-cover {
  height: 110px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(120deg, rgba(255,184,77,0.35), rgba(142,167,255,0.35));
  background-size: cover; background-position: center;
}
.group-chat-header-overlay {
  position: absolute; top: 10px; left: 10px;
  display: flex; align-items: center;
}
.group-chat-overlay-btn {
  background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
  color: #fff; border-radius: 50%;
}
.group-chat-overlay-btn:hover { background: rgba(0,0,0,0.6); }
.group-chat-info-row {
  display: flex; align-items: center; gap: 12px; padding: 0 16px; margin-top: -20px;
}
.group-chat-avatar {
  width: 64px; height: 64px; border: 3px solid var(--bg); flex-shrink: 0;
}
.group-chat-header-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.group-chat-header-meta strong { font-size: 16px; }
.group-chat-header-meta .muted { font-size: 12px; }
.group-chat-members-btn {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.group-chat-members-btn svg { width: 20px; height: 20px; }
.group-chat-members-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.group-chat-description-visible {
  padding: 8px 16px 0; font-size: 13px; color: var(--text-muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.group-chat-locked {
  max-width: 640px; margin-left: auto; margin-right: auto;
  text-align: center; padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.group-chat-thread {
  display: flex; flex-direction: column;
  max-width: 640px; margin-left: auto; margin-right: auto; width: 100%;
}
.group-msg-sender { font-size: 11.5px; font-weight: 700; color: var(--accent-2); margin-bottom: 2px; }

/* Desktop: altura da tela inteira fixa, sem rolar a página — só a
   lista de mensagens rola por dentro. O cabeçalho (capa+avatar+
   descrição) tem altura variável (a descrição pode ter 0, 1 ou 2
   linhas), então em vez de chutar um número fixo pra subtrair, a
   seção inteira vira uma coluna flex e o conteúdo abaixo do
   cabeçalho (.group-chat-thread ou .group-chat-locked) ocupa o
   espaço restante sozinho — se ajusta automaticamente. */
/* Desktop: altura fixa, sem rolar a página inteira — só a lista de
   mensagens rola por dentro. O número abaixo já soma: altura do
   cabeçalho novo (capa 110px + linha de avatar/nome + até 2 linhas de
   descrição) + a barra superior fixa do app + respiro do layout. Não
   é uma técnica elegante de "se ajustar sozinho", mas é a mesma que já
   funcionava antes disso, só recalibrada — bem mais previsível. */
@media (min-width: 641px) {
  .group-chat-thread { height: calc(100vh - 340px); min-height: 320px; }
  .group-chat-locked { height: calc(100vh - 340px); min-height: 320px; overflow-y: auto; }
}

/* Desktop largo: painel de membros vira coluna fixa sempre visível,
   em vez de gaveta que desliza por cima da conversa — só faz sentido
   com espaço de sobra na tela, por isso o breakpoint mais alto que os
   outros ajustes de "desktop" desse arquivo. */
@media (min-width: 1024px) {
  body.group-chat-active .main { max-width: 100%; }
  body.group-chat-active #view-group-chat { padding-right: 364px; padding-left: 300px; }
  body.group-chat-active #group-members-backdrop { display: none !important; }
  body.group-chat-active #group-members-modal.hidden {
    display: flex !important;
  }
  body.group-chat-active #group-members-modal {
    transform: none !important; box-shadow: none;
    top: 72px;
    /* Fica abaixo do topbar (z-index 20) — o topbar cria seu próprio
       contexto de empilhamento, então o dropdown de notificações
       (z-index 120 *dentro* desse contexto) nunca ultrapassa esse
       painel se ele mantiver o z-index 100 padrão da gaveta mobile.
       Aqui, no modo "coluna fixa" de desktop, baixamos pra 10 —
       ainda acima do conteúdo normal da página, mas abaixo do topbar
       e de tudo que abre a partir dele (notificações, busca). */
    z-index: 10;
  }
  body.group-chat-active #close-group-members-modal { display: none; }
  body.group-chat-active .group-chat-header-wrap,
  body.group-chat-active .group-chat-thread,
  body.group-chat-active .group-chat-locked {
    max-width: 100%; width: auto; margin-left: 20px; margin-right: 20px;
  }

  body.group-chat-active .group-chat-media-sidebar {
    display: block;
    position: fixed; left: 0; top: 72px; bottom: 0; width: 280px;
    overflow-y: auto; padding: 20px 16px;
    border-right: 1px solid var(--border);
  }
}
.group-chat-media-sidebar { display: none; }
.group-chat-media-sidebar h4 { margin: 0 0 14px; font-size: 14px; color: var(--text-muted); }
.group-chat-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.group-chat-media-grid > div {
  aspect-ratio: 1; border-radius: 6px; overflow: hidden; cursor: pointer;
  background: var(--surface-2); position: relative;
}
.group-chat-media-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.group-chat-media-grid .group-chat-media-video-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff;
}
.group-chat-media-empty { font-size: 12.5px; text-align: center; padding: 20px 8px; }

.group-msg-reply-quote {
  border-left: 3px solid var(--accent); background: rgba(255,255,255,0.04);
  border-radius: 4px; padding: 4px 8px; margin-bottom: 6px; font-size: 12px;
}
.group-msg-reply-quote strong { display: block; color: var(--accent-2); font-size: 11.5px; }
.group-msg-reply-quote span { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.group-msg-actions { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.group-msg-like-btn {
  display: inline-flex; align-items: center; gap: 3px; background: none; border: none;
  color: var(--text-muted); cursor: pointer; padding: 0; font-size: 11.5px; font-weight: 700;
}
.group-msg-like-btn.liked { color: var(--danger); }
.group-msg-like-btn svg { width: 14px; height: 14px; }
.group-msg-reply-btn {
  background: none; border: none; color: var(--text-muted); font-size: 11.5px; font-weight: 700;
  cursor: pointer; padding: 0;
}
.group-msg-reply-btn:hover, .group-msg-like-btn:hover { color: var(--accent-2); }
.group-msg-pin-btn {
  display: inline-flex; align-items: center; background: none; border: none;
  color: var(--text-muted); cursor: pointer; padding: 0;
}
.group-msg-pin-btn:hover { color: var(--accent); }

.group-chat-reply-preview {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 6px;
  padding: 8px 12px; margin: 0 0 8px;
}
.group-chat-reply-preview-text { min-width: 0; overflow: hidden; }
.group-chat-reply-preview-text strong { display: block; font-size: 12px; color: var(--accent-2); }
.group-chat-reply-preview-text span { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#group-chat-reply-cancel { background: none; border: none; color: var(--text-muted); font-size: 20px; line-height: 1; flex-shrink: 0; cursor: pointer; }

/* ---------- Painel lateral deslizante (membros do grupo) ---------- */
.side-panel-backdrop {
  position: fixed; inset: 0; background: rgba(10,8,16,0.6); z-index: 99;
}
.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: 340px; max-width: 88vw;
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease;
  box-shadow: -8px 0 24px rgba(0,0,0,0.3);
}
.side-panel.open { transform: translateX(0); }
.side-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  padding-top: calc(18px + var(--safe-top-forced, env(safe-area-inset-top)));
}
.side-panel-header h3 { margin: 0; font-family: var(--font-display); font-size: 17px; }
.side-panel-header .modal-close { position: static; }

/* Reforço garantido, valor fixo — mesma lógica já usada na topbar e
   no widget de chat, pra cobrir o caso em que o cálculo automático
   não se aplica nesse aparelho por algum motivo */
@media (display-mode: standalone) and (max-width: 640px) {
  .side-panel-header { padding-top: 54px !important; }
}
.side-panel-body { flex: 1; overflow-y: auto; padding: 16px 20px; }

/* ---------- Cartão de prévia de vídeo do YouTube (chat) ---------- */
.yt-embed-card {
  margin-top: 6px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface); max-width: 280px;
}
.yt-embed-thumb-wrap { position: relative; aspect-ratio: 16/9; background: #000; }
.yt-embed-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-embed-thumb-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.yt-embed-play-btn {
  position: absolute; inset: 0; margin: auto; width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.yt-embed-play-btn:hover svg circle { fill: rgba(0,0,0,0.85); }
.yt-embed-title {
  padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Menu do card de grupo (editar/apagar) ---------- */
.group-card { position: relative; }
.group-card-menu-wrap { position: relative; flex-shrink: 0; align-self: flex-start; }
.group-card-menu-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: none; border: none; border-radius: 50%;
  color: var(--text-muted); cursor: pointer;
}
.group-card-menu-btn:hover { background: var(--surface-2); color: var(--text); }
.group-card-lock { vertical-align: -1px; margin-right: 4px; color: var(--text-muted); }

/* ---------- Modal de editar grupo — visibilidade ---------- */
.edit-group-visibility { margin: 4px 0; }
.edit-group-visibility > span { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.edit-group-visibility-options { display: flex; flex-direction: column; gap: 8px; }
.edit-group-visibility-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color .12s ease;
}
.edit-group-visibility-option:has(input:checked) { border-color: var(--accent); background: rgba(255,184,77,0.06); }
.edit-group-visibility-option input { margin-top: 3px; flex-shrink: 0; }
.edit-group-visibility-option strong { display: block; font-size: 13.5px; }
.edit-group-visibility-option small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ---------- Convite pra grupo privado ---------- */
.group-invite-search-wrap { margin-bottom: 10px; }
#group-invite-search-input {
  width: 100%; font-size: 13.5px; padding: 9px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; color: var(--text);
}

/* ---------- Tela de aceitar/recusar convite ---------- */
.group-chat-invite-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.group-chat-invite-buttons { display: flex; gap: 10px; width: 100%; max-width: 280px; }
.group-chat-invite-buttons button { flex: 1; }

/* ---------- Sugestão de idioma detectado ---------- */
.lang-suggestion-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 420px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease;
}
.lang-suggestion-banner.show { opacity: 1; transform: translateY(0); }
.lang-suggestion-text { font-size: 13.5px; line-height: 1.4; }
.lang-suggestion-actions { display: flex; gap: 8px; }
.lang-suggestion-accept, .lang-suggestion-dismiss {
  flex: 1; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 8px 12px;
  border: none; cursor: pointer;
}
.lang-suggestion-accept { background: var(--accent); color: var(--accent-ink); }
.lang-suggestion-dismiss { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }

/* ---------- Busca de grupo na tela de Grupos ---------- */
.groups-search-input {
  display: block; width: 100%; margin: 12px 0;
  font-size: 13.5px; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text);
}
.groups-search-input::placeholder { color: var(--text-muted); }

/* ---------- Mensagem fixada no grupo ---------- */
.group-chat-pinned {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 8px;
  background: rgba(255,184,77,0.08); border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
}
.group-chat-pinned svg { color: var(--accent); flex-shrink: 0; }
.group-chat-pinned-text { flex: 1; min-width: 0; }
.group-chat-pinned-text strong { display: block; font-size: 11.5px; color: var(--accent); text-transform: uppercase; letter-spacing: .3px; }
.group-chat-pinned-text span {
  display: block; font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.group-chat-unpin-btn {
  background: none; border: none; color: var(--text-muted); font-size: 18px; line-height: 1;
  flex-shrink: 0; cursor: pointer; padding: 4px;
}
.group-chat-unpin-btn:hover { color: var(--danger); }