/* A CAMADA DO DESENHO DE 2026-09-10 SOBRE O style.css — o que o Claude Design
   mudou nas regras que já existiam (chat, perfil, loja). Vive num arquivo
   próprio, com o MESMO nome que tem lá (previa.css), para a próxima
   reimportação ser um diff limpo: o style.css recebe o que é novo, este
   recebe o que é sobrescrita. Carregado DEPOIS do style.css.

   A base do `.face` (o avatar do chat v4). A família: mini 18 · base 34 ·
   grande 72 (raio 22) · foto 88 (raio 26) — a base segue a proporção, 34 com
   raio 12. */
.face {
  align-items: center;
  border-radius: 12px;
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  font-family: var(--tx-font-ui);
  font-size: 14px;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  line-height: 1;
  width: 34px;
}
.face.mini { border-radius: 6px; }

/* Numa DM o lado direito é o feed da conversa (imagens e anexos); só some
   quando não há nada para mostrar. */
.v4-quadro:has(#v4-lado:empty) {
  grid-template-columns: 272px minmax(0, 1fr) 0;
}
#v4-lado:empty {
  border-left: 0;
  display: none;
}
.v4-feed-grade { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; }
.v4-feed-quadro {
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(146, 163, 255, 0.14);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s, transform 0.2s;
}
.v4-feed-quadro:hover { border-color: var(--tx-blue-bright); transform: scale(1.03); }
.v4-feed-arquivo {
  align-items: center;
  background: rgba(10, 12, 21, 0.4);
  border: 1px solid rgba(146, 163, 255, 0.12);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  text-align: left;
}
.v4-feed-arquivo:hover { border-color: var(--tx-blue-bright); }

/* O rodapé "Otávio · e-mail" do trilho do chat repete quem já está no rodapé
   do menu do app — e o Perfil agora tem tela própria. */
#v4-eu { display: none; }

/* Sem linhas de divisão no chat: as colunas e o topo já se separam pelo
   espaço e pelos próprios blocos. */
.v4-trilho, .v4-lado { border-left: 0; border-right: 0; }
.v4-topo { border-bottom: 0; }

/* A barra de mensagens, refeita: uma cápsula de vidro só — ferramentas
   discretas dentro, campo sem caixa própria, Enviar compacto em gradiente.
   Antes eram quatro peças soltas (3 ícones + campo com borda + botão largo). */
#v4-form.compositor {
  align-items: flex-end;
  background: rgba(10, 12, 21, 0.55);
  backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(146, 163, 255, 0.16);
  border-radius: 16px;
  gap: 4px;
  margin: 6px 24px 16px;
  padding: 6px 6px 6px 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#v4-form.compositor:focus-within {
  border-color: rgba(123, 140, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(61, 90, 254, 0.12);
}
#v4-form .v4-ferramentas { align-items: center; gap: 2px; padding: 0 2px 5px 0; }
#v4-form .v4-ferramentas .icone {
  border-radius: 10px;
  color: var(--tx-text-faint);
  font-size: 15px;
  height: 34px;
  width: 34px;
}
#v4-form .v4-ferramentas .icone:hover { background: rgba(123, 140, 255, 0.1); color: var(--tx-text); }
#v4-form .entrada-texto,
#v4-form .entrada-texto:focus {
  backdrop-filter: none;
  background: transparent;
  border: none;
  box-shadow: none;
  min-height: 34px;
  outline: none;
  padding: 8px 6px;
}
#v4-form .btn-primario {
  border-radius: 11px;
  flex: 0 0 auto;
  font-size: 11px;
  height: 34px;
  letter-spacing: 0.14em;
  margin-bottom: 3px;
  padding: 0 18px;
}
/* Sem barra de rolagem visível em lugar nenhum: a rolagem continua (roda,
   teclado, arrasto), só some a pista/polegar que ficava acesa na lateral. */
*::-webkit-scrollbar { height: 0; width: 0; }

/* Com o perfil aberto, a página é SÓ o perfil: sem o trilho de mensagens,
   sem a coluna do lado — o cartão centrado, como no site. Fechar o perfil
   (✕) devolve o chat normal. */
