/* ==========================================================================
   1:1 Pixel-Perfect Replica & High/Low Resolution Adaptive Rules
   ========================================================================== */

/* 1. Global & Shell Colors matching the reference screenshot */
body.client-body {
  background-color: #0d0e11 !important;
}

body.client-body .studio-shell.view-inspire {
  background-color: #0d0e11 !important;
  grid-template-columns: 68px 0 minmax(0, 1fr) !important;
}

/* 2. Platform Top Announcement Bar (1:1 with countdown & banner styling) */
body:has(.studio-shell.view-inspire) .platform-announcement-bar {
  height: 38px !important;
  min-height: 38px !important;
  background: linear-gradient(90deg, #f39c50 0%, #308ee0 30%, #0077d4 60%, #0180e1 100%) !important;
  border-bottom: none !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.platform-announcement-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: default !important;
  overflow: hidden !important;
}

.platform-announcement-segment {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  padding: 0 !important;
  font: inherit !important;
  cursor: pointer !important;
}

.platform-announcement-segment:hover {
  color: #ffffff !important;
  opacity: .88 !important;
}

.announcement-segment-divider {
  color: rgba(255, 255, 255, 0.48) !important;
}

.platform-announcement-content > .announcement-referral-segment {
  justify-self: end !important;
}

.platform-announcement-content > .announcement-recharge-segment {
  justify-self: start !important;
}

.platform-announcement-content > .announcement-countdown {
  justify-self: center !important;
}

.announcement-countdown {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.announcement-countdown .cd-box {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1a1a1a !important;
  border-radius: 4px !important;
  padding: 1px 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.announcement-countdown .cd-colon {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.announcement-red-tag {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.platform-announcement-content .announcement-arrow {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 14px !important;
}

.platform-announcement-dismiss {
  color: rgba(255, 255, 255, 0.75) !important;
  transition: color 0.15s ease !important;
}
.platform-announcement-dismiss:hover {
  color: #ffffff !important;
  background: transparent !important;
}

/* 3. Left Tool Rail (1:1 Replica) */
.client-body .studio-shell.view-inspire .tool-rail {
  width: 68px !important;
  min-width: 68px !important;
  background: #0d0e11 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 16px 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.rail-brand-spark {
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}

.sparkle-svg-icon {
  width: 28px !important;
  height: 28px !important;
  filter: drop-shadow(0 2px 8px rgba(0, 150, 255, 0.4)) !important;
}

.rail-navigation {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-top: 36px !important;
  width: 100% !important;
  align-items: center !important;
}

.client-body .studio-shell.view-inspire .rail-button {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  color: #8c9099 !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

.client-body .studio-shell.view-inspire .rail-button .ui-icon {
  width: 20px !important;
  height: 20px !important;
}

.client-body .studio-shell.view-inspire .rail-button span {
  font-size: 11px !important;
  font-weight: 500 !important;
}

.client-body .studio-shell.view-inspire .rail-button.active,
.client-body .studio-shell.view-inspire .rail-button:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Octo button styling with beta tag */
.rail-button-octo {
  position: relative !important;
}
.octo-icon-box {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #8c9099 !important;
  border-radius: 6px !important;
  display: grid !important;
  place-items: center !important;
  transition: border-color 0.2s ease !important;
}
.octo-circle-inner {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #8c9099 !important;
  transition: background-color 0.2s ease !important;
}
.rail-button-octo:hover .octo-icon-box {
  border-color: #ffffff !important;
}
.rail-button-octo:hover .octo-circle-inner {
  background: #ffffff !important;
}
.octo-badge {
  font-size: 9px !important;
  color: #4da6ff !important;
  margin-top: -2px !important;
}

/* Rail Bottom: VIP badge, Notification, 3D and Avatar */
.client-body .studio-shell.view-inspire .rail-bottom {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
}

.rail-member-pill {
  width: 54px !important;
  min-width: 54px !important;
  background: #151515 !important;
  border: 1px solid #303030 !important;
  border-radius: 10px !important;
  padding: 5px 3px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.member-tag-text {
  font-size: 9px !important;
  color: #d1d1d1 !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
}

.member-credit-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  min-width: 0 !important;
}

.credit-num {
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

.credit-sparkle {
  color: #ffffff !important;
  font-size: 9px !important;
}

.member-rank-title {
  font-size: 9px !important;
  color: #969696 !important;
  margin-top: 1px !important;
  max-width: 48px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
}

.rail-notification-button {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  color: #8c9099 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
}
.rail-notification-button .ui-icon {
  width: 20px !important;
  height: 20px !important;
}
.rail-badge-count {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  background: #969696 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: grid !important;
  place-items: center !important;
}

.rail-3d-button {
  background: transparent !important;
  border: none !important;
  color: #8c9099 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
}
.rail-3d-button:hover {
  color: #ffffff !important;
}

.home-avatar-button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 4. Main Stage Layout & Header */
.client-body:has(.studio-shell.view-inspire) .inspiration-home-stage {
  padding: clamp(24px, 4vh, 48px) clamp(16px, 3.5vw, 64px) 80px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: #0d0e11 !important;
}

.client-body:has(.studio-shell.view-inspire) .inspiration-home-heading {
  margin-bottom: clamp(16px, 2.5vh, 28px) !important;
  text-align: center !important;
}

.client-body:has(.studio-shell.view-inspire) .inspiration-home-heading h1 {
  font-size: clamp(22px, 2.4vw, 32px) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  letter-spacing: 0.02em !important;
}

.hero-mode-switch {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: transparent !important;
  border: none !important;
  color: #d1d1d1 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  cursor: pointer !important;
  padding: 0 4px !important;
}
.hero-mode-switch:hover {
  color: #f2f2f2 !important;
}
.hero-mode-arrow .ui-icon {
  width: 0.7em !important;
  height: 0.7em !important;
}

/* 5. Central Prompt Composer (1:1 Replica) */
.client-body:has(.studio-shell.view-inspire) .inspiration-home-generation {
  width: min(960px, 92vw) !important;
  background: #18191c !important;
  border: 1px solid #282a2e !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
  padding: 14px 18px 12px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  height: auto !important;
  min-height: auto !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-main {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  min-height: 80px !important;
  padding: 0 !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .attach-button {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  background: #23252a !important;
  border: 1px dashed rgba(255, 255, 255, 0.15) !important;
  color: #7b808a !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .attach-button:not(.has-reference)::after {
  display: none !important;
}
.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .attach-button:hover {
  background: #2b2d33 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .prompt-rich-editor {
  min-height: 72px !important;
  height: auto !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #e5e7eb !important;
  padding: 4px 0 !important;
}
.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .prompt-rich-editor:empty::before {
  color: #636773 !important;
  font-size: 13.5px !important;
}

/* Composer Toolbar inside prompt box */
.home-composer-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: none !important;
  padding-top: 4px !important;
  min-height: 38px !important;
}

.home-composer-options {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.home-agent-mode-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #202227 !important;
  border: 1px solid #2e3138 !important;
  border-radius: 8px !important;
  padding: 5px 10px !important;
  color: #d1d1d1 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}
.home-agent-mode-trigger .mode-icon-glow {
  color: #d1d1d1 !important;
  display: flex !important;
}

.home-toolbar-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #202227 !important;
  border: 1px solid #2e3138 !important;
  border-radius: 8px !important;
  padding: 5px 11px !important;
  color: #d1d5db !important;
  font-size: 12.5px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.home-toolbar-pill:hover {
  background: #282a30 !important;
  border-color: #3f434d !important;
  color: #ffffff !important;
}

.home-toolbar-pill .ui-icon {
  width: 14px !important;
  height: 14px !important;
  color: #9ca3af !important;
}

.home-composer-submit {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.home-send-circle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #2c2e35 !important;
  border: 1px solid #3d4049 !important;
  color: #9ca3af !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.home-send-circle:hover {
  background: #d1d1d1 !important;
  color: #ffffff !important;
  border-color: #d1d1d1 !important;
}

/* 6. Feature Cards Grid (Seedance 2.5, 5.0 Pro, etc.) */
.client-body:has(.studio-shell.view-inspire) .inspiration-home-features {
  width: min(960px, 92vw) !important;
  margin-top: clamp(14px, 2vh, 22px) !important;
}

.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

.home-feature-card {
  height: 64px !important;
  min-height: 64px !important;
  background: #18191c !important;
  border: 1px solid #26282e !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 14px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease !important;
}
.home-feature-card:hover {
  background: #202227 !important;
  border-color: #383c45 !important;
  transform: translateY(-2px) !important;
}

.home-feature-badge {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  overflow: hidden !important;
}
.badge-blue {
  background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
  font-size: 15px !important;
}
.badge-cyan {
  background: linear-gradient(135deg, #7c3aed, #ec4899) !important;
  font-size: 13px !important;
}
.badge-cyan small {
  font-size: 8px !important;
  transform: scale(0.85) !important;
}

/* 图片模型的角标是两行 "IMG / 2"：正文更宽、下行是单字，
   沿用 PRO 那套缩小规则会让下面的数字糊成一团，这里单独放大一档。 */
.badge-cyan.badge-image2 strong {
  font-size: 12px !important;
  letter-spacing: -0.2px !important;
}
.badge-cyan.badge-image2 small {
  font-size: 10px !important;
  transform: none !important;
}
/* 缩略图式角标：图片铺满整个圆角方块，不受 padding 影响。
   配合 server.js 里补上的 .svg MIME 映射，SVG 才能正常渲染。 */
.badge-thumb {
  padding: 0 !important;
  background: #171a1f !important;
}
.badge-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.home-feature-card div strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
.home-feature-card div p {
  margin: 2px 0 0 !important;
  color: #7d828f !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

/* 7. Gallery Discovery Nav & Section */
.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-section {
  width: min(1600px, 94vw) !important;
  margin-top: clamp(28px, 4vh, 48px) !important;
}

.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: none !important;
  margin-bottom: 16px !important;
}

.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav nav button {
  background: transparent !important;
  border: none !important;
  color: #8c9099 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.15s ease !important;
}
.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav nav button.active {
  background: #23252a !important;
  color: #ffffff !important;
}
.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav nav button:hover:not(.active) {
  color: #ffffff !important;
}

.home-discovery-search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #18191c !important;
  border: 1px solid #26282e !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  width: 180px !important;
  margin-left: 16px !important;
}
.home-discovery-search .ui-icon {
  width: 14px !important;
  height: 14px !important;
  color: #757a87 !important;
}
.home-discovery-search input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  width: 100% !important;
}
.home-discovery-search input::placeholder {
  color: #757a87 !important;
}

.client-body:has(.studio-shell.view-inspire) .inspiration-published-link {
  margin-left: auto !important;
  color: #8c9099 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}
.client-body:has(.studio-shell.view-inspire) .inspiration-published-link:hover {
  color: #ffffff !important;
}

/* 8. Gallery Grid 1:1 Rounded Cards & Seamless Adaptive Layout */
.client-body:has(.studio-shell.view-inspire) .inspiration-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 12px !important;
}

body.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-section > .inspiration-grid > .inspiration-card {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #18191c !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
body.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-section > .inspiration-grid > .inspiration-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5) !important;
}

body.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-section > .inspiration-grid > .inspiration-card > .inspiration-media {
  aspect-ratio: 9 / 16 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* 9. Floating Customer Service Button (Bottom Right Headphones Circle) */
.home-headset-circle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #202227 !important;
  border: 1px solid #2e3138 !important;
  color: #8c9099 !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.home-headset-circle:hover {
  background: #2b2e35 !important;
  color: #ffffff !important;
  border-color: #3e434e !important;
}
.home-headset-circle em {
  display: none !important;
}
.home-headset-circle .ui-icon {
  width: 20px !important;
  height: 20px !important;
}

/* 10. Responsive Adaptive Rules (High & Low Resolutions & Small Screens) */

/* Ultra High-Resolution (4K / 2K, width >= 1920px) */
@media (min-width: 1920px) {
  .client-body:has(.studio-shell.view-inspire) .inspiration-home-generation,
  .client-body:has(.studio-shell.view-inspire) .inspiration-home-features {
    width: 1040px !important;
  }
  .client-body:has(.studio-shell.view-inspire) .inspiration-home-generation {
    width: 867px !important;
  }
  .client-body:has(.studio-shell.view-inspire) .inspiration-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 16px !important;
  }
}

/* Standard Laptops & Tablets Landscape (1024px - 1366px) */
@media (max-width: 1366px) {
  .client-body:has(.studio-shell.view-inspire) .inspiration-home-generation,
  .client-body:has(.studio-shell.view-inspire) .inspiration-home-features {
    width: 75vw !important;
  }
  .client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }
  .home-feature-card {
    padding: 0 10px !important;
  }
  .home-feature-card div strong {
    font-size: 12px !important;
  }
}

/* Medium Screens & Small Laptops (768px - 1024px) */
@media (max-width: 1024px) {
  .client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .client-body:has(.studio-shell.view-inspire) .inspiration-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Mobile & Low Resolution (< 768px) */
@media (max-width: 768px) {
  body.client-body .studio-shell.view-inspire {
    grid-template-columns: 1fr !important;
  }
  .client-body .studio-shell.view-inspire .tool-rail {
    display: none !important;
  }
  .client-body:has(.studio-shell.view-inspire) .inspiration-home-stage {
    padding: 20px 12px 60px !important;
  }
  .client-body:has(.studio-shell.view-inspire) .inspiration-home-generation,
  .client-body:has(.studio-shell.view-inspire) .inspiration-home-features {
    width: 100% !important;
  }
  .client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid {
    grid-template-columns: 1fr !important;
  }
  .client-body:has(.studio-shell.view-inspire) .inspiration-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .home-composer-options {
    flex-wrap: wrap !important;
  }
}



/* ==========================================================================
   11. Create/Generation Page (View-Create) 1:1 Replica Rules
   ========================================================================== */

/* Shell grid: left rail + conversation rail + workspace remains; ensure the
   workspace surface uses the same deep base as the reference. */
body.client-body .studio-shell.view-create {
  background-color: #0d0e11 !important;
}

/* The floating composition bar inside the workspace follows the reference:
   a dark rounded surface anchored toward the workspace bottom edge. */
.client-body:has(.studio-shell.view-create) .prompt-composer {
  bottom: 20px !important;
  width: min(1010px, calc(100% - 48px)) !important;
  min-height: 168px !important;
  background: #18191c !important;
  border: 1px solid #26282e !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42) !important;
}

.client-body:has(.studio-shell.view-create) .prompt-composer:focus-within {
  border-color: #34373f !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(70, 130, 200, 0.18) !important;
}

body.client-body:has(.studio-shell.view-create) .prompt-composer:has(
  .model-picker-menu,
  .generation-spec-panel,
  .duration-picker-panel,
  .custom-select-menu
) {
  z-index: 90 !important;
}

body.client-body:has(.studio-shell.view-create):has(
  .model-picker-menu,
  .generation-spec-panel,
  .duration-picker-panel,
  .custom-select-menu
) .customer-service-widget {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep the composer main area as: [ + reference tile ] [ rich prompt editor ] */
.client-body:has(.studio-shell.view-create) .prompt-composer .composer-main {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  min-height: 92px !important;
  padding: 14px 18px 4px !important;
}

.client-body:has(.studio-shell.view-create) .prompt-composer .attach-button:not(.has-reference) {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  background: #23252a !important;
  border: 1px dashed rgba(255, 255, 255, 0.16) !important;
  color: #7b808a !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.client-body:has(.studio-shell.view-create) .prompt-composer .attach-button:not(.has-reference)::after {
  display: none !important;
}
.client-body:has(.studio-shell.view-create) .prompt-composer .attach-button:not(.has-reference):hover {
  background: #2b2d33 !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #ffffff !important;
}
.client-body:has(.studio-shell.view-create) .prompt-composer .attach-button.has-reference,
.client-body:has(.studio-shell.view-create) .prompt-composer .attach-button.has-reference:hover {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.client-body:has(.studio-shell.view-create) .prompt-composer .prompt-rich-editor {
  min-height: 84px !important;
  height: auto !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #e5e7eb !important;
  padding: 2px 0 !important;
}
.client-body:has(.studio-shell.view-create) .prompt-composer .prompt-rich-editor:empty::before {
  color: #636773 !important;
  font-size: 13.5px !important;
}

/* Create-page toolbar: image/video mode pills per reference (our model + price) */
.create-composer-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  border-top: none !important;
  padding: 0 18px 14px !important;
  gap: 12px !important;
}

.create-composer-options {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.create-composer-options::-webkit-scrollbar {
  display: none !important;
}

.create-composer-options .select-chip.custom-select {
  height: 30px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.create-composer-options .custom-select-trigger {
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 0 8px !important;
  background: transparent !important;
  border-radius: 8px !important;
  color: #e5e7eb !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.create-composer-options .create-mode-trigger:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
.create-composer-options .create-mode-trigger {
  color: #4c9fe6 !important;
}
.create-composer-options .create-mode-trigger .mode-icon-glow {
  display: inline-flex !important;
  color: #4c9fe6 !important;
}
.create-composer-options .create-mode-trigger .mode-icon-glow .ui-icon {
  width: 15px !important;
  height: 15px !important;
}
.create-composer-options .custom-select-chevron {
  display: inline-flex !important;
  color: #6b7280 !important;
}
.create-composer-options .custom-select-chevron .ui-icon {
  width: 12px !important;
  height: 12px !important;
}

.create-toolbar-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 30px !important;
  padding: 0 9px !important;
  background: #1d2025 !important;
  border: 1px solid #2b2e34 !important;
  border-radius: 8px !important;
  color: #c8ccd4 !important;
  font-size: 12.5px !important;
  font-weight: 450 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  flex: 0 0 auto !important;
}
.create-toolbar-pill:hover {
  background: #26292f !important;
  border-color: #3a3e46 !important;
  color: #f2f4f7 !important;
}
.create-pill-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #7b808a !important;
}
.create-pill-icon .ui-icon {
  width: 14px !important;
  height: 14px !important;
}
.create-pill-label {
  max-width: 168px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.create-pill-label strong {
  font-weight: 600 !important;
  color: #dfe3e8 !important;
}
.create-pill-star {
  display: inline-flex !important;
  color: #4c9fe6 !important;
  transform: translateY(0.5px) !important;
}
.create-pill-star .ui-icon {
  width: 13px !important;
  height: 13px !important;
}
.create-spec-glyph i,
.create-toolbar-pill .spec-ratio-glyph i {
  display: block !important;
  background: #7b808a !important;
  border-radius: 2px !important;
}
.create-count-pill .create-pill-label {
  color: #9aa0ab !important;
}
.create-mention-pill {
  color: #9aa0ab !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.create-textsize-pill {
  color: #9aa0ab !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.create-composer-submit {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
}
.composer-price-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}
.composer-price {
  color: #c2c7cf !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}
.composer-upgrade {
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  border: none !important;
  border-radius: 7px !important;
  background: #23262c !important;
  color: #e6e8ec !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}
.composer-upgrade:hover {
  background: #2d3037 !important;
}

/* Video-mode attach tile shows a small “参考内容” caption below the + */
.client-body:has(.studio-shell.view-create) .prompt-composer .attach-button {
  position: relative !important;
}
.attach-tile-caption {
  position: absolute !important;
  left: 50% !important;
  bottom: 5px !important;
  transform: translateX(-50%) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  color: #8c9099 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* Mobile / small-screen adaptive rules */
@media (max-width: 1280px) {
  .client-body:has(.studio-shell.view-create) .prompt-composer {
    width: calc(100% - 32px) !important;
  }
  .client-body:has(.studio-shell.view-create) .prompt-composer .composer-main {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    padding: 12px 14px 4px !important;
  }
  .client-body:has(.studio-shell.view-create) .prompt-composer .attach-button {
    width: 44px !important;
    height: 44px !important;
  }
}

/* Inspiration-home composer parity.
   The supplied references use one large card with mode-specific controls. Keep
   the real model/price/reference behavior from the create composer and scope
   the visual geometry to the logged-in inspiration page only. */
.client-body:has(.studio-shell.view-inspire) .inspiration-home-stage {
  padding-right: 24px !important;
  padding-left: 24px !important;
}

.client-body:has(.studio-shell.view-inspire) .inspiration-home-generation {
  /* Give long prompts more usable horizontal space on desktop. */
  width: min(1200px, 100%) !important;
  box-sizing: border-box !important;
  transform: translateX(calc(var(--home-rail-width) / -2)) !important;
  padding: 27px 0 9px !important;
  border: 1px solid #25272c !important;
  border-radius: 17px !important;
  background: #18191c !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24) !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer {
  height: 126px !important;
  gap: 0 !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-main {
  height: 88px !important;
  min-height: 88px !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 0 17px 6px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .attach-button:not(.has-reference) {
  width: 46px !important;
  height: 66px !important;
  min-height: 66px !important;
  align-self: start !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  place-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 10px 0 7px !important;
  border: 1px dashed rgba(255, 255, 255, .15) !important;
  border-radius: 9px !important;
  background: #23252a !important;
  color: #777c86 !important;
  transform: rotate(-7deg) !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .attach-button:not(.has-reference)::after {
  content: "参考内容" !important;
  display: block !important;
  color: #777c86 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .home-attach-icon .ui-icon {
  width: 18px !important;
  height: 18px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .prompt-rich-editor {
  height: 80px !important;
  min-height: 80px !important;
  padding: 3px 0 0 !important;
  color: #e2e4e8 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .prompt-rich-editor:empty::before {
  color: #666a73 !important;
  font-size: 13.5px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-toolbar {
  height: 38px !important;
  min-height: 38px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 17px !important;
  border-top: 0 !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-options {
  min-width: 0 !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 0 !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .home-agent-options {
  gap: 13px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-options > :is(
  .select-chip.custom-select,
  .create-toolbar-pill,
  .home-toolbar-pill
) {
  height: 30px !important;
  min-height: 30px !important;
  flex: 0 0 auto !important;
  gap: 5px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #c9cdd3 !important;
  font-size: 12.5px !important;
  font-weight: 450 !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .home-composer-options > .generation-mode-select {
  width: auto !important;
  min-width: 94px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .home-composer-options > .reference-mode-select {
  width: 112px !important;
  min-width: 112px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-options > :is(
  .create-toolbar-pill,
  .home-toolbar-pill
):hover,
.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .custom-select-trigger:hover {
  background: rgba(255, 255, 255, .055) !important;
  color: #f1f3f6 !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .custom-select-trigger {
  height: 30px !important;
  min-height: 30px !important;
  gap: 3px !important;
  padding: 0 4px !important;
  border-radius: 7px !important;
  color: #c9cdd3 !important;
  font-size: 12.5px !important;
  font-weight: 450 !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .custom-select-trigger-value {
  gap: 4px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .custom-select-chevron .ui-icon {
  width: 10px !important;
  height: 10px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .generation-mode-select .custom-select-trigger,
.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .create-mode-trigger {
  color: #4c9fe6 !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer :is(
  .create-mode-trigger .mode-icon-glow,
  .create-pill-star,
  .mode-icon-glow
) {
  color: #4c9fe6 !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer :is(
  .custom-select-trigger-value,
  .custom-select-trigger-value > span,
  .create-pill-label
) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .create-model-pill .create-pill-label {
  max-width: 176px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .create-spec-pill .create-pill-label {
  max-width: 144px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .create-pill-icon,
.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .custom-select-chevron,
.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .home-toolbar-pill > span {
  display: inline-flex !important;
  color: #8c929c !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .create-pill-icon .ui-icon,
.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .home-toolbar-pill > span .ui-icon,
.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .custom-select-trigger .ui-icon {
  width: 14px !important;
  height: 14px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-submit {
  height: 36px !important;
  gap: 12px !important;
  padding-left: 12px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-price-wrap {
  gap: 0 !important;
  color: #c8ccd2 !important;
  font-size: 12px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-price {
  color: #c8ccd2 !important;
  font-size: 12px !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-upgrade {
  display: none !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .send-button {
  width: 36px !important;
  height: 36px !important;
  background: #2b2d33 !important;
  border-color: #35383f !important;
  color: #9096a0 !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .send-button:hover {
  background: #d1d1d1 !important;
  border-color: #d1d1d1 !important;
  color: #fff !important;
}

@media (max-width: 1100px) {
  .client-body:has(.studio-shell.view-inspire) .inspiration-home-generation {
    width: min(1000px, calc(100vw - 56px)) !important;
    transform: translateX(calc(var(--home-rail-width) / -2)) !important;
  }
}

@media (max-width: 768px) {
  .client-body:has(.studio-shell.view-inspire) .inspiration-home-generation {
    width: calc(100vw - 24px) !important;
    transform: none !important;
    padding: 12px 0 8px !important;
    border-radius: 15px !important;
  }

  .client-body:has(.studio-shell.view-inspire) .home-prompt-composer {
    height: 124px !important;
  }

  .client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-main {
    height: 84px !important;
    min-height: 84px !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 0 12px 5px !important;
  }

  .client-body:has(.studio-shell.view-inspire) .home-prompt-composer .attach-button {
    width: 42px !important;
    height: 58px !important;
    min-height: 58px !important;
  }

  .client-body:has(.studio-shell.view-inspire) .home-prompt-composer .prompt-rich-editor,
  .client-body:has(.studio-shell.view-inspire) .home-prompt-composer .prompt-rich-editor:empty::before {
    font-size: 12px !important;
  }

  .client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-toolbar {
    height: 40px !important;
    min-height: 40px !important;
    flex-wrap: nowrap !important;
    padding: 0 12px !important;
  }

  .client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-options {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    order: 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-submit {
    margin-left: 0 !important;
    order: 1 !important;
    gap: 8px !important;
    padding-left: 6px !important;
  }
}

@media (max-width: 768px) {
  .client-body:has(.studio-shell.view-create) .prompt-composer {
    bottom: 12px !important;
    width: calc(100% - 20px) !important;
    min-height: 168px !important;
    border-radius: 16px !important;
  }
  .client-body:has(.studio-shell.view-create) .prompt-composer .composer-main {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px 12px 2px !important;
  }
  .client-body:has(.studio-shell.view-create) .prompt-composer .attach-button {
    width: 42px !important;
    height: 42px !important;
  }
  .create-composer-toolbar {
    padding: 0 12px 12px !important;
    gap: 8px !important;
  }
  .create-toolbar-pill {
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
  .create-composer-options .select-chip.custom-select,
  .create-composer-options .custom-select-trigger {
    height: 28px !important;
  }
  .composer-price-wrap {
    gap: 6px !important;
  }
  .composer-price {
    font-size: 12px !important;
  }
  .create-composer-submit {
    gap: 8px !important;
  }
  .create-composer-options {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
}

@media (max-width: 600px) {
  .client-body:has(.studio-shell.view-create) .prompt-composer {
    bottom: calc(56px + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 1920px) {
  .client-body:has(.studio-shell.view-create) .prompt-composer {
    width: 1040px !important;
  }
}

/* --------------------------------------------------------------------------
   Create workspace top-right toolbar replica
   -------------------------------------------------------------------------- */
.client-body .studio-shell.view-create .workspace-toolbar {
  gap: 2px !important;
  padding: 5px 7px !important;
  border-radius: 11px !important;
  background: #17191d !important;
  border: 1px solid #26282e !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3) !important;
}

.client-body .studio-shell.view-create .workspace-tool-pill {
  height: 34px !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #b8bdc6 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
}

.client-body .studio-shell.view-create .workspace-tool-pill:hover {
  background: #22252b !important;
  color: #ffffff !important;
}

.client-body .studio-shell.view-create .workspace-tool-pill .ui-icon {
  width: 16px !important;
  height: 16px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #9aa0aa !important;
}

.client-body .studio-shell.view-create .workspace-tool-pill .ui-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.client-body .studio-shell.view-create .workspace-tool-pill:hover .ui-icon {
  color: #ffffff !important;
}

.client-body .studio-shell.view-create .workspace-tool-pill > span {
  white-space: nowrap !important;
}

.client-body .studio-shell.view-create .workspace-tool-sep {
  width: 1px !important;
  height: 16px !important;
  background: #2c2f36 !important;
  margin: 0 2px !important;
  flex: none !important;
}

.client-body .studio-shell.view-create .workspace-assets-button .workspace-assets-icon .ui-icon {
  color: #9aa0aa !important;
}

.client-body .studio-shell.view-create .workspace-assets-button:hover .workspace-assets-icon .ui-icon {
  color: #ffffff !important;
}

/* Search popover + shared dropdown menu open below the toolbar, right aligned. */
.client-body .studio-shell.view-create .workspace-tool-search-popover:not([hidden]) {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  width: 200px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 10px !important;
  border: 1px solid #2b2e35 !important;
  border-radius: 9px !important;
  background: #1b1d22 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42) !important;
  z-index: 60 !important;
}

.client-body .studio-shell.view-create .workspace-tool-search-popover .workspace-tool-search-icon .ui-icon {
  color: #9aa0aa !important;
}

.client-body .studio-shell.view-create .workspace-tool-search-popover input {
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 13px !important;
}

.client-body .studio-shell.view-create .workspace-tool-search-popover input::placeholder {
  color: #6a707a !important;
}

.client-body .studio-shell.view-create .workspace-tool-menu:not([hidden]) {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  min-width: 148px !important;
  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  border: 1px solid #2b2e35 !important;
  border-radius: 10px !important;
  background: #1b1d22 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42) !important;
  z-index: 60 !important;
}

.client-body .studio-shell.view-create .workspace-tool-menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #c2c7cf !important;
  font-size: 13px !important;
  text-align: left !important;
  cursor: pointer !important;
}

.client-body .studio-shell.view-create .workspace-tool-menu-item:hover {
  background: #23262d !important;
  color: #ffffff !important;
}

.client-body .studio-shell.view-create .workspace-tool-menu-item.active {
  color: #d6e9ff !important;
  font-weight: 600 !important;
}

.client-body .studio-shell.view-create .workspace-tool-menu-check .ui-icon {
  width: 14px !important;
  height: 14px !important;
  color: #4c9fe6 !important;
}

/* Narrow screens: keep the toolbar right aligned but compact enough to fit. */
@media (max-width: 1280px) {
  .client-body .studio-shell.view-create .workspace-toolbar {
    padding: 4px 6px !important;
  }
  .client-body .studio-shell.view-create .workspace-tool-pill {
    padding: 0 8px !important;
    font-size: 12.5px !important;
  }
}

@media (max-width: 768px) {
  .client-body .studio-shell.view-create .workspace-toolbar {
    left: auto !important;
    right: 14px !important;
    top: 10px !important;
    padding: 4px 5px !important;
  }
  .client-body .studio-shell.view-create .workspace-tool-pill {
    padding: 0 7px !important;
    gap: 4px !important;
    font-size: 12px !important;
  }
  .client-body .studio-shell.view-create .workspace-tool-sep {
    margin: 0 1px !important;
  }
}

/* The stock stylesheet hides the conversation rail on narrow screens while
   leaving the three-column grid track reserved, which collapsed the create
   workspace into the middle column. Collapse the grid too so the generation
   feed uses the full available width on tablet/phone viewports. */
@media (min-width: 601px) and (max-width: 820px) {
  body.client-body .studio-shell.view-create:not(.view-inspire):not(.view-canvas) {
    grid-template-columns: var(--client-rail-width, 68px) minmax(0, 1fr) !important;
  }
  body.client-body .studio-shell.view-create .conversation-sidebar {
    display: none !important;
  }
}

/* True phone layout: the rail is hidden and the mobile bottom nav takes over,
   so the create workspace must span the full viewport width. */
@media (max-width: 600px) {
  body.client-body .studio-shell.view-create:not(.view-inspire):not(.view-canvas) {
    grid-template-columns: 1fr !important;
  }
  body.client-body .studio-shell.view-create .tool-rail {
    display: none !important;
  }
}

/* Keep one task readable as a single flow: prompt and settings first, the
   generated media below it, then its actions. */
body.client-body:has(.studio-shell.view-create) .generation-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
body.client-body:has(.studio-shell.view-create) .generation-item > .generation-results {
  order: 1 !important;
  margin-left: 0 !important;
}
body.client-body:has(.studio-shell.view-create) .generation-item > .generation-primary-actions {
  order: 2 !important;
  margin-top: 4px !important;
}
body.client-body:has(.studio-shell.view-create) .generation-item > .generation-meta {
  order: 0 !important;
  margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Agent-mode prompt composer: attach tile + pill toolbar per reference
   (no voice button; our own text-model selector, visually matching the
   create page's dark pill language).
   -------------------------------------------------------------------------- */
.client-body:has(.studio-shell.view-create) .prompt-composer.agent-composer {
  width: min(900px, calc(100% - 64px)) !important;
  min-height: 168px !important;
  border-radius: 18px !important;
}

.client-body:has(.studio-shell.view-create) .agent-composer-main {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  min-height: 104px !important;
  padding: 16px 18px 4px !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-main textarea {
  width: 100% !important;
  min-height: 92px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #f2f3f5 !important;
  font: inherit !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  resize: none !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-main textarea::placeholder {
  color: #7d838d !important;
}

.client-body:has(.studio-shell.view-create) .agent-attach-button {
  width: 54px !important;
  height: 74px !important;
  align-self: start !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #2b2e34 !important;
  border-radius: 8px !important;
  background: #1d2025 !important;
  color: #7b808a !important;
  transform: rotate(-3deg) !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.client-body:has(.studio-shell.view-create) .agent-attach-button:hover {
  background: #26292f !important;
  border-color: #3a3e46 !important;
  color: #f2f4f7 !important;
}
.client-body:has(.studio-shell.view-create) .agent-attach-button .ui-icon {
  width: 20px !important;
  height: 20px !important;
}

.client-body:has(.studio-shell.view-create) .agent-composer-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  gap: 12px !important;
  padding: 4px 18px 14px !important;
  border-top: none !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-options {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-options::-webkit-scrollbar {
  display: none !important;
}

.client-body:has(.studio-shell.view-create) .agent-composer-options .select-chip.custom-select {
  height: 30px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-options .custom-select-trigger {
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 0 8px !important;
  background: transparent !important;
  border-radius: 8px !important;
  color: #e5e7eb !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-options .custom-select-trigger:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-options .create-mode-trigger {
  color: #4c9fe6 !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-options .create-mode-trigger .mode-icon-glow {
  display: inline-flex !important;
  color: #4c9fe6 !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-options .create-mode-trigger .mode-icon-glow .ui-icon {
  width: 15px !important;
  height: 15px !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-options .custom-select-chevron {
  display: inline-flex !important;
  color: #6b7280 !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-options .custom-select-chevron .ui-icon {
  width: 12px !important;
  height: 12px !important;
}

.client-body:has(.studio-shell.view-create) .agent-auto-pill,
.client-body:has(.studio-shell.view-create) .agent-skill-pill {
  color: #c8ccd4 !important;
}
.client-body:has(.studio-shell.view-create) .agent-auto-pill[aria-pressed="true"] {
  color: #4c9fe6 !important;
  background: rgba(76, 159, 230, 0.1) !important;
}
.client-body:has(.studio-shell.view-create) .agent-auto-pill[aria-pressed="true"] .create-pill-icon {
  color: #4c9fe6 !important;
}

.client-body:has(.studio-shell.view-create) .agent-composer-options .agent-model-select {
  height: 30px !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 9px !important;
  background: #1d2025 !important;
  border: 1px solid #2b2e34 !important;
  border-radius: 8px !important;
  color: #c8ccd4 !important;
  font-size: 12.5px !important;
  white-space: nowrap !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-options .agent-model-select:hover {
  background: #26292f !important;
  border-color: #3a3e46 !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-options .agent-model-label {
  display: inline-flex !important;
  color: #7b808a !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-options .agent-model-label .ui-icon {
  width: 14px !important;
  height: 14px !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-options .agent-model-select select {
  max-width: 156px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #dfe3e8 !important;
  font: inherit !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-options .agent-model-select select option {
  background: #1b1e23 !important;
  color: #e8edf2 !important;
}

.client-body:has(.studio-shell.view-create) .agent-composer-submit {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}
.client-body:has(.studio-shell.view-create) .agent-composer-submit .home-send-circle {
  width: 36px !important;
  height: 36px !important;
}

/* Narrow / high-resolution adaptation mirrors the create page toolbar. */
@media (max-width: 768px) {
  .client-body:has(.studio-shell.view-create) .prompt-composer.agent-composer {
    width: calc(100% - 20px) !important;
    min-height: 160px !important;
  }
  .client-body:has(.studio-shell.view-create) .agent-composer-main {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px 12px 2px !important;
  }
  .client-body:has(.studio-shell.view-create) .agent-attach-button {
    width: 44px !important;
    height: 48px !important;
  }
  .client-body:has(.studio-shell.view-create) .agent-composer-toolbar {
    padding: 2px 12px 12px !important;
    gap: 8px !important;
  }
  .client-body:has(.studio-shell.view-create) .agent-composer-options .agent-model-select select {
    max-width: 110px !important;
  }
  .client-body:has(.studio-shell.view-create) .agent-composer-options {
    flex-wrap: nowrap !important;
  }
}

@media (min-width: 1920px) {
  .client-body:has(.studio-shell.view-create) .prompt-composer.agent-composer {
    width: 1040px !important;
  }
}

/* The compact composer has one submit action. Keep the create-page theme
   from restoring the full toolbar or its two-column editor layout. */
.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact {
  min-height: 68px !important;
  border-radius: 14px !important;
}
@media (min-width: 601px) {
  /* Keep the collapsed navigation input 20% narrower than the 1010px shell,
     while tablet widths continue to use the existing responsive track. */
  .client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact {
    width: min(808px, calc(100% - 48px)) !important;
  }
}
.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-main {
  grid-template-columns: 48px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  min-height: 66px !important;
  padding: 7px 12px !important;
}
.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .prompt-rich-editor {
  min-height: 48px !important;
  height: 48px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  line-height: 48px !important;
}
.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-toolbar,
.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .frame-upload-grid,
.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .reference-strip,
.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .prompt-reference-count {
  display: none !important;
}
.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-compact-submit {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
}
.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .attach-button,
.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-mode-icon {
  width: 42px !important;
  height: 48px !important;
}

/* Final generation-page polish: keep image, video and Agent composers on one
   control rhythm without changing their existing behavior or data. */
body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) {
  --composer-polish-surface: #18191c;
  --composer-polish-control: #202226;
  --composer-polish-line: rgba(255, 255, 255, 0.09);
  --composer-polish-line-strong: rgba(255, 255, 255, 0.15);
  border-color: #303238 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.44) !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
):focus-within {
  border-color: #41454d !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(76, 159, 230, 0.16) !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.composer-main, .agent-composer-main) {
  gap: 14px !important;
  padding: 18px 20px 7px !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.prompt-rich-editor, .agent-composer-main textarea) {
  min-height: 82px !important;
  padding: 0 !important;
  color: #f1f3f6 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.prompt-rich-editor:empty::before, .agent-composer-main textarea::placeholder) {
  color: #888f9a !important;
  opacity: 1 !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.attach-button:not(.has-reference), .agent-attach-button) {
  width: 56px !important;
  height: 72px !important;
  align-self: start !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  place-items: center !important;
  gap: 5px !important;
  overflow: visible !important;
  border: 1px solid var(--composer-polish-line) !important;
  border-radius: 10px !important;
  background: #202226 !important;
  color: #8c929d !important;
  padding: 14px 4px 10px !important;
  transform: rotate(-4deg) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.attach-button:not(.has-reference), .agent-attach-button):hover {
  border-color: var(--composer-polish-line-strong) !important;
  background: #282b30 !important;
  color: #f2f4f7 !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.home-attach-icon, .agent-attach-icon) {
  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.home-attach-icon, .agent-attach-icon) .ui-icon {
  width: 20px !important;
  height: 20px !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.attach-tile-caption, .agent-attach-caption) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  color: #8c929d !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.composer-toolbar, .agent-composer-toolbar) {
  min-height: 60px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 20px 14px !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.composer-options, .agent-composer-options) {
  min-width: 0 !important;
  gap: 5px !important;
  padding: 2px 1px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.composer-options, .agent-composer-options)::-webkit-scrollbar {
  display: none !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(
  .create-toolbar-pill,
  .agent-model-select,
  .composer-options .select-chip.custom-select
) {
  height: 32px !important;
  min-height: 32px !important;
  border: 1px solid var(--composer-polish-line) !important;
  border-radius: 9px !important;
  background: var(--composer-polish-control) !important;
  color: #d6dae1 !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(
  .create-toolbar-pill,
  .custom-select-trigger,
  .agent-model-select
) {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.create-toolbar-pill, .custom-select-trigger) {
  gap: 6px !important;
  padding: 0 9px !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.create-toolbar-pill, .custom-select-trigger, .agent-model-select):hover {
  border-color: var(--composer-polish-line-strong) !important;
  background: #282b31 !important;
  color: #ffffff !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(
  .create-toolbar-pill[aria-expanded="true"],
  .custom-select-trigger[aria-expanded="true"],
  .create-toolbar-pill[aria-pressed="true"]
) {
  border-color: rgba(76, 159, 230, 0.42) !important;
  background: rgba(76, 159, 230, 0.1) !important;
  color: #e8f3ff !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.create-toolbar-pill, .custom-select-trigger, .agent-model-select):focus-visible {
  outline: 2px solid rgba(76, 159, 230, 0.5) !important;
  outline-offset: 2px !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.generation-mode-select, .reference-mode-select) .custom-select-trigger-value > span {
  font-size: 12px !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) .create-mode-trigger {
  color: #57a8ee !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.create-pill-label, .model-picker-current strong) {
  max-width: 190px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.create-count-pill, .create-mention-pill, .create-textsize-pill) {
  min-width: 32px !important;
  justify-content: center !important;
  padding-inline: 7px !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.create-pill-icon, .agent-model-label) {
  color: #858b96 !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) .agent-model-select {
  max-width: 280px !important;
  padding: 0 9px !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) .agent-model-select select {
  max-width: 224px !important;
  font-size: 12px !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.composer-submit, .agent-composer-submit) {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  flex: 0 0 auto !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized) .composer-submit {
  padding-left: 14px !important;
  border-left: 1px solid var(--composer-polish-line) !important;
  background: var(--composer-polish-surface) !important;
  box-shadow: -14px 0 18px rgba(24, 25, 28, 0.96) !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.composer-submit, .agent-composer-submit) .home-send-circle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) .composer-price {
  color: #aeb4bd !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized) .prompt-reference-count {
  right: 0 !important;
  bottom: 2px !important;
  color: #777f8a !important;
  font-size: 10px !important;
}

@media (max-width: 1280px) {
  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) :is(.composer-main, .agent-composer-main) {
    gap: 12px !important;
    padding: 16px 16px 7px !important;
  }

  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) :is(.composer-toolbar, .agent-composer-toolbar) {
    padding: 7px 14px 12px !important;
  }
}

@media (max-width: 768px) {
  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) :is(.composer-main, .agent-composer-main) {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 14px 12px 6px !important;
  }

  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) :is(.attach-button:not(.has-reference), .agent-attach-button) {
    width: 48px !important;
    height: 64px !important;
    padding: 11px 3px 8px !important;
  }

  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) :is(.prompt-rich-editor, .agent-composer-main textarea) {
    min-height: 72px !important;
    font-size: 13px !important;
  }

  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) :is(.composer-toolbar, .agent-composer-toolbar) {
    padding: 6px 12px 11px !important;
    gap: 8px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized) .composer-submit {
    padding-left: 9px !important;
  }

  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) :is(.create-toolbar-pill, .agent-model-select, .composer-options .select-chip.custom-select) {
    height: 30px !important;
    min-height: 30px !important;
  }

  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) :is(.create-pill-label, .model-picker-current strong) {
    max-width: 128px !important;
  }

  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) .agent-model-select {
    max-width: 210px !important;
  }

  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) .agent-model-select select {
    max-width: 158px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) :is(.attach-button, .agent-attach-button, .create-toolbar-pill, .custom-select-trigger, .agent-model-select) {
    transition: none !important;
  }
}

/* Final shared composer geometry for image, video and Agent. The three modes
   use the same frame and vertical rhythm; mode-specific controls only change
   inside the toolbar. */
body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) {
  width: min(var(--generation-composer-max-width), var(--generation-composer-responsive-width)) !important;
  min-height: 168px !important;
  border-color: #303238 !important;
  border-radius: 18px !important;
  background: #17191d !important;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.5) !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.composer-main, .agent-composer-main) {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 16px !important;
  min-height: 108px !important;
  padding: 18px 24px 7px !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.prompt-rich-editor, .agent-composer-main textarea) {
  min-height: 82px !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.attach-button:not(.has-reference), .agent-attach-button) {
  width: 54px !important;
  height: 74px !important;
  align-self: start !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  place-items: center !important;
  gap: 5px !important;
  padding: 12px 4px 8px !important;
  border: 1px solid #30333a !important;
  border-radius: 9px !important;
  background: #202226 !important;
  color: #858b96 !important;
  transform: rotate(-4deg) !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.attach-tile-caption, .agent-attach-caption) {
  display: block !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  color: #858b96 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.composer-toolbar, .agent-composer-toolbar) {
  min-height: 56px !important;
  gap: 12px !important;
  padding: 5px 22px 15px !important;
  border-top: 0 !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.composer-options, .agent-composer-options) {
  gap: 6px !important;
  padding: 1px 0 !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
  #agentTaskForm
) :is(.composer-submit, .agent-composer-submit) {
  gap: 10px !important;
  padding-left: 12px !important;
}

@media (max-width: 1280px) {
  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) {
    width: min(1040px, calc(100% - 40px)) !important;
  }
}

@media (max-width: 768px) {
  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) {
    width: calc(100% - 20px) !important;
    min-height: 164px !important;
  }

  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) :is(.composer-main, .agent-composer-main) {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 14px 12px 6px !important;
  }

  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) :is(.attach-button:not(.has-reference), .agent-attach-button) {
    width: 48px !important;
    height: 64px !important;
  }

  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized),
    #agentTaskForm
  ) :is(.composer-toolbar, .agent-composer-toolbar) {
    padding: 5px 12px 12px !important;
    gap: 8px !important;
  }
}

/* Keep homepage composer popovers in the viewport's top layer and attach them
   to the exact trigger. Removing the page transform prevents a later sibling
   section from painting over an open picker. */
.client-body:has(.studio-shell.view-inspire) .inspiration-home-generation {
  transform: none !important;
  left: calc(-4px - (var(--home-rail-width) / 2)) !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer {
  z-index: auto !important;
}

.client-body:has(.studio-shell.view-inspire) .inspiration-home-stage {
  /* Fixed composer pickers must participate in the page-level stack so the
     navigation rail and later content cannot cover them. */
  isolation: auto !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer :is(
  .model-picker-menu,
  .generation-spec-panel,
  .duration-picker-panel,
  .custom-select-menu
) {
  position: fixed !important;
  z-index: 1200 !important;
  transform: none !important;
}

.client-body:has(.studio-shell.view-inspire) .home-prompt-composer :is(
  .model-picker-menu,
  .generation-spec-panel,
  .duration-picker-panel,
  .custom-select-menu
):not([data-popover-positioned="true"]) {
  visibility: hidden;
}

/* Composer pickers share one compact scale on both Inspiration and Create. */
@media (min-width: 769px) {
  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .generation-spec-panel {
    width: min(404px, calc(100vw - 24px)) !important;
    max-height: min(500px, calc(100vh - 24px)) !important;
    gap: 18px !important;
    border-radius: 16px !important;
    padding: 18px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .spec-section {
    gap: 10px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] :is(
    .spec-ratio-grid,
    .spec-resolution-grid,
    .spec-count-grid
  ) {
    gap: 4px !important;
    padding: 4px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .spec-ratio-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .spec-option {
    min-height: 44px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .ratio-option {
    min-height: 72px !important;
    gap: 7px !important;
    padding: 6px 4px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-picker-menu {
    width: min(300px, calc(100vw - 24px)) !important;
    max-height: min(350px, calc(100vh - 24px)) !important;
    gap: 0 !important;
    border-radius: 14px !important;
    padding: 8px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-picker-menu-header {
    min-height: 34px !important;
    padding: 0 4px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-picker-menu-header strong {
    font-size: 12px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-picker-category-tabs {
    min-height: 28px !important;
    gap: 3px !important;
    padding: 0 2px 6px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-picker-category-tabs button {
    min-height: 24px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-picker-scroll,
  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-picker-list {
    max-height: 210px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-picker-list {
    gap: 4px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-picker-option {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    padding: 3px 4px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-picker-option .model-option-copy {
    gap: 0 !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-option-copy strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-option-title {
    gap: 4px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-option-title .model-success-rate {
    gap: 3px !important;
    font-size: 9px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-option-title .model-success-rate i {
    width: 5px !important;
    height: 5px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-option-copy small {
    display: grid !important;
    grid-template-rows: repeat(2, minmax(0, auto));
    gap: 1px !important;
    font-size: 9px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-option-copy small > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .model-option-meta {
    margin-left: 0 !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] :is(
    .generation-mode-select .custom-select-menu,
    .reference-mode-select .custom-select-menu
  ) {
    max-height: min(280px, calc(100vh - 24px)) !important;
    gap: 2px !important;
    border-radius: 14px !important;
    padding: 6px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .generation-mode-select .custom-select-menu {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .reference-mode-select .custom-select-menu {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .custom-select-option {
    min-height: 38px !important;
    border-radius: 9px !important;
    padding: 0 10px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .generation-mode-menu-title {
    padding: 5px 8px 6px !important;
  }

  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .duration-picker-panel {
    width: min(461px, calc(100vw - 24px)) !important;
    grid-template-columns: minmax(0, 1fr) 108px !important;
    grid-template-rows: auto auto !important;
    column-gap: 18px !important;
    row-gap: 6px !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
  }
  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .duration-picker-panel header {
    display: contents !important;
  }
  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .duration-picker-panel header strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .duration-picker-panel output {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }
  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .duration-picker-panel .duration-timeline {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: end !important;
  }
  body.client-body:has(.studio-shell) #taskForm.prompt-composer[data-composer-surface] .duration-picker-panel > small {
    display: none !important;
  }
}

/* The @ picker uses the same visual language on both composer surfaces. */
body.client-body:has(.studio-shell) .reference-library-modal.inline-reference-picker {
  width: min(310px, calc(100vw - 24px)) !important;
  max-height: min(500px, calc(100vh - 24px)) !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border: 1px solid var(--composer-popover-line) !important;
  border-radius: 18px !important;
  background: var(--composer-popover-surface) !important;
  box-shadow: var(--shadow-depth-dialog) !important;
}

body.client-body:has(.studio-shell) .inline-reference-picker .reference-popover-header {
  min-height: 58px !important;
  border-bottom: 0 !important;
  padding: 0 18px !important;
}

body.client-body:has(.studio-shell) .inline-reference-picker .reference-popover-header h2 {
  color: var(--page-text-muted) !important;
  font-size: var(--font-body) !important;
  font-weight: 500 !important;
}

body.client-body:has(.studio-shell) .inline-reference-picker .reference-library-filters {
  border-color: var(--composer-popover-line) !important;
  background: transparent !important;
  padding: 8px 14px !important;
}

body.client-body:has(.studio-shell) .inline-reference-picker .reference-library-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 12px 14px !important;
}

body.client-body:has(.studio-shell) .inline-reference-picker > footer {
  min-height: 46px !important;
  border-color: var(--composer-popover-line) !important;
  padding: 0 16px !important;
}

body.client-body:has(.studio-shell) .inline-reference-picker.is-empty {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

body.client-body:has(.studio-shell) .inline-reference-picker.is-empty .reference-library-grid {
  min-height: 260px;
  display: grid;
  padding: 0 18px 18px !important;
}

body.client-body:has(.studio-shell) .inline-reference-picker.is-empty .reference-library-empty {
  min-height: 260px;
  gap: 16px;
  border: 0;
  color: var(--page-text-subtle);
}

body.client-body:has(.studio-shell) .inline-reference-picker.is-empty .reference-library-empty strong {
  color: var(--page-text-subtle);
  font-size: var(--font-heading);
  font-weight: 500;
}

body.client-body:has(.studio-shell) .inline-reference-picker.is-empty .reference-empty-upload {
  min-width: 126px;
  min-height: 48px;
  background: #34373d;
  color: #f2f4f7;
}

@media (max-width: 768px) {
  .client-body:has(.studio-shell.view-inspire) .inspiration-home-generation {
    left: -4px !important;
  }
}

/* Agent skill quick picker and generation preferences. Both live inside the
   composer and use the same dark, low-contrast popover language as the model
   and @ pickers. */
body.client-body:has(.studio-shell.view-create) .prompt-composer.agent-composer {
  /* Agent and media generation share the same fixed bottom composer. The
     form must stay absolutely positioned against the workspace; making it
     relative places it after the full-height stage and outside the viewport. */
  position: absolute !important;
}

body.client-body:has(.studio-shell.view-create) .agent-attach-caption {
  display: none !important;
}

body.client-body .agent-skill-picker,
body.client-body .agent-preference-menu {
  position: absolute !important;
  z-index: 1200 !important;
  left: 18px !important;
  bottom: calc(100% + 12px) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  background: #25262a !important;
  color: #f2f3f5 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .62) !important;
}

body.client-body .agent-skill-picker[hidden],
body.client-body .agent-preference-menu[hidden] {
  display: none !important;
}

body.client-body .agent-skill-picker {
  width: min(350px, calc(100% - 36px)) !important;
  max-height: min(470px, calc(100vh - 140px)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

body.client-body .agent-skill-picker > header {
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  padding: 10px 12px !important;
}

body.client-body .agent-skill-picker > header > label {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #8f949d !important;
}

body.client-body .agent-skill-picker > header .ui-icon {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
}

body.client-body .agent-skill-picker > header input {
  width: 100% !important;
  height: 32px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #f4f5f7 !important;
  font: inherit !important;
  font-size: 13px !important;
}

body.client-body .agent-skill-picker > header input::placeholder {
  color: #777c85 !important;
}

body.client-body .agent-skill-picker > header > button {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  border: 0 !important;
  background: transparent !important;
  color: #a7abb2 !important;
  padding: 6px 2px !important;
  font: inherit !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body.client-body .agent-skill-picker > header > button .ui-icon {
  width: 12px !important;
  height: 12px !important;
}

body.client-body .agent-skill-picker-list {
  min-height: 94px !important;
  max-height: 298px !important;
  overflow-y: auto !important;
  padding: 6px !important;
  scrollbar-color: #50535a transparent !important;
}

body.client-body .agent-skill-picker-item {
  width: 100% !important;
  min-height: 56px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 20px !important;
  align-items: center !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #f1f2f4 !important;
  padding: 7px 9px !important;
  text-align: left !important;
  cursor: pointer !important;
}

body.client-body .agent-skill-picker-item:hover,
body.client-body .agent-skill-picker-item.is-selected {
  background: rgba(255, 255, 255, .06) !important;
}

body.client-body .agent-skill-picker-icon {
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #d7dade !important;
}

body.client-body .agent-skill-picker-icon .ui-icon {
  width: 16px !important;
  height: 16px !important;
}

body.client-body .agent-skill-picker-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

body.client-body .agent-skill-picker-copy strong,
body.client-body .agent-skill-picker-copy small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.client-body .agent-skill-picker-copy strong {
  color: #f4f5f7 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.client-body .agent-skill-picker-copy small {
  color: #858a92 !important;
  font-size: 10px !important;
}

body.client-body .agent-skill-picker-check {
  display: grid !important;
  place-items: center !important;
  color: #9bd5ff !important;
}

body.client-body .agent-skill-picker-check .ui-icon {
  width: 14px !important;
  height: 14px !important;
}

body.client-body .agent-skill-picker-empty {
  min-height: 146px !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 7px !important;
  color: #757a83 !important;
  text-align: center !important;
}

body.client-body .agent-skill-picker-empty .ui-icon {
  width: 24px !important;
  height: 24px !important;
  color: #9ba0a8 !important;
}

body.client-body .agent-skill-picker-empty strong {
  color: #c8cbd0 !important;
  font-size: 12px !important;
}

body.client-body .agent-skill-picker-empty span {
  font-size: 10px !important;
}

body.client-body .agent-skill-picker > footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 6px !important;
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
  padding: 7px !important;
}

body.client-body .agent-skill-picker > footer button {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #c8ccd2 !important;
  padding: 0 9px !important;
  font: inherit !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

body.client-body .agent-skill-picker > footer button:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #f4f5f7 !important;
}

body.client-body .agent-skill-picker > footer .ui-icon {
  width: 16px !important;
  height: 16px !important;
}

body.client-body .agent-preference-menu {
  width: min(486px, calc(100% - 36px)) !important;
  max-height: min(560px, calc(100dvh - 120px)) !important;
  display: grid !important;
  gap: 18px !important;
  border-radius: 20px !important;
  padding: 16px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body.client-body .agent-preference-menu > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.client-body .agent-preference-menu > header strong {
  color: #eceef1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.client-body .agent-preference-menu > header label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #c6c9cf !important;
  font-size: 11px !important;
  cursor: pointer !important;
}

body.client-body .agent-preference-menu > header input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.client-body .agent-preference-menu > header i {
  position: relative !important;
  width: 32px !important;
  height: 18px !important;
  display: inline-block !important;
  border-radius: 999px !important;
  background: #494c53 !important;
  transition: background-color .16s ease !important;
}

body.client-body .agent-preference-menu > header i::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #d9dce1 !important;
  transition: transform .16s ease !important;
}

body.client-body .agent-preference-menu > header input:checked + i {
  background: #3d9bea !important;
}

body.client-body .agent-preference-menu > header input:checked + i::after {
  transform: translateX(14px) !important;
}

body.client-body .agent-preference-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
  border-radius: 12px !important;
  background: #1e1f22 !important;
  padding: 4px !important;
}

body.client-body .agent-preference-tabs button {
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #8f949c !important;
  font: inherit !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

body.client-body .agent-preference-tabs button.active {
  background: #33353a !important;
  color: #f1f2f4 !important;
}

body.client-body .agent-preference-section {
  display: grid !important;
  gap: 10px !important;
}

body.client-body .agent-preference-section > strong {
  color: #8f949c !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

body.client-body .agent-preference-ratios {
  display: grid !important;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body.client-body .agent-preference-ratios button {
  min-width: 0 !important;
  min-height: 52px !important;
  display: grid !important;
  place-items: center !important;
  gap: 3px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: #1f2023 !important;
  color: #a8acb3 !important;
  padding: 5px 2px !important;
  font: inherit !important;
  cursor: pointer !important;
}

body.client-body .agent-preference-ratios button.active {
  border-color: #4b9be0 !important;
  background: rgba(75, 155, 224, .12) !important;
  color: #e9f4ff !important;
}

body.client-body .agent-preference-menu.is-auto .agent-preference-section {
  opacity: .46 !important;
}

body.client-body .agent-preference-menu.is-auto .agent-preference-ratios button,
body.client-body .agent-preference-menu.is-auto .agent-preference-settings select {
  cursor: not-allowed !important;
}

body.client-body .agent-preference-menu.is-auto .agent-preference-ratios button:disabled,
body.client-body .agent-preference-menu.is-auto .agent-preference-settings select:disabled {
  color: inherit !important;
  opacity: 1 !important;
}

body.client-body .agent-preference-ratios button i {
  width: 13px !important;
  height: 17px !important;
  display: block !important;
  border: 1.5px solid currentColor !important;
  border-radius: 2px !important;
}

body.client-body .agent-preference-ratios button span {
  font-size: 9px !important;
  line-height: 1 !important;
}

body.client-body .agent-preference-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.client-body .agent-preference-settings > strong {
  grid-column: 1 / -1 !important;
}

body.client-body .agent-preference-settings label {
  min-width: 0 !important;
  display: grid !important;
  gap: 6px !important;
  color: #868b93 !important;
  font-size: 10px !important;
}

body.client-body .agent-preference-settings label:nth-of-type(3) {
  grid-column: 1 / -1 !important;
}

body.client-body .agent-preference-settings label > span {
  padding-left: 2px !important;
}

body.client-body .agent-preference-settings select {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #1f2023 !important;
  color: #eceef1 !important;
  padding: 0 11px !important;
  font: inherit !important;
  font-size: 11px !important;
}

body.client-body:has(.studio-shell.view-create) .reference-library-modal.agent-reference-picker {
  position: fixed !important;
  z-index: 1250 !important;
}

/* Skill manager follows the reference's dense two-column management surface. */
.agent-skill-manager-backdrop {
  z-index: 1100 !important;
  padding: 28px !important;
  background: rgba(5, 6, 8, .72) !important;
  backdrop-filter: blur(14px) !important;
}

.agent-skill-manager {
  position: relative !important;
  width: min(980px, calc(100vw - 48px)) !important;
  height: min(680px, calc(100vh - 56px)) !important;
  display: grid !important;
  grid-template-columns: 282px minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 22px !important;
  background: #28292c !important;
  color: #f0f1f3 !important;
  box-shadow: 0 36px 100px rgba(0, 0, 0, .72) !important;
}

.agent-skill-manager-sidebar {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  border-right: 1px solid rgba(255, 255, 255, .08) !important;
  background: #343538 !important;
  padding: 42px 12px 16px !important;
}

.agent-skill-manager-search {
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 9px !important;
  background: #292a2d !important;
  color: #9ca0a7 !important;
  padding: 0 10px !important;
}

.agent-skill-manager-search .ui-icon {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto !important;
}

.agent-skill-manager-search input {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #f0f1f3 !important;
  font: inherit !important;
  font-size: 12px !important;
}

.agent-skill-manager-new {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 9px !important;
  background: #292a2d !important;
  color: #dfe1e4 !important;
  padding: 0 12px !important;
  font: inherit !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

.agent-skill-manager-new:hover {
  background: #303136 !important;
}

.agent-skill-manager-new .ui-icon {
  width: 16px !important;
  height: 16px !important;
}

.agent-skill-manager-groups {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 5px 0 !important;
}

.agent-skill-manager-group {
  display: grid !important;
  gap: 2px !important;
  margin-top: 10px !important;
}

.agent-skill-manager-group > strong {
  color: #8d9299 !important;
  padding: 0 10px 5px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

.agent-skill-manager-item {
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) 16px !important;
  align-items: center !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #b9bdc3 !important;
  padding: 0 9px !important;
  text-align: left !important;
  font: inherit !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

.agent-skill-manager-item:hover,
.agent-skill-manager-item.is-active {
  background: #46474a !important;
  color: #f1f2f4 !important;
}

.agent-skill-manager-item-icon,
.agent-skill-manager-item i {
  display: grid !important;
  place-items: center !important;
}

.agent-skill-manager-item-icon .ui-icon,
.agent-skill-manager-item i .ui-icon {
  width: 14px !important;
  height: 14px !important;
}

.agent-skill-manager-item i {
  color: #8fcdff !important;
}

.agent-skill-manager-empty {
  color: #858a91 !important;
  padding: 22px 10px !important;
  font-size: 11px !important;
  text-align: center !important;
}

.agent-skill-manager-main {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  background: #28292c !important;
}

.agent-skill-manager-detail-header {
  min-height: 92px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  padding: 34px 62px 18px 32px !important;
}

.agent-skill-manager-detail-header > div:first-child {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

.agent-skill-manager-detail-header h2 {
  margin: 0 !important;
  color: #f0f1f3 !important;
  font-size: 15px !important;
}

.agent-skill-manager-detail-header span {
  color: #858a92 !important;
  font-size: 10px !important;
}

.agent-skill-manager-detail-actions {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.agent-skill-manager-detail-actions button {
  min-height: 34px !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  font: inherit !important;
  font-size: 11px !important;
  cursor: pointer !important;
}

.agent-skill-manager-detail-actions .primary-button {
  border: 1px solid #f1f2f4 !important;
  background: #f1f2f4 !important;
  color: #202124 !important;
}

.agent-skill-manager-detail-actions .subtle-button {
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: transparent !important;
  color: #d4d7db !important;
}

.agent-skill-manager-delete {
  width: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 112, 112, .18) !important;
  background: transparent !important;
  color: #d99090 !important;
  padding: 0 !important;
}

.agent-skill-manager-delete .ui-icon {
  width: 14px !important;
  height: 14px !important;
}

.agent-skill-manager-detail-scroll {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 22px 32px !important;
}

.agent-skill-manager-section {
  display: grid !important;
  gap: 9px !important;
  margin-bottom: 24px !important;
}

.agent-skill-manager-section > strong {
  color: #8e939a !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

.agent-skill-manager-section p {
  margin: 0 !important;
  color: #dcdfe3 !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  white-space: pre-wrap !important;
}

.agent-skill-manager-section pre {
  min-height: 300px !important;
  margin: 0 !important;
  overflow: auto !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 10px !important;
  background: #202124 !important;
  color: #d8dbe0 !important;
  padding: 18px !important;
  font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  white-space: pre-wrap !important;
}

.agent-skill-manager-main > footer {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
  color: #7f848c !important;
  padding: 0 32px !important;
  font-size: 10px !important;
}

.agent-skill-manager-main > footer small {
  color: #6f747c !important;
}

.agent-skill-manager-empty-detail {
  grid-row: 1 / -1 !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 10px !important;
  padding: 36px !important;
  text-align: center !important;
}

.agent-skill-manager-empty-detail > span {
  color: #9aa0a8 !important;
}

.agent-skill-manager-empty-detail > span .ui-icon {
  width: 28px !important;
  height: 28px !important;
}

.agent-skill-manager-empty-detail h2 {
  margin: 0 !important;
  font-size: 17px !important;
}

.agent-skill-manager-empty-detail p {
  max-width: 360px !important;
  margin: 0 0 6px !important;
  color: #8e939a !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

.agent-skill-manager-close {
  position: absolute !important;
  z-index: 2 !important;
  top: 16px !important;
  right: 16px !important;
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #e4e6e9 !important;
  cursor: pointer !important;
}

.agent-skill-manager-close:hover {
  background: rgba(255, 255, 255, .08) !important;
}

.agent-skill-manager-close .ui-icon {
  width: 18px !important;
  height: 18px !important;
}

/* Custom skill editor mirrors the reference form without changing the
   existing API limits. Markdown toolbar buttons insert plain text snippets. */
.agent-skill-editor-backdrop {
  z-index: 1150 !important;
  padding: 28px !important;
  background: rgba(5, 6, 8, .74) !important;
  backdrop-filter: blur(14px) !important;
}

.agent-skill-editor.agent-skill-creator {
  width: min(820px, calc(100vw - 48px)) !important;
  max-height: min(720px, calc(100vh - 56px)) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 22px !important;
  background: #28292c !important;
  color: #f0f1f3 !important;
  padding: 0 !important;
  box-shadow: 0 36px 100px rgba(0, 0, 0, .72) !important;
}

.agent-skill-editor.agent-skill-creator > header {
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 0 24px !important;
}

.agent-skill-editor.agent-skill-creator > header h2 {
  margin: 0 !important;
  color: #f1f2f4 !important;
  font-size: 16px !important;
}

.agent-skill-editor-close {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #e3e5e8 !important;
  cursor: pointer !important;
}

.agent-skill-editor-close:hover {
  background: rgba(255, 255, 255, .08) !important;
}

.agent-skill-editor-close .ui-icon {
  width: 18px !important;
  height: 18px !important;
}

.agent-skill-editor-scroll {
  min-height: 0 !important;
  overflow-y: auto !important;
  display: grid !important;
  gap: 22px !important;
  padding: 2px 24px 24px !important;
}

.agent-skill-field {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  color: #e6e8eb !important;
  font-size: 12px !important;
}

.agent-skill-field > span:first-child {
  font-weight: 600 !important;
}

.agent-skill-field > span:first-child b {
  color: #ff8c8c !important;
  font-weight: 600 !important;
}

.agent-skill-field > small {
  margin-top: -3px !important;
  color: #7f848c !important;
  font-size: 10px !important;
}

.agent-skill-input-shell {
  position: relative !important;
  display: block !important;
}

.agent-skill-input-shell input,
.agent-skill-input-shell textarea {
  width: 100% !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 10px !important;
  background: #1f2023 !important;
  color: #f1f2f4 !important;
  outline: 0 !important;
  font: inherit !important;
  font-size: 12px !important;
}

.agent-skill-input-shell input {
  height: 44px !important;
  padding: 0 58px 0 12px !important;
}

.agent-skill-input-shell textarea {
  min-height: 118px !important;
  padding: 11px 58px 28px 12px !important;
  line-height: 1.65 !important;
  resize: vertical !important;
}

.agent-skill-input-shell.is-content textarea {
  min-height: 286px !important;
  border-radius: 0 0 10px 10px !important;
}

.agent-skill-input-shell input:focus,
.agent-skill-input-shell textarea:focus {
  border-color: rgba(81, 164, 235, .72) !important;
  box-shadow: 0 0 0 1px rgba(81, 164, 235, .2) !important;
}

.agent-skill-input-shell output {
  position: absolute !important;
  right: 11px !important;
  bottom: 8px !important;
  color: #777c84 !important;
  font-size: 10px !important;
  pointer-events: none !important;
}

.agent-skill-format-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  background: #1f2023 !important;
  padding: 7px 8px !important;
}

.agent-skill-format-toolbar button {
  width: 32px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #cfd2d7 !important;
  padding: 0 !important;
  font: inherit !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

.agent-skill-format-toolbar button:hover {
  background: rgba(255, 255, 255, .07) !important;
  color: #fff !important;
}

.agent-skill-editor.agent-skill-creator > footer {
  min-height: 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  margin: 0 !important;
  padding: 0 24px !important;
}

.agent-skill-editor.agent-skill-creator > footer > span {
  color: #7e838b !important;
  font-size: 10px !important;
}

.agent-skill-editor.agent-skill-creator > footer > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.agent-skill-editor.agent-skill-creator > footer button {
  min-height: 38px !important;
  border-radius: 9px !important;
  padding: 0 16px !important;
  font: inherit !important;
  font-size: 12px !important;
}

.agent-skill-editor.agent-skill-creator > footer .primary-button {
  border: 1px solid #55728b !important;
  background: #465c6e !important;
  color: #eef5fa !important;
}

.agent-skill-editor.agent-skill-creator > footer .primary-button:disabled {
  border-color: #36393f !important;
  background: #34363a !important;
  color: #767b83 !important;
  cursor: not-allowed !important;
}

@media (max-width: 860px) {
  body.client-body .agent-preference-ratios {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .agent-skill-manager {
    grid-template-columns: 226px minmax(0, 1fr) !important;
  }

  .agent-skill-manager-detail-header,
  .agent-skill-manager-detail-scroll {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

@media (max-width: 680px) {
  body.client-body .agent-skill-picker,
  body.client-body .agent-preference-menu {
    left: 10px !important;
    bottom: calc(100% + 10px) !important;
  }

  body.client-body .agent-skill-picker {
    width: calc(100% - 20px) !important;
  }

  body.client-body .agent-preference-menu {
    width: calc(100% - 20px) !important;
  }

  .agent-skill-manager-backdrop,
  .agent-skill-editor-backdrop {
    padding: 8px !important;
  }

  .agent-skill-manager {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    grid-template-columns: 1fr !important;
  }

  .agent-skill-manager-sidebar {
    max-height: 210px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    padding: 46px 12px 10px !important;
  }

  .agent-skill-manager-main {
    min-height: 0 !important;
  }

  .agent-skill-manager-detail-header {
    min-height: 76px !important;
    padding: 18px 52px 14px 16px !important;
  }

  .agent-skill-manager-detail-actions {
    flex-wrap: wrap !important;
  }

  .agent-skill-manager-detail-scroll {
    padding: 16px !important;
  }

  .agent-skill-manager-section pre {
    min-height: 190px !important;
  }

  .agent-skill-editor.agent-skill-creator {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 16px !important;
  }

  .agent-skill-editor-scroll {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .agent-skill-editor.agent-skill-creator > header,
  .agent-skill-editor.agent-skill-creator > footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .agent-skill-editor.agent-skill-creator > footer > span {
    display: none !important;
  }
}

/* Homepage Agent controls stay in place. Panels open below the home composer
   and only the actual task submit transitions to the generation workspace. */
body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer > :is(
  .agent-skill-picker,
  .agent-preference-menu
) {
  top: calc(100% + 12px) !important;
  bottom: auto !important;
  left: 18px !important;
}

body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer > .agent-skill-picker {
  max-height: min(470px, calc(100dvh - 350px)) !important;
}

body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer > .agent-preference-menu {
  max-height: min(560px, calc(100dvh - 350px)) !important;
}

@media (max-width: 680px) {
  body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer > :is(
    .agent-skill-picker,
    .agent-preference-menu
  ) {
    left: 10px !important;
  }
}

/* Agent conversation states: loaded Skill identity, thinking, confirmation
   pricing and cancellable generation review. */
body.client-body:has(.studio-shell.view-create) .agent-composer-input-area {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-composer-input-area textarea {
  min-width: 0 !important;
}

body.client-body .agent-invoked-skills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

body.client-body .agent-inline-skill {
  min-height: 25px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .055) !important;
  color: #d9dde2 !important;
  padding: 0 7px !important;
  font: inherit !important;
  font-size: 11px !important;
  cursor: pointer !important;
  animation: agentSkillInvocation .22s ease-out both !important;
}

body.client-body .agent-inline-skill > .ui-icon:first-child {
  width: 14px !important;
  height: 14px !important;
  color: #aeb4bc !important;
}

body.client-body .agent-inline-skill > .ui-icon:last-child {
  width: 11px !important;
  height: 11px !important;
  color: #777d85 !important;
  opacity: 0 !important;
  transition: opacity .14s ease !important;
}

body.client-body .agent-inline-skill:hover > .ui-icon:last-child {
  opacity: 1 !important;
}

body.client-body:has(.studio-shell.view-create) .agent-attach-button {
  position: relative !important;
  overflow: visible !important;
}

body.client-body:has(.studio-shell.view-create) .agent-attach-button.has-reference {
  border-color: rgba(122, 190, 243, .46) !important;
  background: #222a31 !important;
  color: #d9edff !important;
}

body.client-body:has(.studio-shell.view-create) .agent-attach-count {
  position: absolute !important;
  top: -6px !important;
  right: -7px !important;
  min-width: 18px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid #16191e !important;
  border-radius: 999px !important;
  background: #4ca5e8 !important;
  color: #fff !important;
  padding: 0 4px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

body.client-body .agent-inline-references {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body.client-body .agent-inline-reference {
  height: 30px !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .055) !important;
  color: #e1e5ea !important;
  padding: 0 5px 0 4px !important;
  font-size: 11px !important;
}

body.client-body .agent-reference-thumb {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 5px !important;
  background: #343940 !important;
  color: #cbd1d8 !important;
}

body.client-body .agent-reference-thumb img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

body.client-body .agent-reference-thumb .ui-icon {
  width: 12px !important;
  height: 12px !important;
}

body.client-body .agent-inline-reference > strong {
  max-width: 86px !important;
  overflow: hidden !important;
  color: #e1e5ea !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.client-body .agent-inline-reference > button {
  width: 16px !important;
  height: 16px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #7e858e !important;
  padding: 0 !important;
  cursor: pointer !important;
}

body.client-body .agent-inline-reference > button:hover {
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
}

body.client-body .agent-inline-reference > button .ui-icon {
  width: 10px !important;
  height: 10px !important;
}

@keyframes agentSkillInvocation {
  from { opacity: 0; transform: translateY(3px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body.client-body:has(.studio-shell.view-create) .agent-chat-feed {
  width: min(820px, 100%) !important;
  gap: 28px !important;
  padding: 50px 0 34px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-chat-message.user {
  max-width: min(560px, 88%) !important;
  margin-left: auto !important;
}

body.client-body:has(.studio-shell.view-create) .agent-chat-message.user .agent-chat-body {
  max-width: 100% !important;
}

body.client-body:has(.studio-shell.view-create) .agent-chat-message.user .agent-chat-bubble {
  display: block !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #292a2e !important;
  color: #f1f2f4 !important;
  padding: 11px 14px !important;
  box-shadow: none !important;
}

body.client-body:has(.studio-shell.view-create) .agent-message-skill-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
  color: #bcbec4 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

body.client-body:has(.studio-shell.view-create) .agent-message-skill-line .ui-icon {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto !important;
}

body.client-body:has(.studio-shell.view-create) .agent-skill-retention-hint {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 7px !important;
  color: #7d828a !important;
  font-size: 10px !important;
  text-align: right !important;
}

body.client-body:has(.studio-shell.view-create) .agent-skill-retention-hint button {
  border: 0 !important;
  background: transparent !important;
  color: #aeb3ba !important;
  padding: 0 !important;
  font: inherit !important;
  font-size: 10px !important;
  cursor: pointer !important;
}

body.client-body:has(.studio-shell.view-create) .agent-chat-message.assistant {
  width: auto !important;
  max-width: min(760px, calc(100% - 45px)) !important;
  display: flex !important;
}

body.client-body:has(.studio-shell.view-create) .agent-chat-message.assistant .agent-chat-avatar {
  display: grid !important;
  margin-top: 1px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-chat-message.assistant .agent-chat-body {
  max-width: min(760px, calc(100% - 45px)) !important;
}

body.client-body:has(.studio-shell.view-create) .agent-chat-message.assistant .agent-chat-body > header {
  display: flex !important;
  min-height: 22px !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-status {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin-bottom: 10px !important;
  color: #777c84 !important;
  font-size: 11px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-status .ui-icon {
  width: 12px !important;
  height: 12px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-status.is-error {
  color: #d79a9a !important;
}

body.client-body:has(.studio-shell.view-create) .agent-chat-message.is-failed .agent-response-copy {
  color: #e2c2c2 !important;
}

body.client-body:has(.studio-shell.view-create) .canvas-agent-message-state {
  margin: 5px 0 7px !important;
  font-size: 11px !important;
}

body.client-body:has(.studio-shell.view-create) .canvas-agent-message-state.is-error {
  color: #d79a9a !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-copy {
  color: #d9dcdf !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  overflow-wrap: anywhere !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-meta {
  margin-top: 14px !important;
  color: #686d75 !important;
  font-size: 10px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-loaded-skill {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 10px !important;
  color: #a8adb4 !important;
  font-size: 11px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-loaded-skill .ui-icon {
  width: 14px !important;
  height: 14px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-chat-thinking {
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  color: #8d939b !important;
}

body.client-body:has(.studio-shell.view-create) .agent-chat-thinking > i {
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
  border: 1.5px solid rgba(255, 255, 255, .18) !important;
  border-top-color: #d9dde2 !important;
  border-radius: 50% !important;
  animation: agentThinkingSpin .72s linear infinite !important;
}

body.client-body:has(.studio-shell.view-create) .agent-chat-thinking > div {
  display: grid !important;
  gap: 2px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-chat-thinking strong {
  color: #a9aeb5 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

body.client-body:has(.studio-shell.view-create) .agent-chat-thinking small {
  color: #666b73 !important;
  font-size: 10px !important;
}

@keyframes agentThinkingSpin {
  to { transform: rotate(360deg); }
}

/* Submitted generations stay inside the conversation as a compact card that
   reuses the generation feed's waiting surface and media grid. */
body.client-body:has(.studio-shell.view-create) .agent-generation-task {
  width: min(100%, 660px) !important;
  gap: 11px !important;
  border: 1px solid rgba(115, 211, 227, .24) !important;
  border-radius: 12px !important;
  background: #121a20 !important;
  padding: 14px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-generation-task-head strong {
  color: #eaeff3 !important;
  font-size: 13px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-generation-task-prompt {
  color: #c6cfd7 !important;
  font-size: 12.5px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-generation-task-spec {
  color: #838f99 !important;
}

body.client-body:has(.studio-shell.view-create) .agent-generation-task .agent-generation-outputs {
  margin-left: 0 !important;
}

body.client-body:has(.studio-shell.view-create) .agent-generation-task .generation-results {
  margin-left: 0 !important;
}

/* The create workspace lays multi-image batches out in a non-wrapping flex
   row for the history feed. Inside a conversation card that row is wider than
   the card, so the inline card always uses a fitted grid. */
body.client-body:has(.studio-shell.view-create) .agent-generation-task .generation-results,
body.client-body:has(.studio-shell.view-create) .agent-generation-task .generation-results:not(.count-1) {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

body.client-body:has(.studio-shell.view-create) .agent-generation-task .generation-results .generation-result-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

body.client-body:has(.studio-shell.view-create) .agent-generation-task .generation-loading-surface {
  min-height: 200px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-generation-confirmation {
  width: min(680px, 100%) !important;
  margin-top: 14px !important;
  border: 1px solid rgba(255, 255, 255, .095) !important;
  border-radius: 11px !important;
  background: #17191c !important;
  padding: 14px !important;
  box-shadow: none !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-heading strong {
  font-size: 12px !important;
  font-weight: 500 !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-heading span {
  color: #777d85 !important;
  font-size: 10px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-item {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 13px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-check {
  width: 17px !important;
  height: 17px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 3px !important;
  background: #f0f1f3 !important;
  color: #17191c !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-check .ui-icon {
  width: 11px !important;
  height: 11px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-item-copy {
  min-width: 0 !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-prompt {
  position: relative !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #d9dce0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-prompt > span {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-prompt::after {
  content: attr(data-agent-prompt-tooltip) !important;
  position: absolute !important;
  z-index: 1500 !important;
  left: 0 !important;
  bottom: calc(100% + 9px) !important;
  width: min(540px, 72vw) !important;
  max-height: 260px !important;
  overflow: auto !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 10px !important;
  background: #292b2f !important;
  color: #e9ebee !important;
  padding: 11px 12px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .58) !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
  white-space: pre-wrap !important;
  opacity: 0 !important;
  transform: translateY(4px) !important;
  pointer-events: none !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-prompt:hover::after,
body.client-body:has(.studio-shell.view-create) .agent-confirmation-prompt:focus::after {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-item-copy > small {
  display: block !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  color: #777d85 !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-item > strong {
  color: #e6e8eb !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-item > strong.is-unpriced {
  color: #d2a37c !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-settings {
  margin-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
  padding-top: 10px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-settings summary {
  color: #848a92 !important;
  font-size: 10px !important;
  cursor: pointer !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-settings .agent-confirmation-grid {
  margin-top: 10px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-grid select {
  border-color: rgba(255, 255, 255, .09) !important;
  border-radius: 7px !important;
  background: #222428 !important;
  color: #e2e5e8 !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-quote {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 13px !important;
  color: #747a82 !important;
  font-size: 10px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-quote strong {
  color: #d9dce0 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-threshold {
  margin-top: 10px !important;
  color: #a2a7ae !important;
  font-size: 10px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-actions {
  margin-top: 12px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-actions .primary-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f0f1f3 !important;
  color: #1d1f22 !important;
  padding: 0 13px !important;
  font-weight: 600 !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-actions .primary-button .ui-icon {
  width: 13px !important;
  height: 13px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-confirmation-actions .primary-button:disabled {
  background: #45484d !important;
  color: #8f949b !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-actions {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 12px !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-action,
body.client-body:has(.studio-shell.view-create) .agent-response-more > summary {
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1px solid rgba(255, 255, 255, .055) !important;
  border-radius: 8px !important;
  background: #24262a !important;
  color: #dfe2e6 !important;
  padding: 0 10px !important;
  font: inherit !important;
  font-size: 10px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background .14s ease, border-color .14s ease, color .14s ease !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-action:hover,
body.client-body:has(.studio-shell.view-create) .agent-response-more > summary:hover,
body.client-body:has(.studio-shell.view-create) .agent-response-more[open] > summary {
  border-color: rgba(255, 255, 255, .11) !important;
  background: #303238 !important;
  color: #fff !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-action .ui-icon,
body.client-body:has(.studio-shell.view-create) .agent-response-more > summary .ui-icon {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 auto !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-action.is-icon-only,
body.client-body:has(.studio-shell.view-create) .agent-response-more > summary {
  width: 30px !important;
  padding: 0 !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-more {
  position: relative !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-more > summary {
  list-style: none !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-more > summary::-webkit-details-marker {
  display: none !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-more > div {
  position: absolute !important;
  z-index: 40 !important;
  left: 0 !important;
  bottom: calc(100% + 7px) !important;
  min-width: 154px !important;
  display: grid !important;
  gap: 2px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 9px !important;
  background: #2a2c30 !important;
  padding: 5px !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .46) !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-more > div button {
  min-height: 31px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #d7dade !important;
  padding: 0 8px !important;
  font: inherit !important;
  font-size: 10px !important;
  text-align: left !important;
  cursor: pointer !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-more > div button:hover {
  background: rgba(255, 255, 255, .075) !important;
  color: #fff !important;
}

body.client-body:has(.studio-shell.view-create) .agent-response-more > div button .ui-icon {
  width: 13px !important;
  height: 13px !important;
}

@media (max-width: 680px) {
  body.client-body:has(.studio-shell.view-create) .agent-chat-feed {
    gap: 24px !important;
    padding: 32px 0 26px !important;
  }

  body.client-body:has(.studio-shell.view-create) .agent-chat-message.user {
    max-width: 94% !important;
  }

  body.client-body:has(.studio-shell.view-create) .agent-generation-confirmation {
    padding: 12px !important;
  }

  body.client-body:has(.studio-shell.view-create) .agent-confirmation-item {
    grid-template-columns: 18px minmax(0, 1fr) !important;
  }

  body.client-body:has(.studio-shell.view-create) .agent-confirmation-item > strong {
    grid-column: 2 !important;
  }

  body.client-body:has(.studio-shell.view-create) .agent-confirmation-prompt::after {
    width: min(300px, calc(100vw - 56px)) !important;
  }

  body.client-body:has(.studio-shell.view-create) .agent-response-actions {
    gap: 6px !important;
  }

  body.client-body:has(.studio-shell.view-create) .agent-response-action,
  body.client-body:has(.studio-shell.view-create) .agent-response-more > summary {
    min-height: 29px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Agent uses the same visual shell as image and video generation. Only the
   toolbar contents differ; geometry, reference tile, empty state and resize
   control stay identical across all three modes. */
body.client-body:has(.studio-shell.view-create) #agentTaskForm .agent-attach-caption {
  display: block !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm > .composer-expand-button {
  top: -42px !important;
  right: 14px !important;
  width: 34px !important;
  height: 34px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--color-text-subtle) !important;
  opacity: .72 !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm > .composer-expand-button:hover {
  border-color: transparent !important;
  background: var(--generation-composer-control) !important;
  color: var(--color-text) !important;
  opacity: 1 !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"],
  #agentTaskForm
).expanded:not(.maximized) {
  min-height: 368px !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"],
  #agentTaskForm
).expanded:not(.maximized) :is(.composer-main, .agent-composer-main) {
  min-height: 290px !important;
}

body.client-body:has(.studio-shell.view-create) :is(
  #taskForm[data-composer-surface="create"],
  #agentTaskForm
).expanded:not(.maximized) :is(
  .prompt-rich-editor,
  .agent-composer-input-area textarea
) {
  height: auto !important;
  min-height: var(--generation-composer-editor-expanded-height) !important;
  max-height: var(--generation-composer-editor-max-height) !important;
  overflow-y: auto !important;
}

body.client-body:has(.studio-shell.view-create) .agent-empty-stage {
  height: calc(100vh - 330px) !important;
  min-height: 360px !important;
}

@media (max-width: 768px) {
  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"],
    #agentTaskForm
  ) > .composer-expand-button {
    top: -42px !important;
    right: 14px !important;
  }

  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"],
    #agentTaskForm
  ).expanded:not(.maximized) :is(.composer-main, .agent-composer-main) {
    min-height: 266px !important;
  }

  body.client-body:has(.studio-shell.view-create) :is(
    #taskForm[data-composer-surface="create"],
    #agentTaskForm
  ).expanded:not(.maximized) :is(
    .prompt-rich-editor,
    .agent-composer-input-area textarea
  ) {
    min-height: 220px !important;
  }
}

@media (max-width: 700px) {
  body.client-body:has(.studio-shell.view-create) .customer-service-widget {
    bottom: max(338px, calc(var(--generation-composer-live-height, var(--generation-composer-height)) + var(--generation-composer-bottom-offset) + 64px)) !important;
  }

  body.client-body:has(.studio-shell.view-create .prompt-composer.expanded) .customer-service-widget {
    bottom: max(510px, calc(var(--generation-composer-live-height, 368px) + var(--generation-composer-bottom-offset) + 64px)) !important;
  }
}

/* The generation-page Agent composer is the homepage composer, not a second
   visual system. Keep one DOM renderer and only change popover direction. */
body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) {
  width: min(1120px, calc(100% - 48px)) !important;
  height: 126px !important;
  min-height: 126px !important;
  border-color: #34383f !important;
  border-radius: 17px !important;
  background: #18191c !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45) !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .composer-main {
  height: 88px !important;
  min-height: 88px !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 0 17px 6px !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .attach-button:not(.has-reference) {
  width: 46px !important;
  height: 66px !important;
  min-height: 66px !important;
  align-self: start !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px dashed rgba(255, 255, 255, 0.15) !important;
  border-radius: 9px !important;
  background: #23252a !important;
  color: #777c86 !important;
  transform: rotate(-7deg) !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .attach-button:not(.has-reference):hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: #2b2d33 !important;
  color: #ffffff !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer .attach-tile-caption {
  display: none !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .home-attach-icon .ui-icon {
  width: 18px !important;
  height: 18px !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .prompt-rich-editor {
  height: 80px !important;
  min-height: 80px !important;
  padding: 3px 0 0 !important;
  color: #e2e4e8 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .prompt-rich-editor:empty::before {
  color: #666a73 !important;
  font-size: 13.5px !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .composer-toolbar {
  height: 38px !important;
  min-height: 38px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 17px !important;
  border-top: 0 !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .home-composer-options {
  min-width: 0 !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 0 !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .composer-options > :is(
  .select-chip.custom-select,
  .home-toolbar-pill
) {
  height: 30px !important;
  min-height: 30px !important;
  flex: 0 0 auto !important;
  gap: 5px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #c9cdd3 !important;
  font-size: 12.5px !important;
  font-weight: 450 !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .composer-options > :is(
  .home-toolbar-pill
):hover,
body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .custom-select-trigger:hover {
  background: rgba(255, 255, 255, 0.055) !important;
  color: #f1f3f6 !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .custom-select-trigger {
  height: 30px !important;
  min-height: 30px !important;
  gap: 3px !important;
  padding: 0 4px !important;
  border-radius: 7px !important;
  color: #c9cdd3 !important;
  font-size: 12.5px !important;
  font-weight: 450 !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .create-mode-trigger,
body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .mode-icon-glow {
  color: #4c9fe6 !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .home-toolbar-pill > span,
body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .custom-select-chevron {
  display: inline-flex !important;
  color: #8c929c !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .custom-select-chevron .ui-icon,
body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .home-toolbar-pill .ui-icon {
  width: 14px !important;
  height: 14px !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .agent-model-select {
  height: 30px !important;
  min-height: 30px !important;
  max-width: 270px !important;
  flex: 0 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #c9cdd3 !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .agent-model-select:hover {
  background: rgba(255, 255, 255, 0.055) !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .agent-model-select select {
  max-width: 220px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #c9cdd3 !important;
  font: inherit !important;
  font-size: 12px !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .composer-submit {
  height: 36px !important;
  gap: 12px !important;
  padding-left: 12px !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .send-button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: #2b2d33 !important;
  border-color: #35383f !important;
  color: #9096a0 !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .send-button:hover {
  background: #d1d1d1 !important;
  border-color: #d1d1d1 !important;
  color: #ffffff !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer > :is(
  .agent-skill-picker,
  .agent-preference-menu
) {
  top: auto !important;
  bottom: calc(100% + 12px) !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.compact):not(.maximized) .custom-select-menu {
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  z-index: 1200 !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.compact):not(.maximized) .composer-toolbar {
  position: relative !important;
  z-index: 30 !important;
  overflow: visible !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.compact):not(.maximized) .composer-options {
  overflow-x: visible !important;
  overflow-y: visible !important;
  overflow: visible !important;
}

body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.compact):not(.maximized) .composer-main {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 768px) {
  body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) {
    width: calc(100% - 20px) !important;
    height: 124px !important;
    min-height: 124px !important;
    border-radius: 15px !important;
  }

  body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .composer-main {
    height: 84px !important;
    min-height: 84px !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 0 12px 5px !important;
  }

  body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .attach-button {
    width: 42px !important;
    height: 58px !important;
    min-height: 58px !important;
  }

  body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .prompt-rich-editor,
  body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .prompt-rich-editor:empty::before {
    font-size: 12px !important;
  }

  body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .composer-toolbar {
    height: 40px !important;
    min-height: 40px !important;
    flex-wrap: nowrap !important;
    padding: 0 12px !important;
  }

  body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .home-composer-options {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    overflow: visible !important;
  }

  body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .agent-model-select {
    max-width: 190px !important;
  }

  body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .agent-model-select select {
    max-width: 145px !important;
  }

  body.client-body:has(.studio-shell.view-create) #agentTaskForm.agent-home-composer:not(.expanded) .composer-submit {
    margin-left: 0 !important;
    gap: 8px !important;
    padding-left: 6px !important;
  }
}

/* 生视频向导：跟已提交的生成卡共用同一套卡片视觉，沿用创作页的字号与圆角。 */
body.client-body:has(.studio-shell.view-create) .video-wizard {
  width: min(100%, 660px) !important;
  gap: 12px !important;
  border: 1px solid rgba(115, 211, 227, .24) !important;
  border-radius: 12px !important;
  background: #121a20 !important;
  padding: 15px !important;
}

body.client-body:has(.studio-shell.view-create) .video-wizard-head h3 {
  color: #eaeff3 !important;
  font-size: 14.5px !important;
}

body.client-body:has(.studio-shell.view-create) .video-wizard-option {
  border-radius: 9px !important;
  font-size: 12.5px !important;
}

body.client-body:has(.studio-shell.view-create) .video-wizard-option.is-selected {
  border-color: #73cad6 !important;
  background: rgba(115, 202, 214, .12) !important;
  color: #eef6f8 !important;
}

body.client-body:has(.studio-shell.view-create) .video-wizard-select,
body.client-body:has(.studio-shell.view-create) .video-wizard-textarea {
  border-color: #35424c !important;
  background: #0f151a !important;
  color: #e9eef2 !important;
}

body.client-body:has(.studio-shell.view-create) .video-wizard-footer .primary-button {
  min-height: 34px !important;
  border-radius: 8px !important;
  padding: 0 15px !important;
  font-size: 12.5px !important;
}

body.client-body:has(.studio-shell.view-create) .video-wizard-asset-actions .primary-button {
  min-height: 32px !important;
  border-radius: 8px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
}

body.client-body:has(.studio-shell.view-create) .video-wizard-summary-row {
  font-size: 12px !important;
  color: #c6cfd7 !important;
}

@media (max-width: 640px) {
  body.client-body:has(.studio-shell.view-create) .video-wizard {
    padding: 12px !important;
  }

  body.client-body:has(.studio-shell.view-create) .video-wizard-options {
    grid-template-columns: 1fr !important;
  }
}

/* Keep generation settings reachable after scrolling away from the newest
   task. The compact composer still uses its single submit action, while the
   model/spec/duration controls remain available in a scrollable second row. */
body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact {
  min-height: 110px !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-toolbar {
  display: flex !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  border-top: 0 !important;
  padding: 0 12px 10px !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-toolbar::before {
  display: none !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-options {
  width: 100% !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 1px !important;
  scrollbar-width: none !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-options::-webkit-scrollbar {
  display: none !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-submit {
  display: none !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact :is(
  .create-toolbar-pill,
  .composer-options .select-chip.custom-select,
  .composer-options .custom-select-trigger
) {
  height: 30px !important;
  min-height: 30px !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact :is(
  .create-model-pill,
  .create-spec-pill
) .create-pill-label {
  max-width: min(150px, 28vw) !important;
}

/* ---------------------------------------------------------------------------
   收起状态（向上滚动离开最新结果）的生成输入框。

   参考稿里这一档是单行导航输入框：68px 高、18px 圆角、自上而下略微变亮的
   渐变底色、左侧一张倾斜的参考内容卡片、居中单行提示（“/” 与 “@” 画成
   按键）以及右侧 32px 的圆形发送按钮。这里按参考稿的尺寸逐项对齐。

   这一段只作用于深色主题，浅色主题继续使用 theme-preview.css 里的浅色样式。
   --------------------------------------------------------------------------- */
html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact {
  height: 68px !important;
  min-height: 68px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #181818 0%, #232323 100%) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42) !important;
}

/* All create-page composer sizes share the compact state's dark surface,
   border and depth, including the focused state. */
html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm.prompt-composer[data-composer-surface="create"] {
  --generation-composer-border: rgba(255, 255, 255, 0.055);
  --shadow-depth-float: 0 14px 36px rgba(0, 0, 0, 0.42);
  border-color: rgba(255, 255, 255, 0.055) !important;
  background: linear-gradient(180deg, #181818 0%, #232323 100%) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm.prompt-composer[data-composer-surface="create"]:focus-within {
  border-color: rgba(255, 255, 255, 0.055) !important;
  background: linear-gradient(180deg, #181818 0%, #232323 100%) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-main {
  grid-template-columns: 34px minmax(0, 1fr) 32px !important;
  align-items: center !important;
  gap: 14px !important;
  height: 66px !important;
  min-height: 66px !important;
  padding: 0 17px 0 20px !important;
}

/* 收起后只保留一行输入：设置工具条、规格与首尾帧、参考计数全部隐藏。 */
html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-toolbar,
html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .frame-upload-grid,
html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .reference-strip,
html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .prompt-reference-count {
  display: none !important;
}

/* 参考内容卡片：竖版、略微左倾，没有虚线描边与文字说明。 */
html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .attach-button {
  width: 34px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(160deg, #333333 0%, #2a2a2a 55%, #212121 100%) !important;
  color: #8b8b8b !important;
  transform: rotate(-8deg) !important;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .attach-button:hover {
  background: linear-gradient(160deg, #3d3d3d 0%, #323232 55%, #282828 100%) !important;
  color: #d8d8d8 !important;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .attach-tile-caption,
html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-expand-button {
  display: none !important;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .attach-button .ui-icon {
  width: 11px !important;
  height: 11px !important;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .prompt-rich-editor {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 14px !important;
  line-height: 24px !important;
  color: #e8eaed !important;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .prompt-rich-editor:empty::before {
  content: none !important;
}

.composer-compact-hint {
  display: none;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .prompt-entry:has(.prompt-rich-editor:empty) .composer-compact-hint {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: #a1a1a1;
  font-size: 14px;
  line-height: 24px;
  pointer-events: none;
  transform: translateY(-50%);
}

.composer-compact-hint .composer-keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  color: inherit;
  font-size: 13px;
  font-style: normal;
  line-height: 1;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-compact-submit {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #424242 !important;
  color: #686868 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-compact-submit .ui-icon {
  width: 17px !important;
  height: 17px !important;
}

/* 空输入框时发送键保持参考稿里的静默灰，写入内容后再回到品牌色。 */
html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact:has(.prompt-rich-editor:not(:empty)) .composer-compact-submit {
  background: var(--gradient-brand) !important;
  color: var(--color-brand-ink) !important;
}

/* “回到底部”跟随收起后的输入框右对齐，并保持参考稿的胶囊外观。 */
html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-back-bottom {
  top: -51px !important;
  right: 0 !important;
  width: 88px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0 !important;
  border-radius: 999px !important;
  background: #1c1c1c !important;
  color: #e8e8e8 !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-back-bottom .ui-icon {
  width: 14px !important;
  height: 14px !important;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].compact .composer-back-bottom[hidden] {
  display: none !important;
}

/* Music mode keeps the shared composer and gives lyrics and the style prompt
   equal-height columns above the compact parameter toolbar. */
body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-fields-grid {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 14px !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-style-field {
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--color-bg-raised) 86%, transparent) !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-style-header {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 0 14px !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-style-icon {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--color-brand) 34%, var(--color-border)) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-raised)) !important;
  color: var(--color-brand) !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-style-copy {
  min-width: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-style-copy strong {
  flex: 0 0 auto !important;
  color: var(--color-text) !important;
  font-size: 12px !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-style-copy small {
  overflow: hidden !important;
  color: var(--color-text-muted) !important;
  font-size: 10.5px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-style-requirement {
  flex: 0 0 auto !important;
  border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent) !important;
  border-radius: 999px !important;
  color: var(--color-text-muted) !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-select {
  height: 38px !important;
  border: 1px solid var(--composer-popover-line, var(--color-border)) !important;
  background: color-mix(in srgb, var(--color-bg-raised) 72%, transparent) !important;
  overflow: visible !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-trigger {
  height: 100% !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 0 9px 0 10px !important;
  color: var(--color-text) !important;
  font-size: 11.5px !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-trigger-copy {
  min-width: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-trigger-copy small {
  flex: 0 0 auto !important;
  color: var(--color-text-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-trigger-copy strong {
  overflow: hidden !important;
  color: var(--color-text) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-menu {
  width: 304px !important;
  min-width: 304px !important;
  max-width: min(340px, calc(100vw - 24px)) !important;
  max-height: min(330px, calc(100vh - 24px)) !important;
  gap: 3px !important;
  overflow: hidden !important;
  border: 1px solid var(--composer-popover-line, var(--color-border)) !important;
  border-radius: 13px !important;
  background: var(--composer-popover-surface, var(--color-bg-raised)) !important;
  padding: 8px !important;
  box-shadow: var(--shadow-depth-dialog) !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-menu-header {
  display: grid !important;
  gap: 2px !important;
  margin-bottom: 2px !important;
  border-bottom: 1px solid var(--composer-popover-line, var(--color-border)) !important;
  padding: 5px 9px 9px !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-menu-header strong {
  color: var(--color-text) !important;
  font-size: 12px !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-menu-header small {
  color: var(--color-text-muted) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-option {
  min-height: 58px !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border-radius: 9px !important;
  padding: 8px 10px !important;
  white-space: normal !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-option-main {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
  padding-right: 4px !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-option-main strong {
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-option-main small {
  color: var(--color-text-muted) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

@media (min-width: 768px) {
  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer:not(.compact):not(.maximized) {
    min-height: 156px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer:not(.compact):not(.maximized) .composer-main {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    min-height: 84px !important;
    padding: 14px 18px 6px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer:not(.compact):not(.maximized) .music-prompt-icon {
    width: 50px !important;
    height: 54px !important;
    border-radius: 12px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer:not(.compact):not(.maximized) .music-prompt-icon .ui-icon {
    width: 20px !important;
    height: 20px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer:not(.compact):not(.maximized) .prompt-rich-editor {
    min-height: 184px !important;
    max-height: 260px !important;
    font-size: 13px !important;
    line-height: 1.72 !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer:not(.compact):not(.maximized) .create-composer-toolbar {
    min-height: 72px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 18px 14px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .composer-options.has-music-options {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow: visible !important;
    scrollbar-width: none;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .composer-options.has-music-options::-webkit-scrollbar {
    display: none;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .composer-options.has-music-options > .generation-mode-select {
    flex: 0 1 96px !important;
    width: 96px !important;
    min-width: 88px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .composer-options.has-music-options > .model-picker-trigger {
    flex: 1 1 152px !important;
    width: auto !important;
    min-width: 140px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-select {
    flex: 0 1 132px !important;
    width: 132px !important;
    min-width: 112px !important;
    max-width: 138px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-version {
    flex-basis: 132px !important;
    width: 132px !important;
    min-width: 118px !important;
    max-width: 138px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-mode {
    flex-basis: 120px !important;
    width: 120px !important;
    min-width: 106px !important;
    max-width: 126px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-vocal {
    flex-basis: 116px !important;
    width: 116px !important;
    min-width: 102px !important;
    max-width: 122px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-lyrics-pill {
    flex: 0 0 auto !important;
    height: 34px !important;
    padding-inline: 10px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-lyrics-panel {
    margin: 0 !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-lyrics-panel textarea {
    min-height: 184px !important;
    max-height: 260px !important;
  }
}

@media (min-width: 1024px) {
  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .create-composer-toolbar {
    gap: 8px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .create-composer-submit {
    gap: 8px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .composer-options.has-music-options {
    flex-wrap: nowrap !important;
  }
}

/* 参考稿在收起状态下不显示右下角悬浮客服入口，避免与“回到底部”重叠。 */
@media (min-width: 601px) {
  html[data-theme="dark"] body.client-body:has(.studio-shell.view-create #taskForm[data-composer-surface="create"].compact) .customer-service-widget {
    display: none !important;
  }
}

/* Music mode uses the shared create composer, but it has no reference tile.
   On narrow screens the generic two-column geometry leaves only a 48px text
   column, so let the style field and lyrics use the full composer width. */
@media (max-width: 767px) {
  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-fields-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-style-field {
    order: -1 !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-style-header {
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-style-copy {
    display: grid !important;
    gap: 1px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-style-copy small {
    white-space: normal !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-style-requirement {
    display: none !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-menu {
    width: min(304px, calc(100vw - 24px)) !important;
    min-width: min(304px, calc(100vw - 24px)) !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-lyrics-panel {
    margin: 0 !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer:not(.compact):not(.maximized) .composer-main {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 18px 14px 8px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer:not(.compact):not(.maximized) .prompt-entry {
    width: 100% !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer:not(.compact):not(.maximized) .prompt-rich-editor {
    min-height: 150px !important;
    max-height: 220px !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer:not(.compact):not(.maximized) .create-composer-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 6px 14px 14px !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .composer-options.has-music-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .composer-options.has-music-options > :is(
    .generation-mode-select,
    .create-model-pill,
    .model-picker-trigger,
    .music-setting-select,
    .music-lyrics-pill
  ) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer :is(.create-model-pill, .model-picker-trigger) .create-pill-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .music-setting-select select {
    min-width: 0;
    max-width: none !important;
    flex: 1 1 auto;
    text-overflow: ellipsis;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .create-composer-submit {
    width: 100% !important;
    justify-content: space-between !important;
  }

  body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer .create-composer-submit .composer-price {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }
}

/* Music keeps a readable single-line summary when the composer is compact.
   The shared compact layout only accounts for one rich-text editor, while
   music contains two editor cards and would otherwise collapse into a column.
   Keep this block after the normal music grid rules so it wins the cascade. */
body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer.compact .composer-main {
  grid-template-columns: minmax(0, 1fr) 44px !important;
  gap: 14px !important;
  height: 66px !important;
  min-height: 66px !important;
  padding: 0 17px 0 20px !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer.compact .music-fields-grid {
  display: none !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer.compact .music-composer-compact-summary {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: hidden !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer.compact .music-composer-compact-summary-icon {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--color-brand) 32%, var(--color-border)) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--color-brand) 9%, transparent) !important;
  color: var(--color-brand) !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer.compact .music-composer-compact-summary-icon .ui-icon {
  width: 16px !important;
  height: 16px !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer.compact .music-composer-compact-summary-copy {
  min-width: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  overflow: hidden !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer.compact .music-composer-compact-summary-copy strong {
  flex: 0 0 auto !important;
  color: var(--color-text) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

body.client-body:has(.studio-shell.view-create) #taskForm[data-composer-surface="create"].music-prompt-composer.compact .music-composer-compact-summary-copy small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}