:root {
  color: #332f2a;
  background: #f7f3ed;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
body:has(#chat-view:not(.hidden)) {
  background: #3e3028 url("./dad-background.png") center top / cover fixed no-repeat;
}
body:has(#chat-view:not(.hidden))::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgb(35 27 22 / 28%);
  content: "";
}
button, input { font: inherit; }
button { cursor: pointer; }

.app-shell {
  display: flex;
  flex-direction: column;
  width: min(100%, 560px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px 18px 18px;
}
.hidden { display: none; }
.login-card { width: 100%; margin: auto 0; padding: 28px 22px; border-radius: 24px; background: #fffaf3; box-shadow: 0 2px 18px rgb(89 66 41 / 8%); }
.login-card .avatar { margin-bottom: 18px; }
.login-card h1 { margin-bottom: 6px; }
.login-card p { color: #867a6c; }
.login-card form { display: grid; gap: 8px; margin-top: 22px; }
.login-card label { margin-top: 8px; color: #6d5e4e; font-size: 14px; }
.login-card input { border: 1px solid #dfd2c4; border-radius: 12px; padding: 12px; background: #fff; }
.error { min-height: 20px; margin: 4px 0 0 !important; color: #a34e43 !important; font-size: 14px; }
.app-header { display: flex; align-items: center; gap: 12px; }
.logout-button { margin-left: auto; border: 1px solid rgb(255 255 255 / 60%); border-radius: 999px; padding: 8px 12px; background: rgb(255 250 243 / 86%); color: #6d5e4e; white-space: nowrap; }
.avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #d9b28b; color: #fffaf3; font-size: 24px; }
h1 { margin: 0; font-size: 22px; }
.app-header p { margin: 3px 0 0; color: #867a6c; font-size: 14px; }
#chat-view .app-header h1, #chat-view .app-header p { color: #fffaf3; text-shadow: 0 1px 4px rgb(0 0 0 / 45%); }
.chat { flex: 1; padding: 32px 0 18px; }
.message { width: fit-content; max-width: 85%; padding: 13px 16px; border-radius: 18px; line-height: 1.55; }
.dad-message { background: #fffaf3; box-shadow: 0 2px 12px rgb(89 66 41 / 8%); }
.user-message { margin-left: auto; background: #80664d; color: #fff; }
.quick-actions { display: flex; gap: 8px; padding-bottom: 12px; overflow-x: auto; }
.quick-actions button { border: 1px solid rgb(255 255 255 / 55%); border-radius: 999px; padding: 9px 13px; background: rgb(255 250 243 / 86%); color: #6d5e4e; white-space: nowrap; }
.quick-actions .voice-session-button { background: #80664d; color: #fff; }
.quick-actions button:disabled, .voice-button:disabled { cursor: wait; opacity: 0.65; }
.voice-status { min-height: 20px; margin: 0 0 10px; color: #fffaf3; font-size: 13px; text-shadow: 0 1px 4px rgb(0 0 0 / 55%); }
#voice-output { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.composer { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #e2d7ca; border-radius: 18px; background: #fffaf3; }
.composer input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: inherit; }
.voice-button, .send-button { border: 0; border-radius: 12px; padding: 10px 12px; }
.voice-button { background: #efe3d5; }
.send-button { background: #80664d; color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }