:root {
  --azul: #0d2a4a;
  --azul2: #15486f;
  --verde: #36c2a4;
  --bg: #0b1622;
  --card: #13243a;
  --bolha-user: #1f4d6e;
  --bolha-bot: #18293f;
  --texto: #eaf2f8;
  --suave: #9fb3c6;
  --erro: #ff6b6b;
  --raio: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--texto);
  overscroll-behavior: none;
}
.tela { height: 100dvh; display: flex; flex-direction: column; }

/* ----- Login ----- */
#tela-login {
  align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 0%, var(--azul2), var(--bg) 70%);
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 360px; text-align: center;
  background: var(--card); border-radius: 22px; padding: 32px 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.login-card .logo { width: 76px; height: 76px; margin-bottom: 8px; }
.login-card h1 { font-size: 1.4rem; margin: 4px 0 2px; }
.login-card .sub { color: var(--suave); margin: 0 0 20px; font-size: .9rem; }
#form-login { display: flex; flex-direction: column; gap: 12px; }
#campo-senha {
  padding: 14px 16px; border-radius: 12px; border: 1px solid #294763;
  background: #0e1d2e; color: var(--texto); font-size: 1rem;
}
#form-login button {
  padding: 14px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--verde); color: #03241c; font-weight: 700; font-size: 1rem;
}
.erro { color: var(--erro); font-size: .9rem; margin-top: 12px; }

/* ----- App ----- */
.topo {
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 14px 12px;
  background: linear-gradient(180deg, var(--azul), var(--azul2));
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.logo-mini { width: 30px; height: 30px; }
.titulo { font-weight: 700; flex: 1; }
.acoes-topo { display: flex; gap: 4px; }
.icon-btn {
  background: rgba(255,255,255,.08); border: 0; color: var(--texto);
  width: 38px; height: 38px; border-radius: 10px; font-size: 1.05rem; cursor: pointer;
}
.icon-btn[aria-pressed="true"] { background: var(--verde); color: #03241c; }

.conversa {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  -webkit-overflow-scrolling: touch;
}
.bolha {
  max-width: 86%; padding: 12px 14px; border-radius: var(--raio);
  line-height: 1.45; font-size: 1rem; white-space: pre-wrap; word-wrap: break-word;
}
.bolha.user { align-self: flex-end; background: var(--bolha-user); border-bottom-right-radius: 4px; }
.bolha.bot { align-self: flex-start; background: var(--bolha-bot); border-bottom-left-radius: 4px; }
.bolha.bot.pensando { color: var(--suave); font-style: italic; }
.bolha h1, .bolha h2, .bolha h3 { font-size: 1.05rem; margin: 8px 0 4px; }
.bolha ul, .bolha ol { margin: 6px 0; padding-left: 20px; }
.bolha strong { color: #fff; }
.boas-vindas { color: var(--suave); text-align: center; margin: auto 8px; font-size: .95rem; }

.aviso-voz {
  margin: 0 16px 8px; padding: 10px 12px; border-radius: 10px;
  background: #3a2c12; color: #ffd591; font-size: .85rem;
}

.barra {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px);
  background: var(--card); border-top: 1px solid #1d3047;
}
.mic {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: var(--azul2); color: #fff; font-size: 1.4rem; cursor: pointer;
  display: grid; place-items: center; transition: transform .1s, background .2s;
}
.mic:active { transform: scale(.94); }
.mic.gravando { background: var(--erro); animation: pulso 1.1s infinite; }
@keyframes pulso { 0%,100% { box-shadow: 0 0 0 0 rgba(255,107,107,.5); } 50% { box-shadow: 0 0 0 12px rgba(255,107,107,0); } }
.mic[disabled] { opacity: .4; }

.form-msg { flex: 1; display: flex; align-items: flex-end; gap: 8px;
  background: #0e1d2e; border: 1px solid #294763; border-radius: 22px; padding: 4px 4px 4px 14px; }
#campo-msg {
  flex: 1; background: transparent; border: 0; resize: none; color: var(--texto);
  font-size: 1rem; max-height: 120px; padding: 10px 0; outline: none; font-family: inherit;
}
#btn-enviar {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--verde); color: #03241c; font-size: 1.1rem; cursor: pointer;
}
#btn-enviar[disabled] { opacity: .5; }