/* ============================================================================
   menu-vivo.css — menu lateral (desktop + gaveta do celular) e menu da conta.
   Ícones em "chip" colorido por item, movimento discreto, texto em caixa normal e
   bloco de Jogo Responsável. Cor de cada item = --ic (R G B); padrão = cor da marca.
   Respeita prefers-reduced-motion. Carregado no fim do includes/brava/layout.php.
   ============================================================================ */

.sidebar, #braAccount { --ic: var(--primary-color, 22 82 240); }

/* ── cores por item (pelo destino do link) ───────────────────────────────── */
.sidebar .vera-link[href*="evolution-live"]   { --ic: 239 68 68; }
.sidebar .vera-link[href*="id=1482"]          { --ic: 245 158 11; }   /* Mines */
.sidebar .vera-link[href*="id=785"],
.sidebar .vera-link[href*="id=90"]            { --ic: 249 115 22; }   /* Fortune Tiger */
.sidebar .vera-link[href*="id=1478"]          { --ic: 244 63 94; }    /* Aviator */
.sidebar .vera-link[href*="roulette"],
.sidebar .vera-link[href*="roleta"],
.sidebar .vera-link[href*="id=859"]           { --ic: 34 197 94; }    /* Roleta ao vivo */
.sidebar .vera-link[href*="id=2181"]          { --ic: 34 197 94; }
/* Esportes: os três vão pra /esportes → cor pela posição (Ao vivo, Começa em breve, E-sports) */
.sidebar .vera-link[href="/esportes"]:nth-of-type(1) { --ic: 239 68 68; }
.sidebar .vera-link[href="/esportes"]:nth-of-type(2) { --ic: 56 189 248; }
.sidebar .vera-link[href="/esportes"]:nth-of-type(3) { --ic: 168 85 247; }
.sidebar .vera-link[href*="aovivo"],
.sidebar .vera-link[href*="ao-vivo"],
.sidebar .vera-link[href*="live"]             { --ic: 239 68 68; }
.sidebar .vera-link[href*="breve"],
.sidebar .vera-link[href*="upcoming"]         { --ic: 56 189 248; }
.sidebar .vera-link[href*="esports"],
.sidebar .vera-link[href*="e-sports"]         { --ic: 168 85 247; }
.sidebar .vera-link[href*="missions"]         { --ic: 236 72 153; }   /* Promoções */
.sidebar .vera-link[href*="indique"]          { --ic: 16 185 129; }
.sidebar .vera-link[data-inst-menu]           { --ic: 56 189 248; }
.sidebar .vera-group:last-child .vera-link    { --ic: 34 197 94; }    /* Suporte */

/* ── cabeçalhos de grupo: discretos, sem gritar ──────────────────────────── */
.sidebar .vera-group-name {
  color: rgb(255 255 255 / .55) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}
.sidebar .vera-group-hd svg { opacity: .85; }

/* ── linha do menu ───────────────────────────────────────────────────────── */
.sidebar .vera-link {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  min-height: 46px;
  padding: 7px 12px 7px 8px !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, rgb(255 255 255 / .045), rgb(255 255 255 / .02)) !important;
  border: 1px solid rgb(255 255 255 / .06) !important;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s, border-color .22s, box-shadow .22s;
}
.sidebar .vera-link + .vera-link { margin-top: 6px; }
.sidebar .vera-link::after {               /* brilho que atravessa no hover */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .09) 50%, transparent 65%);
  transform: translateX(-120%);
}
.sidebar .vera-link:hover,
.sidebar .vera-link:focus-visible {
  transform: translateX(3px);
  background: linear-gradient(90deg, rgb(var(--ic) / .16), rgb(var(--ic) / .04)) !important;
  border-color: rgb(var(--ic) / .38) !important;
  box-shadow: 0 6px 18px -10px rgb(var(--ic) / .7);
}
.sidebar .vera-link:hover::after { animation: mv-brilho .7s ease forwards; }

