:root {
  --loafy-ink: #1F2225;
  --loafy-blue: #3B6FD9; /* CTA */
  --loafy-cloud: #F8F8F8; /* page bg alt */
  --loafy-cream: #FFF8EE; /* main page bg */
  --loafy-oat: #E5B874; /* subtle accents */
  --loafy-butter: #FAE69E; /* chips and hints */
  --loafy-crust: #EC7850; /* highlight and icons */
  --loafy-card: #FFFFFF;
  --loafy-border: rgba(0,0,0,0.1);
}

[data-theme="dark"] {
  --loafy-ink: #F5F6F7;
  --loafy-blue: #86A8FF;
  --loafy-cloud: #141518;
  --loafy-cream: #0F1114;
  --loafy-oat: #CC9F54;
  --loafy-butter: #BFA458;
  --loafy-crust: #FF8E66;
  --loafy-card: #1A1C20;
  --loafy-border: rgba(255,255,255,0.14);
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background-color: var(--loafy-cream);
  color: var(--loafy-ink);
  line-height: 1.65;
}

/* Basic focus state for all interactive elements */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--loafy-blue);
  outline-offset: 2px;
}

/* Chat preview styles */
.chat-mock {
  background: var(--loafy-card);
  border: 1px solid var(--loafy-border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
.chat-mock-inner {
  height: 320px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  overflow: hidden;
}
.chat-head, .chat-foot { display: flex; align-items: center; gap: 8px; }
.chat-head > i, .chat-foot > i {
  width: 8px; height: 8px; border-radius: 999px; background: var(--loafy-crust); opacity: 0.9;
}
.chat-body { display: grid; gap: 8px; align-content: start; overflow-y: auto; min-height: 0; }
.bubble {
  display: inline-block;
  border-radius: 14px;
  padding: 10px 12px;
  max-width: 88%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  border: 1px solid var(--loafy-border);
  font-size: 14px;
}
.bubble.me { margin-left: auto; background: color-mix(in oklab, var(--loafy-blue), transparent 86%); }
.bubble.bot { background: color-mix(in oklab, var(--loafy-butter), transparent 82%); }

/* Mobile: expand chat preview and remove inner scrollbar */
@media (max-width: 640px) {
  .chat-mock-inner { height: auto; }
  .chat-body { overflow: visible; }
}

/* Inline message icon (Loafy) */
.msg-ico {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: 6px;
}