/* Keep motion inside its own layer without cropping the moving artwork. */
.sidebar-opening #sidebar-rail,
.sidebar-opening.collapsed #sidebar-rail {
  visibility: hidden !important;
  opacity: 0;
  animation: none;
  transition: width 380ms var(--sidebar-spring);
}

#sidebar nav button,
#sidebar footer button,
.toolbar button,
.voice-picker button,
.ref-settings-nav button,
#popover button {
  overflow: visible;
}

button svg:is(.sidebar-motion, .image-motion, .edit-motion, .voice-lines),
button[data-action="settings"] .ref-icon,
button[data-ui="settings"] .ref-icon {
  overflow: visible;
}

button[data-action="settings"] .ref-icon,
button[data-ui="settings"] .ref-icon {
  transform-origin: 50% 50%;
  transition: transform 440ms cubic-bezier(.22,.61,.36,1);
}

button[data-action="settings"]:hover .ref-icon,
button[data-ui="settings"]:hover .ref-icon {
  transform: rotate(45deg);
}

#sidebar footer button:hover .more-chevrons { animation: none; }
.more-chevrons path + path { display: none; }
#sidebar footer button:not([aria-expanded="true"]):hover .more-chevrons { transform: translateY(1px); }

#sidebar button:active:not(:disabled),
#sidebar-rail button:active:not(:disabled),
.ref-mobile-header button:active:not(:disabled),
.toolbar button:active:not(:disabled),
#popover button:active:not(:disabled),
.voice-picker button:active:not(:disabled) {
  transform: none;
}

.toolbar button.model {
  width: auto;
  min-width: 0;
  border: 1px solid rgb(255 255 255 / 12%);
  background: transparent;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 24px;
}

.toolbar button.model i,
.toolbar button.model .ui-icon {
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
}

.toolbar button.model:is(:hover,[aria-expanded="true"]) { background: rgb(255 255 255 / 12%); }
.light .toolbar button.model { border-color: rgb(0 0 0 / 14%); }
.light .toolbar button.model:is(:hover,[aria-expanded="true"]) { background: rgb(0 0 0 / 8%); }

.image-mode-chip[hidden], .image-mode-terms[hidden] { display: none; }
.toolbar .image-mode-chip {
  border-radius: 32px;
  padding: 0 9px 0 12px;
  gap: 8px;
  background: #535353;
  color: #fff;
  white-space: nowrap;
  flex: none;
  animation: image-chip-in 200ms ease-out;
}
.toolbar .image-mode-chip:hover { background: #626262; }
.image-mode .toolbar [data-action="tools"] { width: 32px; padding: 0; }
.image-mode .toolbar [data-action="tools"] > span,
.image-mode .toolbar [data-action="tools"]::after,
.image-mode .toolbar [data-action="reason"],
.image-mode .toolbar .model { display: none; }
.image-mode:not(.chatting) main { padding-top: 56px; }
.image-mode:not(.chatting) #entry { background: transparent; box-shadow: none; }
.image-mode:not(.chatting) #entry .privacy,
.image-mode #suggestions { display: none; }
.image-mode-terms { margin: 24px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.image-mode-terms a { color: inherit; text-decoration: underline; }
.image-mode #suggestion-panel:not(:empty) { animation: new-surface-in 320ms ease-out; }

#dialog:has(.voice-setup) { border-radius: 32px; }
.voice-panel.voice-setup { padding: 28px 24px 24px; background: #03162c; border-radius: 32px; }
.voice-setup h2 { font-size: 24px; line-height: 32px; margin: 0 0 18px; }
.voice-setup .voice-name { font-size: 16px; line-height: 22px; margin: 4px 0 12px; }
.voice-setup .voice-notes { padding: 14px 24px; margin: 0; }
.voice-setup .voice-notes p { display: flex; gap: 20px; margin: 0; font-size: 14px; line-height: 21px; }
.voice-setup .voice-notes p + p { margin-top: 16px; }
.voice-setup .voice-notes svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; }
.voice-setup .voice-disclosure { font-size: 12px; line-height: 16px; font-weight: 400; margin: 12px 0; }
.voice-setup .enable-voice { background: #7eb9e6; color: #123a55; height: 36px; padding: 0 12px; }
.voice-setup .voice-orb[data-voice="1"] b { color: #7c9eff; }
.voice-setup .voice-orb[data-voice="2"] b { color: #f49e68; }

@keyframes image-chip-in { from { opacity: 0; transform: translateX(-5px); } }
@keyframes new-surface-in { from { opacity: 0; transform: translateY(7px); } }
@media (max-width: 900px) {
  .toolbar button.model { height: 36px; }
  .image-mode:not(.chatting) main { padding-top: max(75px, calc(50dvh - 255px)); }
  .voice-panel.voice-setup { max-height: 85dvh; overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .toolbar .image-mode-chip, .image-mode #suggestion-panel:not(:empty) { animation: none; }
}