.v4-quadro:has(#v4-perfil:not(.oculto)) { grid-template-columns: 0 minmax(0, 1fr) 0; }
.v4-quadro:has(#v4-perfil:not(.oculto)) .v4-trilho,
.v4-quadro:has(#v4-perfil:not(.oculto)) .v4-lado { display: none; }
/* Sem o trilho no fluxo, o meio seria auto-colocado na 1ª coluna (0px). */
.v4-quadro:has(#v4-perfil:not(.oculto)) .v4-meio { grid-column: 2; }
#v4-perfil { margin: 0 auto; max-width: 1020px; width: 100%; }
/* O cartão no tamanho REAL — é o card que abre quando alguém clica no seu
   nome no chat ou num espaço (~380px) — centrado em cima; o Editar perfil
   vem embaixo, na largura da página. */
#v4-perfil .v4-cartao-perfil { margin: 0 auto; max-width: 380px; width: 100%; }
#v4-perfil .v4-nome { font-size: 24px; }
#v4-perfil .v4-cabeca { gap: 14px; padding: 0 16px 16px; }
#v4-perfil .face.v4-foto { border-radius: 22px; font-size: 26px; height: 76px; width: 76px; }
#v4-perfil .v4-foto-caixa { margin-top: -38px; }
/* A bio do Editar perfil tem altura fixa: sem alça de resize. */
#v4-perfil .v4-editar .entrada-texto { resize: none; }
/* Cartões de loja no Editar perfil: preview grande dentro, nome embaixo. */
.v4-loja-secao { display: flex; flex-direction: column; gap: 8px; }
/* Inputs e grades na MESMA largura, tudo centrado: 6 colunas exatas (5 itens
   + o cartão "+"), sem a coluna fantasma que o auto-fill deixava sobrando. */
.v4-loja-grade { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
#v4-perfil .v4-editar { margin: 0 auto; max-width: 960px; width: 100%; }
.v4-lojinha .v4-loja-grade { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.v4-loja-cartao {
  background: rgba(10, 12, 21, 0.45);
  border: 1px solid rgba(146, 163, 255, 0.16);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.v4-loja-cartao:hover { border-color: rgba(123, 140, 255, 0.5); transform: translateY(-2px); }
.v4-loja-cartao.ativa { border-color: var(--tx-blue-bright); box-shadow: 0 0 16px rgba(61, 90, 254, 0.35); }
.v4-loja-palco { align-items: center; display: flex; height: 64px; justify-content: center; }
.v4-loja-disco { border-radius: 50%; height: 30px; width: 30px; }
.face.v4-loja-mini { border-radius: 14px; font-size: 17px; height: 44px; width: 44px; }
.v4-loja-demo { font-family: var(--tx-font-display); font-size: 18px; font-style: italic; font-weight: 800; line-height: 1; text-transform: uppercase; }
.v4-loja-nome {
  color: var(--tx-text-muted);
  font-family: var(--tx-font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 8px 6px 10px;
  text-align: center;
  text-transform: uppercase;
}
.v4-loja-cartao.ativa .v4-loja-nome { color: var(--tx-text); }
.v4-loja-cartao.trancado { cursor: default; opacity: 0.55; position: relative; }
.v4-loja-cartao.trancado .v4-loja-palco { filter: saturate(0.5); }
.v4-loja-cadeado { align-items: center; background: rgba(6, 8, 16, 0.85); border: 1px solid rgba(146, 163, 255, 0.25); border-radius: 8px; color: var(--tx-text-muted); display: flex; height: 24px; justify-content: center; position: absolute; right: 6px; top: 6px; width: 24px; }
.v4-loja-mais { align-items: center; border-style: dashed; justify-content: center; }
.v4-loja-mais-sinal { align-items: center; color: var(--tx-blue-bright); display: flex; font-size: 26px; font-weight: 300; height: 44px; justify-content: center; line-height: 1; }
.v4-loja-mais:hover { background: rgba(61, 90, 254, 0.08); }
.v4-lojinha-veu { align-items: center; backdrop-filter: blur(8px); background: rgba(4, 6, 15, 0.7); display: flex; inset: 0; justify-content: center; position: fixed; z-index: 90; }
.v4-lojinha { background: rgba(10, 12, 21, 0.94); border: 1px solid rgba(146, 163, 255, 0.2); border-radius: 16px; box-shadow: 0 24px 60px rgba(2, 4, 14, 0.6); display: flex; flex-direction: column; gap: 14px; max-height: 82vh; padding: 18px 20px 18px; width: min(880px, 94vw); }
.v4-lojinha-topo { align-items: center; display: flex; justify-content: space-between; }
.v4-lojinha-corpo { display: flex; gap: 18px; min-height: 0; }
.v4-lojinha-previa { display: flex; flex: 0 0 236px; flex-direction: column; gap: 8px; }
.v4-lojinha-grade { align-content: start; flex: 1; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); max-height: 56vh; overflow-y: auto; padding-right: 2px; }
.v4-lojinha-rodape { display: flex; gap: 10px; justify-content: flex-end; }
.v4-previa-card { background: rgba(10, 12, 21, 0.6); border: 1px solid var(--tx-blue-bright); border-radius: 14px; box-shadow: 0 0 20px rgba(61, 90, 254, 0.35); overflow: hidden; }
.v4-previa-capa { height: 72px; transition: background 0.3s; }
.v4-previa-foto-cx { margin-top: -22px; padding: 0 14px; }
.v4-previa-linha { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px 0; }
.v4-previa-nome { font-family: var(--tx-font-display); font-size: 20px; font-style: italic; font-weight: 800; line-height: 1; text-transform: uppercase; }
.v4-previa-selo { border: 1px solid; border-radius: 999px; font-family: var(--tx-font-ui); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; padding: 2px 7px; text-transform: uppercase; }
.v4-previa-sub { color: var(--tx-text-muted); font-size: 12px; margin: 6px 0 0; padding: 0 14px 14px; }
/* A vitrine de cosméticos da Loja: seção CHAPADA como as fileiras da Nuuvem
   (sem painel de vidro em volta); filtros como pílulas na barra de busca. */
#loja-cosmeticos { display: flex; flex-direction: column; gap: 14px; margin: 22px 0 30px; }
#loja-cosmeticos .tela-titulo { font-size: 20px; margin: 0 0 2px; }
/* Vitrine deslizante como as outras fileiras da loja; a grade completa só
   aparece com filtro/busca. Nada de aspect-ratio: altura FIXA no palco,
   como nos cards de jogo — é o que não quebra. */
#loja-cosmeticos .v4-lojinha-corpo { display: block; }
.cosmetico-rail { display: flex; gap: 16px; overflow-x: auto; padding: 2px 2px 10px; }
.cosmetico-rail .produto.cosmetico { flex: 0 0 228px; width: 228px; }
#loja-cosmeticos .cosmetico-grade { align-content: start; grid-auto-rows: max-content; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); height: 508px; overflow-y: auto; width: 100%; }
.produto.cosmetico { cursor: pointer; height: auto; position: relative; }
.cosmetico-sua { color: var(--tx-green, #2fd6a2); font-family: var(--tx-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cosmetico-palco { align-items: center; display: flex; height: 122px; justify-content: center; overflow: hidden; transition: transform 0.35s ease; width: 100%; }
.produto.cosmetico:hover .cosmetico-palco { transform: scale(1.04); }
.cosmetico .v4-loja-disco { height: 44px; width: 44px; }
.cosmetico .face.v4-loja-mini { border-radius: 17px; font-size: 21px; height: 56px; width: 56px; }
.cosmetico .v4-loja-demo { font-size: 24px; }
#loja-cosmeticos .v4-lojinha-rodape { align-items: center; }
.v4-loja-cartao { position: relative; }
.v4-loja-tag { background: rgba(6, 8, 16, 0.8); border: 1px solid rgba(146, 163, 255, 0.2); border-radius: 6px; color: var(--tx-text-faint); font-family: var(--tx-font-ui); font-size: 8.5px; font-weight: 700; left: 6px; letter-spacing: 0.1em; padding: 2px 5px; position: absolute; text-transform: uppercase; top: 6px; }
#tela-loja .busca-caixa { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.loja-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.loja-filtro { background: transparent; border: 1px solid rgba(146, 163, 255, 0.18); border-radius: 999px; color: var(--tx-text-muted); cursor: pointer; font-family: var(--tx-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; padding: 8px 14px; text-transform: uppercase; transition: background 0.2s, color 0.2s; }
.loja-filtro:hover { border-color: rgba(123, 140, 255, 0.5); }
.loja-filtro.ativa { background: rgba(61, 90, 254, 0.18); border-color: var(--tx-blue-bright); color: var(--tx-text); }
/* os efeitos novos do nome (Brasa, Gelo, Ouro, Tempestade, Glitch) */
@keyframes pxbrasa { 0%, 100% { color: #ff9f1c; text-shadow: 0 0 10px rgba(255, 120, 40, 0.8); } 40% { color: #ff5470; text-shadow: 0 0 16px rgba(255, 84, 60, 0.9); } 70% { color: #ffd166; text-shadow: 0 0 8px rgba(255, 180, 60, 0.7); } }
@keyframes pxgelo { 0%, 100% { color: #9be8ff; text-shadow: 0 0 12px rgba(120, 220, 255, 0.8); } 50% { color: #e6fbff; text-shadow: 0 0 20px rgba(160, 235, 255, 1); } }
@keyframes pxouro { 0%, 100% { color: #ffd166; text-shadow: 0 0 10px rgba(255, 190, 80, 0.7); } 50% { color: #fff3c4; text-shadow: 0 0 18px rgba(255, 210, 110, 0.95); } }
@keyframes pxtempestade { 0%, 100% { color: #7b8cff; text-shadow: 0 0 8px rgba(123, 140, 255, 0.6); } 45% { color: #e6ebff; text-shadow: 0 0 18px rgba(150, 170, 255, 1); } 55% { color: #7b8cff; } }
@keyframes pxglitch { 0%, 88%, 100% { transform: none; opacity: 1; } 90% { transform: translateX(-2px) skewX(-8deg); opacity: 0.75; } 92% { transform: translateX(2px) skewX(6deg); } 94% { transform: none; } }

/* Como no site: o trilho é só conversas — pedido de amizade mora nos Avisos
   (Aceitar/Recusar por lá) e adicionar gente é papel da Busca. As abas viram
   um segmentado centrado, de larguras iguais. */
.v4-trilho .coluna-secao:has(.v4-pedido),
.v4-trilho .coluna-secao:has(.v4-add) { display: none; }
.v4-abas { justify-content: center; }
.v4-aba { flex: 1 1 0; text-align: center; }

/* Sem o efeito sanfona nas mensagens: cada linha ganhava um fundo próprio
   (hover e fixada) e a conversa virava faixas empilhadas. As bolhas ficam
   contínuas; o "fixada" segue no rótulo 📌 e as ações seguem no hover. */
.msg:hover { background: transparent; }
.msg.fixada { background: transparent; }
/* As ações do hover entravam no fluxo (display none → flex) e a mensagem
   crescia sob o mouse. Agora flutuam sobre a linha, sem mexer na altura. */
.v4-acoes {
  background: rgba(10, 12, 21, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(146, 163, 255, 0.16);
  border-radius: 10px;
  display: flex;
  opacity: 0;
  padding: 1px 3px;
  pointer-events: none;
  position: absolute;
  right: 8px;
  top: -12px;
}
.msg:hover .v4-acoes { opacity: 1; pointer-events: auto; }
/* Ícones de traço nos botões do chat: centrados, com a contagem ao lado. */
#tela-v4chat .icone, #tela-v4chat .reagir { align-items: center; display: inline-flex; gap: 4px; justify-content: center; }
#tela-v4chat .icone svg, #tela-v4chat .reagir svg { display: block; }
.v4-pin-conta { font-family: var(--tx-font-digital); font-size: 11px; }
.v4-alfinete { align-items: center; display: inline-flex; gap: 4px; }
.v4-canal-cerquilha svg, .v4-canal-cadeado svg { display: block; }

/* O menu de estilo (Aa): era três fileiras soltas coladas na borda. Vira um
   cartão de vidro no vocabulário da cápsula, com rótulo por fileira. */
.v4-compositor .v4-estilo {
  background: rgba(10, 12, 21, 0.55);
  backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(146, 163, 255, 0.16);
  border-radius: 16px;
  gap: 12px;
  margin: 6px 24px 0;
  padding: 14px 16px;
}
.v4-compositor .v4-estilo .v4-estilo-linha::before {
  color: var(--tx-text-faint);
  flex: 0 0 52px;
  font-family: var(--tx-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.v4-compositor .v4-estilo .v4-estilo-linha:nth-child(1)::before { content: 'Fonte'; }
.v4-compositor .v4-estilo .v4-estilo-linha:nth-child(2)::before { content: 'Cor'; }
.v4-compositor .v4-estilo .v4-estilo-linha:nth-child(3)::before { content: 'Efeito'; }

/* O menu de estilo (Aa) e a faixa "Respondendo a" acompanham a cápsula. */
.v4-compositor .v4-estilo, .v4-compositor .respondendo { margin-left: 24px; margin-right: 24px; }