/* Luma: a soft, expressive desk companion with a purpose-built compact mode. */
.cw-widget-luma,
.cw-widget-app-luma {
  --luma-ink: var(--cw-widget-text, var(--ink, #26344d));
  --luma-accent: #607d74;
  --luma-paper: color-mix(in srgb, var(--cw-widget-background, #fffdf6) 95%, #edf3eb);
  --luma-panel: color-mix(in srgb, var(--luma-paper) 91%, var(--luma-accent) 9%);
  --luma-line: color-mix(in srgb, var(--luma-ink) 17%, transparent);
  --luma-soft: color-mix(in srgb, var(--luma-accent) 13%, transparent);
  --luma-pill: #304c45;
  --luma-pill-line: #b7dfc8;
  --luma-pill-shadow: color-mix(in srgb, var(--luma-accent) 22%, transparent);
}

.cw-widget-luma .cw-widget-title-icon,
.cw-widget-app-luma .cw-widget-title-icon {
  color: #fff !important;
  background: var(--luma-accent) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .28),
    0 5px 12px color-mix(in srgb, var(--luma-accent) 24%, transparent);
}

.cw-widget-luma .cw-widget-title-icon svg,
.cw-widget-app-luma .cw-widget-title-icon svg {
  width: 62%;
  height: 62%;
}

.cw-widget-app-luma .cw-luma-proactive-toggle {
  position: relative;
  width: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--luma-line);
  padding: 0 11px;
  color: color-mix(in srgb, var(--luma-ink) 58%, transparent);
  background: color-mix(in srgb, var(--luma-paper) 92%, transparent);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.cw-widget-app-luma .cw-luma-proactive-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cw-widget-app-luma .cw-luma-proactive-toggle i {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--luma-paper);
  border-radius: 50%;
  background: #8a958f;
}

.cw-widget-app-luma .cw-luma-proactive-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--luma-accent) 52%, transparent);
  color: #fff;
  background: var(--luma-accent);
}

.cw-widget-app-luma .cw-luma-proactive-toggle[aria-pressed="true"] i {
  background: #b7dfc8;
}

.cw-widget-app-luma .cw-setting-help {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--luma-ink) 62%, transparent);
  font-size: 9px;
  line-height: 1.55;
}

.cw-luma-memory-settings {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--luma-line);
  padding-top: 12px;
}

.cw-luma-memory-settings > div {
  display: grid;
  gap: 3px;
}

.cw-luma-memory-settings small {
  max-width: 58ch;
  color: color-mix(in srgb, var(--luma-ink) 62%, transparent);
  font-size: 8px;
  line-height: 1.5;
}

.cw-luma-memory-settings > button {
  min-height: 36px;
  border-radius: 9px;
  padding: 7px 11px;
  font: 850 9px inherit;
  cursor: pointer;
}

.cw-luma-delete-history {
  border: 1px solid color-mix(in srgb, #c84e63 65%, var(--luma-line));
  color: #fff;
  background: #c84e63;
}

.cw-widget-luma .cw-widget-body {
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden !important;
}

.cw-luma-shell,
.cw-luma-shell *,
.cw-luma-app,
.cw-luma-app * {
  box-sizing: border-box;
}

.cw-luma-shell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--luma-ink);
}

/* The compact widget is a companion, not a compressed chat application. */
.cw-luma-shell.is-compact-widget {
  display: block;
  padding: 4px 6px 5px;
  background: transparent;
}

.cw-luma-compact-presence {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 7px;
  align-items: stretch;
}

.cw-luma-face {
  position: relative;
  min-width: 0;
  aspect-ratio: 2 / 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 7px 10px var(--luma-pill-shadow));
}

.cw-luma-compact-presence .cw-luma-face {
  width: min(82%, 150px);
  height: auto;
  max-height: 86px;
  justify-self: center;
  align-self: center;
}

.cw-luma-face svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cw-luma-pill {
  fill: var(--luma-pill);
  transition: fill .42s cubic-bezier(.2, .8, .2, 1);
}

.cw-luma-eye,
.cw-luma-smile {
  fill: none;
  stroke: var(--luma-pill-line);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  transition: stroke .42s ease;
}

