/* ═══════════════════════════════════════════════════════════════
   JIFANA FORUM — interface do fórum
   ═══════════════════════════════════════════════════════════════
   Consome os design tokens do Jifana Theme (declarados em jifana.css :root):
   cores --ink-*/--bone-*/--ember/--gold/--arcane, fontes --f-*, raios --r-*,
   easing --ease. Nada é redefinido; com outro tema ativo, jff-tokens.css
   fornece os mesmos valores.

   Prefixo .jff- em todo seletor novo. As primitivas do tema (.btn, .jf-field,
   .jf-select, .jf-msg, .jf-crumbs, .pagination, .jf-none, .jf-prose) são
   reutilizadas como estão — este arquivo só acrescenta os componentes que o
   tema não tem: listas de fórum, linhas de tópico, posts, editor, sino,
   modal de denúncia, perfil.

   Breakpoints do tema respeitados: 980 · 900 · 720 · 560.
   ═══════════════════════════════════════════════════════════════ */

/* O reset da home tira bullets e cor de link no site todo; dentro do fórum
   cada componente define os seus. Nada aqui vaza para fora de .jff. */

/* ── Masthead: título + utilidades ─────────────────────────── */
.jff-masthead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:26px; flex-wrap:wrap; margin-bottom:44px;
}
.jff-masthead-copy{ max-width:660px; }
.jff-masthead-copy .jf-archive-title{ margin-bottom:10px; }
.jff-masthead-copy .lead{ margin-top:4px; }

.jff-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.jff-toolbar-search{ display:flex; }
.jff-toolbar .jff-searchfield{ position:relative; width:220px; }
.jff-searchfield svg{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--ink-500); pointer-events:none;
}
.jff-searchfield input{
  width:100%; padding:11px 14px 11px 38px;
  font-family:var(--f-ui); font-size:.9rem; color:var(--bone);
  background:var(--ink-900); border:1px solid var(--ink-700); border-radius:var(--r-sm);
  transition:border-color .24s var(--ease), box-shadow .24s var(--ease);
}
.jff-searchfield input::placeholder{ color:var(--ink-500); }
.jff-searchfield input:focus{
  outline:none; border-color:var(--ember); box-shadow:0 0 0 3px rgba(255,107,44,.14);
}

/* Botões-ícone da barra — a mesma linguagem do .jf-account do header */
.jff-tool{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  color:var(--bone-muted); border:1px solid var(--ink-700); background:var(--ink-900);
  transition:color .24s var(--ease), border-color .24s var(--ease), background .24s var(--ease);
}
.jff-tool:hover{ color:var(--ember); border-color:rgba(255,107,44,.42); background:rgba(255,107,44,.08); }
.jff-tool:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,107,44,.28); }

/* ── Seletor de idioma (dropdown <details> — funciona sem JS) ── */
.jff-lang-dd{ position:relative; }
.jff-lang-sum{
  display:inline-flex; align-items:center; gap:7px; padding:0 14px; height:40px;
  border:1px solid var(--ink-700); border-radius:var(--r-full);
  background:var(--ink-900); color:var(--bone-muted); cursor:pointer;
  font-family:var(--f-mono); font-size:.66rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; list-style:none;
  transition:color .24s var(--ease), border-color .24s var(--ease);
}
.jff-lang-sum::-webkit-details-marker{ display:none; }
.jff-lang-sum:hover{ color:var(--ember); border-color:rgba(255,107,44,.42); }
.jff-lang-dd[open] .jff-lang-sum{ color:var(--ember); border-color:rgba(255,107,44,.42); }
.jff-lang-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:95; min-width:170px;
  background:var(--ink-850); border:1px solid var(--ink-700); border-radius:var(--r-md);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.9); padding:6px;
  display:flex; flex-direction:column;
}
.jff-lang-opt{
  display:block; padding:8px 12px; border-radius:7px;
  font-family:var(--f-ui); font-size:.86rem; color:var(--bone-dim);
  transition:background .18s var(--ease), color .18s var(--ease);
}
a.jff-lang-opt:hover{ background:var(--ink-800); color:var(--bone); }
.jff-lang-opt.is-on{ color:var(--ember); font-weight:600; }

