@charset "UTF-8";
/* As chaves de acesso (18/10): o «Entrar com Chave de Acesso» do login, a sugestão discreta depois de entrar e a página da conta.
   Os tokens e os componentes (os botões, os campos, os avisos) são os do ua.css e do app.css, carregados antes deste. */

/* 1. O login: o «ou» e o botão por baixo do formulário (o chave.js mostra-os só num browser que aceita chaves de acesso). */
.login-chave{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.login-ou{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px}
.login-ou:before,.login-ou:after{content:"";flex:1;height:1px;background:var(--line)}
.login-chave-botao{width:100%;min-height:48px;color:var(--text)}
.login-chave .form-error,.login-chave .chave-nota{margin:0}
.login-chave .login-chave-dica{margin:0}
/* Uma frase neutra (pedir outro toque: o browser recusou o pedido à chave por o toque já ter passado), sem o vermelho do erro. */
.chave-nota{padding:12px;border:1px solid var(--line);border-radius:10px;background:#ffffff08;color:var(--text);font-size:13px;line-height:1.6}
/* À espera da chave: o botão fica com o foco (aria-disabled, não disabled), mas parece desligado. */
.button[aria-disabled="true"]{cursor:progress;opacity:.6}

/* 2. A sugestão discreta: um cartão pequeno no canto (no telemóvel, a toda a largura, acima da margem de baixo do iPhone), por
   baixo da navegação aberta no telemóvel e de qualquer diálogo. */
.chave-sugestao{position:fixed;z-index:30;right:24px;bottom:24px;display:flex;flex-direction:column;gap:12px;width:min(360px,calc(100vw - 48px));
  padding:16px;border:1px solid rgba(var(--accent-rgb),.32);border-radius:16px;background:var(--raised);box-shadow:0 12px 40px #000a;color:var(--text);font-size:13px}
.chave-sugestao-texto strong{display:block;font-size:14px;font-weight:600}
.chave-sugestao-texto p{margin-top:4px;color:var(--muted);line-height:1.5}
.chave-sugestao-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chave-sugestao-acoes .button{flex:1 1 auto}
.chave-sugestao .text-button{padding:8px 12px;color:var(--muted);font-size:13px}
.chave-sugestao .text-button:hover{color:var(--text)}
.chave-resposta{margin:0}

/* 3. A página da conta: a lista das chaves (o nome, as datas e o «Remover»), a confirmação na própria linha e o «Criar». */
.chaves-painel{max-width:880px}
.chaves-painel .panel-head p{max-width:620px;font-size:13px;line-height:1.6}
.conta-email{overflow-wrap:anywhere}
.chaves-mensagens{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.chaves-lista{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.chave-linha{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.chave-icone{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid rgba(var(--accent-rgb),.28);border-radius:12px;
  background:rgba(var(--accent-rgb),.06);color:var(--accent)}
.chave-icone .icon{width:18px;height:18px}
.chave-info{display:flex;flex-direction:column;gap:2px;flex:1 1 220px;min-width:0}
.chave-info strong{font-size:14px;font-weight:550;overflow-wrap:anywhere}
.chave-info span{color:var(--muted);font-size:12px}
.chave-remover{flex:none}
.chave-linha.a-remover{margin:8px 0;padding:16px;border:1px solid #f18f9640;border-radius:14px;background:#f18f960a}
.chave-confirmar{display:flex;flex-direction:column;gap:12px;flex:1 1 100%;margin:0}
.chave-confirmar p{color:var(--text);font-size:13px;line-height:1.6}
.chave-confirmar-acoes{display:flex;flex-wrap:wrap;gap:8px}
.button.perigo{border-color:#f18f9666;color:var(--red)}
.button.perigo:hover,.button.perigo:focus-visible{border-color:var(--red);background:#f18f9618}
.chaves-vazio,.chaves-nota{padding:16px 0;color:var(--muted);font-size:13px;line-height:1.6}
/* O nome e o «Criar» na mesma linha, com o botão alinhado com o campo (a dica fica por baixo do campo, fora do alinhamento). */
.chave-criar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 16px;margin-top:24px}
.chave-criar .ua-field{grid-column:1;grid-row:1}
.chave-criar [data-chave-criar]{grid-column:2;grid-row:1;min-height:48px}
.chave-criar .chave-dica{grid-column:1;grid-row:2;margin:0;color:var(--faint);font-size:12px;line-height:1.5}
.chave-criar .chave-resposta{grid-column:1/-1}
.chaves-ajuda{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:var(--faint);font-size:12px;line-height:1.6}

@media(max-width:800px){
  .chave-sugestao{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:auto}
}
@media(max-width:560px){
  .chave-remover{width:100%}
  .chave-criar{grid-template-columns:minmax(0,1fr)}
  .chave-criar [data-chave-criar]{grid-column:1;grid-row:3;width:100%;margin-top:8px}
  .chave-confirmar-acoes .button{flex:1}
}