/* Split from website/static/css/pages.css. Keep selector order compatible with the original cascade. */

.image-generation-surface {
  --image-generation-accent: #8d2ff3;
  --image-generation-content-inset: var(--chat-shell-edge-gutter, 16px);
  --image-generation-glow-bleed: 8px;
  --image-generation-surface-top-bleed: 10px;
  --image-generation-panel: rgba(255, 255, 255, 0.045);
  --image-generation-panel-strong: rgba(255, 255, 255, 0.07);
  box-sizing: border-box;
  display: none;
  width: min(
    calc(100% + (var(--image-generation-glow-bleed) * 2)),
    calc(var(--chat-shell-content-max-width, 560px) + (var(--image-generation-glow-bleed) * 2))
  );
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  align-self: center;
  margin-inline: calc(var(--image-generation-glow-bleed) * -1);
  padding: var(--image-generation-surface-top-bleed) var(--image-generation-glow-bleed) calc(104px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  color: #ffffff;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body:has(#chat.active #chat-main.image-mode) .page.page-chat-single-scroll {
  max-width: calc(var(--chat-shell-content-max-width, 560px) + (2 * var(--chat-shell-edge-gutter, 16px)));
  padding-left: var(--chat-shell-edge-gutter, 16px);
  padding-right: var(--chat-shell-edge-gutter, 16px);
}

body:has(#chat.active #chat-main.image-mode) #chat.section.active .chat-head-wrap {
  left: 50%;
  right: auto;
  width: 100vw;
  max-width: calc(var(--chat-shell-content-max-width, 560px) + (2 * var(--chat-shell-edge-gutter, 16px)));
  margin: 0 auto;
  padding-left: var(--chat-shell-edge-gutter, 16px);
  padding-right: var(--chat-shell-edge-gutter, 16px);
  transform: translateX(-50%);
}

body.tg-fullscreen:has(#chat.active #chat-main.image-mode) #chat.section.active .chat-head-wrap {
  top: var(--app-telegram-fullscreen-header-inset, var(--app-top-safe-inset));
}

body:has(#chat.active #chat-main.image-mode) #chat.section.active .chat-head-wrap > .top-bar,
body:has(#chat.active #chat-main.image-mode) #chat.section.active .chat-hero {
  margin-inline: 0;
  padding-left: 0;
  padding-right: 0;
}

body:has(#chat.active #chat-main.image-mode) #chat-main.chat-body.image-mode {
  --image-generation-header-offset: var(--app-top-safe-inset, 0px);
  --image-generation-shell-top-reserve: clamp(
    94px,
    calc(var(--image-generation-header-offset, 0px) + var(--chat-shell-header-height, 100px)),
    calc(var(--image-generation-header-offset, 0px) + 100px)
  );
  padding-top: var(--image-generation-shell-top-reserve);
}

body.tg-fullscreen:has(#chat.active #chat-main.image-mode) #chat-main.chat-body.image-mode {
  --image-generation-header-offset: var(--app-telegram-fullscreen-header-inset, var(--app-top-safe-inset, 0px));
}

.image-generation-surface::-webkit-scrollbar {
  display: none;
}

.chat-body.image-mode {
  --image-generation-footer-clearance: max(76px, calc(var(--footer-dock-outer-pad-top, 12px)
    + var(--footer-dock-buttons-pad-y, 12px)
    + var(--footer-dock-nav-min-height, 52px)
    + var(--footer-dock-buttons-pad-y, 12px)
    + var(--footer-dock-outer-pad-bottom, 12px)
    - 16px
  ));
  --image-generation-bottom-scrim-height: calc(var(--chat-composer-live-height, 56px) + 18px);
  --image-generation-scroll-reserve: calc(var(--image-generation-bottom-scrim-height) + 16px + env(safe-area-inset-bottom));
}

body:has(#chat.active #chat-main.image-mode) .footer.tap-bar.bottom-bar {
  z-index: 70;
  background: transparent;
}

body:has(#chat.active #chat-main.image-mode) .footer.tap-bar.bottom-bar .footer-buttons {
  background: rgba(18, 20, 29, 0.72);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.chat-body.image-mode .messages-container,
.chat-body.image-mode .hello-message,
.chat-body.image-mode .input-toolbar {
  display: none !important;
}

.chat-body.image-mode .image-generation-surface {
  display: flex;
}

.image-generation-compose {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.image-generation-compose::after {
  content: "";
  flex: 0 0 var(--image-generation-scroll-reserve, 132px);
  width: 100%;
  pointer-events: none;
}

.image-generation-surface.has-active-generation .image-generation-compose {
  height: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px) scale(0.985);
}

.image-generation-surface.has-active-generation .image-generation-compose::after {
  display: none;
}

.image-generation-surface.has-active-generation .image-generation-submit {
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, calc(12px - var(--image-generation-submit-keyboard-raise)), 0) scale(0.985);
}

.chat-body.image-mode .image-generation-surface::after {
  content: "";
  position: fixed;
  z-index: 55;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--image-generation-bottom-scrim-height) + env(safe-area-inset-bottom));
  pointer-events: none;
  transform: none;
  background: linear-gradient(180deg, rgba(18, 20, 29, 0) 0%, rgba(18, 20, 29, 0.68) 58%, rgba(18, 20, 29, 0.94) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.image-generation-detail {
  --image-generation-detail-bottom-space: calc(86px + env(safe-area-inset-bottom));
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding-bottom: var(--image-generation-detail-bottom-space);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.image-generation-detail[hidden] {
  display: none;
}

.image-generation-detail.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.image-generation-detail-thumbs[hidden] {
  display: none;
}

.image-generation-detail.has-multiple-images .image-generation-detail-thumbs {
  display: flex;
}

.image-generation-detail-thumbs {
  display: flex;
  gap: 9px;
  min-height: 56px;
  overflow-x: auto;
  padding: 2px 2px 1px;
  scrollbar-width: none;
}

.image-generation-detail-thumbs::-webkit-scrollbar {
  display: none;
}

.image-generation-detail-model {
  margin: 0 0 8px;
  color: rgba(242, 243, 247, 0.52);
  font-size: 12px;
  line-height: 16px;
}

.image-generation-detail-model[hidden] {
  display: none;
}

.image-generation-detail-thumb {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  padding: 0;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

.image-generation-detail-thumb.is-active {
  border-color: var(--image-generation-accent);
}

.image-generation-detail-thumb:active {
  transform: scale(0.96);
}

.image-generation-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-generation-detail-stage {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.image-generation-detail-image {
  display: block;
  width: 100%;
  max-height: min(58vh, 620px);
  object-fit: contain;
  border-radius: inherit;
}

.image-generation-detail-close,
.image-generation-detail-more,
.image-generation-detail-send {
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.18s ease;
}

.image-generation-detail-close,
.image-generation-detail-more {
  position: absolute;
  z-index: 3;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: rgba(24, 27, 36, 0.76);
  color: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.2s ease;
}

.image-generation-detail-close {
  top: 8px;
  right: 8px;
}

.image-generation-detail-more {
  top: 8px;
  right: 40px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.image-generation-detail-close svg {
  width: 11px;
  height: 11px;
}

.image-generation-detail-more svg {
  width: 11px;
  height: 3px;
}

.image-generation-detail-close:hover,
.image-generation-detail-more:hover,
.image-generation-detail-more.is-open {
  transform: scale(0.99);
  opacity: 0.95;
  background: rgba(35, 38, 50, 0.86);
}

.image-generation-detail-close:active,
.image-generation-detail-more:active,
.image-generation-detail-send:active {
  transform: scale(0.97);
}

.image-generation-detail-actions {
  display: flex;
  width: 100%;
  gap: 9px;
  min-width: 0;
}

.image-generation-detail.is-actions-condensed .image-generation-detail-actions {
  display: none;
}

.image-generation-detail-action {
  min-width: 0;
  min-height: 42px;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 248, 255, 0.94);
  font: 500 13px/1.15 Inter, system-ui, -apple-system, "system-ui", "Segoe UI", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.18s ease;
}

.image-generation-detail-action:hover {
  background: rgba(255, 255, 255, 0.085);
}

.image-generation-detail-action:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.image-generation-detail-action svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.image-generation-detail-composer {
  position: sticky;
  z-index: 60;
  bottom: calc(14px + env(safe-area-inset-bottom));
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 6px 8px 6px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #21232f;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
  overflow: visible;
  isolation: isolate;
}

.image-generation-detail-composer::before,
.image-generation-detail-composer::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.image-generation-detail-composer::before {
  inset: -6px;
  padding: 6px;
  z-index: 0;
  background:
    conic-gradient(
      from var(--image-generation-edge-angle, 0deg),
      transparent 0deg 22deg,
      rgba(124, 92, 255, var(--image-generation-detail-composer-glow-high, 0.18)) 38deg,
      rgba(95, 135, 255, var(--image-generation-detail-composer-glow-low, 0.14)) 54deg,
      transparent 82deg 148deg,
      rgba(95, 135, 255, var(--image-generation-detail-composer-glow-low, 0.15)) 168deg,
      rgba(124, 92, 255, var(--image-generation-detail-composer-glow-high, 0.18)) 188deg,
      transparent 210deg 264deg,
      rgba(190, 177, 255, var(--image-generation-detail-composer-glow-low, 0.13)) 282deg,
      rgba(141, 47, 243, var(--image-generation-detail-composer-glow-high, 0.16)) 300deg,
      transparent 320deg 360deg
    );
  filter: blur(8px);
  --image-generation-edge-glow-opacity-low: var(--image-generation-detail-composer-glow-opacity-low, 0.72);
  --image-generation-edge-glow-opacity-high: var(--image-generation-detail-composer-glow-opacity-high, 0.94);
  opacity: 1;
  animation: imageGenerationEdgeOrbit 16s linear infinite reverse, imageGenerationEdgeGlowBreath 5.8s ease-in-out infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.image-generation-detail-composer::after {
  inset: -1px;
  padding: 1px;
  z-index: 0;
  background:
    conic-gradient(
      from var(--image-generation-edge-angle, 0deg),
      transparent 0deg 24deg,
      rgba(124, 92, 255, 0.36) 40deg,
      rgba(95, 135, 255, 0.26) 58deg,
      rgba(190, 177, 255, 0.14) 70deg,
      transparent 88deg 150deg,
      rgba(95, 135, 255, 0.24) 170deg,
      rgba(124, 92, 255, 0.32) 190deg,
      transparent 214deg 270deg,
      rgba(190, 177, 255, 0.16) 288deg,
      rgba(141, 47, 243, 0.28) 306deg,
      transparent 328deg 360deg
    );
  opacity: var(--image-generation-detail-composer-border-opacity, 0.68);
  animation: imageGenerationEdgeOrbit 15.8s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.image-generation-detail-composer:focus-within {
  --image-generation-detail-composer-border-opacity: 0.38;
  --image-generation-detail-composer-glow-low: 0.075;
  --image-generation-detail-composer-glow-high: 0.095;
  --image-generation-detail-composer-glow-opacity-low: 0.48;
  --image-generation-detail-composer-glow-opacity-high: 0.62;
}

.image-generation-detail-composer > * {
  position: relative;
  z-index: 1;
}

.image-generation-detail-prompt {
  min-width: 0;
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  line-height: 20px;
}

.image-generation-detail-prompt::placeholder {
  color: rgba(242, 243, 247, 0.42);
}

.image-generation-detail-send {
  width: 38px;
  height: 38px;
  min-width: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
}

.image-generation-detail-send svg {
  width: 14px;
  height: 14px;
}

.image-generation-action-menu {
  position: fixed;
  z-index: 90;
  width: max-content;
  min-width: 148px;
  max-width: min(220px, calc(100vw - 20px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding: 5px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(32, 35, 46, 0.98);
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: menuFade 0.18s ease forwards;
  transform-origin: top center;
}

.image-generation-action-menu.is-above {
  animation-name: menuFadeUp;
  transform-origin: bottom center;
}

.image-generation-action-menu[hidden] {
  display: none;
}

.image-generation-action-menu-item {
  min-height: 0;
  display: grid;
  grid-template-columns: var(--ui-chat-menu-icon-size) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: var(--ui-chat-menu-item-pad-y) var(--ui-chat-menu-item-pad-x);
  border: none;
  border-radius: calc(var(--ui-chat-control-radius) + 2px);
  background: transparent;
  color: rgba(244, 248, 255, 0.94);
  font: 500 12px/1.2 Arial, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.18s ease;
}

.image-generation-action-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.image-generation-action-menu-item:active {
  opacity: 0.9;
}

.image-generation-action-menu-item--danger {
  color: #ff405d;
}

.image-generation-action-menu-separator {
  display: block;
  width: calc(100% - 12px);
  height: 1px;
  margin: 3px 6px;
  background: rgba(255, 255, 255, 0.08);
}

.image-generation-action-menu-item--detail-primary,
.image-generation-action-menu-separator--detail-primary {
  display: none;
}

.image-generation-action-menu.is-detail-actions-condensed .image-generation-action-menu-item--detail-primary {
  display: grid;
}

.image-generation-action-menu.is-detail-actions-condensed .image-generation-action-menu-separator--detail-primary {
  display: block;
}

.image-generation-action-menu-item span:first-child,
.image-generation-action-menu-item svg {
  width: var(--ui-chat-menu-icon-size);
  height: var(--ui-chat-menu-icon-size);
  max-width: var(--ui-chat-menu-icon-size);
  max-height: var(--ui-chat-menu-icon-size);
}

.image-generation-prompt-card {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 163px;
  padding: 11px;
  border-radius: 12px;
  background: #262832;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: none;
  overflow: visible;
}

.image-generation-prompt-card::before,
.image-generation-prompt-card::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.image-generation-prompt-card::before {
  inset: -1px;
  padding: 1px;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(
      from var(--image-generation-edge-angle, 0deg),
      transparent 0deg 20deg,
      rgba(124, 92, 255, 0.52) 34deg,
      rgba(95, 135, 255, 0.42) 50deg,
      rgba(190, 177, 255, 0.22) 62deg,
      transparent 78deg 144deg,
      rgba(95, 135, 255, 0.38) 162deg,
      rgba(124, 92, 255, 0.48) 180deg,
      transparent 202deg 260deg,
      rgba(190, 177, 255, 0.24) 278deg,
      rgba(141, 47, 243, 0.36) 296deg,
      transparent 318deg 360deg
    );
  animation: imageGenerationEdgeOrbit 13.6s linear infinite;
  opacity: var(--image-generation-prompt-border-opacity, 0.72);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.image-generation-prompt-card::after {
  inset: -6px;
  padding: 6px;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(
      from var(--image-generation-edge-angle, 0deg),
      transparent 0deg 22deg,
      rgba(124, 92, 255, var(--image-generation-prompt-glow-high, 0.18)) 38deg,
      rgba(95, 135, 255, var(--image-generation-prompt-glow-low, 0.14)) 54deg,
      transparent 82deg 148deg,
      rgba(95, 135, 255, var(--image-generation-prompt-glow-low, 0.15)) 168deg,
      rgba(124, 92, 255, var(--image-generation-prompt-glow-high, 0.18)) 188deg,
      transparent 210deg 264deg,
      rgba(190, 177, 255, var(--image-generation-prompt-glow-low, 0.13)) 282deg,
      rgba(141, 47, 243, var(--image-generation-prompt-glow-high, 0.16)) 300deg,
      transparent 320deg 360deg
    );
  filter: blur(8px);
  --image-generation-edge-glow-opacity-low: var(--image-generation-prompt-glow-opacity-low, 0.72);
  --image-generation-edge-glow-opacity-high: var(--image-generation-prompt-glow-opacity-high, 0.94);
  opacity: 1;
  animation: imageGenerationEdgeOrbit 16s linear infinite reverse, imageGenerationEdgeGlowBreath 5.8s ease-in-out infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.image-generation-prompt-card:focus-within {
  --image-generation-prompt-border-opacity: 0.42;
  --image-generation-prompt-glow-low: 0.075;
  --image-generation-prompt-glow-high: 0.095;
  --image-generation-prompt-glow-opacity-low: 0.48;
  --image-generation-prompt-glow-opacity-high: 0.62;
}

.image-generation-prompt-card > * {
  position: relative;
  z-index: 1;
}

.image-generation-reference-list {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
}

.image-generation-reference-list.has-items {
  display: flex;
}

.image-generation-reference {
  box-sizing: border-box;
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(224, 232, 255, 0.92);
  cursor: pointer;
}

.image-generation-reference img,
.image-generation-reference video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-generation-reference > svg {
  width: 30px;
  height: 30px;
}

.image-generation-reference-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(20, 22, 30, 0.74);
  color: #ffffff;
}

.image-generation-reference-remove svg {
  width: 9px;
  height: 9px;
}

.image-generation-prompt {
  --image-generation-prompt-scrollbar-size: 8px;
  --image-generation-prompt-scrollbar-track: rgba(255, 255, 255, 0.06);
  --image-generation-prompt-scrollbar-thumb: rgba(148, 162, 210, 0.52);
  --image-generation-prompt-scrollbar-thumb-hover: rgba(188, 198, 238, 0.88);
  flex: 0 0 auto;
  width: 100%;
  height: 60px;
  min-height: 60px;
  max-height: min(220px, 28dvh);
  padding: 0;
  resize: none;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  overflow-y: auto;
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
  scrollbar-color: var(--image-generation-prompt-scrollbar-thumb) var(--image-generation-prompt-scrollbar-track) !important;
}

.image-generation-prompt::-webkit-scrollbar {
  display: block !important;
  width: var(--image-generation-prompt-scrollbar-size) !important;
  height: auto !important;
  background: transparent !important;
}

.image-generation-prompt::-webkit-scrollbar-track {
  background: var(--image-generation-prompt-scrollbar-track);
  border-radius: 999px;
  margin: 2px 0;
}

.image-generation-prompt::-webkit-scrollbar-thumb {
  background: var(--image-generation-prompt-scrollbar-thumb);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.image-generation-prompt::-webkit-scrollbar-thumb:hover {
  background: var(--image-generation-prompt-scrollbar-thumb-hover);
  background-clip: padding-box;
}

.image-generation-prompt::placeholder {
  color: rgba(242, 243, 247, 0.42);
}

.image-generation-prompt-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 0;
}

.image-generation-add-image,
.image-generation-improve {
  box-sizing: border-box;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #ffffff;
  font: inherit;
  font-size: 12px;
  line-height: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.18s ease, border-color 0.18s ease;
}

.image-generation-add-image {
  width: 116px;
  border: 1px dashed rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.025);
}

.image-generation-add-image:hover {
  transform: scale(0.99);
  opacity: 0.96;
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.045);
}

.image-generation-add-image:active {
  transform: scale(0.985);
  opacity: 0.92;
  background: rgba(255, 255, 255, 0.06);
}

.image-generation-improve {
  width: 136px;
  height: 30px;
  margin-left: auto;
  border: 1px solid #8d2ff3;
  background: rgba(141, 47, 243, 0.05);
  color: rgba(236, 231, 255, 0.98);
}

.image-generation-improve:hover {
  transform: scale(0.99);
  opacity: 0.96;
  background: rgba(141, 47, 243, 0.085);
}

.image-generation-improve:active {
  transform: scale(0.985);
  opacity: 0.92;
  background: rgba(141, 47, 243, 0.12);
}

.image-generation-improve:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

.image-generation-add-image svg {
  width: 19px;
  height: 19px;
}

.image-generation-improve svg {
  width: 16px;
  height: 18px;
}

.image-generation-submit-main svg path {
  fill: currentColor;
  stroke: none;
}

.image-generation-controls {
  position: relative;
  z-index: 6;
  display: flex;
  gap: 7px;
  align-items: center;
  max-width: 100%;
}

.image-generation-control {
  flex: 0 1 60px;
  min-width: 0;
}

.image-generation-control:nth-child(2) {
  flex-basis: 82px;
}

.image-generation-control:nth-child(3) {
  flex-basis: 68px;
}

.image-generation-control:nth-child(4) {
  flex-basis: 112px;
}

.image-generation-dropdown .chat-settings-dropdown-trigger {
  height: 38px;
  display: grid;
  grid-template-columns: 16px minmax(0, auto) 9px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: none;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
}

.image-generation-dropdown .chat-settings-control-icon {
  width: 16px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 16px;
}

.image-generation-dropdown .chat-settings-control-icon svg {
  width: auto;
  height: auto;
  max-width: 18px;
  max-height: 20px;
}

.image-generation-dropdown .chat-settings-control-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: rgba(248, 250, 255, 0.94);
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-generation-dropdown .chat-settings-control-chevron {
  display: grid;
  flex: 0 0 9px;
  width: 9px;
  height: 5px;
  margin-left: 0;
  place-items: center;
}

.image-generation-dropdown .chat-settings-control-chevron svg {
  width: 9px;
  height: 5px;
}

.image-generation-dropdown .chat-settings-dropdown-menu {
  box-sizing: border-box;
  width: max-content;
  min-width: var(--image-generation-dropdown-min-width, 100%);
  max-width: min(var(--image-generation-dropdown-max-width, 100%), calc(100vw - 24px));
  max-height: min(188px, var(--image-generation-dropdown-max-height, calc(100vh - 24px)));
  padding: 5px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(35, 38, 49, 0.98), rgba(26, 28, 37, 0.98));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  overflow-x: hidden;
  z-index: 30;
}

.image-generation-dropdown.is-open .chat-settings-dropdown-menu {
  animation: menuFade 0.18s ease forwards;
  transform-origin: top center;
}

.image-generation-dropdown.is-open.is-drop-up .chat-settings-dropdown-menu {
  animation-name: menuFadeUp;
  transform-origin: bottom center;
}

.image-generation-dropdown.is-positioned .chat-settings-dropdown-menu {
  position: fixed;
  left: var(--image-generation-dropdown-left);
  top: var(--image-generation-dropdown-top);
  right: auto;
  bottom: auto;
}

.image-generation-dropdown.is-positioned.is-drop-up .chat-settings-dropdown-menu {
  top: var(--image-generation-dropdown-top);
  bottom: auto;
}

.image-generation-dropdown.is-align-right .chat-settings-dropdown-menu {
  left: auto;
  right: 0;
}

.image-generation-dropdown.is-drop-up .chat-settings-dropdown-menu {
  top: auto;
  bottom: calc(100% + 6px);
}

.image-generation-dropdown.chat-settings-dropdown--ratio .chat-settings-dropdown-menu {
  --image-generation-dropdown-min-width: 132px;
  --image-generation-dropdown-max-width: 148px;
  padding: 5px;
}

.image-generation-dropdown.chat-settings-dropdown--count .chat-settings-dropdown-menu {
  --image-generation-dropdown-min-width: 78px;
  --image-generation-dropdown-max-width: 88px;
}

.image-generation-dropdown.chat-settings-dropdown--quality .chat-settings-dropdown-menu {
  --image-generation-dropdown-min-width: 132px;
  --image-generation-dropdown-max-width: 148px;
  padding: 5px;
}

.image-generation-dropdown.chat-settings-dropdown--style .chat-settings-dropdown-menu {
  --image-generation-dropdown-min-width: 132px;
  --image-generation-dropdown-max-width: 184px;
  padding: 5px;
}

.image-generation-dropdown.chat-settings-dropdown--style .chat-settings-dropdown-search {
  height: 30px;
  padding: 5px 8px;
  border-radius: 11px;
  font-size: 12px;
}

.image-generation-dropdown.chat-settings-dropdown--ratio .chat-settings-dropdown-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.image-generation-dropdown.chat-settings-dropdown--ratio .chat-settings-dropdown-option {
  min-height: 34px;
  padding: 7px 9px;
  grid-template-columns: 20px minmax(0, 1fr) 12px;
}

.image-generation-dropdown.chat-settings-dropdown--ratio .chat-settings-option-label {
  font-size: 14px;
  line-height: 1.1;
}

.image-generation-dropdown .chat-settings-dropdown-option {
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 11px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 12px;
  align-items: center;
  font: 500 13px/1.15 Arial, sans-serif;
  gap: 8px;
  justify-content: stretch;
  text-align: left;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.2s ease;
}

.image-generation-dropdown .chat-settings-dropdown-option:hover {
  transform: scale(0.99);
  opacity: 0.95;
  background: rgba(255, 255, 255, 0.08);
}

.image-generation-dropdown .chat-settings-dropdown-option:active {
  transform: scale(0.99);
}

.image-generation-dropdown .chat-settings-ratio-icon,
.image-generation-option-count-icon,
.image-generation-option-quality-icon {
  width: 15px;
  min-width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
}

.image-generation-dropdown .image-generation-option-ratio-icon::before {
  width: var(--ratio-icon-width, 10px);
  height: var(--ratio-icon-height, 10px);
}

.image-generation-option-count-icon {
  width: 16px;
  min-width: 16px;
  height: 18px;
  border: 0;
  border-radius: 0;
  color: #ffffff;
}

.image-generation-option-count-icon svg,
.image-generation-option-quality-icon svg {
  max-width: 16px;
  max-height: 18px;
  display: block;
}

.image-generation-option-quality-icon svg {
  max-width: 18px;
  max-height: 18px;
}

.image-generation-dropdown .chat-settings-option-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}

.image-generation-dropdown .chat-settings-option-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font: inherit;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
}

.image-generation-dropdown .chat-settings-option-subtitle {
  color: rgba(255, 255, 255, 0.38);
  font-size: 12px;
  line-height: 1.15;
  font-weight: 400;
  white-space: nowrap;
}

.image-generation-dropdown .chat-settings-option-check {
  width: 8px;
  height: 6px;
  display: grid;
  place-items: center;
  opacity: 0;
  color: #ffffff;
}

.image-generation-dropdown .chat-settings-option-check svg {
  width: 8px;
  height: 6px;
  max-width: 8px;
  max-height: 6px;
}

.image-generation-dropdown .chat-settings-dropdown-option.is-selected,
.image-generation-dropdown .chat-settings-dropdown-option[aria-selected="true"] {
  background: rgba(124, 92, 255, 0.14);
}

.image-generation-dropdown .chat-settings-dropdown-option.is-selected .chat-settings-option-check,
.image-generation-dropdown .chat-settings-dropdown-option[aria-selected="true"] .chat-settings-option-check {
  opacity: 1;
}

.image-generation-dropdown.chat-settings-dropdown--count .chat-settings-dropdown-option,
.image-generation-dropdown.chat-settings-dropdown--quality .chat-settings-dropdown-option {
  grid-template-columns: minmax(0, 1fr) 12px;
}

.image-generation-dropdown.chat-settings-dropdown--count .chat-settings-dropdown-options {
  gap: 4px;
}

.image-generation-dropdown.chat-settings-dropdown--count .chat-settings-dropdown-option {
  min-height: 30px;
  padding: 5px 9px;
}

.image-generation-dropdown.chat-settings-dropdown--count .chat-settings-option-label {
  font-size: 13px;
}

.image-generation-dropdown.chat-settings-dropdown--quality .chat-settings-dropdown-option {
  min-height: 34px;
  padding: 5px 9px;
}

.image-generation-dropdown.chat-settings-dropdown--quality .chat-settings-option-copy {
  gap: 2px;
}

.image-generation-dropdown.chat-settings-dropdown--quality .chat-settings-option-label {
  font-size: 13px;
  line-height: 1.1;
  font-weight: 500;
}

.image-generation-dropdown.chat-settings-dropdown--quality .chat-settings-option-subtitle {
  font-size: 11px;
  line-height: 1.1;
}

.image-generation-settings {
  position: relative;
  width: 30px;
  height: 38px;
  flex: 0 0 30px;
  margin-left: auto;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}

.image-generation-settings::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9b5cff;
  box-shadow: 0 0 0 2px rgba(24, 26, 36, 0.92);
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.image-generation-settings.has-custom-advanced-settings::after {
  opacity: 1;
  transform: scale(1);
}

.image-generation-settings svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 430px) {
  .image-generation-controls {
    gap: 8px;
  }

  .image-generation-control {
    flex-basis: 70px;
  }

  .image-generation-control:nth-child(2) {
    flex-basis: 90px;
  }

  .image-generation-control:nth-child(3) {
    flex-basis: 80px;
  }

  .image-generation-control:nth-child(4) {
    flex-basis: 124px;
  }

  .image-generation-dropdown .chat-settings-dropdown-trigger {
    gap: 7px;
    padding-inline: 9px;
  }

  .image-generation-dropdown .chat-settings-control-text {
    font-size: 14px;
    line-height: 17px;
  }

  .image-generation-settings {
    width: 32px;
    flex-basis: 32px;
  }
}

@media (min-width: 391px) and (max-width: 429px) {
  .image-generation-control:nth-child(4) {
    flex-basis: 114px;
  }
}

.image-generation-recent {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.image-generation-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.image-generation-recent-head h3 {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.image-generation-view-all {
  border: none;
  background: transparent;
  color: var(--image-generation-accent);
  font: inherit;
  font-size: 12px;
  line-height: 20px;
  cursor: pointer;
}

.image-generation-recent-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.image-generation-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: clamp(180px, 34svh, 320px);
  padding: 12px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(242, 243, 247, 0.58);
  font-size: 14px;
  text-align: center;
}

.image-generation-empty-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  margin-bottom: 14px;
  border: 0;
  background: transparent;
  color: rgba(242, 243, 247, 0.48);
}

.image-generation-empty-icon svg {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.image-generation-empty-title {
  color: #ffffff;
  font-size: 18px;
  line-height: 23px;
  font-weight: 700;
}

.image-generation-empty-copy {
  max-width: 260px;
  margin-top: 8px;
  color: rgba(242, 243, 247, 0.52);
  font-size: 13px;
  line-height: 18px;
}

.image-generation-recent-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.image-generation-recent-item--pending {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  background: rgba(38, 40, 50, 0.2);
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
}

.image-generation-recent-item--pending::before,
.image-generation-recent-item--pending::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.image-generation-recent-item--pending::before {
  inset: -1px;
  padding: 1px;
  z-index: 0;
  background:
    conic-gradient(
      from var(--image-generation-edge-angle, 0deg),
      transparent 0deg 20deg,
      rgba(124, 92, 255, 0.52) 34deg,
      rgba(95, 135, 255, 0.42) 50deg,
      rgba(190, 177, 255, 0.22) 62deg,
      transparent 78deg 144deg,
      rgba(95, 135, 255, 0.38) 162deg,
      rgba(124, 92, 255, 0.48) 180deg,
      transparent 202deg 260deg,
      rgba(190, 177, 255, 0.24) 278deg,
      rgba(141, 47, 243, 0.36) 296deg,
      transparent 318deg 360deg
    );
  animation: imageGenerationEdgeOrbit 13.6s linear infinite;
  opacity: 0.72;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.image-generation-recent-item--pending::after {
  inset: -6px;
  padding: 6px;
  z-index: 0;
  background:
    conic-gradient(
      from var(--image-generation-edge-angle, 0deg),
      transparent 0deg 22deg,
      rgba(124, 92, 255, var(--image-generation-pending-glow-high, 0.18)) 38deg,
      rgba(95, 135, 255, var(--image-generation-pending-glow-low, 0.14)) 54deg,
      transparent 82deg 148deg,
      rgba(95, 135, 255, var(--image-generation-pending-glow-low, 0.15)) 168deg,
      rgba(124, 92, 255, var(--image-generation-pending-glow-high, 0.18)) 188deg,
      transparent 210deg 264deg,
      rgba(190, 177, 255, var(--image-generation-pending-glow-low, 0.13)) 282deg,
      rgba(141, 47, 243, var(--image-generation-pending-glow-high, 0.16)) 300deg,
      transparent 320deg 360deg
    );
  filter: blur(8px);
  --image-generation-edge-glow-opacity-low: 0.72;
  --image-generation-edge-glow-opacity-high: 0.94;
  animation: imageGenerationEdgeOrbit 16s linear infinite reverse, imageGenerationEdgeGlowBreath 5.8s ease-in-out infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.image-generation-recent-item--pending > * {
  position: relative;
  z-index: 1;
}

.image-generation-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.image-generation-recent-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.image-generation-recent-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(248, 250, 255, 0.92);
  font-size: 12px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-generation-recent-model {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(242, 243, 247, 0.52);
  font-size: 11px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-generation-pending-status {
  color: rgba(242, 243, 247, 0.58);
  font-size: 12px;
  line-height: 18px;
}

.image-generation-recent-more {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #8f93a3;
  display: grid;
  place-items: center;
  padding: 0;
  transition: transform 0.15s ease, opacity 0.15s ease,
    background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.image-generation-recent-more:hover,
.image-generation-recent-more.is-open {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f2f3f8;
}

.image-generation-recent-more:active {
  transform: scale(0.97);
  opacity: 0.9;
}

.image-generation-recent-more svg {
  width: 11px;
  height: 3px;
}

.image-generation-recent-thumbs {
  display: flex;
  gap: 8px;
  overflow: hidden;
}

.image-generation-recent-thumb {
  width: 64px;
  height: 76px;
  flex: 0 0 64px;
  overflow: hidden;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  padding: 0;
  cursor: pointer;
}

.image-generation-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-generation-submit {
  --image-generation-submit-keyboard-raise: 0px;
  position: fixed;
  z-index: 60;
  left: 50%;
  right: auto;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: min(calc(100vw - (2 * var(--chat-shell-edge-gutter, 16px))), var(--chat-shell-content-max-width, 560px));
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: #10131b;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transform: translate3d(-50%, calc(0px - var(--image-generation-submit-keyboard-raise)), 0);
  transition: transform 180ms ease, opacity 180ms ease;
  will-change: transform;
}

.image-generation-submit:disabled {
  cursor: default;
  opacity: 1;
  background: rgba(255, 255, 255, 0.82);
  color: rgba(16, 19, 27, 0.48);
}

.image-generation-submit:not(:disabled):active {
  transform: translate3d(-50%, calc(0px - var(--image-generation-submit-keyboard-raise)), 0) scale(0.985);
}

.image-generation-submit-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}

.image-generation-submit-main svg {
  width: 24px;
  height: 24px;
}

.image-generation-submit-cost {
  color: rgba(16, 19, 27, 0.46);
  font-size: 10px;
  line-height: 12px;
  font-weight: 400;
}

.image-generation-submit:disabled .image-generation-submit-cost {
  color: rgba(16, 19, 27, 0.34);
}

body:has(#chat.active #chat-main.image-mode).chat-footer-visible .image-generation-submit,
body:has(#chat.active #chat-main.image-mode).chat-footer-manual-open .image-generation-submit {
  bottom: calc(var(--image-generation-footer-clearance, 100px) + 16px + env(safe-area-inset-bottom));
}

body.chat-footer-visible .chat-body.image-mode .image-generation-detail,
body.chat-footer-manual-open .chat-body.image-mode .image-generation-detail {
  --image-generation-detail-bottom-space: calc(var(--image-generation-footer-clearance, 100px) + 76px + env(safe-area-inset-bottom));
}

body.chat-footer-visible .chat-body.image-mode .image-generation-surface,
body.chat-footer-manual-open .chat-body.image-mode .image-generation-surface {
  padding-bottom: calc(var(--image-generation-footer-clearance, 100px) + 104px + env(safe-area-inset-bottom));
}

body.chat-footer-visible .chat-body.image-mode,
body.chat-footer-manual-open .chat-body.image-mode {
  --image-generation-scroll-reserve: calc(var(--image-generation-footer-clearance, 100px) + var(--image-generation-bottom-scrim-height) + 16px + env(safe-area-inset-bottom));
}

body.chat-footer-visible .chat-body.image-mode .image-generation-surface::after,
body.chat-footer-manual-open .chat-body.image-mode .image-generation-surface::after {
  height: calc(var(--image-generation-footer-clearance, 100px) + var(--image-generation-bottom-scrim-height));
}

body:has(#chat.active #chat-main.image-mode).chat-footer-visible.chat-footer-keyboard-active .image-generation-submit {
  bottom: calc(16px + env(safe-area-inset-bottom));
}

body.chat-footer-visible.chat-footer-keyboard-active .chat-body.image-mode .image-generation-detail {
  --image-generation-detail-bottom-space: calc(86px + env(safe-area-inset-bottom));
}

body.chat-footer-visible.chat-footer-keyboard-active .chat-body.image-mode .image-generation-surface {
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

body.chat-footer-visible.chat-footer-keyboard-active .chat-body.image-mode {
  --image-generation-scroll-reserve: calc(var(--image-generation-bottom-scrim-height) + 16px + env(safe-area-inset-bottom));
}

body.chat-footer-visible.chat-footer-keyboard-active .chat-body.image-mode .image-generation-surface::after {
  height: calc(var(--image-generation-bottom-scrim-height) + env(safe-area-inset-bottom));
}

.chat-body.chat-mode-hydrating .input-toolbar.chat-composer,
.chat-body.chat-mode-hydrating .image-generation-surface,
.chat-body.chat-mode-hydrating .hello-message,
.chat-body.chat-mode-hydrating .messages-container {
  visibility: hidden;
}

@media (max-width: 390px) {
  .image-generation-prompt-card {
    padding: 11px;
    border-radius: 12px;
  }

  .image-generation-prompt {
    font-size: 14px;
  }

  .image-generation-control {
    flex-basis: 56px;
  }

  .image-generation-control:nth-child(2) {
    flex-basis: 72px;
  }

  .image-generation-control:nth-child(3) {
    flex-basis: 64px;
  }

  .image-generation-control:nth-child(4) {
    flex-basis: 104px;
  }

  .image-generation-dropdown .chat-settings-dropdown-trigger {
    grid-template-columns: 15px minmax(0, auto) 8px;
    gap: 4px;
    padding-inline: 6px;
  }

  .image-generation-dropdown .chat-settings-control-icon {
    width: 15px;
    height: 17px;
    flex-basis: 15px;
  }

  .image-generation-dropdown .chat-settings-control-icon svg {
    max-width: 16px;
    max-height: 18px;
  }

  .image-generation-dropdown .chat-settings-control-chevron,
  .image-generation-dropdown .chat-settings-control-chevron svg {
    width: 8px;
  }

  .image-generation-recent-thumb {
    width: 80px;
    flex-basis: 80px;
  }
}