.cw-luma-face.is-compact {
  width: 30px;
  min-width: 30px;
  filter: none;
}

.cw-luma-state-ring {
  fill: none;
  stroke: var(--luma-pill-line);
  stroke-width: 3;
  opacity: 0;
}

.cw-luma-face[data-luma-face-state="listening"] .cw-luma-state-ring {
  opacity: .72;
  animation: luma-pill-ring 1.25s ease-in-out infinite;
}

.cw-luma-face[data-luma-face-state="idle"] svg {
  animation: luma-idle-float 4.6s ease-in-out infinite;
}

.cw-luma-face[data-luma-face-state="idle"] .cw-luma-eye {
  animation: luma-blink 5.2s ease-in-out infinite, luma-eye-wander 9.5s ease-in-out infinite;
}

.cw-luma-face[data-luma-face-state="listening"] .cw-luma-eye {
  animation: luma-blink 6.4s ease-in-out infinite;
}

.cw-luma-face[data-luma-face-state="greeting"] svg,
.cw-luma-face[data-luma-face-state="happy"] svg {
  animation: luma-happy-pop .72s cubic-bezier(.2, 1.4, .45, 1) both;
}

.cw-luma-face[data-luma-face-state="listening"] svg {
  animation: luma-listen-bob 1.55s ease-in-out infinite;
}

.cw-luma-face[data-luma-face-state="thinking"] svg {
  animation: luma-pill-breathe 1.4s ease-in-out infinite;
}

.cw-luma-face[data-luma-face-state="thinking"] .cw-luma-eye-left {
  animation: luma-think-left 1.25s ease-in-out infinite;
}

.cw-luma-face[data-luma-face-state="thinking"] .cw-luma-eye-right {
  animation: luma-think-right 1.25s ease-in-out infinite;
}

.cw-luma-face[data-luma-face-state="speaking"] svg {
  animation: luma-pill-breathe .72s ease-in-out infinite;
}

.cw-luma-face[data-luma-face-state="speaking"] .cw-luma-smile {
  animation: luma-mouth-talk .34s ease-in-out infinite alternate;
}

.cw-luma-compact-controls {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.cw-luma-compact-controls button,
.cw-luma-controls button {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--luma-line);
  border-radius: 15px;
  padding: 7px;
  color: var(--luma-ink);
  background: color-mix(in srgb, var(--luma-paper) 91%, transparent);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .52),
    0 4px 10px color-mix(in srgb, var(--luma-ink) 8%, transparent);
  cursor: pointer;
}

.cw-luma-compact-controls button.is-primary,
.cw-luma-controls button.is-primary {
  color: #fff;
  border-color: var(--luma-accent);
  background: var(--luma-accent);
}

.cw-luma-shell[data-luma-state="listening"] .cw-luma-compact-controls button.is-listening,
.cw-luma-shell[data-luma-state="listening"] .cw-luma-controls button.is-listening {
  animation: luma-mic-live 1.4s ease-in-out infinite;
}

.cw-luma-compact-controls button.is-stop,
.cw-luma-controls button.is-stop {
  color: #fff;
  border-color: #b94e45;
  background: #b94e45;
}

.cw-luma-compact-controls button:hover:not(:disabled),
.cw-luma-compact-controls button:focus-visible,
.cw-luma-controls button:hover:not(:disabled),
.cw-luma-controls button:focus-visible,
.cw-luma-empty button:hover,
.cw-luma-empty button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--luma-accent) 42%, transparent);
  outline-offset: 1px;
}

