:root {
  --bg: #FFF8EE;
  --panel: #FFFFFF;
  --ink: #2B2118;
  --accent: #D9552C;
  --accent2: #2E7D5B;
  --bubble-user: #2E7D5B;
  --bubble-bot: #FFEFD9;
  --line: #F0DFC4;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Baloo 2", "Noto Sans Kannada", sans-serif;
  background: var(--bg);
  color: var(--ink);
}
.wrap {
  max-width: 640px;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 14px;
}
header { text-align: center; margin-bottom: 8px; }
.title { font-size: 28px; font-weight: 700; color: var(--accent); }
.subtitle { font-size: 14px; color: #8a7a63; margin-top: 2px; }

.chat {
  flex: 1;
  overflow-y: auto;
  padding: 12px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.45;
  white-space: pre-wrap;
  font-family: "Noto Sans Kannada", "Baloo 2", sans-serif;
}
.msg.user {
  align-self: flex-end;
  background: var(--bubble-user);
  color: white;
  border-bottom-right-radius: 4px;
}
.msg.bot {
  align-self: flex-start;
  background: var(--bubble-bot);
  color: var(--ink);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--line);
}
.msg.error {
  align-self: center;
  background: #FDEAEA;
  color: #A23131;
  border: 1px solid #F3C9C9;
  font-size: 14px;
}
.msg.typing { opacity: 0.6; font-style: italic; }

.quickrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 4px;
}
.quick {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
}
.quick:hover { background: var(--bubble-bot); }

.inputrow {
  display: flex;
  gap: 8px;
  padding: 8px 4px 4px;
}
#input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 16px;
  font-family: "Noto Sans Kannada", "Baloo 2", sans-serif;
}
#input:focus { outline: 2px solid var(--accent2); }
.inputrow button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.inputrow button:disabled { opacity: 0.5; cursor: default; }