/* ── Sino de notificações ──────────────────────────────────── */
.jff-bell-wrap{ position:relative; }
.jff-bell-count{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px;
  display:none; align-items:center; justify-content:center;
  background:var(--ember); color:#150C06; border-radius:var(--r-full);
  font-family:var(--f-mono); font-size:.58rem; font-weight:700; line-height:1;
}
.jff-bell-count.is-on{ display:inline-flex; }
.jff-bell-panel{
  position:absolute; right:0; top:calc(100% + 10px); z-index:90; width:min(340px, 88vw);
  background:var(--ink-850); border:1px solid var(--ink-700); border-radius:var(--r-md);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  overflow:hidden;
}
.jff-bell-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--ink-700);
}
.jff-bell-head b{ font-family:var(--f-ui); font-size:.88rem; font-weight:600; color:var(--bone); }
.jff-bell-head a{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ember); transition:color .2s var(--ease);
}
.jff-bell-head a:hover{ color:var(--ember-soft); }
.jff-bell-list{ max-height:320px; overflow-y:auto; }
.jff-bell-item{
  display:block; padding:11px 16px; border-bottom:1px solid var(--ink-800);
  font-size:.84rem; line-height:1.5; color:var(--bone-muted);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.jff-bell-item:last-child{ border-bottom:none; }
.jff-bell-item:hover{ background:var(--ink-800); color:var(--bone); }
.jff-bell-item.is-unread{ box-shadow:inset 2px 0 0 var(--ember); background:rgba(255,107,44,.05); }
.jff-bell-item time{
  display:block; margin-top:3px;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500);
}
.jff-bell-empty{ padding:20px 16px; font-size:.86rem; color:var(--ink-500); text-align:center; }

/* ── Índice: categorias e cartões de fórum ─────────────────── */
.jff-category{ margin-bottom:56px; }
.jff-category-head{ margin-bottom:18px; }
.jff-category-desc{ margin-top:-12px; font-size:.9rem; color:var(--bone-muted); }
.jff-category-empty{ font-size:.9rem; color:var(--ink-500); }

.jff-forum-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:900px){ .jff-forum-grid{ grid-template-columns:1fr; } }

.jff-forum-card{
  display:flex; flex-direction:column; justify-content:space-between; gap:16px; min-width:0;
  padding:22px 24px;
  background:var(--ink-900); border:1px solid var(--ink-800); border-radius:var(--r-md);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.jff-forum-card:hover{ border-color:var(--ink-600); transform:translateY(-3px); }
.jff-forum-name{
  display:block; font-family:var(--f-display); font-weight:400; font-size:1.4rem;
  line-height:1.15; letter-spacing:-.01em; color:var(--bone); margin-bottom:6px;
  transition:color .22s var(--ease);
}
.jff-forum-card:hover .jff-forum-name{ color:var(--ember-soft); }
.jff-forum-desc{ font-size:.88rem; line-height:1.55; color:var(--bone-muted); margin:0; }
.jff-forum-subs{
  display:block; margin-top:10px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-500);
}
.jff-forum-card-stats{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:14px; border-top:1px solid var(--ink-800);
}
.jff-stat{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-500);
}
.jff-stat svg{ color:var(--ink-500); }
.jff-stat b{ color:var(--bone-dim); font-weight:700; }
.jff-forum-last{
  margin-left:auto;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--arcane);
}

/* ── Subfóruns (chips) ─────────────────────────────────────── */
.jff-subforums{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.jff-subforum{
  display:inline-flex; align-items:baseline; gap:9px;
  padding:9px 16px; border:1px solid var(--ink-700); border-radius:var(--r-full);
  background:var(--ink-900);
  transition:border-color .24s var(--ease), transform .24s var(--ease);
}
.jff-subforum:hover{ border-color:var(--ember); transform:translateY(-2px); }
.jff-subforum b{ font-size:.86rem; font-weight:600; color:var(--bone); }
.jff-subforum i{
  font-style:normal; font-family:var(--f-mono); font-size:.58rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500);
}