.cw-luma-compact-controls button:disabled,
.cw-luma-controls button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.cw-luma-compact-controls button span {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.cw-luma-compact-controls button small {
  display: none;
}

.cw-luma-compact-controls button svg,
.cw-luma-controls button svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Large widget and full app: the face and conversation each get a clear job. */
.cw-luma-large,
.cw-luma-shell.is-full-app {
  display: grid;
  grid-template-columns: minmax(210px, 35%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  background:
    radial-gradient(circle at 16% 45%, color-mix(in srgb, var(--luma-pill) 14%, transparent), transparent 27%),
    linear-gradient(180deg, color-mix(in srgb, var(--luma-paper) 98%, transparent), var(--luma-paper));
}

.cw-luma-presence {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px;
  text-align: center;
}

.cw-luma-presence .cw-luma-face {
  width: min(78%, 190px);
}

.cw-luma-status {
  width: min(100%, 290px);
  min-width: 0;
}

.cw-luma-status .cw-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--luma-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1;
}

.cw-luma-status p {
  margin: 0;
  color: var(--luma-ink);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cw-luma-controls {
  width: min(100%, 290px);
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.cw-luma-controls button {
  min-height: 42px;
  border-radius: 12px;
}

/* The large widget is much shorter than the full app. Keep both panes useful. */
.cw-luma-large:not(.is-full-app) {
  grid-template-columns: minmax(128px, .9fr) minmax(170px, 1.1fr);
  gap: 8px;
  padding: 8px;
}
.cw-luma-large:not(.is-full-app) .cw-luma-presence {
  gap: 6px;
  padding: 2px;
}
.cw-luma-large:not(.is-full-app) .cw-luma-presence .cw-luma-face {
  width: min(76%, 125px);
}
.cw-luma-large:not(.is-full-app) .cw-luma-status .cw-eyebrow { font-size: 8px; }
.cw-luma-large:not(.is-full-app) .cw-luma-status p { font-size: 10px; line-height: 1.25; }
.cw-luma-large:not(.is-full-app) .cw-luma-controls button { min-height: 34px; }
.cw-luma-large:not(.is-full-app) .cw-luma-controls button small { display: none; }

.cw-luma-controls button span {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.cw-luma-controls button small {
  min-width: 0;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-luma-conversation {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid var(--luma-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--luma-paper) 94%, transparent);
  box-shadow:
    inset 0 1px rgba(255,255,255,.5),
    0 9px 26px color-mix(in srgb, var(--luma-ink) 8%, transparent);
  overflow: hidden;
}

.cw-luma-conversation > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--luma-line);
}

.cw-luma-conversation > header div {
  min-width: 0;
}

.cw-luma-conversation > header .cw-eyebrow {
  display: block;
  color: var(--luma-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cw-luma-conversation > header b {
  display: block;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-luma-conversation > header button {
  border: 0;
  padding: 5px 7px;
  color: var(--luma-ink);
  background: transparent;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.cw-luma-messages {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  scrollbar-width: thin;
}

.cw-luma-message {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.cw-luma-message.is-user {
  justify-content: flex-end;
}

.cw-luma-message > div {
  width: fit-content;
  max-width: min(82%, 560px);
  min-width: 0;
  border: 1px solid var(--luma-line);
  border-radius: 14px 14px 14px 4px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--luma-paper) 96%, transparent);
}

.cw-luma-message.is-user > div {
  border-color: color-mix(in srgb, var(--luma-accent) 30%, transparent);
  border-radius: 14px 14px 4px 14px;
  background: var(--luma-soft);
}

.cw-luma-message p {
  margin: 0;
  overflow-wrap: anywhere;
  color: inherit;
  font-size: clamp(12px, 1.2cqw, 14px);
  font-weight: 650;
  line-height: 1.4;
}

.cw-luma-message-avatar {
  flex: 0 0 28px;
}

.cw-luma-message.is-thinking > div {
  display: flex;
  gap: 4px;
  padding: 10px 12px;
}

.cw-luma-message.is-thinking i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--luma-accent);
  animation: luma-thinking 1s ease-in-out infinite;
}

.cw-luma-message.is-thinking i:nth-child(2) { animation-delay: .14s; }
.cw-luma-message.is-thinking i:nth-child(3) { animation-delay: .28s; }

.cw-luma-empty {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
}

.cw-luma-empty b {
  font-size: 14px;
}

.cw-luma-empty p {
  max-width: 42ch;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  opacity: .74;
}

.cw-luma-empty div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

.cw-luma-empty button {
  border: 1px solid var(--luma-line);
  border-radius: 999px;
  padding: 7px 10px;
  color: inherit;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.cw-luma-composer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 6px;
  padding: 7px;
  border-top: 1px solid var(--luma-line);
  background: color-mix(in srgb, var(--luma-panel) 52%, transparent);
}

.cw-luma-composer textarea {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  max-height: 96px;
  resize: none;
  border: 1px solid var(--luma-line);
  border-radius: 11px;
  padding: 8px 10px;
  color: inherit;
  background: var(--luma-paper);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
}

.cw-luma-composer textarea::placeholder {
  color: color-mix(in srgb, var(--luma-ink) 57%, transparent);
}

.cw-luma-composer textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--luma-accent) 43%, transparent);
  outline-offset: 1px;
}

