/* Polimento da interface (mais limpa e simples para quem é novo). Carregado depois de app.css:
   as regras aqui sobrescrevem por ordem. Só usa variáveis já definidas em app.css. */

/* Rodapé no computador: deixa de ser fixo e fica no fim do conteúdo. */
@media (min-width: 861px) {
  .main { padding-bottom: var(--sp-6); }
  .app .site-foot { position: static; left: auto; right: auto; width: auto; margin-top: var(--sp-6); background: transparent; }
}


/* Estado vazio compacto dentro da fila. */
#queue .empty { padding: var(--sp-5) var(--sp-4); }
#queue .empty .tile { display: none; }
#queue .empty h3 { font-size: 1rem; }
#queue .empty p { color: var(--text-3); }

/* Alvos de toque maiores no celular. */
@media (max-width: 860px) {
  .btn-sm, .chip, .select-sm, .seg-btn, .filter, .tab { min-height: 44px; }
  .btn-icon { min-width: 40px; min-height: 40px; }
}

/* Subtítulo da página. */
.page-head p { max-width: 62ch; color: var(--text-2); }

/* Como funciona: três passos lado a lado (uma coluna no celular). */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.step { display: flex; align-items: center; gap: var(--sp-3); margin: 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; color: var(--text-2); font-size: .92rem; }
.step-n { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: .84rem; font-weight: 700; }
@media (max-width: 640px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Dropzone: em telas de toque não há "soltar" nem "computador" */
.dz-tap { display: none; }
@media (hover: none) and (pointer: coarse) {
  .dz-drop { display: none; }
  .dz-tap { display: inline; }
}

/* Conversas (chat e equipe) no celular: a lista ganha altura e o campo de escrever fica à vista. */
@media (max-width: 860px) {
  .thread-page .msg-list { max-height: calc(100vh - 400px); max-height: calc(100dvh - 400px); min-height: 38vh; padding: var(--sp-3); }
  .thread-page .page-head p { margin: 0; }
  .thread-page .page-head h1 { font-size: 1.4rem; }
  .thread-page .msg { max-width: 88%; }
  .thread-page .msg-head { gap: 6px; font-size: .8rem; }
  .thread-page .msg-form { padding: var(--sp-3); gap: var(--sp-2); }
}

@media (max-width: 860px) {
  .thread-page .msg-list { max-height: calc(100vh - 440px); max-height: calc(100dvh - 440px); }
  .thread-page .msg-form .textarea { min-height: 56px; height: 56px; resize: none; }
  .thread-page .msg-form .hint, .thread-page .msg-form .small { font-size: .78rem; }
}

/* Barra pública (todas as páginas sem login): no celular os links rolam de lado, sem quebrar a barra. */
.pub-nav { flex: 1 1 auto; min-width: 0; max-width: 100%; }
@media (max-width: 640px) {
  /* esmaecido na borda: mostra que há mais links rolando de lado */
  .pub-nav { overflow-x: auto; white-space: nowrap; scrollbar-width: none; padding-right: 32px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .pub-nav::-webkit-scrollbar { display: none; }
}

/* Barra pública no celular: marca + botões numa linha, navegação rolável embaixo */
@media (max-width: 640px) {
  .pub-bar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px var(--sp-3); padding: 12px 16px; }
  .pub-bar > .row { justify-self: end; }
  .pub-bar > .pub-nav { grid-column: 1 / -1; grid-row: 2; margin-right: 0; gap: var(--sp-1); } /* o próximo link aparece cortado no esmaecido */
}

/* Rodapé público: fica no fim da página (sem fundo, não pode flutuar sobre o conteúdo). */
.pub .site-foot { position: static; margin-top: var(--sp-6); }
/* Barra pública no celular: marca e botões cabem numa linha */
@media (max-width: 640px) {
  .pub-bar .brand { font-size: 1.25rem; }
  .pub-bar > .row .btn { min-height: 38px; padding: 0 12px; font-size: 0.84rem; box-shadow: none; }
  .pub-bar > .row .theme-toggle { width: 38px; height: 38px; }
}
/* telas bem estreitas (e textos longos em espanhol/inglês): só o símbolo; o nome continua no link para leitores de tela */
@media (max-width: 420px) {
  .pub-bar .brand { font-size: 0; gap: 0; }
  .pub-bar > .row { gap: 4px; }
}
@media (max-width: 360px) {
  .pub-bar > .row { flex-wrap: wrap; justify-content: flex-end; }
}
/* barra de cima no celular estreito (equipe tem um ícone a mais): só o símbolo e ícones um pouco menores */
@media (max-width: 380px) {
  .topbar .brand { font-size: 0; gap: 0; }
  .topbar .row { gap: 4px; }
  .topbar .btn-icon, .topbar .theme-toggle { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
}
/* botões de largura total (telas de entrada, diálogos) quebram a linha em vez de estourar o cartão */
.btn.w-full, .auth-card .btn, .dialog-actions .btn { white-space: normal; text-align: center; line-height: 1.25; }
@media (max-width: 420px) { .auth-card { padding: 22px 14px; } .auth-form { padding: 8px; } }

/* Utilitários de layout (substituem os style="" dos templates). Só espaçamento, alinhamento e largura. */
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); }
.items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-stretch { align-items: stretch; }
.w-full { width: 100%; } .w-auto { width: auto; } .min-w-0 { min-width: 0; }
.mw-xs { max-width: 280px; } .mw-sm { max-width: 360px; } .mw-md { max-width: 420px; } .mw-lg { max-width: 560px; }
.field-grow { flex: 1 1 0; min-width: min(220px, 100%); }
.col-full { grid-column: 1 / -1; }
.text-center { text-align: center; } .text-right { text-align: right; }
.m-0 { margin: 0; } .mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.pt-0 { padding-top: 0; }
.anchor { scroll-margin-top: 24px; }
.sep-top { border-top: 1px solid var(--line); }
hr.sep { border: 0; border-top: 1px solid var(--line); width: 100%; margin: var(--sp-2) 0; }
.text-strong { color: var(--text); } .text-soft { color: var(--text-2); }
.border-accent { border-color: var(--accent-line); } .border-danger { border-color: var(--danger-line); }
.grid-auto-150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grid-auto-170 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid-auto-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-auto-300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.title-sm { font-size: 1.85rem; }
.stat-value.sm { font-size: 1.4rem; }
.handle-at { font-size: 1.1rem; }
.alert.inset { margin: 12px; }
.textarea.short { min-height: 64px; }
.msg-list.full { max-height: none; }
.list-pad { padding: 10px 16px; }
.btn.tall { min-height: 46px; }
.input.w-num { width: 110px; }
.clickable { cursor: pointer; }
.text-ok { color: var(--ok-text); } .text-danger { color: var(--danger-text); }
.tile.tile-ok { color: var(--ok); background: var(--ok-soft); }
.tile.tile-danger { color: var(--danger); background: var(--danger-soft); }
.title-xs { font-size: 1.35rem; }
.textarea.mid { min-height: 80px; }
.avatar.sz-34 { width: 34px; height: 34px; }
fieldset.bare { border: 0; padding: 0; margin: 0; min-width: 0; }
.howto-box { background: var(--surface-2); }
.howto-box > summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.howto-list { margin: 12px 0 0; padding-left: 20px; color: var(--text-2); }

/* Seletor de idioma (rodapé e "Mais") */
.lang-switch { display:flex; flex-wrap: wrap; gap: 8px; justify-content:center; }
.lang-switch a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: var(--r-pill); color: var(--text-2); text-decoration: none; }
.lang-switch a[aria-current] { font-weight: 650; background: var(--ink); color: var(--on-ink); }

/* tela de entrada: captcha centralizado e "Mantenha-me conectado" em fonte normal */
.cf-center { display: flex; justify-content: center; }
.remember-plain { align-items: center; font-weight: 400; }
.remember-plain .check { margin-top: 0; }
.login-opts { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; font-size: 0.86rem; }
.login-opts .remember { gap: 8px; }
.login-opts .remember span, .login-opts > a { font-size: 0.8rem; white-space: nowrap; }
.login-opts .remember .check { margin: 0; }
.login-opts > a { display: inline-flex; align-items: center; min-height: 40px; }

/* rodapé mínimo: três links discretos, centralizados */
.site-foot-in nav { justify-content: center; gap: 4px 20px; }
.site-foot-in nav a { color: var(--text-3); font-size: 0.82rem; }
@media (hover: hover) { .site-foot-in nav a:hover { color: var(--text); } }