/* ── Cabeçalho de listagem (ordenar + novo tópico) ─────────── */
.jff-listhead{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.jff-listhead .jf-filters{ margin-bottom:0; flex:1 1 auto; }
.jff-new-topic-btn{ flex:0 0 auto; }

/* ── Linha de tópico ───────────────────────────────────────── */
.jff-topic-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:44px; }
.jff-topic-row{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:18px;
  padding:16px 20px; min-width:0;
  background:var(--ink-900); border:1px solid var(--ink-800); border-radius:var(--r-md);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.jff-topic-row:hover{ border-color:var(--ink-600); transform:translateY(-2px); }
.jff-topic-row.is-pinned{ background:linear-gradient(90deg, rgba(255,107,44,.05), transparent 40%), var(--ink-900); }
.jff-topic-row.is-featured{ border-color:rgba(255,196,107,.38); }
.jff-topic-row.is-featured:hover{ border-color:var(--gold); }
.jff-topic-row.is-closed .jff-topic-title a{ color:var(--bone-muted); }
.jff-topic-row.is-pending{ border-style:dashed; }

.jff-topic-avatar{ flex-shrink:0; }
.jff-topic-main{ min-width:0; }
.jff-topic-title{
  margin:0 0 5px; font-family:var(--f-display); font-weight:400;
  font-size:1.22rem; line-height:1.2; letter-spacing:-.01em;
  overflow-wrap:break-word; word-break:break-word;
}
.jff-topic-title a{ color:var(--bone); transition:color .22s var(--ease); }
.jff-topic-row:hover .jff-topic-title a{ color:var(--ember-soft); }
.jff-topic-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-500);
}
.jff-topic-meta time{ color:var(--ink-500); }
.jff-meta-author{ color:var(--ember); transition:color .2s var(--ease); }
.jff-meta-author:hover{ color:var(--ember-soft); }
.jff-meta-forum{ color:var(--arcane); transition:opacity .2s var(--ease); }
.jff-meta-forum:hover{ opacity:.8; }

.jff-topic-stats{ display:flex; gap:14px; }
.jff-topic-last{ text-align:right; min-width:110px; }
.jff-last-label{
  display:block; font-family:var(--f-mono); font-size:.54rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-500); margin-bottom:3px;
}
.jff-topic-last time{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--bone-dim);
}

/* Badges de estado */
.jff-state{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--f-mono); font-size:.56rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  border:1px solid; border-radius:var(--r-full); padding:3px 9px; line-height:1.4;
}
.jff-state svg{ flex-shrink:0; }
.jff-state-pinned{ color:var(--ember); border-color:rgba(255,107,44,.42); }
.jff-state-featured{ color:var(--gold); border-color:rgba(255,196,107,.42); }
.jff-state-closed{ color:var(--bone-muted); border-color:var(--ink-600); }
.jff-state-pending{ color:var(--gold); border-color:rgba(255,196,107,.42); background:rgba(255,196,107,.06); }

/* ── Página do tópico ──────────────────────────────────────── */
.jff-topicbar{ display:flex; justify-content:flex-end; margin:-8px 0 20px; }
.jff-toolbar-compact{ gap:8px; }
.jff-topic-head{ max-width:860px; margin-bottom:34px; }
.jff-topic-head-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.jff-topic-head-badges:empty{ display:none; }
.jff-topic-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.jff-topic-heading{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2rem,3.8vw,3.1rem); line-height:1.06; letter-spacing:-.016em;
  color:var(--bone); margin:0 0 14px;
  overflow-wrap:break-word; word-break:break-word;
}
.jff-topic-headmeta{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-500);
}
.jff-pending-msg{ margin-bottom:22px; border-color:rgba(255,196,107,.45); background:rgba(255,196,107,.07); color:var(--gold); }

/* Post (abertura e respostas) */
.jff-post{
  display:grid; grid-template-columns:168px 1fr; gap:0; min-width:0;
  background:var(--ink-900); border:1px solid var(--ink-800); border-radius:var(--r-md);
  margin-bottom:14px; overflow:hidden;
}
.jff-post-op{ border-color:var(--ink-700); }
.jff-post:target{ border-color:var(--ember); box-shadow:0 0 0 3px rgba(255,107,44,.12); }
.jff-post-side{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  padding:20px; border-right:1px solid var(--ink-800); background:var(--ink-950);
}
.jff-post-side-stats{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-500);
}
.jff-post-body{ padding:20px 24px; min-width:0; display:flex; flex-direction:column; gap:12px; }
.jff-post-head{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-500);
}
.jff-post-head .jff-mod{ margin-left:auto; }
.jff-post-permalink{ color:var(--ink-500); transition:color .2s var(--ease); }
.jff-post-permalink:hover{ color:var(--ember); }
.jff-op-tag{
  font-family:var(--f-mono); font-size:.54rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ember);
  border:1px solid rgba(255,107,44,.42); border-radius:var(--r-full); padding:2px 8px;
}
.jff-post-content{ font-size:.96rem; }
.jff-post-content > * + *{ margin-top:.9em; }
.jff-post-content h3, .jff-post-content h4{ margin-top:1.4em; margin-bottom:.4em; }
.jff-post-content img.jff-img{
  max-width:100%; height:auto;
  border-radius:var(--r-md); border:1px solid var(--ink-700); display:block;
}
/* Sem tamanho escolhido pelo autor: teto de altura para não dominar o post.
   Com tamanho escolhido (data-jff-sized), a largura manda e a proporção fica
   livre — max-height aqui distorceria. */
