/* =========================================================
   Character Online: só o que a versão em nuvem acrescenta ao app.
   O resto vem igual de app.css (mesmos tokens e classes).
   ========================================================= */

/* entrar (com o Higgsfield; o código por e-mail embaixo, quando ligado) */
/* coluna que encolhe com a tela: nada de dentro (endereço, e-mail comprido) alarga a entrada além da borda */
.login { max-width: 440px; margin: 9vh auto 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.login .panel__body { overflow: visible; }
.login__code { font-family: var(--f-pixel); font-size: 24px; letter-spacing: .4em; text-align: center; }
/* celular: e-mail comprido ou endereço colado num aviso quebram linha em vez de passar da borda */
.login .warnbox, .signin .small { overflow-wrap: anywhere; }
/* aviso que pede atenção (entrou, mas a conta conectada para gerar continua outra): e-mail comprido quebra linha */
.toast--warn { border-left: 6px solid var(--butter); overflow-wrap: anywhere; }

/* saldo na barra superior (mesmo desenho do "Hoje / Mês") */
.wallet-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--accent); background: rgba(245, 213, 71, .1); border: 1px solid rgba(245, 213, 71, .35);
  transition: filter .15s, transform .1s;
}
.wallet-chip:hover { filter: brightness(1.12); }
.wallet-chip:active { transform: scale(.98); }
.wallet-chip b { color: var(--ink); font-family: var(--f-pixel); font-size: 13px; font-weight: 500; }

/* painel do admin: campos de configuração lado a lado */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; align-items: end; }

@media (max-width: 720px) {
  .login { margin-top: 4vh; }
  .key { grid-template-columns: 1fr; }
}

/* card de download por link: com título ou erro longo ele passava da borda e escondia o "Tentar de novo" e o ✕ */
.dlrow { grid-template-columns: minmax(0, 1fr); }
.dlrow > .row { min-width: 0; }
.dlrow > .row > .btn { flex: none; }
.dlrow__err { overflow-wrap: anywhere; }

/* conta Higgsfield própria do aluno */
a.wallet-chip { text-decoration: none; }
.wallet-chip--warn { color: var(--coral-l); background: rgba(242, 103, 63, .1); border-color: rgba(242, 103, 63, .35); }
/* faixa de aviso logo abaixo da barra do topo (a grade do .app ganha uma linha) */
.app.app--band { grid-template-rows: var(--top) auto 1fr; }
.hfband {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 18px;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-2)); border-bottom: 1px solid var(--line);
  color: var(--ink-2); font-size: 13px; line-height: 1.4;
}
.hfband--auth, .hfband--error { background: color-mix(in srgb, var(--coral) 8%, var(--bg-2)); }
.hfband__text { flex: 1 1 260px; min-width: 0; }
.hf-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hf-warn { display: grid; gap: 8px; }
.hf-warn .hf-actions { justify-self: start; }
/* vídeo esperando a conta (Estúdio): os botões ficam no centro, junto do Cancelar, mesmo quebrando linha */
.gen__state .hf-actions { justify-content: center; }
.hf-login__step { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* no celular o botão desce para a linha de baixo em vez de espremer o texto numa coluna de uma palavra */
.hf-login__step > .grow { min-width: min(14em, 100%); }
.hf-login__paste { gap: 8px; }
.hf-login__paste .input { min-width: 0; }
.key .ellipsis { min-width: 0; }
/* linha do painel sobre com qual conta a pessoa entra: e-mail comprido quebra linha */
.hf-note { overflow-wrap: anywhere; }

.hf-login__clock { font-size: 15px; color: var(--accent); }

/* barra do topo e faixa de aviso em tela estreita. A coluna da grade do .app não passa da largura da tela (sem isto
   ela crescia até a largura mínima da barra, uns 850 px, e levava junto a faixa e a página: no celular "Conectar
   Higgsfield", "Sair" e o fim do aviso ficavam fora da tela). O menu rola para o lado em vez de empurrar a barra. */
@media (max-width: 1180px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a, .topbar__right > * { flex: none; }
}
/* celular: a barra quebra em duas linhas (marca e botões em cima, o menu embaixo) e o aviso da faixa quebra linha */
@media (max-width: 720px) {
  .app { grid-template-rows: auto 1fr; }
  .app.app--band { grid-template-rows: auto auto 1fr; }
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 16px; }
  .brand { margin-right: 0; }
  .brand__word { font-size: 22px; }
  .topbar__right { gap: 8px; }
  .nav { order: 3; flex: 1 0 100%; }
  .hfband { padding: 8px 16px; }
  .hfband__text { flex-basis: 100%; overflow-wrap: anywhere; }
}

/* criador de personagem: cada pedido com as opções do card; o pedido anterior ainda não salvo ganha uma moldura */
.optreq--old { padding: 10px; border: 1px dashed var(--line-2); border-radius: 12px; background: var(--bg-2); }