/* ForgeOS Guide — Ember's face (forgeos-guide.js), and Ember's tip line.
 * The face is drawn beside each of Ember's replies, in Talk and in the You
 * sheet. The tip line sits in the composer's own column, in the flow of the
 * page, so it can never cover the thread or a reply's actions. Each mood is a
 * shape, a tint and a small movement; reduced motion holds every one of them
 * still and leaves the shapes and tint to carry the mood. */

.cw-composer-wrap { position: relative; }

/* The face, everywhere it is drawn. Tint per mood through two variables. */
.fg-face { display: block; overflow: visible; --fg-a: #ffe9a8; --fg-b: #ff6a1f; --fg-level: 0; }
.fg-stop-a { stop-color: var(--fg-a); }
.fg-stop-b { stop-color: var(--fg-b); }
.fg-glow { fill: var(--fg-b); opacity: calc(0.12 + var(--fg-level) * 0.5); transform-origin: 32px 36px; transform: scale(calc(1 + var(--fg-level) * 0.25)); transition: opacity .15s linear, transform .15s linear; }
.fg-tuft { fill: #ffd23f; transform-origin: 32px 15px; }
.fg-shine { fill: rgba(255, 255, 255, 0.55); }
.fg-cheek { fill: #ff8fb1; opacity: 0; }
.fg-eyes ellipse { fill: #2a160c; transform-box: fill-box; transform-origin: center; transition: transform .2s ease; }
.fg-brows { fill: none; stroke: #2a160c; stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.fg-mouth { fill: none; stroke: #2a160c; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: d .18s ease; }
.fg-spark { fill: #ffcf3d; opacity: 0; transform-origin: 56px 15px; }

/* Moods: tint, eyes, cheeks, brows. */
.fg-face[data-mood="joyful"] { --fg-a: #fff3b0; --fg-b: #ff7a14; }
.fg-face[data-mood="joyful"] .fg-cheek, .fg-face[data-mood="proud"] .fg-cheek, .fg-face[data-mood="tender"] .fg-cheek { opacity: .55; }
.fg-face[data-mood="joyful"] .fg-eyes ellipse { transform: scaleY(.55); }
.fg-face[data-mood="excited"] { --fg-a: #fff6c2; --fg-b: #ff5214; }
.fg-face[data-mood="excited"] .fg-eyes ellipse { transform: scale(1.15); }
.fg-face[data-mood="excited"] .fg-spark { opacity: 1; }
.fg-face[data-mood="playful"] { --fg-a: #ffd9b8; --fg-b: #ff5e57; }
.fg-face[data-mood="playful"] .fg-eyes ellipse:last-child { transform: scaleY(.25); }
.fg-face[data-mood="curious"] { --fg-a: #ffeab0; --fg-b: #f5891f; }
.fg-face[data-mood="curious"] .fg-brows { opacity: .8; }
.fg-face[data-mood="curious"] .fg-eyes ellipse:first-child { transform: scale(1.1); }
.fg-face[data-mood="calm"] { --fg-a: #ffe6c8; --fg-b: #e8885a; }
.fg-face[data-mood="calm"] .fg-eyes ellipse { transform: scaleY(.7); }
.fg-face[data-mood="concerned"] { --fg-a: #f8e0cc; --fg-b: #c97250; }
.fg-face[data-mood="concerned"] .fg-brows { opacity: .85; d: path("M21 29 Q25 27.5 29 25.5 M35 25.5 Q39 27.5 43 29"); }
.fg-face[data-mood="tender"] { --fg-a: #ffe3da; --fg-b: #ef8670; }
.fg-face[data-mood="tender"] .fg-eyes ellipse { transform: scaleY(.6); }
.fg-face[data-mood="proud"] { --fg-a: #ffeba3; --fg-b: #f26a12; }
.fg-face[data-mood="proud"] .fg-spark { opacity: .8; }

/* States override the mood's face while they last. */
.fg-face[data-state="listening"] .fg-eyes ellipse { transform: scale(calc(1.05 + var(--fg-level) * .35)); }
.fg-face[data-state="listening"] { --fg-a: #fff4c4; }
.fg-face[data-state="thinking"] .fg-eyes { transform: translate(2px, -2px); }
.fg-face[data-state="speaking"] .fg-glow { opacity: calc(0.2 + var(--fg-level) * 0.5); }
.fg-face[data-state="worried"] { --fg-a: #f6dccb; --fg-b: #b5583c; }
.fg-face[data-state="worried"] .fg-tuft { fill: #ff8a5c; }
.fg-face[data-state="worried"] .fg-brows { opacity: .9; d: path("M21 29 Q25 26 29 27 M35 27 Q39 26 43 29"); }
.fg-face[data-state="celebrating"] .fg-spark { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .fg-face[data-state="idle"] { animation: fg-bob 4.5s ease-in-out infinite; }
  .fg-face[data-state="idle"] .fg-eyes ellipse { animation: fg-blink 5s infinite; }
  .fg-face[data-mood="excited"][data-state="idle"] { animation-duration: 1.6s; }
  .fg-face[data-mood="concerned"][data-state="idle"], .fg-face[data-mood="tender"][data-state="idle"] { animation-duration: 7s; }
  .fg-face[data-state="listening"] { animation: fg-lean 2s ease-in-out infinite; }
  .fg-face[data-state="thinking"] { animation: fg-tilt 2.4s ease-in-out infinite; }
  .fg-face[data-state="thinking"] .fg-eyes { animation: fg-look 2.4s ease-in-out infinite; }
  .fg-face[data-state="building"] { animation: fg-bob 0.9s ease-in-out infinite; }
  .fg-face[data-state="building"] .fg-tuft { animation: fg-flicker 0.5s ease-in-out infinite alternate; }
  .fg-face[data-state="celebrating"] { animation: fg-jump 0.7s ease-out 3; }
  .fg-face[data-state="celebrating"] .fg-spark, .fg-face[data-mood="excited"] .fg-spark { animation: fg-twinkle 0.9s ease-out infinite; }
  .fg-face[data-state="worried"] { animation: fg-shake 0.5s ease-in-out 2; }
}

/* A hidden tab costs nothing. */
.fx-hidden .fg-face, .fx-hidden .fg-face * { animation-play-state: paused !important; }

/* The tip line: one small thing Ember says outside a reply -- an offer, a
   suggestion, a coaching tip while typing -- with one way to dismiss it. */
.fg-guide { display: block; margin: 0 auto 8px; min-height: 0; }
.fg-bubble {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  margin: 0; padding: 6px 6px 6px 10px;
  border-radius: 14px;
  background: var(--m19-surface, #ffffff);
  color: var(--m19-ink-2, #344054);
  border: 1px solid var(--m19-line, rgba(16, 20, 42, 0.12));
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: var(--m19-shadow-sm, 0 2px 8px rgba(16, 24, 40, .06));
  animation: fg-in .22s ease-out both;
}
.fg-bubble[hidden] { display: none; }
.fg-tip-face { flex: none; }
.fg-said { margin: 0; flex: 1 1 12rem; min-width: 0; }
.fg-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-actions:empty { display: none; }
.fg-chip {
  min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--m19-line, rgba(16, 20, 42, 0.18));
  background: transparent; color: var(--m19-ink, #101828); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.fg-chip--primary { background: var(--m19-brand-600, #4f46e5); border-color: transparent; color: #fff; }
.fg-dismiss {
  flex: none; width: 44px; height: 44px; margin: -6px -2px -6px 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--m19-ink-3, #667085); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.fg-dismiss:hover { color: var(--m19-ink, #101828); background: var(--m19-surface-2, #f4f5f9); }
.fg-dismiss:focus-visible, .fg-chip:focus-visible { outline: 2px solid var(--m19-brand-500, #6366f1); outline-offset: 2px; }

.fg-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }

@keyframes fg-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fg-bubble { animation: none; } }

@keyframes fg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes fg-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
@keyframes fg-lean { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes fg-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
@keyframes fg-look { 0%, 100% { transform: translateX(0); } 50% { transform: translate(2px, -2px); } }
@keyframes fg-flicker { from { transform: scaleY(0.9); } to { transform: scaleY(1.12); } }
@keyframes fg-jump { 0% { transform: translateY(0); } 40% { transform: translateY(-10px) scale(1.05); } 100% { transform: translateY(0); } }
@keyframes fg-twinkle { 0% { transform: scale(0.4); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes fg-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }