/* ember-widget.css — styling for the reusable conversational Ember mascot that
   can be dropped onto any standalone page (home, path, sim, capstone, …) that
   isn't the inline-widget slide course. Mirrors the look of the course's inline
   mascot so the experience is consistent everywhere. Paired with ember-widget.js. */

#em-fab { position: fixed; bottom: 72px; right: 22px; width: 80px; height: 104px; background: transparent; border: none; padding: 0; cursor: grab; z-index: 99999; filter: drop-shadow(0 12px 14px rgba(0,0,0,0.18)); animation: emw-hover 4.5s ease-in-out infinite; }
#em-fab:active { cursor: grabbing; }
#em-fab.user-placed, #em-fab.dragging { animation: none; }
#em-fab svg { width: 100%; height: 100%; display: block; pointer-events: none; transform-origin: 50% 92%; animation: emw-flicker 2.8s ease-in-out infinite; }
@keyframes emw-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* Living flame: subtle flicker (scale/skew/brightness) on the flame itself while idle. */
@keyframes emw-flicker {
  0%, 100% { transform: scaleY(1) scaleX(1) skewX(0deg); filter: brightness(1); }
  20% { transform: scaleY(1.045) scaleX(.985) skewX(-1.6deg); filter: brightness(1.1); }
  45% { transform: scaleY(.975) scaleX(1.015) skewX(1deg); filter: brightness(.95); }
  70% { transform: scaleY(1.03) scaleX(.99) skewX(1.7deg); filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) { #em-fab svg { animation: none; } }
#em-fab.talking { animation: emw-hover 4.5s ease-in-out infinite, emw-wobble .9s ease-in-out infinite; }
@keyframes emw-wobble { 0%,100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
#em-fab.em-attn { animation: emw-hover 4.5s ease-in-out infinite, emw-attn 1.6s ease-out 3; }
/* Reaction pop (correct/wrong/idle emote) — overrides the hover briefly, then resumes. */
#em-fab.em-react { animation: emw-pop .6s ease-out !important; }
@keyframes emw-pop { 0% { transform: scale(1) rotate(0); } 30% { transform: scale(1.22) rotate(-6deg); } 60% { transform: scale(.94) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { #em-fab.em-react { animation: none !important; } }
@keyframes emw-attn { 0% { filter: drop-shadow(0 12px 14px rgba(0,0,0,0.18)); } 50% { filter: drop-shadow(0 0 18px rgba(212,116,10,0.9)); } 100% { filter: drop-shadow(0 12px 14px rgba(0,0,0,0.18)); } }

#em-chat { position: fixed; width: 340px; max-width: min(340px, calc(100vw - 24px)); height: 380px; max-height: min(460px, calc(100vh - 24px)); background: #fff; border: 1px solid #d6d9e0; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.24); z-index: 99998; display: none; flex-direction: column; overflow: hidden; font-family: "Inter", system-ui, sans-serif; }
#em-chat.show { display: flex; }
#em-chat-head { background: var(--em-accent,#D4740A); color: #fff; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; cursor: grab; user-select: none; font-size: 13px; font-weight: 700; }
#em-chat-head .em-h-actions { display: flex; gap: 4px; margin-left: auto; }
.em-engine { margin-left: 8px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.45); cursor: pointer; white-space: nowrap; line-height: 1.5; }
.em-engine.native { background: #1f7a3d; border-color: #43d27a; }
.em-engine.llm { background: #9a5b00; border-color: #ffb24d; }
#em-chat-head button { background: none; border: 1px solid rgba(255,255,255,0.4); color: #fff; border-radius: 4px; padding: 1px 6px; font-size: 12px; cursor: pointer; }
#em-log { flex: 1; overflow-y: auto; padding: 12px; background: #f8f9fb; font-size: calc(14px * var(--a11y-scale, 1)); line-height: 1.55; color: #16202e; scrollbar-width: thin; }
.em-msg { margin-bottom: 10px; padding: 8px 11px; border-radius: 9px; max-width: 90%; word-wrap: break-word; }
.em-msg.user { background: var(--em-accent,#D4740A); color: #fff; margin-left: auto; }
.em-msg.bot { background: #fff; color: #1f2937; border: 1px solid #e5e8ee; }
.em-msg.thinking { background: #fff; color: #999; font-style: italic; border: 1px solid #e5e8ee; }
.em-cite { margin-top: 6px; font-size: 10.5px; color: #8a6d3a; background: #fff6e8; border: 1px solid #f0dcb8; border-radius: 6px; padding: 4px 8px; }
.em-cite b { color: #6b531f; }
.em-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.em-chip { background: #fff; border: 1px solid var(--em-accent,#D4740A); color: var(--em-accent,#D4740A); border-radius: 14px; padding: 7px 13px; font: 600 calc(13px * var(--a11y-scale, 1))/1.1 "Inter", system-ui, sans-serif; cursor: pointer; transition: background .15s, color .15s; }
.em-chip:hover { background: var(--em-accent,#D4740A); color: #fff; }
#em-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #eee; background: #fff; box-sizing: border-box; }
/* Explicit width / colour / margin so a HOST page's global input{}/button{} rules
   (e.g. the login page's full-width dark inputs + orange buttons) can't hijack the
   chat field or the send button. */
#em-input { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; box-sizing: border-box; padding: 9px 11px; border: 1px solid #ccc; border-radius: 6px; background: #fff; color: #16202e; font-size: calc(14px * var(--a11y-scale, 1)); font-family: inherit; }
#em-input:focus { outline: none; border-color: var(--em-accent,#D4740A); }
#em-send { flex: 0 0 auto; width: auto; margin: 0; padding: 8px 13px; border: none; border-radius: 6px; background: var(--em-accent,#D4740A); color: #fff; font-weight: 700; cursor: pointer; }
#em-send:disabled { opacity: .5; }
#em-intro-note { padding: 8px 12px; font-size: 11.5px; color: #777; background: #fff; border-bottom: 1px solid #eee; }

#em-bubble { position: fixed; z-index: 99998; max-width: calc(252px * var(--a11y-scale, 1)); background: #fff; color: #16202e; border-radius: 16px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.22)) drop-shadow(0 0 1px rgba(0,0,0,.28)); padding: 13px 16px; font: 600 calc(15px * var(--a11y-scale, 1))/1.5 "Inter", system-ui, sans-serif; opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .3s, transform .3s; cursor: pointer; }
#em-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
/* Seamless tail: NO borders — a single drop-shadow on the bubble wraps the bubble
   AND this pseudo-element as one continuous shape, so there's no border seam/gap.
   The tail overlaps the body slightly so the white merges. --tail-x tracks the flame. */
#em-bubble:after { content: ""; position: absolute; left: var(--tail-x, calc(100% - 30px)); width: 18px; height: 18px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
#em-bubble[data-place="bottom"]:after { bottom: -6px; top: auto; }
#em-bubble[data-place="top"]:after { top: -6px; bottom: auto; }
#em-bubble b { color: var(--em-accent,#D4740A); }
#em-bubble .em-bub-x { position: absolute; top: 3px; right: 7px; border: none; background: none; color: #aaa; font-size: 16px; line-height: 1; cursor: pointer; }

/* The decorative home-page Ember becomes a visible affordance to chat. */
.welcome-ember.em-clickable { cursor: pointer; transition: transform .15s; }
.welcome-ember.em-clickable:hover { transform: scale(1.05); }

/* Always-visible accessibility button (bottom-left; mascot owns bottom-right). */
#em-a11y-fab {
  position: fixed; left: 18px; bottom: 18px; z-index: 99997;
  width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 22%, #232c3a, #11151c);
  color: #cbd5e1; border: 1px solid rgba(255,255,255,.16);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.7);
  transition: border-color .15s, transform .15s, color .15s;
}
#em-a11y-fab svg { width: 23px; height: 23px; display: block; }
#em-a11y-fab:hover { color: #fff; border-color: var(--em-accent, #ff7a18); transform: translateY(-2px); }
#em-a11y-fab:focus-visible { outline: 3px solid var(--em-accent, #ff7a18); outline-offset: 2px; }
:root[data-theme="light"] #em-a11y-fab { background: radial-gradient(120% 120% at 30% 22%, #ffffff, #eef1f5); color: #475060; border-color: rgba(0,0,0,.12); }
.a11y-contrast #em-a11y-fab { border-color: #7d8ba6; }
@media (max-width: 640px) { #em-a11y-fab { width: 44px; height: 44px; left: 12px; bottom: 12px; } }