/* BRASLOL 2 - CAIXA DE ENTRADA (painel "Seu time" da carreira; tela: js/career/inbox.js). Botao de email a esquerda do Gerenciar + menu expansivel dentro do painel.
   A bolinha vermelha com o numero e a mesma .sc-bdg da aba Eventos (css/scrims.css). Classes novas: c-inb, c-inbp e inb-*. Sem style="" no HTML (CSP): so classes aqui. */

.c-inb{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:26px;margin-left:auto;padding:0!important;border:0!important;border-radius:0;background:rgba(255,255,255,.14)!important;color:#fff;transition:background .15s,transform .12s}
.c-inb+.c-mng{margin-left:-6px}   /* o email empurra o par para a direita; o botao seguinte (Trainee) fica colado ao lado dele (menos espaco = sobra mais largura para o nome do time) */
.c-inb:hover,.c-inb.on,.c-inb:focus-visible{background:rgba(255,255,255,.28)!important}
.c-inb:active{transform:scale(.96)}
.c-inb .sc-bdg{top:-7px;right:-7px}
.inb-ic{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* menu expansivel: fica por cima dos cartoes dos jogadores, logo abaixo da linha do time */
.c-inbp{position:absolute;left:18px;right:18px;top:94px;z-index:4;box-sizing:border-box;max-height:170px;overflow-y:auto;overscroll-behavior:contain;padding:8px;background:linear-gradient(135deg,rgba(33,39,64,.97),rgba(22,27,47,.97));border:0;border-radius:5px}   /* sem borda; fundo = a cor FINAL do modal de Configuracoes/Salvar (vidro .34/.40 por cima da camada escura #smodal rgba(8,10,28,.62) sobre o dashboard), quase opaco: aqui o blur nao funciona (o painel pai ja tem backdrop-filter) e um vidro translucido deixaria o texto dos paineis vizinhos aparecer. Para clarear/escurecer mexa nos dois rgb */
.c-inbp[hidden]{display:none}
.c-inbp.in{animation:inb-in .16s ease backwards}   /* so ao ABRIR (classe .in, ver inbToggle) e so opacidade: transform animado trocava a camada de raster no fim (tremida e texto borrado) */
@keyframes inb-in{from{opacity:0}}
.inb-l{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.inb-none{margin:0;padding:14px 8px;font-size:12px;line-height:17px;color:rgba(255,255,255,.75);text-align:center}

.inb-r{box-sizing:border-box;padding:8px 9px;background:rgba(255,255,255,.08);border-radius:4px}
.inb-r.on{background:rgba(255,255,255,.13)}
.inb-h{display:flex;align-items:center;gap:10px}
.inb-ph{flex:none;width:30px;height:30px;object-fit:cover;border-radius:50%;background:rgba(255,255,255,.12)}
.inb-who{display:flex;flex:1;flex-direction:column;min-width:0}
.inb-who b{overflow:hidden;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
.inb-who small,.inb-val small,.inb-t small{font-size:10px;letter-spacing:.04em;white-space:nowrap}
.inb-val{display:flex;flex:none;flex-direction:column;align-items:flex-end}
.inb-val b{font-size:13px;font-weight:700;color:#8fe3a8;white-space:nowrap}
.inb-t{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:11px}
.inb-t span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inb-lg{flex:none;width:16px;height:16px;object-fit:contain}
.inb-up{display:flex;flex:none;flex-direction:column;align-items:flex-end}
.inb-up b{font-size:13px;font-weight:700;color:#8fe3a8;white-space:nowrap}
.inb-up small{font-size:10px;letter-spacing:.04em;white-space:nowrap}
.inb-up.dn b{color:#f08a8a}
.inb-note{margin:6px 0 0;font-size:11px;line-height:15px;color:rgba(255,255,255,.8)}
.inb-clr{list-style:none}
.inb-clr .inb-b{width:100%}
.inb-hint{display:block;margin-top:6px;font-size:10px;line-height:14px;color:rgba(255,255,255,.7)}
.inb-warn{color:#ffb4bb}
.inb-a{display:flex;gap:6px;margin-top:8px}
.inb-b{flex:1 1 auto;min-width:0;height:26px;padding:0 10px!important;border:0!important;border-radius:0;background:#fff!important;color:#000;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:background .15s,transform .12s}
.inb-b:hover,.inb-b:focus-visible{background:#e6eaff!important}
.inb-b.ghost{background:rgba(255,255,255,.14)!important;color:#fff}
.inb-b.ghost:hover,.inb-b.ghost:focus-visible{background:rgba(255,255,255,.28)!important}
.inb-b:active{transform:scale(.96)}
.inb-c{margin-top:8px}
.inb-cr{display:flex;align-items:stretch;gap:6px;height:30px;margin-top:4px}   /* campo + Enviar + Voltar na mesma linha: a linha tem a altura fixa e os tres esticam ate ela (mesma altura sempre) */
.inb-cr .inb-a{flex:none;margin-top:0}
.inb-cr .inb-b{flex:none;width:72px;height:auto}
.inb-cl{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.inb-ci{flex:none;width:136px;height:auto;box-sizing:border-box;padding:0 8px;border:0;border-radius:0;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:13px;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;user-select:text;-webkit-user-select:text}
.inb-ci::placeholder{color:rgba(255,255,255,.4)}
.inb-ci:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:1px}