/* the pill (.choice) is one shared component: scarlett's door choice
   buttons and the welcome screen's continue button both carry the class,
   so their shape, border, type, padding, hover and focus are defined
   exactly once, here. */
/* scarlett on jameelgordon.com — her interface is the welcome screen's own
   design: the same serif, the same measure (46rem), black on white, no box.
   (oaksandoars.com carries its own copy of this file, in the studio's theme.) */

.scarlett-chat {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  text-align: left;
  color: #000;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
/* no head, no blurb: her screen is the conversation, nothing else. */
/* the greeting holds the screen (jameel, 2026-10-28): before the first
   message, her greeting stands alone — centered on the empty screen at
   the welcome's own measure and type size, in the welcome's serif. the
   log, the choices, and the form wait hidden; the conversation assembles
   around the visitor's first words, and the greeting settles to the top
   of the log at normal message size. a clean cut — no drift. */
#greetingHold {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#greetingHold[hidden] { display: none; }
#greetingHoldText { max-width: 46rem; }
#greetingHoldText p {
  font-size: clamp(1.12rem, 2.3vw, 1.45rem);
  line-height: 1.45;
  margin: 0;
}
#chatLog[hidden], #chatChoices[hidden], #chatForm[hidden] { display: none; }
#chatLog {
  padding: 0.5rem 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1 1 auto;
  min-height: 0;
}
#chatLog .msg { max-width: 100%; }
#chatLog .msg p { margin: 0 0 0.6rem; line-height: 1.55; font-size: 1.05rem; }
#chatLog .msg p:last-child { margin-bottom: 0; }
#chatLog .msg-scarlett { align-self: flex-start; }
#chatLog .msg-visitor { align-self: flex-end; text-align: right; opacity: 0.65; }
#chatChoices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 0 0.25rem;
}
/* the doors are out of the interface for now — an empty choices row
   takes no space. the dormant flows will fill it again one day. */
#chatChoices:empty { display: none; }
/* her typewriter caret — the same blinking block the welcome types
   with, riding her newest character while she speaks. */
#chatLog .typer-caret, #greetingHoldText .typer-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.02em;
  margin-left: 2px;
  background: #000;
  vertical-align: -0.14em;
  animation: caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.choice, #chatForm button {
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
}
.choice:hover, #chatForm button:hover { background: #000; color: #fff; }
.choice:focus-visible, #chatForm button:focus-visible { background: #000; color: #fff; }
#chatForm {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 0 0;
  align-items: center;
}
#chatInput {
  flex: 1;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.6rem 1rem;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  border-radius: 999px;
}
/* voice input — the visitor may speak instead of typing. the control only
   appears where the browser itself offers speech recognition (see
   scarlett.js); it carries one microphone glyph, and inverts while listening. */
#voiceBtn {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
#voiceBtn svg { width: 1.2rem; height: 1.2rem; fill: #000; display: block; }
#voiceBtn:hover svg { fill: #fff; }
#voiceBtn.listening { background: #000; color: #fff; }
#voiceBtn.listening svg { fill: #fff; }