/* space-maya.css — the "Tell Maya" box on Spaces (js/space-maya.js; the
   NewSpace artboard's .maya block: a lilac card, Maya's pink avatar, a white
   field and "Set it up"). CoachChat is dark by default: scoped overrides only,
   the learn-maya.js / setup-overlay.js pattern. */
.smy { display: flex; gap: 12px; align-items: flex-start; background: #f5f1ff; border: 1px solid #e4dcff; border-radius: 14px; padding: 14px 16px; margin: 0 0 22px; }
.smy-av { width: 30px; height: 30px; border-radius: 50%; background: #e85a8a; color: #fff; display: flex; align-items: center; justify-content: center; font: 700 13px Inter, sans-serif; flex: 0 0 30px; }
.smy-body { flex: 1 1 auto; min-width: 0; }
.smy-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; color: var(--text-1, #15172b); }
.smy-input { width: 100%; box-sizing: border-box; border: 1px solid #e8e4d8; border-radius: 10px; padding: 11px 14px; font-family: inherit; font-size: 14px; line-height: 1.5; background: #fff; color: #15172b; min-height: 44px; resize: vertical; }
.smy-input::placeholder { color: #6b6f86; }
.smy-go { align-self: flex-end; min-height: 44px; }
.smy-chat { height: 380px; display: flex; flex-direction: column; background: #fff; border: 1px solid #e8e4d8; border-radius: 12px; padding: 8px 10px; }
.smy-after { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.smy-after:empty { display: none; }
/* `hidden` must win over the display rules above: the empty chat showed before "Set it up". */
.smy [hidden] { display: none !important; }
.smy .cc-wrap { color: #15172b; }
.smy .cc-messages { padding: 6px 0; }
.smy .cc-bubble { font-size: 14px; }
.smy .cc-bubble--user { background: #6a4cf1; color: #fff; }
.smy .cc-bubble--ai { background: #faf8f3; border: 1px solid #efece2; color: #15172b; }
.smy .cc-input-row { border-top: 1px solid #efece2; padding: 8px 0 0; }
.smy .cc-textarea { background: #fff; border: 1px solid #d9dbe3; color: #15172b; font-size: 14px; }
.smy .cc-textarea::placeholder { color: #6b6f86; }
.smy .cc-action-btn { width: 40px; height: 40px; min-width: 40px; }
.smy .cc-action-btn--send { background: #6a4cf1; color: #fff; }
/* Speak it sits in its own row under the box (CoachChat._attachVoice, voice-input.js). */
.smy .cc-voice-row { padding: 6px 0 0; }
/* Round 4 (F10): what Maya is doing, one line per step, the step in hand with its clock. */
.smy .smy-steps { margin: 6px 0 4px; padding: 10px 12px; background: #faf8f3; border: 1px solid #efece2; border-radius: 10px; font-size: 13px; color: #15172b; }
.smy .smy-step { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; line-height: 1.45; }
.smy .smy-step.done { color: #4d5168; }
.smy .smy-step-mark { flex: 0 0 14px; color: #16794a; font-weight: 700; }
.smy .smy-step.on .smy-step-mark::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6a4cf1; animation: smy-pulse 1.2s ease-in-out infinite; }
.smy .smy-step-words { flex: 1 1 auto; min-width: 0; }
.smy .smy-step.on .smy-step-words { font-weight: 600; }
.smy .smy-step-note { color: #8a5a00; font-weight: 400; }
.smy .smy-step-clock { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: #6b6f86; }
@keyframes smy-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .smy .smy-step.on .smy-step-mark::before { animation: none; } }
@media (max-width: 640px) {
  .smy { flex-wrap: wrap; }
  .smy-go { width: 100%; justify-content: center; text-align: center; }
  /* R4-25 (dau-50 round 4, Michelle): on a phone the cards scrolled inside a
     box inside the page, a scroll within a scroll. The chat now grows with the
     conversation and the PAGE scrolls; the box to type in stays at its foot. */
  .smy-chat { height: auto; min-height: 220px; }
  .smy .cc-messages { flex: none; overflow: visible; }
}
/* R4-14: the reopened conversation's first line, and the way to start afresh. */
.smy .smy-resumed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  margin: 0 0 6px; padding: 8px 10px; border-radius: 10px; background: #f5f1ff; color: #4d5168; font-size: 13px; line-height: 1.4; }
.smy .smy-new { background: none; border: 0; padding: 6px 0; min-height: 32px; color: #5a3fd6; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; text-align: left; }
/* TK-50: on New space the line sits just above the box the coach types in, so
   "Start something new" is in sight however long the conversation is. */
.smy .smy-resumed.smy-resumed-foot { margin: 6px 0 0; flex: 0 0 auto; }
/* TK-50: a fresh box after "Ask Maya to set this up": one line, and the way back. */
.smy .smy-last { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 8px; font-size: 13px; line-height: 1.4; color: #4d5168; }
/* D10: "Please check first", built by the app (maya-hq/check-card.js). Its own
   block above her reply, never inside a bubble, so "Read more" never hides it. */
.smy .smy-card { margin: 8px 0 6px; padding: 10px 12px; background: #fff7e6; border: 1px solid #f1d9a6; border-radius: 10px; color: #15172b; }
.smy .smy-card-h { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.smy .smy-card-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f1e4c4; }
.smy .smy-card-item:first-of-type { border-top: 0; }
.smy .smy-card-text { flex: 1 1 auto; min-width: 0; }
.smy .smy-card-title { font-size: 12px; color: #4d5168; }
.smy .smy-card-state { font-size: 14px; line-height: 1.4; }
.smy .smy-card-go { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
@media (max-width: 640px) {
  .smy .smy-card-item { flex-wrap: wrap; }
  .smy .smy-card-go { width: 100%; justify-content: center; text-align: center; }
}
/* Brainstorming and Building (maya-hq/modes.js): which mode the conversation is
   in, in plain words, and the plan's Start building button. */
.smy .smy-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; font-size: 13px; line-height: 1.4; color: #4d5168; }
.smy .smy-mode-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; background: #fff; border: 1px solid #d9d0ff; color: #5a3fd6; }
.smy .smy-mode[data-mode="building"] .smy-mode-pill { background: #e9f7ef; border-color: #bfe5cf; color: #16794a; }
.smy .smy-mode[data-shown="done"] .smy-mode-pill { background: #f1f2f6; border-color: #d6d8e2; color: #33374d; }
.smy .smy-mode[data-shown="waiting"] .smy-mode-pill { background: #fff6e0; border-color: #f0d48a; color: #7a4d00; }
.smy .smy-go-build { display: flex; justify-content: flex-start; margin: 2px 0 8px; }
.smy .smy-go-build .btn { min-height: 44px; }
@media (max-width: 640px) { .smy .smy-go-build .btn { width: 100%; justify-content: center; } }
/* TK-2: starting ideas under the empty box, and what to do when "Set it up" is pressed with nothing in it. */
.smy-starters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.smy-starters-lbl { font-size: 13px; color: #4d5168; margin-right: 2px; }
.smy-chip { min-height: 36px; padding: 6px 12px; border: 1px solid #d6ccff; border-radius: 999px; background: #fff; color: #3b2a9e; font: 600 13px Inter, sans-serif; cursor: pointer; }
.smy-chip:hover, .smy-chip:focus-visible { background: #ede7ff; border-color: #6a4cf1; outline: none; }
.smy-need { font-size: 14px; font-weight: 600; color: #8a3a00; margin-top: 8px; line-height: 1.45; }
.smy-need:empty { display: none; }
/* TK-9: a step of the agreed plan that was not made, first on the card, said in full. */
.smy .smy-card-h--notyet { color: #8a3a00; }
.smy .smy-card-item + .smy-card-h { margin-top: 10px; }
.smy .smy-card-item[data-kind="not_made"] .smy-card-title { font-size: 14px; font-weight: 600; color: #15172b; }
.smy .smy-card-item[data-kind="not_made"] .smy-card-state { font-size: 13px; color: #8a3a00; }
.smy-need[data-tone="hint"] { color: #4d5168; font-weight: 500; }
/* The launch kit offer after a build (maya-hq/launch-kit.js): her closing paragraph, with Yes and Not now. */
.smy .smy-kit { margin: 4px 0 10px; padding: 12px 14px; background: #eef6f1; border: 1px solid #bfdccb; border-radius: 10px; color: #15172b; font-size: 15px; line-height: 1.5; }
.smy .smy-kit-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.smy .smy-kit-acts .btn { min-height: 44px; }
@media (max-width: 640px) { .smy .smy-kit-acts .btn { flex: 1 1 100%; justify-content: center; } }
.smy .smy-card-h--kit { color: #1d5b3a; }
.smy-copy-text { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; line-height: 1.5; padding: 10px; border: 1px solid #d6d9e3; border-radius: 8px; resize: vertical; }