.jff-post-content img.jff-img:not([data-jff-sized]){ max-height:560px; width:auto; }
.jff-embed{ margin:0; }
.jff-embed iframe{
  width:100%; aspect-ratio:16/9; border:1px solid var(--ink-700);
  border-radius:var(--r-md); display:block; background:var(--void);
}
.jff-embed-off{
  padding:14px 16px; border:1px dashed var(--ink-700); border-radius:var(--r-md);
  font-family:var(--f-mono); font-size:.72rem; color:var(--ink-500);
}
.jff-quote{
  border-left:2px solid var(--ember);
  padding:10px 0 10px 20px; margin:0;
  color:var(--bone-dim);
}
.jff-quote cite{
  display:block; font-style:normal;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ember); margin-bottom:6px;
}
.jff-quote cite a{ color:var(--ember); }
.jff-quote p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--bone-muted); }
.jff-mention{
  color:var(--arcane); font-weight:600; text-decoration:none !important;
  border-bottom:1px dotted rgba(95,227,200,.5);
  transition:opacity .2s var(--ease);
}
.jff-mention:hover{ opacity:.8; }
.jff-edited{
  margin:0; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-500);
}

/* Ações de um post */
.jff-post-actions{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding-top:10px; border-top:1px solid var(--ink-800); margin-top:auto;
}
.jff-inline-form{ display:inline-flex; }
.jff-act{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:var(--r-full);
  font-family:var(--f-ui); font-size:.8rem; font-weight:500; color:var(--bone-muted);
  border:1px solid transparent;
  transition:color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.jff-act:hover{ color:var(--bone); border-color:var(--ink-600); background:var(--ink-850); }
.jff-act:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.jff-react.is-on{ color:var(--ember); border-color:rgba(255,107,44,.42); background:rgba(255,107,44,.08); }
.jff-react.is-on:hover{ color:var(--ember-soft); }
.jff-subscribe.is-on{ color:var(--gold); border-color:rgba(255,196,107,.4); background:rgba(255,196,107,.06); }
.jff-report-btn:hover{ color:#F2B3AA; border-color:rgba(224,104,90,.5); }

/* Chip de usuário (célula: chip + tags empilhadas) */
.jff-user-cell{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.jff-user-cell .jff-utags{ max-width:100%; }
.jff-user{ display:inline-flex; align-items:center; gap:11px; min-width:0; }
.jff-user-meta{ display:flex; flex-direction:column; min-width:0; }
.jff-user-name{
  font-family:var(--f-ui); font-weight:600; font-size:.92rem; color:var(--bone);
  overflow-wrap:break-word; word-break:break-word;
  transition:color .2s var(--ease);
}
.jff-user:hover .jff-user-name{ color:var(--ember-soft); }
.jff-user-level{
  font-style:normal; font-family:var(--f-mono); font-size:.56rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--arcane); margin-top:2px;
}
.jff-avatar{
  position:relative; display:inline-block; flex-shrink:0; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, rgba(255,107,44,.22), transparent 70%), var(--ink-800);
  border:1px solid var(--ink-700); color:var(--ember);
}
.jff-avatar-fallback{ padding:18%; opacity:.85; }
.jff-avatar-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Título da lista de respostas */
.jff-replies-title{
  font-family:var(--f-display); font-weight:400; font-size:1.6rem; color:var(--bone);
  margin:38px 0 18px; padding-top:26px; border-top:1px solid var(--ink-800);
}

/* Aviso de tópico fechado */
.jff-closed-note{
  display:flex; align-items:center; gap:10px; margin:26px 0;
  padding:14px 18px; border:1px solid var(--ink-700); border-radius:var(--r-md);
  background:var(--ink-950); color:var(--bone-muted); font-size:.9rem;
}
.jff-closed-note svg{ color:var(--ink-500); flex-shrink:0; }

/* ── Compositores ──────────────────────────────────────────── */
.jff-composer, .jff-reply-compose{
  margin:26px 0 44px; padding:24px;
  background:var(--ink-850); border:1px solid var(--ink-700); border-radius:var(--r-lg);
}
.jff-composer-title{
  font-family:var(--f-display); font-weight:400; font-size:1.5rem;
  color:var(--bone); margin:0 0 16px;
}
.jff-premod-note{
  margin:-6px 0 16px; font-size:.84rem; color:var(--gold);
  display:flex; align-items:center; gap:8px;
}
.jff-form{ display:flex; flex-direction:column; gap:15px; }
.jff-form .jf-msg[data-jff-form-msg]:empty{ display:none; }
.jff-form-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.jff-submit{ position:relative; }
.jff-submit[disabled]{ opacity:.62; pointer-events:none; }
.jff-submit.is-busy span{ opacity:0; }
.jff-submit.is-busy::after{
  content:''; position:absolute; top:50%; left:50%; width:17px; height:17px; margin:-9px 0 0 -9px;
  border:2px solid rgba(21,12,6,.35); border-top-color:#150C06; border-radius:50%;
  animation:jffSpin .62s linear infinite;
}
@keyframes jffSpin{ to{ transform:rotate(360deg); } }

/* Campos de formulário do fórum reutilizam .jf-field; o textarea precisa do
   mesmo tratamento dos inputs (o tema só estiliza textarea de comentários).
   O modal de denúncia vive FORA de <main class="jff"> (é irmão do footer,
   como o lightbox do tema), então entra no seletor pelo próprio escopo. */
.jff .jf-field textarea,
.jff-modal .jf-field textarea{
  width:100%; padding:14px 15px; min-height:120px; resize:vertical;
  font-family:var(--f-ui); font-size:.94rem; line-height:1.6; color:var(--bone);
  background:var(--ink-900); border:1px solid var(--ink-700); border-radius:var(--r-sm);
  transition:border-color .24s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease);
}
.jff .jf-field textarea::placeholder,
.jff-modal .jf-field textarea::placeholder{ color:var(--ink-500); }
.jff .jf-field textarea:focus,
.jff-modal .jf-field textarea:focus{
  outline:none; border-color:var(--ember); background:var(--ink-850);
  box-shadow:0 0 0 3px rgba(255,107,44,.14);
}
/* O tema estiliza .jf-field input e .jf-select; fora do Jifana Theme o modal
   precisa do próprio fallback de input (jff-tokens cobre o resto). */
