/* 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 oaksandoars.com — her own copy of this file, in the
   studio's presentation, and it is a deliberate departure from the
   film boards she closes: a light board, deep lush green on white
   (jameel, 2026-10-28 — "let's test what it looks like to have chat
   feature green on white"). the same serif, the same measure (46rem),
   the same interface — only the colors turn: every black the personal
   door uses stands here as the green, #0a4d2e, on white. */

#scarlettSection { background: #ffffff; }
.scarlett-chat {
  width: 100%;
  max-width: 46rem;
  height: 100%;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  box-sizing: border-box;
  text-align: left;
  color: #0a4d2e;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* no head, no blurb: her board is the conversation, nothing else. */
/* the greeting holds the board (jameel, 2026-10-28): before the first
   message, her greeting stands alone — centered on the empty board 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.62; }
#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, in the green, riding her newest character while she speaks.
   on this board it is also her resting state: when the held greeting
   lands, the cursor keeps blinking at its end. */
#chatLog .typer-caret, #greetingHoldText .typer-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.02em;
  margin-left: 2px;
  background: #0a4d2e;
  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 #0a4d2e;
  background: #fff;
  color: #0a4d2e;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
}
.choice:hover, #chatForm button:hover { background: #0a4d2e; color: #fff; }
.choice:focus-visible, #chatForm button:focus-visible { background: #0a4d2e; 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 #0a4d2e;
  background: #fff;
  color: #0a4d2e;
  border-radius: 999px;
}
#chatInput::placeholder { color: rgba(10, 77, 46, 0.55); }
/* 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: #0a4d2e; display: block; }
#voiceBtn:hover svg { fill: #fff; }
#voiceBtn.listening { background: #0a4d2e; color: #fff; }
#voiceBtn.listening svg { fill: #fff; }