/* Babble — built to be read at a glance, outdoors, in sunlight.
   It reads like a text thread: them on the left (with their language as the avatar), you on the right in
   pistachio, and the suggested reply as a message Babble is composing for you, just above the composer bar. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--color-bg); color: var(--color-text); font-size: var(--text-base); line-height: 1.4;
  display: flex; flex-direction: column; max-width: 640px; margin: 0 auto;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}
.draft-native { font-family: var(--font-native); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--color-action); outline-offset: 2px; }

/* A quiet line of help under a control. */
.hint { font-size: var(--text-2xs); color: var(--color-text-muted); margin: 6px 0 0; }

/* Motion only for those who want it. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }