/* O TERMINAL DA MENTE (feed.js): faixa de log ao vivo no pé da página, em <aside id="feed"> logo depois do <main>.
   O body é uma coluna flex (header 64px, main flex:1, depois esta faixa). Fechada: 96px no desktop, 72px no celular.
   Aberta (classe 'aberto'): cresce a 56vh POR CIMA do main com margem negativa, de modo que o main não muda de tamanho
   e o canvas 3D não redimensiona. Cores só por variável (--bg --fg --dim --linha --acento --disp --txt) mais compra,
   venda e lima fixas, declaradas aqui como tokens locais. O --acento é fixado em lima DENTRO da faixa: a página /a/<mint>
   troca o --acento do :root pela cor do agente, e a faixa narra a mente inteira, igual em toda página. */
#feed { --compra:#4bd39b; --venda:#ff6b6b; --lima:#b7ff3c; --acento:var(--lima); --branco:#fff; --h:96px; --lh:18px;
  flex:none; position:relative; z-index:6; height:var(--h); margin-top:0; display:flex; align-items:stretch;
  border-top:1px solid var(--linha); background:var(--bg); color:var(--fg);
  font-family:var(--txt); font-size:12px; line-height:var(--lh);
  transition:height 180ms cubic-bezier(.2,.7,.2,1), margin-top 180ms cubic-bezier(.2,.7,.2,1), box-shadow 180ms; }
#feed.aberto { height:56vh; margin-top:calc(var(--h) - 56vh); box-shadow:0 -40px 80px -30px rgba(0,0,0,.85); }

/* ---------- cabeçalho (coluna da esquerda) ---------- */
/* 184px: 'THE MIND · LIVE' em mono 11px com .2em de espaçamento mede ~146px com o ponto; 'offline · last state' ~132px */
.feed-cab { flex:none; width:184px; padding:14px 12px 0 24px; border-right:1px solid var(--linha); cursor:pointer; user-select:none; -webkit-user-select:none; outline:0; }
.feed-cab:focus-visible { box-shadow:inset 0 0 0 1px var(--acento); }
.feed-cab b { display:flex; align-items:center; gap:8px; font-weight:600; font-size:11px; line-height:1; letter-spacing:.2em; text-transform:uppercase; color:var(--acento); white-space:nowrap; }
.feed-cab b i { flex:none; width:6px; height:6px; border-radius:50%; background:var(--dim); transition:background 300ms, box-shadow 300ms; }
#feed.on .feed-cab b i { background:var(--acento); animation:feedVivo 2.4s ease-in-out infinite; }
.feed-cab.pulso b i { background:var(--lima); box-shadow:0 0 0 5px rgba(183,255,60,.22); animation:none; }   /* ensino: um pulso lima */
#feedEst { display:block; margin-top:9px; font-size:11px; line-height:1.4; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#feedDica { display:block; margin-top:2px; font-size:10px; line-height:1.4; color:var(--dim); opacity:.55; letter-spacing:.04em; white-space:nowrap; }

