* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root { --bg: #1c1917; --card: #24201d; --accent: #e27654; --text: #f5ede7; --muted: #9a8f88; }
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.screen { height: 100dvh; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* login */
#login { align-items: center; justify-content: center; padding: 24px; }
.loginbox { width: 100%; max-width: 340px; text-align: center; }
.pet { font-size: 56px; }
.loginbox h1 { color: var(--accent); font-size: 30px; margin-top: 6px; }
.sub { color: var(--muted); margin-bottom: 26px; }
#usuario, #senha { width: 100%; padding: 15px; border-radius: 14px; border: 1px solid #3a322c; background: var(--card); color: var(--text); font-size: 16px; margin-bottom: 10px; }
#btnLogin { width: 100%; margin-top: 12px; padding: 15px; border: none; border-radius: 14px; background: var(--accent); color: #1c1917; font-weight: 700; font-size: 16px; }
.err { color: #e2705a; margin-top: 12px; min-height: 18px; font-size: 14px; }

/* chat */
header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); background: var(--card); border-bottom: 1px solid #2f2822; }
.pet-sm { font-size: 22px; }
header .title { flex: 1; font-weight: 700; color: var(--accent); font-size: 18px; }
#btnReset { background: none; border: none; color: var(--muted); font-size: 22px; }
#msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 82%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.me { align-self: flex-end; background: var(--accent); color: #1c1917; border-bottom-right-radius: 5px; }
.ela { align-self: flex-start; background: var(--card); border-bottom-left-radius: 5px; }
.ela.pensando { color: var(--muted); font-style: italic; }
#composer { display: flex; gap: 8px; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid #2f2822; }
#input { flex: 1; resize: none; max-height: 120px; padding: 12px 14px; border-radius: 18px; border: 1px solid #3a322c; background: var(--bg); color: var(--text); font-size: 16px; font-family: inherit; }
#send { width: 48px; border: none; border-radius: 50%; background: var(--accent); color: #1c1917; font-size: 18px; flex-shrink: 0; }
#send:disabled { opacity: 0.5; }