/* Basic reset and body styles to match inline styles as fallback */
:root { color-scheme: light; }
html, body, #root { height: 100%; }
body {
  font-family: 'Patrick Hand', 'Caveat', Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  background-color: #fffdf5;
  background-image: radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px), repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0px, rgba(0,0,0,0.035) 1px, transparent 1px, transparent 22px);
  background-size: 24px 24px, 100% 24px;
  background-position: 0 0, 0 0;
  min-height: 100vh;
}
.shadow-t-xl { box-shadow: 0 -20px 25px -5px rgb(0 0 0 / 0.05), 0 -8px 10px -6px rgb(0 0 0 / 0.05); }
.shadow-inner-soft { box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.03); }

/* Utility: animation delays for typing dots */
.delay-200 { animation-delay: 0.2s; }
.delay-400 { animation-delay: 0.4s; }

/* Hand-drawn theme utilities */
.sketch-font { font-family: 'Patrick Hand', 'Caveat', Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif; }

.paper-bg {
  background-color: #fffdf5;
  background-image: radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px), repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0px, rgba(0,0,0,0.035) 1px, transparent 1px, transparent 22px);
  background-size: 24px 24px, 100% 24px;
}

.sketch-shadow {
  box-shadow: 3px 3px 0 rgba(0,0,0,0.22), 6px 6px 0 rgba(0,0,0,0.12);
}

.sketch-card {
  background: #fffdfb;
  border: 2px solid #111;
  border-radius: 18px;
  position: relative;
}
.sketch-card:after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid rgba(0,0,0,0.25);
  border-radius: 20px;
  transform: rotate(-0.6deg);
  pointer-events: none;
}

.sketch-button {
  border: 2px solid #111;
  background: #fff;
  border-radius: 9999px;
  padding: 10px 16px;
  font-weight: 600;
  transform: translateY(0);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}
.sketch-button:active { transform: translateY(1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.25); }
.sketch-button:hover { background: #fffbef; }

.sketch-input {
  border: 2px solid #111;
  background: #fffef8;
  border-radius: 9999px;
  padding: 12px 18px;
}
.sketch-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }

.sketch-bubble {
  border: 2px solid #111;
  border-radius: 20px;
  padding: 10px 14px;
  position: relative;
  background: #fff;
}
.sketch-bubble:after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: 22px;
  transform: rotate(0.5deg);
  pointer-events: none;
}

.sketch-bubble-user { background: #fff6b7; }
.sketch-bubble-ai { background: #e1ffcb; }

.sketch-chip {
  border: 2px dashed #222;
  background: #fffdf5;
  border-radius: 9999px;
  padding: 6px 10px;
}