.cw-luma-composer button {
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--luma-accent);
  border-radius: 11px;
  padding: 0;
  color: #fff;
  background: var(--luma-accent);
  cursor: pointer;
}

.cw-luma-composer button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cw-luma-composer button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--luma-accent) 46%, transparent);
  outline-offset: 2px;
}

.cw-luma-composer button:disabled,
.cw-luma-composer textarea:disabled {
  opacity: .48;
}

.cw-luma-app {
  width: 100%;
  min-width: 0;
  min-height: min(680px, calc(100dvh - 170px));
  color: var(--luma-ink);
}

.cw-luma-app > .cw-luma-shell {
  min-height: inherit;
}

.cw-preview-luma .cw-preview-luma-face {
  display: grid;
  place-items: center;
  width: 34px;
  height: 28px;
  border-radius: 12px;
  background: #304c45;
  color: #b7dfc8;
  letter-spacing: 4px;
}

@keyframes luma-thinking {
  0%, 100% { opacity: .25; transform: translateY(1px); }
  50% { opacity: 1; transform: translateY(-2px); }
}

@keyframes luma-pill-ring {
  0%, 100% { opacity: .22; }
  50% { opacity: .82; }
}

@keyframes luma-pill-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@keyframes luma-idle-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  48% { transform: translateY(-2px) rotate(-.35deg); }
  58% { transform: translateY(-2px) rotate(.35deg); }
}

@keyframes luma-blink {
  0%, 43%, 47%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(.08); }
}

@keyframes luma-happy-pop {
  0% { transform: scale(.94) translateY(2px); }
  58% { transform: scale(1.045) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes luma-listen-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.012); }
}

@keyframes luma-think-left {
  0%, 100% { transform: translateX(-2px); }
  50% { transform: translateX(3px); }
}

@keyframes luma-think-right {
  0%, 100% { transform: translateX(-3px); }
  50% { transform: translateX(2px); }
}

@keyframes luma-mouth-talk {
  from { transform: translateY(-1px) scaleX(.82) scaleY(.72); }
  to { transform: translateY(1px) scaleX(1.06) scaleY(1.15); }
}

@keyframes luma-mic-live {
  0%, 100% { box-shadow: inset 0 1px rgba(255,255,255,.42), 0 0 0 0 color-mix(in srgb, var(--luma-accent) 32%, transparent); }
  50% { box-shadow: inset 0 1px rgba(255,255,255,.42), 0 0 0 5px transparent; }
}

@media (max-width: 1023px) {
  .cw-luma-app {
    min-height: 0;
  }

  .cw-luma-shell.is-full-app {
    min-height: calc(100dvh - 178px);
    grid-template-columns: minmax(170px, 32%) minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
  }

  .cw-luma-shell.is-full-app .cw-luma-presence {
    padding: 3px;
  }

  .cw-luma-shell.is-full-app .cw-luma-presence .cw-luma-face {
    width: min(78%, 170px);
  }
}

