/* White frosted capsules: one material for every control on the page. */
html.white-controls {
  --control-ink: #2e4139;
  --control-border: #c6d0c9;
  --control-surface: linear-gradient(160deg, #ffffffed, #f3f6f2d9) padding-box,
    linear-gradient(110deg, #c8d3c0, #b6cdc7 35%, #d4cedd 70%, #c2cbd8) border-box;
}
html.white-controls button,
html.white-controls select,
html.white-controls textarea,
html.white-controls input {
  color: var(--control-ink);
  border: 1px solid transparent;
  background: var(--control-surface);
  box-shadow: inset 0 1px 0 #fff, 0 3px 12px #344c3e0b;
}
html.white-controls button { border-radius: 999px; }
html.white-controls select,
html.white-controls textarea,
html.white-controls input {
  border-radius: 18px;
  transition: box-shadow 180ms, border-color 180ms;
}
html.white-controls button:not(:disabled):hover,
html.white-controls select:not(:disabled):hover {
  color: #263d31;
  background: linear-gradient(160deg, #fff, #eff4eedf) padding-box,
    linear-gradient(110deg, #aebfa5, #9dbbb0, #bcb3cf) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 5px 16px #344c3e12;
}
html.white-controls button:focus-visible,
html.white-controls select:focus-visible,
html.white-controls textarea:focus-visible,
html.white-controls input:focus-visible {
  outline: 2px solid #72917d;
  outline-offset: 3px;
}
html.white-controls button:disabled,
html.white-controls select:disabled { opacity: .5; }
html.white-controls .icon-button,
html.white-controls .send-button { border-radius: 50%; }
html.white-controls .history-item { border-radius: 16px; }
html.white-controls .history-item.active,
html.white-controls .practice-mode button.selected,
html.white-controls .stage-nav button.current {
  color: #35543f;
  background: linear-gradient(150deg, #fcfff9, #e9f1e5) padding-box,
    linear-gradient(120deg, #a5b99b, #b8cdb9) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 2px 9px #344c3e0d;
}
html.white-controls .stage-nav.has-motion-indicator button.current {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
html.white-controls .voice-button.recording {
  color: #9c4944;
  border-color: #d7a39c;
  background: #fff9f7;
}
.aurora-button,
.aurora-button:not(:disabled):hover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #2e4139;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--control-surface);
  box-shadow: inset 0 1px 0 #fff, 0 5px 18px #344c3e10;
  transition: transform 180ms, box-shadow 180ms, color 180ms;
}
.aurora-button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 13% 140%, #a7c5b03d, transparent 42%),
    radial-gradient(ellipse at 60% 150%, #c8c0dc2b, transparent 45%),
    radial-gradient(ellipse at 100% 125%, #d5d2a526, transparent 35%);
  opacity: .82;
  transition: opacity 200ms;
}
.aurora-button::after { content: none; }
.aurora-button:not(:disabled):hover::before { opacity: 1; }
.aurora-button:not(:disabled):hover { box-shadow: inset 0 1px 0 #fff, 0 7px 19px #344c3e18; }
.aurora-button:focus-visible { outline: 3px solid #8e91aa; outline-offset: 3px; }
.start-button.aurora-button > span:not(.orb-visual):not(.orb-label) {
  background: #eef4eb;
  color: #385b43;
  box-shadow: inset 0 1px 0 #fff;
}

/* Keep the existing multiline input and voice controls inside the capsule. */
.composer {
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 30px;
  background: var(--control-surface);
  box-shadow: inset 0 1px 0 #fff, 0 8px 28px #344c3e10;
}
.composer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse at 13% 130%, #b4d0bd26, transparent 43%),
    radial-gradient(ellipse at 73% 150%, #c4bed926, transparent 42%);
}
.composer:focus-within { border-color: transparent; box-shadow: 0 0 0 2px #7978aa22, 0 10px 32px #24222e1c; }
.white-controls .composer textarea { color: #304138; caret-color: #526d5d; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.composer textarea::placeholder { color: #6c7a72; opacity: 1; }
.composer .input-hint { color: #68776e; }
.composer .voice-button, .composer .stop-button {
  color: #40594a;
  background: #ffffffb8;
  border-color: #c6d3c5;
  box-shadow: inset 0 1px 0 #fff;
}
.composer .voice-button:hover, .composer .stop-button:hover { background: #f2f7ef; color: #304d39; }
.composer .voice-button.recording { color: #a3524b; border-color: #cf9a92; }
.composer .send-button, .composer .send-button:not(:disabled) {
  position: relative;
  isolation: isolate;
  overflow: visible;
  color: #3c5b46;
  background: #f3f7ef;
  border: 1px solid #c9d6c8;
  box-shadow: inset 0 1px 0 #fff, 0 3px 9px #344c3e0c;
}
.composer .send-button:not(:disabled):hover { background: #eaf2e4; box-shadow: 0 0 16px #8ba78220; }
.composer .send-button:disabled { opacity: .45; }
html.white-controls .composer button {
  color: #3c5b46;
  border: 1px solid transparent;
  background: var(--control-surface);
  box-shadow: inset 0 1px 0 #fff, 0 3px 9px #344c3e0c;
}

/* The original button stays in place; only its decorative surface contracts. */
.morph-button { position: relative; }
.morph-button .orb-visual {
  position: absolute;
  left: 50%;
  top: calc(50% - 5px);
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) scale(.3);
  background: #f7faf5;
  box-shadow: 0 0 20px #7d9f8020, inset 0 0 0 1px #98b1a32e;
  opacity: 0;
  pointer-events: none;
  transition: transform 260ms cubic-bezier(.22,1,.36,1), opacity 150ms;
}
.morph-button .orb-visual canvas { width: 57px; height: 57px; pointer-events: none; }
.morph-button .orb-label {
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: 10px;
  min-height: 0;
  padding: 0;
  margin: 0;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #59605d;
  font-size: 8px;
  font-weight: 400;
  line-height: 10px;
  text-align: center;
  letter-spacing: .4px;
  opacity: 0;
  pointer-events: none;
}
html.white-controls .morph-button.morph-active,
html.white-controls .morph-button.morph-active:not(:disabled):hover {
  width: var(--morph-width);
  height: var(--morph-height);
  min-height: var(--morph-height);
  max-width: 100%;
  white-space: nowrap;
  color: transparent;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
  transform: none;
}
.morph-button.morph-active::before, .morph-button.morph-active::after { opacity: 0; }
.morph-button.morph-active > svg,
.start-button.morph-active > span:not(.orb-visual):not(.orb-label) { visibility: hidden; }
.morph-active .orb-visual { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.morph-active .orb-label { opacity: 1; }
.composer .morph-active .orb-label { color: #536e5a; }
.composer .send-button.morph-active { background: transparent; border-color: transparent; box-shadow: none; }
.composer .send-button .orb-visual { top: 50%; }
.composer .send-button .orb-label { display: none; }
.morph-resolved .orb-visual { box-shadow: 0 0 18px #59b88b2e, inset 0 0 0 1px #76c6a14d; }
.morph-reduced .orb-visual { display: none; }
html.white-controls .morph-button.morph-reduced { color: #304b39; background: #f7faf4; border-color: #aabdad; box-shadow: none; }
.morph-reduced .orb-label { display: none; }
.ink-on-dark .ink-control-wash { background: radial-gradient(ellipse, #b6c7ba38, #9eb3aa1c 45%, transparent 74%); }
.ink-on-dark .ink-control-tide { background: radial-gradient(ellipse at 50% 100%, #b4c3b35c, #a5b7a814 54%, transparent 74%); }
.ink-on-dark .ink-control-particle { background: #bccdc0; }
@media(max-width:700px) { .composer { border-radius: 27px; } }
@media(prefers-reduced-motion:reduce) {
  .aurora-button, .aurora-button::before, .orb-visual { transition: none !important; }
}
@media(prefers-reduced-transparency:reduce) {
  .composer, .aurora-button { background-color: #fafcf8; }
  .composer::before, .aurora-button::before { display: none; }
}