/* ---------- o log ---------- */
.feed-log { flex:1; min-width:0; position:relative; overflow:hidden; padding:12px 32px 12px 20px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 26px); mask-image:linear-gradient(to bottom, transparent 0, #000 26px); }
/* fechado: as linhas ficam ancoradas embaixo, a mais nova por último; o que sobra em cima é cortado e esmaecido pela máscara */
.feed-linhas { position:absolute; left:20px; right:32px; bottom:12px; margin:0; transition:transform 180ms cubic-bezier(.2,.7,.2,1); will-change:transform; }
.feed-linhas.salto { transition:none; transform:translateY(calc(var(--n, 1) * var(--lh))); }   /* feed.js: põe, força o layout, tira -> as linhas sobem N x 18px em 180ms (--n = linhas escritas no mesmo quadro) */
.feed-linhas .l { margin:0; height:var(--lh); line-height:var(--lh); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--fg); animation:feedEntra 320ms ease-out both; }
.feed-linhas .l time { color:var(--dim); opacity:.75; margin-right:12px; font-variant-numeric:tabular-nums; }
.feed-linhas .l b { font-weight:600; color:var(--fg); }
.feed-linhas .l s { text-decoration:none; color:var(--dim); }
.feed-linhas .l em { font-style:italic; font-family:var(--disp); font-size:13px; }
.feed-linhas .l:last-child::after { content:''; display:inline-block; width:6px; height:11px; margin-left:7px; vertical-align:-1px; background:var(--acento); animation:feedCursor 1.1s steps(2, start) infinite; }
/* tipos de linha */
.feed-linhas .k-sense { color:var(--fg); opacity:.78; }
.feed-linhas .k-learn, .feed-linhas .k-learn b { color:var(--acento); }
.feed-linhas .k-chat { color:var(--fg); } .feed-linhas .k-chat em { color:var(--branco); }
.feed-linhas .k-buy, .feed-linhas .k-buy b { color:var(--compra); }
.feed-linhas .k-sell, .feed-linhas .k-sell b { color:var(--venda); }
.feed-linhas .k-sys { color:var(--dim); font-style:italic; } .feed-linhas .k-sys b { color:var(--dim); }
.feed-linhas .k-agent, .feed-linhas .k-agent b { color:var(--c, var(--fg)); }
/* o nome do agente na cor dele (o feed.js também põe a cor inline). Classe própria 'feed-ag', e reset explícito: o site
   usa .ag para o cartão do agente (flex, padding, borda) e nenhuma regra futura deve deformar o sujeito da linha */
.feed-linhas .l b.feed-ag { display:inline; padding:0; margin:0; border:0; border-radius:0; background:none; gap:0; font:inherit; font-weight:600; color:var(--c, var(--fg)); }

/* ---------- aberto: 56vh, rolável, até 400 linhas, botão de fechar ---------- */
.feed-fechar { position:absolute; right:32px; top:12px; display:none; background:none; border:1px solid var(--linha); color:var(--dim); border-radius:999px; padding:3px 10px; font-family:var(--txt); font-size:11px; line-height:1.4; cursor:pointer; }
.feed-fechar:hover { color:var(--fg); border-color:var(--fg); }
#feed.aberto .feed-fechar { display:block; }
#feed.aberto .feed-log { overflow-y:auto; display:flex; flex-direction:column; padding-top:44px; scrollbar-width:thin; scrollbar-color:var(--linha) transparent; }
#feed.aberto .feed-linhas { position:static; margin-top:auto; left:auto; right:auto; bottom:auto; transform:none; }
#feed.aberto .feed-linhas .l { white-space:normal; height:auto; min-height:var(--lh); overflow:visible; text-overflow:clip; padding:1px 0; }

@keyframes feedEntra { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes feedVivo { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
@keyframes feedCursor { to { visibility:hidden; } }

/* ---------- celular: 72px, 3 linhas, cabeçalho vira um rótulo de 64px ---------- */
@media (max-width:860px) {
  #feed { --h:72px; font-size:11px; }
  .feed-cab { width:64px; padding:12px 6px 0 16px; }
  .feed-cab b { font-size:9px; letter-spacing:.14em; gap:6px; }
  .feed-cab .feed-mente, #feedEst, #feedDica { display:none; }
  .feed-cab::after { content:'tap'; display:block; margin-top:8px; font-size:9px; line-height:1; color:var(--dim); opacity:.55; letter-spacing:.1em; text-transform:uppercase; }
  #feed.aberto .feed-cab::after { content:'close'; }
  /* máscara mais curta: a 72px a terceira linha começa a 8px do topo e a máscara de 26px a apagaria */
  .feed-log { padding:9px 16px 9px 12px; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14px); mask-image:linear-gradient(to bottom, transparent 0, #000 14px); }
  .feed-linhas { left:12px; right:16px; bottom:9px; }
  .feed-linhas .l time { margin-right:8px; }
  .feed-fechar { right:16px; top:10px; }
  #feed.aberto .feed-log { padding-top:40px; }
}

@media (prefers-reduced-motion: reduce) {
  #feed, .feed-linhas, .feed-cab b i { transition:none; }
  .feed-linhas .l, #feed.on .feed-cab b i, .feed-linhas .l:last-child::after { animation:none; }
}