.jff-modal .jf-field > span{
  display:block; margin-bottom:7px;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-500);
}

/* ── Editor ────────────────────────────────────────────────── */
.jff-editor{ position:relative; border:1px solid var(--ink-700); border-radius:var(--r-sm); background:var(--ink-900);
  transition:border-color .24s var(--ease), box-shadow .24s var(--ease); }
.jff-editor:focus-within{ border-color:var(--ember); box-shadow:0 0 0 3px rgba(255,107,44,.14); }
.jff-editor-bar{
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  padding:8px 10px; border-bottom:1px solid var(--ink-800); background:var(--ink-950);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.jff-editor-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:7px; color:var(--bone-muted);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.jff-editor-btn:hover{ color:var(--bone); background:var(--ink-800); }
.jff-editor-btn:focus-visible{ outline:2px solid var(--ember); outline-offset:1px; }
.jff-editor-btn.is-on{ color:var(--ember); background:rgba(255,107,44,.1); }
.jff-editor-plain, .jff-editor-rich{
  width:100%; min-height:150px; padding:14px 16px;
  font-family:var(--f-ui); font-size:.94rem; line-height:1.65; color:var(--bone);
  background:transparent; border:none; resize:vertical;
}
.jff-editor-plain::placeholder{ color:var(--ink-500); }
.jff-editor-plain:focus, .jff-editor-rich:focus{ outline:none; }
.jff-editor-rich{ max-height:520px; overflow-y:auto; }
.jff-editor-rich:empty::before{
  content:attr(data-placeholder); color:var(--ink-500); pointer-events:none; display:block;
}
.jff-editor-rich img{ max-width:100%; max-height:320px; width:auto; height:auto; border-radius:var(--r-sm); border:1px solid var(--ink-700); }
.jff-editor-rich figure[data-jff-embed]{
  position:relative; margin:.9em 0; padding:16px 16px 16px 46px;
  border:1px dashed var(--arcane); border-radius:var(--r-sm);
  font-family:var(--f-mono); font-size:.74rem; color:var(--arcane);
  background:rgba(95,227,200,.05);
}
.jff-editor-rich figure[data-jff-embed]::before{
  content:'▶'; position:absolute; left:16px; top:50%; transform:translateY(-50%);
}
.jff-editor-rich figure[data-jff-embed]::after{ content:attr(data-jff-embed); }
.jff-editor-rich blockquote{ border-left:2px solid var(--ember); padding-left:16px; color:var(--bone-dim); }
.jff-editor-rich pre{ background:var(--ink-850); border:1px solid var(--ink-700); border-radius:var(--r-sm); padding:12px 14px; overflow-x:auto; }
.jff-editor-rich code{ font-family:var(--f-mono); font-size:.86em; color:var(--arcane); }
.jff-editor-rich ul{ list-style:disc; padding-left:1.4em; }
.jff-editor-rich ol{ list-style:decimal; padding-left:1.4em; }
.jff-editor-rich a{ color:var(--ember); text-decoration:underline; }

/* Barra de redimensionamento de mídia (aparece sobre a imagem/vídeo clicado) */
.jff-media-tools{
  position:absolute; z-index:45; display:flex; align-items:center; gap:4px;
  padding:6px 8px; background:var(--ink-850); border:1px solid var(--ink-700);
  border-radius:var(--r-sm); box-shadow:0 18px 44px -18px rgba(0,0,0,.9);
}
.jff-media-tools-label{
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-500); margin-right:4px;
}
.jff-media-size{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 7px; border-radius:6px;
  font-family:var(--f-mono); font-size:.7rem; font-weight:700; color:var(--bone-muted);
  transition:color .18s var(--ease), background .18s var(--ease);
}
.jff-media-size:hover{ color:var(--bone); background:var(--ink-800); }
.jff-media-remove:hover{ color:#F2B3AA; }
.jff-media-px{
  width:70px; padding:5px 8px;
  font-family:var(--f-mono); font-size:.74rem; color:var(--bone);
  background:var(--ink-900); border:1px solid var(--ink-700); border-radius:6px;
}
.jff-media-px:focus{ outline:none; border-color:var(--ember); }
.jff-editor-rich img.is-media-selected,
.jff-editor-rich figure.is-media-selected{
  outline:2px solid var(--ember); outline-offset:2px;
}
.jff-editor-rich img[width]{ height:auto; }

/* Caixa de sugestões de menção */
.jff-mention-box{
  position:absolute; z-index:40; min-width:230px;
  background:var(--ink-850); border:1px solid var(--ink-700); border-radius:var(--r-sm);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.9); overflow:hidden;
}
.jff-mention-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 13px; text-align:left; font-size:.86rem; color:var(--bone-dim);
  transition:background .16s var(--ease);
}
.jff-mention-item:hover, .jff-mention-item.is-active{ background:var(--ink-800); color:var(--bone); }
.jff-mention-item img{ width:24px; height:24px; border-radius:50%; }
.jff-mention-item i{ font-style:normal; font-family:var(--f-mono); font-size:.62rem; color:var(--ink-500); }

