:root {
  --ink: #0f2a2e;
  --ink-soft: #4b6166;
  --verde: #00745f;
  --verde-escuro: #0b3b33;
  --verde-claro: #dcefe8;
  --papel: #f4f7f5;
  --linha: #d3ddd9;
  --ambar: #b86a00;
  --ambar-claro: #fbeed8;
  --alerta: #b3261e;
  --alerta-claro: #f9e1df;
  --branco: #ffffff;
  --raio: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  color: var(--ink);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Telemóvel ---------- */
.phone { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: var(--papel); }

.intro { padding: 28px 22px 32px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.intro .marca { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--verde); font-size: 18px; }
.intro .marca .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--verde); }
.intro h1 { font-size: 34px; line-height: 1.12; margin: 6px 0 0; letter-spacing: -0.01em; }
.intro p { font-size: 18px; line-height: 1.5; margin: 0; color: var(--ink-soft); }
.cartao {
  background: var(--branco); border: 1px solid var(--linha); border-left: 6px solid var(--verde);
  border-radius: 14px; padding: 18px 18px 16px;
}
.cartao .quem { font-size: 15px; color: var(--ink-soft); margin-bottom: 6px; }
.cartao .missao { font-size: 21px; line-height: 1.4; }
.nota { font-size: 14px !important; line-height: 1.45 !important; }
.btn-ligar {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--verde); color: var(--branco); border: 0; border-radius: 999px;
  padding: 20px 24px; font-size: 22px; font-weight: 700;
}
.btn-ligar svg { width: 26px; height: 26px; }

/* chamada */
.chamada { display: none; flex-direction: column; height: 100vh; height: 100dvh; }
.chamada.ativa { display: flex; }
.cab {
  background: var(--verde-escuro); color: var(--branco); padding: 22px 22px 18px;
  display: flex; align-items: center; gap: 14px;
}
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--verde); display: grid; place-items: center; font-weight: 700; font-size: 17px; flex: none; }
.cab .nome { font-size: 20px; font-weight: 700; }
.cab .sub { font-size: 15px; opacity: 0.8; margin-top: 2px; }
.cab .tempo { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 18px; opacity: 0.9; }
.ficha { background: var(--verde-claro); color: var(--verde-escuro); padding: 9px 22px; font-size: 15px; line-height: 1.35; }
.ficha span:first-child { opacity: .75; }
.estado { padding: 10px 22px; font-size: 15px; color: var(--ink-soft); border-bottom: 1px solid var(--linha); background: var(--branco); min-height: 42px; display: flex; align-items: center; gap: 8px; }
.estado .pulso { width: 10px; height: 10px; border-radius: 50%; background: var(--linha); }
.estado.fala .pulso { background: var(--verde); animation: pulso 1s infinite; }
.estado.ouve .pulso { background: var(--alerta); animation: pulso 0.8s infinite; }
@keyframes pulso { 50% { opacity: 0.25; } }