@media (max-width: 700px) {
  .cw-widget-app-luma .cw-app-delete-button {
    display: none;
  }

  .cw-widget-app-luma .cw-luma-proactive-toggle {
    width: 44px;
    padding: 0;
  }

  .cw-widget-app-luma .cw-luma-proactive-toggle span {
    display: none;
  }

  .cw-luma-shell.is-full-app {
    min-height: calc(100dvh - 148px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(142px, 31dvh) minmax(0, 1fr);
  }

  .cw-luma-shell.is-full-app .cw-luma-presence {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    grid-template-areas: "face controls";
    gap: 8px;
    padding: 0 2px;
  }

  .cw-luma-shell.is-full-app .cw-luma-presence .cw-luma-face {
    grid-area: face;
    width: min(76%, 170px);
    height: auto;
    justify-self: center;
    align-self: center;
  }

  .cw-luma-shell.is-full-app .cw-luma-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cw-luma-shell.is-full-app .cw-luma-controls {
    grid-area: controls;
    width: 58px;
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .cw-luma-shell.is-full-app .cw-luma-controls button {
    border-radius: 15px;
    padding: 7px;
  }

  .cw-luma-shell.is-full-app .cw-luma-controls button span {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
  }

  .cw-luma-shell.is-full-app .cw-luma-controls button small {
    display: none;
  }

  .cw-luma-conversation > header {
    padding: 8px 10px;
  }

  .cw-luma-messages {
    padding: 8px;
  }

  .cw-luma-memory-settings {
    grid-template-columns: 1fr;
  }

  .cw-luma-memory-settings > button {
    width: 100%;
  }
}

@container (max-width: 330px) {
  .cw-luma-shell.is-compact-widget {
    padding-inline: 4px;
  }

  .cw-luma-compact-presence {
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 5px;
  }

  .cw-luma-compact-controls {
    gap: 5px;
  }

  .cw-luma-compact-controls button {
    border-radius: 12px;
    padding: 5px;
  }

  .cw-luma-compact-controls button span {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }
}

/* The smooth-brain face: emotion-driven eyes, mouths, antenna light, and sparks. */
.cw-luma-antenna {
  fill: none;
  stroke: var(--luma-accent);
  stroke-width: 4;
  stroke-linecap: round;
}

.cw-luma-antenna-light {
  fill: var(--luma-accent);
  opacity: .55;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .3s ease;
}

.cw-luma-spark {
  fill: var(--luma-accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.cw-luma-face[data-luma-face-state="thinking"] .cw-luma-antenna-light {
  opacity: 1;
  animation: luma-antenna-think .72s ease-in-out infinite;
}

.cw-luma-face[data-luma-face-state="listening"] .cw-luma-antenna-light {
  opacity: 1;
  animation: luma-antenna-glow 1.7s ease-in-out infinite;
}

.cw-luma-face[data-luma-face-state="speaking"] .cw-luma-antenna-light {
  opacity: 1;
  animation: luma-antenna-talk .34s ease-in-out infinite alternate;
}

.cw-luma-face[data-luma-face-state="greeting"] .cw-luma-antenna-light,
.cw-luma-face[data-luma-face-state="happy"] .cw-luma-antenna-light {
  opacity: 1;
  animation: luma-antenna-pop .72s cubic-bezier(.2, 1.4, .45, 1) both;
}

.cw-luma-face[data-luma-face-state="speaking"] .cw-luma-state-ring {
  opacity: .45;
  animation: luma-pill-ring .9s ease-in-out infinite;
}

/* Emotion eyes: the face actually changes shape with Luma's feelings. */
.cw-luma-face[data-luma-emotion="happy"] .cw-luma-eye-left {
  d: path("M47 52c0-13 18-13 18 0");
}

.cw-luma-face[data-luma-emotion="happy"] .cw-luma-eye-right {
  d: path("M135 52c0-13 18-13 18 0");
}

.cw-luma-face[data-luma-emotion="excited"] .cw-luma-eye-left {
  d: path("M46 51a10 10 0 1 0 20 0a10 10 0 1 0 -20 0");
}

.cw-luma-face[data-luma-emotion="excited"] .cw-luma-eye-right {
  d: path("M134 51a10 10 0 1 0 20 0a10 10 0 1 0 -20 0");
}

.cw-luma-face[data-luma-emotion="surprised"] .cw-luma-eye-left {
  d: path("M51 51a5 5 0 1 0 10 0a5 5 0 1 0 -10 0");
}

.cw-luma-face[data-luma-emotion="surprised"] .cw-luma-eye-right {
  d: path("M139 51a5 5 0 1 0 10 0a5 5 0 1 0 -10 0");
}

.cw-luma-face[data-luma-emotion="curious"] .cw-luma-eye-left {
  d: path("M46 51a10 10 0 1 0 20 0a10 10 0 1 0 -20 0");
}

.cw-luma-face[data-luma-emotion="curious"] .cw-luma-eye-right {
  d: path("M138 51c0-7 12-7 12 0");
}

.cw-luma-face[data-luma-emotion="mischievous"] .cw-luma-eye-left {
  d: path("M46 44l19 8");
}

.cw-luma-face[data-luma-emotion="mischievous"] .cw-luma-eye-right {
  d: path("M154 44l-19 8");
}

.cw-luma-face[data-luma-emotion="soft"] .cw-luma-eye-left {
  d: path("M47 50c0-7 18-7 18 0");
}

.cw-luma-face[data-luma-emotion="soft"] .cw-luma-eye-right {
  d: path("M135 50c0-7 18-7 18 0");
}

.cw-luma-face[data-luma-emotion="proud"] .cw-luma-eye-left {
  d: path("M47 51c0-12 18-12 18 0");
}

.cw-luma-face[data-luma-emotion="proud"] .cw-luma-eye-right {
  d: path("M135 51c0-12 18-12 18 0");
}

.cw-luma-face[data-luma-emotion="serious"] .cw-luma-eye-left {
  d: path("M47 51h18");
}

.cw-luma-face[data-luma-emotion="serious"] .cw-luma-eye-right {
  d: path("M135 51h18");
}

/* Emotion mouths: grins, smirks, o-faces, and flatlines. */
.cw-luma-face[data-luma-emotion="happy"] .cw-luma-smile {
  d: path("M82 63c10 11 26 11 36 0");
}

.cw-luma-face[data-luma-emotion="excited"] .cw-luma-smile {
  d: path("M92 64a8 7 0 1 0 16 0a8 7 0 1 0 -16 0");
}

.cw-luma-face[data-luma-emotion="surprised"] .cw-luma-smile {
  d: path("M96 65a4 5 0 1 0 8 0a4 5 0 1 0 -8 0");
}

.cw-luma-face[data-luma-emotion="curious"] .cw-luma-smile {
  d: path("M85 65c9 8 22 8 31-2");
}

.cw-luma-face[data-luma-emotion="mischievous"] .cw-luma-smile {
  d: path("M86 64c10 9 23 7 30-3");
}

.cw-luma-face[data-luma-emotion="soft"] .cw-luma-smile {
  d: path("M90 64c6 5 14 5 20 0");
}

.cw-luma-face[data-luma-emotion="proud"] .cw-luma-smile {
  d: path("M85 63c10 8 21 8 31-2");
}

.cw-luma-face[data-luma-emotion="serious"] .cw-luma-smile {
  d: path("M88 65h24");
}

/* Sparks pop in when the smooth brain is extra pleased with itself. */
.cw-luma-face[data-luma-emotion="excited"] .cw-luma-spark,
.cw-luma-face[data-luma-emotion="proud"] .cw-luma-spark {
  animation: luma-spark-twinkle 1.2s ease-in-out infinite;
}

.cw-luma-face[data-luma-emotion="excited"] .cw-luma-spark-right,
.cw-luma-face[data-luma-emotion="proud"] .cw-luma-spark-right {
  animation-delay: .45s;
}

.cw-luma-face[data-luma-emotion="mischievous"] .cw-luma-spark-left {
  animation: luma-spark-twinkle 1.6s ease-in-out infinite;
}

.cw-luma-face[data-luma-emotion="surprised"] .cw-luma-spark {
  animation: luma-spark-pop .5s ease-out both;
}

@keyframes luma-antenna-think {
  0%, 100% { transform: scale(.7); opacity: .5; }
  50% { transform: scale(1.3); opacity: 1; }
}

@keyframes luma-antenna-glow {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@keyframes luma-antenna-talk {
  from { transform: scale(.85); }
  to { transform: scale(1.2); }
}

@keyframes luma-antenna-pop {
  0% { transform: scale(.4); }
  58% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

@keyframes luma-spark-twinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  50% { opacity: .95; transform: scale(1) rotate(20deg); }
}

@keyframes luma-spark-pop {
  0% { opacity: 0; transform: scale(.3); }
  60% { opacity: 1; transform: scale(1.25); }
  100% { opacity: .9; transform: scale(1); }
}

@keyframes luma-eye-wander {
  0%, 58%, 100% { translate: 0 0; }
  64%, 76% { translate: 2.5px 0; }
  82%, 90% { translate: -2.5px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cw-luma-face *,
  .cw-luma-message.is-thinking i {
    animation: none !important;
  }
}