.sidebar .vera-link-text {
  text-transform: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  color: rgb(255 255 255 / .9) !important;
}

/* ícone vira um chip colorido */
.sidebar .vera-link-icon {
  flex: 0 0 auto;
  width: 32px !important; height: 32px !important;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 10px;
  color: rgb(var(--ic)) !important;
  stroke-width: 2.1 !important;
  background: radial-gradient(120% 120% at 25% 15%, rgb(var(--ic) / .34), rgb(var(--ic) / .1) 70%);
  box-shadow: inset 0 0 0 1px rgb(var(--ic) / .35), 0 4px 12px -6px rgb(var(--ic) / .8);
  transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.sidebar .vera-link:hover .vera-link-icon { animation: mv-pulo .55s cubic-bezier(.3,1.6,.5,1); }

/* bolinha "ao vivo" pulsando nos itens ao vivo; nos outros, seta discreta */
.sidebar .vera-link-dot, .sidebar .vera-link-line { display: none !important; }
.sidebar .vera-link[href*="evolution-live"] .vera-link-dot,
.sidebar .vera-link[href*="aovivo"] .vera-link-dot,
.sidebar .vera-link[href*="ao-vivo"] .vera-link-dot,
.sidebar .vera-link[href="/esportes"]:nth-of-type(1) .vera-link-dot,
.sidebar .vera-link[href*="live"] .vera-link-dot {
  display: block !important;
  position: static !important;
  margin-left: auto;
  width: 8px !important; height: 8px !important;
  border-radius: 50%;
  background: #ef4444 !important;
  box-shadow: 0 0 0 0 rgb(239 68 68 / .6);
  animation: mv-aovivo 1.6s ease-out infinite;
  opacity: 1 !important;
}

/* ── atalhos 3D do topo (Prêmios, Cassino, Esportes...): flutuam devagar ─── */
.sidebar .promo-card { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.sidebar .promo-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -12px rgb(var(--primary-color) / .9); }
.sidebar .promo-card .promo-icon-fx { animation: mv-flutua 4.2s ease-in-out infinite; }
.sidebar .promo-card:nth-child(2) .promo-icon-fx { animation-delay: -.8s; }
.sidebar .promo-card:nth-child(3) .promo-icon-fx { animation-delay: -1.6s; }
.sidebar .promo-card:nth-child(4) .promo-icon-fx { animation-delay: -2.4s; }
.sidebar .promo-card:nth-child(5) .promo-icon-fx { animation-delay: -3.2s; }
.sidebar .promo-card:nth-child(6) .promo-icon-fx { animation-delay: -4s; }
.sidebar .promo-label { letter-spacing: .04em; }

/* ── bloco de Jogo Responsável (fim do menu) ─────────────────────────────── */
.mv-rg {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 18px 0 8px; padding: 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgb(255 255 255 / .05), rgb(255 255 255 / .015));
  border: 1px solid rgb(255 255 255 / .08);
  color: rgb(255 255 255 / .72);
  font-size: 12.5px; line-height: 1.45;
}
.mv-rg-18 {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid #ef4444; color: #fff;
  font-weight: 800; font-size: 13px;
}
.mv-rg b { display: block; color: #fff; font-size: 13.5px; margin-bottom: 2px; }
.mv-rg a { color: rgb(var(--primary-color) / 1); filter: brightness(1.45); font-weight: 600; text-decoration: none; }
.mv-rg a:hover { text-decoration: underline; }
.mv-rg-selos { display: flex; gap: 10px; align-items: center; margin-top: 8px; opacity: .8; }
.mv-rg-selos img { height: 18px; width: auto; filter: brightness(0) invert(1); opacity: .75; }
.mv-rg-selos .mv-pix { font-weight: 700; letter-spacing: .05em; font-size: 11px; color: #32bcad; }

/* ── menu da conta ───────────────────────────────────────────────────────── */
#braAccount .account-item,
#braAccount .promo-item {
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s, border-color .22s, box-shadow .22s;
}
#braAccount .account-item:hover,
#braAccount .promo-item:hover {
  transform: translateX(3px);
  border-color: rgb(var(--ic) / .4) !important;
  background: linear-gradient(90deg, rgb(var(--ic) / .14), rgb(var(--ic) / .03)) !important;
}
#braAccount .account-item[data-href*="wallet"]        { --ic: 16 185 129; }
#braAccount .account-item[data-href*="premios"]       { --ic: 236 72 153; }
#braAccount .account-item[data-href*="notifications"] { --ic: 245 158 11; }
#braAccount .account-item[data-href*="account"]       { --ic: 56 189 248; }
#braAccount .account-item[data-href*="historico"]     { --ic: 168 85 247; }
#braAccount .account-item[data-href*="jogo-responsavel"] { --ic: 239 68 68; }
#braAccount .promo-item[data-href*="torneios"]        { --ic: 245 158 11; }