.conversa { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 88%; padding: 13px 16px; border-radius: 18px; font-size: 20px; line-height: 1.42; }
.msg.ia { background: var(--branco); border: 1px solid var(--linha); border-bottom-left-radius: 6px; align-self: flex-start; }
.msg.eu { background: var(--verde); color: var(--branco); border-bottom-right-radius: 6px; align-self: flex-end; }
.msg.sistema { align-self: center; background: transparent; font-size: 15px; color: var(--ink-soft); text-align: center; padding: 4px 8px; }
.msg.transfer { align-self: stretch; max-width: none; background: var(--ambar-claro); border: 1px solid #ecc98f; color: #5d3700; font-size: 18px; }
.msg.transfer.vermelho { background: var(--alerta-claro); border-color: #efb3ad; color: #6c140f; }

.dock { background: var(--branco); border-top: 1px solid var(--linha); padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.rapidas { display: flex; gap: 10px; }
.rapidas button { flex: 1; padding: 14px; font-size: 20px; font-weight: 700; border-radius: 14px; border: 2px solid var(--verde); background: var(--branco); color: var(--verde); }
.rapidas:empty { display: none; }
.linha-acoes { display: flex; align-items: center; gap: 12px; }
.mic {
  width: 78px; height: 78px; border-radius: 50%; border: 0; background: var(--verde); color: var(--branco);
  display: grid; place-items: center; flex: none; position: relative; transition: transform .15s;
}
.mic svg { width: 32px; height: 32px; }
.mic.ouvir { background: var(--alerta); }
.mic.ouvir::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--alerta); animation: anel 1.2s infinite; }
@keyframes anel { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
.mic:disabled { background: var(--linha); }
.escrever { flex: 1; min-width: 0; display: flex; gap: 8px; }
.escrever input { flex: 1; min-width: 0; width: 100%; font: inherit; font-size: 18px; padding: 14px; border: 1px solid var(--linha); border-radius: 14px; }
.escrever button { border: 0; background: var(--verde-claro); color: var(--verde-escuro); font-weight: 700; padding: 0 16px; border-radius: 14px; font-size: 17px; }
.desligar { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--alerta); color: #fff; display: grid; place-items: center; flex: none; }
.desligar svg { width: 26px; height: 26px; transform: rotate(135deg); }

/* SMS */
.sms {
  position: fixed; left: 50%; top: 12px; transform: translate(-50%, -160%); width: min(440px, calc(100% - 24px));
  background: rgba(255,255,255,.97); border: 1px solid var(--linha); border-radius: 18px; padding: 14px 16px;
  box-shadow: 0 18px 40px rgba(15,42,46,.22); transition: transform .55s cubic-bezier(.2,.9,.2,1.15); z-index: 20;
}
.sms.ver { transform: translate(-50%, 0); }
.sms .de { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.sms .de b { color: var(--ink); }
.sms .txt { font-size: 17px; line-height: 1.4; }

/* fim */
.fim { display: none; padding: 26px 22px 32px; flex-direction: column; gap: 18px; min-height: 100dvh; }
.fim.ativa { display: flex; }
.fim h2 { font-size: 30px; margin: 4px 0 0; line-height: 1.15; }
.fim p { font-size: 18px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.resumo { background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 16px; font-size: 18px; line-height: 1.5; }
.resumo b { color: var(--verde); }
.pref { display: flex; flex-direction: column; gap: 10px; }
.pref button { padding: 18px; font-size: 20px; font-weight: 700; border-radius: 14px; border: 2px solid var(--verde); background: var(--branco); color: var(--verde); }
.pref button.prim { background: var(--verde); color: #fff; }
.obrigado { font-size: 20px !important; color: var(--verde) !important; font-weight: 700; display: none; }

/* ---------- Palco ---------- */
.palco { background: var(--verde-escuro); color: #eaf3f0; min-height: 100vh; padding: 1.8vw 3.2vw; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr); grid-template-rows: auto 1fr auto; gap: 1.2vw 3.2vw; }
.palco header { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 2vw; }
.palco h1 { font-size: clamp(28px, 3vw, 56px); line-height: 1; margin: 0; letter-spacing: -0.015em; }
.palco .projeto { font-size: clamp(14px, 1.15vw, 20px); opacity: .75; margin-top: .6vw; }
.decisao { font-size: clamp(16px, 1.5vw, 26px); font-weight: 700; padding: .7vw 1.4vw; border-radius: 999px; background: rgba(255,255,255,.1); white-space: nowrap; }
.decisao.proceed { background: #2fbf8f; color: var(--verde-escuro); }
.decisao.pivot { background: #f0b14a; color: #3b2500; }
.decisao.kill { background: #ef6b62; color: #2a0705; }

.qr-col { display: flex; flex-direction: column; gap: 1vw; }
.qr-box { background: #fff; border-radius: 1.2vw; padding: 1.1vw; align-self: start; width: 100%; max-width: 17vw; aspect-ratio: 1; display: grid; place-items: center; }
.qr-box canvas, .qr-box img { width: 100% !important; height: auto !important; }
.qr-col .url { font-size: clamp(14px, 1.3vw, 22px); word-break: break-all; opacity: .85; }
.qr-col .instrucao { font-size: clamp(15px, 1.35vw, 24px); line-height: 1.3; }
.total { font-size: clamp(13px, 1.15vw, 20px); opacity: .85; line-height: 1.35; }
.total b { font-size: clamp(34px, 3.6vw, 66px); display: block; line-height: 1; opacity: 1; color: #fff; font-variant-numeric: tabular-nums; }

.medidas { display: flex; flex-direction: column; gap: 1.1vw; }
.medida .topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1vw; }
.medida .nome { font-size: clamp(16px, 1.45vw, 26px); }
.medida .nome small { display: block; font-size: .72em; opacity: .7; margin-top: .2vw; }
.medida .valor { font-size: clamp(30px, 3.4vw, 62px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.barra { position: relative; height: .9vw; min-height: 8px; background: rgba(255,255,255,.12); border-radius: 999px; margin-top: .8vw; }
.barra .enche { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: #7fd8b8; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.barra .umbral { position: absolute; top: -.6vw; bottom: -.6vw; width: 3px; background: #fff; }
.barra .umbral span { position: absolute; top: calc(100% + .25vw); transform: translateX(-50%); font-size: clamp(11px, .85vw, 15px); white-space: nowrap; opacity: .85; }
.medida { padding-bottom: 1.1vw; }
.medida.mau .enche { background: #ef6b62; }
.medida.ok .valor { color: #9be7cb; }
.medida.mau .valor { color: #ffb0a9; }

.inferior { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 3vw; align-items: start; border-top: 1px solid rgba(255,255,255,.18); padding-top: 1.2vw; }
.impacto .grande { font-size: clamp(20px, 1.9vw, 34px); font-weight: 700; line-height: 1.05; }
.impacto .modelo { font-size: clamp(12px, .95vw, 16px); opacity: .7; margin-top: .6vw; line-height: 1.4; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4vw; font-size: clamp(13px, 1vw, 18px); }
.feed li { display: flex; gap: .8vw; align-items: center; opacity: .92; }
.feed li .tag { padding: .15vw .7vw; border-radius: 999px; font-size: .85em; font-weight: 700; }
.tag.res { background: #2fbf8f; color: var(--verde-escuro); }
.tag.hum { background: #f0b14a; color: #3b2500; }
.tag.red { background: #ef6b62; color: #2a0705; }
.feed .vazio { opacity: .6; }

@media (max-width: 900px) {
  .palco { grid-template-columns: 1fr; padding: 22px 18px; gap: 22px; }
  .qr-box { max-width: 260px; padding: 14px; border-radius: 16px; }
  .inferior { grid-template-columns: 1fr; }
  .barra .umbral span { top: calc(100% + 4px); }
  .medida { padding-bottom: 16px; }
}