:root { --fundo: #0f1115; --cartao: #181b22; --borda: #262a33; --texto: #e6e8ec; --sutil: #8b92a0; --acento: #7c9cff; --ok: #3fb97a; --nao: #e06c6c; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; padding: .6rem 1rem; background: var(--acento); color: #0b0d12; font-weight: 600; }
button:disabled { opacity: .5; cursor: default; }
button.discreto { background: transparent; color: var(--sutil); padding: .4rem .6rem; font-weight: 500; }
input, textarea { font: inherit; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; padding: .65rem .8rem; width: 100%; }
textarea { resize: none; max-height: 40vh; }
.sutil { color: var(--sutil); font-size: .9rem; margin: .25rem 0 1rem; }
.erro { color: var(--nao); font-size: .9rem; }
.tela { height: 100%; display: flex; flex-direction: column; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 1rem; }
.login { margin: auto; width: min(360px, 92vw); display: grid; gap: .75rem; }
.login h1 { margin: 0; }

header { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; padding-top: max(.6rem, env(safe-area-inset-top)); border-bottom: 1px solid var(--borda); }
header nav { display: flex; gap: .25rem; margin-left: auto; }
.aba { background: transparent; color: var(--sutil); padding: .4rem .7rem; font-weight: 500; }
.aba.ativa { background: var(--cartao); color: var(--texto); }
.contador { display: inline-block; min-width: 1.3em; padding: 0 .35em; border-radius: 999px; background: var(--nao); color: #fff; font-size: .75rem; text-align: center; }

.painel { flex: 1; min-height: 0; display: flex; flex-direction: column; width: min(820px, 100%); margin: 0 auto; }
#mensagens { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.msg { max-width: 85%; padding: .6rem .85rem; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--acento); color: #0b0d12; border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--cartao); border: 1px solid var(--borda); border-bottom-left-radius: 4px; }
.msg.pensando { color: var(--sutil); font-style: italic; }
.msg.falha { background: transparent; border: 1px solid var(--nao); color: var(--nao); }
.msg time { display: block; font-size: .7rem; opacity: .6; margin-top: .2rem; }
#form-chat { display: flex; gap: .5rem; padding: .75rem 1rem; padding-bottom: max(.75rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); align-items: flex-end; }

#aprovacoes { padding: 1rem; overflow-y: auto; }
#lista-aprovacoes { display: grid; gap: .75rem; }
.pedido .tipo { font-size: .75rem; color: var(--sutil); text-transform: uppercase; letter-spacing: .04em; }
.pedido p { margin: .4rem 0 .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.pedido .acoes { display: flex; gap: .5rem; }
.pedido .aprovar { background: var(--ok); }
.pedido .rejeitar { background: transparent; color: var(--nao); border: 1px solid var(--nao); }
.vazio { color: var(--sutil); text-align: center; margin-top: 2rem; }