/* Honeypot: invisível para pessoas E leitores de tela */
.jff-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ── Convite de login ──────────────────────────────────────── */
.jff-login-invite{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:26px 0 44px; padding:20px 24px;
  background:var(--ink-900); border:1px solid var(--ink-800); border-radius:var(--r-md);
}
.jff-login-invite p{ margin:0; font-size:.92rem; color:var(--bone-muted); flex:1 1 240px; }

/* ── Menu de moderação ─────────────────────────────────────── */
.jff-mod{ position:relative; }
.jff-mod-toggle{ width:34px; height:34px; }
.jff-mod-panel{
  position:absolute; right:0; top:calc(100% + 8px); z-index:80; min-width:230px;
  background:var(--ink-850); border:1px solid var(--ink-700); border-radius:var(--r-md);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.9); padding:8px;
}
.jff-mod-title{
  display:block; padding:6px 10px 8px;
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-500);
}
.jff-mod-form{ display:block; }
.jff-mod-item{
  display:block; width:100%; text-align:left; padding:8px 10px; border-radius:7px;
  font-size:.86rem; color:var(--bone-dim);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.jff-mod-item:hover{ background:var(--ink-800); color:var(--bone); }
.jff-mod-move{ margin-top:6px; padding:10px; border-top:1px solid var(--ink-700); }
.jff-mod-move-label{
  display:block; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-500); margin-bottom:8px;
}
.jff-mod-move-row{ display:flex; gap:8px; align-items:center; }
.jff-mod-move-row .jf-select{ flex:1 1 auto; min-width:0; }
.jff-mod-move-row select{ width:100%; min-width:0; padding:8px 30px 8px 10px; font-size:.82rem; }