#braAccount .account-icon {
  width: 32px !important; height: 32px !important;
  padding: 7px; box-sizing: border-box;
  border-radius: 10px;
  color: rgb(var(--ic)) !important;
  stroke-width: 2.1 !important;
  background: radial-gradient(120% 120% at 25% 15%, rgb(var(--ic) / .34), rgb(var(--ic) / .1) 70%);
  box-shadow: inset 0 0 0 1px rgb(var(--ic) / .35);
}
#braAccount .promo-icon-wrap {
  color: rgb(var(--ic)) !important;
  background: radial-gradient(120% 120% at 25% 15%, rgb(var(--ic) / .34), rgb(var(--ic) / .1) 70%) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--ic) / .35) !important;
}
#braAccount .account-item:hover .account-icon,
#braAccount .promo-item:hover .promo-icon-wrap { animation: mv-pulo .55s cubic-bezier(.3,1.6,.5,1); }
#braAccount .account-label { font-weight: 600; }

/* ── animações ───────────────────────────────────────────────────────────── */
@keyframes mv-pulo {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.14) rotate(-8deg); }
  70% { transform: scale(.96) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes mv-brilho { to { transform: translateX(120%); } }
@keyframes mv-aovivo {
  0% { box-shadow: 0 0 0 0 rgb(239 68 68 / .6); }
  70% { box-shadow: 0 0 0 7px rgb(239 68 68 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(239 68 68 / 0); }
}
@keyframes mv-flutua {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar *, #braAccount * { animation: none !important; transition: none !important; }
}

/* ── cartão "Suporte" (no lugar do antigo Bate-papo) ─────────────────────── */
.sidebar .mv-suporte { cursor: pointer; transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s; }
.sidebar .mv-suporte:hover { transform: translateY(-2px); border-color: rgb(34 197 94 / .45) !important; box-shadow: 0 10px 22px -14px rgb(34 197 94 / .9); }
.sidebar .mv-suporte .chat-entrada-ico { color: rgb(34 197 94) !important; background: radial-gradient(120% 120% at 25% 15%, rgb(34 197 94 / .34), rgb(34 197 94 / .1) 70%) !important; }
.sidebar .mv-suporte:hover .chat-entrada-ico svg { animation: mv-pulo .55s cubic-bezier(.3,1.6,.5,1); }
.sidebar .mv-suporte .chat-entrada-dot { background: #22c55e !important; animation: mv-online 1.8s ease-out infinite; }
.sidebar .mv-sup-sub { display: block; font-size: 11px; font-weight: 500; color: rgb(255 255 255 / .55); letter-spacing: .01em; }
@keyframes mv-online {
  0% { box-shadow: 0 0 0 0 rgb(34 197 94 / .6); }
  70% { box-shadow: 0 0 0 6px rgb(34 197 94 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0); }
}

/* ── 23/10 (devjunior): ícones de LINHA brancos enviados pelo vigia (assets/brava/icones-linha/*.png) ─────────────
   Tira a "cara de IA": nada de chips arco-íris com brilho, nem ícones 3D flutuando. Chip neutro e discreto,
   azul da marca só no hover. Cor por item (--ic) continua só na bolinha/realce, não no ícone. */
.sidebar img.ico-linha.vera-link-icon,
#braAccount img.ico-linha.account-icon {
  width: 32px !important; height: 32px !important; padding: 7px !important; box-sizing: border-box;
  object-fit: contain; border-radius: 10px;
  background: rgb(255 255 255 / .06) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09) !important;
  opacity: .92; animation: none !important;
  transition: background .2s, box-shadow .2s, opacity .2s, transform .25s cubic-bezier(.3,1.5,.5,1) !important;
}
.sidebar .vera-link:hover img.ico-linha.vera-link-icon,
#braAccount .account-item:hover img.ico-linha.account-icon {
  opacity: 1; transform: scale(1.06);
  background: rgb(var(--primary-color) / .22) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--primary-color) / .5) !important;
}
/* itens: realce neutro/azul no hover (antes cada um acendia numa cor) */
.sidebar .vera-link:hover, .sidebar .vera-link:focus-visible,
#braAccount .account-item:hover, #braAccount .promo-item:hover {
  background: linear-gradient(90deg, rgb(var(--primary-color) / .12), rgb(var(--primary-color) / .02)) !important;
  border-color: rgb(var(--primary-color) / .32) !important;
  box-shadow: none !important;
}
/* Torneios / Roleta do topo do menu da conta */
#braAccount .promo-icon-wrap:has(img.ico-linha) {
  background: rgb(255 255 255 / .06) !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09) !important; animation: none !important;
}
#braAccount .promo-icon-wrap img.ico-linha { width: 18px !important; height: 18px !important; object-fit: contain; }
/* cartão Suporte e títulos de seção */
.sidebar .mv-suporte .chat-entrada-ico:has(img.ico-linha) {
  background: rgb(255 255 255 / .06) !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09) !important; color: #fff !important;
}
.sidebar .chat-entrada-ico img.ico-linha { width: 18px; height: 18px; object-fit: contain; animation: none !important; }
.sidebar img.ico-linha.vera-group-icon { width: 16px !important; height: 16px !important; object-fit: contain; opacity: .7; filter: none !important; }
/* atalhos de cima: continuam 3D animados (pedido do devjunior). As regras abaixo só valeriam se um atalho usasse ícone de linha. */
.sidebar .promo-card img[src*="/icones-linha/"] {
  width: 34px !important; height: 34px !important; max-width: none !important; object-fit: contain;
  opacity: .85; filter: none !important; mix-blend-mode: normal !important;
  transition: transform .3s cubic-bezier(.3,1.5,.5,1), opacity .2s;
}
.sidebar .promo-card:hover img[src*="/icones-linha/"] { opacity: 1; transform: scale(1.08) rotate(-4deg); }
@media (prefers-reduced-motion: reduce) { .sidebar img.ico-linha, #braAccount img.ico-linha, .sidebar .promo-card img[src*="/icones-linha/"] { transition: none !important; transform: none !important; } }
/* atalhos de cima: usa o próprio posicionamento do card (variáveis --promo-icon-x/y, centro da caixa) — caixa de 30px no canto de baixo à direita */
.sidebar .promo-card .promo-icon-wrap:has(img[src*="/icones-linha/"]) {
  --promo-icon-x: calc(100% - 23px) !important; --promo-icon-y: calc(100% - 21px) !important;
  width: 30px !important; height: 30px !important; aspect-ratio: auto !important; animation: none !important;
}
.sidebar .promo-card .promo-icon-wrap:has(img[src*="/icones-linha/"]) :is(.promo-icon-fx, .promo-icon-3d-tint) { width: 30px !important; height: 30px !important; }
.sidebar .promo-card img[src*="/icones-linha/"] { width: 30px !important; height: 30px !important; }