:root {
  --bg: #2a1c10;
  --panel: #3b2816;
  --parchment: #f4e4bc;
  --ink: #3b2a17;
  --green: #5b8c32;
  --green-hi: #7bb34a;
  --red: #c0492f;
  --muted: #c9b38a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--parchment);
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.muted { color: var(--muted); font-size: 0.85rem; }

header { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; background: var(--panel); }
header h1 { font-size: 1.1rem; margin: 0; flex: 1; }
.icon-btn { background: none; border: 0; color: var(--parchment); font-size: 1.4rem; cursor: pointer; }

main { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.hint { color: var(--muted); text-align: center; margin: auto 0; }
.msg { max-width: 85%; padding: 0.6rem 0.85rem; border-radius: 12px; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: var(--panel); border: 1px solid #5a4126; }
.msg.bot { align-self: flex-start; background: var(--parchment); color: var(--ink); }
.msg.bot.pending { opacity: 0.7; font-style: italic; }
.msg.error { background: #4a1f15; color: #ffd5c8; }
.sources { margin-top: 0.4rem; font-size: 0.8rem; }
.sources a { color: #6b4a1f; margin-right: 0.6rem; }
.replay { background: none; border: 0; cursor: pointer; font-size: 0.9rem; color: #6b4a1f; padding: 0; float: right; margin-left: 0.5rem; }

footer { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem 1rem; background: var(--panel); }
#mic {
  width: 120px; height: 120px; border-radius: 50%; border: 4px solid #2f4a18;
  background: var(--green); color: white; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 6px 0 #2f4a18; transition: transform 0.1s, background 0.2s;
}
#mic svg { width: 56px; height: 56px; fill: currentColor; }
#mic:active { transform: translateY(3px); box-shadow: 0 3px 0 #2f4a18; }
#mic.recording { background: var(--red); border-color: #6e2414; box-shadow: 0 6px 0 #6e2414; animation: pulse 1.2s infinite; }
#mic.busy { background: #8a7a5a; border-color: #5a4c33; box-shadow: 0 6px 0 #5a4c33; }
#mic.speaking { background: #3d7ea6; border-color: #224b66; box-shadow: 0 6px 0 #224b66; }
@keyframes pulse { 50% { filter: brightness(1.2); } }
#text-form { width: 100%; max-width: 32rem; }
#text { width: 100%; padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid #5a4126; background: var(--bg); color: var(--parchment); font-size: 1rem; }

dialog { background: var(--panel); color: var(--parchment); border: 1px solid #5a4126; border-radius: 14px; width: min(26rem, 92vw); }
dialog::backdrop { background: rgb(0 0 0 / 0.5); }
dialog h2 { margin-top: 0; font-size: 1.1rem; }
dialog label { display: block; margin: 0.8rem 0; }
dialog label.row { display: flex; gap: 0.5rem; align-items: center; }
dialog select, dialog input[type=range] { width: 100%; margin-top: 0.3rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; margin-top: 1.2rem; }
button { font: inherit; }
.actions button { padding: 0.45rem 0.9rem; border-radius: 8px; border: 1px solid #5a4126; background: var(--bg); color: var(--parchment); cursor: pointer; }
.actions button.primary { background: var(--green); border-color: #2f4a18; }

.login { margin: auto; width: min(22rem, 90vw); text-align: center; }
.login img { width: 96px; }
.login input, .login button { width: 100%; padding: 0.7rem; border-radius: 10px; font-size: 1rem; margin-top: 0.7rem; }
.login input { border: 1px solid #5a4126; background: var(--panel); color: var(--parchment); }
.login button { border: 0; background: var(--green); color: white; cursor: pointer; }
.login .error { color: #ff9c85; }