/* ── Modal (denúncia) — a linguagem do lightbox do tema ────── */
.jff-modal{
  position:fixed; inset:0; z-index:210;
  display:flex; align-items:center; justify-content:center; padding:28px 20px;
}
.jff-modal[hidden]{ display:none; }
.jff-modal-veil{
  position:absolute; inset:0; background:rgba(6,5,12,.78);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
.jff-modal-panel{
  position:relative; z-index:1; width:100%; max-width:480px; max-height:calc(100vh - 56px);
  overflow-y:auto; padding:34px 34px 30px;
  background:var(--ink-850); border:1px solid var(--ink-700); border-radius:var(--r-lg);
  box-shadow:0 60px 130px -40px rgba(0,0,0,.92), 0 0 0 1px rgba(255,107,44,.06);
  animation:jffModalIn .34s var(--ease) both;
}
@keyframes jffModalIn{ from{ opacity:0; transform:translateY(16px) scale(.985); } to{ opacity:1; transform:none; } }
.jff-modal-x{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--bone-muted);
  background:rgba(12,10,20,.55); border:1px solid var(--ink-700);
  transition:color .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease);
}
.jff-modal-x:hover{ color:var(--bone); border-color:var(--bone-muted); transform:rotate(90deg); }
.jff-kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--f-mono); font-size:.66rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ember); margin-bottom:12px;
}
.jff-kicker::before{ content:''; width:28px; height:1px; background:var(--ember); opacity:.6; }
.jff-modal-title{
  font-family:var(--f-display); font-weight:400; line-height:1.06;
  font-size:1.85rem; color:var(--bone); margin:0 0 8px;
}
.jff-modal-sub{ color:var(--bone-muted); font-size:.92rem; line-height:1.6; margin:0 0 20px; }
.jff-modal-form{ display:flex; flex-direction:column; gap:14px; }
.jff-select-block{ display:block; }
.jff-select-block select{ width:100%; }
body.jff-locked{ overflow:hidden; }

/* ── Perfil ────────────────────────────────────────────────── */
.jff-profile-head{
  display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap;
  padding:26px 28px; margin-bottom:22px;
  background:var(--ink-900); border:1px solid var(--ink-800); border-radius:var(--r-lg);
}
.jff-profile-id{ flex:1 1 260px; min-width:0; }
.jff-profile-name{
  font-family:var(--f-display); font-weight:400; font-size:clamp(1.8rem,3vw,2.4rem);
  line-height:1.05; color:var(--bone); margin:0 0 8px;
  overflow-wrap:break-word; word-break:break-word;
}
.jff-profile-sub{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.jff-profile-handle{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; color:var(--ember);
}
.jff-profile-level{
  font-family:var(--f-mono); font-size:.58rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--arcane);
  border:1px solid rgba(95,227,200,.4); border-radius:var(--r-full); padding:3px 10px;
}
.jff-profile-mod{
  font-family:var(--f-mono); font-size:.58rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(255,196,107,.4); border-radius:var(--r-full); padding:3px 10px;
}
.jff-profile-since{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-500); margin:0; }
.jff-profile-next{ margin:8px 0 0; font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--arcane); }
.jff-profile-bio{ margin:10px 0 0; font-size:.92rem; color:var(--bone-muted); max-width:52ch;
  white-space:pre-line; overflow-wrap:break-word; word-break:break-word; }
.jff-bio-toggle{ margin-top:10px; }
.jff-bio-edit{ margin-top:12px; max-width:520px; }
.jff-profile-stats{ display:flex; gap:10px; flex-wrap:wrap; }
.jff-profile-stat{
  min-width:88px; padding:12px 16px; text-align:center;
  background:var(--ink-850); border:1px solid var(--ink-700); border-radius:var(--r-md);
}
.jff-profile-stat b{
  display:block; font-family:var(--f-display); font-size:1.5rem; font-weight:400; color:var(--bone);
}
.jff-profile-stat i{
  font-style:normal; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-500);
}
.jff-badges{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:26px; }
.jff-badge-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(255,196,107,.35); border-radius:var(--r-full);
  padding:6px 13px;
}

/* Abas */
.jff-tabs{
  display:flex; gap:4px; margin-bottom:24px;
  border-bottom:1px solid var(--ink-800);
}
.jff-tab{
  padding:10px 18px 12px; font-size:.9rem; font-weight:600; color:var(--bone-muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.jff-tab:hover{ color:var(--bone); }
.jff-tab.is-on{ color:var(--ember); border-bottom-color:var(--ember); }

/* ── Resultados de busca / réplicas ─────────────────────────── */
.jff-results-count{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-500); margin:0 0 18px;
}
.jff-result-excerpt{ margin:2px 0 6px; font-size:.87rem; line-height:1.55; color:var(--bone-muted);
  overflow-wrap:break-word; word-break:break-word; }
.jff-result-reply{ grid-template-columns:auto 1fr; }
.jff-user-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-bottom:44px; }
.jff-user-card{
  display:flex; align-items:center; gap:14px; padding:16px 18px; min-width:0;
  background:var(--ink-900); border:1px solid var(--ink-800); border-radius:var(--r-md);
  transition:border-color .28s var(--ease), transform .28s var(--ease);
}
.jff-user-card:hover{ border-color:var(--ink-600); transform:translateY(-3px); }
.jff-user-card-meta{ display:flex; flex-direction:column; min-width:0; }
.jff-user-card-meta b{ font-size:.94rem; font-weight:600; color:var(--bone); }
.jff-user-card-meta i{ font-style:normal; font-family:var(--f-mono); font-size:.62rem; color:var(--ember); }
.jff-user-card-meta span{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-500); margin-top:3px; }

/* ── Assinaturas ───────────────────────────────────────────── */
.jff-sub-row{ position:relative; }
.jff-sub-row .jff-topic-row{ padding-right:150px; }
.jff-sub-remove{ position:absolute; right:16px; top:50%; transform:translateY(-50%); }

/* ── Notificações (página) ─────────────────────────────────── */
.jff-notif-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:36px; }
.jff-notif{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:14px 18px 14px 26px;
  background:var(--ink-900); border:1px solid var(--ink-800); border-radius:var(--r-md);
}
.jff-notif-dot{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:transparent;
}
.jff-notif.is-unread{ border-color:rgba(255,107,44,.35); }
.jff-notif.is-unread .jff-notif-dot{ background:var(--ember); }
.jff-notif-sys{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--ink-700); color:var(--ink-500); flex-shrink:0;
}
.jff-notif-body{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.jff-notif-body a, .jff-notif-body span{ font-size:.9rem; color:var(--bone-dim); line-height:1.5;
  overflow-wrap:break-word; word-break:break-word; }
.jff-notif-body a:hover{ color:var(--bone); }
.jff-notif-body time{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-500);
}

/* ── Estado vazio (herda .jf-none) ─────────────────────────── */
.jff-none-mark{ display:block; width:40px; margin:0 auto 18px; color:var(--ember); opacity:.5; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVO — pensado por largura, não encolhido
   ═══════════════════════════════════════════════════════════ */
@media (max-width:980px){
  .jff-masthead{ align-items:flex-start; flex-direction:column; }
  .jff-toolbar{ width:100%; }
  .jff-toolbar-search{ flex:1 1 auto; }
  .jff-toolbar .jff-searchfield{ width:100%; }
}

@media (max-width:900px){
  /* Linha de tópico: estatísticas descem para uma linha de rodapé */
  .jff-topic-row{ grid-template-columns:auto 1fr; row-gap:10px; }
  .jff-topic-stats{ grid-column:2; justify-self:start; }
  .jff-topic-last{ grid-column:2; text-align:left; min-width:0; }
  .jff-last-label{ display:inline; margin-right:6px; }
  .jff-sub-row .jff-topic-row{ padding-right:20px; padding-bottom:52px; }
  .jff-sub-remove{ top:auto; bottom:12px; transform:none; }
}

@media (max-width:720px){
  /* Post vira coluna: autor em cima, conteúdo embaixo (leitura de celular) */
  .jff-post{ grid-template-columns:1fr; }
  .jff-post-side{
    flex-direction:row; align-items:center; justify-content:space-between;
    border-right:none; border-bottom:1px solid var(--ink-800); padding:14px 18px;
  }
  .jff-post-body{ padding:16px 18px; }
  .jff-composer, .jff-reply-compose{ padding:18px; }
  .jff-profile-head{ padding:20px; }
  .jff-profile-stats{ width:100%; }
  .jff-profile-stat{ flex:1 1 40%; }
  .jff-modal{ padding:0; align-items:flex-end; }
  .jff-modal-panel{
    max-width:none; max-height:92vh; border-radius:var(--r-lg) var(--r-lg) 0 0;
    border-bottom:none; padding:26px 22px 30px;
  }
  .jff-editor-bar{ overflow-x:auto; flex-wrap:nowrap; }
  .jff-listhead{ flex-direction:column; align-items:stretch; }
  .jff-new-topic-btn{ width:100%; }
}

@media (max-width:560px){
  .jff-topic-avatar{ display:none; }
  .jff-topic-row{ grid-template-columns:1fr; padding:14px 16px; }
  .jff-topic-stats, .jff-topic-last{ grid-column:1; }
  .jff-forum-card{ padding:18px; }
  .jff-forum-last{ margin-left:0; width:100%; }
  .jff-user-grid{ grid-template-columns:1fr; }
  .jff-bell-panel{ position:fixed; left:12px; right:12px; top:auto; width:auto; }
}

/* ── Movimento reduzido ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .jff-modal-panel{ animation:none; }
  .jff-submit.is-busy::after{ animation:none; }
  .jff *{ transition-duration:.01ms !important; }
}