/* =============================================================================
   cosmetics.css — molduras de avatar (overlay) + balões de chat (border-image)
   ============================================================================= */

/* ---- MOLDURA: overlay em volta do avatar ----
   O container precisa deixar a moldura "vazar" (overflow visível), MAS o avatar
   continua REDONDO porque o recorte circular vai no próprio <img> (border-radius),
   não mais no overflow do container. Sem isso o avatar aparecia quadrado. */
.av-fr{ position:relative; overflow:visible !important; }
.av-fr > img{ border-radius:50%; }
.av-fr .chat-av-ph, .av-fr .profile-avatar-ph{ border-radius:50%; }
/* com moldura escolhida, some o anel/borda escura do container — a moldura É a borda */
.av-fr.has-frame{ border-color:transparent !important; }
.chat-av.av-fr.has-frame{ background:transparent !important; }

.av-frame{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  object-fit:contain; pointer-events:none; z-index:4;
}
/* o furo das molduras Kako ocupa ~60% da arte -> ~166% deixa o avatar preencher o furo */
.profile-avatar .av-frame{ width:166%; height:166%; }
.chat-av .av-frame{ width:162%; height:162%; }
.chat-uav .av-frame{ width:162%; height:162%; }

/* ---- BALÃO DE CHAT: border-image 9-slice atrás do corpo da mensagem ---- */
.chat-msg-body.has-bubble{
  /* ABRAÇA o texto (não estica full-width). Cobre col em block E em flex. */
  display:inline-block; width:auto; align-self:flex-start;
  min-width:104px; max-width:min(560px,100%);
  box-sizing:border-box;
  background:transparent !important;
  border:15px solid transparent;
  border-image-slice:30 34 30 34 fill;
  border-image-width:15px 17px 15px 17px;
  border-image-repeat:stretch;
  padding:2px 12px;
  border-radius:0;
}

/* ---- PICKER (painel) ---- */
.cos-wrap{ display:flex; flex-direction:column; gap:22px; }
.cos-sec-h{ display:flex; align-items:center; gap:9px; font-size:1.05rem; font-weight:700; margin:0 0 4px; }
.cos-sub{ color:hsl(var(--muted)/.8); font-size:.85rem; margin:0 0 12px; }
.cos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px; max-height:340px; overflow-y:auto; padding:4px; }
.cos-cell{ position:relative; aspect-ratio:1; border:1px solid hsl(var(--glass-brd)); border-radius:14px; background:rgba(255,255,255,.02); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; padding:6px; }
.cos-cell:hover{ border-color:hsl(var(--accent)/.55); background:hsl(var(--accent)/.06); }
.cos-cell.sel{ border-color:hsl(var(--accent)); background:hsl(var(--accent)/.12); box-shadow:0 0 0 1px hsl(var(--accent)/.6) inset; }
.cos-cell img{ max-width:100%; max-height:100%; object-fit:contain; }
.cos-cell.none{ font-size:.72rem; color:hsl(var(--muted)/.8); font-weight:700; letter-spacing:.05em; }
/* célula de bubble: mostra o balão esticado com um "Aa" dentro */
.cos-bcell{ aspect-ratio:2/1; }
.cos-bcell .cos-bprev{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6);
  border:15px solid transparent; border-image-slice:30 34 30 34 fill; border-image-width:12px 14px; border-image-repeat:stretch; }
/* preview ao vivo (avatar com moldura + balão) */
.cos-live{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; padding:16px; border:1px solid hsl(var(--glass-brd)); border-radius:16px; background:rgba(255,255,255,.02); margin-bottom:6px; }
.cos-live-av{ position:relative; width:88px; height:88px; border-radius:50%; overflow:visible; flex:none; }
.cos-live-av .cos-av-img{ width:100%; height:100%; border-radius:50%; object-fit:cover; background:hsl(var(--accent)/.25); display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:800; color:#fff; }
.cos-live-bubble{ padding:10px 16px; font-weight:600; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); border:16px solid transparent; border-image-slice:30 34 30 34 fill; border-image-width:16px 18px; border-image-repeat:stretch; min-width:120px; }

/* ---- moldura na LISTA de usuários do chat (.chat-uav-w) ---- */
.chat-uav-w{ position:relative; display:inline-flex; flex:none; overflow:visible; }
.chat-uav-w .av-frame{ width:162%; height:162%; }
.chat-uav-w.has-frame .chat-uav{ border-color:transparent; }

/* ---- GIF do chat: corta ~18px de baixo p/ esconder marca d'água/tag queimada no gif ---- */
.chat-gif-w{ display:inline-block; overflow:hidden; border-radius:12px; margin-top:4px; border:1px solid var(--glass-brd); line-height:0; max-width:220px; }
.chat-gif-w .chat-gif{ display:block; margin:0 0 -18px 0; border:0; border-radius:0; max-width:220px; max-height:238px; }

/* ---- moldura nas AVALIAÇÕES (.rv-av) ---- */
.rv-av.av-fr .av-frame{ width:162%; height:162%; }
.rv-av.av-fr.has-frame{ border-color:transparent !important; }
.av-fr .rv-av-ini{ border-radius:50%; }
/* saudação do painel: deixa o nick estilizado "escapar" do gradiente do título .dx-hi */
.dx-hi .aura-name{ -webkit-text-fill-color:initial; }