/* Deliberately near-zero CSS. The conversation is the product; the page should disappear.
   No theme, no accents, no rounding, no transitions. Browser defaults where they suffice. */

body {
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #111;
  background: #fff;
  max-width: 44em;
  margin: 0 auto;
  padding: 1.5rem 1rem 7rem;
}

h1 { font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; }
h1 .tagline { font-weight: 400; color: #666; }
h1 .tagline::before { content: "— "; }

/* controls: native widgets, unstyled */
.controls, .settings { margin: .5rem 0; }
.controls select, .settings input {
  font: inherit;
  font-size: .9rem;
  padding: 2px 3px;
  margin: 0 .4rem .3rem 0;
}
.settings input { width: 11rem; }
.settings input#key { width: 20rem; }

.one-line { color: #444; margin: .6rem 0 0; font-size: .95rem; }
.disclosure { color: #666; font-size: .8rem; margin: .4rem 0 0; }

hr, header { border: 0; }
header { border-bottom: 1px solid #ddd; padding-bottom: .8rem; }

/* transcript */
main { margin-top: 1.2rem; }
.msg { margin: 0 0 1.1rem; }
.msg .who {
  display: block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #666;
  margin-bottom: .15rem;
}
.msg .text { display: block; white-space: pre-wrap; }
.msg.user .text { color: #444; }

/* input bar */
footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 1px solid #ddd;
  padding: .6rem 1rem;
}
.status { font-size: .75rem; color: #666; max-width: 44em; margin: 0 auto .3rem; }
.status.error { color: #b00; }
.text-form { display: flex; gap: .4rem; max-width: 44em; margin: 0 auto; }
.text-form input { flex: 1; font: inherit; padding: 4px 6px; }
.text-form button, .mic { font: inherit; padding: 4px 12px; }
.mic { display: block; margin: 0 auto .4rem; }
.mic .hint { color: #666; font-size: .75rem; }
.mic.rec { font-weight: 700; }

.hidden { display: none !important; }