/* Final theme authority: grey surfaces, #222 text in light mode, neon blue accents. */
:root[data-manual-theme="dark"] .chat-theme-toggle-icon {
  background: transparent;
  box-shadow: inset 0.35rem 0 0 currentColor;
}

/* 2026-07-10 chat/editor polish: final cascade overrides. */
body.is-chat-home .main-top,
body.is-chat-home.is-sidebar-collapsed .main-top {
  padding-left: 8px !important;
}

body.is-chat-home #chat-input:focus,
body.is-chat-home #chat-input:focus-visible,
#chat-root #chat-input:focus,
#chat-root #chat-input:focus-visible {
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls {
  max-width: 184px !important;
  gap: 3px !important;
}

/* Final editor action group. Keep this block last. */
@media (min-width: 761px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 32px !important;
    gap: 4px !important;
    padding: 3px 5px !important;
    border: 1px solid #2b2b2b !important;
    border-radius: 6px !important;
    background: #171717 !important;
    box-sizing: border-box !important;
  }
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls
    > button.chat-prototype-seo-score[data-prototype-seo-score] {
    flex: 0 0 58px !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    border-radius: 4px !important;
  }
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls
    > :is(button.chat-prototype-workbench-target, button.chat-prototype-workbench-settings, button.chat-prototype-close-btn) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #aeb4ba !important;
    box-shadow: none !important;
  }
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-target-label,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-target-label::after {
    display: none !important;
    content: none !important;
  }
}

/* Responsive right action cluster: intrinsic width, no collisions. */
@media (min-width: 761px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head {
    grid-template-columns: auto minmax(0, 1fr) max-content !important;
    column-gap: 6px !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 2px !important;
    padding-right: 4px !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls
    > button.chat-prototype-seo-score[data-prototype-seo-score] {
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 5px !important;
    font-size: 9px !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls
    > :is(button.chat-prototype-workbench-settings, button.chat-prototype-close-btn) {
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls
    > button.chat-prototype-workbench-target {
    flex: 0 0 62px !important;
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 4px !important;
    font-size: 0 !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-target-label::after {
    content: "Section";
    font: 750 8px/1 var(--chat-chrome-mono, monospace);
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls
    > button.chat-prototype-workbench-apply:not(.hidden) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 44px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 6px !important;
    font-size: 8px !important;
  }
}

/* Final right-side treatment: status plus three icon actions. */
@media (min-width: 761px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    height: 32px !important;
    padding: 3px 5px !important;
    border: 1px solid #2b2b2b !important;
    border-radius: 6px !important;
    background: #171717 !important;
    box-sizing: border-box !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls
    > button.chat-prototype-seo-score[data-prototype-seo-score] {
    flex: 0 0 58px !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 24px !important;
    border-radius: 4px !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls
    > :is(button.chat-prototype-workbench-target, button.chat-prototype-workbench-settings, button.chat-prototype-close-btn) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #aeb4ba !important;
    box-shadow: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls
    > :is(button.chat-prototype-workbench-target, button.chat-prototype-workbench-settings, button.chat-prototype-close-btn):is(:hover, :focus-visible) {
    color: #fff !important;
    background: #303030 !important;
    outline: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-target-label {
    display: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-target-label::after {
    content: none !important;
  }
}

.chat-prototype-target-icon {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none !important;
}

body.is-chat-home .main-top :is(.chat-header-tool, #chat-open-studio.chat-open-studio--icon) {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border: 0 !important;
  border-radius: 5px !important;
  color: #aeb7bf !important;
}

body.is-chat-home .main-top :is(.chat-header-tool, #chat-open-studio.chat-open-studio--icon):is(:hover, :focus-visible) {
  color: #fff !important;
  background: #182630 !important;
}

:root[data-manual-theme="dark"] .manual-theme-toggle-icon {
  background: transparent;
  box-shadow: inset 0.32rem 0 0 currentColor;
}

.ai-fab,
body.is-ai-open .ai-fab {
  position: fixed !important;
  left: 5px !important;
  right: auto !important;
  bottom: 5px !important;
  z-index: 120 !important;
  min-width: 4.6rem !important;
  height: 1.9rem !important;
  padding: 0 0.58rem !important;
  gap: 0.25rem !important;
  border-width: 1px !important;
  border-radius: 6px !important;
  background: var(--custom-panel) !important;
  color: var(--custom-copy) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 0.62rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.ai-fab .ai-fab-icon {
  display: none !important;
  color: var(--pf-chat-neon) !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
}

.ai-fab .ai-fab-label {
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.ai-fab.btn-neon:hover:not(:disabled),
body.is-ai-open .ai-fab.btn-neon {
  background: var(--custom-panel) !important;
  color: var(--custom-copy) !important;
  border-color: var(--pf-chat-neon) !important;
  transform: none !important;
}

.tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

.tab {
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  text-align: center !important;
}

.manual-theme-toggle {
  display: none !important;
}

.sidebar-header {
  position: relative !important;
}

body:not(.is-admin-preview-open) .sidebar-header .manual-theme-toggle {
  display: inline-grid !important;
  position: absolute !important;
  top: 0.85rem !important;
  right: 0.85rem !important;
  left: auto !important;
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 6px !important;
}

#chat-root .chat-theme-toggle {
  display: none !important;
}

#chat-root .chat-compose-quick,
#chat-root .chat-side-note {
  display: none !important;
}

#chat-root .chat-head-actions,
#chat-root .chat-theme-toggle,
#chat-root .chat-close {
  pointer-events: auto !important;
}

body.is-designs-view .main,
body.is-designs-view .main-top,
body.is-designs-view .content,
body.is-designs-view .designs-home,
body.is-designs-view .designs-gallery {
  background: #111111 !important;
  background-image: none !important;
  color: #d0d0d0 !important;
}

body.is-designs-view .main-top {
  border-color: #2a2a2a !important;
}

body.is-designs-view .main-top-label,
body.is-designs-view .designs-gallery-eyebrow,
body.is-designs-view .designs-gallery-head h2,
body.is-designs-view .designs-gallery-intro {
  color: #d0d0d0 !important;
}

body.is-designs-view .designs-gallery {
  padding: clamp(1.2rem, 3vw, 2.4rem) !important;
}

body.is-designs-view .designs-filter {
  background: #151515 !important;
  border-color: #2a2a2a !important;
  border-radius: 0 !important;
  color: #d0d0d0 !important;
}

body.is-designs-view .designs-filter:focus {
  border-color: #00d9ff !important;
}

body.is-designs-view .designs-grid {
  gap: 1rem !important;
}

body.is-designs-view .template-card {
  border-radius: 0 !important;
  background: #151515 !important;
  border-color: #2a2a2a !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

body.is-designs-view .template-card:hover,
body.is-designs-view .template-card:focus-visible {
  border-color: #00d9ff !important;
  box-shadow: 0 0 0 1px #00d9ff !important;
  transform: none !important;
}

body.is-designs-view .template-card,
body.is-designs-view .template-card *,
body.is-designs-view .template-card:hover,
body.is-designs-view .template-card:hover * {
  text-decoration: none !important;
}

body.is-designs-view .template-card-media,
body.is-designs-view .template-card-media img,
body.is-designs-view .template-card-media video {
  border-radius: 0 !important;
}

body.is-designs-view .template-card-media {
  background: #111111 !important;
  border-bottom: 1px solid #2a2a2a !important;
}

body.is-designs-view .template-card-body {
  background: #151515 !important;
  border-radius: 0 !important;
  color: #d0d0d0 !important;
}

body.is-designs-view .template-card-name {
  color: #d0d0d0 !important;
}

body.is-designs-view .template-card-tagline {
  color: #00d9ff !important;
}

body.is-designs-view .template-card-cta.btn-neon {
  border-color: #00d9ff !important;
  background: #111111 !important;
  color: #d0d0d0 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
}

body.is-designs-view .template-card:hover .template-card-cta.btn-neon {
  background: #151515 !important;
  color: #00d9ff !important;
  box-shadow: none !important;
}

.main-top-actions {
  display: none !important;
}

.chat-helper-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.3rem !important;
  margin-top: 0.42rem !important;
}

.chat-helper-actions .btn-neon {
  min-height: 1.45rem !important;
  padding: 0 0.5rem !important;
  border: 1px solid var(--pf-chat-neon) !important;
  border-radius: 6px !important;
  background: var(--custom-panel) !important;
  color: var(--custom-copy) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 0.54rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.chat-helper-actions .btn-neon:hover,
.chat-helper-actions .btn-neon:focus-visible {
  background: var(--custom-bg) !important;
  color: var(--pf-chat-neon) !important;
  border-color: var(--pf-chat-neon) !important;
  transform: none !important;
}

.template-card-desc {
  display: none !important;
}

.template-card-media {
  background: var(--custom-bg) !important;
  border-bottom: 1px solid var(--custom-line) !important;
}

.template-card-media--swatch {
  --template-accent: var(--pf-chat-neon) !important;
}

.template-card-media--preview img,
.template-card-media--preview video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.template-card-media--preview video {
  opacity: 0 !important;
  transition: opacity 0.16s ease !important;
  pointer-events: none !important;
}

.template-card:hover .template-card-media--preview video,
.template-card:focus-visible .template-card-media--preview video,
.template-card:focus-within .template-card-media--preview video {
  opacity: 1 !important;
}

.template-card--design .template-card-body {
  gap: 0.32rem !important;
}

#chat-root .chat-media {
  width: min(650px, calc(100vw - 2rem)) !important;
  max-width: min(650px, calc(100vw - 2rem)) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  margin: 0.4rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
}

#chat-root .chat-media--articles {
  width: min(650px, calc(100vw - 2rem)) !important;
  max-width: min(650px, calc(100vw - 2rem)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#chat-root .chat-media.hidden {
  display: none !important;
}

#chat-root .chat-media-grid {
  display: flex !important;
  grid-template-columns: none !important;
  width: max-content !important;
  max-width: none !important;
  gap: 0.35rem !important;
  justify-content: flex-start !important;
}

#chat-root .chat-figure {
  flex: 0 0 104px !important;
  width: 104px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  border: 1px solid var(--custom-line) !important;
  background: var(--custom-panel) !important;
  cursor: zoom-in !important;
}

#chat-root .chat-figure:focus-visible {
  outline: 2px solid var(--custom-neon) !important;
  outline-offset: 2px !important;
}

#chat-root .chat-figure img {
  width: 104px !important;
  height: 122px !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
}

#chat-root .chat-figure-meta {
  display: grid !important;
  gap: 0.08rem !important;
  padding: 0.28rem 0.34rem !important;
  color: var(--custom-copy) !important;
  font-size: 0.5rem !important;
  line-height: 1.15 !important;
}

#chat-root .chat-figure-meta span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#chat-root .chat-figure--article {
  flex: 0 0 76px !important;
  width: 76px !important;
  border-radius: 6px !important;
}

#chat-root .chat-figure--article img {
  width: 76px !important;
  height: 58px !important;
  object-fit: cover !important;
}

#chat-root .chat-figure--article .chat-figure-meta {
  display: none !important;
}

#chat-root .chat-figure-link {
  width: calc(100% - 0.3rem) !important;
  min-height: 1rem !important;
  margin: 0.15rem !important;
  padding: 0.13rem 0.2rem !important;
  border-width: 1px !important;
  border-radius: 4px !important;
  font-size: 0.48rem !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.chat-image-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
  display: grid !important;
  place-items: center !important;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)) !important;
  background: rgba(0, 0, 0, 0.84) !important;
}

.chat-image-overlay.hidden {
  display: none !important;
}

.chat-image-overlay-panel {
  display: grid !important;
  gap: 0.5rem !important;
  width: min(1120px, 94vw) !important;
  max-height: 92dvh !important;
  margin: 0 !important;
}

.chat-image-overlay-panel img {
  width: 100% !important;
  max-height: calc(92dvh - 3rem) !important;
  object-fit: contain !important;
  background: #050505 !important;
  border: 1px solid var(--custom-neon) !important;
  border-radius: 6px !important;
}

.chat-image-overlay-panel figcaption {
  color: var(--custom-copy) !important;
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

.chat-image-overlay-close {
  position: fixed !important;
  top: max(0.75rem, env(safe-area-inset-top)) !important;
  right: max(0.75rem, env(safe-area-inset-right)) !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--custom-neon) !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.62) !important;
  color: var(--custom-neon) !important;
  font: 400 1.35rem/1 var(--font-main, inherit) !important;
  cursor: pointer !important;
}

#chat-root .chat-send-icon {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
}

#chat-root .chat-send-icon::before,
body.is-chat-home .chat-root--home .chat-send-icon::before {
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: 0.82rem !important;
  height: 0.82rem !important;
  transform: translate(-50%, -50%) !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 19V5M6.5 10.5 12 5l5.5 5.5' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 19V5M6.5 10.5 12 5l5.5 5.5' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.admin-preview-toggle {
  position: fixed !important;
  right: 5px !important;
  top: 5px !important;
  z-index: 150 !important;
  width: auto !important;
  min-width: 3.1rem !important;
  max-width: none !important;
  height: 1.75rem !important;
  min-height: 1.75rem !important;
  padding: 0 0.58rem !important;
  color: var(--custom-copy) !important;
  font-size: 0.52rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  border: 1px solid var(--pf-chat-neon) !important;
  border-radius: 6px !important;
  background: var(--custom-panel) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.admin-preview-toggle.is-active {
  color: var(--pf-chat-neon) !important;
}

.admin-preview {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 130 !important;
  display: grid !important;
  grid-template-rows: 3.2rem minmax(0, 1fr) !important;
  width: 100vw !important;
  height: 100vh !important;
  border-left: 0 !important;
  background: var(--custom-panel) !important;
  transform: translateX(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.18s ease, opacity 0.18s ease !important;
}

body.is-admin-preview-open .admin-preview {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.admin-preview-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 0.5rem 0.75rem !important;
  border-bottom: 1px solid var(--custom-line) !important;
}

.admin-preview-eyebrow,
.admin-preview-url {
  margin: 0 !important;
  line-height: 1.1 !important;
}

.admin-preview-eyebrow {
  color: var(--pf-chat-neon) !important;
  font-size: 0.52rem !important;
  font-weight: 800 !important;
}

.admin-preview-url {
  color: var(--custom-copy) !important;
  font-size: 0.58rem !important;
}

.admin-preview-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

.admin-preview-actions a,
.admin-preview-actions button {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 1.65rem !important;
  height: 1.55rem !important;
  padding: 0 0.45rem !important;
  border: 1px solid var(--custom-line) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--custom-copy) !important;
  font: inherit !important;
  font-size: 0.55rem !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.admin-preview iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: var(--custom-bg) !important;
}

body.is-admin-preview-open {
  overflow: hidden !important;
}

body.is-admin-preview-open .manual-theme-toggle {
  display: none !important;
}

body.is-admin-preview-open .main {
  margin-right: 0 !important;
}

body.is-admin-preview-open .chat-root--home {
  position: fixed !important;
  left: var(--chat-admin-left, 1rem) !important;
  top: auto !important;
  bottom: 1rem !important;
  z-index: 145 !important;
  display: grid !important;
  grid-template-rows: 36px minmax(0, 1fr) !important;
  width: min(520px, calc(100vw - 2rem)) !important;
  height: min(42vh, 420px) !important;
  border-radius: 6px !important;
}

body.is-admin-preview-open .chat-root--home.is-admin-chat-positioned {
  top: var(--chat-admin-top, 1rem) !important;
  bottom: auto !important;
}

body.is-admin-preview-open.is-admin-chat-collapsed .chat-root--home {
  display: none !important;
}

body.is-admin-preview-open.is-admin-chat-collapsed .ai-fab {
  display: inline-flex !important;
  z-index: 150 !important;
}

body.is-admin-preview-open .chat-root--home.is-admin-chat-maximized {
  width: min(640px, calc(100vw - 2rem)) !important;
  height: min(78vh, 720px) !important;
}

body.is-admin-chat-dragging {
  cursor: grabbing !important;
  user-select: none !important;
}

#chat-root .chat-admin-windowbar {
  display: none !important;
}

body.is-admin-preview-open #chat-root .chat-admin-windowbar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 0.35rem 0 0 !important;
  border: 1px solid var(--custom-line) !important;
  border-bottom: 0 !important;
  border-radius: 6px 6px 0 0 !important;
  background: color-mix(in srgb, var(--custom-panel) 92%, var(--custom-bg)) !important;
  color: var(--custom-copy) !important;
  font-family: Lato, "Helvetica Neue", Arial, sans-serif !important;
  user-select: none !important;
}

:root[data-manual-theme="dark"] body.is-admin-preview-open #chat-root .chat-admin-windowbar {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 24%, var(--custom-line)) !important;
  background: linear-gradient(180deg, #171717 0%, #121212 100%) !important;
  color: #e8e8e8 !important;
}

body.is-admin-chat-dragging #chat-root .chat-admin-windowbar {
  cursor: grabbing !important;
}

body.is-admin-preview-open #chat-root .chat-admin-windowbar-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 0.65rem !important;
  color: var(--custom-copy) !important;
  cursor: grab !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  line-height: 36px !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.is-admin-chat-dragging #chat-root .chat-admin-windowbar-title {
  cursor: grabbing !important;
}

:root[data-manual-theme="dark"] body.is-admin-preview-open #chat-root .chat-admin-windowbar-title {
  color: #e8e8e8 !important;
}

body.is-admin-preview-open #chat-root .chat-admin-window-controls {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.18rem !important;
  height: 36px !important;
  padding-right: 0.35rem !important;
  color: var(--custom-muted) !important;
  pointer-events: auto !important;
}

body.is-admin-preview-open #chat-root .chat-admin-window-btn {
  display: inline-grid !important;
  place-items: center !important;
  width: 1.55rem !important;
  height: 1.55rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !important;
}

body.is-admin-preview-open #chat-root .chat-admin-window-btn:hover,
body.is-admin-preview-open #chat-root .chat-admin-window-btn:focus-visible {
  background: color-mix(in srgb, var(--pf-chat-neon) 16%, transparent) !important;
  color: var(--custom-copy) !important;
  outline: none !important;
}

body.is-admin-preview-open #chat-root .chat-admin-window-icon {
  position: relative !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  color: var(--custom-muted) !important;
  flex: 0 0 12px !important;
}

:root[data-manual-theme="dark"] body.is-admin-preview-open #chat-root .chat-admin-window-controls,
:root[data-manual-theme="dark"] body.is-admin-preview-open #chat-root .chat-admin-window-icon {
  color: #b4b4b4 !important;
}

body.is-admin-preview-open #chat-root .chat-admin-window-icon--min::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 1px !important;
  border-bottom: 1px solid currentColor !important;
}

body.is-admin-preview-open #chat-root .chat-admin-window-icon--max::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid currentColor !important;
}

body.is-admin-preview-open #chat-root .chat-admin-window-icon--close::before,
body.is-admin-preview-open #chat-root .chat-admin-window-icon--close::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  width: 14px !important;
  border-bottom: 1px solid currentColor !important;
  transform-origin: center !important;
}

body.is-admin-preview-open #chat-root .chat-admin-window-icon--close::before {
  transform: rotate(45deg) !important;
}

body.is-admin-preview-open #chat-root .chat-admin-window-icon--close::after {
  transform: rotate(-45deg) !important;
}

body.is-admin-preview-open .chat-root--home .chat-shell,
body.is-admin-preview-open .chat-root--home .chat-body,
body.is-admin-preview-open .chat-root--home .chat-layout,
body.is-admin-preview-open .chat-root--home .chat-main {
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 6px !important;
}

body.is-admin-preview-open .chat-root--home .chat-shell {
  border: 1px solid var(--custom-line) !important;
  background: var(--custom-bg) !important;
  overflow: hidden !important;
}

body.is-admin-preview-open .chat-root--home .chat-log {
  padding: 0.75rem !important;
}

body.is-admin-preview-open .chat-root--home .chat-compose {
  padding: 0.5rem !important;
  align-items: stretch !important;
}

body.is-admin-preview-open .chat-root--home .chat-account-panel {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) 3.4rem 1.65rem !important;
  gap: 0.25rem !important;
  margin: 0 0 0.35rem !important;
  padding: 0.3rem !important;
  border-radius: 4px !important;
}

#chat-root .chat-session-open {
  grid-column: 1 / -1 !important;
  height: 1.55rem !important;
  border: 1px solid var(--pf-chat-neon) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--pf-chat-neon) !important;
  font: inherit !important;
  font-size: 0.58rem !important;
}

#chat-root .chat-session-panel {
  order: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 0.3rem !important;
  width: min(735px, calc(100vw - 2rem)) !important;
  margin: 0 auto 0.42rem !important;
  padding: 0.42rem !important;
  border: 1px solid var(--pf-chat-neon) !important;
  border-radius: 6px !important;
  background: var(--custom-panel) !important;
  color: var(--custom-copy) !important;
  pointer-events: auto !important;
}

#chat-root .chat-session-panel.hidden {
  display: none !important;
}

#chat-root .chat-session-panel label,
#chat-root .chat-session-panel p {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  color: var(--custom-muted) !important;
  font-size: 0.56rem !important;
  line-height: 1.2 !important;
}

#chat-root .chat-session-panel textarea {
  grid-column: 1 / -1 !important;
  min-height: 4.2rem !important;
  resize: vertical !important;
  padding: 0.35rem 0.45rem !important;
  border: 1px solid var(--custom-line) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--custom-copy) !important;
  font: inherit !important;
  font-size: 0.62rem !important;
}

#chat-root .chat-session-panel button {
  display: grid !important;
  place-items: center !important;
  height: 1.9rem !important;
  min-width: 0 !important;
  padding: 0 0.55rem !important;
  border: 1px solid var(--pf-chat-neon) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--pf-chat-neon) !important;
  font: inherit !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#chat-root .chat-session-panel button:disabled {
  opacity: 0.55 !important;
  cursor: wait !important;
}

.chat-session-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10080;
  background: rgba(0, 0, 0, 0.48);
  pointer-events: auto;
}

.chat-session-overlay-backdrop.hidden {
  display: none !important;
}

body.is-admin-session-overlay-open #chat-session-panel {
  position: fixed !important;
  z-index: 10090 !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  width: min(32rem, calc(100vw - 2rem)) !important;
  max-width: min(32rem, calc(100vw - 2rem)) !important;
  margin: 0 !important;
  order: unset !important;
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 6px !important;
  background: var(--dx-panel, #2d2d2d) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42) !important;
  pointer-events: auto !important;
}

body.is-admin-session-overlay-open #chat-session-panel.hidden {
  display: none !important;
}

body.is-admin-session-overlay-open #chat-session-panel label {
  color: var(--dx-label, #999999) !important;
  font-family: var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.56rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

body.is-admin-session-overlay-open #chat-session-panel textarea {
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 3px !important;
  background: var(--dx-bar, #262626) !important;
  color: var(--dx-copy, #e6e6e6) !important;
}

body.is-admin-session-overlay-open #chat-session-panel button {
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 3px !important;
  background: var(--dx-elevated, #333333) !important;
  color: var(--dx-copy, #e6e6e6) !important;
}

body.is-admin-session-overlay-open #chat-session-panel #chat-session-connect {
  border-color: color-mix(in srgb, var(--dx-toggle, #0099ff) 60%, var(--dx-line, #3a3a3a) 40%) !important;
  background: var(--dx-toggle, #0099ff) !important;
  color: var(--dx-toggle-ink, #12181c) !important;
}

body.is-admin-session-overlay-open #chat-session-panel p {
  color: var(--dx-muted, #8a8a8a) !important;
}

#chat-root .chat-account-toolbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.34rem;
  align-items: center;
}

#chat-root .chat-account-toolbar .chat-mode-picker {
  grid-column: auto;
  width: 100%;
}

#chat-root .chat-mode-picker {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}

#chat-root .chat-mode-picker button {
  height: 1.9rem !important;
  min-height: 1.9rem !important;
  border: 1px solid var(--custom-line) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--custom-muted) !important;
  font: inherit !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

#chat-root .chat-mode-picker button.is-active {
  border-color: var(--pf-chat-neon) !important;
  background: var(--pf-chat-neon-soft) !important;
  color: var(--pf-chat-neon) !important;
}

#chat-root .chat-model-picker {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}

#chat-root .chat-model-picker button {
  height: 1.9rem !important;
  min-height: 1.9rem !important;
  border: 1px solid var(--custom-line) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--custom-muted) !important;
  font: inherit !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

#chat-root .chat-model-picker button.is-active {
  border-color: var(--pf-chat-neon) !important;
  background: var(--pf-chat-neon-soft) !important;
  color: var(--pf-chat-neon) !important;
}

#chat-root .chat-model-picker button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

#chat-root .chat-target-picker {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}

#chat-root .chat-target-picker button {
  height: 1.9rem !important;
  min-height: 1.9rem !important;
  border: 1px solid var(--custom-line) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--custom-muted) !important;
  font: inherit !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

#chat-root .chat-target-picker button.is-active {
  border-color: var(--pf-chat-neon) !important;
  background: var(--pf-chat-neon-soft) !important;
  color: var(--pf-chat-neon) !important;
}

body.is-admin-preview-open #chat-root .chat-session-panel {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  margin: 0 0 0.35rem !important;
  padding: 0.42rem !important;
}

body.is-admin-preview-open #chat-root .chat-session-panel textarea {
  min-height: 4.8rem !important;
}

body.is-admin-preview-open #chat-root .chat-session-panel button {
  height: 2rem !important;
  font-size: 0.62rem !important;
}

body.is-admin-preview-open .chat-root--home .chat-account-panel label,
body.is-admin-preview-open .chat-root--home .chat-account-panel p {
  font-size: 0.52rem !important;
  line-height: 1.15 !important;
}

body.is-admin-preview-open .chat-root--home .chat-account-panel input,
body.is-admin-preview-open .chat-root--home .chat-account-panel button {
  height: 1.65rem !important;
  border-radius: 4px !important;
  font-size: 0.58rem !important;
}

body.is-admin-preview-open .chat-root--home #chat-account-clear {
  width: 1.65rem !important;
}

body.is-admin-preview-open .chat-root--home .chat-form {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: 1.35rem 1.35rem 1.35rem minmax(0, 1fr) 1.65rem !important;
  gap: 0.24rem !important;
  min-height: 2.2rem !important;
  padding: 0.24rem !important;
}

body.is-admin-preview-open .chat-root--home .chat-tool,
body.is-admin-preview-open .chat-root--home .chat-send-icon {
  width: 1.35rem !important;
  min-width: 1.35rem !important;
  max-width: 1.35rem !important;
  height: 1.35rem !important;
  min-height: 1.35rem !important;
  align-self: center !important;
}

body.is-admin-preview-open .chat-root--home .chat-form textarea {
  grid-column: 4 !important;
  height: 1.65rem !important;
  min-height: 1.65rem !important;
  padding: 0.26rem 0.38rem !important;
  font-size: 0.64rem !important;
  line-height: 1.25 !important;
}

body.is-admin-preview-open .chat-root--home .chat-send-icon {
  grid-column: 5 !important;
  width: 1.65rem !important;
  min-width: 1.65rem !important;
  max-width: 1.65rem !important;
  height: 1.65rem !important;
  min-height: 1.65rem !important;
}

body.is-sidebar-collapsed .manual-theme-toggle {
  left: 3px !important;
  top: 3px !important;
}

body.is-sidebar-collapsed .sidebar-toggle {
  left: 3px !important;
  top: 2.25rem !important;
  width: 1.55rem !important;
  height: 1.55rem !important;
}

:root:not([data-manual-theme="dark"]) body,
:root:not([data-manual-theme="dark"]) .app,
:root:not([data-manual-theme="dark"]) .main,
:root:not([data-manual-theme="dark"]) .content,
:root:not([data-manual-theme="dark"]) body.is-chat-home,
:root:not([data-manual-theme="dark"]) body.is-chat-home .main,
:root:not([data-manual-theme="dark"]) body.is-chat-home .content,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-shell,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-body,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-layout,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-main,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-log {
  background: #dddddd !important;
  background-image: none !important;
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) .sidebar,
:root:not([data-manual-theme="dark"]) .sidebar-header,
:root:not([data-manual-theme="dark"]) .nav-tree {
  background: #d6d6d6 !important;
  background-image: none !important;
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) .brand,
:root:not([data-manual-theme="dark"]) .subtitle,
:root:not([data-manual-theme="dark"]) .tab,
:root:not([data-manual-theme="dark"]) .nav-section-title,
:root:not([data-manual-theme="dark"]) .nav-folder summary,
:root:not([data-manual-theme="dark"]) .folder-label,
:root:not([data-manual-theme="dark"]) .folder-desc,
:root:not([data-manual-theme="dark"]) .nav-link,
:root:not([data-manual-theme="dark"]) .folder-count {
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) .tabs,
:root:not([data-manual-theme="dark"]) .nav-section,
:root:not([data-manual-theme="dark"]) .nav-folder--topic[open],
:root:not([data-manual-theme="dark"]) .folder-count {
  background: #cccccc !important;
  background-image: none !important;
  border-color: #a8a8a8 !important;
}

:root:not([data-manual-theme="dark"]) #search {
  background: #c4c4c4 !important;
  background-image: none !important;
  border-color: #0099cc !important;
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) #search::placeholder {
  color: #6f6f6f !important;
}

:root:not([data-manual-theme="dark"]) .main-top,
:root:not([data-manual-theme="dark"]) body.is-article-view .main-top {
  background: #d6d6d6 !important;
  background-image: none !important;
  border-color: #a8a8a8 !important;
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) .main-top-label {
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) body.is-article-view .main-top-actions {
  display: none !important;
}

:root:not([data-manual-theme="dark"]) .prose,
:root:not([data-manual-theme="dark"]) .prose p,
:root:not([data-manual-theme="dark"]) .prose li,
:root:not([data-manual-theme="dark"]) .prose strong,
:root:not([data-manual-theme="dark"]) .prose h1,
:root:not([data-manual-theme="dark"]) .prose h2,
:root:not([data-manual-theme="dark"]) .prose h3,
:root:not([data-manual-theme="dark"]) .prose h4,
:root:not([data-manual-theme="dark"]) .article-title,
:root:not([data-manual-theme="dark"]) .article-copy {
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) .tab.active,
:root:not([data-manual-theme="dark"]) .tab:hover,
:root:not([data-manual-theme="dark"]) .nav-link:hover,
:root:not([data-manual-theme="dark"]) .nav-link.active {
  background: #bfbfbf !important;
  background-image: none !important;
  border-color: #0099cc !important;
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) .nav-folder--topic[open] .nav-link,
:root:not([data-manual-theme="dark"]) .nav-folder[open] .nav-link {
  background: transparent !important;
  background-image: none !important;
  color: #222222 !important;
  opacity: 1 !important;
}

:root:not([data-manual-theme="dark"]) .nav-folder--topic[open] .nav-link:hover,
:root:not([data-manual-theme="dark"]) .nav-folder--topic[open] .nav-link.active,
:root:not([data-manual-theme="dark"]) .nav-folder[open] .nav-link:hover,
:root:not([data-manual-theme="dark"]) .nav-folder[open] .nav-link.active {
  background: #bfbfbf !important;
  background-image: none !important;
  border-color: #0099cc !important;
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) .manual-theme-toggle,
:root:not([data-manual-theme="dark"]) .sidebar-toggle,
:root:not([data-manual-theme="dark"]) .nav-folder summary::before,
:root:not([data-manual-theme="dark"]) .nav-folder[open] summary::before {
  background-color: #cccccc !important;
  border-color: #0099cc !important;
  color: #0099cc !important;
}

:root[data-manual-theme="dark"] .sidebar,
:root[data-manual-theme="dark"] .sidebar-header,
:root[data-manual-theme="dark"] .nav-tree,
:root[data-manual-theme="dark"] .nav-section,
:root[data-manual-theme="dark"] .nav-folder--topic[open] {
  background: #151515 !important;
  background-image: none !important;
  color: #d0d0d0 !important;
}

:root[data-manual-theme="dark"] .tabs,
:root[data-manual-theme="dark"] #search,
:root[data-manual-theme="dark"] .folder-count,
:root[data-manual-theme="dark"] .manual-theme-toggle,
:root[data-manual-theme="dark"] .sidebar-toggle {
  background: #111111 !important;
  background-image: none !important;
  border-color: #2a2a2a !important;
  color: #d0d0d0 !important;
}

:root[data-manual-theme="dark"] .tab,
:root[data-manual-theme="dark"] .nav-section-title,
:root[data-manual-theme="dark"] .nav-folder summary,
:root[data-manual-theme="dark"] .folder-label,
:root[data-manual-theme="dark"] .folder-desc,
:root[data-manual-theme="dark"] .nav-link {
  color: #d0d0d0 !important;
}

:root[data-manual-theme="dark"] .tab.active,
:root[data-manual-theme="dark"] .tab:hover,
:root[data-manual-theme="dark"] .nav-link:hover,
:root[data-manual-theme="dark"] .nav-link.active {
  background: #222222 !important;
  background-image: none !important;
  border-color: #00d9ff !important;
  color: #e8e8e8 !important;
}

:root[data-manual-theme="dark"] body.is-article-view .main-top-actions {
  display: none !important;
}

:root[data-manual-theme="dark"] #search {
  border-color: #00d9ff !important;
}

:root[data-manual-theme="dark"] #search::placeholder {
  color: #9a9a9a !important;
}

:root[data-manual-theme="dark"] .manual-theme-toggle,
:root[data-manual-theme="dark"] .sidebar-toggle,
:root[data-manual-theme="dark"] .nav-folder summary::before,
:root[data-manual-theme="dark"] .nav-folder[open] summary::before {
  border-color: #00d9ff !important;
  color: #00d9ff !important;
}

:root:not([data-manual-theme="dark"]) {
  --pf-chat-neon: #008fbd !important;
  --neon: #008fbd !important;
  --neon-border: #008fbd !important;
}

:root:not([data-manual-theme="dark"]) .manual-theme-toggle,
:root:not([data-manual-theme="dark"]) .sidebar-toggle,
:root:not([data-manual-theme="dark"]) #search,
:root:not([data-manual-theme="dark"]) .tab.active,
:root:not([data-manual-theme="dark"]) .tab:hover,
:root:not([data-manual-theme="dark"]) .nav-link:hover,
:root:not([data-manual-theme="dark"]) .nav-link.active,
:root:not([data-manual-theme="dark"]) .nav-folder summary::before,
:root:not([data-manual-theme="dark"]) .nav-folder[open] summary::before {
  border-color: #008fbd !important;
  color: #008fbd !important;
}

:root:not([data-manual-theme="dark"]) .nav-folder summary::before,
:root:not([data-manual-theme="dark"]) .nav-folder[open] summary::before {
  background-color: #cfcfcf !important;
}

/* Designs: theme-aware page plus homepage-style labels under previews. */
body.is-designs-view .designs-gallery {
  padding: clamp(1.35rem, 3vw, 2.5rem) !important;
}

body.is-designs-view .designs-grid {
  gap: 1.35rem 1.1rem !important;
}

body.is-designs-view .template-card {
  position: relative !important;
  overflow: visible !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
}

body.is-designs-view .template-card:hover,
body.is-designs-view .template-card:focus-visible {
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.is-designs-view .template-card-media {
  border: 1px solid var(--custom-line) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: var(--custom-panel) !important;
  transition: border-color 0.18s ease, transform 0.18s ease !important;
}

body.is-designs-view .template-card-media img,
body.is-designs-view .template-card-media video {
  border-radius: 0 !important;
}

body.is-designs-view .template-card-body {
  position: relative !important;
  width: 100% !important;
  margin: -1px 0 0 !important;
  padding: 0.58rem 0.7rem 0.68rem !important;
  border: 1px solid var(--custom-line) !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  background: var(--custom-panel) !important;
  color: var(--custom-copy) !important;
  gap: 0.22rem !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, -1rem, 0) !important;
  transition: border-color 0.18s ease, opacity 0.18s ease, transform 0.18s ease !important;
}

body.is-designs-view .template-card-body::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 2.2rem !important;
  height: 2px !important;
  background: var(--pf-chat-neon) !important;
  transition: width 0.18s ease !important;
}

body.is-designs-view .template-card-name,
body.is-designs-view .template-card-tagline,
body.is-designs-view .template-card-cta {
  text-decoration: none !important;
}

body.is-designs-view .template-card-name {
  color: var(--custom-copy) !important;
  font-size: 0.82rem !important;
  line-height: 1.1 !important;
}

body.is-designs-view .template-card-tagline {
  color: var(--pf-chat-neon) !important;
  font-size: 0.62rem !important;
  line-height: 1.15 !important;
}

body.is-designs-view .template-card-cta.btn-neon {
  min-height: 1.35rem !important;
  margin-top: 0.42rem !important;
  padding: 0 0.62rem !important;
  border: 1px solid var(--pf-chat-neon) !important;
  border-radius: 999px !important;
  background: var(--custom-bg) !important;
  color: var(--custom-copy) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-size: 0.55rem !important;
}

body.is-designs-view .template-card:hover .template-card-media,
body.is-designs-view .template-card:focus-visible .template-card-media {
  border-color: var(--pf-chat-neon) !important;
  transform: translate3d(0, -0.15rem, 0) !important;
}

body.is-designs-view .template-card:hover .template-card-body,
body.is-designs-view .template-card:focus-visible .template-card-body,
body.is-designs-view .template-card:focus-within .template-card-body {
  width: 100% !important;
  margin-left: 0 !important;
  border-color: var(--pf-chat-neon) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate3d(0, -3px, 0) !important;
}

body.is-designs-view .template-card:hover .template-card-body::before,
body.is-designs-view .template-card:focus-visible .template-card-body::before,
body.is-designs-view .template-card:focus-within .template-card-body::before {
  width: 100% !important;
}

body.is-designs-view .template-card:hover .template-card-cta.btn-neon {
  background: var(--custom-panel) !important;
  color: var(--pf-chat-neon) !important;
  box-shadow: none !important;
}

:root:not([data-manual-theme="dark"]) body.is-designs-view,
:root:not([data-manual-theme="dark"]) body.is-designs-view .app,
:root:not([data-manual-theme="dark"]) body.is-designs-view .main,
:root:not([data-manual-theme="dark"]) body.is-designs-view .main-top,
:root:not([data-manual-theme="dark"]) body.is-designs-view .content,
:root:not([data-manual-theme="dark"]) body.is-designs-view .designs-home,
:root:not([data-manual-theme="dark"]) body.is-designs-view .designs-gallery {
  background: #dddddd !important;
  background-image: none !important;
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) body.is-designs-view .main-top {
  border-color: #a8a8a8 !important;
}

:root:not([data-manual-theme="dark"]) body.is-designs-view .main-top-label,
:root:not([data-manual-theme="dark"]) body.is-designs-view .designs-gallery-eyebrow,
:root:not([data-manual-theme="dark"]) body.is-designs-view .designs-gallery-head h2,
:root:not([data-manual-theme="dark"]) body.is-designs-view .designs-gallery-intro {
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) body.is-designs-view .designs-filter {
  background: #c4c4c4 !important;
  border-color: #008fbd !important;
  border-radius: 0 !important;
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) body.is-designs-view .template-card-media {
  background: #d6d6d6 !important;
  border-color: #a8a8a8 !important;
}

:root:not([data-manual-theme="dark"]) body.is-designs-view .template-card-body {
  background: #d6d6d6 !important;
  border-color: #a8a8a8 !important;
  border-top-color: #008fbd !important;
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) body.is-designs-view .template-card-name {
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) body.is-designs-view .template-card-tagline {
  color: #008fbd !important;
}

:root:not([data-manual-theme="dark"]) body.is-designs-view .template-card-cta.btn-neon {
  background: #dddddd !important;
  border-color: #008fbd !important;
  color: #222222 !important;
}

:root[data-manual-theme="dark"] body.is-designs-view,
:root[data-manual-theme="dark"] body.is-designs-view .app,
:root[data-manual-theme="dark"] body.is-designs-view .main,
:root[data-manual-theme="dark"] body.is-designs-view .main-top,
:root[data-manual-theme="dark"] body.is-designs-view .content,
:root[data-manual-theme="dark"] body.is-designs-view .designs-home,
:root[data-manual-theme="dark"] body.is-designs-view .designs-gallery {
  background: #111111 !important;
  background-image: none !important;
  color: #d0d0d0 !important;
}

:root[data-manual-theme="dark"] body.is-designs-view .main-top {
  border-color: #2a2a2a !important;
}

:root[data-manual-theme="dark"] body.is-designs-view .main-top-label,
:root[data-manual-theme="dark"] body.is-designs-view .designs-gallery-eyebrow,
:root[data-manual-theme="dark"] body.is-designs-view .designs-gallery-head h2,
:root[data-manual-theme="dark"] body.is-designs-view .designs-gallery-intro {
  color: #d0d0d0 !important;
}

:root[data-manual-theme="dark"] body.is-designs-view .designs-filter {
  background: #151515 !important;
  border-color: #00d9ff !important;
  border-radius: 0 !important;
  color: #d0d0d0 !important;
}

:root[data-manual-theme="dark"] body.is-designs-view .template-card-media {
  background: #111111 !important;
  border-color: #2a2a2a !important;
}

:root[data-manual-theme="dark"] body.is-designs-view .template-card-body {
  background: #151515 !important;
  border-color: #2a2a2a !important;
  border-top-color: #00d9ff !important;
  color: #d0d0d0 !important;
}

:root[data-manual-theme="dark"] body.is-designs-view .template-card-name {
  color: #d0d0d0 !important;
}

:root[data-manual-theme="dark"] body.is-designs-view .template-card-tagline {
  color: #00d9ff !important;
}

:root[data-manual-theme="dark"] body.is-designs-view .template-card-cta.btn-neon {
  background: #111111 !important;
  border-color: #00d9ff !important;
  color: #d0d0d0 !important;
}

/* Support article pages use a single full-width reading column. */
body.is-article-view .article-hero,
body.is-article-view .article-rail {
  display: none !important;
}

body.is-article-view .article-copy,
body.is-article-view .article-layout,
body.is-article-view .article-main {
  width: 100%;
  max-width: none;
}

body.is-article-view .article-layout {
  display: block;
}

/* Design setup wizard launched from template thumbnails. */
.design-setup.hidden {
  display: none !important;
}

.design-setup {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: clamp(0.8rem, 2vw, 1.5rem);
  background: color-mix(in srgb, var(--custom-bg) 78%, transparent);
}

.design-setup-panel {
  width: min(960px, calc(100vw - 2rem));
  height: min(92vh, 820px);
  max-height: min(92vh, 820px);
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  border: 1px solid var(--pf-chat-neon);
  border-radius: 6px;
  background: var(--custom-bg);
  color: var(--custom-copy);
  box-shadow: 0 0 0 1px var(--custom-line);
  overflow: hidden;
}

.design-setup-head,
.design-setup-actions,
.design-setup-tabs {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-bottom: 1px solid var(--custom-line);
  padding: 0.85rem 1rem;
}

.design-setup-head {
  justify-content: space-between;
}

.design-setup-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--custom-line);
  border-bottom: 0;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.design-setup-actions #design-setup-back {
  margin-right: auto;
}

.design-setup-kicker,
.design-setup-head h2,
.design-setup-section-head h4,
.design-setup-section-head p,
.design-setup-preview h3,
.design-setup-preview p {
  margin: 0;
}

.design-setup-kicker {
  color: var(--pf-chat-neon);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.design-setup-head h2 {
  margin-top: 0.16rem;
  color: var(--custom-copy);
  font-size: 1.05rem;
  line-height: 1.15;
}

.design-setup-icon {
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--pf-chat-neon);
  border-radius: 6px;
  background: transparent;
  color: var(--pf-chat-neon);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.design-setup-icon[aria-label^="Close"] {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#design-setup-close {
  position: absolute;
  top: 0.62rem;
  right: 0.62rem;
}

.design-setup-head {
  padding-right: 2.7rem;
}

.design-setup-tabs {
  padding-block: 0.55rem;
  flex-wrap: wrap;
}

.design-setup-tabs button {
  min-height: 1.85rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  padding: 0 0.75rem;
}

.design-setup-tabs button.is-active {
  border-color: var(--pf-chat-neon);
  color: var(--pf-chat-neon);
}

.design-setup-actions .btn-neon:disabled {
  opacity: 0.5;
  cursor: default;
}

.design-setup-actions .design-setup-action.btn-neon {
  min-height: 2.4rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 55%, var(--custom-line)) !important;
  border-radius: 6px !important;
  background: var(--custom-panel) !important;
  color: var(--custom-copy) !important;
  box-shadow: none !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  padding-inline: 1rem !important;
}

.design-setup-actions .design-setup-action--primary.btn-neon {
  background: color-mix(in srgb, var(--pf-chat-neon) 28%, var(--custom-panel)) !important;
  border-color: var(--pf-chat-neon) !important;
  color: var(--pf-chat-neon) !important;
}

.design-setup-actions .design-setup-action--quiet.btn-neon {
  border-color: var(--custom-line) !important;
  color: var(--custom-muted) !important;
}

.design-setup-actions .design-setup-action.btn-neon:hover:not(:disabled) {
  background: color-mix(in srgb, var(--pf-chat-neon) 14%, var(--custom-panel)) !important;
  color: var(--pf-chat-neon) !important;
}

.design-setup-form {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1rem;
}

.design-setup-step.is-active,
.design-setup-step.is-active .design-setup-grid {
  min-height: 0;
}

.design-setup-step.hidden {
  display: none !important;
}

.design-setup-preview {
  display: grid;
  grid-template-columns: minmax(160px, 280px) 1fr;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.design-setup-preview .template-card-media {
  min-height: 155px;
  border: 1px solid var(--custom-line);
  border-radius: 0;
  overflow: hidden;
  background: var(--custom-panel);
}

.design-setup-preview .template-card-media img,
.design-setup-preview .template-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.design-setup-preview h3 {
  color: var(--custom-copy);
  font-size: 1.1rem;
  line-height: 1.2;
}

.design-setup-preview p {
  margin-top: 0.45rem;
  color: var(--custom-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.design-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.design-setup-grid--simple {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.15rem;
  max-width: 26rem;
  margin-top: 0.25rem;
}

.design-setup-brand-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.35fr);
  gap: 1rem 1.25rem;
  align-items: start;
  margin-top: 0.25rem;
}

.design-setup-brand-column {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}

.design-setup-brand-section {
  display: grid;
  gap: 0.55rem;
  padding: 0.68rem 0.72rem;
  border: 1px solid var(--custom-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--custom-panel) 90%, transparent);
}

.design-setup-brand-section--logo {
  gap: 0.42rem;
}

.design-setup-brand-field-label {
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--custom-muted);
}

.design-setup-brand-logo-field {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.design-setup-brand-logo-field input {
  width: 100%;
  min-height: 1.65rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-bg);
  color: var(--custom-copy);
  font: inherit;
  font-size: 0.72rem;
  padding: 0.22rem 0.42rem;
}

.design-setup-brand-logo-field input:focus {
  outline: none;
  border-color: var(--pf-chat-neon);
}

.design-setup-brand-logo-upload {
  position: relative;
  display: grid;
  grid-template-columns: 0.9rem minmax(0, 1fr);
  align-items: center;
  gap: 0.38rem;
  min-height: 1.65rem;
  padding: 0.22rem 0.42rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-bg);
  color: var(--custom-copy);
  cursor: pointer;
}

.design-setup-brand-logo-upload svg {
  width: 0.85rem;
  height: 0.85rem;
  stroke: var(--pf-chat-neon);
  stroke-width: 2;
  fill: none;
}

.design-setup-brand-logo-upload span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--custom-copy);
}

.design-setup-brand-logo-upload span small {
  color: var(--custom-muted);
  font-size: 0.64rem;
  font-weight: 500;
}

.design-setup-brand-logo-upload input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.design-setup-brand-font-field {
  gap: 0.28rem;
}

.design-setup-brand-section-head .design-setup-layout-field-head {
  margin-bottom: 0.1rem;
}

.design-setup-brand-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.55rem;
}

.design-setup-font-select {
  width: 100%;
  min-height: 1.65rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-bg);
  color: var(--custom-copy);
  font-size: 0.72rem;
  padding: 0.22rem 0.42rem;
}

.design-setup-palette-group {
  display: grid;
  gap: 0.45rem;
}

.design-setup-palette-group + .design-setup-palette-group {
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px solid color-mix(in srgb, var(--custom-line) 88%, transparent);
}

.design-setup-palette-group-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--custom-muted) 82%, var(--pf-chat-neon) 18%);
}

.design-setup-palette-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.55rem;
}

.design-setup-color-field {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.design-setup-color-field > span:first-child {
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--custom-muted);
}

.design-setup-color-input {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.35rem;
  align-items: center;
}

.design-setup-color-input input[type="color"] {
  width: 2rem;
  height: 1.65rem;
  padding: 0.08rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-bg);
  cursor: pointer;
}

.design-setup-color-hex {
  min-height: 1.65rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-bg);
  color: var(--custom-copy);
  font: 600 0.68rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
  padding: 0.22rem 0.42rem;
}

.design-setup-color-field--alpha .design-setup-color-alpha {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.design-setup-color-field--alpha input[type="number"] {
  width: 4.2rem;
  min-height: 1.65rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-bg);
  color: var(--custom-copy);
  font-size: 0.72rem;
  padding: 0.22rem 0.42rem;
}

.design-setup-color-field--alpha small {
  color: var(--custom-muted);
  font-size: 0.68rem;
}

.design-setup-step--brand .design-setup-preview--compact {
  margin-bottom: 1.35rem;
  gap: 1.15rem;
}

.design-setup-step--brand .design-setup-preview--compact h3 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.design-setup-step--brand .design-setup-preview--compact p {
  margin-top: 0.35rem;
  max-width: 34ch;
  font-size: 0.8rem;
}

.design-setup-field--simple {
  gap: 0.5rem;
}

.design-setup-field--simple span {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--custom-muted);
}

.design-setup-file-upload--simple {
  min-height: 2.75rem;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--custom-line) 88%, var(--pf-chat-neon) 12%);
  background: color-mix(in srgb, var(--custom-panel) 92%, transparent);
}

.design-setup-file-upload--simple span {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--custom-copy);
}

.design-setup-file-upload--simple span small {
  color: var(--custom-muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.design-setup-grid--wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.design-setup-field,
.design-setup-toggle,
.design-setup-file-upload,
.design-setup-section {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.design-setup-field--full,
.design-setup-section {
  grid-column: 1 / -1;
}

.design-setup-field span,
.design-setup-toggle span,
.design-setup-file-upload span,
.design-setup-gallery-row span,
.design-setup-section-head h4 {
  color: var(--custom-copy);
  font-size: 0.7rem;
  font-weight: 750;
}

.design-setup-field small,
.design-setup-gallery-row small,
.design-setup-section-head p {
  color: var(--custom-muted);
  font-size: 0.62rem;
  line-height: 1.45;
}

.design-setup-field input,
.design-setup-field select,
.design-setup-field textarea,
.design-setup-gallery-row input,
.design-setup-page-template select {
  width: 100%;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  font: inherit;
  font-size: 0.72rem;
  padding: 0.58rem 0.65rem;
}

.design-setup-field textarea {
  resize: vertical;
  line-height: 1.5;
}

.design-setup-field input:focus,
.design-setup-field select:focus,
.design-setup-field textarea:focus,
.design-setup-gallery-row input:focus {
  outline: none;
  border-color: var(--pf-chat-neon);
}

.design-setup-font-pair {
  position: relative;
  min-width: 0;
}

.design-setup-font-pair-btn {
  position: relative;
  width: 100%;
  min-height: 2.15rem;
  display: grid;
  align-items: center;
  justify-items: start;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  padding: 0.58rem 2rem 0.58rem 0.65rem;
  text-align: left;
}

.design-setup-font-pair-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.72rem;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-62%) rotate(45deg);
  opacity: 0.72;
  pointer-events: none;
}

.design-setup-font-pair-btn:hover,
.design-setup-font-pair-btn:focus-visible {
  outline: none;
  border-color: var(--pf-chat-neon);
}

.design-setup-font-pair-btn [data-font-pair-label] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.12rem;
  min-width: 0;
  line-height: 1.2;
}

.design-setup-font-pair-menu {
  position: absolute;
  z-index: 8;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  gap: 0.18rem;
  max-height: min(16rem, 42vh);
  overflow: auto;
  border: 1px solid var(--pf-chat-neon);
  border-radius: 6px;
  background: var(--custom-bg);
  padding: 0.32rem;
  box-shadow: 0 10px 24px color-mix(in srgb, #000000 38%, transparent);
}

.design-setup-font-pair-menu.is-floating {
  position: fixed !important;
  z-index: 220 !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 12rem !important;
}

.design-setup-font-pair.is-drop-up .design-setup-font-pair-menu:not(.is-floating) {
  top: auto;
  bottom: calc(100% + 4px);
}

.design-setup-font-pair-menu[hidden] {
  display: none;
}

.design-setup-font-pair-option {
  width: 100%;
  min-height: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.12rem;
  border: 1px solid var(--custom-line);
  border-radius: 4px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 0.42rem 0.55rem;
  text-align: left;
}

.design-setup-font-pair-option:hover,
.design-setup-font-pair-option:focus-visible,
.design-setup-font-pair-option.is-selected {
  border-color: var(--pf-chat-neon);
  color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 8%, var(--custom-panel));
}

.design-setup-toggle {
  grid-column: span 2;
  grid-template-columns: 42px 1fr;
  align-items: center;
  min-height: 2.5rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-panel);
  padding: 0.55rem 0.65rem;
}

.design-setup-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.design-setup-toggle i {
  position: relative;
  display: block;
  width: 42px;
  height: 20px;
  border: 1px solid var(--custom-line);
  border-radius: 3px;
  background: var(--custom-bg);
}

.design-setup-toggle i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--custom-muted);
  transition: transform 0.16s ease, background 0.16s ease;
}

.design-setup-toggle input:checked + i {
  border-color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 16%, var(--custom-bg));
}

.design-setup-toggle input:checked + i::after {
  transform: translateX(20px);
  background: var(--pf-chat-neon);
}

.design-setup-file-upload {
  min-height: 2.5rem;
  grid-template-columns: 1.35rem 1fr;
  align-items: center;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  cursor: pointer;
  padding: 0.55rem 0.65rem;
}

.design-setup-file-upload svg {
  width: 1rem;
  height: 1rem;
  stroke: var(--pf-chat-neon);
  stroke-width: 2;
  fill: none;
}

.design-setup-file-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.design-setup-gallery-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.55rem;
}

.design-setup-menu-builder {
  display: grid;
  gap: 2px;
  margin-top: 0.45rem;
  min-height: 2rem;
  padding-bottom: 0.2rem;
}

.design-setup-menu-builder:focus-visible {
  outline: 1px dashed color-mix(in srgb, var(--pf-chat-neon) 55%, transparent);
  outline-offset: 2px;
}

.design-setup-menu-builder:not(:has([data-menu-row-selected])) {
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--pf-chat-neon) 22%, transparent);
}

.design-setup[data-section-preview-mode="sections"] .design-setup-menu-builder {
  max-height: min(38vh, 24rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
  scrollbar-width: thin;
}

.design-setup[data-section-preview-mode="page"] .design-setup-menu-builder,
.design-setup[data-section-preview-mode="page"] .design-setup-section-actions {
  display: none;
}

.design-setup-menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: center;
  border: 1px solid var(--custom-line);
  border-radius: 4px;
  background: var(--custom-panel);
  padding: 0.1rem 0.14rem 0.1rem 0.22rem;
  transition: margin-left 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.design-setup-menu-row.is-selected {
  border-color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 8%, var(--custom-panel));
}

.design-setup-menu-row.is-submenu {
  margin-left: 1rem;
  border-left-color: var(--pf-chat-neon);
}

.design-setup-menu-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1rem;
  min-width: 0;
}

.design-setup-menu-row.is-routing-parent .design-setup-upload-button {
  opacity: 0.55;
}

.design-setup-menu-row.is-dragging {
  opacity: 0.42;
}

.design-setup-row-drag {
  grid-column: 1;
  width: 1.18rem;
  height: 1.72rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--custom-line);
  border-radius: 4px;
  background:
    radial-gradient(circle, currentColor 1.1px, transparent 1.3px) 3px 4px / 5px 5px,
    var(--custom-bg);
  color: var(--custom-muted);
  cursor: grab;
}

.design-setup-row-drag:active {
  cursor: grabbing;
}

.design-setup-row-drag:hover,
.design-setup-row-drag:focus-visible {
  border-color: var(--pf-chat-neon);
  color: var(--pf-chat-neon);
}

.design-setup-menu-name {
  min-width: 0;
  justify-self: start;
}

.design-setup-row-template,
.design-setup-mini-toggle,
.design-setup-parent-mode {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.design-setup-row-options {
  position: relative;
  display: grid;
  min-width: 0;
}

.design-setup-parent-mode {
  min-height: 1.38rem;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pf-chat-neon);
  font-size: 0.54rem;
  font-weight: 850;
  line-height: 1.1;
  padding: 0 0.2rem;
  white-space: nowrap;
}

.design-setup-menu-name span,
.design-setup-row-template span,
.design-setup-mini-toggle span {
  color: var(--custom-copy);
  font-size: 0.58rem;
  font-weight: 750;
  line-height: 1.2;
}

.design-setup-menu-name input,
.design-setup-row-template select {
  width: 100%;
  min-height: 1.38rem;
  border: 1px solid var(--custom-line);
  border-radius: 4px;
  background: var(--custom-bg);
  color: var(--custom-copy);
  font: inherit;
  font-size: 0.58rem;
  padding: 0.18rem 0.32rem;
}

.design-setup-menu-row .design-setup-type-icon,
.design-setup-menu-row .design-setup-template-icon {
  width: 1.28rem;
  height: 1.28rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.design-setup-menu-row .design-setup-type-button {
  width: 1.38rem;
  height: 1.38rem;
}

.design-setup-menu-row .design-setup-upload-button {
  width: 1.38rem;
  min-width: 1.38rem;
  height: 1.38rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pf-chat-neon);
  font-size: 0;
}

.design-setup-menu-row .design-setup-upload-button:hover,
.design-setup-menu-row .design-setup-upload-button:focus-visible {
  color: var(--custom-copy);
  background: transparent;
}

.design-setup-menu-row .design-setup-row-options-btn {
  width: 1.38rem;
  height: 1.38rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--custom-muted);
}

.design-setup-menu-row .design-setup-row-options-btn:hover,
.design-setup-menu-row .design-setup-row-options-btn:focus-visible,
.design-setup-menu-row .design-setup-row-options-btn.is-active,
.design-setup-menu-row .design-setup-row-options-btn.is-open {
  border: 0;
  color: var(--pf-chat-neon);
  background: transparent;
}

.design-setup-upload-button {
  width: 100%;
  min-width: 1.72rem;
  height: 1.38rem;
  display: inline-grid;
  grid-template-columns: 1fr;
  place-items: center;
  border: 1px solid var(--pf-chat-neon);
  border-radius: 5px;
  background: color-mix(in srgb, var(--pf-chat-neon) 10%, var(--custom-bg));
  color: var(--pf-chat-neon);
  cursor: pointer;
  font-size: 0.58rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0;
}

.design-setup-upload-button svg {
  width: 0.78rem;
  height: 0.78rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.design-setup-upload-button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.design-setup-upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.design-setup-mini-toggle {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  min-height: 1.62rem;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent !important;
  cursor: pointer;
}

.design-setup-row-feature {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  align-self: stretch;
}

.design-setup-row-feature[hidden],
.design-setup-row-template[hidden],
.design-setup-parent-mode[hidden],
.design-setup-row-options[hidden] {
  display: none;
}

.design-setup-parent-mode {
  min-height: 1.38rem;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pf-chat-neon);
  font-size: 0.54rem;
  font-weight: 850;
  line-height: 1.1;
  padding: 0 0.2rem;
  white-space: nowrap;
}

.design-setup-mini-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.design-setup-mini-toggle i {
  position: relative;
  display: block;
  width: 34px;
  height: 18px;
  border: 1px solid var(--custom-line);
  border-radius: 3px;
  background: var(--custom-bg);
}

.design-setup-mini-toggle i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--custom-muted);
  transition: transform 0.16s ease, background 0.16s ease;
}

.design-setup-mini-toggle input:checked + i {
  border-color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 16%, var(--custom-bg));
}

.design-setup-mini-toggle input:checked + i::after {
  transform: translateX(16px);
  background: var(--pf-chat-neon);
}

.design-setup-upload-status {
  position: relative;
  display: none;
  height: 3.35rem;
  max-height: 3.35rem;
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 58%, var(--custom-line));
  border-radius: 6px;
  overflow: hidden;
  padding: 0.12rem 4.45rem 0.12rem 0.28rem;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--pf-chat-neon) 10%, transparent), transparent 42%),
    var(--custom-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 5%, transparent);
}

.design-setup-upload-status strong {
  position: absolute !important;
  top: 50% !important;
  right: 0.32rem !important;
  min-width: 3.48rem !important;
  height: 1.2rem !important;
  display: grid !important;
  place-items: center;
  border: 1px solid var(--pf-chat-neon);
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 18%, var(--custom-bg));
  color: var(--pf-chat-neon);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.design-setup-upload-status::before {
  content: "media";
  position: absolute;
  left: 0.3rem;
  top: 0.12rem;
  padding: 0;
  background: transparent;
  color: var(--custom-muted);
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 1;
}

.design-setup-menu-row.has-upload-images .design-setup-upload-status::before {
  display: none;
}

.design-setup-upload-thumbs {
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  width: 100%;
  height: 50px;
  max-height: 50px;
  padding: 0;
  scrollbar-width: thin;
}

.design-setup-upload-thumbs img,
.design-setup-upload-thumbs img[data-upload-preview] {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 50px !important;
  max-height: 50px !important;
  flex: 0 0 auto !important;
  object-fit: cover !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 35%, var(--custom-line));
  border-radius: 3px;
  box-shadow: none;
}

.design-setup-menu-row.has-uploads .design-setup-upload-status {
  display: grid;
}

.design-setup-section-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.1rem;
  margin-top: 2px;
}

.design-setup-section-action {
  position: relative;
  width: 1.72rem;
  min-width: 1.72rem;
  height: 1.38rem;
  min-height: 1.38rem;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--custom-muted);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.design-setup-section-action svg {
  width: 0.78rem;
  height: 0.78rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.design-setup-section-action span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.design-setup-section-action:hover,
.design-setup-section-action:focus-visible {
  border: 0;
  color: var(--pf-chat-neon);
  background: transparent;
}

.design-setup-section-action[data-menu-add-section] {
  color: var(--pf-chat-neon);
}

.design-setup-section-action[data-menu-remove-section],
.design-setup-section-action[data-menu-copy-section] {
  opacity: 0.42;
  pointer-events: none;
}

.design-setup-menu-builder[data-has-selection="true"] ~ .design-setup-section-actions .design-setup-section-action[data-menu-remove-section],
.design-setup-menu-builder[data-has-selection="true"] ~ .design-setup-section-actions .design-setup-section-action[data-menu-copy-section] {
  opacity: 1;
  pointer-events: auto;
}

.design-setup-section-action[data-menu-remove-section]:hover,
.design-setup-section-action[data-menu-remove-section]:focus-visible {
  color: #ff7a7a;
}

.design-setup-section-preview {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.62rem;
}

.design-setup-site-chrome {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.design-setup-field--logo-settings {
  max-width: 100%;
}

.design-setup-logo-settings {
  position: relative;
  min-width: 0;
}

.design-setup-logo-settings-btn {
  position: relative;
  width: 100%;
  min-height: 2.15rem;
  display: grid;
  align-items: center;
  justify-items: start;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  padding: 0.58rem 2rem 0.58rem 0.65rem;
  text-align: left;
}

.design-setup-logo-settings-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.72rem;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-62%) rotate(45deg);
  opacity: 0.72;
  pointer-events: none;
}

.design-setup-logo-settings-btn:hover,
.design-setup-logo-settings-btn:focus-visible {
  outline: none;
  border-color: var(--pf-chat-neon);
}

.design-setup-logo-settings-btn [data-logo-settings-label] {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.design-setup-logo-settings-menu {
  position: absolute;
  z-index: 8;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  gap: 0.5rem;
  max-height: min(24rem, 62vh);
  overflow-y: auto;
  border: 1px solid var(--pf-chat-neon);
  border-radius: 6px;
  background: var(--custom-bg);
  padding: 0.55rem;
  box-shadow: 0 10px 24px color-mix(in srgb, #000000 38%, transparent);
}

.design-setup-logo-settings-block {
  display: grid;
  gap: 0.28rem;
}

.design-setup-logo-settings-block + .design-setup-logo-settings-block {
  padding-top: 0.35rem;
  border-top: 1px solid var(--custom-line);
}

.design-setup-logo-anchor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.28rem;
  width: min(100%, 8.5rem);
}

.design-setup-logo-anchor-cell {
  aspect-ratio: 1;
  min-height: 1.65rem;
  border: 1px solid var(--custom-line);
  border-radius: 4px;
  background: var(--custom-panel);
  cursor: pointer;
  padding: 0.2rem;
  display: grid;
  place-items: center;
}

.design-setup-logo-anchor-cell span {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--custom-copy) 42%, transparent);
}

.design-setup-logo-anchor-cell:hover,
.design-setup-logo-anchor-cell:focus-visible {
  outline: none;
  border-color: var(--pf-chat-neon);
}

.design-setup-logo-anchor-cell.is-selected {
  border-color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 14%, var(--custom-panel));
}

.design-setup-logo-anchor-cell.is-selected span {
  background: var(--pf-chat-neon);
}

.design-setup-logo-segmented {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.28rem;
}

.design-setup-logo-segment {
  min-height: 1.85rem;
  border: 1px solid var(--custom-line);
  border-radius: 4px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  cursor: pointer;
  font: inherit;
  font-size: 0.64rem;
  padding: 0.32rem 0.4rem;
  text-align: center;
}

.design-setup-logo-segment:hover,
.design-setup-logo-segment:focus-visible {
  outline: none;
  border-color: var(--pf-chat-neon);
}

.design-setup-logo-segment.is-selected {
  border-color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 14%, var(--custom-panel));
}

.design-setup-logo-settings-toggles {
  gap: 0.35rem;
}

.design-setup-logo-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.42rem;
  font-size: 0.64rem;
  color: var(--custom-copy);
  line-height: 1.25;
}

.design-setup-logo-toggle input {
  margin: 0.12rem 0 0;
}

.design-setup-logo-settings-menu.is-floating {
  position: fixed !important;
  z-index: 220 !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 14.5rem !important;
}

.design-setup-logo-settings.is-drop-up .design-setup-logo-settings-menu:not(.is-floating) {
  top: auto;
  bottom: calc(100% + 4px);
}

.design-setup-logo-settings-menu[hidden] {
  display: none;
}

.design-setup-logo-settings-title {
  margin: 0;
  color: var(--custom-muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.design-setup-logo-settings-menu .design-setup-logo-tune {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.design-setup-logo-tune-item {
  display: grid;
  gap: 0.2rem;
  font-size: 0.64rem;
  color: var(--custom-muted);
}

.design-setup-logo-tune-item input {
  width: 100%;
  min-height: 2rem;
  padding: 0.28rem 0.42rem;
  border: 1px solid var(--custom-line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--custom-bg) 92%, transparent);
  color: var(--custom-copy);
  font: inherit;
}

.design-setup-logo-position-group {
  display: grid;
  gap: 0.18rem;
}

.design-setup-logo-position-group + .design-setup-logo-position-group {
  margin-top: 0.2rem;
  padding-top: 0.28rem;
  border-top: 1px solid var(--custom-line);
}

.design-setup-logo-position-group-title {
  margin: 0;
  color: var(--custom-muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.design-setup-logo-position-options {
  display: grid;
  gap: 0.14rem;
}

.design-setup-logo-position-option {
  width: 100%;
  min-height: 1.75rem;
  border: 1px solid var(--custom-line);
  border-radius: 4px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  padding: 0.32rem 0.45rem;
  text-align: left;
}

.design-setup-logo-position-option:hover,
.design-setup-logo-position-option:focus-visible {
  outline: none;
  border-color: var(--pf-chat-neon);
}

.design-setup-logo-position-option.is-selected {
  border-color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 14%, var(--custom-panel));
}

.design-setup-field--menu-position {
  max-width: 100%;
}

.design-setup-menu-position {
  position: relative;
  min-width: 0;
}

.design-setup-menu-position-btn {
  position: relative;
  width: 100%;
  min-height: 2.15rem;
  display: grid;
  align-items: center;
  justify-items: start;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  padding: 0.58rem 2rem 0.58rem 0.65rem;
  text-align: left;
}

.design-setup-menu-position-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.72rem;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-62%) rotate(45deg);
  opacity: 0.72;
  pointer-events: none;
}

.design-setup-menu-position-btn:hover,
.design-setup-menu-position-btn:focus-visible {
  outline: none;
  border-color: var(--pf-chat-neon);
}

.design-setup-menu-position-btn-content {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

.design-setup-menu-position-btn-content [data-menu-position-label] {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.design-setup-menu-position-menu {
  position: absolute;
  z-index: 8;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  gap: 0.14rem;
  max-height: min(16rem, 48vh);
  overflow-y: auto;
  border: 1px solid var(--pf-chat-neon);
  border-radius: 6px;
  background: var(--custom-bg);
  padding: 0.35rem;
  box-shadow: 0 10px 24px color-mix(in srgb, #000000 38%, transparent);
}

.design-setup-menu-position-menu.is-floating {
  position: fixed !important;
  z-index: 220 !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 15rem !important;
}

.design-setup-menu-position.is-drop-up .design-setup-menu-position-menu:not(.is-floating) {
  top: auto;
  bottom: calc(100% + 4px);
}

.design-setup-menu-position-menu[hidden] {
  display: none;
}

.design-setup-menu-position-option {
  width: 100%;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--custom-line);
  border-radius: 4px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  padding: 0.35rem 0.45rem;
  text-align: left;
}

.design-setup-menu-position-option:hover,
.design-setup-menu-position-option:focus-visible {
  outline: none;
  border-color: var(--pf-chat-neon);
}

.design-setup-menu-position-option.is-selected {
  border-color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 14%, var(--custom-panel));
}

.design-setup-menu-position-icon {
  position: relative;
  display: block;
  width: 28px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--custom-line) 85%, transparent);
  border-radius: 3px;
  background: var(--custom-bg);
  overflow: hidden;
}

.design-setup-menu-position-icon b,
.design-setup-menu-position-icon em {
  position: absolute;
  display: block;
  border-radius: 1px;
}

.design-setup-menu-position-icon b {
  background: var(--pf-chat-neon);
}

.design-setup-menu-position-icon em {
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 2px;
  background: currentColor;
  opacity: 0.9;
  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
}

.design-setup-menu-position-icon--top b {
  inset: 0 0 auto;
  height: 22%;
}

.design-setup-menu-position-icon--bottom b {
  inset: auto 0 0;
  height: 22%;
}

.design-setup-menu-position-icon--left b {
  inset: 0 auto 0 0;
  width: 22%;
}

.design-setup-menu-position-icon--right b {
  inset: 0 0 0 auto;
  width: 22%;
}

.design-setup-menu-position-icon--overlay {
  display: inline-grid;
  gap: 3px;
  width: 16px;
  height: auto;
  padding: 1px 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.design-setup-menu-position-icon--overlay i {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.92;
}

.design-setup-menu-position-icon--overlay b {
  position: absolute;
  inset: 20% 14%;
  height: auto;
  background: var(--custom-copy);
  opacity: 0.16;
}

.design-setup-preview-logo-transform {
  display: inline-block;
}

.design-setup-thumb-chrome {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.design-setup-field--thumb-settings {
  max-width: 100%;
}

.design-setup-thumb-settings {
  position: relative;
  min-width: 0;
}

.design-setup-thumb-settings-btn {
  position: relative;
  width: 100%;
  min-height: 2.15rem;
  display: grid;
  align-items: center;
  justify-items: start;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  padding: 0.58rem 2rem 0.58rem 0.65rem;
  text-align: left;
}

.design-setup-thumb-settings-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.72rem;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-62%) rotate(45deg);
  opacity: 0.72;
  pointer-events: none;
}

.design-setup-thumb-settings-btn:hover,
.design-setup-thumb-settings-btn:focus-visible {
  outline: none;
  border-color: var(--pf-chat-neon);
}

.design-setup-thumb-settings-btn [data-thumb-settings-label] {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.design-setup-thumb-settings-menu {
  position: absolute;
  z-index: 8;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  gap: 0.42rem;
  border: 1px solid var(--pf-chat-neon);
  border-radius: 6px;
  background: var(--custom-bg);
  padding: 0.55rem;
  box-shadow: 0 10px 24px color-mix(in srgb, #000000 38%, transparent);
}

.design-setup-thumb-settings-menu.is-floating {
  position: fixed !important;
  z-index: 220 !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 17rem !important;
}

.design-setup-thumb-settings.is-drop-up .design-setup-thumb-settings-menu:not(.is-floating) {
  top: auto;
  bottom: calc(100% + 4px);
}

.design-setup-thumb-settings-menu[hidden] {
  display: none;
}

.design-setup-thumb-settings-title {
  margin: 0;
  color: var(--custom-muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.design-setup-thumb-settings-item {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.design-setup-thumb-settings-item span {
  color: var(--custom-copy);
  font-size: 0.64rem;
  font-weight: 750;
}

.design-setup-thumb-settings-item select,
.design-setup-thumb-settings-item input[type="text"] {
  width: 100%;
  min-height: 2rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  font: inherit;
  font-size: 0.72rem;
  padding: 0.38rem 0.55rem;
}

.design-setup-thumb-chrome .design-setup-field span {
  font-size: 0.64rem;
}

.design-setup-site-chrome .design-setup-field {
  gap: 0.22rem;
}

.design-setup-site-chrome .design-setup-field select {
  min-height: 2.15rem;
  padding-block: 0.42rem;
}

.design-setup[data-section-preview-mode="page"] .design-setup-section-preview {
  min-height: min(55vh, 34rem);
}

.design-setup-preview-toggle {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  justify-self: center;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(102px, 1fr));
  gap: 0.18rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  padding: 0.16rem;
  background: var(--custom-bg);
}

.design-setup-preview-toggle label {
  display: grid;
  min-height: 1.5rem;
  cursor: pointer;
}

.design-setup-preview-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.design-setup-preview-toggle span {
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: var(--custom-muted);
  font-size: 0.6rem;
  font-weight: 850;
}

.design-setup-preview-toggle input:checked + span {
  background: color-mix(in srgb, var(--pf-chat-neon) 16%, var(--custom-bg));
  color: var(--pf-chat-neon);
}

.design-setup-preview-stage {
  min-height: 6.8rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-bg);
  overflow: hidden;
}

.design-setup-preview-stage[hidden] {
  display: none;
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-stage {
  min-height: min(48vh, 30rem);
}

.design-setup-preview-page {
  position: relative;
  min-height: 6.8rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}

.design-setup-preview-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  min-width: 0;
  border-bottom: 1px solid var(--custom-line);
  padding: 0.48rem 0.58rem;
  background: color-mix(in srgb, var(--custom-bg) 96%, transparent);
}

.design-setup-preview-chrome .design-setup-preview-logo {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform: none;
  flex: 0 1 auto;
  min-width: 0;
  pointer-events: none;
}

.design-setup-preview-chrome .design-setup-preview-menu {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-end;
  gap: 0.2rem 0.54rem;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
}

.design-setup-preview-chrome .design-setup-preview-menu button {
  width: auto;
  text-align: center;
}

.design-setup-preview-logo {
  position: absolute;
  z-index: 2;
  top: 0.48rem;
  left: 0.58rem;
  pointer-events: none;
}

.design-setup-preview-logo--difference,
.design-setup-preview-logo--difference span,
.design-setup-preview-logo--difference img {
  color: #fff;
  mix-blend-mode: difference;
}

.design-setup-preview-logo--text {
  color: var(--custom-copy);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.1;
  max-width: min(12rem, 42vw);
}

.design-setup-preview-logo--text span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-setup-preview-logo--image img {
  display: block;
  max-height: 1.45rem;
  max-width: min(8rem, 38vw);
  width: auto;
  height: auto;
  object-fit: contain;
}

.design-setup-preview-logo--size-sm.design-setup-preview-logo--text {
  font-size: 0.62rem;
}

.design-setup-preview-logo--size-md.design-setup-preview-logo--text {
  font-size: 0.74rem;
}

.design-setup-preview-logo--size-lg.design-setup-preview-logo--text {
  font-size: 0.88rem;
}

.design-setup-preview-logo--size-sm.design-setup-preview-logo--image img {
  max-height: 1.1rem;
  max-width: min(6rem, 32vw);
}

.design-setup-preview-logo--size-md.design-setup-preview-logo--image img {
  max-height: 1.45rem;
  max-width: min(8rem, 38vw);
}

.design-setup-preview-logo--size-lg.design-setup-preview-logo--image img {
  max-height: 1.85rem;
  max-width: min(10rem, 44vw);
}

.design-setup[data-design-logo-position="top-center"] .design-setup-preview-chrome {
  justify-content: center;
}

.design-setup[data-design-logo-position="top-center"] .design-setup-preview-chrome .design-setup-preview-logo {
  margin-inline: auto;
}

.design-setup[data-design-logo-position="top-center"] .design-setup-preview-chrome .design-setup-preview-menu {
  justify-content: center;
}

.design-setup[data-design-logo-position="top-right"] .design-setup-preview-chrome {
  flex-direction: row-reverse;
}

.design-setup[data-design-logo-position="top-right"] .design-setup-preview-chrome .design-setup-preview-menu {
  justify-content: flex-start;
}

.design-setup[data-design-logo-position="bottom-left"] .design-setup-preview-chrome .design-setup-preview-logo,
.design-setup[data-design-logo-position="bottom-right"] .design-setup-preview-chrome .design-setup-preview-logo,
.design-setup[data-design-logo-position="bottom-center"] .design-setup-preview-chrome .design-setup-preview-logo,
.design-setup[data-design-logo-position="center-left"] .design-setup-preview-chrome .design-setup-preview-logo,
.design-setup[data-design-logo-position="center"] .design-setup-preview-chrome .design-setup-preview-logo,
.design-setup[data-design-logo-position="center-right"] .design-setup-preview-chrome .design-setup-preview-logo {
  position: absolute;
  z-index: 2;
}

.design-setup[data-design-logo-position="top-left"] .design-setup-preview-chrome .design-setup-preview-logo,
.design-setup[data-design-logo-position="top-center"] .design-setup-preview-chrome .design-setup-preview-logo,
.design-setup[data-design-logo-position="top-right"] .design-setup-preview-chrome .design-setup-preview-logo {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform: none;
}

.design-setup[data-design-logo-position="top-center"] .design-setup-preview-logo {
  left: 50%;
  transform: translateX(-50%);
}

.design-setup[data-design-logo-position="top-right"] .design-setup-preview-logo {
  right: 0.58rem;
  left: auto;
}

.design-setup[data-design-logo-position="bottom-left"] .design-setup-preview-logo {
  top: auto;
  bottom: 0.48rem;
}

.design-setup[data-design-logo-position="bottom-right"] .design-setup-preview-logo {
  top: auto;
  right: 0.58rem;
  bottom: 0.48rem;
  left: auto;
}

.design-setup[data-design-logo-position="bottom-center"] .design-setup-preview-logo {
  top: auto;
  bottom: 0.48rem;
  left: 50%;
  transform: translateX(-50%);
}

.design-setup[data-design-logo-position="center-left"] .design-setup-preview-logo {
  top: 50%;
  transform: translateY(-50%);
}

.design-setup[data-design-logo-position="center"] .design-setup-preview-logo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.design-setup[data-design-logo-position="center-right"] .design-setup-preview-logo {
  top: 50%;
  right: 0.58rem;
  left: auto;
  transform: translateY(-50%);
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-page {
  min-height: min(48vh, 30rem);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}

.design-setup[data-design-menu-position="top"] .design-setup-preview-page,
.design-setup[data-design-menu-position="top-responsive"] .design-setup-preview-page,
.design-setup[data-design-menu-position="overlay"] .design-setup-preview-page,
.design-setup[data-design-menu-position="bottom"] .design-setup-preview-page {
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}

.design-setup[data-design-menu-position="top"] .design-setup-preview-chrome,
.design-setup[data-design-menu-position="top-responsive"] .design-setup-preview-chrome,
.design-setup[data-design-menu-position="overlay"] .design-setup-preview-chrome {
  grid-row: 1;
  grid-column: 1;
}

.design-setup[data-design-menu-position="top"] .design-setup-preview-screen,
.design-setup[data-design-menu-position="top-responsive"] .design-setup-preview-screen {
  grid-row: 2;
  grid-column: 1;
}

.design-setup-preview-menu-burger {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--custom-copy);
  cursor: pointer;
  pointer-events: auto;
  box-sizing: border-box;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.design-setup-preview-menu-burger-lines {
  display: inline-grid;
  gap: 0.22rem;
  width: 0.82rem;
}

.design-setup-preview-page.is-overlay-menu .design-setup-preview-menu-burger,
.design-setup[data-design-menu-position="overlay"] .design-setup-preview-menu-burger {
  display: inline-flex;
}

.design-setup-preview-menu-burger:hover {
  background: color-mix(in srgb, var(--custom-copy) 8%, transparent);
}

.design-setup-preview-menu-burger.is-active {
  color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 10%, transparent);
}

.design-setup-preview-menu-burger i {
  display: block;
  width: 100%;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.88;
  transition: transform 0.18s ease, opacity 0.18s ease, width 0.18s ease;
}

.design-setup-preview-menu-burger.is-active i:nth-child(1) {
  transform: translateY(0.34rem) rotate(45deg);
}

.design-setup-preview-menu-burger.is-active i:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}

.design-setup-preview-menu-burger.is-active i:nth-child(3) {
  transform: translateY(-0.34rem) rotate(-45deg);
}

.design-setup[data-design-menu-position="overlay"] .design-setup-preview-menu-inline,
.design-setup[data-design-menu-position="overlay"] .design-setup-preview-menu-inline .design-setup-preview-menu-group,
.design-setup-preview-page.is-overlay-menu .design-setup-preview-menu-inline,
.design-setup-preview-page.is-overlay-menu .design-setup-preview-menu-inline .design-setup-preview-menu-group {
  display: none !important;
}

.design-setup-preview-menu-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: auto;
}

.design-setup-preview-page.is-preview-menu-open .design-setup-preview-menu-overlay {
  display: flex;
}

.design-setup-preview-menu-overlay-panel {
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.55rem;
  padding: 2.4rem 1rem 1rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  pointer-events: none;
}

.design-setup-preview-menu-overlay .design-setup-preview-menu-group {
  display: grid !important;
  gap: 0.28rem;
  justify-items: center;
  width: min(100%, 16rem);
  pointer-events: auto;
}

.design-setup-preview-menu-overlay .design-setup-preview-menu-group > button {
  width: auto;
  max-width: 100%;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  padding: 0.12rem 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff;
  mix-blend-mode: difference;
  appearance: none;
  -webkit-appearance: none;
}

.design-setup-preview-menu-overlay .design-setup-preview-submenu {
  display: grid;
  gap: 0.18rem;
  margin-top: 0.18rem;
  padding-left: 0;
  border-left: 0;
  justify-items: center;
}

.design-setup-preview-menu-overlay .design-setup-preview-submenu button {
  font-size: 0.68rem;
  font-weight: 700;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff;
  mix-blend-mode: difference;
}

.design-setup-preview-menu-overlay .design-setup-preview-menu-group > button:hover,
.design-setup-preview-menu-overlay .design-setup-preview-menu-group > button:focus-visible,
.design-setup-preview-menu-overlay .design-setup-preview-menu-group > button.is-active,
.design-setup-preview-menu-overlay .design-setup-preview-menu-group > button.is-parent-active,
.design-setup-preview-menu-overlay .design-setup-preview-submenu button:hover,
.design-setup-preview-menu-overlay .design-setup-preview-submenu button:focus-visible,
.design-setup-preview-menu-overlay .design-setup-preview-submenu button.is-active {
  color: #fff;
  background: transparent !important;
  mix-blend-mode: difference;
  opacity: 0.92;
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="overlay"] .design-setup-preview-page,
.design-setup[data-section-preview-mode="page"] .design-setup-preview-page.is-overlay-menu {
  position: relative;
  grid-template-rows: minmax(0, 1fr);
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="overlay"] .design-setup-preview-chrome,
.design-setup[data-section-preview-mode="page"] .design-setup-preview-page.is-overlay-menu .design-setup-preview-chrome {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 0;
  background: linear-gradient(180deg, color-mix(in srgb, #000 34%, transparent), transparent 72%);
  pointer-events: none;
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="overlay"] .design-setup-preview-menu-burger,
.design-setup[data-section-preview-mode="page"] .design-setup-preview-page.is-overlay-menu .design-setup-preview-menu-burger {
  pointer-events: auto;
  background: color-mix(in srgb, #000 36%, transparent);
  color: color-mix(in srgb, #fff 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.22);
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="overlay"] .design-setup-preview-menu-burger:hover,
.design-setup[data-section-preview-mode="page"] .design-setup-preview-page.is-overlay-menu .design-setup-preview-menu-burger:hover {
  background: color-mix(in srgb, #000 52%, transparent);
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="overlay"] .design-setup-preview-menu-burger.is-active,
.design-setup[data-section-preview-mode="page"] .design-setup-preview-page.is-overlay-menu .design-setup-preview-menu-burger.is-active {
  color: var(--pf-chat-neon);
  background: color-mix(in srgb, #000 58%, transparent);
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="overlay"] .design-setup-preview-menu,
.design-setup[data-section-preview-mode="page"] .design-setup-preview-page.is-overlay-menu .design-setup-preview-menu {
  pointer-events: auto;
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="overlay"] .design-setup-preview-screen,
.design-setup[data-section-preview-mode="page"] .design-setup-preview-page.is-overlay-menu .design-setup-preview-screen {
  grid-row: 1;
  grid-column: 1;
}

.design-setup[data-design-menu-position="right"] .design-setup-preview-page,
.design-setup[data-design-menu-position="right-responsive"] .design-setup-preview-page {
  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.3fr);
  grid-template-rows: minmax(0, 1fr);
}

.design-setup[data-design-menu-position="right"] .design-setup-preview-chrome,
.design-setup[data-design-menu-position="right-responsive"] .design-setup-preview-chrome {
  grid-column: 2;
  grid-row: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  border-bottom: 0;
  border-left: 1px solid var(--custom-line);
}

.design-setup[data-design-menu-position="right"] .design-setup-preview-chrome .design-setup-preview-menu,
.design-setup[data-design-menu-position="right-responsive"] .design-setup-preview-chrome .design-setup-preview-menu {
  flex-direction: column;
  justify-content: flex-start;
}

.design-setup[data-design-menu-position="left"] .design-setup-preview-page,
.design-setup[data-design-menu-position="left-responsive"] .design-setup-preview-page {
  grid-template-columns: minmax(112px, 0.3fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.design-setup[data-design-menu-position="left"] .design-setup-preview-chrome,
.design-setup[data-design-menu-position="left-responsive"] .design-setup-preview-chrome {
  grid-column: 1;
  grid-row: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  border-bottom: 0;
  border-right: 1px solid var(--custom-line);
}

.design-setup[data-design-menu-position="left"] .design-setup-preview-chrome .design-setup-preview-menu,
.design-setup[data-design-menu-position="left-responsive"] .design-setup-preview-chrome .design-setup-preview-menu {
  flex-direction: column;
  justify-content: flex-start;
}

.design-setup[data-design-menu-position="left"] .design-setup-preview-screen,
.design-setup[data-design-menu-position="left-responsive"] .design-setup-preview-screen {
  grid-column: 2;
  grid-row: 1;
}

.design-setup[data-design-menu-position="right"] .design-setup-preview-screen,
.design-setup[data-design-menu-position="right-responsive"] .design-setup-preview-screen {
  grid-column: 1;
  grid-row: 1;
}

.design-setup[data-design-menu-position="bottom"] .design-setup-preview-page {
  grid-template-rows: minmax(0, 1fr) auto;
}

.design-setup[data-design-menu-position="bottom"] .design-setup-preview-chrome {
  grid-row: 2;
  grid-column: 1;
  border-bottom: 0;
  border-top: 1px solid var(--custom-line);
}

.design-setup[data-design-menu-position="bottom"] .design-setup-preview-screen {
  grid-row: 1;
  grid-column: 1;
}

.design-setup-preview-menu-group {
  display: grid;
  gap: 0.1rem;
}

.design-setup-preview-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  overflow: hidden;
  color: var(--custom-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0;
  padding: 0.08rem 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-setup-preview-menu button:hover,
.design-setup-preview-menu button:focus-visible,
.design-setup-preview-menu button.is-active {
  color: var(--pf-chat-neon);
}

.design-setup-preview-menu button.is-parent-active {
  color: var(--custom-text);
}

.design-setup-preview-submenu {
  display: grid;
  gap: 0.08rem;
  margin: 0.04rem 0 0.18rem 0.62rem;
  padding-left: 0.48rem;
  border-left: 1px solid color-mix(in srgb, var(--pf-chat-neon) 55%, var(--custom-line));
}

.design-setup-preview-submenu button {
  color: var(--custom-muted);
  font-size: 0.56rem;
  font-weight: 750;
}

.design-setup-preview-screen {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0.58rem 0.64rem;
}

.design-setup-preview-screen.is-scroll-run {
  place-items: stretch;
  padding: 0;
  overflow: hidden;
}

.design-setup-preview-screen.is-index-page {
  place-items: stretch;
}

.design-setup-preview-screen.is-page-template-preview {
  place-items: center;
  padding: 0.68rem 0.68rem 2rem;
}

.design-setup-preview-screen strong {
  position: absolute;
  left: 0.64rem;
  bottom: 0.78rem;
  color: var(--custom-copy);
  font-size: 0.66rem;
}

.design-setup-preview-screen small {
  position: absolute;
  left: 0.64rem;
  bottom: 0.34rem;
  color: var(--custom-muted);
  font-size: 0.54rem;
  font-weight: 800;
  text-transform: uppercase;
}

.design-setup-preview-media {
  width: min(100%, 34rem);
}

.design-setup-preview-media--gallery {
  display: grid;
  grid-template-columns: repeat(var(--design-preview-thumb-cols, 3), minmax(0, 1fr));
  grid-auto-rows: var(--design-preview-thumb-row-height, 4.1rem);
  gap: var(--design-preview-thumb-gap, 25px);
  align-items: stretch;
}

.design-setup-preview-media--index-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
  align-items: start;
}

.design-setup-preview-media--index-gallery button {
  display: grid;
  gap: 0.32rem;
  border: 0;
  background: transparent;
  color: var(--custom-copy);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

.design-setup-preview-media--index-gallery button:hover strong,
.design-setup-preview-media--index-gallery button:focus-visible strong {
  color: var(--pf-chat-neon);
}

.design-setup-preview-media--index-gallery span {
  display: block;
  min-height: 4.6rem;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 45%, var(--custom-line));
  border-radius: 4px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pf-chat-neon) 22%, transparent), transparent 58%),
    color-mix(in srgb, var(--custom-copy) 8%, var(--custom-bg));
}

.design-setup-preview-media--index-gallery strong {
  position: static;
  overflow: hidden;
  color: var(--custom-copy);
  font-size: 0.62rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-setup-preview-media--gallery span,
.design-setup-preview-media--slideshow span,
.design-setup-preview-media--page em {
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 45%, var(--custom-line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pf-chat-neon) 22%, transparent), transparent 58%),
    color-mix(in srgb, var(--custom-copy) 8%, var(--custom-bg));
}

.design-setup-preview-media--gallery span {
  border-radius: var(--design-preview-thumb-radius, 0);
}

.design-setup-preview-screen.has-bulk-upload {
  padding-bottom: 2.4rem;
}

.design-setup-preview-bulk-upload {
  position: absolute;
  right: 0.72rem;
  bottom: 0.72rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 72%, #ffffff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--custom-bg) 82%, #000 18%);
  color: var(--pf-chat-neon);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  padding: 0;
}

.design-setup-preview-bulk-upload svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
  fill: none;
}

.design-setup-preview-bulk-upload:hover,
.design-setup-preview-bulk-upload:focus-visible {
  color: var(--custom-copy);
  background: color-mix(in srgb, var(--pf-chat-neon) 18%, var(--custom-bg));
  outline: none;
}

.design-setup-preview-media--gallery span.is-empty,
.design-setup-preview-media--slideshow span.is-empty {
  min-height: 100%;
}

.design-setup-preview-media--index-gallery .design-setup-preview-index-thumb.is-empty span {
  min-height: 4.6rem;
}

.design-setup-preview-media--index-gallery .design-setup-preview-index-thumb {
  display: grid;
  gap: 0.32rem;
  color: var(--custom-copy);
  text-align: left;
}

.design-setup-preview-media--index-gallery .design-setup-preview-index-thumb span {
  display: grid;
  place-items: center;
  min-height: 4.6rem;
}

.design-setup-preview-media--index-gallery .design-setup-preview-index-thumb strong {
  position: static;
  overflow: hidden;
  color: var(--custom-copy);
  font-size: 0.62rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-setup-preview-media--gallery span img {
  border-radius: inherit;
}

.design-setup-preview-media--slideshow span,
.design-setup-preview-media--page em {
  border-radius: 4px;
}

.design-setup-preview-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.design-setup-preview-media.has-real-media > span,
.design-setup-preview-media--page.has-real-media em,
.design-setup-preview-media--index-gallery.has-real-media span {
  background: color-mix(in srgb, var(--custom-copy) 8%, var(--custom-bg));
}

.design-setup[data-design-thumb-type="vMasonry"] .design-setup-preview-media--gallery span:nth-child(2),
.design-setup[data-design-thumb-type="vMasonry"] .design-setup-preview-media--gallery span:nth-child(5) {
  grid-row: span 2;
}

.design-setup[data-design-thumb-type="hMasonry"] .design-setup-preview-media--gallery {
  grid-auto-flow: dense;
}

.design-setup[data-design-thumb-type="hMasonry"] .design-setup-preview-media--gallery span:nth-child(3n + 1) {
  grid-column: span 2;
}

.design-setup[data-design-thumb-type="fill"] .design-setup-preview-media--gallery span {
  grid-row: span 1;
}

.design-setup-preview-media--slideshow {
  position: relative;
  height: min(30vh, 15rem);
}

.design-setup-preview-media--slideshow span {
  height: 100%;
}

.design-setup-preview-media--slideshow i {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0;
  height: 0;
  border-top: 0.58rem solid transparent;
  border-bottom: 0.58rem solid transparent;
  border-left: 0.92rem solid var(--pf-chat-neon);
  transform: translate(-40%, -50%);
}

.design-setup-preview-media--slideshow b {
  position: absolute;
  bottom: 0.62rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--custom-muted);
}

.design-setup-preview-media--slideshow b:nth-of-type(1) {
  left: calc(50% - 0.72rem);
  background: var(--pf-chat-neon);
}

.design-setup-preview-media--slideshow b:nth-of-type(2) {
  left: 50%;
}

.design-setup-preview-media--slideshow b:nth-of-type(3) {
  left: calc(50% + 0.72rem);
}

.design-setup-preview-media--page {
  display: grid;
  grid-template-columns: minmax(72px, 0.26fr) minmax(0, 1fr);
  grid-template-rows: repeat(4, min-content);
  gap: 0.42rem 0.72rem;
  align-items: start;
  max-width: 30rem;
}

.design-setup-preview-media--page em {
  grid-row: 1 / span 4;
  height: 8.2rem;
}

.design-setup-preview-media--page-template {
  width: min(100%, 36rem);
  max-width: none;
  height: min(100%, 20rem);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 52%, var(--custom-line));
  border-radius: 0;
  background: #f7f7f4;
  overflow: hidden;
  animation: none;
}

.design-setup-preview-media--page-template iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  border: 0;
  background: #f7f7f4;
  pointer-events: none;
}

.design-setup-preview-media--page-template-editable {
  width: min(100%, 44rem);
  background: #f2f2ee;
  color: #121212;
}

.design-setup-template-page-surface {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(7rem, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(0.8rem, 3vw, 2.2rem);
  align-items: center;
  overflow: hidden;
  padding: clamp(0.8rem, 3vw, 2rem);
  background:
    linear-gradient(90deg, #ecece7 0 34%, transparent 34%),
    #f7f7f4;
  color: #111111;
  font-family: var(--design-setup-body-font, "Montserrat", Arial, sans-serif);
}

.design-setup-template-page-surface.is-text {
  grid-template-columns: minmax(0, 1fr);
  background: #f7f7f4;
}

.design-setup-template-page-surface.is-contact {
  grid-template-columns: minmax(0, 0.54fr) minmax(8rem, 0.46fr);
}

.design-setup-template-page-surface.is-contact .design-setup-template-page-image {
  display: none;
}

.design-setup-template-page-image {
  min-width: 0;
  height: min(100%, 17rem);
  max-height: 17rem;
  display: block;
  overflow: hidden;
  background: #d8d8d0;
}

.design-setup-template-page-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(0.28) contrast(1.04);
}

.design-setup-template-page-image.is-empty {
  display: grid;
  place-items: center;
}

.design-setup-template-page-image.is-empty i {
  width: 44%;
  aspect-ratio: 1 / 1.3;
  background: linear-gradient(135deg, #d8d8d0, #ededeb);
}

.design-setup-template-page-copy {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  align-content: center;
  max-width: 26rem;
}

.design-setup-template-page-surface.is-text .design-setup-template-page-copy {
  width: min(34rem, 82%);
  max-width: none;
  margin: 0 auto;
}

.design-setup-template-page-copy p,
.design-setup-template-page-copy h3,
.design-setup-template-page-copy span {
  margin: 0;
  color: #111111;
}

.design-setup-template-page-copy p:first-child {
  color: #343434;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.design-setup-template-page-copy h3 {
  max-width: 20rem;
  font-family: var(--design-setup-heading-font, "Montserrat", Arial, sans-serif);
  font-size: clamp(1rem, 2.6vw, 1.85rem);
  font-weight: 800;
  line-height: 0.98;
}

.design-setup-template-page-copy p:nth-of-type(2) {
  max-width: 22rem;
  color: #333333;
  font-size: clamp(0.58rem, 1vw, 0.76rem);
  line-height: 1.45;
}

.design-setup-template-page-copy span {
  width: max-content;
  border-bottom: 1px solid #111111;
  color: #111111;
  font-size: 0.52rem;
  font-weight: 800;
  text-transform: uppercase;
}

.design-setup-template-page-copy [contenteditable="true"] {
  cursor: text;
  outline: 1px solid transparent;
  outline-offset: 3px;
}

.design-setup-template-page-copy [contenteditable="true"]:focus {
  outline-color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 9%, transparent);
}

.design-setup-template-page-form {
  min-width: 0;
  display: grid;
  gap: 0.45rem;
}

.design-setup-template-page-form span,
.design-setup-template-page-form b {
  display: block;
  min-height: 1.65rem;
  border: 1px solid #d5d5cf;
  background: #fbfbf8;
}

.design-setup-template-page-form span:nth-child(3) {
  min-height: 4.4rem;
}

.design-setup-template-page-form b {
  min-height: 1.8rem;
  display: grid;
  place-items: center;
  background: #111111;
  color: #ffffff;
  font-size: 0.56rem;
  text-transform: uppercase;
}

.design-setup-ai-edit-note {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-top: 1px solid color-mix(in srgb, var(--pf-chat-neon) 34%, var(--custom-line));
  padding: 0.5rem 0.58rem;
  background: color-mix(in srgb, var(--custom-bg) 94%, #000000);
  text-align: left;
}

.design-setup-ai-edit-note-head,
.design-setup-ai-edit-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.design-setup-ai-edit-note textarea[hidden],
.design-setup-ai-edit-actions[hidden] {
  display: none !important;
}

.design-setup-ai-edit-note-head {
  justify-content: space-between;
}

.design-setup-ai-edit-note button {
  min-height: 1.35rem;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 62%, var(--custom-line));
  border-radius: 4px;
  background: color-mix(in srgb, var(--pf-chat-neon) 12%, var(--custom-bg));
  color: var(--pf-chat-neon);
  cursor: pointer;
  font: inherit;
  font-size: 0.56rem;
  font-weight: 900;
  padding: 0.18rem 0.52rem;
  text-transform: uppercase;
}

.design-setup-ai-edit-note button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.design-setup-ai-edit-note textarea {
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--custom-line);
  border-radius: 4px;
  background: var(--custom-bg);
  color: var(--custom-copy);
  font: inherit;
  font-size: 0.62rem;
  line-height: 1.35;
  padding: 0.42rem;
  resize: vertical;
}

.design-setup-ai-edit-note textarea:focus {
  outline: none;
  border-color: var(--pf-chat-neon);
}

.design-setup-ai-edit-note small {
  overflow: hidden;
  color: var(--custom-muted);
  font-size: 0.56rem;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: normal;
}

.design-setup-ai-edit-note small.is-error {
  color: #ffb3b3;
}

.design-setup-preview-page-copy {
  display: grid;
  gap: 0.42rem;
  align-content: center;
  min-width: 0;
}

.design-setup-preview-media--page span,
.design-setup-preview-media--page small {
  display: block;
  border-radius: 3px;
  background: color-mix(in srgb, var(--custom-copy) 20%, var(--custom-bg));
}

.design-setup-preview-media--page span {
  height: 0.62rem;
}

.design-setup-preview-media--page span:nth-of-type(1) {
  width: 72%;
  height: 0.82rem;
  background: color-mix(in srgb, var(--pf-chat-neon) 35%, var(--custom-bg));
}

.design-setup-preview-media--page small {
  width: 92%;
  height: 0.38rem;
  opacity: 0.72;
}

.design-setup-preview-media--page small:nth-of-type(2) {
  width: 68%;
}

.design-setup-preview-media--page-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.design-setup-preview-media--page-columns em {
  display: none;
}

.design-setup-preview-media--page-columns .design-setup-preview-page-copy {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.72rem;
}

.design-setup-preview-media--page-columns .design-setup-preview-page-copy span,
.design-setup-preview-media--page-columns .design-setup-preview-page-copy small {
  width: 100%;
}

.design-setup-preview-media--page-feature em {
  height: 6.3rem;
}

.design-setup-preview-media--page-contact {
  grid-template-columns: minmax(0, 1fr) minmax(76px, 0.34fr);
  grid-template-rows: none;
  align-items: stretch;
}

.design-setup-preview-page-form {
  display: grid;
  gap: 0.42rem;
  align-content: center;
}

.design-setup-preview-page-form span:nth-child(3) {
  height: 2.35rem;
}

.design-setup-preview-page-form small {
  width: 48%;
  height: 0.7rem;
  background: color-mix(in srgb, var(--pf-chat-neon) 35%, var(--custom-bg));
}

.design-setup-preview-media--page-contact em {
  grid-row: auto;
  height: 8.2rem;
}

.design-setup-preview-media--page-cards {
  display: block;
  max-width: 34rem;
}

.design-setup-preview-page-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.design-setup-preview-page-card-grid article {
  min-height: 7.2rem;
  display: grid;
  gap: 0.38rem;
  align-content: start;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 42%, var(--custom-line));
  border-radius: 4px;
  padding: 0.55rem;
  background: color-mix(in srgb, var(--custom-copy) 7%, var(--custom-bg));
}

.design-setup-preview-page-card-grid article span,
.design-setup-preview-page-card-grid article small {
  width: 100%;
}

.design-setup-preview-media.is-compact {
  width: 100%;
}

.design-setup-preview-media--gallery.is-compact {
  grid-auto-rows: 1.15rem;
  gap: min(var(--design-preview-thumb-gap, 25px), 0.35rem);
}

.design-setup-preview-media--slideshow.is-compact {
  height: 3.2rem;
}

.design-setup-preview-media--page.is-compact {
  grid-template-columns: minmax(30px, 0.3fr) minmax(0, 1fr);
  gap: 0.16rem 0.28rem;
}

.design-setup-preview-media--page.is-compact em {
  height: 3rem;
}

.design-setup-preview-media--page.is-compact .design-setup-preview-page-copy,
.design-setup-preview-media--page.is-compact .design-setup-preview-page-form {
  gap: 0.16rem;
}

.design-setup-preview-media--page.is-compact span {
  height: 0.32rem;
}

.design-setup-preview-media--page.is-compact small {
  height: 0.22rem;
}

.design-setup-preview-media--page-template.is-compact {
  width: 100%;
  height: 3.5rem;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

.design-setup-preview-media--page-template.is-compact .design-setup-ai-edit-note {
  display: none;
}

.design-setup-preview-media--page-template-custom {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  overflow: hidden;
}

.design-setup-preview-media--page-template-custom > :not(.design-setup-ai-edit-note):not(style) {
  min-height: 0;
  overflow: auto;
}

.design-setup-ai-edit-note-head [data-template-visual-editor-open] {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 82%, #ffffff);
  background: color-mix(in srgb, var(--pf-chat-neon) 22%, var(--custom-bg));
}

.design-setup-template-defaults-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
  padding: 0.38rem 0.48rem;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 24%, var(--custom-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--pf-chat-neon) 8%, var(--custom-bg));
  font-size: 0.62rem;
  color: color-mix(in srgb, var(--custom-copy) 88%, var(--pf-chat-neon) 12%);
}

.design-setup-layout-field-head {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  flex-wrap: wrap;
}

.design-setup-customize-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1rem;
  padding: 0 0.34rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pf-chat-neon) 18%, var(--custom-bg));
  color: var(--pf-chat-neon);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.design-setup-reset-template-btn {
  min-height: 1rem;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 42%, var(--custom-line));
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--custom-copy) 82%, var(--pf-chat-neon) 18%);
  cursor: pointer;
  font: inherit;
  font-size: 0.52rem;
  font-weight: 700;
  padding: 0 0.42rem;
  text-transform: uppercase;
}

.design-setup-reset-template-btn--all {
  font-size: 0.56rem;
  padding: 0.16rem 0.52rem;
}

#design-setup-visual-editor-host.chat-media--block-draft-fullscreen {
  z-index: 10050 !important;
  padding: 0 !important;
  inset: 0 !important;
}

.chat-block-draft.is-wizard-page-template .chat-prototype-targeting,
.chat-block-draft.is-wizard-page-template .chat-prototype-mobile-topbar,
.chat-block-draft.is-wizard-page-template [data-prototype-workbench-scratch],
.chat-block-draft.is-wizard-page-template .chat-prototype-workbench-route {
  display: none !important;
}

.chat-prototype-workbench-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 72%, #ffffff);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pf-chat-neon) 88%, #ffffff 12%),
    color-mix(in srgb, var(--pf-chat-neon) 68%, #003544 32%)
  );
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0 0.72rem;
  white-space: nowrap;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 34%, transparent), 0 6px 14px rgba(0, 207, 255, 0.16);
}

.chat-prototype-workbench-apply:hover,
.chat-prototype-workbench-apply:focus-visible {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pf-chat-neon) 94%, #ffffff 6%),
    color-mix(in srgb, var(--pf-chat-neon) 76%, #003544 24%)
  );
  outline: none;
}

.chat-prototype-workbench-apply:disabled,
.chat-prototype-workbench-apply[aria-disabled="true"]:not(.is-ready) {
  opacity: 0.48;
  cursor: not-allowed;
  box-shadow: none;
}

.chat-prototype-workbench-apply.is-needs-target,
.chat-prototype-workbench-apply[aria-disabled="true"].is-needs-target {
  cursor: pointer;
  opacity: 0.72;
}

.chat-prototype-workbench-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: auto;
  min-width: 4.6rem;
  max-width: none;
  height: 1.5rem;
  padding: 0 0.62rem;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 46%, rgba(255, 255, 255, 0.14));
  border-radius: 6px;
  background: rgba(18, 24, 30, 0.92);
  color: #e8f6fb;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}

.chat-prototype-workbench-target-label {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.chat-prototype-workbench-target:hover,
.chat-prototype-workbench-target:focus-visible {
  border-color: color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 72%, #fff 28%);
  background: rgba(24, 34, 42, 0.96);
  color: #fff;
  outline: none;
}

.chat-prototype-workbench-target.is-needs-target {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 68%, #fff 32%);
  background: color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 10%, rgba(18, 24, 30, 0.96));
  color: #fff;
}

.chat-prototype-workbench-target.is-active,
.chat-prototype-workbench-target.is-needs-target.is-active {
  border-style: solid;
  border-color: color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 82%, #fff 18%);
  background: color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 18%, rgba(18, 24, 30, 0.98));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 24%, transparent);
}

.chat-prototype-workbench-target.is-ready {
  border-style: solid;
  border-color: color-mix(in srgb, #7fdca8 58%, var(--pf-chat-neon, #3ec7e0) 42%);
  background: color-mix(in srgb, #7fdca8 8%, rgba(18, 24, 30, 0.96));
  color: #dff7ea;
}

#chat-root .chat-prototype-target-chip {
  cursor: pointer;
}

#chat-root .chat-prototype-target-chip.is-picking {
  border-color: color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 78%, #fff 22%) !important;
  background: color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 18%, transparent) !important;
}

#chat-root .chat-prototype-targeting.is-retargeting,
#chat-root .chat-prototype-targeting.is-target-picking {
  outline: 1px solid color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 55%, transparent);
  outline-offset: 2px;
}

.chat-prototype-workbench-apply-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 7rem;
}

.chat-prototype-zoom-control {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 1.5rem;
  padding: 0 0.5rem 0 0.42rem;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 84%, #fff 16%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--dx-elevated, #333) 58%, #000 42%);
  box-sizing: border-box;
}

.chat-prototype-zoom-fit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--dx-copy, #e6e6e6) 88%, var(--pf-chat-neon, #00cfff) 12%);
  font: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
}

.chat-prototype-zoom-fit-btn:hover,
.chat-prototype-zoom-fit-btn:focus-visible {
  color: var(--pf-chat-neon, #00cfff);
  outline: none;
}

.chat-prototype-zoom-slider {
  width: 4.5rem;
  height: 0.16rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dx-line, #3a3a3a) 72%, #fff 28%);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.chat-prototype-zoom-slider::-webkit-slider-runnable-track {
  height: 0.16rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dx-line, #3a3a3a) 72%, #fff 28%);
}

.chat-prototype-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.62rem;
  height: 0.62rem;
  margin-top: -0.23rem;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 72%, #fff);
  border-radius: 999px;
  background: var(--pf-chat-neon, #00cfff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pf-chat-neon) 18%, transparent);
}

.chat-prototype-zoom-slider::-moz-range-track {
  height: 0.16rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dx-line, #3a3a3a) 72%, #fff 28%);
}

.chat-prototype-zoom-slider::-moz-range-thumb {
  width: 0.62rem;
  height: 0.62rem;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 72%, #fff);
  border-radius: 999px;
  background: var(--pf-chat-neon, #00cfff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pf-chat-neon) 18%, transparent);
}

.design-setup-preview-media--page-cards.is-compact .design-setup-preview-page-card-grid {
  gap: 0.18rem;
}

.design-setup-preview-media--page-cards.is-compact article {
  min-height: 3rem;
  padding: 0.22rem;
}

.design-setup-preview-scroll-run {
  height: 100%;
  overflow: hidden;
  display: grid;
  align-content: start;
  animation: design-preview-scroll-run 5.4s ease-in-out infinite;
}

.design-setup-preview-scroll-run section {
  min-height: 10rem;
  display: grid;
  grid-template-columns: minmax(86px, 0.22fr) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  border-bottom: 1px solid var(--custom-line);
  padding: 0.9rem 1rem;
}

.design-setup-preview-scroll-run section strong {
  position: static;
  color: var(--custom-copy);
  font-size: 0.62rem;
}

@keyframes design-preview-scroll-run {
  0%,
  22% {
    transform: translateY(0);
  }
  64%,
  100% {
    transform: translateY(-6.2rem);
  }
}

@keyframes design-preview-pan {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.72;
  }
  50% {
    transform: translateY(-0.35rem);
    opacity: 1;
  }
}

.design-setup-preview-tree {
  display: grid;
  gap: 0.24rem;
  padding: 0.55rem;
}

.design-setup-preview-tree-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  min-height: 1.85rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  padding: 0.24rem 0.38rem;
}

.design-setup-preview-tree-row.is-child {
  margin-left: 1.4rem;
}

.design-setup-preview-tree-row.is-selected {
  border-color: var(--pf-chat-neon);
}

.design-setup-preview-tree-row .design-setup-template-icon {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
}

.design-setup-preview-tree-row strong {
  overflow: hidden;
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-setup-preview-tree-row small {
  color: var(--custom-muted);
  font-size: 0.56rem;
  font-weight: 800;
}

.design-setup-row-template {
  position: relative;
  grid-template-columns: 1fr;
  align-items: center;
}

.design-setup-row-template-stack {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.design-setup-type-button {
  width: 1.72rem;
  height: 1.72rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--pf-chat-neon);
  cursor: pointer;
  padding: 0;
}

.design-setup-type-button:hover .design-setup-type-icon,
.design-setup-type-button:focus-visible .design-setup-type-icon,
.design-setup-type-button:hover .design-setup-template-icon,
.design-setup-type-button:focus-visible .design-setup-template-icon {
  opacity: 0.82;
}

.design-setup-menu-row .design-setup-type-button:hover,
.design-setup-menu-row .design-setup-type-button:focus-visible {
  color: var(--custom-copy);
}

.design-setup-section-type-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 3px);
  left: 0;
  width: max-content;
  min-width: 13.5rem;
  display: grid;
  gap: 3px;
  border: 1px solid var(--pf-chat-neon);
  border-radius: 0;
  background: var(--custom-bg);
  padding: 0.28rem;
  box-shadow: 0 10px 24px color-mix(in srgb, #000000 38%, transparent);
}

.design-setup-section-type-menu.is-floating {
  position: fixed;
  z-index: 230 !important;
  top: 0;
  left: 0;
  margin: 0;
}

.design-setup-row-template.is-drop-up .design-setup-section-type-menu:not(.is-floating) {
  top: auto;
  bottom: calc(100% + 3px);
}

.design-setup-section-type-menu[hidden] {
  display: none;
}

.design-setup-section-type-menu button,
.design-setup-page-template-chip,
.design-setup-section-type-page-choice {
  min-height: 1.36rem;
  display: grid;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid var(--pf-chat-neon);
  border-radius: 0;
  background: color-mix(in srgb, var(--pf-chat-neon) 8%, var(--custom-bg));
  color: var(--pf-chat-neon);
  cursor: pointer;
  font: inherit;
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1.1;
  overflow: hidden;
  padding: 0.18rem 0.42rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-setup-section-type-menu button {
  border-color: var(--custom-line);
  background: var(--custom-panel);
  color: var(--custom-copy);
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.design-setup-section-type-menu button:hover,
.design-setup-section-type-menu button:focus-visible,
.design-setup-section-type-menu button.is-selected {
  border-color: var(--pf-chat-neon);
  color: var(--pf-chat-neon);
}

.design-setup-section-type-page-choice {
  margin-top: 3px;
}

.design-setup-section-type-page-choice[hidden] {
  display: none;
}

.design-setup-row-options-btn {
  width: 1.72rem;
  height: 1.38rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--custom-line);
  border-radius: 5px;
  background: var(--custom-bg);
  color: var(--custom-muted);
  cursor: pointer;
  padding: 0;
  position: relative;
}

.design-setup-row-options-btn:hover,
.design-setup-row-options-btn:focus-visible,
.design-setup-row-options-btn.is-active {
  border-color: var(--pf-chat-neon);
  color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 8%, var(--custom-bg));
}

.design-setup-row-options-btn.is-open {
  border-color: var(--pf-chat-neon);
  color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 12%, var(--custom-bg));
}

.design-setup-row-options-icon {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  background:
    radial-gradient(circle, currentColor 1.4px, transparent 1.6px) center 1px / 100% 33%,
    radial-gradient(circle, currentColor 1.4px, transparent 1.6px) center center / 100% 33%,
    radial-gradient(circle, currentColor 1.4px, transparent 1.6px) center calc(100% - 1px) / 100% 33%;
}

.design-setup-row-options-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 0.72rem;
  height: 0.72rem;
  padding: 0 0.12rem;
  border: 1px solid var(--pf-chat-neon);
  border-radius: 999px;
  background: var(--pf-chat-neon);
  color: #001418;
  font-size: 0.42rem;
  font-weight: 900;
  line-height: 0.68rem;
  text-align: center;
}

.design-setup-row-options-badge[hidden] {
  display: none;
}

.design-setup-row-options-menu {
  position: absolute;
  z-index: 6;
  top: calc(100% + 3px);
  right: 0;
  left: auto;
  width: max-content;
  min-width: 11rem;
  display: grid;
  gap: 0.18rem;
  border: 1px solid var(--pf-chat-neon);
  border-radius: 6px;
  background: var(--custom-bg);
  padding: 0.32rem;
  box-shadow: 0 10px 24px color-mix(in srgb, #000000 38%, transparent);
}

.design-setup-row-options-menu.is-floating {
  position: fixed;
  z-index: 140;
  top: 0;
  right: auto;
  left: 0;
  margin: 0;
}

.design-setup-row-options.is-drop-up .design-setup-row-options-menu:not(.is-floating) {
  top: auto;
  bottom: calc(100% + 3px);
}

.design-setup-row-options-menu[hidden] {
  display: none;
}

.design-setup-row-options-title {
  margin: 0;
  padding: 0.08rem 0.2rem 0.12rem;
  color: var(--custom-muted);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.design-setup-row-options-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: center;
  min-height: 1.9rem;
  border: 1px solid var(--custom-line);
  border-radius: 4px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  cursor: pointer;
  font: inherit;
  padding: 0.28rem 0.38rem;
  text-align: left;
}

.design-setup-row-options-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.design-setup-row-options-item span {
  font-size: 0.62rem;
  font-weight: 750;
  line-height: 1.2;
}

.design-setup-row-options-item:hover,
.design-setup-row-options-item:focus-within {
  border-color: var(--pf-chat-neon);
  color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 8%, var(--custom-panel));
}

.design-setup-row-options-item:has(input:checked) {
  border-color: var(--pf-chat-neon);
  color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 10%, var(--custom-panel));
}

.design-setup-row-options-check {
  width: 0.58rem;
  height: 0.58rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.35;
}

.design-setup-row-options-item:has(input:checked) .design-setup-row-options-check {
  opacity: 1;
  background: var(--pf-chat-neon);
  box-shadow: inset 0 0 0 2px var(--custom-bg);
}

.design-setup-page-template-chip[hidden] {
  display: none;
}

.design-setup-type-icon {
  width: 1.72rem;
  height: 1.72rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--pf-chat-neon);
  border-radius: 5px;
  background: color-mix(in srgb, var(--pf-chat-neon) 10%, var(--custom-bg));
  color: var(--pf-chat-neon);
}

.design-setup-type-icon svg {
  width: 0.92rem;
  height: 0.92rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.design-setup-type-icon--slideshow svg path:last-child {
  fill: currentColor;
  stroke: none;
}

.design-setup-type-icon--gallery svg rect {
  fill: none;
}

.design-setup-template-icon {
  position: relative;
  width: 1.72rem;
  height: 1.72rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--pf-chat-neon);
  border-radius: 5px;
  background: color-mix(in srgb, var(--pf-chat-neon) 10%, var(--custom-bg));
}

.design-setup-template-icon i,
.design-setup-template-icon::before,
.design-setup-template-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.design-setup-template-icon--grid i {
  width: 0.82rem;
  height: 0.82rem;
  background:
    linear-gradient(var(--pf-chat-neon), var(--pf-chat-neon)) left top / 0.34rem 0.34rem,
    linear-gradient(var(--pf-chat-neon), var(--pf-chat-neon)) right top / 0.34rem 0.34rem,
    linear-gradient(var(--pf-chat-neon), var(--pf-chat-neon)) left bottom / 0.34rem 0.34rem,
    linear-gradient(var(--pf-chat-neon), var(--pf-chat-neon)) right bottom / 0.34rem 0.34rem;
  background-repeat: no-repeat;
}

.design-setup-template-icon--play i {
  width: 0;
  height: 0;
  margin-left: 0.12rem;
  border-top: 0.36rem solid transparent;
  border-bottom: 0.36rem solid transparent;
  border-left: 0.58rem solid var(--pf-chat-neon);
}

.design-setup-template-icon--user i {
  width: 0.42rem;
  height: 0.42rem;
  top: 0.36rem;
  border: 2px solid var(--pf-chat-neon);
  border-radius: 50%;
}

.design-setup-template-icon--user::after {
  bottom: 0.34rem;
  width: 0.82rem;
  height: 0.38rem;
  border: 2px solid var(--pf-chat-neon);
  border-bottom: 0;
  border-radius: 0.6rem 0.6rem 0 0;
}

.design-setup-template-icon--info::before,
.design-setup-template-icon--text::before {
  width: 0.82rem;
  height: 0.1rem;
  top: 0.48rem;
  background: var(--pf-chat-neon);
  box-shadow: 0 0.32rem 0 var(--pf-chat-neon), 0 0.64rem 0 var(--pf-chat-neon);
}

.design-setup-template-icon--contact::before {
  width: 0.78rem;
  height: 0.9rem;
  border: 2px solid var(--pf-chat-neon);
  border-radius: 2px;
}

.design-setup-template-icon--contact::after {
  width: 0.5rem;
  height: 0.08rem;
  top: 0.54rem;
  background: var(--pf-chat-neon);
  box-shadow: 0 0.2rem 0 var(--pf-chat-neon);
}

.design-setup-template-icon--mail::before {
  width: 0.9rem;
  height: 0.58rem;
  border: 2px solid var(--pf-chat-neon);
  border-radius: 2px;
}

.design-setup-template-icon--mail::after {
  width: 0.58rem;
  height: 0.58rem;
  border-left: 2px solid var(--pf-chat-neon);
  border-bottom: 2px solid var(--pf-chat-neon);
  transform: rotate(-45deg) translateY(-0.12rem);
}

.design-setup-template-icon--code::before,
.design-setup-template-icon--code::after {
  width: 0.42rem;
  height: 0.42rem;
  border-color: var(--pf-chat-neon);
  border-style: solid;
}

.design-setup-template-icon--code::before {
  left: 0.4rem;
  border-width: 0 0 2px 2px;
  transform: rotate(45deg);
}

.design-setup-template-icon--code::after {
  right: 0.4rem;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.design-setup-gallery-row,
.design-setup-section-row {
  display: grid;
  grid-template-columns: 1fr minmax(160px, 0.8fr);
  gap: 0.55rem;
  align-items: center;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-panel);
  padding: 0.55rem;
}

.design-setup-section-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.55rem;
}

.design-setup-section-row {
  grid-template-columns: 1fr minmax(150px, 0.55fr) minmax(150px, 0.55fr);
}

.design-setup-gallery-row > span,
.design-setup-section-row > span {
  display: grid;
  gap: 0.15rem;
}

.design-setup-section-row label,
.design-setup-gallery-row label {
  display: grid;
  gap: 0.25rem;
}

.design-setup-section-row select,
.design-setup-gallery-row input {
  width: 100%;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-bg);
  color: var(--custom-copy);
  font: inherit;
  font-size: 0.68rem;
  padding: 0.5rem 0.55rem;
}

.design-setup-template-picker {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--custom-bg) 86%, transparent);
  backdrop-filter: blur(6px);
}

.design-setup-template-picker-panel {
  width: min(940px, 100%);
  max-height: min(82vh, 720px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  border: 1px solid var(--pf-chat-neon);
  border-radius: 0;
  background: var(--custom-bg);
  color: var(--custom-copy);
  box-shadow: 0 0 0 1px var(--custom-line), 0 16px 40px color-mix(in srgb, #000000 42%, transparent);
  overflow: hidden;
}

.design-setup-template-picker-panel header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--custom-line);
  padding: 0.85rem 1rem;
}

.design-setup-template-picker-panel h3 {
  margin: 0.18rem 0 0;
  color: var(--custom-copy);
  font-size: 1rem;
}

.design-setup-template-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.65rem 1rem 0.15rem;
  border-bottom: 1px solid var(--custom-line);
}

.design-setup-template-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.7rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--custom-line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 600 0.62rem/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.design-setup-template-cat span {
  opacity: 0.75;
  font-size: 0.58rem;
  letter-spacing: 0;
}

.design-setup-template-cat.is-active,
.design-setup-template-cat:hover {
  border-color: var(--pf-chat-neon);
  color: var(--pf-chat-neon);
}

.design-setup-template-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--custom-muted);
  font-size: 0.85rem;
}

.design-setup-template-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.62rem;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

.design-setup-page-template-card {
  min-height: 15.7rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.46rem;
  align-content: start;
  border: 1px solid var(--custom-line);
  border-radius: 0;
  background: var(--custom-panel);
  color: var(--custom-copy);
  cursor: pointer;
  font: inherit;
  padding: 0.58rem;
  text-align: left;
}

.design-setup-page-template-card strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--custom-copy);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-setup-page-template-preview {
  grid-column: 1 / -1;
  position: relative;
  height: 4rem;
  display: grid;
  grid-template-columns: 0.42fr 1fr;
  gap: 0.28rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 36%, var(--custom-line));
  border-radius: 0;
  padding: 0.32rem;
  background: color-mix(in srgb, var(--custom-copy) 7%, var(--custom-bg));
}

.design-setup-page-template-preview--actual {
  height: 13.5rem;
  padding: 0;
  background: #f7f7f4;
}

.design-setup-page-template-preview--actual iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}

.design-setup-page-template-preview i,
.design-setup-page-template-preview b,
.design-setup-page-template-preview em {
  display: block;
  min-width: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--custom-copy) 20%, var(--custom-bg));
}

.design-setup-page-template-preview i {
  grid-row: 1 / span 4;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pf-chat-neon) 26%, transparent), transparent 60%),
    color-mix(in srgb, var(--custom-copy) 12%, var(--custom-bg));
}

.design-setup-page-template-preview b {
  height: 0.28rem;
}

.design-setup-page-template-preview b:nth-of-type(1) {
  width: 72%;
  height: 0.42rem;
  background: color-mix(in srgb, var(--pf-chat-neon) 30%, var(--custom-bg));
}

.design-setup-page-template-preview b:nth-of-type(2) {
  width: 92%;
}

.design-setup-page-template-preview b:nth-of-type(3) {
  width: 58%;
}

.design-setup-page-template-preview em {
  width: 46%;
  height: 0.34rem;
  background: color-mix(in srgb, var(--pf-chat-neon) 24%, var(--custom-bg));
}

.design-setup-page-template-preview--columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.design-setup-page-template-preview--columns i {
  display: none;
}

.design-setup-page-template-preview--contact {
  grid-template-columns: 1fr 0.5fr;
}

.design-setup-page-template-preview--contact i {
  grid-column: 2;
  grid-row: 1 / span 4;
}

.design-setup-page-template-preview--contact b,
.design-setup-page-template-preview--contact em {
  grid-column: 1;
}

.design-setup-page-template-preview--cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.design-setup-page-template-preview--cards i,
.design-setup-page-template-preview--cards b,
.design-setup-page-template-preview--cards em {
  grid-row: auto;
  width: auto;
  height: auto;
  min-height: 2.1rem;
}

.design-setup-page-template-preview--actual-tile {
  height: 13.5rem;
  grid-template-columns: minmax(4.8rem, 0.48fr) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: stretch;
  padding: 0.62rem;
  background: #f4f4f1;
}

.design-setup-page-template-tile-media,
.design-setup-page-template-tile-copy {
  min-width: 0;
  overflow: hidden;
}

.design-setup-page-template-tile-media {
  display: block;
  background: #dfdfd8;
}

.design-setup-page-template-tile-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(0.1);
}

.design-setup-page-template-preview--actual-tile .design-setup-page-template-tile-media i {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pf-chat-neon) 20%, transparent), transparent 62%),
    #e8e8e2;
}

.design-setup-page-template-tile-copy {
  display: grid;
  align-content: center;
  gap: 0.34rem;
  color: #151515;
}

.design-setup-page-template-preview--actual-tile .design-setup-page-template-tile-copy b,
.design-setup-page-template-preview--actual-tile .design-setup-page-template-tile-copy small,
.design-setup-page-template-preview--actual-tile .design-setup-page-template-tile-copy em {
  width: auto;
  height: auto;
  min-height: 0;
  display: block;
  border-radius: 0;
  background: transparent;
}

.design-setup-page-template-preview--actual-tile .design-setup-page-template-tile-copy b {
  display: -webkit-box;
  overflow: hidden;
  color: #101010;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.05;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.design-setup-page-template-preview--actual-tile .design-setup-page-template-tile-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: #4a4a4a;
  font-size: 0.54rem;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.design-setup-page-template-preview--actual-tile .design-setup-page-template-tile-copy em {
  width: 100%;
  height: 0.25rem;
  background: #d6d6d0;
}

.design-setup-page-template-preview--actual-tile .design-setup-page-template-tile-copy em:nth-of-type(1) {
  width: 82%;
  background: color-mix(in srgb, var(--pf-chat-neon) 34%, #d6d6d0);
}

.design-setup-page-template-preview--actual-tile .design-setup-page-template-tile-copy em:nth-of-type(2) {
  width: 62%;
}

.design-setup-page-template-preview--actual-tile.is-contact .design-setup-page-template-tile-copy em {
  height: 0.72rem;
  border: 1px solid #d2d2ca;
  background: #fbfbf8;
}

.design-setup-page-template-preview--actual-tile.is-gallery {
  grid-template-columns: 1fr;
}

.design-setup-page-template-preview--actual-tile.is-gallery .design-setup-page-template-tile-media {
  min-height: 7rem;
}

.design-setup-page-template-preview--actual-tile.is-gallery .design-setup-page-template-tile-copy {
  align-content: end;
}

.design-setup-page-template-card:hover,
.design-setup-page-template-card:focus-visible,
.design-setup-page-template-card.is-selected {
  outline: none;
  border-color: var(--pf-chat-neon);
  background: color-mix(in srgb, var(--pf-chat-neon) 10%, var(--custom-panel));
}

.design-setup-page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.55rem;
}

.design-setup-layout-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.design-setup-layout-option {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0.45rem;
  min-height: 6.4rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  font-size: 0.7rem;
  font-weight: 750;
  padding: 0.6rem;
  cursor: pointer;
}

.design-setup-layout-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  accent-color: var(--pf-chat-neon);
}

.design-setup-layout-option:has(input:checked) {
  border-color: var(--pf-chat-neon);
}

.design-setup-layout-label {
  color: var(--custom-copy);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
}

.design-setup-layout-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.65 / 1;
  border: 1px solid var(--custom-line);
  border-radius: 4px;
  background:
    linear-gradient(to right, var(--custom-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--custom-line) 1px, transparent 1px),
    var(--custom-bg);
  background-size: 33% 100%, 100% 33%;
  overflow: hidden;
}

.design-setup-layout-art i,
.design-setup-layout-art b,
.design-setup-layout-art em {
  position: absolute;
  display: block;
  border-radius: 2px;
  background: var(--custom-copy);
  opacity: 0.75;
}

.design-setup-layout-art i {
  inset: 34% 28%;
  opacity: 0.18;
}

.design-setup-layout-art b {
  background: var(--pf-chat-neon);
  opacity: 1;
}

.design-setup-layout-art em {
  opacity: 0.35;
}

.design-setup-layout-art--overlay b {
  inset: 38% 24%;
}

.design-setup-layout-art--overlay em {
  inset: 12% 70% 72% 8%;
}

.design-setup-layout-art--top b,
.design-setup-layout-art--top-responsive b {
  inset: 0 0 auto;
  height: 16%;
}

.design-setup-layout-art--bottom b {
  inset: auto 0 0;
  height: 16%;
}

.design-setup-layout-art--left b,
.design-setup-layout-art--left-responsive b {
  inset: 0 auto 0 0;
  width: 16%;
}

.design-setup-layout-art--right b,
.design-setup-layout-art--right-responsive b {
  inset: 0 0 0 auto;
  width: 16%;
}

.design-setup-layout-art--top-responsive em,
.design-setup-layout-art--left-responsive em,
.design-setup-layout-art--right-responsive em {
  right: 8%;
  bottom: 10%;
  width: 22%;
  height: 9%;
  box-shadow: 0 0.24rem 0 var(--custom-copy), 0 0.48rem 0 var(--custom-copy);
}

.design-setup-build-note {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.65rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  font-size: 0.72rem;
  line-height: 1.45;
  padding: 0.75rem;
}

.design-setup.is-seo-skipped #design-setup-seo-goal,
.design-setup.is-seo-skipped #design-setup-seo-title,
.design-setup.is-seo-skipped #design-setup-seo-description,
.design-setup.is-seo-skipped #design-setup-favicon,
.design-setup.is-seo-skipped #design-setup-social-image,
.design-setup.is-seo-skipped #design-setup-seo-keywords,
.design-setup.is-seo-skipped #design-setup-seo-brief,
.design-setup.is-seo-skipped #design-setup-seo-specialties,
.design-setup.is-seo-skipped #design-setup-seo-locations,
.design-setup.is-seo-skipped #design-setup-seo-bio,
.design-setup.is-seo-skipped #design-setup-seo-clients,
.design-setup.is-seo-skipped #design-setup-seo-reference,
.design-setup.is-seo-skipped .design-setup-seo-workspace,
.design-setup.is-seo-skipped .design-setup-seo-check-grid,
.design-setup.is-seo-skipped .design-setup-seo-ai-bar {
  opacity: 0.45;
  pointer-events: none;
}

.design-setup-seo-layout {
  display: grid;
  gap: 0.85rem;
}

.design-setup-seo-layout-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.92fr) minmax(0, 1.35fr);
  gap: 0.85rem;
  align-items: start;
}

.design-setup-seo-checklist,
.design-setup-seo-workspace {
  border: 1px solid var(--custom-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--custom-panel) 92%, #000 8%);
  padding: 0.75rem;
}

.design-setup-seo-checklist-head,
.design-setup-seo-questionnaire-head {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  align-items: flex-start;
  margin-bottom: 0.55rem;
}

.design-setup-seo-checklist-head strong,
.design-setup-seo-questionnaire-head strong {
  display: block;
  font-size: 0.82rem;
}

.design-setup-seo-checklist-head small,
.design-setup-seo-questionnaire-head small {
  display: block;
  color: var(--custom-muted);
  font-size: 0.62rem;
  margin-top: 0.12rem;
}

.design-setup-seo-score {
  text-align: right;
  min-width: 4.5rem;
}

.design-setup-seo-score strong {
  display: block;
  font-size: 1.1rem;
  color: var(--pf-chat-neon);
}

.design-setup-seo-score span {
  font-size: 0.58rem;
  color: var(--custom-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.design-setup-seo-summary {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
  font-size: 0.62rem;
  color: var(--custom-muted);
}

.design-setup-seo-check-grid {
  display: grid;
  gap: 0.55rem;
}

.design-setup-seo-category h4 {
  margin: 0 0 0.35rem;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--custom-muted);
}

.design-setup-seo-checks {
  display: grid;
  gap: 0.32rem;
}

.design-setup-seo-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.42rem;
  align-items: start;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  padding: 0.38rem 0.45rem;
  background: color-mix(in srgb, var(--custom-bg) 88%, #000 12%);
}

.design-setup-seo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.8rem;
  border-radius: 999px;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.14rem 0.34rem;
}

.design-setup-seo-check--ok .design-setup-seo-pill {
  background: color-mix(in srgb, #2f8f5b 24%, transparent);
  color: #8fd9ad;
}

.design-setup-seo-check--watch .design-setup-seo-pill {
  background: color-mix(in srgb, #b58b2d 20%, transparent);
  color: #f0c56d;
}

.design-setup-seo-check--missing .design-setup-seo-pill {
  background: color-mix(in srgb, #9b3d49 18%, transparent);
  color: #f0a2ab;
}

.design-setup-seo-check strong {
  display: block;
  font-size: 0.68rem;
}

.design-setup-seo-check small {
  display: block;
  color: var(--custom-muted);
  font-size: 0.58rem;
}

.design-setup-seo-missing {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--custom-line);
}

.design-setup-seo-missing h4 {
  margin: 0 0 0.35rem;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--custom-muted);
}

.design-setup-seo-missing div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.design-setup-seo-missing span {
  border: 1px solid var(--custom-line);
  border-radius: 999px;
  padding: 0.16rem 0.45rem;
  font-size: 0.58rem;
}

.design-setup-seo-workspace {
  display: grid;
  gap: 0.7rem;
}

.design-setup-seo-derived-grid,
.design-setup-seo-fields,
.design-setup-seo-uploads {
  display: grid;
  gap: 0.55rem;
}

.design-setup-seo-derived-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.design-setup-seo-uploads {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.design-setup-seo-ai-bar {
  display: grid;
  gap: 0.45rem;
  border-top: 1px solid var(--custom-line);
  padding-top: 0.55rem;
}

.design-setup-seo-generate-btn,
.design-setup-seo-quick-btn {
  justify-self: start;
  min-height: 1.7rem;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 62%, var(--custom-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--pf-chat-neon) 12%, var(--custom-bg));
  color: var(--pf-chat-neon);
  cursor: pointer;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.62rem;
  text-transform: uppercase;
}

.design-setup-seo-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.design-setup-seo-ai-bar small[data-wizard-seo-generate-status] {
  color: var(--custom-muted);
  font-size: 0.6rem;
}

@media (max-width: 980px) {
  .design-setup-seo-layout-grid {
    grid-template-columns: 1fr;
  }
  .design-setup-seo-uploads {
    grid-template-columns: 1fr;
  }
}

.design-setup-output {
  border-top: 1px solid var(--custom-line);
  padding: 0 1rem 1rem;
}

.design-setup-output:empty {
  display: none;
}

.design-setup-summary {
  display: grid;
  gap: 0.28rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  font-size: 0.72rem;
  line-height: 1.45;
  padding: 0.75rem;
}

.design-setup-summary em {
  color: var(--pf-chat-neon);
  font-style: normal;
}

.design-setup-result {
  display: grid;
  gap: 0.55rem;
  border: 1px solid var(--custom-line);
  border-radius: 8px;
  background: var(--custom-panel);
  color: var(--custom-copy);
  padding: 0.85rem 0.95rem;
}

.design-setup-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.design-setup-result-head strong {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.design-setup-result-meta {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--custom-muted) 70%, var(--pf-chat-neon) 30%);
}

.design-setup-result-list {
  display: grid;
  gap: 0.28rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.72rem;
  line-height: 1.45;
}

.design-setup-result-list li {
  position: relative;
  padding-left: 0.85rem;
}

.design-setup-result-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pf-chat-neon) 72%, var(--custom-copy) 28%);
}

.design-setup-result-foot {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--custom-muted) 78%, var(--pf-chat-neon) 22%);
}

.design-setup-result--applied {
  border-color: color-mix(in srgb, #4ade80 42%, var(--custom-line) 58%);
  background: color-mix(in srgb, #4ade80 8%, var(--custom-panel) 92%);
}

.design-setup-result--applied .design-setup-result-head strong {
  color: color-mix(in srgb, #86efac 80%, var(--custom-copy) 20%);
}

.design-setup-result--pending {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 38%, var(--custom-line) 62%);
}

.design-setup-step[data-design-step-panel="4"] {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 0;
  height: 100%;
}

.design-setup-step[data-design-step-panel="4"] .design-setup-section--apply {
  flex: 0 0 auto;
}

.design-setup-build-summary:not([hidden]) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.design-setup-build-summary:empty {
  display: none;
}

.design-setup-build-summary .design-setup-result {
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
}

.design-setup-result--compact {
  gap: 0.38rem;
  padding: 0.62rem 0.72rem;
  border-radius: 6px;
}

.design-setup-result-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.35rem;
  font-size: 0.68rem;
  line-height: 1.35;
}

.design-setup-result-sep {
  color: var(--custom-muted);
  opacity: 0.55;
  user-select: none;
}

.design-setup-result-em {
  color: var(--custom-copy);
  font-weight: 650;
}

.design-setup-result-em.design-setup-result-site {
  color: var(--pf-chat-neon);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.design-setup-result-logo {
  color: var(--custom-muted);
  font-size: 0.66rem;
}

.design-setup-result-logo .design-setup-result-em {
  color: color-mix(in srgb, var(--custom-copy) 88%, var(--pf-chat-neon) 12%);
}

.design-setup-result-chips,
.design-setup-result-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.design-setup-result-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.18rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--custom-line) 85%, var(--pf-chat-neon) 15%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--custom-bg) 72%, transparent);
  color: color-mix(in srgb, var(--custom-muted) 55%, var(--custom-copy) 45%);
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.25;
}

.design-setup-result-menu .design-setup-result-tag {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 28%, var(--custom-line) 72%);
  color: color-mix(in srgb, var(--custom-muted) 40%, var(--custom-copy) 60%);
}

.design-setup-result-meta-line {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.35;
  color: var(--custom-muted);
}

.design-setup-result--compact .design-setup-result-foot {
  margin-top: 0.15rem;
  font-size: 0.62rem;
}

#design-setup[data-design-step="4"] .design-setup-output:empty {
  display: none;
  border-top: 0;
  padding: 0;
}

.design-setup-result--warning {
  border-color: color-mix(in srgb, #fbbf24 42%, var(--custom-line) 58%);
  background: color-mix(in srgb, #fbbf24 8%, var(--custom-panel) 92%);
  margin-bottom: 12px;
}

.design-setup-result--warning strong {
  color: color-mix(in srgb, #fcd34d 80%, var(--custom-copy) 20%);
}

.design-setup-result--preview {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 24%, var(--custom-line) 76%);
}

:root:not([data-manual-theme="dark"]) .design-setup {
  background: color-mix(in srgb, #dddddd 82%, transparent);
}

:root:not([data-manual-theme="dark"]) .design-setup-panel,
:root:not([data-manual-theme="dark"]) .design-setup-field input,
:root:not([data-manual-theme="dark"]) .design-setup-field select,
:root:not([data-manual-theme="dark"]) .design-setup-field textarea,
:root:not([data-manual-theme="dark"]) .design-setup-gallery-row input {
  background: #dddddd !important;
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) .design-setup-toggle,
:root:not([data-manual-theme="dark"]) .design-setup-file-upload,
:root:not([data-manual-theme="dark"]) .design-setup-menu-row,
:root:not([data-manual-theme="dark"]) .design-setup-row-feature,
:root:not([data-manual-theme="dark"]) .design-setup-preview-toggle,
:root:not([data-manual-theme="dark"]) .design-setup-preview-stage,
:root:not([data-manual-theme="dark"]) .design-setup-preview-tree-row,
:root:not([data-manual-theme="dark"]) .design-setup-page-template-chip,
:root:not([data-manual-theme="dark"]) .design-setup-mini-toggle,
:root:not([data-manual-theme="dark"]) .design-setup-template-picker-panel,
:root:not([data-manual-theme="dark"]) .design-setup-page-template-card,
:root:not([data-manual-theme="dark"]) .design-setup-upload-status,
:root:not([data-manual-theme="dark"]) .design-setup-gallery-row,
:root:not([data-manual-theme="dark"]) .design-setup-section-row,
:root:not([data-manual-theme="dark"]) .design-setup-layout-option,
:root:not([data-manual-theme="dark"]) .design-setup-build-note,
:root:not([data-manual-theme="dark"]) .design-setup-summary,
:root:not([data-manual-theme="dark"]) .design-setup-preview .template-card-media,
:root:not([data-manual-theme="dark"]) .design-setup-tabs button {
  background: #c4c4c4 !important;
  color: #222222 !important;
}

:root:not([data-manual-theme="dark"]) .design-setup-panel,
:root:not([data-manual-theme="dark"]) .design-setup-tabs button.is-active,
:root:not([data-manual-theme="dark"]) .design-setup-icon,
:root:not([data-manual-theme="dark"]) .design-setup-page-template-chip,
:root:not([data-manual-theme="dark"]) .design-setup-field input:focus,
:root:not([data-manual-theme="dark"]) .design-setup-field select:focus,
:root:not([data-manual-theme="dark"]) .design-setup-field textarea:focus {
  border-color: #008fbd !important;
}

:root:not([data-manual-theme="dark"]) .design-setup-kicker,
:root:not([data-manual-theme="dark"]) .design-setup-tabs button.is-active,
:root:not([data-manual-theme="dark"]) .design-setup-icon,
:root:not([data-manual-theme="dark"]) .design-setup-page-template-chip,
:root:not([data-manual-theme="dark"]) .design-setup-summary em {
  color: #008fbd !important;
}

:root:not([data-manual-theme="dark"]) .design-setup-brand-section,
:root:not([data-manual-theme="dark"]) .design-setup-brand-logo-field input,
:root:not([data-manual-theme="dark"]) .design-setup-brand-logo-upload,
:root:not([data-manual-theme="dark"]) .design-setup-font-select,
:root:not([data-manual-theme="dark"]) .design-setup-color-hex,
:root:not([data-manual-theme="dark"]) .design-setup-color-field--alpha input[type="number"] {
  background: #ffffff !important;
  color: #222222 !important;
  border-color: color-mix(in srgb, #008fbd 18%, #cccccc) !important;
}

:root:not([data-manual-theme="dark"]) .design-setup-color-input input[type="color"] {
  background: #ffffff !important;
}

:root[data-manual-theme="dark"] .design-setup-brand-section,
:root[data-manual-theme="dark"] .design-setup-brand-logo-field input,
:root[data-manual-theme="dark"] .design-setup-brand-logo-upload,
:root[data-manual-theme="dark"] .design-setup-font-select {
  background: #111111 !important;
  border-color: color-mix(in srgb, var(--custom-line) 88%, var(--pf-chat-neon) 12%) !important;
}

:root[data-manual-theme="dark"] .design-setup {
  background: color-mix(in srgb, #111111 86%, transparent);
}

:root[data-manual-theme="dark"] .design-setup-panel,
:root[data-manual-theme="dark"] .design-setup-field input,
:root[data-manual-theme="dark"] .design-setup-field select,
:root[data-manual-theme="dark"] .design-setup-field textarea,
:root[data-manual-theme="dark"] .design-setup-gallery-row input {
  background: #111111 !important;
  color: #d0d0d0 !important;
}

:root[data-manual-theme="dark"] .design-setup-toggle,
:root[data-manual-theme="dark"] .design-setup-file-upload,
:root[data-manual-theme="dark"] .design-setup-menu-row,
:root[data-manual-theme="dark"] .design-setup-row-feature,
:root[data-manual-theme="dark"] .design-setup-preview-toggle,
:root[data-manual-theme="dark"] .design-setup-preview-stage,
:root[data-manual-theme="dark"] .design-setup-preview-tree-row,
:root[data-manual-theme="dark"] .design-setup-page-template-chip,
:root[data-manual-theme="dark"] .design-setup-mini-toggle,
:root[data-manual-theme="dark"] .design-setup-template-picker-panel,
:root[data-manual-theme="dark"] .design-setup-page-template-card,
:root[data-manual-theme="dark"] .design-setup-upload-status,
:root[data-manual-theme="dark"] .design-setup-gallery-row,
:root[data-manual-theme="dark"] .design-setup-section-row,
:root[data-manual-theme="dark"] .design-setup-layout-option,
:root[data-manual-theme="dark"] .design-setup-build-note,
:root[data-manual-theme="dark"] .design-setup-summary,
:root[data-manual-theme="dark"] .design-setup-preview .template-card-media,
:root[data-manual-theme="dark"] .design-setup-tabs button {
  background: #151515 !important;
  color: #d0d0d0 !important;
}

:root[data-manual-theme="dark"] .design-setup-panel,
:root[data-manual-theme="dark"] .design-setup-tabs button.is-active,
:root[data-manual-theme="dark"] .design-setup-icon,
:root[data-manual-theme="dark"] .design-setup-page-template-chip,
:root[data-manual-theme="dark"] .design-setup-field input:focus,
:root[data-manual-theme="dark"] .design-setup-field select:focus,
:root[data-manual-theme="dark"] .design-setup-field textarea:focus {
  border-color: #00d9ff !important;
}

:root[data-manual-theme="dark"] .design-setup-kicker,
:root[data-manual-theme="dark"] .design-setup-tabs button.is-active,
:root[data-manual-theme="dark"] .design-setup-icon,
:root[data-manual-theme="dark"] .design-setup-page-template-chip,
:root[data-manual-theme="dark"] .design-setup-summary em {
  color: #00d9ff !important;
}

.design-setup-menu-builder .design-setup-mini-toggle {
  background: transparent !important;
  border: 0 !important;
  color: var(--custom-copy) !important;
}

.design-setup-menu-builder .design-setup-upload-button {
  background: color-mix(in srgb, var(--pf-chat-neon) 10%, var(--custom-bg)) !important;
}

@media (max-width: 760px) {
  .design-setup {
    place-items: stretch;
    padding: 0;
  }

  .design-setup-panel {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .design-setup-head {
    min-height: 3.5rem;
    padding: 0.55rem 3rem 0.5rem 0.8rem;
  }

  .design-setup-kicker {
    font-size: 0.52rem;
  }

  .design-setup-head h2 {
    font-size: 0.9rem;
  }

  .design-setup-tabs {
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    padding: 0.45rem 0.75rem;
    scrollbar-width: none;
  }

  .design-setup-tabs::-webkit-scrollbar {
    display: none;
  }

  .design-setup-tabs button {
    flex: 0 0 auto;
    min-height: 1.7rem;
    font-size: 0.62rem;
    padding-inline: 0.58rem;
  }

  .design-setup-form {
    padding: 0.75rem;
  }

  .design-setup-brand-grid,
  .design-setup-brand-type-grid,
  .design-setup-palette-grid {
    grid-template-columns: 1fr;
  }

  .design-setup-actions {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
  }

  .design-setup-actions .design-setup-action.btn-neon {
    width: 100%;
    min-height: 2.35rem !important;
    font-size: 0.66rem !important;
    padding-inline: 0.5rem !important;
  }

  .design-setup-actions #design-setup-back {
    grid-column: 1;
  }

  .design-setup-actions #design-setup-next,
  .design-setup-actions #design-setup-open-signup,
  .design-setup-actions #design-setup-apply-build {
    grid-column: 2;
  }

  .design-setup-actions #design-setup-open-signup.hidden,
  .design-setup-actions #design-setup-next.hidden,
  .design-setup-actions #design-setup-apply-build.hidden {
    display: none !important;
  }

  .design-setup-output {
    max-height: 30dvh;
    overflow: auto;
    padding: 0 0.75rem 0.75rem;
  }

  .design-setup-output[data-design-setup-output="idle"] {
    display: none;
  }

  .design-setup-preview,
  .design-setup-grid,
  .design-setup-grid--wide,
  .design-setup-gallery-list,
  .design-setup-page-grid,
  .design-setup-layout-grid,
  .design-setup-build-meta,
  .design-setup-build-mode-options,
  .design-setup-menu-row,
  .design-setup-gallery-row,
  .design-setup-section-row {
    grid-template-columns: 1fr;
  }

  .design-setup-toggle {
    grid-column: 1;
  }
}

/* Mobile and accessible theme pass */
.sidebar-brand-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 0.75rem !important;
}

body:not(.is-admin-preview-open) .sidebar-header .manual-theme-toggle,
.sidebar-header .manual-theme-toggle {
  display: inline-grid !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  place-items: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  border-radius: 0 !important;
  z-index: 1 !important;
}

.manual-theme-toggle-icon {
  position: relative !important;
  inset: auto !important;
  width: 1rem !important;
  height: 1rem !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--pf-chat-neon) !important;
  outline-offset: 2px !important;
}

:root:not([data-manual-theme="dark"]) {
  --custom-bg: #f5f7f9 !important;
  --custom-paper: #ffffff !important;
  --custom-panel: #ffffff !important;
  --custom-ink: #101820 !important;
  --custom-copy: #24323c !important;
  --custom-muted: #5f6f79 !important;
  --custom-line: #d3dde4 !important;
  --custom-accent: #007b99 !important;
  --custom-accent-soft: rgba(0, 123, 153, 0.12) !important;
  --custom-accent-line: rgba(0, 123, 153, 0.42) !important;
  --custom-warm: #007b99 !important;
  --pf-chat-stage: #f5f7f9 !important;
  --pf-chat-surface: #ffffff !important;
  --pf-chat-surface-soft: #edf3f6 !important;
  --pf-chat-ink: #101820 !important;
  --pf-chat-muted: #5f6f79 !important;
  --pf-chat-line: #d3dde4 !important;
  --pf-chat-neon: #007b99 !important;
  --pf-chat-neon-strong: #006984 !important;
  --pf-chat-neon-soft: rgba(0, 123, 153, 0.12) !important;
  --pf-chat-panel: #ffffff !important;
  --pf-chat-panel-2: #edf3f6 !important;
  --black: #f5f7f9 !important;
  --white: #101820 !important;
  --text: #24323c !important;
  --muted: #5f6f79 !important;
  --panel: #ffffff !important;
  --panel-raised: #f8fafb !important;
  --panel-border: #d3dde4 !important;
  --code-bg: #eef4f7 !important;
  --neon: #007b99 !important;
  --neon-border: #007b99 !important;
}

:root:not([data-manual-theme="dark"]) body,
:root:not([data-manual-theme="dark"]) .app,
:root:not([data-manual-theme="dark"]) .main,
:root:not([data-manual-theme="dark"]) .content,
:root:not([data-manual-theme="dark"]) body.is-chat-home,
:root:not([data-manual-theme="dark"]) body.is-chat-home .main,
:root:not([data-manual-theme="dark"]) body.is-chat-home .content,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-shell,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-body,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-layout,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-main,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-log {
  background: #f5f7f9 !important;
  color: #24323c !important;
}

:root:not([data-manual-theme="dark"]) .sidebar,
:root:not([data-manual-theme="dark"]) .sidebar-header,
:root:not([data-manual-theme="dark"]) .nav-tree,
:root:not([data-manual-theme="dark"]) .main-top,
:root:not([data-manual-theme="dark"]) body.is-article-view .main-top {
  background: #ffffff !important;
  color: #24323c !important;
  border-color: #d3dde4 !important;
}

:root:not([data-manual-theme="dark"]) .tabs,
:root:not([data-manual-theme="dark"]) .nav-section,
:root:not([data-manual-theme="dark"]) .nav-folder--topic[open],
:root:not([data-manual-theme="dark"]) .folder-count,
:root:not([data-manual-theme="dark"]) #search,
:root:not([data-manual-theme="dark"]) .manual-theme-toggle,
:root:not([data-manual-theme="dark"]) .sidebar-toggle,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-form,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-account-panel,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-bubble--assistant {
  background: #ffffff !important;
  color: #24323c !important;
  border-color: #d3dde4 !important;
}

:root:not([data-manual-theme="dark"]) .tab.active,
:root:not([data-manual-theme="dark"]) .tab:hover,
:root:not([data-manual-theme="dark"]) .nav-link:hover,
:root:not([data-manual-theme="dark"]) .nav-link.active,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-send-icon:hover,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-tool:hover {
  background: rgba(0, 123, 153, 0.12) !important;
  border-color: #007b99 !important;
  color: #007b99 !important;
}

:root:not([data-manual-theme="dark"]) .brand,
:root:not([data-manual-theme="dark"]) .tab,
:root:not([data-manual-theme="dark"]) .nav-folder summary,
:root:not([data-manual-theme="dark"]) .folder-label,
:root:not([data-manual-theme="dark"]) .nav-link,
:root:not([data-manual-theme="dark"]) .chat-title,
:root:not([data-manual-theme="dark"]) .prose h1,
:root:not([data-manual-theme="dark"]) .prose h2,
:root:not([data-manual-theme="dark"]) .prose h3,
:root:not([data-manual-theme="dark"]) .article-title {
  color: #101820 !important;
}

:root:not([data-manual-theme="dark"]) .subtitle,
:root:not([data-manual-theme="dark"]) .main-top-label,
:root:not([data-manual-theme="dark"]) .nav-section-title,
:root:not([data-manual-theme="dark"]) .folder-desc,
:root:not([data-manual-theme="dark"]) .prose p,
:root:not([data-manual-theme="dark"]) .prose li,
:root:not([data-manual-theme="dark"]) .chat-scope,
:root:not([data-manual-theme="dark"]) .chat-side-note {
  color: #5f6f79 !important;
}

:root {
  --chat-keyboard-offset: 0px;
  --manual-visual-height: 100dvh;
}

@media (max-width: 760px) {
  html,
  body {
    min-width: 0 !important;
    overflow-x: hidden !important;
    touch-action: manipulation !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  button,
  a,
  input,
  textarea,
  select {
    touch-action: manipulation !important;
  }

  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  .app {
    display: block !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(88vw, 21rem) !important;
    max-width: 21rem !important;
    max-height: none !important;
    height: 100dvh !important;
    z-index: 120 !important;
    transform: translateX(0) !important;
    transition: transform 180ms ease, opacity 180ms ease !important;
    box-shadow: 0.75rem 0 2rem rgba(0, 0, 0, 0.38) !important;
  }

  body.is-sidebar-collapsed .sidebar {
    transform: translateX(-105%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .sidebar-header {
    padding: 0.9rem !important;
  }

  .sidebar-brand-row {
    align-items: center !important;
  }

  .brand {
    font-size: 1.42rem !important;
    line-height: 1 !important;
  }

  .subtitle {
    margin-top: 0.18rem !important;
    font-size: 0.72rem !important;
  }

  .tabs {
    margin-top: 0.75rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .tab,
  #search,
  .manual-theme-toggle,
  .sidebar-toggle,
  .chat-tool,
  .chat-send-icon,
  .chat-close,
  .ai-fab {
    min-height: 2.75rem !important;
  }

  .manual-theme-toggle,
  .sidebar-header .manual-theme-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .sidebar-toggle,
  body.is-sidebar-collapsed .sidebar-toggle {
    position: fixed !important;
    left: max(0.75rem, env(safe-area-inset-left)) !important;
    top: max(0.75rem, env(safe-area-inset-top)) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 0 !important;
    z-index: 140 !important;
  }

  body:not(.is-sidebar-collapsed) .sidebar-toggle {
    left: calc(min(88vw, 21rem) - 0.55rem) !important;
  }

  body:not(.is-sidebar-collapsed) .sidebar-toggle::before {
    transform: translate(-35%, -50%) rotate(45deg) !important;
  }

  body.is-sidebar-collapsed .sidebar-toggle::before {
    transform: translate(-65%, -50%) rotate(225deg) !important;
  }

  .main {
    min-width: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .main-top {
    min-height: calc(3.9rem + env(safe-area-inset-top)) !important;
    padding: calc(0.85rem + env(safe-area-inset-top)) 0.9rem 0.7rem 4.25rem !important;
  }

  .content {
    min-height: 0 !important;
    height: calc(100dvh - 3.9rem - env(safe-area-inset-top)) !important;
    max-height: calc(100dvh - 3.9rem - env(safe-area-inset-top)) !important;
    overflow: auto !important;
    padding: 0.75rem !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.is-chat-home .content {
    padding: 0 !important;
  }

  body.is-chat-home .manual-home,
  body.is-chat-home .chat-home-slot,
  body.is-chat-home .chat-root--home,
  body.is-chat-home .chat-root--home .chat-shell,
  body.is-chat-home .chat-root--home .chat-body,
  body.is-chat-home .chat-root--home .chat-layout,
  body.is-chat-home .chat-root--home .chat-main {
    min-height: calc(100dvh - 3.9rem - env(safe-area-inset-top)) !important;
    height: calc(100dvh - 3.9rem - env(safe-area-inset-top)) !important;
  }

  body.is-chat-home .chat-root--home .chat-shell {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.is-chat-home .chat-root--home .chat-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.is-chat-home .chat-root--home .chat-log {
    padding: 0.85rem 0.75rem calc(5.7rem + var(--chat-keyboard-offset, 0px)) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.is-chat-home .chat-root--home .chat-bubble {
    max-width: 100% !important;
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
  }

  body.is-chat-home .chat-root--home .chat-compose {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--chat-keyboard-offset, 0px) !important;
    z-index: 80 !important;
    padding: 0.55rem 0.65rem calc(0.55rem + env(safe-area-inset-bottom)) !important;
    background: transparent !important;
    background-image: none !important;
    will-change: bottom !important;
  }

  body.is-chat-home .chat-root--home .chat-form {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 0.28rem !important;
    min-height: 3.25rem !important;
    padding: 0.3rem !important;
    border-radius: 0 !important;
  }

  body.is-chat-home .chat-root--home .chat-tool,
  body.is-chat-home .chat-root--home .chat-send-icon {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 0 !important;
  }

  body.is-chat-home .chat-root--home .chat-send-icon {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  body.is-chat-home .chat-root--home .chat-form textarea {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0.58rem 0.62rem !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  body.is-chat-home .chat-root--home .chat-account-panel {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 4.7rem 44px !important;
    border-radius: 0 !important;
  }

  .ai-fab,
  body.is-ai-open .ai-fab {
    left: max(0.75rem, env(safe-area-inset-left)) !important;
    bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
    height: 2.75rem !important;
    min-width: 4rem !important;
    z-index: 75 !important;
  }

  body.is-chat-home .ai-fab {
    display: none !important;
  }

  body.is-designs-view .designs-gallery {
    padding: 4.5rem 0.85rem 1rem !important;
  }

  body.is-designs-view .designs-gallery-head {
    max-width: none !important;
  }

  body.is-designs-view .designs-filter {
    width: 100% !important;
    min-height: 2.75rem !important;
  }

  body.is-designs-view .designs-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  body.is-designs-view .template-card-media {
    aspect-ratio: 16 / 10 !important;
  }

  .design-setup {
    align-items: center !important;
    padding: 0.5rem !important;
  }

  .design-setup-panel {
    width: 100% !important;
    max-height: calc(100dvh - 1rem) !important;
    border-radius: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Phone refinement: balanced chat controls and non-zoomed Designs browsing. */
@media (max-width: 760px) {
  body.is-chat-home .chat-root--home .chat-log {
    padding: 0.75rem 0.7rem calc(4.95rem + var(--chat-keyboard-offset, 0px)) !important;
  }

  body.is-chat-home .chat-root--home .chat-bubble {
    width: fit-content !important;
    max-width: min(100%, 34rem) !important;
    padding: 0.7rem 0.78rem !important;
    font-size: 0.82rem !important;
    line-height: 1.48 !important;
  }

  body.is-chat-home .chat-root--home .chat-bubble--user {
    margin-left: auto !important;
  }

  body.is-chat-home .chat-root--home .chat-bubble--assistant .chat-answer-title {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
  }

  body.is-chat-home .chat-root--home .chat-compose {
    padding: 0.45rem 0.55rem calc(0.45rem + env(safe-area-inset-bottom)) !important;
  }

  body.is-chat-home .chat-root--home .chat-form {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    min-height: 2.82rem !important;
    gap: 0.24rem !important;
    padding: 0.22rem !important;
    border-radius: 0 !important;
  }

  body.is-chat-home .chat-root--home .chat-tool,
  body.is-chat-home .chat-root--home .chat-send-icon {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 4px !important;
  }

  body.is-chat-home .chat-root--home .chat-send-icon {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
  }

  body.is-chat-home .chat-root--home .chat-tool::before {
    inset: 0.52rem !important;
  }

  body.is-chat-home .chat-root--home .chat-send-icon::before {
    inset: 0.58rem 0.52rem 0.58rem 0.62rem !important;
  }

  body.is-chat-home .chat-root--home .chat-form textarea {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0.38rem 0.56rem !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  body.is-chat-home .chat-root--home .chat-form textarea::placeholder {
    font-size: 0.88rem !important;
  }

  body.is-chat-home .chat-root--home .chat-account-panel {
    grid-template-columns: minmax(0, 1fr) 4.25rem 34px !important;
    gap: 0.25rem !important;
    padding: 0.28rem !important;
  }

  body.is-chat-home .chat-root--home .chat-account-panel input,
  body.is-chat-home .chat-root--home .chat-account-panel button {
    height: 34px !important;
    font-size: 0.72rem !important;
  }

  #chat-root .chat-mode-picker button {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.68rem !important;
  }

  #chat-root .chat-target-picker button {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.68rem !important;
  }

  .ai-panel {
    bottom: var(--chat-keyboard-offset, 0px) !important;
    height: calc(100dvh - var(--chat-keyboard-offset, 0px)) !important;
    max-height: calc(100dvh - var(--chat-keyboard-offset, 0px)) !important;
  }

  .chat-root--panel .chat-shell,
  .chat-root--panel .chat-body,
  .chat-root--panel .chat-layout,
  .chat-root--panel .chat-main {
    min-height: 0 !important;
  }

  .chat-root--panel .chat-log {
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom)) !important;
  }

  .chat-root--panel .chat-compose {
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom)) !important;
  }

  .chat-root--panel .chat-form textarea {
    min-height: 40px !important;
    font-size: 16px !important;
  }

  body.is-designs-view .content {
    padding: 0 !important;
  }

  body.is-designs-view .designs-home:not(.hidden) {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.is-designs-view .designs-gallery {
    width: 100% !important;
    min-height: auto !important;
    padding: 0.85rem 0.75rem 1.25rem !important;
    overflow: visible !important;
  }

  body.is-designs-view .designs-gallery-head {
    display: grid !important;
    gap: 0.5rem !important;
    margin: 0 0 0.85rem !important;
  }

  body.is-designs-view .designs-gallery-eyebrow {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
  }

  body.is-designs-view .designs-gallery-head h2 {
    margin: 0 !important;
    font-size: 1.15rem !important;
    line-height: 1.18 !important;
  }

  body.is-designs-view .designs-gallery-intro {
    max-width: 30rem !important;
    margin: 0 !important;
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
  }

  body.is-designs-view .designs-filter {
    width: 100% !important;
    min-height: 2.35rem !important;
    padding: 0.55rem 0.65rem !important;
    font-size: 0.9rem !important;
  }

  body.is-designs-view .designs-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.78rem !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.is-designs-view .template-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 0.42rem !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  body.is-designs-view .template-card:hover,
  body.is-designs-view .template-card:focus-visible,
  body.is-designs-view .template-card:focus-within {
    transform: none !important;
  }

  body.is-designs-view .template-card-media {
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 16 / 9 !important;
    max-height: 11.25rem !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  body.is-designs-view .template-card-media img,
  body.is-designs-view .template-card-media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  body.is-designs-view .template-card-body {
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0.68rem 0.72rem 0.72rem !important;
    opacity: 1 !important;
    transform: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.is-designs-view .template-card-body::before {
    display: none !important;
  }

  body.is-designs-view .template-card-name {
    font-size: 0.88rem !important;
    line-height: 1.22 !important;
  }

  body.is-designs-view .template-card-tagline {
    margin-top: 0.18rem !important;
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
  }

  body.is-designs-view .template-card-cta.btn-neon {
    min-height: 2.2rem !important;
    margin-top: 0.55rem !important;
    padding: 0.52rem 0.72rem !important;
    font-size: 0.62rem !important;
  }

  body.is-designs-view .designs-footnote {
    margin-top: 1rem !important;
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
  }

  .design-setup {
    min-height: 100dvh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .design-setup-panel {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 760px) {
  input,
  textarea,
  select,
  .designs-filter,
  .design-setup input,
  .design-setup textarea,
  .design-setup select,
  #chat-root textarea,
  #chat-root input {
    font-size: 16px !important;
  }
}

/* Final chat control placement/refinement. */
#chat-account-scope {
  position: fixed !important;
  top: 5px !important;
  right: 3.7rem !important;
  z-index: 155 !important;
  width: 1.75rem !important;
  min-width: 1.75rem !important;
  max-width: 1.75rem !important;
  height: 1.75rem !important;
  min-height: 1.75rem !important;
  border-radius: 6px !important;
  background: var(--custom-panel) !important;
}

.chat-top-hire {
  position: fixed !important;
  top: 5px !important;
  right: 5.8rem !important;
  z-index: 154 !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 0 !important;
  height: 1.75rem !important;
  min-height: 1.75rem !important;
  max-height: 1.75rem !important;
  padding: 0 0.58rem !important;
  border-radius: 6px !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background: var(--custom-panel) !important;
  color: var(--custom-copy) !important;
}

#chat-root .chat-form,
body.is-chat-home .chat-root--home .chat-form {
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  border-radius: 6px !important;
}

body.is-chat-home .chat-root--home .chat-form #chat-upload {
  grid-column: 1 !important;
}

body.is-chat-home .chat-root--home .chat-form textarea {
  grid-column: 2 !important;
}

body.is-chat-home .chat-root--home .chat-form #chat-dictate {
  grid-column: 3 !important;
}

body.is-chat-home .chat-root--home .chat-send-icon {
  grid-column: 4 !important;
}

#chat-root .chat-form:focus-within,
#chat-root .chat-form textarea:focus,
#chat-root .chat-form textarea:focus-visible,
#chat-root .chat-tool:focus,
#chat-root .chat-tool:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

#chat-root .chat-form textarea:focus,
#chat-root .chat-form textarea:focus-visible {
  border-color: transparent !important;
}

@media (max-width: 760px) {
  .admin-preview-toggle {
    display: none !important;
  }

  #chat-account-scope {
    right: max(0.55rem, env(safe-area-inset-right)) !important;
    top: max(0.55rem, env(safe-area-inset-top)) !important;
  }

  .chat-top-hire {
    top: max(0.55rem, env(safe-area-inset-top)) !important;
    right: calc(max(0.55rem, env(safe-area-inset-right)) + 46px) !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 0.72rem !important;
    border-radius: 8px !important;
    font-size: 0.68rem !important;
  }

  body.is-chat-home .chat-root--home .chat-form {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    border-radius: 6px !important;
  }
}

#chat-root .chat-send-icon,
body.is-chat-home .chat-root--home .chat-send-icon {
  background: color-mix(in srgb, var(--pf-chat-neon) 14%, transparent) !important;
  border-color: var(--pf-chat-neon) !important;
  color: var(--pf-chat-neon) !important;
}

#chat-root .chat-send-icon::before,
body.is-chat-home .chat-root--home .chat-send-icon::before {
  width: 0.92rem !important;
  height: 0.92rem !important;
  background: var(--pf-chat-neon) !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.5 4.5 11h4.7v9.5h5.6V11h4.7L12 3.5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.5 4.5 11h4.7v9.5h5.6V11h4.7L12 3.5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Final mobile icon polish: simple separated controls, no segmented-button artifacts. */
#chat-root .chat-tool,
#chat-account-scope,
.sidebar-toggle {
  display: grid !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--custom-copy) 18%, transparent) !important;
  background: color-mix(in srgb, var(--custom-bg) 78%, #ffffff 22%) !important;
  color: var(--custom-copy) !important;
  box-shadow: none !important;
}

#chat-root .chat-tool::before,
#chat-account-scope::before,
.sidebar-toggle::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  width: 0.9rem !important;
  height: 0.9rem !important;
  margin: 0 !important;
  inset: auto !important;
  background: currentColor !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}

#chat-root .chat-tool::after,
#chat-account-scope::after,
.sidebar-toggle::after {
  display: none !important;
}

#chat-root .chat-tool--upload::before {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v14H5V5zm2 2v7.2l2.8-2.7 2.2 2.1 2.8-3.4L17 13v4H7V7zm2.2 3.2a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v14H5V5zm2 2v7.2l2.8-2.7 2.2 2.1 2.8-3.4L17 13v4H7V7zm2.2 3.2a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root .chat-tool--target::before {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 3h2v4.1a5 5 0 0 1 3.9 3.9H21v2h-4.1a5 5 0 0 1-3.9 3.9V21h-2v-4.1A5 5 0 0 1 7.1 13H3v-2h4.1A5 5 0 0 1 11 7.1V3zm1 6a3 3 0 1 0 0 6 3 3 0 0 0 0-6z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 3h2v4.1a5 5 0 0 1 3.9 3.9H21v2h-4.1a5 5 0 0 1-3.9 3.9V21h-2v-4.1A5 5 0 0 1 7.1 13H3v-2h4.1A5 5 0 0 1 11 7.1V3zm1 6a3 3 0 1 0 0 6 3 3 0 0 0 0-6z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-account-scope::before {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12.4a4.4 4.4 0 1 0 0-8.8 4.4 4.4 0 0 0 0 8.8zM4.8 20.5a7.2 7.2 0 0 1 14.4 0H17a5 5 0 0 0-10 0H4.8z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12.4a4.4 4.4 0 1 0 0-8.8 4.4 4.4 0 0 0 0 8.8zM4.8 20.5a7.2 7.2 0 0 1 14.4 0H17a5 5 0 0 0-10 0H4.8z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.sidebar-toggle::before {
  width: 0.72rem !important;
  height: 0.72rem !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9 5 7 7-7 7-1.7-1.7L12.6 12 7.3 6.7 9 5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9 5 7 7-7 7-1.7-1.7L12.6 12 7.3 6.7 9 5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body:not(.is-sidebar-collapsed) .sidebar-toggle::before {
  transform: rotate(180deg) !important;
}

@media (max-width: 760px) {
  .sidebar-toggle,
  body.is-sidebar-collapsed .sidebar-toggle,
  body:not(.is-sidebar-collapsed) .sidebar-toggle,
  #chat-account-scope {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
  }

  body.is-chat-home .chat-root--home .chat-form {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 0.42rem !important;
    padding: 0.32rem !important;
  }

  body.is-chat-home .chat-root--home .chat-tool {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 6px !important;
  }
}

:root {
  --chat-compose-height: 72px;
}

/* Keep the chat header anchored while the conversation scrolls. */
#chat-root .chat-shell {
  display: grid !important;
  /* chat-head is display:none in home; body fills the shell */
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#chat-root .chat-body {
  min-height: 0 !important;
}

#chat-root .chat-head {
  display: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.7rem !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 105 !important;
  min-height: 3.25rem !important;
  padding: 0.58rem 0.85rem !important;
  border-bottom: 1px solid color-mix(in srgb, var(--custom-copy) 14%, transparent) !important;
  background: color-mix(in srgb, var(--custom-bg) 94%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body.is-chat-home .chat-root--home .chat-head {
  display: none !important;
}

#chat-root .chat-head-main {
  display: flex !important;
  align-items: center !important;
  gap: 0.68rem !important;
  min-width: 0 !important;
}

#chat-root .chat-eyebrow {
  margin: 0 !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
}

#chat-root .chat-title {
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.05 !important;
}

#chat-root .chat-helper-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.42rem !important;
}

#chat-root .chat-body {
  min-height: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 760px) {
  body.is-chat-home,
  body.is-chat-home .app,
  body.is-chat-home .main,
  body.is-chat-home .content {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.is-chat-home .manual-home,
  body.is-chat-home .chat-home-slot,
  body.is-chat-home .chat-root--home,
  body.is-chat-home .chat-root--home .chat-shell,
  body.is-chat-home .chat-root--home .chat-body,
  body.is-chat-home .chat-root--home .chat-layout,
  body.is-chat-home .chat-root--home .chat-main {
    min-height: 0 !important;
    height: calc(100dvh - 3.9rem - env(safe-area-inset-top)) !important;
    max-height: calc(100dvh - 3.9rem - env(safe-area-inset-top)) !important;
    overflow: hidden !important;
  }

  body.is-chat-home .chat-root--home .chat-main {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  body.is-chat-home .chat-root--home .chat-log {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    padding-bottom: calc(var(--chat-compose-height, 72px) + var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 0.85rem) !important;
    scroll-padding-bottom: calc(var(--chat-compose-height, 72px) + var(--chat-keyboard-offset, 0px) + 1rem) !important;
  }

  body.is-chat-home .chat-root--home .chat-compose {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--chat-keyboard-offset, 0px) !important;
    max-height: min(42vh, 13rem) !important;
    overflow: visible !important;
  }

  body.is-chat-home .chat-root--home .chat-compose-quick,
  body.is-chat-home .chat-root--home .chat-side-note {
    display: none !important;
  }

  body.is-chat-home .chat-root--home .chat-form textarea {
    max-height: 96px !important;
    overflow-y: auto !important;
    resize: none !important;
  }
}

/* Chat input bar: final scoped icon treatment. */
body.is-chat-home #chat-form.chat-form {
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  gap: 0.28rem !important;
  align-items: center !important;
  padding: 0.3rem 0.34rem !important;
}

body.is-chat-home #chat-form #chat-upload {
  grid-column: 1 !important;
}

body.is-chat-home #chat-form textarea#chat-input {
  grid-column: 2 !important;
}

body.is-chat-home #chat-form #chat-dictate {
  grid-column: 3 !important;
}

body.is-chat-home #chat-form .chat-send-icon {
  grid-column: 4 !important;
}

body.is-chat-home #chat-form .chat-tool,
body.is-chat-home #chat-form .chat-send-icon {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

body.is-chat-home #chat-form .chat-tool {
  background: transparent !important;
  color: var(--pf-chat-neon) !important;
}

body.is-chat-home #chat-form .chat-tool:hover,
body.is-chat-home #chat-form .chat-tool:focus-visible {
  background: color-mix(in srgb, var(--pf-chat-neon) 14%, transparent) !important;
}

body.is-chat-home #chat-form .chat-send-icon {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  background: var(--pf-chat-neon) !important;
  color: #00161b !important;
}

body.is-chat-home #chat-form .chat-send-icon:hover,
body.is-chat-home #chat-form .chat-send-icon:focus-visible {
  background: color-mix(in srgb, var(--pf-chat-neon) 88%, #ffffff 12%) !important;
  color: #00161b !important;
}

body.is-chat-home #chat-form .chat-tool::before,
body.is-chat-home #chat-form .chat-send-icon::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  inset: auto !important;
  background: currentColor !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}

body.is-chat-home #chat-form .chat-send-icon::before {
  width: 1.02rem !important;
  height: 1.02rem !important;
}

body.is-chat-home #chat-form .chat-tool::after,
body.is-chat-home #chat-form .chat-send-icon::after {
  display: none !important;
}

body.is-chat-home #chat-form .chat-tool--upload::before {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 17.5 9.2 13l3 3.2 2.2-2.4 4.6 4.8V6H5v11.5Zm3.2-8.9a1.6 1.6 0 1 1 0 3.2 1.6 1.6 0 0 1 0-3.2Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 17.5 9.2 13l3 3.2 2.2-2.4 4.6 4.8V6H5v11.5Zm3.2-8.9a1.6 1.6 0 1 1 0 3.2 1.6 1.6 0 0 1 0-3.2Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body.is-chat-home #chat-form .chat-tool--upload,
body.is-chat-home #chat-form .chat-tool--dictate {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.is-chat-home #chat-form .chat-tool--dictate.is-listening {
  background: transparent !important;
  color: var(--pf-chat-neon) !important;
  animation: pfDictateIdlePulse 1.8s ease-in-out infinite !important;
}

body.is-chat-home #chat-form .chat-tool--dictate.is-listening.is-hearing {
  background: transparent !important;
  color: #0099ff !important;
  animation: pfDictateHearPulse 0.75s ease-in-out infinite !important;
}

body.is-chat-home #chat-form .chat-tool--dictate.is-listening.is-hearing::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -3px !important;
  border: 2px solid color-mix(in srgb, #0099ff 55%, transparent) !important;
  border-radius: 8px !important;
  animation: pfDictateRing 0.9s ease-out infinite !important;
  pointer-events: none !important;
}

body.is-chat-home #chat-form .chat-tool--dictate::before {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3Zm7-3a1 1 0 1 0-2 0 5 5 0 0 1-10 0 1 1 0 1 0-2 0 7 7 0 0 0 6 6.71V19H9a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-2v-1.29A7 7 0 0 0 19 11Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3Zm7-3a1 1 0 1 0-2 0 5 5 0 0 1-10 0 1 1 0 1 0-2 0 7 7 0 0 0 6 6.71V19H9a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-2v-1.29A7 7 0 0 0 19 11Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body.is-chat-home #chat-form .chat-tool--dictate {
  position: relative !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

body.is-chat-home #chat-form .chat-tool::before,
body.is-chat-home #chat-form .chat-send-icon::before {
  pointer-events: none !important;
}

body.is-chat-home #chat-form .chat-tool--target::before {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 3h2v4h-2V3Zm0 14h2v4h-2v-4ZM3 11h4v2H3v-2Zm14 0h4v2h-4v-2Zm-5-2.8a3.8 3.8 0 1 1 0 7.6 3.8 3.8 0 0 1 0-7.6Zm0 2.1a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 3h2v4h-2V3Zm0 14h2v4h-2v-4ZM3 11h4v2H3v-2Zm14 0h4v2h-4v-2Zm-5-2.8a3.8 3.8 0 1 1 0 7.6 3.8 3.8 0 0 1 0-7.6Zm0 2.1a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body.is-chat-home #chat-form .chat-send-icon::before {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.3 4.7 20 12l-7.7 7.3-1.6-1.7 4.8-4.4H4v-2.4h11.5l-4.8-4.4 1.6-1.7Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.3 4.7 20 12l-7.7 7.3-1.6-1.7 4.8-4.4H4v-2.4h11.5l-4.8-4.4 1.6-1.7Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Small requested icon sizing pass. */
body.is-chat-home #chat-form.chat-form {
  grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  width: max(35vw, min(735px, calc(100vw - 2rem))) !important;
}

body.is-chat-home #chat-form .chat-send-icon {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
}

body.is-chat-home #chat-form .chat-send-icon::before {
  width: 0.74rem !important;
  height: 0.74rem !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.6 19.4 11h-4.7v9.4H9.3V11H4.6L12 3.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.6 19.4 11h-4.7v9.4H9.3V11H4.6L12 3.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Block editor compose bar replaces chat input while workbench is open. */
#chat-root .chat-form .chat-form-standard {
  display: contents;
}

#chat-root .chat-form .chat-form-editor {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: stretch;
  gap: 0.38rem;
}

#chat-root .chat-form.is-editor-mode {
  display: flex !important;
  align-items: stretch !important;
  width: max(35vw, min(735px, calc(100vw - 2rem))) !important;
  padding: 0.34rem !important;
  gap: 0.38rem !important;
}

#chat-root .chat-form.is-editor-mode .chat-form-standard {
  display: none !important;
}

#chat-root .chat-form.is-editor-mode .chat-form-editor {
  display: flex !important;
}

#chat-root .chat-compose.is-editor-compose .chat-compose-quick {
  display: none !important;
}

#chat-root .chat-editor-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 2rem;
  padding: 0.42rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 28%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--custom-bg) 84%, var(--custom-panel) 16%);
  color: var(--custom-copy);
  font: 500 0.72rem/1.2 var(--font-sans, "DM Sans", sans-serif);
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
}

#chat-root .chat-editor-btn:hover,
#chat-root .chat-editor-btn:focus-visible {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 52%, transparent);
  background: color-mix(in srgb, var(--pf-chat-neon) 12%, var(--custom-bg) 88%);
  outline: none;
}

#chat-root .chat-editor-btn--save {
  flex: 1.15 1 0;
  border-color: color-mix(in srgb, var(--pf-chat-neon) 62%, transparent);
  background: var(--pf-chat-neon);
  color: #00161b;
  font-weight: 600;
}

#chat-root .chat-editor-btn--save:hover,
#chat-root .chat-editor-btn--save:focus-visible {
  background: color-mix(in srgb, var(--pf-chat-neon) 88%, #ffffff 12%);
  color: #00161b;
}

@media (max-width: 760px) {
  #chat-root .chat-form.is-editor-mode {
    width: 100% !important;
  }

  #chat-root .chat-editor-btn {
    padding: 0.38rem 0.5rem;
    font-size: 0.66rem;
  }

  #chat-root .chat-editor-btn--undo {
    white-space: normal;
    text-align: center;
  }
}

body:not(.is-admin-preview-open) .sidebar-header .manual-theme-toggle,
.sidebar-header .manual-theme-toggle {
  width: 1.625rem !important;
  min-width: 1.625rem !important;
  height: 1.625rem !important;
  min-height: 1.625rem !important;
}

.manual-theme-toggle-icon {
  width: 0.65rem !important;
  height: 0.65rem !important;
}

/* DX-aware chat tool navigation. */
.tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.nav-link--tool {
  width: 100%;
  appearance: none;
  border: 1px solid transparent;
  font: inherit;
  text-align: left;
}

.nav-link--tool::after {
  content: "Ask";
  float: right;
  color: var(--pf-chat-neon, #00d9ff);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-folder--tools[open] {
  border-color: rgba(0, 217, 255, 0.35) !important;
}

.nav-folder--api .nav-link--api {
  font-size: 0.68rem;
}

/* Design wizard tightening pass. */
.design-setup-batch-upload[hidden] {
  display: none !important;
}

.design-setup-batch-upload {
  grid-column: 1 / -1;
  min-height: 3rem;
  grid-template-columns: 1.35rem minmax(0, max-content) minmax(0, 1fr);
  gap: 0.34rem 0.58rem;
  border-color: color-mix(in srgb, var(--pf-chat-neon) 46%, var(--custom-line));
}

.design-setup-batch-upload small {
  grid-column: 3;
  color: var(--custom-muted);
  font-size: 0.58rem;
  line-height: 1.25;
}

.design-setup[data-section-preview-mode="page"] .design-setup-section-preview {
  min-height: min(62vh, 40rem);
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-stage {
  min-height: min(56vh, 36rem);
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-page {
  min-height: min(56vh, 36rem);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-chrome {
  padding: 0.48rem 0.58rem;
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-chrome .design-setup-preview-menu {
  gap: 0.22rem 0.54rem;
}

.design-setup[data-section-preview-mode="page"]:not([data-design-menu-position="overlay"]) .design-setup-preview-menu-group {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-submenu {
  display: flex;
  gap: 0.22rem;
  margin: 0;
  padding-left: 0.34rem;
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-screen {
  min-height: 0;
  width: 100%;
  display: grid;
  place-items: stretch;
  padding: 0;
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-screen > .design-setup-preview-media {
  width: 100%;
  max-width: none;
  min-height: 100%;
  height: 100%;
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-media--gallery {
  grid-auto-rows: minmax(6rem, 1fr);
  padding: 0.75rem;
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-media--slideshow {
  height: 100%;
  min-height: 18rem;
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-media--index-gallery {
  align-content: center;
  padding: 1rem;
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-media--page-template {
  height: 100%;
  min-height: 20rem;
}

.design-setup[data-section-preview-mode="page"] .design-setup-template-page-surface {
  min-height: 100%;
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-scroll-run section {
  min-height: min(56vh, 36rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 1rem;
}

.design-setup[data-section-preview-mode="page"] .design-setup-preview-scroll-run section .design-setup-preview-media {
  height: 100%;
  max-width: none;
}

.design-setup-summary--approval {
  margin-top: 0.5rem;
  border-color: color-mix(in srgb, var(--pf-chat-neon) 48%, var(--custom-line));
}

.design-setup-summary--server {
  margin-bottom: 0.5rem;
  border-color: color-mix(in srgb, #5fd38d 42%, var(--custom-line));
}

.design-setup-summary--approval.is-applied {
  border-color: color-mix(in srgb, #5fd38d 55%, var(--custom-line));
}

.design-setup-summary--error {
  border-color: color-mix(in srgb, #0099ff 40%, var(--custom-line));
  color: #cccccc;
}

.design-setup-build-target {
  display: grid;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--custom-line);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--custom-panel) 88%, transparent);
}

.design-setup-build-target--compact {
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
}

.design-setup-section-head--compact p {
  margin-top: 0.15rem;
  font-size: 0.78rem;
}

.design-setup-build-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.design-setup-build-account {
  color: var(--pf-chat-neon);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-setup-build-account.is-missing {
  color: var(--custom-muted);
  font-weight: 600;
}

.design-setup-build-site {
  flex: 0 0 auto;
  min-width: 5.5rem;
  min-height: 2rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-bg);
  color: var(--custom-copy);
  font-size: 0.74rem;
  padding: 0.35rem 0.5rem;
}

.design-setup-build-mode-inline {
  display: inline-flex;
  align-self: flex-start;
  gap: 0.35rem;
  padding: 0.2rem;
  border: 1px solid var(--custom-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--custom-bg) 82%, transparent);
}

.design-setup-build-mode-pill {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.design-setup-build-mode-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.design-setup-build-mode-pill span {
  display: inline-block;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  color: var(--custom-muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.15s ease, color 0.15s ease;
}

.design-setup-build-mode-pill:has(input:checked) span {
  background: color-mix(in srgb, var(--pf-chat-neon) 18%, var(--custom-panel) 82%);
  color: var(--custom-copy);
}

.design-setup-build-target--compact .design-setup-build-hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--custom-muted);
}

.design-setup-build-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 11rem);
  gap: 0.65rem;
  align-items: end;
}

.design-setup-build-meta-item {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.design-setup-build-meta-label {
  color: var(--custom-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.design-setup-build-meta-value {
  color: var(--custom-copy);
  font-size: 0.78rem;
  line-height: 1.25;
}

.design-setup-build-meta-item--select .design-setup-build-meta-value {
  width: 100%;
  min-height: 2rem;
  border: 1px solid var(--custom-line);
  border-radius: 6px;
  background: var(--custom-bg);
  color: var(--custom-copy);
  font-size: 0.74rem;
  padding: 0.35rem 0.5rem;
}

.design-setup-build-mode {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.design-setup-build-mode-legend {
  margin: 0 0 0.45rem;
  color: var(--custom-copy);
  font-size: 0.72rem;
  font-weight: 750;
}

.design-setup-build-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.design-setup-build-mode-card {
  position: relative;
  display: grid;
  min-height: 5.25rem;
  border: 1px solid var(--custom-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--custom-panel) 92%, transparent), color-mix(in srgb, var(--custom-bg) 92%, transparent));
  color: var(--custom-copy);
  cursor: pointer;
  padding: 0.75rem 0.85rem;
}

.design-setup-build-mode-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.design-setup-build-mode-card span {
  display: grid;
  gap: 0.38rem;
  align-content: start;
}

.design-setup-build-mode-card strong {
  color: var(--custom-copy);
  font-size: 0.8rem;
  line-height: 1.2;
}

.design-setup-build-mode-card small {
  color: var(--custom-muted);
  font-size: 0.64rem;
  line-height: 1.45;
}

.design-setup-build-mode-card:has(input:checked) {
  border-color: var(--pf-chat-neon);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pf-chat-neon) 18%, var(--custom-panel)), color-mix(in srgb, var(--custom-bg) 88%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 22%, transparent);
}

.design-setup-build-mode-card:has(input:checked)::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  background: var(--pf-chat-neon);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-chat-neon) 15%, transparent);
}

.design-setup-build-mode-card:has(input:focus-visible) {
  outline: 2px solid var(--pf-chat-neon);
  outline-offset: 2px;
}

.design-setup-build-hint {
  margin: 0;
  color: var(--custom-muted);
  font-size: 0.66rem;
  line-height: 1.4;
}

.design-setup-build-meta-value.is-missing,
.design-setup-build-meta-value strong.is-missing {
  color: #ffb4b4;
}

.design-setup.is-build-target-ready .design-setup-build-meta-value[data-design-setup-target-account]:not(.is-missing) {
  color: var(--pf-chat-neon);
}

/* Smaller site-tool topic typography. */
.nav-folder--tools summary {
  font-size: 0.62rem !important;
}

.nav-folder--tools .folder-count {
  font-size: 0.52rem !important;
}

.nav-folder--tools .folder-desc {
  font-size: 0.54rem !important;
  line-height: 1.28 !important;
}

.nav-folder--tools .nav-link--tool {
  min-height: 1.28rem !important;
  font-size: 0.61rem !important;
  line-height: 1.15 !important;
  padding-block: 0.14rem !important;
}

.nav-folder--tools .nav-link--tool::after {
  font-size: 0.48rem !important;
}

/* Chat composer input alignment and active typing feedback. */
@keyframes pfChatComposerTypingPulse {
  0%,
  100% {
    border-color: var(--pf-chat-neon);
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.08);
  }

  50% {
    border-color: color-mix(in srgb, var(--pf-chat-neon) 72%, #ffffff 28%);
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.2), 0 0 18px rgba(0, 217, 255, 0.16);
  }
}

@keyframes pfChatInputTextPulse {
  0%,
  100% {
    text-shadow: none;
  }

  50% {
    text-shadow: 0 0 10px rgba(80, 210, 255, 0.32);
  }
}

body.is-chat-home #chat-form.chat-form {
  min-height: 42px !important;
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}

body.is-chat-home #chat-form textarea#chat-input {
  align-self: center !important;
  display: block !important;
  min-height: 28px !important;
  max-height: 180px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 0.28rem !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--custom-copy) !important;
  caret-color: var(--pf-chat-neon) !important;
  line-height: 28px !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  resize: none !important;
}

body.is-chat-home #chat-form textarea#chat-input::placeholder {
  color: color-mix(in srgb, var(--custom-muted) 82%, var(--pf-chat-neon) 18%) !important;
  line-height: 28px !important;
}

body.is-chat-home #chat-form textarea#chat-input.is-single-line {
  height: 28px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 28px !important;
  overflow-y: hidden !important;
}

body.is-chat-home #chat-form textarea#chat-input.is-multiline {
  padding-top: 0.26rem !important;
  padding-bottom: 0.26rem !important;
  line-height: 1.35 !important;
  overflow-y: auto !important;
}

body.is-chat-home #chat-form.chat-form.is-typing {
  animation: pfChatComposerTypingPulse 1.2s ease-in-out infinite !important;
}

body.is-chat-home #chat-form textarea#chat-input.is-typing {
  animation: pfChatInputTextPulse 1.2s ease-in-out infinite !important;
  color: color-mix(in srgb, var(--custom-copy) 84%, var(--pf-chat-neon) 16%) !important;
}

@media (max-width: 760px) {
  body.is-chat-home #chat-form textarea#chat-input {
    max-height: 96px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-chat-home #chat-form.chat-form.is-typing,
  body.is-chat-home #chat-form textarea#chat-input.is-typing {
    animation: none !important;
  }
}

/* Final pass: calmer Designs grid and phone chat viewport. */
body.is-designs-view .designs-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 1.8vw, 1.4rem) !important;
  align-items: start !important;
  width: min(100%, 78rem) !important;
}

body.is-designs-view .template-card {
  min-width: 0 !important;
}

body.is-designs-view .template-card-media {
  aspect-ratio: 16 / 10 !important;
}

@media (max-width: 1120px) and (min-width: 761px) {
  body.is-designs-view .designs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.is-designs-view .designs-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  body.is-chat-home {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.is-chat-home .app,
  body.is-chat-home .main {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.is-chat-home .main-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 95 !important;
    display: flex !important;
    align-items: center !important;
    height: calc(3.25rem + env(safe-area-inset-top)) !important;
    min-height: calc(3.25rem + env(safe-area-inset-top)) !important;
    padding: calc(env(safe-area-inset-top) + 0.35rem) 3.7rem 0.35rem 3.4rem !important;
    border-bottom: 1px solid var(--custom-line) !important;
    background: color-mix(in srgb, var(--custom-bg) 96%, transparent) !important;
    backdrop-filter: blur(14px) !important;
  }

  body.is-chat-home .main-top-label {
    margin: 0 !important;
    color: var(--custom-copy) !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  body.is-chat-home .content {
    position: fixed !important;
    top: calc(3.25rem + env(safe-area-inset-top)) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.is-chat-home .manual-home,
  body.is-chat-home .chat-home-slot,
  body.is-chat-home .chat-root--home,
  body.is-chat-home .chat-root--home .chat-shell,
  body.is-chat-home .chat-root--home .chat-body,
  body.is-chat-home .chat-root--home .chat-layout,
  body.is-chat-home .chat-root--home .chat-main {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body.is-chat-home .chat-root--home .chat-shell {
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--custom-bg) !important;
  }

  body.is-chat-home .chat-root--home .chat-main {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  body.is-chat-home .chat-root--home .chat-log {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    padding: 0.8rem 0.75rem calc(var(--chat-compose-height, 72px) + var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 0.85rem) !important;
    scroll-padding-bottom: calc(var(--chat-compose-height, 72px) + var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 1rem) !important;
  }

  body.is-chat-home .chat-root--home .chat-bubble {
    max-width: min(88vw, 34rem) !important;
  }

  body.is-chat-home .chat-root--home .chat-compose {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--chat-keyboard-offset, 0px) !important;
    z-index: 90 !important;
    padding: 0.5rem 0.55rem calc(0.5rem + env(safe-area-inset-bottom)) !important;
    background: transparent !important;
    background-image: none !important;
  }

  body.is-chat-home #chat-form.chat-form {
    width: min(100%, calc(100vw - 1rem)) !important;
    min-height: 2.75rem !important;
    margin: 0 auto !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    gap: 0.28rem !important;
    padding: 0.28rem !important;
    border-radius: 6px !important;
  }

  body.is-chat-home #chat-form .chat-tool {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  body.is-chat-home #chat-form .chat-send-icon {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  body.is-chat-home #chat-form textarea#chat-input {
    min-height: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 16px !important;
  }

  body.is-chat-home .sidebar-toggle {
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 0.55rem) !important;
    left: 0.65rem !important;
    z-index: 120 !important;
    width: 2.15rem !important;
    min-width: 2.15rem !important;
    height: 2.15rem !important;
    min-height: 2.15rem !important;
    border-radius: 6px !important;
  }

  body.is-chat-home #chat-account-scope {
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 0.55rem) !important;
    right: 0.65rem !important;
    z-index: 125 !important;
  }

  body.is-chat-home #admin-preview-toggle {
    display: none !important;
  }
}

/* Browser comment fix: top action polish + bottom-fixed composer. */
body.is-chat-home .chat-top-hire,
.chat-top-hire {
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  padding: 0 0.78rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 72%, #ffffff 18%) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--custom-panel) 92%, #ffffff 8%), var(--custom-panel)) !important;
  color: var(--custom-copy) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(0, 217, 255, 0.12) !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

body.is-chat-home .chat-top-hire:hover,
.chat-top-hire:hover {
  background: color-mix(in srgb, var(--pf-chat-neon) 16%, var(--custom-panel) 84%) !important;
  border-color: var(--pf-chat-neon) !important;
  color: #ffffff !important;
  transform: none !important;
}

body.is-chat-home .chat-root--home .chat-main {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  min-height: 0 !important;
}

body.is-chat-home .chat-root--home .chat-log {
  padding-bottom: calc(var(--chat-compose-height, 72px) + 1.4rem) !important;
  scroll-padding-bottom: calc(var(--chat-compose-height, 72px) + 1.4rem) !important;
}

body.is-chat-home .chat-root--home .chat-compose {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 0.8rem) !important;
  z-index: 112 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: none !important;
  background: transparent !important;
  background-image: none !important;
  padding: 1.8rem 1rem 0 !important;
}

body.is-chat-home .chat-root--home .chat-compose > * {
  pointer-events: auto !important;
}

body.is-chat-home #chat-form.chat-form {
  width: min(735px, calc(100vw - 2rem)) !important;
  margin: 0 auto !important;
}

@media (max-width: 760px) {
  body.is-chat-home .chat-top-hire,
  .chat-top-hire {
    height: 2.15rem !important;
    min-height: 2.15rem !important;
    max-height: 2.15rem !important;
    max-width: calc(100vw - 7.5rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 0.7rem !important;
    font-size: 0.66rem !important;
  }

  body.is-chat-home .chat-root--home .chat-log {
    padding-bottom: calc(var(--chat-compose-height, 72px) + var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 1.25rem) !important;
    scroll-padding-bottom: calc(var(--chat-compose-height, 72px) + var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 1.25rem) !important;
  }

  body.is-chat-home .chat-root--home .chat-compose {
    bottom: calc(var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 0.55rem) !important;
    padding: 1.35rem 0.55rem 0 !important;
  }

  body.is-chat-home #chat-form.chat-form {
    width: min(100%, calc(100vw - 1rem)) !important;
  }
}

/* Chat tool cards: per-answer sources + editable section map. */
body.is-chat-home .chat-top-hire,
.chat-top-hire {
  height: 1.75rem !important;
  min-height: 1.75rem !important;
  max-height: 1.75rem !important;
  padding: 0 0.58rem !important;
  border: 1px solid var(--pf-chat-neon) !important;
  border-radius: 6px !important;
  background: var(--custom-panel) !important;
  color: var(--custom-copy) !important;
  box-shadow: none !important;
  font-size: 0.52rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  transform: none !important;
}

body.is-chat-home .chat-top-hire:hover,
.chat-top-hire:hover {
  background: color-mix(in srgb, var(--pf-chat-neon) 12%, var(--custom-panel) 88%) !important;
  color: var(--custom-copy) !important;
  box-shadow: none !important;
}

#chat-root .chat-sources--inline {
  width: fit-content !important;
  max-width: min(650px, calc(100vw - 2rem)) !important;
  margin: 0.45rem 0 0 !important;
  padding: 0 !important;
}

#chat-root .chat-agent-trace {
  display: inline-block !important;
  width: fit-content !important;
  max-width: min(420px, calc(100vw - 2rem)) !important;
  margin: 0.24rem 0 0.38rem 0 !important;
  border-radius: 999px !important;
  background: var(--custom-panel) !important;
}

#chat-root .chat-agent-trace[open] {
  border-radius: 10px !important;
  width: min(420px, calc(100vw - 2rem)) !important;
}

#chat-root .chat-agent-trace-toggle {
  min-height: 1.24rem !important;
  padding: 0.16rem 0.42rem !important;
  font-size: 0.54rem !important;
}

#chat-root .chat-agent-trace-count {
  min-width: 0.92rem !important;
  height: 0.92rem !important;
  font-size: 0.52rem !important;
}

#chat-root .chat-agent-trace-body {
  margin: 0.3rem 0 0.08rem !important;
  padding: 0.38rem 0.44rem 0.42rem !important;
  border-radius: 7px !important;
}

#chat-root .chat-agent-trace-item-label {
  font-size: 0.58rem !important;
}

#chat-root .chat-agent-trace-item-detail {
  font-size: 0.54rem !important;
}

#chat-root .chat-sources--inline.hidden,
#chat-root .chat-tool-context.hidden {
  display: none !important;
}

#chat-root .chat-sources-menu {
  position: relative !important;
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
}

#chat-root .chat-sources-toggle {
  display: inline-grid !important;
  place-items: center !important;
  width: fit-content !important;
  min-height: 1.28rem !important;
  padding: 0 0.42rem !important;
  font-size: 0.54rem !important;
  cursor: pointer !important;
  list-style: none !important;
  color: var(--custom-copy) !important;
  background: var(--custom-panel) !important;
  border-color: var(--custom-line) !important;
}

#chat-root .chat-sources-toggle::-webkit-details-marker {
  display: none !important;
}

#chat-root .chat-sources-menu[open] .chat-sources-toggle {
  border-color: var(--pf-chat-neon) !important;
}

#chat-root .chat-sources-menu .chat-source-row {
  display: flex !important;
  width: min(650px, calc(100vw - 2rem)) !important;
  margin-top: 0.42rem !important;
  padding: 0.5rem !important;
  gap: 0.36rem !important;
  border: 1px solid var(--custom-line) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--custom-panel) 92%, #000000 8%) !important;
}

#chat-root .chat-source {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#chat-root .chat-tool-context {
  width: min(760px, calc(100vw - 2rem)) !important;
  max-width: min(760px, calc(100vw - 2rem)) !important;
  margin: 0.55rem 0 0 !important;
}

#chat-root .chat-section-map-card {
  border: 1px solid var(--custom-line) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--custom-panel) 90%, #000000 10%) !important;
  overflow: hidden !important;
  position: relative !important;
}

#chat-root .chat-section-map-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.22rem 0.75rem !important;
  align-items: end !important;
  padding: 0.72rem 0.82rem !important;
  border-bottom: 1px solid var(--custom-line) !important;
}

#chat-root .chat-tool-mode {
  grid-column: 1 / -1 !important;
  color: var(--pf-chat-neon) !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

#chat-root .chat-seo-card {
  display: grid !important;
  gap: 0.72rem !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0.82rem !important;
}

#chat-root .chat-seo-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.42rem 0.8rem !important;
  align-items: start !important;
}

#chat-root .chat-seo-head strong,
#chat-root .chat-seo-compose-head strong,
#chat-root .chat-seo-quick-actions strong {
  display: block !important;
  color: var(--custom-copy) !important;
  font-size: 0.96rem !important;
  line-height: 1.2 !important;
}

#chat-root .chat-seo-head small,
#chat-root .chat-seo-compose-head small {
  display: block !important;
  margin-top: 0.14rem !important;
  color: var(--dx-muted, var(--custom-muted)) !important;
  font-size: 0.62rem !important;
  line-height: 1.35 !important;
}

#chat-root .chat-seo-score {
  display: grid !important;
  gap: 0.08rem !important;
  align-content: center !important;
  min-width: 5rem !important;
  padding: 0.48rem 0.6rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 30%, transparent) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--custom-panel) 92%, #000 8%) !important;
  text-align: right !important;
}

#chat-root .chat-seo-score strong {
  color: var(--custom-copy) !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

#chat-root .chat-seo-score span {
  color: var(--dx-muted, var(--custom-muted)) !important;
  font-size: 0.58rem !important;
  line-height: 1.2 !important;
}

#chat-root .chat-seo-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.34rem !important;
}

#chat-root .chat-seo-summary span,
#chat-root .chat-seo-missing span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  min-height: 1.65rem !important;
  padding: 0.2rem 0.52rem !important;
  border: 1px solid var(--custom-line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-panel) 94%, #000 6%) !important;
  color: var(--custom-copy) !important;
  font-size: 0.62rem !important;
  line-height: 1.2 !important;
}

#chat-root .chat-seo-summary strong,
#chat-root .chat-seo-missing strong {
  color: var(--pf-chat-neon) !important;
}

#chat-root .chat-seo-compose,
#chat-root .chat-seo-category,
#chat-root .chat-seo-missing,
#chat-root .chat-seo-quick-actions {
  display: grid !important;
  gap: 0.46rem !important;
  padding: 0.64rem !important;
  border: 1px solid var(--custom-line) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--custom-panel) 92%, #000 8%) !important;
}

#chat-root .chat-seo-compose-field {
  display: grid !important;
  gap: 0.2rem !important;
}

#chat-root .chat-seo-compose-field > span,
#chat-root .chat-seo-missing h3,
#chat-root .chat-seo-category h3 {
  margin: 0 !important;
  color: var(--dx-label, var(--custom-muted)) !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#chat-root .chat-seo-compose-field textarea {
  width: 100% !important;
  min-height: 4.2rem !important;
  padding: 0.56rem 0.62rem !important;
  border: 1px solid var(--custom-line) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--custom-bg) 84%, var(--custom-panel) 16%) !important;
  color: var(--custom-copy) !important;
  font: inherit !important;
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}

#chat-root .chat-seo-compose-field textarea::placeholder,
#chat-root .chat-seo-upload-meta.is-empty,
#chat-root .chat-seo-compose-note {
  color: color-mix(in srgb, var(--dx-muted, var(--custom-muted)) 88%, transparent) !important;
}

#chat-root .chat-seo-compose-field textarea:focus,
#chat-root .chat-seo-compose-field textarea:focus-visible {
  outline: none !important;
  border-color: var(--pf-chat-neon) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 40%, transparent) !important;
}

#chat-root .chat-seo-compose-bar,
#chat-root .chat-seo-compose-actions,
#chat-root .chat-seo-actions,
#chat-root .chat-seo-missing > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.42rem !important;
  align-items: center !important;
}

#chat-root .chat-seo-upload-meta {
  min-width: 0 !important;
  color: var(--custom-copy) !important;
  font-size: 0.6rem !important;
  line-height: 1.3 !important;
}

#chat-root .chat-seo-compose-note {
  margin: -0.06rem 0 0 !important;
  font-size: 0.58rem !important;
  line-height: 1.35 !important;
}

#chat-root .chat-seo-compose-actions [data-seo-checklist-save] {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 55%, transparent) !important;
  background: color-mix(in srgb, var(--custom-panel) 76%, var(--pf-chat-neon) 16%) !important;
  color: var(--custom-copy) !important;
}

#chat-root .chat-seo-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.58rem !important;
}

#chat-root .chat-seo-checks {
  display: grid !important;
  gap: 0.34rem !important;
}

#chat-root .chat-seo-check {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 0.34rem !important;
  align-items: start !important;
  padding: 0.44rem 0.48rem !important;
  border: 1px solid var(--custom-line) !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--custom-bg) 82%, var(--custom-panel) 18%) !important;
}

#chat-root .chat-seo-check > div {
  min-width: 0 !important;
}

#chat-root .chat-seo-check > div strong {
  display: block !important;
  color: var(--custom-copy) !important;
  font-size: 0.7rem !important;
  line-height: 1.25 !important;
}

#chat-root .chat-seo-check > div small {
  display: block !important;
  margin-top: 0.08rem !important;
  color: var(--dx-muted, var(--custom-muted)) !important;
  font-size: 0.6rem !important;
  line-height: 1.35 !important;
}

#chat-root .chat-seo-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.7rem !important;
  min-height: 1.25rem !important;
  padding: 0 0.44rem !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-panel) 86%, #000 14%) !important;
  color: var(--custom-copy) !important;
  font-size: 0.54rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

#chat-root .chat-seo-check > em {
  color: var(--dx-muted, var(--custom-muted)) !important;
  font-size: 0.56rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

#chat-root .chat-seo-check--ok .chat-seo-pill {
  background: color-mix(in srgb, #1d8f5a 24%, var(--custom-panel) 76%) !important;
  color: #c9ffe6 !important;
}

#chat-root .chat-seo-check--watch .chat-seo-pill {
  background: color-mix(in srgb, #c38d22 26%, var(--custom-panel) 74%) !important;
  color: #ffe6b0 !important;
}

#chat-root .chat-seo-check--missing .chat-seo-pill {
  background: color-mix(in srgb, #b84242 28%, var(--custom-panel) 72%) !important;
  color: #ffd0d0 !important;
}

#chat-root .chat-section-map-head strong {
  min-width: 0 !important;
  color: var(--custom-copy) !important;
  font-size: 0.95rem !important;
  line-height: 1.15 !important;
}

#chat-root .chat-section-map-head small {
  color: var(--custom-muted) !important;
  font-size: 0.62rem !important;
  line-height: 1.2 !important;
  text-align: right !important;
}

#chat-root .chat-section-map-list {
  display: grid !important;
  max-height: min(460px, 55vh) !important;
  overflow: auto !important;
}

#chat-root .chat-section-map-row {
  display: grid !important;
  grid-template-columns: minmax(10rem, 1fr) minmax(8rem, auto) auto !important;
  gap: 0.6rem !important;
  align-items: center !important;
  min-height: 3.15rem !important;
  padding: 0.52rem 0.7rem 0.52rem calc(0.78rem + (var(--section-depth, 0) * 0.82rem)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--custom-line) 72%, transparent) !important;
}

#chat-root .chat-section-map-row:last-child {
  border-bottom: 0 !important;
}

#chat-root .chat-section-map-main,
#chat-root .chat-section-map-meta,
#chat-root .chat-section-map-actions {
  min-width: 0 !important;
}

#chat-root .chat-section-map-name,
#chat-root .chat-section-map-key {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#chat-root .chat-section-map-name {
  color: var(--custom-copy) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
}

#chat-root .chat-section-map-key,
#chat-root .chat-section-map-meta {
  color: var(--custom-muted) !important;
  font-size: 0.62rem !important;
}

#chat-root .chat-section-map-meta,
#chat-root .chat-section-map-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.28rem !important;
}

#chat-root .chat-section-map-meta span {
  padding: 0.14rem 0.36rem !important;
  border: 1px solid var(--custom-line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-bg) 82%, var(--custom-panel) 18%) !important;
}

#chat-root .chat-section-map-actions button {
  min-height: 1.45rem !important;
  padding: 0 0.48rem !important;
  font-size: 0.58rem !important;
}

@media (max-width: 760px) {
  body.is-chat-home .chat-top-hire,
  .chat-top-hire {
    height: 2.15rem !important;
    min-height: 2.15rem !important;
    max-height: 2.15rem !important;
    padding: 0 0.7rem !important;
    font-size: 0.62rem !important;
  }

  #chat-root .chat-section-map-head,
  #chat-root .chat-section-map-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #chat-root .chat-section-map-head small {
    text-align: left !important;
  }

  #chat-root .chat-section-map-row {
    align-items: center !important;
    padding-right: 0.64rem !important;
  }
}

/* Section map media drawer + sidebar-safe composer. */
@media (min-width: 761px) {
  body.is-chat-home .chat-root--home .chat-compose {
    left: var(--chat-sidebar-offset, 0px) !important;
    right: 0 !important;
    width: auto !important;
  }

  body.is-chat-home #chat-form.chat-form {
    width: min(735px, calc(100vw - var(--chat-sidebar-offset, 0px) - 2rem)) !important;
  }
}

#chat-root .chat-section-map-row {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
}

#chat-root .chat-section-map-row-grid {
  display: grid !important;
  grid-template-columns: 1.65rem minmax(10rem, 1fr) minmax(8rem, auto) auto !important;
  gap: 0.55rem !important;
  align-items: center !important;
  min-height: 3.15rem !important;
  padding: 0.52rem 0.7rem 0.52rem calc(0.58rem + (var(--section-depth, 0) * 0.82rem)) !important;
}

#chat-root .chat-section-map-toggle {
  display: grid !important;
  place-items: center !important;
  width: 1.45rem !important;
  height: 1.45rem !important;
  min-width: 1.45rem !important;
  min-height: 1.45rem !important;
  padding: 0 !important;
  border: 1px solid var(--pf-chat-neon) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--custom-panel) 88%, var(--pf-chat-neon) 12%) !important;
  color: var(--pf-chat-neon) !important;
  cursor: pointer !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
}

#chat-root .chat-section-map-toggle[aria-expanded="true"] {
  background: var(--pf-chat-neon) !important;
  color: #001014 !important;
}

#chat-root .chat-section-map-media {
  margin: 0 0 0 calc(0.58rem + (var(--section-depth, 0) * 0.82rem)) !important;
  padding: 0.7rem 0.75rem 0.78rem 2.2rem !important;
  border-top: 1px solid color-mix(in srgb, var(--custom-line) 74%, transparent) !important;
  background: color-mix(in srgb, var(--custom-bg) 80%, var(--custom-panel) 20%) !important;
}

#chat-root .chat-section-map-media.hidden {
  display: none !important;
}

#chat-root .chat-section-map-media-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 0.35rem 0.5rem !important;
  margin-bottom: 0.6rem !important;
}

#chat-root .chat-section-map-media-head [data-section-map-action="title"] {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
}

#chat-root .chat-section-map-media-head span {
  color: var(--custom-copy) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

#chat-root .chat-section-map-media-head small,
#chat-root .chat-section-map-media-empty p {
  margin: 0 !important;
  color: var(--custom-muted) !important;
  font-size: 0.62rem !important;
}

#chat-root .chat-section-media-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
  gap: 0.55rem !important;
}

#chat-root .chat-section-media-item {
  min-width: 0 !important;
  border: 1px solid var(--custom-line) !important;
  border-radius: 6px !important;
  background: var(--custom-panel) !important;
  overflow: hidden !important;
}

#chat-root .chat-section-media-item--html {
  grid-column: span 2 !important;
}

#chat-root .chat-section-thumb {
  aspect-ratio: 4 / 3 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, var(--custom-bg) 78%, var(--custom-panel) 22%) !important;
}

#chat-root .chat-section-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#chat-root .chat-section-thumb span {
  color: var(--custom-muted) !important;
  font-size: 0.62rem !important;
}

#chat-root .chat-section-html-preview {
  width: 100% !important;
  aspect-ratio: auto !important;
  background: #dfe8ef !important;
  overflow: hidden !important;
}

#chat-root .chat-section-html-preview iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  background: #dfe8ef !important;
}

#chat-root .chat-section-media-copy {
  display: grid !important;
  gap: 0.16rem !important;
  padding: 0.48rem 0.5rem 0 !important;
}

#chat-root .chat-section-media-copy strong,
#chat-root .chat-section-media-copy span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#chat-root .chat-section-media-copy strong {
  color: var(--custom-copy) !important;
  font-size: 0.66rem !important;
}

#chat-root .chat-section-media-copy span {
  color: var(--custom-muted) !important;
  font-size: 0.56rem !important;
}

#chat-root .chat-section-media-actions,
#chat-root .chat-section-map-media-empty {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
  align-items: center !important;
  padding: 0.48rem 0.5rem 0.55rem !important;
}

#chat-root .chat-section-media-actions button,
#chat-root .chat-section-map-media-head button,
#chat-root .chat-section-map-media-empty button {
  min-height: 1.35rem !important;
  padding: 0 0.44rem !important;
  font-size: 0.54rem !important;
}

@media (max-width: 760px) {
  #chat-root .chat-section-map-row-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto !important;
    align-items: center !important;
    padding-right: 0.62rem !important;
  }

  #chat-root .chat-section-map-meta {
    grid-column: auto !important;
    flex-wrap: nowrap !important;
  }

  #chat-root .chat-section-map-media {
    margin-left: 0 !important;
    padding: 0.68rem !important;
  }

  #chat-root .chat-section-map-media-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  #chat-root .chat-section-map-media-head button {
    grid-column: 1 / -1 !important;
    width: fit-content !important;
  }

  #chat-root .chat-section-media-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
  }

  #chat-root .chat-section-media-item--html {
    grid-column: span 1 !important;
  }
}

/* Prototype editor and refined tool actions. */
#chat-root .chat-media--block-draft {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

@media (min-width: 761px) {
  body.is-chat-home .chat-root--home .chat-media--block-draft {
    width: 100% !important;
    max-width: none !important;
  }
}

#chat-root .chat-block-draft {
  width: 100% !important;
  max-width: none !important;
  gap: 0.72rem !important;
  padding: 0.78rem !important;
  border-color: color-mix(in srgb, var(--pf-chat-neon) 48%, var(--custom-line) 52%) !important;
  background: color-mix(in srgb, var(--custom-panel) 90%, var(--pf-chat-neon) 10%) !important;
}

#chat-root .chat-prototype-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.6rem !important;
}

#chat-root .chat-prototype-device-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
  min-width: 0 !important;
}

#chat-root .chat-prototype-device-tabs span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.5rem !important;
  padding: 0 0.52rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 42%, transparent) !important;
  border-radius: 999px !important;
  color: var(--custom-copy) !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
}

#chat-root .chat-prototype-preview-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem) !important;
  gap: 0.72rem !important;
  align-items: stretch !important;
}

#chat-root .chat-prototype-device {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: 0.34rem !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#chat-root .chat-prototype-device figcaption,
#chat-root .chat-prototype-text-editor span {
  color: color-mix(in srgb, var(--custom-copy) 78%, transparent) !important;
  font-size: 0.62rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

#chat-root .chat-prototype-device--phone {
  max-width: 17rem !important;
}

#chat-root .chat-block-draft-frame {
  display: block !important;
  width: 100% !important;
  height: 320px !important;
  min-height: 320px !important;
  border: 1px solid color-mix(in srgb, var(--custom-line) 80%, transparent) !important;
  border-radius: 8px !important;
  background: #f5f5f1 !important;
}

#chat-root .chat-prototype-device--phone .chat-block-draft-frame {
  height: 320px !important;
  min-height: 320px !important;
  border-radius: 18px !important;
}

#chat-root .chat-prototype-text-editor {
  display: grid !important;
  gap: 0.34rem !important;
}

#chat-root .chat-prototype-text-editor textarea,
#chat-root .chat-block-draft-code textarea {
  width: 100% !important;
  resize: vertical !important;
  padding: 0.62rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 24%, var(--custom-line) 76%) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--custom-bg) 92%, var(--custom-panel) 8%) !important;
  color: var(--custom-copy) !important;
  letter-spacing: 0 !important;
}

#chat-root .chat-prototype-text-editor textarea {
  min-height: 4.7rem !important;
  font: 0.78rem/1.35 var(--font-body, system-ui, sans-serif) !important;
}

#chat-root .chat-block-draft-code {
  padding: 0.12rem 0 0 !important;
  border-top: 0 !important;
}

#chat-root .chat-block-draft-code summary {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.55rem !important;
  padding: 0 0.54rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 38%, transparent) !important;
  border-radius: 999px !important;
  color: var(--custom-copy) !important;
  cursor: pointer !important;
  font-size: 0.62rem !important;
  list-style: none !important;
}

#chat-root .chat-block-draft-code summary::-webkit-details-marker {
  display: none !important;
}

#chat-root .chat-block-draft-hint {
  margin: 0 !important;
  color: var(--custom-muted) !important;
  font-size: 0.66rem !important;
}

#chat-root .chat-block-current {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.6rem !important;
  width: min(100%, 52rem) !important;
  padding: 0.52rem 0.62rem !important;
}

#chat-root .chat-block-current-main {
  display: block !important;
}

#chat-root .chat-block-current-main strong {
  margin: 0 !important;
  font-size: 0.78rem !important;
}

#chat-root .chat-block-current-main p {
  margin: 0.1rem 0 0 !important;
  font-size: 0.64rem !important;
}

#chat-root .chat-section-map-actions .btn-neon,
#chat-root .chat-block-current-actions .btn-neon,
#chat-root .chat-block-draft .btn-neon {
  border-color: var(--pf-chat-neon) !important;
  background: var(--pf-chat-neon) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

#chat-root .chat-section-map-actions .btn-neon:hover,
#chat-root .chat-block-current-actions .btn-neon:hover,
#chat-root .chat-block-draft .btn-neon:hover {
  background: color-mix(in srgb, var(--pf-chat-neon) 82%, #fff 18%) !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  #chat-root .chat-prototype-toolbar,
  #chat-root .chat-block-current {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #chat-root .chat-prototype-toolbar {
    align-items: start !important;
    flex-direction: column !important;
  }

  #chat-root .chat-prototype-preview-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #chat-root .chat-prototype-device--phone {
    max-width: 100% !important;
  }

  #chat-root .chat-block-current {
    display: grid !important;
  }
}

/* Square media cards and HTML fullscreen preview. */
#chat-root .chat-section-media-grid {
  align-items: start !important;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
}

#chat-root .chat-section-media-item {
  align-self: start !important;
}

#chat-root .chat-section-thumb {
  aspect-ratio: 1 / 1 !important;
  display: block !important;
  height: auto !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
}

#chat-root .chat-section-thumb img {
  position: absolute !important;
  inset: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
}

#chat-root .chat-section-thumb span {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
}

#chat-root .chat-section-media-item--html {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
}

#chat-root .chat-section-media-item--html .chat-section-html-preview {
  width: 100% !important;
  min-height: clamp(220px, 30vh, 380px) !important;
  height: clamp(220px, 30vh, 380px) !important;
  max-height: 420px !important;
  background: #dfe8ef !important;
}

#chat-root .chat-section-media-item--html .chat-section-media-copy,
#chat-root .chat-section-media-item--html .chat-section-media-actions {
  padding-left: 0.7rem !important;
  padding-right: 0.7rem !important;
}

#chat-root .chat-section-media-item--html.is-html-fullscreen {
  position: fixed !important;
  inset: 3.2rem 1rem calc(var(--chat-compose-height, 72px) + 1rem) 1rem !important;
  z-index: 250 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  border-color: var(--pf-chat-neon) !important;
  background: var(--custom-panel) !important;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.5) !important;
}

#chat-root .chat-section-media-item--html.is-html-fullscreen .chat-section-html-preview {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: 100% !important;
}

@media (max-width: 760px) {
  #chat-root .chat-section-media-grid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
  }

  #chat-root .chat-section-media-item--html.is-html-fullscreen {
    inset: 3.1rem 0.45rem calc(var(--chat-compose-height, 72px) + 0.65rem) 0.45rem !important;
  }
}

/* Prototype preview mode switcher + tighter section map rows. */
#chat-root .chat-media--block-draft {
  width: 100% !important;
  max-width: none !important;
}

@media (min-width: 761px) {
  body.is-chat-home .chat-root--home .chat-media--block-draft {
    width: 100% !important;
    max-width: none !important;
  }
}

#chat-root .chat-prototype-toolbar {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  margin-bottom: 0.25rem !important;
}

#chat-root .chat-prototype-device-tabs {
  justify-content: center !important;
  gap: 0.45rem !important;
}

#chat-root .chat-prototype-device-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.36rem !important;
  min-height: 1.9rem !important;
  padding: 0 0.72rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 48%, transparent) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--custom-copy) !important;
  cursor: pointer !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

#chat-root .chat-prototype-device-tab.is-active {
  background: var(--pf-chat-neon) !important;
  border-color: var(--pf-chat-neon) !important;
  color: #ffffff !important;
}

#chat-root .chat-prototype-device-tab > span {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: 1 !important;
}

#chat-root .chat-prototype-device-tab .chat-prototype-device-icon {
  position: relative !important;
  display: inline-block !important;
  width: 1rem !important;
  height: 0.78rem !important;
  flex: 0 0 auto !important;
}

#chat-root .chat-prototype-device-tab .chat-prototype-device-icon--desktop {
  border: 1.5px solid currentColor !important;
  border-radius: 2px !important;
}

#chat-root .chat-prototype-device-tab .chat-prototype-device-icon--desktop::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -0.28rem !important;
  width: 0.62rem !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: translateX(-50%) !important;
}

#chat-root .chat-prototype-device-tab .chat-prototype-device-icon--phone {
  width: 0.58rem !important;
  height: 1rem !important;
  border: 1.5px solid currentColor !important;
  border-radius: 3px !important;
}

#chat-root .chat-prototype-preview-grid {
  display: block !important;
  width: 100% !important;
  height: min(52vh, 620px) !important;
  min-height: 360px !important;
  position: relative !important;
}

#chat-root .chat-prototype-inspect-hint {
  position: absolute !important;
  left: 50% !important;
  bottom: 0.65rem !important;
  z-index: 3 !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0.38rem 0.72rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 52%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-bg) 82%, #001f26 18%) !important;
  color: var(--custom-copy) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  pointer-events: none !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
}

#chat-root .chat-prototype-inspect-hint.hidden {
  display: none !important;
}

#chat-root .chat-prototype-live-assets {
  display: none !important;
}

.chat-prototype-live-assets {
  display: none !important;
}

#chat-root .chat-prototype-library.is-image-target .chat-prototype-library-search-btn {
  border-color: var(--pf-chat-neon) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 42%, transparent) !important;
}

#chat-root .chat-prototype-library.is-image-target .chat-prototype-library-form.chat-form {
  border-color: var(--pf-chat-neon) !important;
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 42%, transparent) !important;
}


#chat-root .chat-prototype-live-shell {
  --prototype-live-zoom: 1;
  position: relative !important;
  width: calc(100% / var(--prototype-live-zoom, 1)) !important;
  height: calc(100% / var(--prototype-live-zoom, 1)) !important;
  transform: scale(var(--prototype-live-zoom, 1)) !important;
  transform-origin: center center !important;
  overflow: auto !important;
  border: 1px solid color-mix(in srgb, var(--custom-line) 78%, transparent) !important;
  border-radius: 8px !important;
  background: #fff !important;
  min-height: 0 !important;
}

#chat-root .chat-prototype-live-shell--phone {
  width: min(430px, calc(100% / var(--prototype-live-zoom, 1))) !important;
  max-width: 430px !important;
  margin: 0 auto !important;
}

#chat-root .chat-prototype-device--phone .chat-prototype-layout-edit {
  display: none !important;
}

#chat-root .chat-prototype-layout-edit {
  position: absolute !important;
  top: 0.42rem !important;
  left: 0.42rem !important;
  z-index: 100100 !important;
  pointer-events: none !important;
  touch-action: manipulation !important;
}

#chat-root .chat-prototype-layout-edit-btn,
#chat-root .chat-prototype-layout-undo,
#chat-root .chat-prototype-layout-popover,
#chat-root .chat-prototype-layout-form,
#chat-root .chat-prototype-layout-prompt-shell,
#chat-root .chat-prototype-layout-form textarea[data-prototype-layout-input],
#chat-root .chat-prototype-layout-form .chat-send-icon {
  pointer-events: auto !important;
}

#chat-root .chat-prototype-layout-edit-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
  pointer-events: auto !important;
  cursor: default !important;
  /* Do NOT inherit user-select:none onto the prompt textarea — that blocked typing. */
  user-select: none !important;
}

#chat-root .chat-prototype-layout-form,
#chat-root .chat-prototype-layout-prompt-shell,
#chat-root .chat-prototype-layout-form textarea[data-prototype-layout-input] {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text !important;
  touch-action: manipulation !important;
}

#chat-root .chat-prototype-layout-edit.is-dragging .chat-prototype-layout-edit-bar,
#chat-root .chat-prototype-layout-edit.is-dragging .chat-prototype-layout-edit-btn {
  cursor: grabbing !important;
}

#chat-root .chat-prototype-layout-edit.is-dragging {
  z-index: 30 !important;
}

#chat-root .chat-prototype-layout-undo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
  min-height: 1.55rem !important;
  padding: 0.18rem 0.42rem !important;
  border: 1px solid color-mix(in srgb, #ffb347 46%, var(--custom-copy) 10%) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-bg) 88%, #ffb347 12%) !important;
  color: color-mix(in srgb, #ffd8a8 82%, var(--custom-copy) 18%) !important;
  font-size: 0.56rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !important;
  cursor: pointer !important;
}

#chat-root .chat-prototype-layout-undo.hidden {
  display: none !important;
}

#chat-root .chat-prototype-layout-undo:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

#chat-root .chat-prototype-layout-undo svg {
  width: 0.76rem !important;
  height: 0.76rem !important;
  fill: currentColor !important;
  flex: 0 0 auto !important;
}

#chat-root .chat-prototype-layout-undo:hover:not(:disabled),
#chat-root .chat-prototype-layout-undo:focus-visible:not(:disabled) {
  border-color: color-mix(in srgb, #ffb347 68%, var(--custom-copy) 8%) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2), inset 0 0 0 1px color-mix(in srgb, #ffb347 22%, transparent) !important;
}

#chat-root .chat-prototype-layout-edit-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.24rem !important;
  min-height: 1.55rem !important;
  padding: 0.18rem 0.38rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 42%, var(--custom-copy) 12%) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-bg) 84%, var(--custom-panel) 16%) !important;
  color: var(--custom-copy) !important;
  font-size: 0.56rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !important;
  cursor: pointer !important;
}

#chat-root .chat-prototype-layout-edit-chevron {
  width: 0.72rem !important;
  height: 0.72rem !important;
  fill: currentColor !important;
  flex: 0 0 auto !important;
  opacity: 0.82 !important;
  transition: transform 0.16s ease !important;
}

#chat-root .chat-prototype-layout-edit-btn.is-active .chat-prototype-layout-edit-chevron {
  transform: rotate(180deg) !important;
}

#chat-root .chat-prototype-layout-edit-btn svg {
  width: 0.78rem !important;
  height: 0.78rem !important;
  fill: currentColor !important;
  flex: 0 0 auto !important;
}

#chat-root .chat-prototype-layout-edit-btn .chat-prototype-layout-edit-icon {
  color: var(--pf-chat-neon) !important;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pf-chat-neon) 45%, transparent)) !important;
}

#chat-root .chat-prototype-layout-edit-btn.is-active,
#chat-root .chat-prototype-layout-edit-btn:hover {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 58%, var(--custom-copy) 8%) !important;
  color: var(--custom-copy) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2), inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 18%, transparent) !important;
}

#chat-root .chat-prototype-layout-edit-btn.is-active {
  background: color-mix(in srgb, var(--custom-panel) 78%, var(--pf-chat-neon) 22%) !important;
}

#chat-root .chat-prototype-layout-popover {
  position: absolute !important;
  top: calc(100% + 0.34rem) !important;
  left: 0 !important;
  width: min(28rem, calc(100vw - 2rem)) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

#chat-root .chat-prototype-layout-form.chat-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  gap: 0 !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 2rem !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

#chat-root .chat-prototype-layout-form.chat-form > label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-form.is-thinking .chat-prototype-layout-prompt-shell textarea[data-prototype-layout-input] {
  opacity: 0 !important;
  pointer-events: none !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-inline-status {
  position: absolute;
  inset: 0 2.35rem 0 0.48rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  padding: 0;
  color: color-mix(in srgb, var(--custom-copy, #e6e6e6) 78%, var(--pf-chat-neon) 22%);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.25;
  pointer-events: none;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-inline-status.hidden {
  display: none !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-inline-status [data-prototype-layout-thinking-label] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-prompt-shell {
  position: relative !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-thinking-spinner {
  flex: 0 0 auto;
  width: 0.82rem;
  height: 0.82rem;
  border: 2px solid color-mix(in srgb, var(--pf-chat-neon) 24%, transparent);
  border-top-color: var(--pf-chat-neon);
  border-radius: 999px;
  animation: chatLayoutSpin 0.85s linear infinite;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-form.is-thinking .chat-send-icon.is-stop {
  opacity: 1 !important;
  background: #0099ff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-form.is-thinking .chat-send-icon.is-stop::before {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.5' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.5' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root .chat-prototype-layout-form.is-thinking .chat-prototype-layout-prompt-shell textarea[data-prototype-layout-input] {
  opacity: 0 !important;
  pointer-events: none !important;
}

#chat-root .chat-prototype-layout-inline-status {
  position: absolute;
  inset: 0 2.35rem 0 0.48rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  padding: 0;
  color: color-mix(in srgb, var(--custom-copy, #e6e6e6) 78%, var(--pf-chat-neon) 22%);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.25;
  pointer-events: none;
}

#chat-root .chat-prototype-layout-inline-status.hidden {
  display: none !important;
}

#chat-root .chat-prototype-layout-inline-status [data-prototype-layout-thinking-label] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chat-root .chat-prototype-layout-thinking-spinner {
  flex: 0 0 auto;
  width: 0.82rem;
  height: 0.82rem;
  border: 2px solid color-mix(in srgb, var(--pf-chat-neon) 24%, transparent);
  border-top-color: var(--pf-chat-neon);
  border-radius: 999px;
  animation: chatLayoutSpin 0.85s linear infinite;
}

#chat-root .chat-prototype-layout-form.is-thinking {
  min-height: 0 !important;
}

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

#chat-root .chat-prototype-layout-prompt-shell {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 0.3rem !important;
  width: 100% !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  padding: 0 0.24rem 0 0.48rem !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 82%, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--custom-panel) 82%, #050708 18%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#chat-root .chat-prototype-layout-form.is-thinking .chat-prototype-layout-prompt-shell {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 50%, rgba(255, 255, 255, 0.12)) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.22),
    0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#chat-root .chat-prototype-layout-form textarea[data-prototype-layout-input] {
  align-self: center !important;
  display: block !important;
  width: 100% !important;
  height: 1.25rem !important;
  min-height: 1.25rem !important;
  max-height: 1.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--custom-copy) !important;
  caret-color: var(--pf-chat-neon) !important;
  font: inherit !important;
  font-size: 0.8rem !important;
  line-height: 1.25rem !important;
  white-space: nowrap !important;
  resize: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  field-sizing: fixed !important;
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text !important;
  caret-color: #00cfff !important;
}

#chat-root .chat-prototype-layout-form textarea[data-prototype-layout-input]::placeholder {
  color: color-mix(in srgb, var(--custom-muted) 82%, var(--pf-chat-neon) 18%) !important;
  line-height: 28px !important;
}

#chat-root .chat-prototype-layout-form textarea[data-prototype-layout-input]:focus,
#chat-root .chat-prototype-layout-form textarea[data-prototype-layout-input]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

#chat-root .chat-prototype-layout-form .chat-send-icon {
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--pf-chat-neon) !important;
  color: #00161b !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-layout-form.is-thinking .chat-send-icon.is-stop,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-form.is-thinking .chat-send-icon.is-stop {
  opacity: 1 !important;
  background: #0099ff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-layout-form.is-thinking .chat-send-icon.is-stop::before,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-form.is-thinking .chat-send-icon.is-stop::before {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.5' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.5' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root .chat-prototype-layout-form.is-thinking .chat-send-icon:not(.is-stop) {
  opacity: 0.55 !important;
}

#chat-root .chat-prototype-layout-form .chat-send-icon:hover,
#chat-root .chat-prototype-layout-form .chat-send-icon:focus-visible,
#chat-root .chat-prototype-trait-form .chat-send-icon:hover,
#chat-root .chat-prototype-trait-form .chat-send-icon:focus-visible {
  background: color-mix(in srgb, var(--pf-chat-neon) 88%, #ffffff 12%) !important;
  color: #00161b !important;
}

#chat-root .chat-prototype-layout-form .chat-send-icon::before,
#chat-root .chat-prototype-trait-form .chat-send-icon::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  width: 0.74rem !important;
  height: 0.74rem !important;
  margin: 0 !important;
  inset: auto !important;
  background: currentColor !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.6 19.4 11h-4.7v9.4H9.3V11H4.6L12 3.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.6 19.4 11h-4.7v9.4H9.3V11H4.6L12 3.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root .chat-prototype-layout-form .chat-send-icon::after {
  display: none !important;
}

#chat-root .chat-prototype-layout-menu-section,
#chat-root .chat-prototype-layout-menu-label,
#chat-root .chat-prototype-layout-presets,
#chat-root .chat-prototype-layout-custom,
#chat-root .chat-prototype-layout-apply-btn {
  display: none !important;
}

#chat-root .chat-prototype-live-stage {
  width: 100% !important;
  min-height: 100% !important;
  background: #fff !important;
  color: #111 !important;
}

#chat-root .chat-prototype-device .chat-prototype-live-shell {
  height: 100% !important;
}

#chat-root .chat-block-draft-frame,
#chat-root .chat-prototype-device--phone .chat-block-draft-frame {
  height: 100% !important;
  min-height: 0 !important;
  pointer-events: auto !important;
  border: 0 !important;
}

#chat-root .chat-prototype-device {
  display: none !important;
  width: 100% !important;
  height: 100% !important;
}

#chat-root .chat-prototype-device.is-active {
  display: grid !important;
}

#chat-root .chat-prototype-device--phone.is-active {
  width: min(430px, 100%) !important;
  margin: 0 auto !important;
}

#chat-root .chat-block-draft-frame,
#chat-root .chat-prototype-device--phone .chat-block-draft-frame {
  height: 100% !important;
  min-height: 0 !important;
}

#chat-root .chat-prototype-text-editor {
  display: none !important;
}

#chat-root .chat-prototype-library {
  display: grid !important;
  gap: 0.55rem !important;
  padding: 0.62rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 26%, var(--custom-line) 74%) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--custom-bg) 74%, var(--custom-panel) 26%) !important;
}

#chat-root .chat-prototype-library-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 0.6rem !important;
}

#chat-root .chat-prototype-library-head strong {
  color: var(--custom-copy) !important;
  font-size: 0.72rem !important;
  line-height: 1.15 !important;
}

#chat-root .chat-prototype-library-head span,
#chat-root .chat-prototype-image-strip p {
  margin: 0 !important;
  color: var(--custom-muted) !important;
  font-size: 0.6rem !important;
  line-height: 1.25 !important;
}

#chat-root .chat-prototype-image-strip {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 5.25rem !important;
  gap: 0.46rem !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
  padding-bottom: 0.12rem !important;
}

#chat-root .chat-prototype-image-choice {
  display: grid !important;
  grid-template-rows: 4rem auto !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
  padding: 0.26rem !important;
  border: 1px solid color-mix(in srgb, var(--custom-line) 78%, transparent) !important;
  border-radius: 7px !important;
  background: var(--custom-panel) !important;
  color: var(--custom-copy) !important;
  cursor: pointer !important;
  text-align: left !important;
}

#chat-root .chat-prototype-image-choice:hover,
#chat-root .chat-prototype-image-choice.is-selected {
  border-color: var(--pf-chat-neon) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 54%, transparent) !important;
}

#chat-root .chat-prototype-image-choice img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 5px !important;
  object-fit: cover !important;
  display: block !important;
}

#chat-root .chat-prototype-image-choice span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: color-mix(in srgb, var(--custom-copy) 82%, transparent) !important;
  font-size: 0.52rem !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#chat-root .chat-prototype-trait-inspector,
#chat-root .chat-prototype-ai-edit {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

#chat-root .chat-prototype-trait-dock {
  position: absolute !important;
  left: 0.65rem !important;
  bottom: 3.15rem !important;
  z-index: 6 !important;
  width: min(24rem, calc(100% - 1.3rem)) !important;
  pointer-events: auto !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 46%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--custom-bg) 88%, #001820 12%) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(10px) !important;
  overflow: visible !important;
}

#chat-root .chat-prototype-trait-dock.is-anchor-selection {
  bottom: auto !important;
  width: max-content !important;
  min-width: min(18rem, calc(100% - 1.3rem)) !important;
  max-width: min(28rem, calc(100% - 1.3rem)) !important;
  transition: top 120ms ease, left 120ms ease !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock.is-anchor-selection {
  bottom: auto !important;
}

#chat-root .chat-prototype-trait-dock.hidden {
  display: none !important;
}

#chat-root .chat-prototype-trait-dock-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.55rem !important;
  padding: 0.42rem 0.48rem !important;
  min-width: 0 !important;
}

#chat-root .chat-prototype-trait-dock-meta {
  display: grid !important;
  gap: 0.06rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  max-width: 11rem !important;
}

#chat-root .chat-prototype-trait-dock-meta strong {
  color: var(--custom-copy) !important;
  font-size: 0.68rem !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#chat-root .chat-prototype-trait-dock-meta span {
  color: var(--custom-muted) !important;
  font-size: 0.56rem !important;
  line-height: 1.1 !important;
}

#chat-root .chat-prototype-trait-dock-tools {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.22rem !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.55rem !important;
  min-width: 1.55rem !important;
  height: 1.55rem !important;
  min-height: 1.55rem !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 34%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-bg) 82%, var(--custom-panel) 18%) !important;
  color: var(--custom-copy) !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool svg {
  display: block !important;
  width: 0.78rem !important;
  height: 0.78rem !important;
  fill: currentColor !important;
  pointer-events: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool:focus-visible {
  border-color: var(--pf-chat-neon) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--delete {
  border-color: var(--dx-line, #3a3a3a) !important;
  color: var(--dx-label, #999999) !important;
  background: var(--dx-elevated, #333333) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--dictate.is-active {
  border-color: var(--pf-chat-neon) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 18%, var(--custom-bg) 82%) !important;
  color: var(--pf-chat-neon) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 35%, transparent) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--dismiss {
  color: var(--custom-muted) !important;
}

#chat-root .chat-prototype-trait-drawer {
  display: grid !important;
  gap: 0.42rem !important;
  padding: 0 0.48rem 0.48rem !important;
  border-top: 1px solid color-mix(in srgb, var(--pf-chat-neon) 18%, transparent) !important;
}

#chat-root .chat-prototype-trait-drawer.hidden {
  display: none !important;
}

#chat-root .chat-prototype-trait-queue-chip {
  position: absolute !important;
  right: 0.65rem !important;
  bottom: 3.15rem !important;
  z-index: 6 !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.75rem !important;
  padding: 0 0.72rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 48%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-bg) 86%, #002530 14%) !important;
  color: var(--custom-copy) !important;
  cursor: pointer !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32) !important;
}

#chat-root .chat-prototype-trait-queue-chip.hidden {
  display: none !important;
}

#chat-root .chat-prototype-trait-queue-popover {
  position: absolute !important;
  right: 0.65rem !important;
  bottom: 5.15rem !important;
  z-index: 7 !important;
  width: min(18rem, calc(100% - 1.3rem)) !important;
  max-height: min(34vh, 260px) !important;
  pointer-events: auto !important;
  display: grid !important;
  gap: 0.42rem !important;
  padding: 0.48rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 42%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--custom-bg) 90%, #001820 10%) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45) !important;
  overflow: auto !important;
}

#chat-root .chat-prototype-trait-queue-popover.hidden {
  display: none !important;
}

#chat-root .chat-prototype-trait-queue-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.45rem !important;
}

#chat-root .chat-prototype-trait-queue-head strong {
  color: var(--custom-muted) !important;
  font-size: 0.58rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

#chat-root .chat-prototype-trait-idle {
  display: none !important;
}

#chat-root .chat-prototype-trait-idle.hidden {
  display: none !important;
}

#chat-root .chat-prototype-trait-inline-tools {
  display: grid !important;
  gap: 0.34rem !important;
  padding: 0.42rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 28%, var(--custom-line) 72%) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--custom-bg) 86%, #002530 14%) !important;
}

#chat-root .chat-prototype-trait-inline-tools.hidden {
  display: none !important;
}

#chat-root .chat-prototype-trait-inline-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.34rem !important;
}

#chat-root .chat-prototype-trait-inline-field {
  display: grid !important;
  gap: 0.14rem !important;
  min-width: 0 !important;
}

#chat-root .chat-prototype-trait-inline-field span {
  color: var(--custom-muted) !important;
  font-size: 0.5rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

#chat-root .chat-prototype-trait-inline-field select,
#chat-root .chat-prototype-trait-inline-field input[type="color"] {
  width: 100% !important;
  min-height: 1.45rem !important;
  padding: 0.12rem 0.28rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 24%, var(--custom-line) 76%) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--custom-bg) 92%, var(--custom-panel) 8%) !important;
  color: var(--custom-copy) !important;
  font-size: 0.58rem !important;
}

#chat-root .chat-prototype-trait-inline-field--color input[type="color"] {
  padding: 0.08rem !important;
  min-height: 1.55rem !important;
  cursor: pointer !important;
}

#chat-root .chat-prototype-trait-inline-tools [data-prototype-inline-apply] {
  justify-self: start !important;
  min-height: 1.45rem !important;
  padding: 0 0.55rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 42%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-bg) 82%, var(--custom-panel) 18%) !important;
  color: var(--custom-copy) !important;
  font-size: 0.56rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

#chat-root .chat-prototype-trait-inline-tools [data-prototype-inline-apply]:hover {
  border-color: var(--pf-chat-neon) !important;
}

#chat-root .chat-prototype-image-tools {
  display: grid !important;
  gap: 0.34rem !important;
  padding: 0.42rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 28%, var(--custom-line) 72%) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--custom-bg) 86%, #002530 14%) !important;
}

#chat-root .chat-prototype-image-tools.hidden {
  display: none !important;
}

#chat-root .chat-prototype-image-layout-bar {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.28rem !important;
}

#chat-root .chat-prototype-image-layout-bar button {
  min-width: 0 !important;
  min-height: 1.55rem !important;
  padding: 0.12rem 0.24rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 22%, var(--custom-line) 78%) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--custom-bg) 90%, var(--custom-panel) 10%) !important;
  color: var(--custom-copy) !important;
  font-size: 0.52rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
}

#chat-root .chat-prototype-image-layout-bar button.is-active {
  border-color: var(--pf-chat-neon) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 14%, var(--custom-bg) 86%) !important;
  color: var(--pf-chat-neon) !important;
}

#chat-root .chat-prototype-image-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.34rem !important;
}

#chat-root .chat-prototype-image-tools label {
  display: grid !important;
  gap: 0.14rem !important;
  min-width: 0 !important;
}

#chat-root .chat-prototype-image-tools span {
  color: var(--custom-muted) !important;
  font-size: 0.5rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

#chat-root .chat-prototype-image-tools select,
#chat-root .chat-prototype-image-tools input[type="range"] {
  width: 100% !important;
  min-height: 1.45rem !important;
  accent-color: var(--pf-chat-neon) !important;
}

#chat-root .chat-prototype-image-tools select {
  padding: 0.12rem 0.28rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 24%, var(--custom-line) 76%) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--custom-bg) 92%, var(--custom-panel) 8%) !important;
  color: var(--custom-copy) !important;
  font-size: 0.58rem !important;
}

#chat-root .chat-prototype-image-tools p {
  margin: 0 !important;
  color: color-mix(in srgb, var(--custom-muted) 84%, #fff 16%) !important;
  font-size: 0.56rem !important;
  line-height: 1.35 !important;
}

#chat-root .chat-prototype-block-tools {
  display: grid !important;
  gap: 0.34rem !important;
  padding: 0.42rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 22%, var(--custom-line) 78%) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--custom-bg) 88%, #00303b 12%) !important;
}

#chat-root .chat-prototype-block-tools.hidden {
  display: none !important;
}

#chat-root .chat-prototype-block-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.34rem !important;
}

#chat-root .chat-prototype-block-tools label {
  display: grid !important;
  gap: 0.14rem !important;
  min-width: 0 !important;
}

#chat-root .chat-prototype-block-tools span {
  color: var(--custom-muted) !important;
  font-size: 0.5rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

#chat-root .chat-prototype-block-tools select,
#chat-root .chat-prototype-block-tools input[type="range"],
#chat-root .chat-prototype-block-tools input[type="number"] {
  width: 100% !important;
  min-height: 1.45rem !important;
  accent-color: var(--pf-chat-neon) !important;
}

#chat-root .chat-prototype-block-tools label:has(input[type="number"]) {
  grid-template-columns: minmax(0, 1fr) 3.9rem !important;
  align-items: center !important;
}

#chat-root .chat-prototype-block-tools label:has(input[type="number"]) span {
  grid-column: 1 / -1 !important;
}

#chat-root .chat-prototype-block-tools select,
#chat-root .chat-prototype-block-tools input[type="number"] {
  padding: 0.12rem 0.28rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 20%, var(--custom-line) 80%) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--custom-bg) 92%, var(--custom-panel) 8%) !important;
  color: var(--custom-copy) !important;
  font-size: 0.58rem !important;
}

#chat-root .chat-prototype-block-tools input[type="number"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  text-align: center !important;
}

#chat-root .chat-prototype-trait-dock.is-edit-mode {
  border-color: var(--pf-chat-neon) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 24%, transparent), 0 14px 40px rgba(0, 0, 0, 0.42) !important;
}

#chat-root .chat-prototype-trait-note {
  width: 100% !important;
  min-width: 0 !important;
}

#chat-root .chat-prototype-trait-form.chat-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.26rem !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0.24rem 0.26rem !important;
  border: 1px solid color-mix(in srgb, var(--dx-toggle, #0099ff) 34%, var(--dx-line, #3a3a3a) 66%) !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--dx-panel, #2d2d2d) 94%, #000 6%) !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-trait-form textarea[data-prototype-ai-note] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  display: block !important;
  width: 100% !important;
  min-height: 2.7rem !important;
  max-height: 120px !important;
  height: 2.7rem !important;
  margin: 0 !important;
  padding: 0.42rem 0.5rem !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--dx-copy, var(--custom-copy)) !important;
  caret-color: var(--pf-chat-neon) !important;
  font: inherit !important;
  font-size: 0.8rem !important;
  line-height: 1.22 !important;
  resize: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-trait-form textarea[data-prototype-ai-note]::placeholder {
  color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 84%, transparent) !important;
  line-height: 1.22 !important;
}

#chat-root .chat-prototype-trait-form textarea[data-prototype-ai-note]:focus,
#chat-root .chat-prototype-trait-form textarea[data-prototype-ai-note]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

#chat-root .chat-prototype-note-actions {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 0.2rem !important;
  width: 100% !important;
  min-width: 0 !important;
}

#chat-root .chat-prototype-note-btn {
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.28rem !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 1.5rem !important;
  padding: 0.14rem 0.52rem !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 78%, transparent) !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--dx-elevated, #363636) 84%, transparent) !important;
  color: var(--dx-copy, var(--custom-copy)) !important;
  font: 700 0.56rem/1 var(--font-body, system-ui, sans-serif) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#chat-root .chat-prototype-note-btn--dictate {
  grid-column: auto !important;
}

#chat-root .chat-prototype-note-btn--queue {
  grid-column: auto !important;
}

#chat-root .chat-prototype-note-btn--apply {
  grid-column: auto !important;
  margin-left: auto !important;
  min-width: 6.6rem !important;
}

#chat-root .chat-prototype-note-btn svg {
  width: 0.78rem !important;
  height: 0.78rem !important;
  fill: currentColor !important;
  flex: 0 0 auto !important;
}

#chat-root .chat-prototype-note-btn:hover,
#chat-root .chat-prototype-note-btn:focus-visible,
#chat-root .chat-prototype-note-btn.is-active {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 48%, var(--dx-line, #3a3a3a) 52%) !important;
  outline: none !important;
}

#chat-root .chat-prototype-note-btn--queue {
  border-color: color-mix(in srgb, var(--dx-line, #3a3a3a) 82%, transparent) !important;
}

#chat-root .chat-prototype-note-btn--apply {
  background: var(--pf-chat-neon) !important;
  color: #00161b !important;
  border-color: var(--pf-chat-neon) !important;
}

#chat-root .chat-prototype-trait-form .chat-prototype-trait-queue-btn {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, rgba(255, 255, 255, 0.06) 100%, transparent) !important;
  color: color-mix(in srgb, var(--custom-copy) 88%, var(--pf-chat-neon) 12%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 22%, transparent) !important;
  cursor: pointer !important;
}

#chat-root .chat-prototype-trait-form .chat-prototype-trait-queue-btn svg {
  width: 0.82rem !important;
  height: 0.82rem !important;
  fill: currentColor !important;
}

#chat-root .chat-prototype-trait-form .chat-prototype-trait-queue-btn:hover,
#chat-root .chat-prototype-trait-form .chat-prototype-trait-queue-btn:focus-visible {
  color: var(--pf-chat-neon) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 42%, transparent) !important;
}

#chat-root .chat-prototype-trait-form .chat-send-icon {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--pf-chat-neon) !important;
  color: #00161b !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-trait-form .chat-send-icon::after {
  display: none !important;
}

#chat-root .chat-prototype-trait-dock.is-ai-busy,
#chat-root .chat-block-draft.is-draft-ai-busy .chat-prototype-trait-dock {
  opacity: 0.82 !important;
  pointer-events: none !important;
}

#chat-root .chat-block-draft.is-draft-ai-busy .chat-prototype-inspect-hint {
  color: var(--pf-chat-neon) !important;
}

#chat-root .chat-prototype-trait-note textarea:not([data-prototype-ai-note]),
#chat-root .chat-prototype-trait-note input[type="text"]:not([data-prototype-ai-note]) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 1.75rem !important;
  padding: 0.38rem 0.55rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 28%, var(--custom-line) 72%) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-bg) 90%, var(--custom-panel) 10%) !important;
  color: var(--custom-copy) !important;
  font: 0.68rem/1.25 var(--font-body, system-ui, sans-serif) !important;
}

#chat-root .chat-prototype-trait-notes {
  display: none !important;
}

#chat-root .chat-prototype-trait-notes-head {
  display: none !important;
}

#chat-root .chat-prototype-trait-notes-list {
  display: grid !important;
  gap: 0.34rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#chat-root .chat-prototype-trait-note-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.45rem !important;
  align-items: start !important;
  padding: 0.42rem 0.48rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 24%, var(--custom-line) 76%) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--custom-bg) 88%, var(--custom-panel) 12%) !important;
}

#chat-root .chat-prototype-trait-note-item strong {
  display: block !important;
  color: var(--pf-chat-neon) !important;
  font-size: 0.58rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

#chat-root .chat-prototype-trait-note-item p {
  margin: 0.18rem 0 0 !important;
  color: var(--custom-copy) !important;
  font-size: 0.68rem !important;
  line-height: 1.35 !important;
}

#chat-root .chat-prototype-trait-note-item small {
  display: block !important;
  margin-top: 0.18rem !important;
  color: var(--custom-muted) !important;
  font-size: 0.58rem !important;
}

#chat-root .chat-prototype-trait-note-item button {
  min-width: 1.55rem !important;
  min-height: 1.55rem !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 34%, transparent) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--custom-muted) !important;
  cursor: pointer !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
}

#chat-root .chat-prototype-trait-note-empty {
  display: none !important;
}

#chat-root .chat-prototype-trait-actions button[data-prototype-inspector-action="delete"] {
  border-color: var(--dx-line, #3a3a3a) !important;
  color: var(--dx-label, #999999) !important;
  background: var(--dx-elevated, #333333) !important;
}

#chat-root .chat-block-draft.has-trait-selection .chat-prototype-trait-idle {
  display: none !important;
}

#chat-root .chat-block-draft .chat-prototype-trait-dock.hidden {
  display: none !important;
}

#chat-root .chat-block-draft.has-trait-selection .chat-prototype-trait-dock {
  display: block !important;
}

#chat-root .chat-prototype-inspector textarea,
#chat-root .chat-prototype-trait-drawer select {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0.42rem 0.55rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 24%, var(--custom-line) 76%) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--custom-bg) 90%, var(--custom-panel) 10%) !important;
  color: var(--custom-copy) !important;
  font: 0.68rem/1.3 var(--font-body, system-ui, sans-serif) !important;
  resize: vertical !important;
}

#chat-root .chat-prototype-inspector-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.34rem !important;
  align-items: center !important;
}

#chat-root .chat-prototype-inspector-actions button {
  min-height: 1.55rem !important;
  padding: 0 0.55rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 34%, transparent) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--custom-copy) !important;
  cursor: pointer !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
}

#chat-root .chat-prototype-ai-edit {
  display: grid !important;
  gap: 0.55rem !important;
  padding: 0.68rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 36%, var(--custom-line) 64%) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--custom-panel) 92%, var(--pf-chat-neon) 8%), color-mix(in srgb, var(--custom-bg) 78%, var(--pf-chat-neon) 22%)) !important;
  position: relative !important;
}

#chat-root .chat-prototype-ai-edit-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 0.7rem !important;
}

#chat-root .chat-prototype-ai-edit-head strong {
  color: var(--custom-copy) !important;
  font-size: 0.78rem !important;
}

#chat-root .chat-prototype-ai-edit-head span,
#chat-root .chat-prototype-text-fields p {
  margin: 0 !important;
  color: var(--custom-muted) !important;
  font-size: 0.6rem !important;
}

#chat-root .chat-prototype-ai-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.45rem !important;
}

#chat-root .chat-prototype-ai-row input,
#chat-root .chat-prototype-text-fields input,
#chat-root .chat-prototype-text-fields textarea,
#chat-root .chat-prototype-targeting select {
  min-width: 0 !important;
  min-height: 2rem !important;
  padding: 0 0.65rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 28%, var(--custom-line) 72%) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--custom-bg) 88%, var(--custom-panel) 12%) !important;
  color: var(--custom-copy) !important;
  font: 0.72rem/1.2 var(--font-body, system-ui, sans-serif) !important;
  letter-spacing: 0 !important;
}

#chat-root .chat-prototype-text-fields textarea {
  min-height: 3.2rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  resize: vertical !important;
}

#chat-root .chat-prototype-structure-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
}

#chat-root .chat-prototype-structure-actions button,
#chat-root .chat-prototype-text-fields summary {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.55rem !important;
  padding: 0 0.58rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 42%, transparent) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--custom-copy) !important;
  cursor: pointer !important;
  font-size: 0.62rem !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  list-style: none !important;
}

#chat-root .chat-prototype-structure-actions button:hover,
#chat-root .chat-prototype-text-fields summary:hover {
  background: var(--pf-chat-neon) !important;
  color: #ffffff !important;
}

#chat-root .chat-prototype-text-fields {
  display: none !important;
}

#chat-root .chat-prototype-inspector {
  display: grid !important;
  gap: 0.42rem !important;
  padding: 0.48rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 38%, var(--custom-line) 62%) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--custom-bg) 76%, var(--custom-panel) 24%) !important;
}

#chat-root .chat-prototype-inspector-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 0.6rem !important;
}

#chat-root .chat-prototype-inspector-head strong {
  color: var(--custom-copy) !important;
  font-size: 0.68rem !important;
}

#chat-root .chat-prototype-inspector-head span {
  color: var(--pf-chat-neon) !important;
  font-size: 0.56rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

#chat-root .chat-prototype-inspector textarea,
#chat-root .chat-prototype-inspector select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 2rem !important;
  padding: 0.5rem 0.65rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 28%, var(--custom-line) 72%) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--custom-bg) 90%, var(--custom-panel) 10%) !important;
  color: var(--custom-copy) !important;
  font: 0.72rem/1.25 var(--font-body, system-ui, sans-serif) !important;
  letter-spacing: 0 !important;
}

#chat-root .chat-prototype-inspector textarea {
  resize: vertical !important;
}

#chat-root .chat-prototype-inspector-actions {
  display: grid !important;
  grid-template-columns: auto auto auto minmax(9rem, 1fr) !important;
  gap: 0.35rem !important;
  align-items: center !important;
}

#chat-root .chat-prototype-inspector-actions button {
  min-height: 1.7rem !important;
  padding: 0 0.58rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 48%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-bg) 82%, var(--custom-panel) 18%) !important;
  color: var(--custom-copy) !important;
  cursor: pointer !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

#chat-root .chat-prototype-inspector-actions button:hover {
  background: var(--pf-chat-neon) !important;
  color: #ffffff !important;
}

#chat-root .chat-prototype-trait-drawer .chat-prototype-inspector-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
  gap: 0.34rem !important;
}

#chat-root .chat-prototype-trait-drawer .chat-prototype-inspector-actions:has(.chat-prototype-inspector-image-picker) {
  display: block !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

#chat-root .chat-prototype-trait-drawer .chat-prototype-inspector-actions button {
  min-height: 1.55rem !important;
  padding: 0 0.55rem !important;
  font-size: 0.58rem !important;
}

#chat-root .chat-prototype-text-fields summary::-webkit-details-marker {
  display: none !important;
}

#chat-root .chat-prototype-text-fields > div {
  display: grid !important;
  gap: 0.42rem !important;
  margin-top: 0.5rem !important;
}

#chat-root .chat-prototype-text-fields label {
  display: grid !important;
  grid-template-columns: 3.2rem minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.3rem !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
}

#chat-root .chat-prototype-text-fields label.is-active {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 42%, transparent) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 8%, transparent) !important;
}

#chat-root .chat-prototype-text-fields label span {
  color: var(--pf-chat-neon) !important;
  font-size: 0.58rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}

#chat-root .chat-section-map-row-grid {
  grid-template-columns: minmax(10rem, 1fr) minmax(8rem, auto) !important;
  gap: 0.4rem !important;
  min-height: 2.55rem !important;
  padding: 0.38rem 0.58rem 0.38rem calc(0.62rem + (var(--section-depth, 0) * 0.72rem)) !important;
}

#chat-root .chat-section-map-toggle {
  display: none !important;
}

#chat-root .chat-section-map-name {
  font-size: 0.74rem !important;
}

#chat-root .chat-section-map-key,
#chat-root .chat-section-map-meta {
  font-size: 0.56rem !important;
}

#chat-root .chat-section-map-meta {
  gap: 0.2rem !important;
}

#chat-root .chat-section-map-meta span,
#chat-root .chat-section-map-media-count {
  min-height: 1.2rem !important;
  padding: 0.08rem 0.34rem !important;
  border: 1px solid var(--custom-line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-bg) 82%, var(--custom-panel) 18%) !important;
  color: var(--custom-muted) !important;
  font: inherit !important;
  cursor: default !important;
}

#chat-root .chat-section-map-media-count {
  cursor: pointer !important;
}

#chat-root .chat-section-map-media-count[aria-expanded="true"] {
  border-color: var(--pf-chat-neon) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 22%, var(--custom-panel) 78%) !important;
  color: var(--custom-copy) !important;
}

#chat-root .chat-section-map-actions button.btn-neon:not([data-section-map-chat-prompt]) {
  min-height: 1.35rem !important;
  padding: 0 0.46rem !important;
  font-size: 0.56rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 72%, #00313b 28%) !important;
  background: linear-gradient(180deg, #073e4b 0%, #03252d 100%) !important;
  color: #e8fbff !important;
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.18), 0 0 14px rgba(0, 204, 255, 0.12) !important;
}

@media (max-width: 760px) {
  #chat-root .chat-prototype-preview-grid {
    height: min(70vh, 620px) !important;
    min-height: 390px !important;
  }

  #chat-root .chat-section-map-row-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto !important;
    align-items: center !important;
    padding: 0.46rem 0.58rem !important;
  }

  #chat-root .chat-section-map-meta {
    grid-column: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }
}

/* Section-map drawer actions + admin-window composer attachment. */
#chat-root .chat-section-map-media-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
}

#chat-root .chat-section-map-media-foot {
  display: flex !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  padding: 0.62rem 0.5rem 0 !important;
}

#chat-root .chat-section-map-media-foot button,
#chat-root .chat-section-map-media-empty [data-section-map-action] {
  min-height: 1.35rem !important;
  padding: 0 0.52rem !important;
  font-size: 0.54rem !important;
}

body.is-admin-preview-open.is-chat-home .chat-root--home .chat-shell {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

body.is-admin-preview-open.is-chat-home .chat-root--home .chat-body,
body.is-admin-preview-open.is-chat-home .chat-root--home .chat-layout,
body.is-admin-preview-open.is-chat-home .chat-root--home .chat-main {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 0 !important;
}

body.is-admin-preview-open.is-chat-home .chat-root--home .chat-log {
  min-height: 0 !important;
  padding: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  scroll-padding-bottom: 0.75rem !important;
}

body.is-admin-preview-open.is-chat-home .chat-root--home .chat-compose {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  display: flex !important;
  width: 100% !important;
  padding: 0.5rem !important;
  background: var(--custom-bg) !important;
  pointer-events: auto !important;
}

body.is-admin-preview-open.is-chat-home .chat-root--home .chat-compose > * {
  pointer-events: auto !important;
}

body.is-admin-preview-open.is-chat-home #chat-form.chat-form {
  width: 100% !important;
  margin: 0 !important;
}

body.is-admin-preview-open.is-chat-home .chat-root--home .chat-shell,
body.is-admin-preview-open.is-chat-home .chat-root--home .chat-body,
body.is-admin-preview-open.is-chat-home .chat-root--home .chat-layout,
body.is-admin-preview-open.is-chat-home .chat-root--home .chat-main {
  height: 100% !important;
  min-height: 0 !important;
}

body.is-admin-preview-open.is-chat-home .chat-root--home .chat-main {
  display: flex !important;
  flex-direction: column !important;
}

body.is-admin-preview-open.is-chat-home .chat-root--home .chat-log {
  flex: 1 1 auto !important;
}

body.is-admin-preview-open.is-chat-home .chat-root--home .chat-compose {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}

#chat-root .chat-section-map-row--hidden {
  background: color-mix(in srgb, var(--custom-panel) 72%, #8d8d8d 28%) !important;
  opacity: 0.72 !important;
}

#chat-root .chat-section-map-row--hidden .chat-section-map-name,
#chat-root .chat-section-map-row--hidden .chat-section-map-key {
  color: color-mix(in srgb, var(--custom-muted) 76%, #cfcfcf 24%) !important;
}

#chat-root .chat-section-map-row--hidden .chat-section-map-meta span,
#chat-root .chat-section-map-row--hidden .chat-section-map-media-count {
  border-color: color-mix(in srgb, var(--custom-line) 68%, #9a9a9a 32%) !important;
  background: color-mix(in srgb, var(--custom-bg) 66%, #777777 34%) !important;
  color: color-mix(in srgb, var(--custom-muted) 74%, #e0e0e0 26%) !important;
}

#chat-root .chat-section-map-row--hidden .btn-neon {
  filter: grayscale(0.45) saturate(0.65) !important;
}

@media (max-width: 760px) {
  #chat-root .chat-section-map-media-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  #chat-root .chat-section-map-media-head [data-section-map-action],
  #chat-root .chat-section-map-media-head [data-section-map-chat-prompt] {
    grid-column: auto !important;
  }
}

/* Design setup row drag refinement + section map slimming. */
body.is-designs-view .ai-fab {
  display: none !important;
}

.design-setup-menu-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
  cursor: grab !important;
}

.design-setup-menu-row:active {
  cursor: grabbing !important;
}

.design-setup-row-drag {
  display: none !important;
}

.design-setup-menu-name {
  grid-column: 1 !important;
  max-width: none !important;
  justify-self: start !important;
}

.design-setup-menu-row-actions {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.1rem !important;
}

.design-setup-row-template,
.design-setup-row-options,
.design-setup-parent-mode,
.design-setup-upload-button {
  grid-column: auto !important;
}

#chat-root .chat-section-map-row {
  cursor: pointer !important;
}

#chat-root .chat-section-map-row-grid {
  min-height: 2.18rem !important;
  padding: 0.28rem 0.48rem 0.28rem calc(0.52rem + (var(--section-depth, 0) * 1rem)) !important;
}

#chat-root .chat-section-map-row-grid:hover {
  background: color-mix(in srgb, var(--pf-chat-neon) 8%, transparent) !important;
}

#chat-root .chat-section-map-name {
  font-size: 0.68rem !important;
  line-height: 1.05 !important;
}

#chat-root .chat-section-map-key {
  font-size: 0.5rem !important;
  line-height: 1.05 !important;
}

#chat-root .chat-section-map-meta span,
#chat-root .chat-section-map-media-count {
  min-height: 1.05rem !important;
  padding: 0.04rem 0.3rem !important;
  font-size: 0.5rem !important;
}

#chat-root .chat-section-map-actions button:not(.btn-neon) {
  min-height: 1.22rem !important;
  padding: 0 0.44rem !important;
  border-radius: 3px !important;
  font-size: 0.52rem !important;
}

#chat-root .chat-section-map-media-head button,
#chat-root .chat-section-map-media-foot button,
#chat-root .chat-section-media-actions button,
#chat-root .chat-section-map-media-empty button {
  min-height: 1.55rem !important;
  padding: 0 0.66rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 76%, transparent) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-chat-neon) 100%, #ffffff 8%), color-mix(in srgb, var(--pf-chat-neon) 78%, #003a46 22%)) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 20%, transparent), 0 8px 18px rgba(0, 0, 0, 0.24) !important;
}

#chat-root .chat-section-map-media-head button:hover,
#chat-root .chat-section-map-media-foot button:hover,
#chat-root .chat-section-media-actions button:hover,
#chat-root .chat-section-map-media-empty button:hover {
  transform: translateY(-1px) !important;
}

/* Final top action order: account/scope is the last control. */
body.is-chat-home #chat-account-scope,
#chat-account-scope {
  right: 5px !important;
  z-index: 158 !important;
}

body.is-chat-home #admin-preview-toggle,
.admin-preview-toggle {
  right: 2.15rem !important;
}

body.is-chat-home .chat-top-hire,
.chat-top-hire {
  right: 5.05rem !important;
}

/* Final prototype workbench refinement. */
#chat-root .chat-block-draft {
  --prototype-zoom: 1;
}

#chat-root .chat-prototype-toolbar {
  justify-content: center !important;
  position: relative !important;
  min-height: 2.4rem !important;
}

#chat-root .chat-prototype-device-tabs {
  justify-content: center !important;
}

#chat-root .chat-prototype-view-controls {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  transform: translateY(-50%) !important;
}

#chat-root .chat-prototype-view-controls button,
#chat-root .chat-prototype-view-controls span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.65rem !important;
  min-height: 1.65rem !important;
  padding: 0 0.52rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 52%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-bg) 74%, #002b35 26%) !important;
  color: var(--custom-copy) !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

#chat-root .chat-prototype-view-controls button {
  cursor: pointer !important;
}

#chat-root .chat-prototype-view-controls button:hover {
  border-color: var(--pf-chat-neon) !important;
  background: #052f3a !important;
}

#chat-root .chat-prototype-targeting {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.4fr) !important;
  gap: 0.5rem !important;
}

#chat-root .chat-prototype-targeting.is-target-locked {
  grid-template-columns: minmax(0, 1fr) !important;
}

#chat-root .chat-prototype-target-chip {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  padding: 0.35rem 0.55rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 35%, transparent) !important;
  border-radius: 0.55rem !important;
  background: color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 8%, transparent) !important;
}

#chat-root .chat-prototype-target-chip-kicker {
  flex: 0 0 auto !important;
  color: var(--custom-muted) !important;
  font-size: 0.56rem !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
}

#chat-root .chat-prototype-target-chip strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--custom-text, #f2f2f0) !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
}

#chat-root .chat-prototype-target-chip-change {
  flex: 0 0 auto !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--pf-chat-neon, #3ec7e0) !important;
  font-size: 0.68rem !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  padding: 0.15rem 0.25rem !important;
}

#chat-root .chat-prototype-target-fields {
  display: contents !important;
}

#chat-root .chat-prototype-target-fields.hidden {
  display: none !important;
}

#chat-root .chat-prototype-targeting label {
  display: grid !important;
  gap: 0.24rem !important;
}

#chat-root .chat-prototype-targeting span {
  color: var(--custom-muted) !important;
  font-size: 0.56rem !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

#chat-root .chat-prototype-preview-grid {
  height: min(52vh, 620px) !important;
  min-height: 360px !important;
  position: relative !important;
}

#chat-root .chat-prototype-insert-toolbar {
  position: absolute !important;
  z-index: 24 !important;
  top: 0.62rem !important;
  right: 0.7rem !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 0.3rem !important;
  padding: 0.28rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 32%, transparent) !important;
  border-radius: 8px !important;
  background: rgba(4, 16, 20, 0.76) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(8px) !important;
}

#chat-root .chat-prototype-insert-toolbar button {
  min-height: 1.55rem !important;
  padding: 0 0.48rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 28%, var(--custom-line) 72%) !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--custom-bg) 84%, var(--custom-panel) 16%) !important;
  color: var(--custom-copy) !important;
  font: 700 0.58rem/1 var(--font-body, system-ui, sans-serif) !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}

#chat-root .chat-prototype-insert-toolbar button:hover,
#chat-root .chat-prototype-insert-toolbar button:focus-visible {
  border-color: var(--pf-chat-neon) !important;
  background: #052f3a !important;
  outline: none !important;
}

/* Scale grip — fixed + high z so it stays clickable (never clipped off-page). */
#chat-root .chat-prototype-image-resize-handle,
#chat-root .chat-prototype-image-drag-handle,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-resize-handle,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-drag-handle {
  position: fixed !important;
  z-index: 100150 !important;
  display: grid !important;
  place-items: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border: 1.5px solid rgba(15, 18, 22, 0.72) !important;
  border-radius: 3px !important;
  background: #f7f8fa !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 0 3px rgba(0, 153, 255, 0.2),
    0 2px 10px rgba(0, 0, 0, 0.32) !important;
  cursor: nwse-resize !important;
  touch-action: none !important;
  pointer-events: auto !important;
  color: transparent !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease !important;
}

#chat-root .chat-prototype-image-drag-handle {
  cursor: grab !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  min-height: 9px !important;
}

#chat-root .chat-prototype-image-resize-handle.hidden,
#chat-root .chat-prototype-image-drag-handle.hidden {
  display: none !important;
}

#chat-root .chat-prototype-image-resize-handle:hover,
#chat-root .chat-prototype-image-resize-handle:focus-visible,
#chat-root .chat-prototype-image-drag-handle:hover,
#chat-root .chat-prototype-image-drag-handle:focus-visible {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7),
    0 0 0 3px rgba(0, 153, 255, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transform: scale(1.08) !important;
  outline: none !important;
}

#chat-root .chat-block-draft.is-block-scaling .chat-prototype-image-resize-handle,
#chat-root .chat-block-draft.is-image-resizing .chat-prototype-image-resize-handle {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.85) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.8),
    0 0 0 3px rgba(0, 153, 255, 0.28),
    0 6px 16px rgba(0, 0, 0, 0.32) !important;
  transform: scale(1.12) !important;
}

#chat-root .chat-block-draft.is-image-resizing .chat-prototype-live-stage {
  user-select: none !important;
}

#chat-root .chat-block-draft.is-image-cropping .chat-prototype-live-stage {
  cursor: move !important;
  user-select: none !important;
}

#chat-root .chat-prototype-device {
  overflow: auto !important;
}

#chat-root .chat-prototype-device--phone.is-active {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: min(430px, 100%) !important;
  max-width: 430px !important;
  height: 100% !important;
  margin: 0 auto !important;
}

#chat-root .chat-block-draft-frame {
  width: calc(100% / var(--prototype-zoom)) !important;
  height: calc(100% / var(--prototype-zoom)) !important;
  transform: scale(var(--prototype-zoom)) !important;
  transform-origin: center center !important;
}

#chat-root .chat-prototype-device--phone .chat-block-draft-frame {
  min-height: 0 !important;
  border-radius: 18px !important;
  overflow: auto !important;
}

#chat-root .chat-block-draft.is-prototype-fullscreen {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: none !important;
  overflow: hidden !important;
  border-color: var(--pf-chat-neon) !important;
  box-shadow: none !important;
}

#chat-root .chat-block-draft.is-prototype-fullscreen .chat-prototype-preview-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  position: relative !important;
  overflow: hidden !important;
}

#chat-root .chat-block-draft.is-prototype-fullscreen .chat-prototype-workbench-rail {
  display: none !important;
}

#chat-root .chat-block-draft.is-prototype-fullscreen .chat-prototype-device--phone.is-active {
  max-width: min(390px, 100%) !important;
}

#chat-root .chat-block-draft.is-prototype-fullscreen .chat-prototype-device--phone .chat-block-draft-frame {
  height: 100% !important;
}

#chat-root .chat-prototype-library-head strong,
#chat-root .chat-prototype-ai-edit-head strong {
  font-size: 0.7rem !important;
}

#chat-root .chat-prototype-structure-actions button {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 45%, transparent) !important;
  background: color-mix(in srgb, var(--custom-bg) 82%, var(--custom-panel) 18%) !important;
}

#chat-root .chat-prototype-text-fields[open] {
  padding-top: 0.2rem !important;
}

@media (max-width: 760px) {
  body.is-chat-home #chat-account-scope,
  #chat-account-scope {
    right: max(0.55rem, env(safe-area-inset-right)) !important;
  }

  body.is-chat-home .chat-top-hire,
  .chat-top-hire {
    right: calc(max(0.55rem, env(safe-area-inset-right)) + 46px) !important;
  }

  #chat-root .chat-prototype-toolbar {
    justify-content: start !important;
    padding-bottom: 2.1rem !important;
  }

  #chat-root .chat-prototype-view-controls {
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
  }

  #chat-root .chat-prototype-targeting {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #chat-root .chat-block-draft.is-prototype-fullscreen {
    inset: auto !important;
  }
}

#chat-root .chat-section-map-actions button.btn-neon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.22rem !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 1.28rem !important;
  padding: 0 0.38rem !important;
  border-width: 2px !important;
  border-radius: 3px !important;
  font-size: 0.52rem !important;
  font-weight: 600 !important;
  color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 72%, #eafcff 28%) !important;
  background: color-mix(in srgb, rgba(8, 13, 16, 0.88) 100%, transparent) !important;
  border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 60%, rgba(255, 255, 255, 0.1) 40%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#chat-root .chat-section-map-actions button.btn-neon:hover,
#chat-root .chat-section-map-actions button.btn-neon:focus-visible {
  color: #00161b !important;
  background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 86%, #ffffff 14%) !important;
  border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 88%, #dfffff 12%) !important;
  box-shadow: 0 0 20px rgba(0, 207, 255, 0.18) !important;
}

body.is-chat-home .main-top {
  height: 2.3rem !important;
  min-height: 2.3rem !important;
  padding-top: 0.22rem !important;
  padding-bottom: 0.22rem !important;
  display: flex !important;
  align-items: center !important;
}

body.is-chat-home .main-top-label {
  font-size: 0.72rem !important;
}

body.is-chat-home .chat-top-hire,
body.is-chat-home #admin-preview-toggle,
body.is-chat-home #chat-account-scope {
  top: 0.25rem !important;
  transform: none !important;
  height: 1.8rem !important;
  min-height: 1.8rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.is-chat-home #chat-account-scope,
#chat-account-scope {
  right: 0.7rem !important;
}

body.is-chat-home #admin-preview-toggle,
.admin-preview-toggle {
  right: 3.55rem !important;
}

body.is-chat-home .chat-top-hire,
.chat-top-hire {
  right: 7.65rem !important;
  min-width: 6.55rem !important;
}

#chat-root .chat-block-draft.is-prototype-fullscreen {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  gap: 0.5rem !important;
}

#chat-root .chat-block-draft.is-prototype-fullscreen .chat-prototype-preview-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  position: relative !important;
  overflow: hidden !important;
}

#chat-root .chat-block-draft.is-prototype-fullscreen .chat-prototype-workbench-rail {
  display: none !important;
}

#chat-root .chat-block-draft.is-prototype-fullscreen .chat-prototype-ai-edit {
  padding: 0.5rem !important;
  gap: 0.42rem !important;
}

#chat-root .chat-block-draft--existing-html .chat-prototype-structure-actions,
#chat-root .chat-block-draft--existing-html .chat-prototype-text-fields {
  display: none !important;
}

#chat-root .chat-block-draft--existing-html .chat-prototype-ai-edit {
  background: color-mix(in srgb, var(--custom-bg) 92%, #002f38 8%) !important;
  border-color: color-mix(in srgb, var(--pf-chat-neon) 48%, transparent) !important;
  padding: 0.58rem !important;
}

#chat-root .chat-prototype-ai-edit-head > div {
  display: grid !important;
  gap: 0.12rem !important;
  min-width: 0 !important;
}

#chat-root .chat-block-draft.is-inspector-mode .chat-prototype-preview-grid {
  outline: 1px solid color-mix(in srgb, var(--pf-chat-neon) 52%, transparent) !important;
  outline-offset: 3px !important;
}

#chat-root .chat-block-draft.is-prototype-fullscreen .chat-prototype-text-fields:not([open]) {
  display: none !important;
}

#chat-root .chat-block-draft.is-prototype-fullscreen .chat-block-draft-hint {
  margin-top: 0 !important;
}

#chat-root .chat-prototype-device--phone .chat-block-draft-frame {
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 760px) {
  #chat-root .chat-prototype-inspector-actions {
    grid-template-columns: repeat(3, auto) !important;
  }

  #chat-root .chat-prototype-inspector-image-picker {
    grid-column: 1 / -1 !important;
  }

  body.is-chat-home .chat-top-hire,
  .chat-top-hire {
    right: calc(max(0.55rem, env(safe-area-inset-right)) + 102px) !important;
    min-width: 5.7rem !important;
  }
}

/* Visual / Code toggle + syntax-highlighted source editor */
#chat-root .chat-prototype-mode-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
  width: fit-content !important;
  padding: 0.22rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 42%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-bg) 84%, #001f26 16%) !important;
}

#chat-root .chat-prototype-mode-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 4.6rem !important;
  min-height: 1.75rem !important;
  padding: 0 0.72rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--custom-copy) 72%, transparent) !important;
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease !important;
}

#chat-root .chat-prototype-mode-tab:hover {
  color: var(--custom-copy) !important;
}

#chat-root .chat-prototype-mode-tab.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-chat-neon) 88%, #fff 12%), color-mix(in srgb, var(--pf-chat-neon) 72%, #003544 28%)) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 54%, transparent), 0 0 14px rgba(0, 210, 255, 0.18) !important;
}

#chat-root .chat-prototype-visual-pane:not(.hidden) {
  display: grid !important;
  gap: 0.72rem !important;
}

#chat-root .chat-prototype-visual-pane.hidden,
#chat-root .chat-prototype-code-pane.hidden {
  display: none !important;
}

#chat-root .chat-prototype-code-pane:not(.hidden) {
  display: grid !important;
  grid-template-rows: auto minmax(0, 0.68fr) minmax(0, 1.32fr) !important;
  gap: 0.55rem !important;
  min-height: 0 !important;
}

#chat-root .chat-prototype-code-pane--layout-only:not(.hidden) {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

#chat-root .chat-prototype-code-pane-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 0.34rem 0.42rem 0.12rem !important;
}

#chat-root .chat-prototype-code-pane-head strong {
  color: var(--wb-label, #999) !important;
  font-family: var(--wb-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

#chat-root .chat-prototype-code-pane-head span {
  color: color-mix(in srgb, var(--custom-copy) 62%, transparent) !important;
  font-size: 0.62rem !important;
  line-height: 1.35 !important;
  text-align: right !important;
}

#chat-root .chat-block-draft.is-code-view .chat-prototype-code-pane:not(.hidden) {
  min-height: min(62vh, 720px) !important;
}

#chat-root .chat-code-editor {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  border: 1px solid var(--wb-line, #3a3a3a) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: #1e1e1e !important;
  box-shadow: none !important;
}

#chat-root .chat-code-editor-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.55rem !important;
  padding: 0.42rem 0.62rem !important;
  border-bottom: 1px solid var(--wb-line, #3a3a3a) !important;
  background: var(--wb-head, #111) !important;
  flex: 0 0 auto !important;
}

#chat-root .chat-code-editor-head span {
  color: var(--wb-label, #999) !important;
  font-family: var(--wb-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

#chat-root .chat-code-editor-head small {
  color: #8b949e !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

#chat-root .chat-code-editor-body {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

#chat-root .chat-code-editor-body.has-line-numbers {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: stretch !important;
}

#chat-root .chat-code-editor-stack {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#chat-root .chat-code-highlight {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0.85rem 0.85rem 0.85rem 0.72rem !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  white-space: pre !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  tab-size: 2 !important;
  background: #1e1e1e !important;
}

#chat-root .chat-code-highlight code {
  display: block !important;
  min-height: 100% !important;
  white-space: pre !important;
  font: inherit !important;
}

#chat-root .chat-code-line-numbers {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0.85rem 0.55rem 0.85rem 0.72rem !important;
  border: 0 !important;
  border-right: 1px solid var(--wb-line, #3a3a3a) !important;
  background: #262626 !important;
  color: #777777 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  user-select: none !important;
  overflow: hidden !important;
  white-space: pre !important;
  min-width: 2.35rem !important;
}

#chat-root textarea[data-block-html],
#chat-root textarea[data-block-css] {
  box-sizing: border-box !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 10rem !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0.85rem 0.85rem 0.85rem 0.72rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  resize: vertical !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  tab-size: 2 !important;
  white-space: pre !important;
  overflow: auto !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  caret-color: #58a6ff !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  outline: none !important;
}

#chat-root .chat-code-editor-body.has-line-numbers:not(.is-editing) textarea[data-block-html],
#chat-root .chat-code-editor-body.has-line-numbers:not(.is-editing) textarea[data-block-css],
#chat-root .chat-code-editor-body.has-line-numbers.is-editing textarea[data-block-html],
#chat-root .chat-code-editor-body.has-line-numbers.is-editing textarea[data-block-css] {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: transparent !important;
}

#chat-root .chat-code-editor-body.is-editing .chat-code-highlight {
  visibility: visible !important;
}

#chat-root textarea[data-block-html] {
  min-height: 12rem !important;
}

#chat-root textarea[data-block-css] {
  min-height: 7.5rem !important;
}

#chat-root .chat-code-editor--css textarea[data-block-css] {
  min-height: 6.5rem !important;
}

#chat-root .chat-code-editor--html textarea[data-block-html] {
  min-height: 14rem !important;
}

#chat-root textarea[data-block-html]:focus,
#chat-root textarea[data-block-css]:focus,
#chat-root textarea[data-block-html]:focus-visible,
#chat-root textarea[data-block-css]:focus-visible {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 42%, transparent) !important;
  outline: none !important;
}

#chat-root textarea[data-block-html]::selection,
#chat-root textarea[data-block-css]::selection {
  background: rgba(88, 166, 255, 0.26) !important;
  color: transparent !important;
}

#chat-root .chat-code-editor .tok-tag {
  color: #7ee787 !important;
}

#chat-root .chat-code-editor .tok-attr {
  color: #79c0ff !important;
}

#chat-root .chat-code-editor .tok-string {
  color: #a5d6ff !important;
}

#chat-root .chat-code-editor .tok-comment {
  color: #8b949e !important;
  font-style: italic !important;
}

#chat-root .chat-code-editor .tok-punct {
  color: #c9d1d9 !important;
}

#chat-root .chat-code-editor .tok-number {
  color: #ffa657 !important;
}

#chat-root .chat-block-draft--existing-html .chat-block-draft-code {
  display: none !important;
}

#chat-root .chat-code-raw-toggle {
  display: grid !important;
  gap: 0.38rem !important;
  min-height: 0 !important;
  padding: 0.18rem 0.1rem 0 !important;
}

#chat-root .chat-code-raw-toggle summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.34rem !important;
  width: fit-content !important;
  padding: 0.28rem 0.46rem !important;
  border: 1px solid color-mix(in srgb, var(--wb-line, #3a3a3a) 82%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-bg) 82%, var(--custom-panel) 18%) !important;
  color: color-mix(in srgb, var(--custom-copy) 78%, transparent) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  list-style: none !important;
}

#chat-root .chat-code-raw-toggle summary::-webkit-details-marker {
  display: none !important;
}

#chat-root .chat-code-raw-toggle summary::before {
  content: "" !important;
  width: 0.72rem !important;
  height: 0.72rem !important;
  background: currentColor !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  transition: transform 120ms ease !important;
}

#chat-root .chat-code-raw-toggle[open] summary::before {
  transform: rotate(180deg) !important;
}

#chat-root .chat-code-raw-toggle .chat-code-editor--html {
  min-height: min(38vh, 24rem) !important;
}

@media (max-width: 760px) {
  #chat-root .chat-prototype-mode-toggle {
    width: 100% !important;
    justify-content: center !important;
  }

  #chat-root .chat-prototype-mode-tab {
    flex: 1 1 0 !important;
  }

  #chat-root .chat-prototype-code-pane:not(.hidden) {
    grid-template-rows: auto minmax(7rem, 0.62fr) minmax(11rem, 1.38fr) !important;
  }

  #chat-root .chat-prototype-code-pane--layout-only:not(.hidden) {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  #chat-root .chat-code-editor-body {
    min-height: 0 !important;
  }

  #chat-root .chat-code-editor--css textarea[data-block-css] {
    min-height: 6rem !important;
  }

  #chat-root .chat-code-editor--html textarea[data-block-html] {
    min-height: 10rem !important;
  }
}

/* Block draft fullscreen — true viewport studio */
body.is-block-draft-fullscreen {
  overflow: hidden !important;
}

body.is-block-draft-fullscreen .chat-compose,
body.is-block-draft-fullscreen .chat-block-current,
body.is-block-draft-fullscreen .main-top,
body.is-block-draft-fullscreen .chat-log,
body.is-block-draft-fullscreen .chat-turn:not(:has(.chat-media--block-draft-fullscreen)) {
  display: none !important;
}

body.is-block-draft-fullscreen .chat-shell,
body.is-block-draft-fullscreen .chat-body,
body.is-block-draft-fullscreen .chat-layout,
body.is-block-draft-fullscreen .chat-main {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.chat-media.chat-media--block-draft-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: #060809 !important;
}

.chat-media.chat-media--block-draft-fullscreen > .chat-block-draft {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  /* Tight: no big gap between top bar and page canvas */
  gap: 0 !important;
  padding: 0 !important;
  border-color: var(--pf-chat-neon) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 42%, transparent), 0 28px 120px rgba(0, 0, 0, 0.72) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail {
  flex: 0 0 auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 40 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail {
  display: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-visual-pane:not(.hidden) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-visual-pane.hidden,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-code-pane.hidden {
  display: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-code-pane:not(.hidden) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  overflow: auto !important;
  max-height: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-inspect-hint {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(0.55rem, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  font-size: 0.54rem !important;
  padding: 0.28rem 0.55rem !important;
  min-height: 0 !important;
  width: auto !important;
  border-radius: 999px !important;
  border-bottom: 1px solid #3a3a3a !important;
  pointer-events: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device.is-active {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device:not(.is-active) {
  display: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell {
  height: 100% !important;
  min-height: 0 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-inspector {
  position: absolute !important;
  inset: 0 !important;
  flex: none !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: 8 !important;
  pointer-events: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock:not(.is-anchor-selection) {
  left: max(0.65rem, env(safe-area-inset-left)) !important;
  right: auto !important;
  top: auto !important;
  bottom: max(0.65rem, env(safe-area-inset-bottom)) !important;
  width: min(20rem, calc(100% - 1.3rem)) !important;
  max-width: min(20rem, 42vw) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock.is-anchor-selection {
  bottom: auto !important;
  right: auto !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock.is-drawer-open {
  width: min(22rem, calc(100% - 1.3rem)) !important;
  max-width: min(22rem, 46vw) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-drawer {
  max-height: min(24vh, 200px) !important;
  overflow: auto !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-queue-chip {
  right: max(0.65rem, env(safe-area-inset-right)) !important;
  bottom: max(0.65rem, env(safe-area-inset-bottom)) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.has-trait-selection .chat-prototype-trait-queue-chip:not(.hidden) {
  bottom: max(4.2rem, calc(0.65rem + env(safe-area-inset-bottom))) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-queue-popover {
  right: max(0.65rem, env(safe-area-inset-right)) !important;
  bottom: max(6.5rem, calc(0.65rem + env(safe-area-inset-bottom))) !important;
  max-height: min(28vh, 220px) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-block-draft-hint {
  display: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail .chat-prototype-image-choice span {
  display: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail .chat-prototype-image-choice {
  grid-template-rows: 2.35rem !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-code-view .chat-prototype-code-pane:not(.hidden) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  max-height: none !important;
}

.chat-prototype-visual-pane.hidden,
.chat-prototype-code-pane.hidden {
  display: none !important;
}

.chat-prototype-visual-pane:not(.hidden) {
  display: grid !important;
}

.chat-prototype-code-pane:not(.hidden) {
  display: grid !important;
}

/* Pro SEO checklist tool card. */
#chat-root .chat-seo-card {
  width: min(980px, calc(100vw - 2.25rem)) !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 42%, #303030 58%) !important;
  border-radius: 8px !important;
  background: #101415 !important;
  color: var(--custom-copy) !important;
  overflow: hidden !important;
}

#chat-root .chat-seo-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 0.9rem 1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#chat-root .chat-seo-head > div:first-child {
  display: grid !important;
  gap: 0.16rem !important;
}

#chat-root .chat-seo-head strong {
  font-size: 1.08rem !important;
  line-height: 1.1 !important;
}

#chat-root .chat-seo-head small,
#chat-root .chat-seo-check small,
#chat-root .chat-seo-missing small {
  color: var(--custom-muted) !important;
}

#chat-root .chat-seo-score {
  display: grid !important;
  place-items: center !important;
  min-width: 5.25rem !important;
  min-height: 4rem !important;
  border: 1px solid rgba(0, 207, 255, 0.38) !important;
  border-radius: 8px !important;
  background: #061f26 !important;
}

#chat-root .chat-seo-score strong {
  color: var(--pf-chat-neon) !important;
  font-size: 1.45rem !important;
}

#chat-root .chat-seo-score span {
  color: var(--custom-muted) !important;
  font-size: 0.65rem !important;
  font-weight: 750 !important;
}

#chat-root .chat-seo-summary {
  display: flex !important;
  gap: 0.45rem !important;
  flex-wrap: wrap !important;
  padding: 0.7rem 1rem 0 !important;
}

#chat-root .chat-seo-summary span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  padding: 0.28rem 0.55rem !important;
  background: #090b0c !important;
  color: var(--custom-muted) !important;
  font-size: 0.68rem !important;
}

#chat-root .chat-seo-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.72rem !important;
  padding: 0.9rem 1rem !important;
}

#chat-root .chat-seo-category {
  display: grid !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
}

#chat-root .chat-seo-category h3,
#chat-root .chat-seo-missing h3 {
  margin: 0 !important;
  color: #f1fdff !important;
  font-size: 0.74rem !important;
  font-weight: 850 !important;
}

#chat-root .chat-seo-checks {
  display: grid !important;
  gap: 0.34rem !important;
}

#chat-root .chat-seo-check {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.48rem !important;
  min-height: 2.85rem !important;
  padding: 0.46rem 0.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 7px !important;
  background: #080a0b !important;
}

#chat-root .chat-seo-check strong {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #f5f8f8 !important;
  font-size: 0.74rem !important;
}

#chat-root .chat-seo-check em {
  color: var(--custom-muted) !important;
  font-size: 0.56rem !important;
  font-style: normal !important;
  text-transform: uppercase !important;
}

#chat-root .chat-seo-pill {
  min-width: 3.2rem !important;
  border-radius: 999px !important;
  padding: 0.22rem 0.42rem !important;
  text-align: center !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
}

#chat-root .chat-seo-check--ok .chat-seo-pill {
  background: rgba(78, 215, 148, 0.18) !important;
  color: #7bf0b3 !important;
}

#chat-root .chat-seo-check--watch .chat-seo-pill {
  background: rgba(255, 204, 92, 0.16) !important;
  color: #ffd37c !important;
}

#chat-root .chat-seo-check--missing .chat-seo-pill {
  background: rgba(255, 94, 117, 0.16) !important;
  color: #ff8a9a !important;
}

#chat-root .chat-seo-missing {
  display: grid !important;
  gap: 0.48rem !important;
  padding: 0 1rem 0.9rem !important;
}

#chat-root .chat-seo-missing > div {
  display: flex !important;
  gap: 0.35rem !important;
  flex-wrap: wrap !important;
}

#chat-root .chat-seo-missing span {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  padding: 0.28rem 0.55rem !important;
  background: #090b0c !important;
  font-size: 0.65rem !important;
}

#chat-root .chat-seo-actions {
  display: flex !important;
  gap: 0.45rem !important;
  flex-wrap: wrap !important;
  padding: 0.8rem 1rem 1rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 760px) {
  #chat-root .chat-seo-head {
    align-items: stretch !important;
  }

  #chat-root .chat-seo-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #chat-root .chat-seo-check {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  #chat-root .chat-seo-check em {
    display: none !important;
  }
}

/* Prototype workbench v15 — PhotoFolio admin chrome vibe, theme-aware */
:root[data-manual-theme="dark"] #chat-root .chat-prototype-workbench {
  --wb-bg: #2d2d2d;
  --wb-panel: #2d2d2d;
  --wb-head: #111111;
  --wb-rail: #262626;
  --wb-line: #3a3a3a;
  --wb-live-chrome: #dfe8ef;
  --wb-glow: rgba(0, 0, 0, 0.12);
  --wb-label: #999999;
  --wb-label-font: "Lato", "Helvetica Neue", Arial, sans-serif;
}

:root:not([data-manual-theme="dark"]) #chat-root .chat-prototype-workbench {
  --wb-bg: #f3f4f5;
  --wb-panel: #ffffff;
  --wb-head: #ededed;
  --wb-rail: #f6f7f8;
  --wb-line: #d7d9db;
  --wb-live-chrome: #eef3f7;
  --wb-glow: rgba(0, 0, 0, 0.1);
  --wb-label: #777777;
  --wb-label-font: "Lato", "Helvetica Neue", Arial, sans-serif;
}

#chat-root .chat-prototype-workbench {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 0.28rem !important;
  padding: 0.32rem !important;
  min-height: min(64vh, 720px) !important;
  border-radius: 6px !important;
  border: 1px solid var(--wb-line) !important;
  background: var(--wb-bg) !important;
  box-shadow: 0 0 25px var(--wb-glow), 0 8px 30px rgba(0, 0, 0, 0.22) !important;
}

#chat-root .chat-prototype-workbench-head {
  --wb-control-h: 1.58rem;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.18rem 0.34rem !important;
  border: 1px solid var(--wb-line) !important;
  border-radius: 5px !important;
  background: var(--wb-head) !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-mode-toggle {
  justify-self: start !important;
  grid-column: 1 !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-workbench-head-center {
  justify-self: center !important;
  grid-column: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.42rem !important;
  min-width: 0 !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-device-tabs {
  justify-self: center !important;
  grid-column: auto !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-view-controls {
  justify-self: end !important;
  grid-column: 3 !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-mode-toggle,
#chat-root .chat-prototype-workbench .chat-prototype-mode-toggle {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  gap: 0 !important;
  height: var(--wb-control-h, 1.75rem) !important;
  margin: 0 !important;
  padding: 0.08rem !important;
  box-sizing: border-box !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-mode-tab,
#chat-root .chat-prototype-workbench .chat-prototype-mode-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.2rem !important;
  min-height: var(--wb-control-h, 1.75rem) !important;
  height: calc(var(--wb-control-h, 1.75rem) - 0.16rem) !important;
  padding: 0 0.34rem !important;
  line-height: 1 !important;
  font-size: 0.48rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-mode-tab.is-active {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 54%, transparent), 0 0 10px rgba(0, 210, 255, 0.14) !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-device-tabs {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  gap: 0 !important;
  width: fit-content !important;
  min-width: 0 !important;
  height: var(--wb-control-h, 1.75rem) !important;
  padding: 0.08rem !important;
  border: 1px solid var(--wb-line, #3a3a3a) !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--wb-bg) 70%, #000 30%) !important;
  box-sizing: border-box !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-device-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-width: 1.46rem !important;
  min-height: calc(var(--wb-control-h, 1.75rem) - 0.16rem) !important;
  height: calc(var(--wb-control-h, 1.75rem) - 0.16rem) !important;
  padding: 0 0.24rem !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--custom-copy) 68%, transparent) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-device-tab.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-chat-neon) 88%, #fff 12%), color-mix(in srgb, var(--pf-chat-neon) 72%, #003544 28%)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 54%, transparent), 0 0 10px rgba(0, 210, 255, 0.16) !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-device-tab .chat-prototype-device-icon {
  width: 0.76rem !important;
  height: 0.58rem !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-view-controls {
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  justify-self: end !important;
  gap: 0.18rem !important;
  height: var(--wb-control-h, 1.75rem) !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-zoom-control {
  min-height: var(--wb-control-h, 1.58rem) !important;
  height: var(--wb-control-h, 1.58rem) !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-view-controls button:not(.chat-prototype-zoom-fit-btn),
#chat-root .chat-prototype-workbench-head .chat-prototype-view-controls span:not([data-prototype-zoom-label]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: var(--wb-control-h, 1.75rem) !important;
  min-height: var(--wb-control-h, 1.75rem) !important;
  height: var(--wb-control-h, 1.75rem) !important;
  padding: 0 0.34rem !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-zoom-fit-btn {
  width: auto !important;
  min-width: 2.1rem !important;
  max-width: none !important;
  min-height: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-view-controls button[data-prototype-fullscreen] {
  display: inline-grid !important;
  place-items: center !important;
  width: var(--wb-control-h, 1.75rem) !important;
  min-width: var(--wb-control-h, 1.75rem) !important;
  max-width: var(--wb-control-h, 1.75rem) !important;
  height: var(--wb-control-h, 1.75rem) !important;
  min-height: var(--wb-control-h, 1.75rem) !important;
  padding: 0 !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-view-controls button[data-prototype-close-workbench] {
  display: inline-grid !important;
  place-items: center !important;
  width: var(--wb-control-h, 1.75rem) !important;
  min-width: var(--wb-control-h, 1.75rem) !important;
  max-width: var(--wb-control-h, 1.75rem) !important;
  height: var(--wb-control-h, 1.75rem) !important;
  min-height: var(--wb-control-h, 1.75rem) !important;
  padding: 0 !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-workbench-apply {
  width: auto !important;
  min-width: 3rem !important;
  max-width: 7rem !important;
  height: var(--wb-control-h, 1.58rem) !important;
  min-height: var(--wb-control-h, 1.58rem) !important;
  padding: 0 0.62rem !important;
  border-radius: 999px !important;
  font-size: 0.58rem !important;
  line-height: 1 !important;
}

#chat-root .chat-prototype-fullscreen-icon {
  display: block !important;
  width: 0.84rem !important;
  height: 0.84rem !important;
  background: currentColor !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root .chat-prototype-fullscreen-btn.is-active .chat-prototype-fullscreen-icon {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 4H4v5M20 9V4h-5M4 15v5h5M15 20h5v-5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 4H4v5M20 9V4h-5M4 15v5h5M15 20h5v-5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root .chat-prototype-close-icon {
  display: block !important;
  width: 0.8rem !important;
  height: 0.8rem !important;
  background: currentColor !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 6.5 17.5 17.5M17.5 6.5 6.5 17.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 6.5 17.5 17.5M17.5 6.5 6.5 17.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root .chat-prototype-workbench-rail {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.34rem !important;
}

#chat-root .chat-prototype-target-store {
  display: none !important;
}

#chat-root .chat-prototype-workbench-rail .chat-prototype-targeting {
  display: grid !important;
  grid-template-columns: minmax(7rem, 0.7fr) minmax(10rem, 1fr) minmax(10rem, 1fr) minmax(9rem, 1fr) !important;
  gap: 0.34rem !important;
  padding: 0.34rem 0.42rem !important;
  border: 1px solid var(--wb-line) !important;
  border-radius: 8px !important;
  background: var(--wb-rail) !important;
  flex: 2 1 24rem !important;
  order: 2 !important;
}

#chat-root .chat-prototype-target-section-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 0.34rem !important;
  min-width: 0 !important;
}

#chat-root .chat-prototype-target-section-field {
  min-width: 0 !important;
}

#chat-root .chat-prototype-workbench-rail .chat-prototype-targeting .hidden {
  display: none !important;
}

#chat-root .chat-prototype-workbench-rail .chat-prototype-library {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  order: 0 !important;
}

#chat-root .chat-prototype-workbench-rail .chat-prototype-library-head {
  margin-bottom: 0.18rem !important;
}

#chat-root .chat-prototype-workbench-rail .chat-prototype-library-head strong {
  color: var(--wb-label, #999) !important;
  font-family: var(--wb-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

#chat-root .chat-prototype-workbench-rail .chat-prototype-image-strip {
  grid-auto-columns: 3.1rem !important;
  gap: 0.32rem !important;
}

#chat-root .chat-prototype-workbench-rail .chat-prototype-image-choice {
  grid-template-rows: 2.55rem !important;
  padding: 0.18rem !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--wb-panel) 88%, var(--pf-chat-neon) 12%) !important;
}

#chat-root .chat-prototype-workbench-rail .chat-prototype-image-choice span {
  display: none !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-targeting select,
#chat-root .chat-prototype-workbench .chat-prototype-targeting input {
  min-height: 1.55rem !important;
  padding: 0.18rem 0.42rem !important;
  border: 1px solid var(--wb-line) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--wb-panel) 90%, var(--custom-bg) 10%) !important;
  color: var(--custom-copy) !important;
  font-size: 0.58rem !important;
  min-width: 0 !important;
  width: 100% !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-visual-pane:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  gap: 0 !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-preview-grid {
  flex: 1 1 auto !important;
  min-height: min(48vh, 560px) !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  grid-template-columns: none !important;
  position: relative !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-device figcaption {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-device.is-active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
  height: 100% !important;
  min-height: 0 !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-live-shell {
  border: 1px solid color-mix(in srgb, var(--wb-line) 82%, var(--pf-chat-neon) 18%) !important;
  border-radius: 8px !important;
  background: var(--wb-live-chrome) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 24px var(--wb-glow) !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-live-stage {
  background: #fff !important;
  color: #111 !important;
}

#chat-root .chat-prototype-workbench .chat-block-draft-hint {
  margin: 0 !important;
  padding: 0.18rem 0.28rem !important;
  color: var(--custom-muted) !important;
  font-size: 0.54rem !important;
  line-height: 1.2 !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-inspect-hint {
  background: color-mix(in srgb, var(--wb-head) 88%, #001018 12%) !important;
  border-color: color-mix(in srgb, var(--pf-chat-neon) 58%, transparent) !important;
  font-size: 0.58rem !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-trait-dock {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 52%, transparent) !important;
  background: color-mix(in srgb, var(--wb-head) 90%, #000 10%) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42), 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 24%, transparent) !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-view-controls button,
#chat-root .chat-prototype-workbench .chat-prototype-view-controls span {
  min-width: 1.5rem !important;
  min-height: 1.5rem !important;
  font-size: 0.54rem !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-device-tab {
  min-height: 1.45rem !important;
  padding: 0.24rem 0.34rem !important;
}

@media (max-width: 760px) {
  #chat-root .chat-prototype-workbench-head {
    grid-template-columns: 1fr !important;
    border-radius: 10px !important;
  }

  #chat-root .chat-prototype-workbench-head .chat-prototype-device-tabs,
  #chat-root .chat-prototype-workbench-head .chat-prototype-view-controls {
    justify-content: center !important;
    justify-self: stretch !important;
  }

  #chat-root .chat-prototype-workbench-rail {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Library picker — search icon + popover */
#chat-root .chat-prototype-library {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#chat-root .chat-prototype-library-picker {
  position: relative !important;
  display: block !important;
  width: fit-content !important;
}

#chat-root .chat-prototype-library-search-btn {
  display: inline-grid !important;
  place-items: center !important;
  width: 1.65rem !important;
  min-width: 1.65rem !important;
  height: 1.65rem !important;
  min-height: 1.65rem !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 34%, transparent) !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--custom-bg) 78%, var(--custom-panel) 22%) !important;
  color: var(--custom-copy) !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 10%, transparent) !important;
}

#chat-root .chat-prototype-library-search-icon {
  width: 0.92rem !important;
  height: 0.92rem !important;
  color: var(--pf-chat-neon) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.85 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#chat-root .chat-prototype-library-search-btn.is-active,
#chat-root .chat-prototype-library-search-btn:hover {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 58%, transparent) !important;
  background: color-mix(in srgb, var(--custom-panel) 76%, var(--pf-chat-neon) 12%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 18%, transparent) !important;
}

#chat-root .chat-prototype-library-search-btn.has-selection {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 42%, transparent) !important;
}

#chat-root .chat-prototype-library-popover {
  position: absolute !important;
  top: calc(100% + 0.34rem) !important;
  left: 0 !important;
  z-index: 24 !important;
  display: grid !important;
  gap: 0.28rem !important;
  width: min(22rem, calc(100vw - 2rem)) !important;
  padding: 0.28rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 28%, var(--custom-copy) 8%) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--custom-bg) 90%, var(--custom-panel) 10%) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

#chat-root .chat-prototype-library-popover.hidden {
  display: none !important;
}

#chat-root .chat-prototype-library-form.chat-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
  gap: 0.28rem !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0.3rem 0.34rem !important;
  border-radius: 6px !important;
}

#chat-root .chat-prototype-library-form input[data-prototype-library-search],
#chat-root .chat-prototype-inspector-image-form input[data-prototype-inspector-image-search] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  display: block !important;
  width: 100% !important;
  min-height: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 0.28rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--custom-copy) !important;
  caret-color: var(--pf-chat-neon) !important;
  font: inherit !important;
  font-size: 0.82rem !important;
  line-height: 28px !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#chat-root .chat-prototype-library-form input[data-prototype-library-search]::-webkit-search-cancel-button,
#chat-root .chat-prototype-library-form input[data-prototype-library-search]::-webkit-search-decoration,
#chat-root .chat-prototype-inspector-image-form input[data-prototype-inspector-image-search]::-webkit-search-cancel-button,
#chat-root .chat-prototype-inspector-image-form input[data-prototype-inspector-image-search]::-webkit-search-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
}

#chat-root .chat-prototype-library-form input[data-prototype-library-search]::placeholder,
#chat-root .chat-prototype-inspector-image-form input[data-prototype-inspector-image-search]::placeholder {
  color: color-mix(in srgb, var(--custom-muted) 82%, var(--pf-chat-neon) 18%) !important;
}

#chat-root .chat-prototype-library-form input[data-prototype-library-search]:focus,
#chat-root .chat-prototype-library-form input[data-prototype-library-search]:focus-visible,
#chat-root .chat-prototype-inspector-image-form input[data-prototype-inspector-image-search]:focus,
#chat-root .chat-prototype-inspector-image-form input[data-prototype-inspector-image-search]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

#chat-root .chat-prototype-library-form .chat-send-icon {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--pf-chat-neon) !important;
  color: #00161b !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

#chat-root .chat-prototype-library-form .chat-send-icon:hover,
#chat-root .chat-prototype-library-form .chat-send-icon:focus-visible {
  background: color-mix(in srgb, var(--pf-chat-neon) 88%, #ffffff 12%) !important;
  color: #00161b !important;
}

#chat-root .chat-prototype-library-form .chat-send-icon:disabled {
  opacity: 0.55 !important;
  cursor: wait !important;
}

#chat-root .chat-prototype-library-form .chat-send-icon::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  width: 0.74rem !important;
  height: 0.74rem !important;
  margin: 0 !important;
  background: currentColor !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.6 19.4 11h-4.7v9.4H9.3V11H4.6L12 3.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.6 19.4 11h-4.7v9.4H9.3V11H4.6L12 3.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root .chat-prototype-library-form .chat-send-icon::after {
  display: none !important;
}

#chat-root .chat-prototype-library-status {
  margin: 0 !important;
  padding: 0 0.18rem !important;
  color: color-mix(in srgb, var(--pf-chat-neon) 72%, var(--custom-muted) 28%) !important;
  font-size: 0.58rem !important;
  line-height: 1.25 !important;
}

#chat-root .chat-prototype-library-menu {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  z-index: auto !important;
  display: grid !important;
  gap: 0.22rem !important;
  max-height: min(16rem, 42vh) !important;
  overflow: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-library-menu.hidden {
  display: none !important;
}

#chat-root .chat-prototype-inspector-image-picker {
  position: relative !important;
  display: grid !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

#chat-root .chat-prototype-inspector-image-body {
  display: grid !important;
  gap: 0.48rem !important;
  width: 100% !important;
  min-width: 0 !important;
}

#chat-root .chat-prototype-inspector-image-picker.hidden {
  display: none !important;
}

#chat-root .chat-prototype-inspector-image-form {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-inspector-image-shell {
  display: grid !important;
  grid-template-columns: 1.15rem minmax(0, 1fr) 1.65rem !important;
  align-items: center !important;
  gap: 0.34rem !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 2.15rem !important;
  padding: 0 0.34rem 0 0.52rem !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 78%, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--custom-bg, #111) 82%, var(--custom-panel, #222) 18%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#chat-root .chat-prototype-inspector-image-search-icon {
  width: 0.82rem !important;
  height: 0.82rem !important;
  color: color-mix(in srgb, var(--pf-chat-neon) 72%, var(--custom-muted, #8a8a8a) 28%) !important;
  opacity: 0.92 !important;
  background: currentColor !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M16.5 16.5 20 20' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M16.5 16.5 20 20' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root .chat-prototype-inspector-image-form input[data-prototype-inspector-image-search] {
  width: 100% !important;
  min-width: 0 !important;
  height: 1.35rem !important;
  min-height: 1.35rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--custom-copy, #e8e8e8) !important;
  caret-color: var(--pf-chat-neon) !important;
  font: 500 0.72rem/1.35rem var(--dx-body-font, "Inter", "Helvetica Neue", Arial, sans-serif) !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#chat-root .chat-prototype-inspector-image-form input[data-prototype-inspector-image-search]::placeholder {
  color: color-mix(in srgb, var(--custom-muted, #8a8a8a) 88%, transparent) !important;
}

#chat-root .chat-prototype-inspector-image-form input[data-prototype-inspector-image-search]::-webkit-search-cancel-button,
#chat-root .chat-prototype-inspector-image-form input[data-prototype-inspector-image-search]::-webkit-search-decoration {
  display: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#chat-root .chat-prototype-inspector-image-search-btn {
  display: inline-grid !important;
  place-items: center !important;
  width: 1.65rem !important;
  min-width: 1.65rem !important;
  height: 1.65rem !important;
  min-height: 1.65rem !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 28%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 12%, transparent) !important;
  color: var(--pf-chat-neon) !important;
  cursor: pointer !important;
}

#chat-root .chat-prototype-inspector-image-search-btn svg {
  width: 0.78rem !important;
  height: 0.78rem !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
}

#chat-root .chat-prototype-inspector-image-search-btn:hover,
#chat-root .chat-prototype-inspector-image-search-btn:focus-visible {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 52%, transparent) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 20%, transparent) !important;
  outline: none !important;
}

#chat-root .chat-prototype-inspector-image-search-btn:disabled {
  opacity: 0.5 !important;
  cursor: wait !important;
}

#chat-root .chat-prototype-inspector-image-upload {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.42rem !important;
  width: 100% !important;
  min-height: 2rem !important;
  padding: 0.42rem 0.72rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 24%, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--custom-panel, #222) 88%, var(--pf-chat-neon) 12%) !important;
  color: color-mix(in srgb, var(--custom-copy, #e8e8e8) 88%, var(--pf-chat-neon) 12%) !important;
  cursor: pointer !important;
  font: 700 0.64rem/1 var(--dx-body-font, "Inter", "Helvetica Neue", Arial, sans-serif) !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
}

#chat-root .chat-prototype-inspector-image-upload svg {
  width: 0.88rem !important;
  height: 0.88rem !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.85 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#chat-root .chat-prototype-inspector-image-upload:hover,
#chat-root .chat-prototype-inspector-image-upload:focus-visible {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 48%, transparent) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 16%, var(--custom-panel, #222) 84%) !important;
  color: #f5fbff !important;
  outline: none !important;
}

#chat-root .chat-prototype-inspector-image-upload:disabled {
  opacity: 0.55 !important;
  cursor: wait !important;
}

#chat-root .chat-prototype-inspector-image-hint,
#chat-root .chat-prototype-inspector-image-status {
  margin: 0 !important;
  padding: 0 0.12rem !important;
  color: color-mix(in srgb, var(--custom-muted, #8a8a8a) 88%, var(--pf-chat-neon) 12%) !important;
  font-size: 0.58rem !important;
  line-height: 1.35 !important;
}

#chat-root .chat-prototype-inspector-image-hint.hidden,
#chat-root .chat-prototype-inspector-image-status.hidden {
  display: none !important;
}

#chat-root .chat-prototype-inspector-image-status {
  color: color-mix(in srgb, var(--pf-chat-neon) 72%, var(--custom-muted) 28%) !important;
}

#chat-root .chat-prototype-inspector-image-menu {
  display: grid !important;
  gap: 0.24rem !important;
  max-height: min(11rem, 32vh) !important;
  overflow: auto !important;
  padding: 0.34rem 0.18rem 0.18rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 16%, rgba(255, 255, 255, 0.06)) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--custom-bg, #111) 90%, var(--custom-panel, #222) 10%) !important;
}

#chat-root .chat-prototype-inspector-image-menu.hidden {
  display: none !important;
}

#chat-root .chat-prototype-inspector-image-menu .chat-prototype-library-empty {
  margin: 0 !important;
  padding: 0.42rem 0.52rem !important;
  color: var(--custom-muted) !important;
  font-size: 0.58rem !important;
  line-height: 1.35 !important;
}

#chat-root .chat-prototype-trait-drawer .chat-prototype-inspector-actions {
  display: block !important;
  width: 100% !important;
}

#chat-root .chat-prototype-library-option {
  display: grid !important;
  grid-template-columns: 2.6rem minmax(0, 1fr) !important;
  gap: 0.42rem !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0.28rem 0.34rem !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--custom-copy) !important;
  cursor: pointer !important;
  text-align: left !important;
}

#chat-root .chat-prototype-library-option:hover,
#chat-root .chat-prototype-library-option.is-selected {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 48%, transparent) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 10%, var(--custom-panel) 90%) !important;
}

#chat-root .chat-prototype-library-option img {
  width: 2.6rem !important;
  height: 2.6rem !important;
  border-radius: 4px !important;
  object-fit: cover !important;
  display: block !important;
  background: color-mix(in srgb, var(--custom-panel) 82%, #000 18%) !important;
}

#chat-root .chat-prototype-library-option-copy {
  display: grid !important;
  gap: 0.12rem !important;
  min-width: 0 !important;
}

#chat-root .chat-prototype-library-option-copy strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.6rem !important;
  line-height: 1.15 !important;
}

#chat-root .chat-prototype-library-option-copy small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--custom-muted) !important;
  font-size: 0.52rem !important;
  line-height: 1.15 !important;
}

#chat-root .chat-prototype-library-empty,
#chat-root .chat-prototype-library-status {
  margin: 0 !important;
  color: var(--custom-muted) !important;
  font-size: 0.54rem !important;
  line-height: 1.25 !important;
}

#chat-root .chat-prototype-library-status {
  color: color-mix(in srgb, var(--pf-chat-neon) 72%, var(--custom-muted) 28%) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-library-menu {
  max-height: min(18rem, 36vh) !important;
}

#chat-root .chat-prototype-text-page {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

#chat-root .chat-prototype-text-page.hidden {
  display: none !important;
}

#chat-root .chat-prototype-text-page-dropdown {
  position: relative !important;
  width: fit-content !important;
  max-width: 100% !important;
}

#chat-root .chat-prototype-text-page-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.3rem !important;
  width: auto !important;
  min-height: 1.65rem !important;
  padding: 0.18rem 0.42rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 34%, transparent) !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--custom-bg) 78%, var(--custom-panel) 22%) !important;
  color: var(--custom-copy) !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 10%, transparent) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

#chat-root .chat-prototype-text-page-icon,
#chat-root .chat-prototype-text-page-chevron {
  width: 0.82rem !important;
  height: 0.82rem !important;
  fill: currentColor !important;
  flex: 0 0 auto !important;
}

#chat-root .chat-prototype-text-page-icon {
  color: var(--pf-chat-neon) !important;
}

#chat-root .chat-prototype-text-page-chevron {
  color: var(--dx-muted) !important;
  opacity: 0.9 !important;
  transition: transform 0.16s ease !important;
}

#chat-root .chat-prototype-text-page-toggle.is-active .chat-prototype-text-page-chevron {
  transform: rotate(180deg) !important;
}

#chat-root .chat-prototype-text-page.is-open .chat-prototype-text-page-toggle,
#chat-root .chat-prototype-text-page-toggle.is-active,
#chat-root .chat-prototype-text-page-toggle:hover {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 58%, transparent) !important;
  color: var(--custom-copy) !important;
  background: color-mix(in srgb, var(--custom-panel) 76%, var(--pf-chat-neon) 12%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 18%, transparent) !important;
}

#chat-root .chat-prototype-text-page-toggle.is-active {
  background: color-mix(in srgb, var(--custom-panel) 76%, var(--pf-chat-neon) 14%) !important;
}

#chat-root .chat-prototype-text-page-panel {
  position: absolute !important;
  top: calc(100% + 0.34rem) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 24 !important;
  display: grid !important;
  gap: 0.26rem !important;
  width: min(29rem, calc(100vw - 2rem)) !important;
  padding: 0.46rem !important;
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 4px !important;
  background: #1f252c !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform-origin: top right !important;
}

#chat-root .chat-prototype-text-page-dropdown,
#chat-root .chat-prototype-text-page-panel {
  pointer-events: auto !important;
}

#chat-root .chat-prototype-text-page-panel.hidden {
  display: none !important;
}

#chat-root .chat-prototype-text-page-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.28rem 0.52rem !important;
  min-height: 0 !important;
  padding: 0.34rem 0.4rem !important;
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 3px !important;
  background: #2d2d2d !important;
}

#chat-root .chat-prototype-text-page-source {
  margin: 0 !important;
  min-width: 0 !important;
  color: #a5adb6 !important;
  font-family: var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  text-transform: lowercase !important;
}

#chat-root .chat-prototype-text-page-field-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.2rem !important;
  min-width: 0 !important;
  color: #ffffff !important;
  font-family: var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  text-align: right !important;
}

#chat-root .chat-prototype-text-page-source-badge {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 0.8rem !important;
  padding: 0 0.22rem !important;
  border-radius: 2px !important;
  border: 1px solid rgba(0, 207, 255, 0.28) !important;
  background: rgba(0, 207, 255, 0.1) !important;
  color: color-mix(in srgb, var(--pf-chat-neon) 76%, #ffffff 24%) !important;
  font-size: 0.44rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

#chat-root .chat-prototype-text-page-source-badge[data-text-page-source][data-text-page-source=""],
#chat-root .chat-prototype-text-page-source-badge:empty {
  display: none !important;
}

#chat-root .chat-prototype-text-page-scope,
#chat-root .chat-prototype-text-page-field {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 0.08rem !important;
  align-items: stretch !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#chat-root .chat-prototype-text-page-field--compact {
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 0.38rem !important;
  min-height: 1.25rem !important;
}

#chat-root .chat-prototype-text-page-field--compact .chat-prototype-text-page-field-label {
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

#chat-root .chat-prototype-text-page-field--mini .chat-prototype-text-page-field-label {
  min-width: 0.72rem !important;
}

#chat-root .chat-prototype-text-page-field--margin .chat-prototype-text-page-field-label {
  min-width: 0.72rem !important;
  justify-content: center !important;
}

#chat-root .chat-prototype-text-page-field--margin .chat-prototype-text-page-source-badge {
  display: none !important;
}

#chat-root .chat-prototype-text-page-meta .chat-prototype-text-page-scope {
  flex: 0 0 auto !important;
  grid-template-columns: auto minmax(8.6rem, 9.8rem) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 0.46rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

#chat-root .chat-prototype-text-page-scope {
  margin: 0 !important;
}

#chat-root .chat-prototype-text-page-scope select,
#chat-root .chat-prototype-text-page-field select,
#chat-root .chat-prototype-text-page-field input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 1.68rem !important;
  height: 1.68rem !important;
  padding: 0 1.3rem 0 0.44rem !important;
  border: 1px solid #454545 !important;
  border-radius: 3px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    #222b34 !important;
  color: #d5dbe2 !important;
  font-family: var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M1.2 1.4 6 6.2l4.8-4.8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 0 0, calc(100% - 0.46rem) 50% !important;
  background-size: auto, 0.55rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  cursor: pointer !important;
}

#chat-root .chat-prototype-text-page-field input[type="text"] {
  padding-right: 0.52rem !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)) !important;
  cursor: text !important;
}

#chat-root .chat-prototype-text-page-field input[type="color"] {
  width: 2.15rem !important;
  min-width: 2.15rem !important;
  min-height: 1.68rem !important;
  height: 1.68rem !important;
  padding: 0.12rem !important;
  border: 1px solid #454545 !important;
  border-radius: 3px !important;
  background: #222b34 !important;
  cursor: pointer !important;
}

#chat-root .chat-prototype-text-page-scope select:focus,
#chat-root .chat-prototype-text-page-field select:focus,
#chat-root .chat-prototype-text-page-field input:focus {
  outline: none !important;
  border-color: var(--dx-toggle, #0099ff) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dx-toggle, #0099ff) 42%, transparent) !important;
}

#chat-root .chat-prototype-text-page-fields {
  display: grid !important;
  gap: 0.26rem !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

#chat-root .chat-prototype-text-page-layout {
  display: grid !important;
  gap: 0.26rem !important;
}

#chat-root .chat-prototype-text-page-row {
  display: grid !important;
  align-items: center !important;
  gap: 0.42rem !important;
  padding: 0.38rem 0.4rem !important;
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 3px !important;
  background: #333333 !important;
}

#chat-root .chat-prototype-text-page-row--margins {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#chat-root .chat-prototype-text-page-row--settings {
  grid-template-columns: minmax(7.2rem, 1.1fr) minmax(6.2rem, 0.95fr) minmax(4.8rem, 0.72fr) minmax(7.2rem, 0.95fr) !important;
}

#chat-root .chat-prototype-text-page-row--colors {
  grid-template-columns: minmax(4.4rem, 0.7fr) minmax(4.4rem, 0.7fr) minmax(0, 1.4fr) !important;
}

#chat-root .chat-prototype-text-page-row--font {
  grid-template-columns: minmax(0, 1fr) !important;
}

#chat-root .chat-prototype-text-page-field--width .chat-prototype-text-page-field-label {
  min-width: 2.9rem !important;
}

#chat-root .chat-prototype-text-page-field--height .chat-prototype-text-page-field-label {
  min-width: 2.9rem !important;
}

#chat-root .chat-prototype-text-page-field--size .chat-prototype-text-page-field-label {
  min-width: 2.4rem !important;
}

#chat-root .chat-prototype-text-page-field--color .chat-prototype-text-page-field-label,
#chat-root .chat-prototype-text-page-field--bg .chat-prototype-text-page-field-label {
  min-width: 3rem !important;
}

#chat-root .chat-prototype-text-page-field--scroll .chat-prototype-text-page-field-label {
  min-width: 3.1rem !important;
}

#chat-root .chat-prototype-text-page-field--font .chat-prototype-text-page-field-label {
  min-width: 2.9rem !important;
}

@media (max-width: 980px) {
  #chat-root .chat-seo-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #chat-root .chat-prototype-text-page-panel {
    width: min(27rem, calc(100vw - 1rem)) !important;
  }

  #chat-root .chat-prototype-text-page-row--margins {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #chat-root .chat-prototype-text-page-row--settings {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #chat-root .chat-seo-card {
    padding: 0.62rem !important;
    gap: 0.58rem !important;
  }

  #chat-root .chat-seo-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #chat-root .chat-seo-score {
    text-align: left !important;
    justify-self: start !important;
  }

  #chat-root .chat-seo-compose,
  #chat-root .chat-seo-category,
  #chat-root .chat-seo-missing,
  #chat-root .chat-seo-quick-actions {
    padding: 0.54rem !important;
  }

  #chat-root .chat-seo-check {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  #chat-root .chat-seo-check > em {
    grid-column: 2 !important;
  }

  #chat-root .chat-prototype-text-page-panel {
    width: min(100vw - 0.8rem, 23rem) !important;
    padding: 0.38rem !important;
  }

  #chat-root .chat-prototype-text-page-meta {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start !important;
  }

  #chat-root .chat-prototype-text-page-meta .chat-prototype-text-page-scope,
  #chat-root .chat-prototype-text-page-row--margins,
  #chat-root .chat-prototype-text-page-row--settings {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #chat-root .chat-prototype-text-page-field--compact {
    grid-template-columns: minmax(3.1rem, auto) minmax(0, 1fr) !important;
  }
}

#chat-root .chat-prototype-workbench-rail .chat-prototype-text-page {
  margin-top: 0 !important;
  flex: 0 0 auto !important;
  order: 1 !important;
}

#chat-root .chat-prototype-workbench-rail .chat-prototype-draft-actions {
  flex: 1 1 auto !important;
  min-width: min(100%, 12rem) !important;
}

#chat-root .chat-prototype-draft-actions {
  display: grid !important;
  gap: 0.28rem !important;
  padding: 0.32rem 0.42rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: rgba(8, 12, 14, 0.72) !important;
  backdrop-filter: blur(10px) !important;
}

#chat-root .chat-prototype-draft-actions-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.28rem !important;
  flex-wrap: wrap !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.65rem !important;
  min-width: 1.65rem !important;
  height: 1.65rem !important;
  min-height: 1.65rem !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 34%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--custom-bg) 82%, var(--custom-panel) 18%) !important;
  color: var(--custom-copy) !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool svg {
  display: block !important;
  width: 0.82rem !important;
  height: 0.82rem !important;
  fill: currentColor !important;
  pointer-events: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool:focus-visible {
  border-color: var(--pf-chat-neon) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 24%, transparent) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool--prepare {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 58%, transparent) !important;
  color: color-mix(in srgb, var(--pf-chat-neon) 88%, #fff 12%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool--discard {
  border-color: var(--dx-line, #3a3a3a) !important;
  color: var(--dx-label, #999999) !important;
  background: var(--dx-elevated, #333333) !important;
}

#chat-root .chat-prototype-draft-actions-meta {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.28rem !important;
  margin: 0 !important;
  min-width: 0 !important;
  color: color-mix(in srgb, var(--custom-muted) 88%, transparent) !important;
  font-size: 0.48rem !important;
  line-height: 1.2 !important;
}

#chat-root .chat-prototype-draft-actions-meta strong {
  color: color-mix(in srgb, var(--custom-copy) 92%, #fff 8%) !important;
  font-size: 0.52rem !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

#chat-root .chat-prototype-draft-actions-meta span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Prototype fullscreen studio v24 — chat-native canvas */
.chat-media.chat-media--block-draft-fullscreen {
  padding: 0 !important;
  background: #060809 !important;
}

.chat-media.chat-media--block-draft-fullscreen > .chat-block-draft {
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #060809 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head {
  --wb-control-h: 1.42rem;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.55rem !important;
  width: 100% !important;
  min-height: 2.15rem !important;
  padding: 0.24rem max(0.72rem, env(safe-area-inset-right)) 0.24rem max(0.72rem, env(safe-area-inset-left)) !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--pf-chat-neon) 18%, #1c242a 82%) !important;
  border-radius: 0 !important;
  background: rgba(8, 12, 14, 0.96) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-mode-toggle {
  justify-self: start !important;
  grid-column: 1 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-workbench-head-center {
  justify-self: center !important;
  grid-column: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-tabs {
  justify-self: center !important;
  grid-column: auto !important;
  margin: 0 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls {
  justify-self: end !important;
  grid-column: 3 !important;
  gap: 0.18rem !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-zoom-control {
  min-height: var(--wb-control-h, 1.42rem) !important;
  height: var(--wb-control-h, 1.42rem) !important;
  padding: 0 0.42rem 0 0.36rem !important;
  border-color: color-mix(in srgb, var(--dx-line, #3a3a3a) 84%, #fff 16%) !important;
  background: color-mix(in srgb, var(--dx-elevated, #333) 58%, #000 42%) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-zoom-fit-btn {
  width: auto !important;
  min-width: 1.95rem !important;
  max-width: none !important;
  min-height: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.56rem !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-zoom-slider {
  width: 3.8rem !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls button:not(.chat-prototype-workbench-apply):not(.chat-prototype-workbench-target):not(.chat-prototype-zoom-fit-btn):not(.chat-prototype-grid-toggle):not(.chat-prototype-grid-autoplace),
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls span:not(.chat-prototype-workbench-apply-label):not(.chat-prototype-workbench-target-label):not(.chat-prototype-grid-scale-label):not([data-prototype-zoom-label]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: var(--wb-control-h, 1.75rem) !important;
  min-height: var(--wb-control-h, 1.75rem) !important;
  height: var(--wb-control-h, 1.75rem) !important;
  padding: 0 0.42rem !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: color-mix(in srgb, var(--custom-copy) 88%, #fff 12%) !important;
  font-size: 0.58rem !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-grid-autoplace {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: calc(var(--wb-control-h, 1.75rem) - 0.28rem) !important;
  height: calc(var(--wb-control-h, 1.75rem) - 0.28rem) !important;
  padding: 0 0.48rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: color-mix(in srgb, var(--custom-copy) 88%, #fff 12%) !important;
  font-size: 0.52rem !important;
  white-space: nowrap !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls button[data-prototype-fullscreen] {
  width: var(--wb-control-h, 1.75rem) !important;
  min-width: var(--wb-control-h, 1.75rem) !important;
  max-width: var(--wb-control-h, 1.75rem) !important;
  min-height: var(--wb-control-h, 1.75rem) !important;
  height: var(--wb-control-h, 1.75rem) !important;
  padding: 0 !important;
  border-color: color-mix(in srgb, var(--pf-chat-neon) 42%, transparent) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 14%, rgba(255, 255, 255, 0.04) 86%) !important;
  color: var(--pf-chat-neon) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-workbench-target {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 4.85rem !important;
  max-width: none !important;
  height: var(--wb-control-h, 1.42rem) !important;
  min-height: var(--wb-control-h, 1.42rem) !important;
  padding: 0 0.68rem !important;
  overflow: visible !important;
  white-space: nowrap !important;
  border-radius: 6px !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 46%, rgba(255, 255, 255, 0.14)) !important;
  background: rgba(18, 24, 30, 0.94) !important;
  color: #e8f6fb !important;
  font-size: 0.64rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-workbench-target.is-needs-target {
  border-style: dashed !important;
  border-color: color-mix(in srgb, var(--pf-chat-neon) 68%, #fff 32%) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 10%, rgba(18, 24, 30, 0.96)) !important;
  color: #fff !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-workbench-target.is-active {
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--pf-chat-neon) 82%, #fff 18%) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 18%, rgba(18, 24, 30, 0.98)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 24%, transparent) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-workbench-target.is-ready {
  border-style: solid !important;
  border-color: color-mix(in srgb, #7fdca8 58%, var(--pf-chat-neon) 42%) !important;
  background: color-mix(in srgb, #7fdca8 8%, rgba(18, 24, 30, 0.96)) !important;
  color: #dff7ea !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-workbench-target-label {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  box-shadow: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-workbench-apply {
  width: auto !important;
  min-width: 3.4rem !important;
  max-width: none !important;
  height: var(--wb-control-h, 1.42rem) !important;
  min-height: var(--wb-control-h, 1.42rem) !important;
  padding: 0 0.72rem !important;
  overflow: visible !important;
  white-space: nowrap !important;
  border-color: color-mix(in srgb, var(--pf-chat-neon) 72%, #ffffff) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pf-chat-neon) 88%, #ffffff 12%),
    color-mix(in srgb, var(--pf-chat-neon) 68%, #003544 32%)
  ) !important;
  color: #fff !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 34%, transparent), 0 6px 14px rgba(0, 207, 255, 0.14) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-workbench-apply.is-needs-target {
  cursor: pointer !important;
  opacity: 0.72 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-workbench-apply.is-wizard-apply {
  min-width: 3.25rem !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-workbench-apply-label,
#design-setup-visual-editor-host .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-workbench-apply-label {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  overflow: visible !important;
  text-overflow: clip !important;
  pointer-events: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-workbench-apply:disabled,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-workbench-apply[aria-disabled="true"]:not(.is-ready):not(.is-needs-target) {
  opacity: 0.48 !important;
  box-shadow: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-workbench-apply.is-needs-target {
  cursor: pointer !important;
  opacity: 0.72 !important;
}

/* Fullscreen toolbar — editor is moved to body, outside #chat-root */
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-mode-toggle {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  gap: 0 !important;
  width: fit-content !important;
  height: var(--wb-control-h, 1.75rem) !important;
  margin: 0 !important;
  padding: 0.12rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 42%, transparent) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-sizing: border-box !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-mode-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.65rem !important;
  min-height: calc(var(--wb-control-h, 1.42rem) - 0.2rem) !important;
  height: calc(var(--wb-control-h, 1.42rem) - 0.2rem) !important;
  padding: 0 0.34rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--custom-copy) 72%, transparent) !important;
  font-family: inherit !important;
  font-size: 0.52rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-mode-tab:hover {
  color: #fff !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-mode-tab.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-chat-neon) 88%, #fff 12%), color-mix(in srgb, var(--pf-chat-neon) 72%, #003544 28%)) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 54%, transparent), 0 0 10px rgba(0, 210, 255, 0.16) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-mode-tab .chat-prototype-mode-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-tabs {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  gap: 0 !important;
  width: fit-content !important;
  height: var(--wb-control-h, 1.75rem) !important;
  padding: 0.12rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 42%, transparent) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-sizing: border-box !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.65rem !important;
  min-height: calc(var(--wb-control-h, 1.75rem) - 0.24rem) !important;
  height: calc(var(--wb-control-h, 1.75rem) - 0.24rem) !important;
  padding: 0 0.34rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--custom-copy) 68%, transparent) !important;
  font-family: inherit !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-tab.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-chat-neon) 88%, #fff 12%), color-mix(in srgb, var(--pf-chat-neon) 72%, #003544 28%)) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 54%, transparent), 0 0 10px rgba(0, 210, 255, 0.16) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-tab .chat-prototype-device-icon {
  position: relative !important;
  display: inline-block !important;
  width: 0.82rem !important;
  height: 0.64rem !important;
  flex: 0 0 auto !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-icon--desktop {
  border: 1.5px solid currentColor !important;
  border-radius: 2px !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-icon--desktop::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -0.28rem !important;
  width: 0.62rem !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: translateX(-50%) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-icon--phone {
  width: 0.58rem !important;
  height: 1rem !important;
  border: 1.5px solid currentColor !important;
  border-radius: 3px !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  height: var(--wb-control-h, 1.75rem) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls button {
  font-family: inherit !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-visual-pane:not(.hidden) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  gap: 0 !important;
  background: #060809 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-code-pane:not(.hidden) {
  padding: 0.85rem 1.1rem 1.1rem !important;
  background: #060809 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #060809 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device {
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device.is-active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--phone.is-active {
  width: min(100%, 390px) !important;
  max-width: 390px !important;
  margin: 0 auto !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell {
  flex: 0 0 auto !important;
  width: calc(100% / var(--prototype-live-zoom, 1)) !important;
  max-width: calc(100% / var(--prototype-live-zoom, 1)) !important;
  min-width: 0 !important;
  height: calc(100% / var(--prototype-live-zoom, 1)) !important;
  min-height: 0 !important;
  transform: scale(var(--prototype-live-zoom, 1)) !important;
  transform-origin: top center !important;
  overflow: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  /* Gutter mat when page-frame simulation is active; otherwise white */
  background: var(--pf-shell-gutter, #ffffff) !important;
  box-shadow: none !important;
}

/* When page settings are simulated, show centered page on the mat */
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell[data-pf-page-frame="1"] {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 0 12px 12px !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

/* Desktop canvas must always be rectangular — never inherit phone/pill rounding */
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop.is-active,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-shell,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-stage,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-shell[data-pf-page-frame="1"],
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-shell[data-pf-page-frame="1"] .chat-prototype-live-stage {
  border-radius: 0 !important;
  clip-path: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-shell[data-pf-page-frame="1"] .chat-prototype-live-stage {
  min-height: 100% !important;
  height: auto !important;
  max-height: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell--phone {
  width: min(390px, calc(100% / var(--prototype-live-zoom, 1))) !important;
  max-width: min(390px, calc(100% / var(--prototype-live-zoom, 1))) !important;
  height: var(--prototype-phone-preview-height, calc(100% / var(--prototype-live-zoom, 1))) !important;
  max-height: none !important;
  margin: 0 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-inspector-mode .chat-prototype-preview-grid {
  outline: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-stage {
  width: 100% !important;
  /* Honor page max-width simulation (defaults to full when unset) */
  max-width: min(100%, var(--pf-page-max-width, 100%)) !important;
  min-height: 100% !important;
  background: var(--pf-page-bg, #ffffff) !important;
  padding: var(--pf-page-pad, 0) !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell[data-pf-page-frame="1"] .chat-prototype-live-stage {
  min-height: 100% !important;
  border-radius: 0 !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 207, 255, 0.22),
    0 12px 32px rgba(0, 0, 0, 0.07) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-inspect-hint {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background: rgba(8, 12, 14, 0.72) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock {
  border-radius: 10px !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(10, 16, 20, 0.9) !important;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(0, 210, 255, 0.1) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock.is-drawer-open {
  max-width: min(24rem, calc(100vw - 1.5rem)) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-drawer {
  max-height: min(32vh, 260px) !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock-bar {
  padding: 0.34rem 0.42rem !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock-meta strong {
  font-size: 0.58rem !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock-tools .chat-trait-tool {
  width: 1.45rem !important;
  min-width: 1.45rem !important;
  height: 1.45rem !important;
  min-height: 1.45rem !important;
  border-radius: 6px !important;
}

/* Block draft — full-bleed chat column width v27 */
body.is-chat-home .chat-root--home .chat-log {
  --chat-block-draft-bleed-x: 1.35rem;
}

body.is-chat-home .chat-root--home .chat-turn--assistant:has(.chat-media--block-draft:not(.hidden)) {
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
}

body.is-chat-home .chat-root--home .chat-turn--assistant:has(.chat-media--block-draft:not(.hidden)) > .chat-media--block-draft {
  width: calc(100% + (2 * var(--chat-block-draft-bleed-x))) !important;
  max-width: none !important;
  margin-inline: calc(-1 * var(--chat-block-draft-bleed-x)) !important;
}

#chat-root .chat-block-draft.chat-prototype-workbench {
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
  padding-inline: clamp(0.55rem, 1.2vw, 0.85rem) !important;
}

/* Chat compose chrome — editor, section map, SEO panels v32 */
:root[data-manual-theme="dark"] #chat-root {
  --chat-chrome-bg: rgba(21, 21, 21, 0.78);
  --chat-chrome-bg-elevated: rgba(28, 28, 28, 0.88);
  --chat-chrome-line: color-mix(in srgb, var(--pf-chat-neon) 42%, rgba(255, 255, 255, 0.08) 58%);
  --chat-chrome-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

:root:not([data-manual-theme="dark"]) #chat-root {
  --chat-chrome-bg: rgba(238, 238, 238, 0.72);
  --chat-chrome-bg-elevated: rgba(246, 246, 246, 0.92);
  --chat-chrome-line: var(--pf-chat-neon);
  --chat-chrome-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

#chat-root .chat-tool-context {
  width: 100% !important;
  max-width: none !important;
}

#chat-root .chat-section-map-card,
#chat-root .chat-seo-card,
#chat-root .chat-block-current,
#chat-root .chat-prototype-workbench {
  border: 1px solid var(--pf-chat-neon) !important;
  border-radius: 6px !important;
  background: var(--chat-chrome-bg) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#chat-root .chat-block-current {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding: 0.45rem 0.55rem !important;
}

#chat-root .chat-prototype-workbench {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  min-height: min(64vh, 720px) !important;
}

#chat-root .chat-prototype-workbench-head {
  gap: 0.28rem !important;
  padding: 0.28rem 0.34rem !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--pf-chat-neon) 28%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-workbench-rail {
  gap: 0.28rem !important;
  padding: 0.32rem 0.34rem !important;
  border-bottom: 1px solid color-mix(in srgb, var(--pf-chat-neon) 18%, transparent) !important;
  background: transparent !important;
}

#chat-root .chat-prototype-library {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-text-page {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-text-page-scope select,
#chat-root .chat-prototype-text-page-field select,
#chat-root .chat-prototype-text-page-field input[type="text"],
#chat-root .chat-prototype-trait-drawer select,
#chat-root .chat-prototype-trait-drawer input[type="text"],
#chat-root .chat-prototype-trait-note input[type="text"]:not([data-prototype-ai-note]) {
  border: 0 !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--chat-chrome-bg-elevated) 88%, #000 12%) !important;
  color: var(--custom-copy) !important;
  font-family: var(--chat-chrome-mono) !important;
  font-size: 0.68rem !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 22%, transparent) !important;
}

#chat-root .chat-prototype-text-page-scope select,
#chat-root .chat-prototype-text-page-field select,
#chat-root .chat-prototype-text-page-field input[type="text"],
#chat-root .chat-prototype-text-page-field input[type="color"] {
  min-height: 1.05rem !important;
  height: 1.05rem !important;
  font-size: 0.48rem !important;
  line-height: 1 !important;
  border-radius: 4px !important;
}

#chat-root .chat-prototype-trait-note input[type="text"]:not([data-prototype-ai-note])::placeholder {
  color: color-mix(in srgb, var(--custom-muted) 88%, transparent) !important;
  font-family: var(--chat-chrome-mono) !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-mode-toggle,
#chat-root .chat-prototype-workbench-head .chat-prototype-device-tabs {
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 38%, transparent) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--chat-chrome-bg-elevated) 90%, transparent) !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-view-controls button,
#chat-root .chat-prototype-workbench-head .chat-prototype-view-controls span {
  border: 0 !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--chat-chrome-bg-elevated) 90%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 22%, transparent) !important;
}

#chat-root .chat-prototype-workbench-head .chat-prototype-view-controls button[data-prototype-fullscreen] {
  border-radius: 999px !important;
  background: var(--pf-chat-neon) !important;
  color: #00161b !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-live-shell {
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 24%, transparent) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Preview zoom: scale from center and keep layout centered in the pane. */
#chat-root .chat-prototype-workbench .chat-prototype-device.is-active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-device--phone.is-active {
  width: min(430px, 100%) !important;
  max-width: 430px !important;
  margin: 0 auto !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-device .chat-prototype-live-shell {
  flex: 0 0 auto !important;
  width: calc(100% / var(--prototype-live-zoom, 1)) !important;
  height: calc(100% / var(--prototype-live-zoom, 1)) !important;
  max-width: calc(100% / var(--prototype-live-zoom, 1)) !important;
  max-height: calc(100% / var(--prototype-live-zoom, 1)) !important;
  transform: scale(var(--prototype-live-zoom, 1)) !important;
  transform-origin: center center !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-live-shell--phone {
  width: min(430px, calc(100% / var(--prototype-live-zoom, 1))) !important;
  max-width: min(430px, calc(100% / var(--prototype-live-zoom, 1))) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device.is-active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--phone.is-active {
  justify-content: center !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell {
  flex: 0 0 auto !important;
  width: calc(100% / var(--prototype-live-zoom, 1)) !important;
  height: calc(100% / var(--prototype-live-zoom, 1)) !important;
  max-width: calc(100% / var(--prototype-live-zoom, 1)) !important;
  max-height: calc(100% / var(--prototype-live-zoom, 1)) !important;
  transform: scale(var(--prototype-live-zoom, 1)) !important;
  transform-origin: center center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell--phone {
  width: min(390px, calc(100% / var(--prototype-live-zoom, 1))) !important;
  max-width: min(390px, calc(100% / var(--prototype-live-zoom, 1))) !important;
  height: var(--prototype-phone-preview-height, calc(100% / var(--prototype-live-zoom, 1))) !important;
  max-height: none !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-device--phone.is-active .chat-prototype-live-shell--phone {
  height: var(--prototype-phone-preview-height, calc(100% / var(--prototype-live-zoom, 1))) !important;
  max-height: none !important;
}

#chat-root .chat-section-map-head,
#chat-root .chat-seo-head {
  padding: 0.55rem 0.65rem !important;
  border-bottom: 1px solid color-mix(in srgb, var(--pf-chat-neon) 22%, transparent) !important;
  background: transparent !important;
}

#chat-root .chat-tool-mode {
  font-family: var(--chat-chrome-mono) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#chat-root .chat-section-map-row {
  min-height: 2.65rem !important;
  padding-top: 0.42rem !important;
  padding-bottom: 0.42rem !important;
  border-bottom: 1px solid color-mix(in srgb, var(--pf-chat-neon) 14%, transparent) !important;
  background: transparent !important;
}

#chat-root .chat-section-map-key,
#chat-root .chat-section-map-meta,
#chat-root .chat-seo-head small,
#chat-root .chat-seo-check em {
  font-family: var(--chat-chrome-mono) !important;
  font-size: 0.58rem !important;
}

#chat-root .chat-section-map-meta span {
  border: 0 !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--chat-chrome-bg-elevated) 92%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 18%, transparent) !important;
}

#chat-root .chat-section-map-actions .btn-neon,
#chat-root .chat-block-current-actions .btn-neon,
#chat-root .chat-block-draft .btn-neon,
#chat-root .chat-seo-actions .btn-neon,
#chat-root .chat-section-map-media-head .btn-neon,
#chat-root .chat-section-map-media-empty .btn-neon {
  min-height: 1.55rem !important;
  padding: 0 0.55rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--pf-chat-neon) !important;
  color: #00161b !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
}

#chat-root .chat-section-map-actions .btn-neon:hover,
#chat-root .chat-block-current-actions .btn-neon:hover,
#chat-root .chat-block-draft .btn-neon:hover,
#chat-root .chat-seo-actions .btn-neon:hover,
#chat-root .chat-section-map-media-head .btn-neon:hover,
#chat-root .chat-section-map-media-empty .btn-neon:hover {
  background: color-mix(in srgb, var(--pf-chat-neon) 88%, #fff 12%) !important;
  color: #00161b !important;
}

#chat-root .chat-seo-summary span,
#chat-root .chat-seo-check,
#chat-root .chat-seo-score {
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--chat-chrome-bg-elevated) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 18%, transparent) !important;
}

#chat-root .chat-seo-grid,
#chat-root .chat-seo-actions {
  padding-inline: 0.65rem !important;
}

#chat-root .chat-seo-actions {
  padding-bottom: 0.65rem !important;
  gap: 0.32rem !important;
}

#chat-root .chat-prototype-trait-dock {
  border: 1px solid var(--pf-chat-neon) !important;
  border-radius: 6px !important;
  background: var(--chat-chrome-bg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool {
  border: 0 !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--chat-chrome-bg-elevated) 92%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 22%, transparent) !important;
  color: var(--custom-copy) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--delete {
  color: #ff8a9a !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ff8a9a 35%, transparent) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--dictate.is-active {
  background: color-mix(in srgb, var(--pf-chat-neon) 16%, var(--chat-chrome-bg-elevated) 84%) !important;
  color: var(--pf-chat-neon) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 45%, transparent) !important;
}

/* Chat compose glass — final authority */
#chat-root #chat-form.chat-form,
#chat-root .chat-form {
  position: relative !important;
  overflow: hidden !important;
  background: color-mix(in srgb, rgba(10, 14, 16, 0.62) 100%, transparent) !important;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.11) 0%,
    rgba(255, 255, 255, 0.03) 44%,
    rgba(0, 207, 255, 0.07) 100%
  ) !important;
  backdrop-filter: blur(18px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.45) !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 40%, rgba(255, 255, 255, 0.12)) !important;
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}

:root:not([data-manual-theme="dark"]) #chat-root #chat-form.chat-form,
:root:not([data-manual-theme="dark"]) #chat-root .chat-form {
  background: color-mix(in srgb, rgba(255, 255, 255, 0.66) 100%, transparent) !important;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.84) 0%,
    rgba(255, 255, 255, 0.42) 52%,
    rgba(0, 123, 153, 0.08) 100%
  ) !important;
  border-color: color-mix(in srgb, #007b99 34%, rgba(255, 255, 255, 0.58)) !important;
  box-shadow:
    0 10px 30px rgba(15, 30, 40, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05) !important;
}

#chat-root #chat-form.chat-form:focus-within,
#chat-root .chat-form:focus-within {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 72%, rgba(255, 255, 255, 0.18)) !important;
  box-shadow:
    0 12px 38px rgba(0, 0, 0, 0.34),
    0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

#chat-root #chat-form textarea#chat-input,
#chat-root .chat-form textarea {
  background: transparent !important;
}

#chat-root #chat-form .chat-tool {
  background: color-mix(in srgb, rgba(255, 255, 255, 0.06) 100%, transparent) !important;
}

#chat-root #chat-form .chat-send-icon {
  background: color-mix(in srgb, var(--pf-chat-neon) 24%, rgba(255, 255, 255, 0.05)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Chat compose bar — no background */
#chat-root .chat-compose,
body.is-chat-home .chat-root--home .chat-compose,
.chat-root--panel .chat-compose,
:root[data-manual-theme="dark"] body.is-chat-home .chat-root--home .chat-compose,
:root:not([data-manual-theme="dark"]) body.is-chat-home .chat-root--home .chat-compose {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ============================================================
   DX chrome unification — make every tool surface read like the
   PhotoFolio (Design X) admin: #2d2d2d panels, #111 bars,
   #3a3a3a hairlines, #999 Lato labels, neon reserved for accents.
   ============================================================ */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) {
  --dx-panel: #2d2d2d;
  --dx-elevated: #333333;
  --dx-elevated-hover: #3a3a3a;
  --dx-bar: #262626;
  --dx-line: #3a3a3a;
  --dx-line-strong: #454545;
  --dx-label: #999999;
  --dx-label-font: "Lato", "Helvetica Neue", Arial, sans-serif;
  --dx-copy: #e6e6e6;
  --dx-muted: #8a8a8a;
}

:root:not([data-manual-theme="dark"]) :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) {
  --dx-panel: #ffffff;
  --dx-elevated: #f2f3f4;
  --dx-elevated-hover: #e8eaec;
  --dx-bar: #ededed;
  --dx-line: #d7d9db;
  --dx-line-strong: #c5c8cb;
  --dx-label: #777777;
  --dx-copy: #23272b;
  --dx-muted: #7b7f83;
}

/* Draft-actions rail (Revise / Insert / Discard) */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions {
  border: 1px solid var(--dx-line) !important;
  border-radius: 6px !important;
  background: var(--dx-panel) !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool {
  border: 1px solid var(--dx-line) !important;
  border-radius: 5px !important;
  background: var(--dx-elevated) !important;
  color: var(--dx-copy) !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool:focus-visible {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 55%, var(--dx-line) 45%) !important;
  background: var(--dx-elevated-hover) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 22%, transparent) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool--prepare {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 50%, var(--dx-line) 50%) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 20%, var(--dx-elevated) 80%) !important;
  color: color-mix(in srgb, var(--pf-chat-neon) 82%, #fff 18%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool--discard {
  border-color: var(--dx-line) !important;
  color: var(--dx-label) !important;
  background: var(--dx-elevated) !important;
}

#chat-root .chat-prototype-draft-actions-meta strong {
  color: var(--dx-copy) !important;
}

#chat-root .chat-prototype-draft-actions-meta span {
  color: var(--dx-muted) !important;
}

/* Trait dock (selected element panel) */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock {
  border: 1px solid var(--dx-line) !important;
  border-radius: 6px !important;
  background: var(--dx-panel) !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.12), 0 10px 30px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: none !important;
}

#chat-root .chat-prototype-trait-dock-meta strong {
  color: var(--dx-copy) !important;
}

#chat-root .chat-prototype-trait-dock-meta span {
  color: var(--dx-label) !important;
  font-family: var(--dx-label-font) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool {
  border: 1px solid var(--dx-line) !important;
  border-radius: 5px !important;
  background: var(--dx-elevated) !important;
  color: var(--dx-copy) !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool:focus-visible {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 55%, var(--dx-line) 45%) !important;
  background: var(--dx-elevated-hover) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--delete {
  color: var(--dx-label, #999999) !important;
  border-color: var(--dx-line, #3a3a3a) !important;
  background: var(--dx-elevated, #333333) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--dictate.is-active {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 55%, transparent) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 18%, var(--dx-elevated) 82%) !important;
  color: var(--pf-chat-neon) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon) 30%, transparent) !important;
}

/* Editor-mode compose buttons (Exit / Undo all / Save Changes) */
#chat-root .chat-editor-btn {
  border: 1px solid var(--dx-line) !important;
  background: var(--dx-elevated) !important;
  color: var(--dx-copy) !important;
}

#chat-root .chat-editor-btn:hover,
#chat-root .chat-editor-btn:focus-visible {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 55%, var(--dx-line) 45%) !important;
  background: var(--dx-elevated-hover) !important;
}

#chat-root .chat-editor-btn--undo {
  color: color-mix(in srgb, #ffb347 78%, var(--dx-copy) 22%) !important;
}

#chat-root .chat-editor-btn--save {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 60%, transparent) !important;
  background: var(--pf-chat-neon) !important;
  color: #00161b !important;
}

#chat-root .chat-editor-btn--save:hover,
#chat-root .chat-editor-btn--save:focus-visible {
  background: color-mix(in srgb, var(--pf-chat-neon) 88%, #fff 12%) !important;
}

/* Targeting selects → DX field */
#chat-root .chat-prototype-workbench .chat-prototype-targeting select,
#chat-root .chat-prototype-workbench .chat-prototype-targeting input {
  border: 1px solid var(--dx-line) !important;
  border-radius: 5px !important;
  background: var(--dx-bar) !important;
  color: var(--dx-copy) !important;
}

/* Section rail / SEO tool headers → DX label */
#chat-root .chat-section-map-head strong,
#chat-root .chat-seo-head strong {
  color: var(--dx-copy) !important;
  font-family: var(--dx-label-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}

/* Section map + SEO cards → DX admin chrome */
#chat-root .chat-section-map-card,
#chat-root .chat-seo-card {
  border: 1px solid var(--dx-line) !important;
  border-radius: 6px !important;
  background: var(--dx-panel) !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.12), 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
}

#chat-root .chat-section-map-head,
#chat-root .chat-seo-head {
  border-bottom: 1px solid var(--dx-line) !important;
  background: var(--dx-bar) !important;
}

#chat-root .chat-tool-mode {
  color: color-mix(in srgb, var(--pf-chat-neon) 78%, var(--dx-muted) 22%) !important;
  font-family: var(--chat-chrome-mono) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

#chat-root .chat-section-map-head small,
#chat-root .chat-seo-head small {
  color: var(--dx-muted) !important;
}

#chat-root .chat-section-map-row {
  border-bottom: 1px solid color-mix(in srgb, var(--dx-line) 70%, transparent) !important;
  background: transparent !important;
}

#chat-root .chat-section-map-row-grid:hover {
  background: color-mix(in srgb, var(--dx-elevated) 60%, transparent) !important;
}

#chat-root .chat-section-map-name {
  color: var(--dx-copy) !important;
}

#chat-root .chat-section-map-key {
  color: var(--dx-muted) !important;
}

#chat-root .chat-section-map-meta span,
#chat-root .chat-section-map-visibility-toggle,
#chat-root .chat-section-map-media-count {
  border: 1px solid var(--dx-line) !important;
  border-radius: 5px !important;
  background: var(--dx-elevated) !important;
  color: var(--dx-muted) !important;
  box-shadow: none !important;
}

#chat-root .chat-section-map-media-count:hover,
#chat-root .chat-section-map-media-count:focus-visible {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 50%, var(--dx-line) 50%) !important;
  color: var(--dx-copy) !important;
}

#chat-root .chat-section-map-visibility-toggle {
  min-height: 0.96rem !important;
  padding: 0.02rem 0.24rem !important;
  cursor: pointer !important;
}

#chat-root .chat-section-map-visibility-toggle:hover,
#chat-root .chat-section-map-visibility-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 50%, var(--dx-line) 50%) !important;
  color: var(--dx-copy) !important;
}

#chat-root .chat-section-map-visibility-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 55%, transparent) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 16%, var(--dx-elevated) 84%) !important;
  color: color-mix(in srgb, var(--pf-chat-neon) 82%, #fff 18%) !important;
}

#chat-root .chat-section-map-media-count[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 55%, transparent) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 16%, var(--dx-elevated) 84%) !important;
  color: color-mix(in srgb, var(--pf-chat-neon) 82%, #fff 18%) !important;
}

#chat-root .chat-section-map-row-grid {
  min-height: 1.72rem !important;
  gap: 0.22rem !important;
  padding: 0.14rem 0.38rem 0.14rem calc(0.48rem + (var(--section-depth, 0) * 0.72rem)) !important;
  align-items: center !important;
}

#chat-root .chat-section-map-main {
  display: grid !important;
  gap: 0.02rem !important;
  align-content: center !important;
}

#chat-root .chat-section-map-name {
  font-size: 0.68rem !important;
  line-height: 0.98 !important;
}

#chat-root .chat-section-map-key,
#chat-root .chat-section-map-meta {
  font-size: 0.5rem !important;
  line-height: 0.96 !important;
}

#chat-root .chat-section-map-meta {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 0.1rem !important;
  align-items: center !important;
  padding: 0.05rem !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--dx-bar) 78%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dx-line) 60%, transparent) !important;
}

#chat-root .chat-section-map-chip,
#chat-root .chat-section-map-visibility-toggle,
#chat-root .chat-section-map-media-count {
  min-height: 0.82rem !important;
  padding: 0.01rem 0.2rem !important;
  font-size: 0.48rem !important;
  line-height: 0.92 !important;
}

#chat-root .chat-section-map-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid color-mix(in srgb, var(--dx-line) 72%, transparent) !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--dx-elevated) 84%, transparent) !important;
  color: var(--dx-muted) !important;
  box-shadow: none !important;
}

#chat-root .chat-section-map-chip--mode {
  color: color-mix(in srgb, var(--dx-copy) 70%, var(--dx-muted) 30%) !important;
}

#chat-root .chat-section-map-chip--type {
  opacity: 0.82 !important;
}

#chat-root .chat-section-map-visibility-toggle {
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 30%, var(--dx-line) 70%) !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 10%, var(--dx-elevated) 90%) !important;
  color: color-mix(in srgb, var(--dx-copy) 88%, #fff 12%) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
}

#chat-root .chat-section-map-media-count {
  border: 1px solid color-mix(in srgb, var(--dx-line) 72%, transparent) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--dx-muted) 92%, #fff 8%) !important;
  font-weight: 600 !important;
}

/* ============================================================
   DX toggles — every segmented switch uses the admin toggle look:
   flat 3px rounded track, #0099ff active fill with dark label.
   ============================================================ */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) {
  --dx-toggle: #0099ff;
  --dx-toggle-ink: #12181c;
}

/* Toggle group containers → flat rectangles, no pill */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-mode-toggle,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head .chat-prototype-device-tabs {
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 3px !important;
  background: color-mix(in srgb, var(--dx-bar, #262626) 80%, #000 20%) !important;
  padding: 2px !important;
  gap: 2px !important;
}

/* Individual toggle segments → 3px rectangles */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-mode-tab,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-device-tab {
  border: 0 !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: var(--dx-label, #999) !important;
  box-shadow: none !important;
}

/* Active segment → DX blue track, dark ink */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-mode-tab.is-active,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-device-tab.is-active {
  border: 0 !important;
  border-radius: 3px !important;
  background: var(--dx-toggle) !important;
  color: var(--dx-toggle-ink) !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-device-tab.is-active .chat-prototype-device-icon {
  color: var(--dx-toggle-ink) !important;
}

/* Guest / Support + Live / Clone pickers → same DX toggle look */
#chat-root .chat-mode-picker button,
#chat-root .chat-target-picker button {
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 3px !important;
  background: color-mix(in srgb, var(--dx-bar, #262626) 80%, #000 20%) !important;
  color: var(--dx-label, #999) !important;
}

#chat-root .chat-mode-picker button.is-active,
#chat-root .chat-target-picker button.is-active {
  border-color: var(--dx-toggle) !important;
  background: var(--dx-toggle) !important;
  color: var(--dx-toggle-ink) !important;
}

/* Targeting rail (Save as / Section / New title) → DX admin fields */
#chat-root .chat-prototype-workbench .chat-prototype-targeting {
  gap: 0.5rem !important;
}

#chat-root .chat-prototype-targeting span {
  color: var(--dx-label, #999) !important;
  font-family: var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.56rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-targeting select,
#chat-root .chat-prototype-workbench .chat-prototype-targeting input {
  min-height: 1.75rem !important;
  height: 1.75rem !important;
  padding: 0 0.5rem !important;
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 3px !important;
  background: var(--dx-bar, #262626) !important;
  color: var(--dx-copy, #e6e6e6) !important;
  font-size: 0.62rem !important;
}

#chat-root .chat-prototype-workbench .chat-prototype-targeting select:focus,
#chat-root .chat-prototype-workbench .chat-prototype-targeting input:focus,
#chat-root .chat-prototype-workbench .chat-prototype-targeting select:focus-visible,
#chat-root .chat-prototype-workbench .chat-prototype-targeting input:focus-visible {
  outline: none !important;
  border-color: var(--dx-toggle, #0099ff) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dx-toggle, #0099ff) 40%, transparent) !important;
}

/* Text page layout settings → DX admin chrome (global + section overrides) */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-panel,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-panel {
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 6px !important;
  background: var(--dx-panel, #2d2d2d) !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.12), 0 10px 30px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-meta,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.34rem 0.52rem !important;
  padding: 0.42rem 0.5rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 0 !important;
  background: var(--dx-bar, #262626) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-source,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-source {
  margin: 0 !important;
  color: var(--dx-copy, #e6e6e6) !important;
  font-family: var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-fields,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-fields {
  display: grid !important;
  gap: 0.42rem !important;
  padding: 0.5rem !important;
  max-height: none !important;
  overflow: visible !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-layout,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-layout {
  display: grid !important;
  gap: 0.42rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-row,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-row {
  display: grid !important;
  align-items: end !important;
  gap: 0.34rem !important;
  padding: 0.42rem !important;
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 5px !important;
  background: var(--dx-elevated, #333333) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-field-label,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-field-label {
  color: var(--dx-label, #999999) !important;
  font-family: var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.56rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-align: left !important;
  justify-content: flex-start !important;
  white-space: nowrap !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-meta .chat-prototype-text-page-scope,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-meta .chat-prototype-text-page-scope {
  display: grid !important;
  grid-template-columns: auto minmax(7.4rem, 9rem) !important;
  grid-template-rows: auto auto !important;
  align-items: stretch !important;
  gap: 0.14rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-field--compact,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-field--compact {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: stretch !important;
  gap: 0.14rem !important;
  min-height: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-field--margin .chat-prototype-text-page-field-label,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-field--margin .chat-prototype-text-page-field-label {
  justify-content: flex-start !important;
  text-align: left !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-scope select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-field select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-field input[type="text"],
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-scope select,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-field select,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-field input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 1.75rem !important;
  height: 1.75rem !important;
  padding: 0 1.15rem 0 0.46rem !important;
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 3px !important;
  background: var(--dx-bar, #262626) !important;
  color: var(--dx-copy, #e6e6e6) !important;
  font-family: var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M1.2 1.4 6 6.2l4.8-4.8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 0.42rem) 50% !important;
  background-size: 0.55rem !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-field input[type="text"],
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-field input[type="text"] {
  padding-right: 0.46rem !important;
  background-image: none !important;
  cursor: text !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-field input[type="color"],
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-field input[type="color"] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 1.75rem !important;
  height: 1.75rem !important;
  padding: 0.1rem !important;
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 3px !important;
  background: var(--dx-bar, #262626) !important;
  background-image: none !important;
  cursor: pointer !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-scope select:focus,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-field select:focus,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-field input:focus,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-scope select:focus-visible,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-field select:focus-visible,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-field input:focus-visible,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-scope select:focus,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-field select:focus,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-field input:focus,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-scope select:focus-visible,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-field select:focus-visible,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-field input:focus-visible {
  outline: none !important;
  border-color: var(--dx-toggle, #0099ff) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dx-toggle, #0099ff) 40%, transparent) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-source-badge,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-source-badge {
  border: 1px solid color-mix(in srgb, var(--dx-toggle, #0099ff) 42%, var(--dx-line, #3a3a3a) 58%) !important;
  border-radius: 3px !important;
  background: color-mix(in srgb, var(--dx-toggle, #0099ff) 12%, var(--dx-elevated, #333333) 88%) !important;
  color: color-mix(in srgb, var(--dx-toggle, #0099ff) 78%, var(--dx-copy, #e6e6e6) 22%) !important;
  font-family: var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.46rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-row--margins,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-row--margins {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-row--settings,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-row--settings {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 0.72fr) minmax(0, 0.95fr) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-row--colors,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-row--colors {
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1.4fr) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-row--font,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-row--font {
  grid-template-columns: minmax(0, 1fr) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-toggle,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-toggle {
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 5px !important;
  background: var(--dx-elevated, #333333) !important;
  color: var(--dx-copy, #e6e6e6) !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-toggle.is-active,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-toggle:hover,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-toggle.is-active,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-toggle:hover {
  border-color: color-mix(in srgb, var(--dx-toggle, #0099ff) 55%, var(--dx-line, #3a3a3a) 45%) !important;
  background: var(--dx-elevated-hover, #3a3a3a) !important;
  color: var(--dx-copy, #e6e6e6) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-icon,
body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-icon {
  color: var(--dx-toggle, #0099ff) !important;
}

/* Preview shell → neutral DX frame instead of neon edge */
#chat-root .chat-prototype-workbench .chat-prototype-live-shell {
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}

/* Inspector outline on the preview → subtle DX blue, not heavy neon */
#chat-root .chat-block-draft.is-inspector-mode .chat-prototype-preview-grid {
  outline: 1px solid color-mix(in srgb, var(--dx-toggle, #0099ff) 40%, transparent) !important;
  outline-offset: 3px !important;
}

/* AI EDIT overlay button → DX chip */
#chat-root .chat-prototype-layout-edit-btn {
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 3px !important;
  background: color-mix(in srgb, var(--dx-bar, #262626) 88%, #000 12%) !important;
  color: var(--dx-copy, #e6e6e6) !important;
}

#chat-root .chat-prototype-layout-edit-btn.is-active,
#chat-root .chat-prototype-layout-edit-btn:hover {
  border-color: color-mix(in srgb, var(--dx-toggle, #0099ff) 55%, var(--dx-line) 45%) !important;
  color: #fff !important;
}

/* Mobile vibe coder: phone-first HTML/CSS editing surface. */
@media (max-width: 760px) {
  body.is-chat-home .chat-root--home .chat-log {
    --chat-block-draft-bleed-x: 0.35rem;
  }

  #chat-root .chat-block-draft.chat-prototype-workbench,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.chat-prototype-workbench {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    border-radius: 0 !important;
  }

  #chat-root .chat-prototype-workbench,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench {
    min-height: min(84dvh, 760px) !important;
    overflow: visible !important;
  }

  #chat-root .chat-prototype-workbench-head,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head {
    --wb-control-h: 2.4rem;
    position: sticky !important;
    top: 0 !important;
    z-index: 46 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "view device"
      "zoom zoom" !important;
    align-items: center !important;
    gap: 0.42rem !important;
    min-height: 0 !important;
    padding: 0.48rem max(0.48rem, env(safe-area-inset-right)) 0.48rem max(0.48rem, env(safe-area-inset-left)) !important;
    border-bottom: 1px solid var(--dx-line, #3a3a3a) !important;
    background: var(--dx-panel, #2d2d2d) !important;
  }

  #chat-root .chat-prototype-workbench-head .chat-prototype-mode-toggle,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-mode-toggle {
    grid-area: view !important;
    grid-column: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  #chat-root .chat-prototype-workbench-head .chat-prototype-device-tabs,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-tabs {
    grid-area: device !important;
    grid-column: auto !important;
    justify-self: end !important;
    width: auto !important;
  }

  #chat-root .chat-prototype-workbench-head .chat-prototype-view-controls,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls {
    grid-area: zoom !important;
    grid-column: auto !important;
    justify-self: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    height: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #chat-root .chat-prototype-workbench-head .chat-prototype-mode-tab,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-mode-tab {
    flex: 1 1 0 !important;
    min-height: calc(var(--wb-control-h, 2.4rem) - 0.28rem) !important;
    height: calc(var(--wb-control-h, 2.4rem) - 0.28rem) !important;
    padding-inline: 0.42rem !important;
    font-size: 0.64rem !important;
  }

  #chat-root .chat-prototype-workbench-head .chat-prototype-device-tab,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-tab,
  #chat-root .chat-prototype-workbench-head .chat-prototype-view-controls button,
  #chat-root .chat-prototype-workbench-head .chat-prototype-view-controls span,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls button,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls span {
    min-width: 2.35rem !important;
    min-height: 2.25rem !important;
    height: 2.25rem !important;
    font-size: 0.68rem !important;
  }

  #chat-root .chat-prototype-workbench-head .chat-prototype-view-controls button,
  #chat-root .chat-prototype-workbench-head .chat-prototype-view-controls span {
    flex: 1 0 2.35rem !important;
  }

  #chat-root .chat-prototype-workbench-head .chat-prototype-view-controls span {
    flex-basis: 3.2rem !important;
  }

  #chat-root .chat-prototype-workbench-rail,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    align-items: start !important;
    gap: 0.42rem !important;
    padding: 0.48rem max(0.48rem, env(safe-area-inset-right)) 0.5rem max(0.48rem, env(safe-area-inset-left)) !important;
    overflow: visible !important;
  }

  #chat-root .chat-prototype-workbench-rail .chat-prototype-targeting,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail .chat-prototype-targeting {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.48rem !important;
    gap: 0.42rem !important;
    flex: none !important;
  }

  #chat-root .chat-prototype-targeting label {
    min-width: 0 !important;
  }

  #chat-root .chat-prototype-targeting span {
    font-size: 0.6rem !important;
    line-height: 1.1 !important;
  }

  #chat-root .chat-prototype-workbench .chat-prototype-targeting select,
  #chat-root .chat-prototype-workbench .chat-prototype-targeting input,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench .chat-prototype-targeting select,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench .chat-prototype-targeting input {
    min-height: 2.55rem !important;
    height: 2.55rem !important;
    padding-inline: 0.68rem !important;
    font-size: 0.78rem !important;
  }

  #chat-root .chat-prototype-workbench-rail .chat-prototype-library,
  #chat-root .chat-prototype-workbench-rail .chat-prototype-text-page,
  #chat-root .chat-prototype-workbench-rail .chat-prototype-draft-actions {
    flex: none !important;
    min-width: 0 !important;
  }

  #chat-root .chat-prototype-workbench-rail .chat-prototype-draft-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  #chat-root .chat-prototype-library-search-btn,
  #chat-root .chat-prototype-text-page-toggle {
    min-width: 2.6rem !important;
    min-height: 2.6rem !important;
    height: 2.6rem !important;
    border-radius: 6px !important;
  }

  #chat-root .chat-prototype-text-page-toggle {
    padding-inline: 0.62rem !important;
    font-size: 0.7rem !important;
  }

  #chat-root .chat-prototype-library-popover,
  #chat-root .chat-prototype-text-page-panel {
    position: fixed !important;
    left: max(0.5rem, env(safe-area-inset-left)) !important;
    right: max(0.5rem, env(safe-area-inset-right)) !important;
    top: 5.7rem !important;
    width: auto !important;
    max-height: min(62dvh, 520px) !important;
    overflow: auto !important;
    z-index: 170 !important;
  }

  #chat-root .chat-prototype-text-page-fields {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #chat-root .chat-prototype-preview-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
    box-sizing: border-box !important;
    height: min(66dvh, 620px) !important;
    min-height: 380px !important;
    max-height: none !important;
    padding-top: 4.35rem !important;
    overflow: hidden !important;
  }

  #chat-root .chat-prototype-workbench .chat-prototype-device.is-active,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-device.is-active {
    align-items: stretch !important;
    justify-content: center !important;
  }

  #chat-root .chat-prototype-workbench .chat-prototype-live-shell,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell {
    border-radius: 5px !important;
    touch-action: pan-x pan-y !important;
  }

  #chat-root .chat-prototype-workbench .chat-prototype-live-shell--phone,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell--phone {
    width: min(100%, calc(100% / var(--prototype-live-zoom, 1))) !important;
    max-width: min(430px, calc(100% / var(--prototype-live-zoom, 1))) !important;
  }

  #chat-root .chat-prototype-insert-toolbar,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar {
    left: 0.5rem !important;
    right: 0.5rem !important;
    top: 0.5rem !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.36rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #chat-root .chat-prototype-insert-toolbar button,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar button {
    flex: 1 0 auto !important;
    min-height: 2.28rem !important;
    padding-inline: 0.7rem !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
  }

  #chat-root .chat-prototype-device--phone .chat-prototype-layout-edit,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--phone .chat-prototype-layout-edit,
  #chat-root .chat-prototype-layout-edit,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-edit {
    display: block !important;
    max-width: calc(100% - 1rem) !important;
  }

  #chat-root .chat-prototype-layout-edit-bar,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-edit-bar {
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 0.36rem !important;
  }

  #chat-root .chat-prototype-layout-edit-btn,
  #chat-root .chat-prototype-layout-undo,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-edit-btn,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-undo {
    min-height: 2.25rem !important;
    padding: 0 0.62rem !important;
    border-radius: 6px !important;
    font-size: 0.66rem !important;
  }

  #chat-root .chat-prototype-layout-popover,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-popover {
    position: fixed !important;
    left: max(0.5rem, env(safe-area-inset-left)) !important;
    right: max(0.5rem, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom) + 5.25rem) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 230 !important;
  }

  #chat-root .chat-block-draft.has-trait-selection .chat-prototype-layout-popover,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.has-trait-selection .chat-prototype-layout-popover {
    bottom: calc(env(safe-area-inset-bottom) + 7rem + min(45dvh, 360px) + 1.2rem) !important;
  }

  #chat-root .chat-prototype-layout-form.chat-form,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-form.chat-form {
    grid-template-columns: minmax(0, 1fr) 2.45rem !important;
    min-height: 3rem !important;
    padding: 0.4rem !important;
  }

  #chat-root .chat-prototype-layout-form textarea[data-prototype-layout-input],
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-form textarea[data-prototype-layout-input] {
    min-height: 2.1rem !important;
    height: 2.1rem !important;
    line-height: 2.1rem !important;
    font-size: 0.86rem !important;
  }

  #chat-root .chat-prototype-layout-form .chat-send-icon,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-form .chat-send-icon {
    width: 2.45rem !important;
    min-width: 2.45rem !important;
    max-width: 2.45rem !important;
    height: 2.45rem !important;
    min-height: 2.45rem !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection {
    position: fixed !important;
    left: max(0.5rem, env(safe-area-inset-left)) !important;
    right: max(0.5rem, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom) + 7rem) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: min(45dvh, 360px) !important;
    overflow: auto !important;
    z-index: 190 !important;
    border-radius: 10px !important;
    transition: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-bar {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 0.42rem !important;
    padding: 0.55rem !important;
  }

  #chat-root .chat-prototype-trait-dock-meta,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock-meta {
    max-width: none !important;
    min-width: 7rem !important;
  }

  #chat-root .chat-prototype-trait-dock-meta strong,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock-meta strong {
    font-size: 0.82rem !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools {
    display: flex !important;
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    gap: 0.36rem !important;
    margin-left: 0 !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool {
    width: 2.55rem !important;
    min-width: 2.55rem !important;
    height: 2.55rem !important;
    min-height: 2.55rem !important;
    border-radius: 7px !important;
  }

  #chat-root .chat-prototype-trait-drawer,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-drawer {
    gap: 0.5rem !important;
    padding: 0 0.55rem 0.65rem !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #chat-root .chat-prototype-trait-inline-grid,
  #chat-root .chat-prototype-image-tools-grid,
  #chat-root .chat-prototype-block-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
  }

  #chat-root .chat-prototype-trait-inline-field select,
  #chat-root .chat-prototype-trait-inline-field input[type="color"],
  #chat-root .chat-prototype-image-tools select,
  #chat-root .chat-prototype-image-tools input[type="range"],
  #chat-root .chat-prototype-block-tools select,
  #chat-root .chat-prototype-block-tools input[type="range"],
  #chat-root .chat-prototype-inspector-image-form {
    min-height: 2.4rem !important;
    font-size: 0.76rem !important;
  }

  #chat-root .chat-prototype-trait-form.chat-form {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 0.32rem !important;
    gap: 0.28rem !important;
  }

  #chat-root .chat-prototype-trait-form textarea[data-prototype-ai-note] {
    min-height: 3.7rem !important;
    height: 3.7rem !important;
    padding: 0.5rem 0.56rem !important;
    line-height: 1.22 !important;
    font-size: 0.84rem !important;
  }

  #chat-root .chat-prototype-note-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 0.24rem !important;
  }

  #chat-root .chat-prototype-note-btn {
    width: auto !important;
    min-height: 1.9rem !important;
    padding-inline: 0.44rem !important;
    font-size: 0.64rem !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  #chat-root .chat-prototype-note-btn--apply {
    min-width: 6rem !important;
  }

  #chat-root .chat-prototype-note-btn svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
  }

  #chat-root .chat-prototype-trait-queue-chip {
    position: fixed !important;
    right: max(0.65rem, env(safe-area-inset-right)) !important;
    bottom: calc(env(safe-area-inset-bottom) + 7.15rem) !important;
    min-height: 2.35rem !important;
    z-index: 188 !important;
  }

  #chat-root .chat-prototype-trait-queue-popover {
    position: fixed !important;
    left: max(0.5rem, env(safe-area-inset-left)) !important;
    right: max(0.5rem, env(safe-area-inset-right)) !important;
    bottom: calc(env(safe-area-inset-bottom) + 9.95rem) !important;
    width: auto !important;
    max-height: min(46dvh, 360px) !important;
    z-index: 189 !important;
  }

  #chat-root .chat-prototype-code-pane:not(.hidden),
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-code-pane:not(.hidden) {
    grid-template-rows: auto minmax(170px, 0.72fr) minmax(240px, 1fr) !important;
    gap: 0.5rem !important;
    min-height: min(70dvh, 700px) !important;
    padding: 0.5rem !important;
    overflow: auto !important;
  }

  #chat-root .chat-prototype-code-pane-head {
    display: grid !important;
    gap: 0.16rem !important;
    padding: 0.2rem 0.1rem 0 !important;
  }

  #chat-root .chat-prototype-code-pane-head span {
    text-align: left !important;
    font-size: 0.62rem !important;
  }

  #chat-root .chat-code-editor-head {
    padding: 0.52rem 0.62rem !important;
  }

  #chat-root .chat-code-editor--css textarea[data-block-css],
  #chat-root .chat-code-editor--html textarea[data-block-html],
  #chat-root textarea[data-block-html],
  #chat-root textarea[data-block-css] {
    min-height: 12rem !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  #chat-root .chat-form.is-editor-mode {
    width: calc(100vw - 0.75rem) !important;
    max-width: none !important;
    gap: 0.36rem !important;
    padding: 0.38rem !important;
  }

  #chat-root .chat-editor-btn {
    min-height: 2.75rem !important;
    padding: 0.48rem 0.46rem !important;
    border-radius: 6px !important;
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
    height: calc(100dvh - 8.3rem) !important;
    min-height: 0 !important;
    padding-top: 4.35rem !important;
  }
}

@media (max-width: 430px) {
  #chat-root .chat-prototype-workbench-rail .chat-prototype-targeting,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail .chat-prototype-targeting {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #chat-root .chat-prototype-trait-inline-grid,
  #chat-root .chat-prototype-image-tools-grid,
  #chat-root .chat-prototype-block-tools-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #chat-root .chat-prototype-insert-toolbar button {
    flex-basis: auto !important;
  }
}

#chat-root .chat-prototype-device--phone .chat-prototype-layout-edit,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--phone .chat-prototype-layout-edit {
  display: block !important;
}

/* Mobile editor compact pass: make vibe edits the primary phone workflow. */
@media (max-width: 760px) {
  #chat-root .chat-block-draft.chat-prototype-workbench,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.chat-prototype-workbench {
    font-size: 13px !important;
    min-height: 78dvh !important;
  }

  #chat-root .chat-prototype-workbench-head,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head {
    position: relative !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.3rem !important;
    min-height: 2.2rem !important;
    padding: 0.26rem max(0.4rem, env(safe-area-inset-right)) 0.26rem max(0.4rem, env(safe-area-inset-left)) !important;
  }

  #chat-root .chat-prototype-workbench-head .chat-prototype-mode-toggle,
  #chat-root .chat-prototype-workbench-head .chat-prototype-device-tabs,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-mode-toggle,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-tabs {
    display: none !important;
  }

  #chat-root .chat-prototype-workbench-head .chat-prototype-view-controls,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls {
    display: flex !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  #chat-root .chat-prototype-workbench-head .chat-prototype-view-controls button:not([data-prototype-fullscreen]),
  #chat-root .chat-prototype-workbench-head .chat-prototype-view-controls span,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls button:not([data-prototype-fullscreen]),
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls span {
    display: none !important;
  }

  #chat-root .chat-prototype-workbench-head .chat-prototype-view-controls button[data-prototype-fullscreen],
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls button[data-prototype-fullscreen] {
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0 !important;
    border-radius: 6px !important;
  }

  #chat-root .chat-prototype-workbench-rail,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail {
    position: relative !important;
    top: auto !important;
    z-index: 44 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    padding: 0.32rem max(0.4rem, env(safe-area-inset-right)) 0.34rem max(0.4rem, env(safe-area-inset-left)) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #chat-root .chat-prototype-workbench-rail .chat-prototype-targeting,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail .chat-prototype-targeting {
    display: flex !important;
    grid-column: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    padding: 0.28rem !important;
    gap: 0.28rem !important;
    border-radius: 5px !important;
  }

  #chat-root .chat-prototype-targeting label,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-targeting label {
    flex: 0 0 7.35rem !important;
    width: 7.35rem !important;
    min-width: 0 !important;
    gap: 0.12rem !important;
  }

  #chat-root .chat-prototype-targeting span,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-targeting span {
    font-size: 0.48rem !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
  }

  #chat-root .chat-prototype-workbench .chat-prototype-targeting select,
  #chat-root .chat-prototype-workbench .chat-prototype-targeting input,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench .chat-prototype-targeting select,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench .chat-prototype-targeting input {
    min-height: 1.85rem !important;
    height: 1.85rem !important;
    padding-inline: 0.42rem !important;
    border-radius: 5px !important;
    font-size: 0.64rem !important;
  }

  #chat-root .chat-prototype-library-search-btn,
  #chat-root .chat-prototype-text-page-toggle,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-library-search-btn,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-text-page-toggle {
    min-width: 2rem !important;
    width: 2rem !important;
    min-height: 2rem !important;
    height: 2rem !important;
    padding: 0 !important;
    border-radius: 5px !important;
  }

  #chat-root .chat-prototype-text-page-toggle span,
  #chat-root .chat-prototype-text-page-toggle .chat-prototype-text-page-chevron,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-text-page-toggle span,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-text-page-toggle .chat-prototype-text-page-chevron {
    display: none !important;
  }

  #chat-root .chat-prototype-library-popover,
  #chat-root .chat-prototype-text-page-panel,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-library-popover,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-text-page-panel {
    top: 3.2rem !important;
    left: max(0.4rem, env(safe-area-inset-left)) !important;
    right: max(0.4rem, env(safe-area-inset-right)) !important;
    max-height: min(58dvh, 460px) !important;
    border-radius: 8px !important;
  }

  #chat-root .chat-prototype-preview-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
    height: min(72dvh, 660px) !important;
    min-height: 430px !important;
    padding: 2.65rem 0.35rem 0.45rem !important;
    overflow: hidden !important;
  }

  #chat-root .chat-prototype-insert-toolbar,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar {
    left: 0.35rem !important;
    right: 0.35rem !important;
    top: 0.35rem !important;
    gap: 0.28rem !important;
    padding: 0 !important;
  }

  #chat-root .chat-prototype-insert-toolbar button,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar button {
    min-height: 1.85rem !important;
    height: 1.85rem !important;
    padding-inline: 0.45rem !important;
    border-radius: 5px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
  }

  #chat-root .chat-prototype-insert-toolbar button[data-prototype-insert-block="imageText"],
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar button[data-prototype-insert-block="imageText"] {
    max-width: 5.5rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #chat-root .chat-prototype-workbench .chat-prototype-device--desktop,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench .chat-prototype-device--desktop {
    display: none !important;
  }

  #chat-root .chat-prototype-workbench .chat-prototype-device--phone,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench .chat-prototype-device--phone {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
  }

  #chat-root .chat-prototype-workbench .chat-prototype-live-shell,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    transform: none !important;
    border-radius: 4px !important;
  }

  #chat-root .chat-prototype-live-stage,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-stage {
    -webkit-overflow-scrolling: touch !important;
  }

  #chat-root .chat-prototype-layout-edit,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-edit {
    position: fixed !important;
    left: max(0.42rem, env(safe-area-inset-left)) !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom) + 3.95rem) !important;
    width: auto !important;
    max-width: calc(100vw - 0.84rem) !important;
    z-index: 225 !important;
  }

  #chat-root .chat-prototype-layout-edit-btn,
  #chat-root .chat-prototype-layout-undo,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-edit-btn,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-undo {
    min-height: 2rem !important;
    height: 2rem !important;
    padding: 0 0.48rem !important;
    border-radius: 5px !important;
    font-size: 0.58rem !important;
    line-height: 1 !important;
  }

  #chat-root .chat-prototype-layout-edit-btn span,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-edit-btn span {
    max-width: 2.25rem !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  #chat-root .chat-prototype-layout-edit-icon,
  #chat-root .chat-prototype-layout-edit-chevron,
  #chat-root .chat-prototype-layout-undo svg,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-edit-icon,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-edit-chevron,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-undo svg {
    width: 0.78rem !important;
    height: 0.78rem !important;
  }

  #chat-root .chat-prototype-layout-popover,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-popover {
    position: fixed !important;
    left: max(0.42rem, env(safe-area-inset-left)) !important;
    right: max(0.42rem, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom) + 6.25rem) !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 10px !important;
    z-index: 235 !important;
  }

  #chat-root .chat-block-draft.has-trait-selection .chat-prototype-layout-popover,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.has-trait-selection .chat-prototype-layout-popover {
    bottom: calc(env(safe-area-inset-bottom) + min(54dvh, 380px) + 3.2rem) !important;
  }

  #chat-root .chat-prototype-layout-form.chat-form,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-form.chat-form {
    grid-template-columns: minmax(0, 1fr) 2.1rem !important;
    min-height: 2.45rem !important;
    padding: 0.3rem !important;
    gap: 0.28rem !important;
  }

  #chat-root .chat-prototype-layout-form textarea[data-prototype-layout-input],
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-form textarea[data-prototype-layout-input] {
    min-height: 1.85rem !important;
    height: 1.85rem !important;
    padding: 0.4rem 0.5rem !important;
    line-height: 1.2 !important;
    font-size: 0.76rem !important;
  }

  #chat-root .chat-prototype-layout-form .chat-send-icon,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-form .chat-send-icon {
    width: 2.1rem !important;
    min-width: 2.1rem !important;
    height: 2.1rem !important;
    min-height: 2.1rem !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection {
    left: max(0.42rem, env(safe-area-inset-left)) !important;
    right: max(0.42rem, env(safe-area-inset-right)) !important;
    bottom: calc(env(safe-area-inset-bottom) + 3.95rem) !important;
    max-height: min(54dvh, 380px) !important;
    border-radius: 9px !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-bar {
    padding: 0.42rem !important;
    gap: 0.32rem !important;
  }

  #chat-root .chat-prototype-trait-dock-meta strong,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock-meta strong {
    font-size: 0.72rem !important;
    line-height: 1.05 !important;
  }

  #chat-root .chat-prototype-trait-dock-meta span,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock-meta span {
    font-size: 0.55rem !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools {
    gap: 0.24rem !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool {
    width: 2.05rem !important;
    min-width: 2.05rem !important;
    height: 2.05rem !important;
    min-height: 2.05rem !important;
    border-radius: 5px !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool svg,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
  }

  #chat-root .chat-prototype-trait-inline-tools,
  #chat-root .chat-prototype-block-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-inline-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-block-tools {
    display: none !important;
  }

  #chat-root .chat-prototype-trait-drawer,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-drawer {
    gap: 0.38rem !important;
    padding: 0 0.42rem 0.5rem !important;
  }

  #chat-root .chat-prototype-image-tools-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
  }

  #chat-root .chat-prototype-image-tools select,
  #chat-root .chat-prototype-image-tools input[type="range"],
  #chat-root .chat-prototype-inspector-image-form,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-tools select,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-tools input[type="range"],
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-inspector-image-form {
    min-height: 1.9rem !important;
    font-size: 0.68rem !important;
  }

  #chat-root .chat-prototype-image-tools p,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-tools p {
    margin: 0 !important;
    font-size: 0.62rem !important;
    line-height: 1.2 !important;
  }

  #chat-root .chat-prototype-trait-form.chat-form,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-form.chat-form {
    padding: 0.2rem !important;
    gap: 0.22rem !important;
  }

  #chat-root .chat-prototype-trait-form textarea[data-prototype-ai-note],
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-form textarea[data-prototype-ai-note] {
    min-height: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0.34rem 0.42rem !important;
    font-size: 0.76rem !important;
    line-height: 1.18 !important;
  }

  #chat-root .chat-prototype-note-actions,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-note-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 0.18rem !important;
  }

  #chat-root .chat-prototype-note-btn,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-note-btn {
    width: auto !important;
    min-height: 1.52rem !important;
    padding-inline: 0.34rem !important;
    border-radius: 5px !important;
    font-size: 0.58rem !important;
    line-height: 1 !important;
  }

  #chat-root .chat-prototype-note-btn--apply,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-note-btn--apply {
    min-width: 5.5rem !important;
  }

  #chat-root .chat-prototype-note-btn svg,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-note-btn svg {
    width: 0.78rem !important;
    height: 0.78rem !important;
  }

  #chat-root .chat-prototype-trait-queue-chip,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-queue-chip {
    right: max(0.5rem, env(safe-area-inset-right)) !important;
    bottom: calc(env(safe-area-inset-bottom) + 3.95rem) !important;
    min-height: 2rem !important;
    padding-inline: 0.56rem !important;
    font-size: 0.62rem !important;
  }

  #chat-root .chat-prototype-trait-queue-popover,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-queue-popover {
    left: max(0.42rem, env(safe-area-inset-left)) !important;
    right: max(0.42rem, env(safe-area-inset-right)) !important;
    bottom: calc(env(safe-area-inset-bottom) + 6.25rem) !important;
    max-height: min(46dvh, 340px) !important;
    border-radius: 9px !important;
  }

  #chat-root .chat-prototype-code-pane,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-code-pane {
    display: none !important;
  }

  #chat-root .chat-form.is-editor-mode {
    width: calc(100vw - 0.55rem) !important;
    max-width: none !important;
    padding: 0.28rem !important;
    gap: 0.28rem !important;
  }

  #chat-root .chat-editor-btn {
    min-height: 2.2rem !important;
    padding: 0.36rem 0.36rem !important;
    border-radius: 5px !important;
    font-size: 0.64rem !important;
    line-height: 1.05 !important;
  }

  body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
    height: calc(100dvh - 4.95rem) !important;
    min-height: 0 !important;
    padding-top: 2.65rem !important;
  }
}

@media (max-width: 430px) {
  #chat-root .chat-prototype-targeting label,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-targeting label {
    flex-basis: 6.6rem !important;
    width: 6.6rem !important;
  }

  #chat-root .chat-prototype-insert-toolbar button,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar button {
    padding-inline: 0.36rem !important;
    font-size: 0.58rem !important;
  }

  #chat-root .chat-prototype-note-btn--dictate span,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-note-btn--dictate span {
    display: none !important;
  }

  #chat-root .chat-prototype-image-tools-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-tools-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

#chat-root .chat-prototype-mobile-vibe,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe {
  display: none;
}

@media (max-width: 760px) {
  #chat-root .chat-prototype-workbench-rail,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail {
    display: block !important;
    padding: 0.35rem max(0.42rem, env(safe-area-inset-right)) 0.38rem max(0.42rem, env(safe-area-inset-left)) !important;
    overflow: visible !important;
  }

  #chat-root .chat-prototype-mobile-vibe,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe {
    display: grid !important;
    grid-template-columns: minmax(6.6rem, 0.36fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 0.34rem !important;
    width: 100% !important;
  }

  #chat-root .chat-prototype-mobile-section,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 0.12rem !important;
    min-width: 0 !important;
  }

  #chat-root .chat-prototype-mobile-section span,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section span {
    color: var(--dx-label, #999) !important;
    font-family: var(--dx-label-font, "Lato", Arial, sans-serif) !important;
    font-size: 0.48rem !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  #chat-root .chat-prototype-mobile-section select,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section select {
    width: 100% !important;
    min-width: 0 !important;
    height: 2.18rem !important;
    min-height: 2.18rem !important;
    padding: 0 0.42rem !important;
    border: 1px solid var(--dx-line, #3a3a3a) !important;
    border-radius: 5px !important;
    background: var(--dx-elevated, #333) !important;
    color: var(--dx-copy, #e6e6e6) !important;
    font-size: 0.68rem !important;
  }

  #chat-root .chat-prototype-mobile-vibe-form,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 2.18rem !important;
    align-items: center !important;
    gap: 0.28rem !important;
    min-width: 0 !important;
    min-height: 2.58rem !important;
    padding: 0.2rem !important;
    border: 1px solid color-mix(in srgb, var(--dx-toggle, #0099ff) 38%, var(--dx-line, #3a3a3a) 62%) !important;
    border-radius: 7px !important;
    background: color-mix(in srgb, var(--dx-panel, #2d2d2d) 94%, #000 6%) !important;
    box-shadow: none !important;
  }

  #chat-root .chat-prototype-mobile-vibe-form textarea,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form textarea {
    width: 100% !important;
    min-width: 0 !important;
    height: 2.1rem !important;
    min-height: 2.1rem !important;
    max-height: 4.8rem !important;
    padding: 0.5rem 0.54rem !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: var(--dx-copy, #e6e6e6) !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    resize: none !important;
    outline: none !important;
  }

  #chat-root .chat-prototype-mobile-vibe-form textarea::placeholder,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form textarea::placeholder {
    color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 86%, transparent) !important;
  }

  #chat-root .chat-prototype-mobile-vibe-form .chat-send-icon,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form .chat-send-icon {
    width: 2.18rem !important;
    min-width: 2.18rem !important;
    height: 2.18rem !important;
    min-height: 2.18rem !important;
    border-radius: 999px !important;
    background: var(--pf-chat-neon, #00cfff) !important;
  }

  #chat-root .chat-prototype-mobile-vibe-status,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-status {
    position: absolute !important;
    left: 0.5rem !important;
    right: 2.75rem !important;
    bottom: -0.92rem !important;
    min-height: 0.8rem !important;
    color: var(--dx-label, #999) !important;
    font-size: 0.54rem !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }

  #chat-root .chat-prototype-mobile-vibe-form.is-thinking,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form.is-thinking {
    border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 72%, var(--dx-line, #3a3a3a) 28%) !important;
  }

  #chat-root .chat-prototype-mobile-vibe-form.is-thinking .chat-send-icon,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form.is-thinking .chat-send-icon {
    opacity: 0.68 !important;
  }

  #chat-root .chat-prototype-targeting,
  #chat-root .chat-prototype-workbench-rail .chat-prototype-library,
  #chat-root .chat-prototype-workbench-rail .chat-prototype-text-page,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-targeting,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail .chat-prototype-library,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail .chat-prototype-text-page {
    display: none !important;
  }

  #chat-root .chat-prototype-insert-toolbar,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar,
  #chat-root .chat-prototype-layout-edit,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-edit {
    display: none !important;
  }

  #chat-root .chat-prototype-preview-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
    height: min(75dvh, 690px) !important;
    padding: 0.35rem !important;
  }
}

@media (max-width: 430px) {
  #chat-root .chat-prototype-mobile-vibe,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe {
    grid-template-columns: minmax(5.8rem, 0.34fr) minmax(0, 1fr) !important;
    gap: 0.28rem !important;
  }

  #chat-root .chat-prototype-mobile-section select,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section select {
    font-size: 0.62rem !important;
    padding-inline: 0.34rem !important;
  }

  #chat-root .chat-prototype-mobile-vibe-form textarea,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form textarea {
    font-size: 0.72rem !important;
  }
}

@media (max-width: 760px) {
  #chat-root .chat-prototype-workbench.is-mobile-editor .chat-prototype-workbench-rail .chat-prototype-targeting,
  #chat-root .chat-prototype-workbench.is-mobile-editor .chat-prototype-workbench-rail .chat-prototype-library,
  #chat-root .chat-prototype-workbench.is-mobile-editor .chat-prototype-workbench-rail .chat-prototype-text-page,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench.is-mobile-editor .chat-prototype-workbench-rail .chat-prototype-targeting,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench.is-mobile-editor .chat-prototype-workbench-rail .chat-prototype-library,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench.is-mobile-editor .chat-prototype-workbench-rail .chat-prototype-text-page,
  #chat-root .chat-prototype-workbench.is-mobile-editor .chat-prototype-preview-grid .chat-prototype-insert-toolbar,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench.is-mobile-editor .chat-prototype-preview-grid .chat-prototype-insert-toolbar,
  #chat-root .chat-prototype-workbench.is-mobile-editor .chat-prototype-device--phone .chat-prototype-layout-edit,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench.is-mobile-editor .chat-prototype-device--phone .chat-prototype-layout-edit {
    display: none !important;
  }
}

/* Mobile chat header: compact, aligned controls for phone editing. */
@media (max-width: 430px) {
  body.is-chat-home .main-top {
    height: calc(2.7rem + env(safe-area-inset-top)) !important;
    min-height: calc(2.7rem + env(safe-area-inset-top)) !important;
    padding: calc(env(safe-area-inset-top) + 0.42rem) 8.95rem 0.42rem 3.35rem !important;
    align-items: center !important;
  }

  body.is-chat-home .main-top-label {
    max-width: 100% !important;
    overflow: hidden !important;
    color: var(--custom-copy) !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.is-chat-home .sidebar-toggle,
  body.is-chat-home.is-sidebar-collapsed .sidebar-toggle,
  body.is-chat-home:not(.is-sidebar-collapsed) .sidebar-toggle {
    top: calc(env(safe-area-inset-top) + 0.52rem) !important;
    left: max(0.62rem, env(safe-area-inset-left)) !important;
    width: 1.86rem !important;
    min-width: 1.86rem !important;
    max-width: 1.86rem !important;
    height: 1.86rem !important;
    min-height: 1.86rem !important;
    max-height: 1.86rem !important;
    padding: 0 !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
  }

  body.is-chat-home .sidebar-toggle::before {
    width: 0.62rem !important;
    height: 0.62rem !important;
  }

  body.is-chat-home #admin-preview-toggle {
    display: none !important;
  }

  body.is-chat-home #chat-account-scope,
  body.is-chat-home .chat-top-hire {
    top: calc(env(safe-area-inset-top) + 0.52rem) !important;
    height: 1.86rem !important;
    min-height: 1.86rem !important;
    max-height: 1.86rem !important;
    border-radius: 7px !important;
  }

  body.is-chat-home #chat-account-scope {
    right: max(0.55rem, env(safe-area-inset-right)) !important;
    width: 1.86rem !important;
    min-width: 1.86rem !important;
    max-width: 1.86rem !important;
    padding: 0 !important;
  }

  body.is-chat-home .chat-top-hire {
    right: calc(max(0.55rem, env(safe-area-inset-right)) + 2.25rem) !important;
    min-width: 0 !important;
    max-width: 6.9rem !important;
    padding: 0 0.54rem !important;
    overflow: hidden !important;
    font-size: 0.58rem !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Phone HTML/CSS editor: one prompt bar plus optional pinpoint mode. */
@media (max-width: 760px) {
  body.is-mobile-vibe-keyboard #chat-root .chat-compose.is-editor-compose {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(120%) !important;
  }

  body:has(.chat-prototype-mobile-vibe:focus-within) #chat-root .chat-compose.is-editor-compose {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(120%) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-workbench-rail,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-workbench-rail,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html.chat-prototype-workbench.is-mobile-editor .chat-prototype-workbench-rail {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html.chat-prototype-workbench.is-mobile-editor .chat-prototype-mobile-vibe {
    position: fixed !important;
    left: max(0.48rem, env(safe-area-inset-left)) !important;
    right: max(0.48rem, env(safe-area-inset-right)) !important;
    bottom: calc(var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 3.55rem) !important;
    z-index: 270 !important;
    display: grid !important;
    grid-template-columns: 2.18rem minmax(4.65rem, 0.28fr) minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 0.32rem !important;
    width: auto !important;
    padding: 0.32rem !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 42%, var(--dx-line, #3a3a3a) 58%) !important;
    border-radius: 9px !important;
    background: color-mix(in srgb, var(--dx-panel, #222) 94%, #000 6%) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32) !important;
    backdrop-filter: blur(12px) !important;
  }

  body.is-mobile-vibe-keyboard #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe,
  body.is-mobile-vibe-keyboard .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe {
    bottom: calc(var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 0.45rem) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe:focus-within,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe:focus-within {
    bottom: calc(var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 0.45rem) !important;
  }

  #chat-root .chat-prototype-mobile-pinpoint,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-pinpoint {
    display: grid !important;
    place-items: center !important;
    width: 2.18rem !important;
    min-width: 2.18rem !important;
    height: 2.18rem !important;
    min-height: 2.18rem !important;
    padding: 0 !important;
    border: 1px solid var(--dx-line, #3a3a3a) !important;
    border-radius: 7px !important;
    background: color-mix(in srgb, var(--dx-elevated, #333) 82%, #000 18%) !important;
    color: var(--dx-copy, #e6e6e6) !important;
    box-shadow: none !important;
  }

  #chat-root .chat-prototype-mobile-pinpoint span,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-pinpoint span {
    width: 1rem !important;
    height: 1rem !important;
    background: currentColor !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2h2v3.1A7 7 0 0 1 18.9 11H22v2h-3.1A7 7 0 0 1 13 18.9V22h-2v-3.1A7 7 0 0 1 5.1 13H2v-2h3.1A7 7 0 0 1 11 5.1V2zm1 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 3.15A1.85 1.85 0 1 1 12 13.85 1.85 1.85 0 0 1 12 10.15z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2h2v3.1A7 7 0 0 1 18.9 11H22v2h-3.1A7 7 0 0 1 13 18.9V22h-2v-3.1A7 7 0 0 1 5.1 13H2v-2h3.1A7 7 0 0 1 11 5.1V2zm1 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 3.15A1.85 1.85 0 1 1 12 13.85 1.85 1.85 0 0 1 12 10.15z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #chat-root .chat-prototype-mobile-pinpoint.is-active,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-pinpoint.is-active {
    border-color: var(--pf-chat-neon, #00cfff) !important;
    background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 18%, var(--dx-panel, #222) 82%) !important;
    color: var(--pf-chat-neon, #00cfff) !important;
  }

  #chat-root .chat-prototype-mobile-section,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section {
    display: grid !important;
    grid-template-rows: auto 2.18rem !important;
    align-self: stretch !important;
    gap: 0.14rem !important;
    min-width: 0 !important;
  }

  #chat-root .chat-prototype-mobile-section span,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section span {
    padding-left: 0.04rem !important;
    color: var(--dx-muted, #8a8a8a) !important;
    font-size: 0.48rem !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }

  #chat-root .chat-prototype-mobile-section select,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section select {
    height: 2.18rem !important;
    min-height: 2.18rem !important;
    padding: 0 0.38rem !important;
    border-radius: 7px !important;
    font-size: 0.66rem !important;
  }

  #chat-root .chat-prototype-mobile-vibe-form,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form {
    grid-template-columns: minmax(0, 1fr) 2.18rem !important;
    min-height: 2.18rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #chat-root .chat-prototype-mobile-vibe-form textarea,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form textarea {
    height: 2.18rem !important;
    min-height: 2.18rem !important;
    max-height: 5.75rem !important;
    padding: 0.55rem 0.62rem !important;
    border: 1px solid var(--dx-line, #3a3a3a) !important;
    border-radius: 7px !important;
    background: color-mix(in srgb, var(--dx-elevated, #333) 78%, #000 22%) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  #chat-root .chat-prototype-mobile-vibe-form .chat-send-icon,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form .chat-send-icon {
    width: 2.18rem !important;
    min-width: 2.18rem !important;
    height: 2.18rem !important;
    min-height: 2.18rem !important;
  }

  #chat-root .chat-prototype-mobile-vibe-status,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-status {
    left: 0.5rem !important;
    right: 2.6rem !important;
    bottom: -0.95rem !important;
    color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 88%, #fff 12%) !important;
    font-size: 0.55rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-preview-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-preview-grid {
    padding-bottom: calc(6.35rem + env(safe-area-inset-bottom)) !important;
  }

  body.is-mobile-vibe-keyboard #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-preview-grid,
  body.is-mobile-vibe-keyboard .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-preview-grid {
    padding-bottom: calc(4.45rem + env(safe-area-inset-bottom)) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor:not(.is-mobile-pinpoint) .chat-prototype-trait-dock,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor:not(.is-mobile-pinpoint) .chat-prototype-trait-dock {
    display: none !important;
  }
}

@media (max-width: 430px) {
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe {
    grid-template-columns: 2.08rem minmax(4.25rem, 0.3fr) minmax(0, 1fr) !important;
    gap: 0.26rem !important;
    padding: 0.28rem !important;
  }

  #chat-root .chat-prototype-mobile-pinpoint,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-pinpoint,
  #chat-root .chat-prototype-mobile-vibe-form .chat-send-icon,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form .chat-send-icon {
    width: 2.08rem !important;
    min-width: 2.08rem !important;
    height: 2.08rem !important;
    min-height: 2.08rem !important;
  }

  #chat-root .chat-prototype-mobile-section span,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section span {
    display: none !important;
  }

  #chat-root .chat-prototype-mobile-section,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section {
    grid-template-rows: 2.08rem !important;
  }

  #chat-root .chat-prototype-mobile-section select,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section select,
  #chat-root .chat-prototype-mobile-vibe-form textarea,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form textarea {
    height: 2.08rem !important;
    min-height: 2.08rem !important;
  }
}

#chat-root .chat-block-current.hidden {
  display: none !important;
  pointer-events: none !important;
}

/* Broad DX helper pass for AI tools and support surfaces */
#chat-root .chat-tool-context,
#chat-root .chat-sources--inline {
  display: grid !important;
  width: fit-content !important;
  max-width: min(650px, calc(100vw - 2rem)) !important;
  gap: 0.36rem !important;
  justify-items: start !important;
}

#chat-root .chat-section-map-card,
#chat-root .chat-seo-card,
#chat-root .chat-block-current,
#chat-root .chat-prototype-draft-actions,
#chat-root .chat-sources-menu .chat-source-row {
  border: 1px solid var(--dx-line-strong, #454545) !important;
  border-radius: 4px !important;
  background: var(--dx-panel, #2d2d2d) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18) !important;
}

#chat-root .chat-section-map-head,
#chat-root .chat-seo-head,
#chat-root .chat-block-current,
#chat-root .chat-prototype-draft-actions,
#chat-root .chat-sources-toggle {
  background: var(--dx-bar, #262626) !important;
}

#chat-root .chat-section-map-head,
#chat-root .chat-seo-head {
  padding: 0.5rem 0.62rem !important;
  border-bottom: 1px solid var(--dx-line, #3a3a3a) !important;
}

#chat-root .chat-tool-mode,
#chat-root .chat-section-map-key,
#chat-root .chat-section-map-meta,
#chat-root .chat-seo-head small,
#chat-root .chat-seo-check > em,
#chat-root .chat-prototype-draft-actions-meta,
#chat-root .chat-block-current-main p,
#chat-root .chat-source,
#chat-root .chat-seo-compose-note {
  font-family: var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
}

#chat-root .chat-tool-mode {
  color: var(--dx-label, #999999) !important;
  letter-spacing: 0.5px !important;
}

#chat-root .chat-section-map-head strong,
#chat-root .chat-seo-head strong,
#chat-root .chat-block-current-main strong,
#chat-root .chat-prototype-draft-actions-meta strong {
  color: var(--dx-copy, #e6e6e6) !important;
}

#chat-root .chat-section-map-media,
#chat-root .chat-seo-compose,
#chat-root .chat-seo-category,
#chat-root .chat-seo-missing,
#chat-root .chat-seo-quick-actions,
#chat-root .chat-prototype-draft-actions,
#chat-root .chat-section-media-item {
  border-radius: 3px !important;
}

#chat-root .chat-section-map-media,
#chat-root .chat-seo-compose,
#chat-root .chat-seo-category,
#chat-root .chat-seo-missing,
#chat-root .chat-seo-quick-actions,
#chat-root .chat-section-media-item {
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  background: var(--dx-elevated, #333333) !important;
}

#chat-root .chat-section-map-media-head,
#chat-root .chat-section-map-media-foot,
#chat-root .chat-section-media-actions,
#chat-root .chat-seo-compose-bar,
#chat-root .chat-seo-compose-actions,
#chat-root .chat-seo-actions {
  gap: 0.38rem !important;
}

#chat-root .chat-section-map-media-head,
#chat-root .chat-section-map-media-foot {
  padding: 0.38rem 0.42rem !important;
  border-radius: 3px !important;
  background: color-mix(in srgb, var(--dx-bar, #262626) 84%, var(--dx-panel, #2d2d2d) 16%) !important;
}

#chat-root .chat-section-media-actions {
  padding: 0 0.5rem 0.5rem !important;
}

#chat-root .chat-section-media-copy {
  padding: 0.5rem 0.5rem 0 !important;
}

#chat-root .chat-sources-menu {
  display: inline-grid !important;
  width: fit-content !important;
  max-width: min(650px, calc(100vw - 2rem)) !important;
  gap: 0.28rem !important;
  justify-items: start !important;
}

#chat-root .chat-sources-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 1.24rem !important;
  padding: 0 0.4rem !important;
  font-size: 0.52rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  width: fit-content !important;
  justify-self: start !important;
  border: 1px solid var(--dx-line-strong, #454545) !important;
  border-radius: 999px !important;
  background: var(--dx-elevated, #333333) !important;
  color: var(--dx-copy, #e6e6e6) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  list-style: none !important;
}

#chat-root .chat-sources-toggle::-webkit-details-marker {
  display: none !important;
}

#chat-root .chat-source,
#chat-root .chat-section-map-actions .btn-neon,
#chat-root .chat-block-current-actions .btn-neon,
#chat-root .chat-block-draft .btn-neon,
#chat-root .chat-seo-actions .btn-neon,
#chat-root .chat-seo-compose-actions .btn-neon,
#chat-root .chat-section-map-media-head .btn-neon,
#chat-root .chat-section-map-media-foot .btn-neon,
#chat-root .chat-section-media-actions .btn-neon,
#chat-root .chat-seo-compose-bar [data-seo-checklist-upload] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 1.7rem !important;
  padding: 0 0.62rem !important;
  border: 1px solid var(--dx-line-strong, #454545) !important;
  border-radius: 3px !important;
  background: var(--dx-elevated, #333333) !important;
  color: var(--dx-copy, #e6e6e6) !important;
  font-family: var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

#chat-root .chat-source {
  max-width: 100% !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

#chat-root .chat-sources-toggle:hover,
#chat-root .chat-source:hover,
#chat-root .chat-section-map-actions .btn-neon:hover,
#chat-root .chat-block-current-actions .btn-neon:hover,
#chat-root .chat-block-draft .btn-neon:hover,
#chat-root .chat-seo-actions .btn-neon:hover,
#chat-root .chat-seo-compose-actions .btn-neon:hover,
#chat-root .chat-section-map-media-head .btn-neon:hover,
#chat-root .chat-section-map-media-foot .btn-neon:hover,
#chat-root .chat-section-media-actions .btn-neon:hover,
#chat-root .chat-seo-compose-bar [data-seo-checklist-upload]:hover,
#chat-root .chat-sources-toggle:focus-visible,
#chat-root .chat-source:focus-visible,
#chat-root .chat-section-map-actions .btn-neon:focus-visible,
#chat-root .chat-block-current-actions .btn-neon:focus-visible,
#chat-root .chat-block-draft .btn-neon:focus-visible,
#chat-root .chat-seo-actions .btn-neon:focus-visible,
#chat-root .chat-seo-compose-actions .btn-neon:focus-visible,
#chat-root .chat-section-map-media-head .btn-neon:focus-visible,
#chat-root .chat-section-map-media-foot .btn-neon:focus-visible,
#chat-root .chat-section-media-actions .btn-neon:focus-visible,
#chat-root .chat-seo-compose-bar [data-seo-checklist-upload]:focus-visible {
  border-color: var(--dx-toggle, #0099ff) !important;
  background: var(--dx-elevated-hover, #3a3a3a) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dx-toggle, #0099ff) 40%, transparent) !important;
}

#chat-root .chat-seo-compose-actions [data-seo-checklist-save],
#chat-root .chat-block-current-actions .btn-neon--primary {
  border-color: var(--dx-toggle, #0099ff) !important;
  background: #222b34 !important;
  color: #f0f6fb !important;
}

#chat-root .chat-prototype-draft-actions {
  gap: 0.34rem !important;
  padding: 0.42rem !important;
}

#chat-root .chat-prototype-draft-actions-bar {
  gap: 0.34rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool {
  width: 1.72rem !important;
  min-width: 1.72rem !important;
  height: 1.72rem !important;
  min-height: 1.72rem !important;
  border: 1px solid var(--dx-line-strong, #454545) !important;
  border-radius: 3px !important;
  background: var(--dx-elevated, #333333) !important;
  color: var(--dx-copy, #e6e6e6) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool:focus-visible {
  border-color: var(--dx-toggle, #0099ff) !important;
  background: var(--dx-elevated-hover, #3a3a3a) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dx-toggle, #0099ff) 40%, transparent) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool--prepare {
  border-color: var(--dx-toggle, #0099ff) !important;
  color: #f0f6fb !important;
}

#chat-root .chat-block-current {
  gap: 0.42rem !important;
  padding: 0.5rem 0.58rem !important;
  align-items: start !important;
}

#chat-root .chat-block-current-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.34rem !important;
}

#chat-root .chat-seo-summary span,
#chat-root .chat-seo-check,
#chat-root .chat-seo-score,
#chat-root .chat-section-map-meta {
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 3px !important;
  background: color-mix(in srgb, var(--dx-elevated, #333333) 92%, #000 8%) !important;
  box-shadow: none !important;
}

#chat-root .chat-section-map-meta {
  padding: 0.16rem !important;
}

#chat-root .chat-section-map-meta span {
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 3px !important;
  background: #222b34 !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  #chat-root .chat-sources-toggle,
  #chat-root .chat-source,
  #chat-root .chat-section-map-actions .btn-neon,
  #chat-root .chat-block-current-actions .btn-neon,
  #chat-root .chat-block-draft .btn-neon,
  #chat-root .chat-seo-actions .btn-neon,
  #chat-root .chat-seo-compose-actions .btn-neon,
  #chat-root .chat-section-map-media-head .btn-neon,
  #chat-root .chat-section-map-media-foot .btn-neon,
  #chat-root .chat-section-media-actions .btn-neon,
  #chat-root .chat-seo-compose-bar [data-seo-checklist-upload] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Fullscreen HTML/CSS router defaults + DX workspace cleanup */
#chat-root .chat-prototype-workbench-route {
  display: grid !important;
  gap: 0.12rem !important;
  padding: 0.38rem 0.5rem !important;
  border: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--dx-bar, #262626) 82%, var(--dx-panel, #2d2d2d) 18%) !important;
}

#chat-root .chat-prototype-workbench-route.hidden {
  display: none !important;
}

#chat-root .chat-prototype-workbench-route-copy {
  display: grid !important;
  gap: 0.12rem !important;
  min-width: 0 !important;
}

#chat-root .chat-prototype-workbench-route-kicker {
  color: var(--dx-label, #999999) !important;
  font-family: var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.54rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

#chat-root .chat-prototype-workbench-route-copy strong {
  color: var(--dx-copy, #e6e6e6) !important;
  font-size: 0.72rem !important;
  line-height: 1.2 !important;
}

#chat-root .chat-prototype-workbench-route-copy small {
  color: var(--dx-muted, #8a8a8a) !important;
  font-family: var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 0.58rem !important;
  line-height: 1.3 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head {
  gap: 0.55rem !important;
  min-height: 3rem !important;
  padding: 0.42rem max(0.85rem, env(safe-area-inset-right)) 0.42rem max(0.85rem, env(safe-area-inset-left)) !important;
  border-bottom: 1px solid var(--dx-line-strong, #454545) !important;
  background: #111111 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-mode-toggle,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-tabs {
  border: 1px solid var(--dx-line-strong, #454545) !important;
  border-radius: 3px !important;
  background: #222b34 !important;
  padding: 0.08rem !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-mode-tab,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-tab {
  border-radius: 2px !important;
  color: #c3ccd6 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-mode-tab.is-active,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-tab.is-active {
  background: #0f2a3a !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dx-toggle, #0099ff) 56%, transparent) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls button:not(.chat-prototype-workbench-apply):not(.chat-prototype-workbench-target),
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls span:not(.chat-prototype-workbench-apply-label):not(.chat-prototype-workbench-target-label) {
  border-radius: 3px !important;
  border-color: var(--dx-line-strong, #454545) !important;
  background: #222b34 !important;
  color: #d2d9df !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls button[data-prototype-fullscreen],
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls button[data-prototype-close-workbench] {
  background: #1a242c !important;
  color: #f0f6fb !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-route {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0.5rem max(0.85rem, env(safe-area-inset-right)) 0.5rem max(0.85rem, env(safe-area-inset-left)) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 0 !important;
  background: #15191e !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html .chat-prototype-workbench-rail {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html .chat-prototype-mobile-vibe,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html .chat-prototype-targeting,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html .chat-prototype-library,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html .chat-prototype-text-page {
  display: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html .chat-prototype-draft-actions {
  min-width: min(100%, 24rem) !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html .chat-prototype-draft-actions-meta {
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  color: var(--dx-muted, #8a8a8a) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html .chat-prototype-preview-grid {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #14191e !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html .chat-prototype-live-shell {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-visual-pane:not(.hidden),
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-code-pane:not(.hidden),
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
  background: #14191e !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-code-pane:not(.hidden) {
  padding: 1rem 1.1rem 1.1rem !important;
}

@media (max-width: 760px) {
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.42rem !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-mode-toggle {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-tabs {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html .chat-prototype-workbench-rail {
    justify-content: stretch !important;
    padding-top: 0.38rem !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html .chat-prototype-draft-actions {
    width: 100% !important;
    min-width: 0 !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
    padding: 0.5rem !important;
  }
}

#chat-root .chat-prototype-mobile-topbar,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-topbar {
  display: none;
}

#chat-root .chat-prototype-mobile-image-tools,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-image-tools {
  display: none;
}

/* Phone editor redesign: make the HTML/CSS vibe prompt the primary control surface. */
@media (max-width: 760px) {
  body.is-chat-home:has(.chat-block-draft.is-mobile-editor) .chat-log {
    padding-inline: 0 !important;
    padding-bottom: 0 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html.chat-prototype-workbench.is-mobile-editor {
    --mobile-html-editor-dock-h: 4.45rem;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100dvh - 2.7rem - env(safe-area-inset-top)) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-workbench-head,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-workbench-head {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-workbench-route,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-workbench-route {
    min-height: 2.45rem !important;
    max-height: 2.9rem !important;
    padding: 0.42rem max(0.62rem, env(safe-area-inset-right)) 0.4rem max(0.62rem, env(safe-area-inset-left)) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--dx-line, #3a3a3a) !important;
    border-radius: 0 !important;
    background: #15191e !important;
    overflow: hidden !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-workbench-route-copy,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-workbench-route-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.06rem !important;
    min-width: 0 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-workbench-route-kicker,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-workbench-route-kicker {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 0.56rem !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-workbench-route-copy strong,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-workbench-route-copy strong {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 0.76rem !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-workbench-route-copy small,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-workbench-route-copy small {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-workbench-rail,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-workbench-rail,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html.chat-prototype-workbench.is-mobile-editor .chat-prototype-workbench-rail {
    position: static !important;
    display: block !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-visual-pane:not(.hidden),
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-visual-pane:not(.hidden) {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-preview-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-preview-grid {
    box-sizing: border-box !important;
    height: calc(100dvh - 7.2rem - env(safe-area-inset-top)) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0.42rem 0.42rem calc(var(--mobile-html-editor-dock-h) + env(safe-area-inset-bottom) + 0.95rem) !important;
    overflow: hidden !important;
    background: #14191e !important;
  }

  body.is-mobile-vibe-keyboard #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-preview-grid,
  body.is-mobile-vibe-keyboard .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-preview-grid {
    height: calc(100dvh - 4.85rem - env(safe-area-inset-top)) !important;
    padding-bottom: calc(var(--mobile-html-editor-dock-h) + env(safe-area-inset-bottom) + 0.7rem) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-inspect-hint,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-inspect-hint {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-trait-queue-chip,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-trait-queue-popover,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-trait-queue-chip,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-trait-queue-popover {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-device--desktop,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-device--desktop {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-device--desktop.is-active,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-device--desktop.is-active,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-device--phone,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-device--phone {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-device:not(.is-active),
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-device:not(.is-active) {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-live-shell,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-live-shell {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    border-radius: 4px !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-live-stage,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-live-stage {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: auto !important;
    padding-bottom: calc(var(--mobile-html-editor-dock-h) + env(safe-area-inset-bottom) + 0.95rem) !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-bottom: calc(var(--mobile-html-editor-dock-h) + env(safe-area-inset-bottom) + 1rem) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview .chat-prototype-preview-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview .chat-prototype-preview-grid {
    overflow: auto !important;
    padding-inline: 0.42rem !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview .chat-prototype-device--desktop.is-active,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview .chat-prototype-device--desktop.is-active {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview .chat-prototype-device--desktop .chat-prototype-live-shell,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview .chat-prototype-device--desktop .chat-prototype-live-shell {
    width: 1280px !important;
    max-width: 1280px !important;
    height: var(--mobile-desktop-preview-height, 2200px) !important;
    max-height: none !important;
    transform: scale(var(--mobile-desktop-preview-scale, 0.29)) !important;
    transform-origin: top left !important;
    border-radius: 4px !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview .chat-prototype-device--desktop .chat-prototype-live-stage,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview .chat-prototype-device--desktop .chat-prototype-live-stage {
    padding-bottom: 260px !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-topbar,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-topbar,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html.chat-prototype-workbench.is-mobile-editor .chat-prototype-mobile-topbar {
    display: grid !important;
    grid-template-columns: minmax(5.8rem, 0.68fr) minmax(0, 1fr) minmax(5.8rem, 0.62fr) !important;
    gap: 0.42rem !important;
    align-items: center !important;
    padding: 0.42rem max(0.58rem, env(safe-area-inset-right)) 0.44rem max(0.58rem, env(safe-area-inset-left)) !important;
    border-bottom: 1px solid var(--dx-line, #3a3a3a) !important;
    background: color-mix(in srgb, var(--dx-panel, #222) 94%, #000 6%) !important;
    z-index: 35 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-topbar .chat-prototype-mobile-settings,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-topbar .chat-prototype-mobile-settings {
    display: grid !important;
    grid-template-columns: 1.05rem minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.42rem !important;
    width: 100% !important;
    height: 2.2rem !important;
    min-height: 2.2rem !important;
    padding: 0 0.68rem !important;
    border: 1px solid var(--dx-line, #3a3a3a) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--dx-elevated, #333) 80%, #000 20%) !important;
    color: var(--dx-copy, #e6e6e6) !important;
    box-shadow: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings strong,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings strong {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html.chat-prototype-workbench.is-mobile-editor .chat-prototype-mobile-vibe {
    position: fixed !important;
    left: max(0.48rem, env(safe-area-inset-left)) !important;
    right: max(0.48rem, env(safe-area-inset-right)) !important;
    bottom: calc(var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 0.58rem) !important;
    z-index: 320 !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-areas: "pinpoint prompt" !important;
    align-items: stretch !important;
    gap: 0.34rem !important;
    width: auto !important;
    max-width: none !important;
    min-height: 48px !important;
    padding: 0.3rem 0.34rem !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 24%, var(--dx-line, #3a3a3a) 76%) !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)), color-mix(in srgb, var(--dx-panel, #222) 92%, #000 8%) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe:focus-within,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe:focus-within {
    border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 54%, var(--dx-line, #3a3a3a) 46%) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42), 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon, #00cfff) 26%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  body.is-mobile-vibe-keyboard #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe,
  body.is-mobile-vibe-keyboard .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe {
    bottom: calc(var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 0.32rem) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-pinpoint,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-pinpoint {
    grid-area: pinpoint !important;
    align-self: center !important;
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: 1px solid var(--dx-line, #3a3a3a) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--dx-elevated, #333) 70%, #000 30%) !important;
    color: color-mix(in srgb, var(--dx-copy, #e6e6e6) 82%, var(--pf-chat-neon, #00cfff) 18%) !important;
    box-shadow: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-pinpoint.is-active,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-pinpoint.is-active {
    border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 62%, var(--dx-line, #3a3a3a) 38%) !important;
    background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 14%, var(--dx-elevated, #333) 86%) !important;
    color: var(--pf-chat-neon, #00cfff) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings span,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings span {
    width: 1.02rem !important;
    height: 1.02rem !important;
    background: currentColor !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19.4 13.5a7.8 7.8 0 0 0 .05-1 7.8 7.8 0 0 0-.05-1l2.05-1.6-2-3.46-2.42.98a7.2 7.2 0 0 0-1.72-1l-.36-2.58h-4l-.36 2.58a7.2 7.2 0 0 0-1.72 1l-2.42-.98-2 3.46 2.05 1.6a7.8 7.8 0 0 0-.05 1 7.8 7.8 0 0 0 .05 1l-2.05 1.6 2 3.46 2.42-.98a7.2 7.2 0 0 0 1.72 1l.36 2.58h4l.36-2.58a7.2 7.2 0 0 0 1.72-1l2.42.98 2-3.46-2.05-1.6ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19.4 13.5a7.8 7.8 0 0 0 .05-1 7.8 7.8 0 0 0-.05-1l2.05-1.6-2-3.46-2.42.98a7.2 7.2 0 0 0-1.72-1l-.36-2.58h-4l-.36 2.58a7.2 7.2 0 0 0-1.72 1l-2.42-.98-2 3.46 2.05 1.6a7.8 7.8 0 0 0-.05 1 7.8 7.8 0 0 0 .05 1l-2.05 1.6 2 3.46 2.42-.98a7.2 7.2 0 0 0 1.72 1l.36 2.58h4l.36-2.58a7.2 7.2 0 0 0 1.72-1l2.42.98 2-3.46-2.05-1.6ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings.is-active,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings.is-active {
    border-color: var(--pf-chat-neon, #00cfff) !important;
    background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 18%, var(--dx-panel, #222) 82%) !important;
    color: var(--pf-chat-neon, #00cfff) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section {
    grid-area: auto !important;
    display: grid !important;
    grid-template-rows: 2.2rem !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section span,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview span,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview span,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section span {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section select,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview select,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview select,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section select {
    height: 2.2rem !important;
    min-height: 2.2rem !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 0.64rem !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form {
    grid-area: prompt !important;
    align-self: stretch !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    align-items: center !important;
    gap: 0.3rem !important;
    min-height: 38px !important;
    padding: 0.14rem 0.14rem 0.14rem 0.42rem !important;
    border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 84%, #fff 16%) !important;
    border-radius: 9px !important;
    background: color-mix(in srgb, var(--dx-elevated, #333) 54%, #000 46%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form textarea,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form textarea {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 8rem !important;
    padding: 0 0.34rem !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--dx-copy, #e6e6e6) !important;
    font-size: 16px !important;
    line-height: 32px !important;
    resize: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form textarea::placeholder,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form textarea::placeholder {
    color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 78%, var(--pf-chat-neon, #00cfff) 22%) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form .chat-send-icon,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form .chat-send-icon {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--pf-chat-neon, #00cfff) !important;
    color: #00161b !important;
    box-shadow: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form .chat-send-icon::before,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form .chat-send-icon::before {
    width: 0.84rem !important;
    height: 0.84rem !important;
    background: currentColor !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.6 19.4 11h-4.7v9.4H9.3V11H4.6L12 3.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.6 19.4 11h-4.7v9.4H9.3V11H4.6L12 3.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form .chat-send-icon::after,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form .chat-send-icon::after {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-status,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-status {
    position: absolute !important;
    left: 0.18rem !important;
    right: 0.18rem !important;
    top: -1.08rem !important;
    bottom: auto !important;
    height: 0.82rem !important;
    min-height: 0 !important;
    overflow: hidden !important;
    color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 86%, #fff 14%) !important;
    font-size: 0.58rem !important;
    line-height: 0.82rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-status:empty,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-status:empty {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html.chat-prototype-workbench.is-mobile-editor .chat-prototype-mobile-image-tools {
    position: fixed !important;
    left: max(0.48rem, env(safe-area-inset-left)) !important;
    right: max(0.48rem, env(safe-area-inset-right)) !important;
    bottom: calc(var(--chat-keyboard-offset, 0px) + var(--mobile-html-editor-dock-h, 4.45rem) + env(safe-area-inset-bottom) + 1.02rem) !important;
    z-index: 318 !important;
    display: grid !important;
    gap: 0.42rem !important;
    box-sizing: border-box !important;
    max-height: min(44dvh, 350px) !important;
    overflow: auto !important;
    padding: 0.48rem !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 52%, var(--dx-line, #3a3a3a) 48%) !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--dx-panel, #222) 94%, #000 6%) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateY(0) scale(1) !important;
    transition: opacity 120ms ease, transform 120ms ease !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-tools.hidden,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-tools.hidden {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 2rem !important;
    align-items: center !important;
    gap: 0.42rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head strong,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #edf3f7 !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head button,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head button {
    display: grid !important;
    place-items: center !important;
    width: 2rem !important;
    height: 2rem !important;
    padding: 0 !important;
    border: 1px solid #3a444f !important;
    border-radius: 7px !important;
    background: #15191e !important;
    color: #d9e2ea !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-layout,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-layout {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.32rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-layout button,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-layout button {
    min-width: 0 !important;
    height: 2.15rem !important;
    padding: 0 0.42rem !important;
    border: 1px solid #3a444f !important;
    border-radius: 7px !important;
    background: #15191e !important;
    color: #edf3f7 !important;
    font-size: 0.74rem !important;
    font-weight: 760 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-layout button.is-active,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-layout button.is-active {
    border-color: var(--pf-chat-neon, #00cfff) !important;
    background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 16%, #15191e 84%) !important;
    color: var(--pf-chat-neon, #00cfff) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-grid {
    display: grid !important;
    gap: 0.34rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field {
    display: grid !important;
    grid-template-columns: minmax(4.4rem, 0.45fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.42rem !important;
    min-height: 2rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field span,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field span {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #7d8994 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    text-transform: lowercase !important;
    white-space: nowrap !important;
  }

	  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field select,
	  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0 1.35rem 0 0.58rem !important;
    border: 1px solid #3a444f !important;
    border-radius: 6px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
      #0f1419 !important;
    color: #edf3f7 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238fa0ad' d='M1.2 1.4 6 6.2l4.8-4.8'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 0 0, calc(100% - 0.5rem) 50% !important;
    background-size: auto, 0.55rem !important;
	  }

	  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field--range,
	  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field--range {
	    grid-template-columns: minmax(3.65rem, 0.38fr) minmax(0, 1fr) 4.25rem !important;
	  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="range"],
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
    accent-color: var(--pf-chat-neon, #00cfff) !important;
  }

	  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="text"],
	  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="number"],
	  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="url"],
	  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="text"],
	  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="number"],
	  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="url"] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0 0.58rem !important;
    border: 1px solid #3a444f !important;
    border-radius: 6px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
      #0f1419 !important;
    color: #edf3f7 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 2rem !important;
	  }

	  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="number"],
	  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="number"] {
	    padding-inline: 0.28rem !important;
	    text-align: center !important;
	  }

	  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="text"]:focus,
	  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="number"]:focus,
	  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="url"]:focus,
	  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field select:focus,
	  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="text"]:focus,
	  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="number"]:focus,
	  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="url"]:focus,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field select:focus {
    outline: none !important;
    border-color: var(--pf-chat-neon, #00cfff) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon, #00cfff) 48%, transparent) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-tools p,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-tools p {
    margin: 0 !important;
    color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 78%, var(--pf-chat-neon, #00cfff) 22%) !important;
    font-size: 0.62rem !important;
    line-height: 1.25 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-live-stage .is-pf-mobile-layout-dragging,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-live-stage .is-pf-mobile-layout-dragging {
    cursor: grabbing !important;
    touch-action: none !important;
    will-change: transform !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-image-resize-handle,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-image-drag-handle,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-image-resize-handle,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-image-drag-handle {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 78%, #00161b 22%) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, #00161b 70%, var(--pf-chat-neon, #00cfff) 30%) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    opacity: 0.94 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-image-drag-handle,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-image-drag-handle {
    pointer-events: auto !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-image-drag-handle.is-active,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-image-drag-handle.is-active {
    background: var(--pf-chat-neon, #00cfff) !important;
    border-color: #00161b !important;
    box-shadow: 0 12px 30px rgba(0, 207, 255, 0.26), 0 0 0 3px color-mix(in srgb, var(--pf-chat-neon, #00cfff) 24%, transparent) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-image-drag-handle.is-active::before,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-image-drag-handle.is-active::before {
    background: #00161b !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.has-mobile-image-pending-move .chat-prototype-image-drag-handle,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-mobile-image-pending-move .chat-prototype-image-drag-handle {
    background: #f7b84b !important;
    border-color: #1d1300 !important;
    box-shadow: 0 12px 30px rgba(247, 184, 75, 0.28), 0 0 0 3px rgba(247, 184, 75, 0.22) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-image-resize-handle::before,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-image-drag-handle::before,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-image-resize-handle::before,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-image-drag-handle::before {
    content: "" !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: auto !important;
    background: var(--pf-chat-neon, #00cfff) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-image-drag-handle::before,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-image-drag-handle::before {
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M13 5.8V3l5 5-5 5v-2.8h-2V13l-5-5 5-5v2.8h2Zm-7.2 7.2H3l5 5 5-5h-2.8v-2H13l-5-5-5 5h2.8v2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M13 5.8V3l5 5-5 5v-2.8h-2V13l-5-5 5-5v2.8h2Zm-7.2 7.2H3l5 5 5-5h-2.8v-2H13l-5-5-5 5h2.8v2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-image-resize-handle::before,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-image-resize-handle::before {
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 19h4v-2H8.4l4.8-4.8-1.4-1.4L7 15.6V15H5v4Zm10-14v2h.6l-4.8 4.8 1.4 1.4L17 8.4V9h2V5h-4Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 19h4v-2H8.4l4.8-4.8-1.4-1.4L7 15.6V15H5v4Zm10-14v2h.6l-4.8 4.8 1.4 1.4L17 8.4V9h2V5h-4Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-drag-armed .chat-prototype-mobile-image-tools,
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-dragging .chat-prototype-mobile-image-tools,
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-scaling .chat-prototype-mobile-image-tools,
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-pinching .chat-prototype-mobile-image-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-drag-armed .chat-prototype-mobile-image-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-dragging .chat-prototype-mobile-image-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-scaling .chat-prototype-mobile-image-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-pinching .chat-prototype-mobile-image-tools {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(0.85rem) scale(0.98) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-drag-armed .chat-prototype-mobile-vibe,
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-dragging .chat-prototype-mobile-vibe,
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-scaling .chat-prototype-mobile-vibe,
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-pinching .chat-prototype-mobile-vibe,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-drag-armed .chat-prototype-mobile-vibe,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-dragging .chat-prototype-mobile-vibe,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-scaling .chat-prototype-mobile-vibe,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-pinching .chat-prototype-mobile-vibe {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + 0.5rem)) !important;
  }

	  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-live-stage [data-pf-inspect-kind="image"],
	  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-live-stage [data-pf-inspect-kind="image"] img,
	  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-live-stage [data-pf-inspect-kind="image"],
	  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-live-stage [data-pf-inspect-kind="image"] img {
	    touch-action: none !important;
	    user-select: none !important;
	    -webkit-user-drag: none !important;
	    -webkit-touch-callout: none !important;
	  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft--existing-html.chat-prototype-workbench.is-mobile-editor .chat-prototype-text-page.is-open {
    display: block !important;
    position: fixed !important;
    inset: auto max(0.48rem, env(safe-area-inset-right)) calc(var(--chat-keyboard-offset, 0px) + var(--mobile-html-editor-dock-h) + env(safe-area-inset-bottom) + 1.1rem) max(0.48rem, env(safe-area-inset-left)) !important;
    z-index: 315 !important;
    width: auto !important;
    max-width: none !important;
    pointer-events: auto !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-drag-armed .chat-prototype-text-page.is-open,
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-dragging .chat-prototype-text-page.is-open,
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-scaling .chat-prototype-text-page.is-open,
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-pinching .chat-prototype-text-page.is-open,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-drag-armed .chat-prototype-text-page.is-open,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-dragging .chat-prototype-text-page.is-open,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-scaling .chat-prototype-text-page.is-open,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-pinching .chat-prototype-text-page.is-open {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(0.85rem) scale(0.98) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open .chat-prototype-text-page-toggle,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open .chat-prototype-text-page-toggle {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open .chat-prototype-text-page-dropdown,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open .chat-prototype-text-page-dropdown {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open .chat-prototype-text-page-panel,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open .chat-prototype-text-page-panel {
    position: static !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(55dvh, 430px) !important;
    overflow: auto !important;
    padding: 0.46rem !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open .chat-prototype-text-page-meta,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open .chat-prototype-text-page-meta,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open .chat-prototype-text-page-row--margins,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open .chat-prototype-text-page-row--settings,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open .chat-prototype-text-page-row--margins,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open .chat-prototype-text-page-row--settings {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open .chat-prototype-text-page-row--font,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-text-page.is-open .chat-prototype-text-page-row--font {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet {
    display: block !important;
    position: fixed !important;
    inset: auto max(0.48rem, env(safe-area-inset-right)) calc(var(--chat-keyboard-offset, 0px) + var(--mobile-html-editor-dock-h, 4.45rem) + env(safe-area-inset-bottom) + 1.06rem) max(0.48rem, env(safe-area-inset-left)) !important;
    z-index: 10020 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet.hidden {
    display: none !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-toggle {
    display: none !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-dropdown,
  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-panel {
    width: 100% !important;
    max-width: none !important;
    pointer-events: auto !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-panel {
    position: static !important;
    display: grid !important;
    gap: 0.34rem !important;
    max-height: min(52dvh, 430px) !important;
    overflow: auto !important;
    padding: 0.5rem !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 54%, var(--dx-line, #3a3a3a) 46%) !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--dx-panel, #222) 94%, #000 6%) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.52) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-meta,
  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.34rem !important;
    padding: 0.42rem !important;
    border: 1px solid #343b43 !important;
    border-radius: 8px !important;
    background: #15191e !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-meta {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-source {
    margin: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #b8c2cc !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-transform: none !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-fields,
  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-layout {
    display: grid !important;
    gap: 0.34rem !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-row--margins,
  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-row--settings,
  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-row--font {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-scope,
  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-field {
    display: grid !important;
    grid-template-columns: minmax(6.9rem, 0.72fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.42rem !important;
    min-height: 2rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-field-label,
  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-scope > span {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #7d8994 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    text-transform: lowercase !important;
    white-space: nowrap !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-field-label {
    font-size: 0 !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet [data-text-page-field="pageMarginTop"] .chat-prototype-text-page-field-label::before {
    content: "margin-top" !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet [data-text-page-field="pageMarginBottom"] .chat-prototype-text-page-field-label::before {
    content: "margin-bottom" !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet [data-text-page-field="pageMarginLeft"] .chat-prototype-text-page-field-label::before {
    content: "margin-left" !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet [data-text-page-field="pageMarginRight"] .chat-prototype-text-page-field-label::before {
    content: "margin-right" !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet [data-text-page-field="pageMaxWidth"] .chat-prototype-text-page-field-label::before {
    content: "max-width" !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet [data-text-page-field="pageTextFontSize"] .chat-prototype-text-page-field-label::before {
    content: "font-size" !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet [data-text-page-field="pageTextFontColor"] .chat-prototype-text-page-field-label::before {
    content: "color" !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet [data-text-page-field="pageScrollType"] .chat-prototype-text-page-field-label::before {
    content: "scroll" !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet [data-text-page-field="pageTextFont"] .chat-prototype-text-page-field-label::before {
    content: "font-family" !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-field-label::before {
    display: inline !important;
    color: #7d8994 !important;
    font-size: 0.7rem !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-source-badge {
    display: none !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-scope select,
  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-field select,
  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-field input[type="text"] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0 1.35rem 0 0.58rem !important;
    border: 1px solid #3a444f !important;
    border-radius: 6px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
      #0f1419 !important;
    color: #edf3f7 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238fa0ad' d='M1.2 1.4 6 6.2l4.8-4.8'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 0 0, calc(100% - 0.5rem) 50% !important;
    background-size: auto, 0.55rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-field input[type="text"] {
    padding-right: 0.58rem !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)) !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-field input[type="color"] {
    box-sizing: border-box !important;
    width: 2.45rem !important;
    min-width: 2.45rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0.14rem !important;
    border: 1px solid #3a444f !important;
    border-radius: 6px !important;
    background: #0f1419 !important;
    justify-self: start !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-scope select:focus,
  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-field select:focus,
  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-field input:focus {
    outline: none !important;
    border-color: var(--pf-chat-neon, #00cfff) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon, #00cfff) 48%, transparent) !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet {
    display: block !important;
    position: fixed !important;
    inset: auto max(0.48rem, env(safe-area-inset-right)) calc(var(--chat-keyboard-offset, 0px) + var(--mobile-html-editor-dock-h, 4.45rem) + env(safe-area-inset-bottom) + 1.35rem) max(0.48rem, env(safe-area-inset-left)) !important;
    z-index: 10030 !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet.hidden {
    display: block !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet .chat-prototype-library-picker,
  body.is-mobile-library-open .chat-prototype-library--mobile-sheet .chat-prototype-library-popover {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet .chat-prototype-library-search-btn {
    display: none !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet .chat-prototype-library-popover {
    position: static !important;
    display: grid !important;
    gap: 0.36rem !important;
    max-height: min(55dvh, 430px) !important;
    overflow: hidden !important;
    padding: 0.42rem !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 54%, var(--dx-line, #3a3a3a) 46%) !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--dx-panel, #222) 94%, #000 6%) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.52) !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet .chat-prototype-library-form.chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 0.3rem !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 0.14rem 0.14rem 0.14rem 0.42rem !important;
    border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 84%, #fff 16%) !important;
    border-radius: 9px !important;
    background: color-mix(in srgb, var(--dx-elevated, #333) 54%, #000 46%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet .chat-prototype-library-form input[data-prototype-library-search] {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 0.34rem !important;
    color: var(--dx-copy, #e6e6e6) !important;
    font-size: 16px !important;
    line-height: 32px !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet .chat-prototype-library-form .chat-send-icon {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet .chat-prototype-library-status {
    padding: 0 0.12rem !important;
    color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 68%, #ffffff 32%) !important;
    font-size: 0.62rem !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet .chat-prototype-library-menu {
    display: grid !important;
    gap: 0.28rem !important;
    max-height: min(42dvh, 320px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet .chat-prototype-library-menu.hidden {
    display: none !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet .chat-prototype-library-option {
    grid-template-columns: 3.45rem minmax(0, 1fr) !important;
    min-height: 4rem !important;
    padding: 0.34rem !important;
    border-color: color-mix(in srgb, var(--dx-line, #3a3a3a) 72%, transparent) !important;
    background: color-mix(in srgb, var(--dx-elevated, #333) 70%, #000 30%) !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet .chat-prototype-library-option img {
    width: 3.45rem !important;
    height: 3.45rem !important;
    border-radius: 6px !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet .chat-prototype-library-option-copy strong {
    font-size: 0.72rem !important;
  }

  body.is-mobile-library-open .chat-prototype-library--mobile-sheet .chat-prototype-library-option-copy small {
    font-size: 0.58rem !important;
  }
}

@media (max-width: 430px) {
  #chat-root .chat-block-draft.is-mobile-editor,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor {
    --mobile-html-editor-dock-h: 4.35rem;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-preview-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-preview-grid {
    padding-inline: 0.32rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe {
    left: max(0.38rem, env(safe-area-inset-left)) !important;
    right: max(0.38rem, env(safe-area-inset-right)) !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 0.32rem !important;
    padding: 0.3rem 0.34rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-pinpoint,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-pinpoint {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}

@media (max-width: 760px), (pointer: coarse) and (max-height: 560px) {
  #chat-root .chat-block-draft.is-mobile-editor.has-trait-selection .chat-prototype-trait-dock,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-trait-selection .chat-prototype-trait-dock {
    display: block !important;
    position: fixed !important;
    left: max(0.48rem, env(safe-area-inset-left)) !important;
    right: max(0.48rem, env(safe-area-inset-right)) !important;
    bottom: calc(var(--chat-keyboard-offset, 0px) + var(--mobile-html-editor-dock-h, 4.45rem) + env(safe-area-inset-bottom) + 0.78rem) !important;
    z-index: 316 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock-bar,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-trait-inline-tools,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-inspector-actions,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-image-tools,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-trait-note,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock-bar,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-trait-inline-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-inspector-actions,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-image-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-trait-note {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.has-trait-selection .chat-prototype-trait-drawer,
  #chat-root .chat-block-draft.is-mobile-editor.has-trait-selection .chat-prototype-trait-drawer.hidden,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-trait-selection .chat-prototype-trait-drawer,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-trait-selection .chat-prototype-trait-drawer.hidden {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.has-trait-selection .chat-prototype-block-tools,
  #chat-root .chat-block-draft.is-mobile-editor.has-trait-selection .chat-prototype-block-tools.hidden,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-trait-selection .chat-prototype-block-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-trait-selection .chat-prototype-block-tools.hidden {
    display: grid !important;
    gap: 0.34rem !important;
    box-sizing: border-box !important;
    max-height: min(33dvh, 210px) !important;
    overflow: auto !important;
    padding: 0.42rem !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 44%, var(--dx-line, #3a3a3a) 56%) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--dx-panel, #222) 94%, #000 6%) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    pointer-events: auto !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-block-tools::before,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-block-tools::before {
    content: "Element CSS" !important;
    color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 78%, var(--pf-chat-neon, #00cfff) 22%) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-block-tools-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-block-tools-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(4.8rem, 1fr)) !important;
    gap: 0.34rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-block-tools label,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-block-tools label {
    min-width: 0 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-block-tools span,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-block-tools span {
    font-size: 0.58rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-block-tools select,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-block-tools input[type="range"],
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-block-tools input[type="number"],
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-block-tools select,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-block-tools input[type="range"],
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-block-tools input[type="number"] {
    min-height: 1.82rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-drag-armed .chat-prototype-trait-dock,
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-dragging .chat-prototype-trait-dock,
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-scaling .chat-prototype-trait-dock,
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-pinching .chat-prototype-trait-dock,
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-move-mode .chat-prototype-trait-dock,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-drag-armed .chat-prototype-trait-dock,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-dragging .chat-prototype-trait-dock,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-scaling .chat-prototype-trait-dock,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-pinching .chat-prototype-trait-dock,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-move-mode .chat-prototype-trait-dock {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-move-mode .chat-prototype-live-stage,
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-dragging .chat-prototype-live-stage,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-move-mode .chat-prototype-live-stage,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-dragging .chat-prototype-live-stage {
    overflow: hidden !important;
    touch-action: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-move-mode .chat-prototype-live-stage [data-pf-inspect-kind="image"],
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-move-mode .chat-prototype-live-stage [data-pf-inspect-kind="image"] img,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-move-mode .chat-prototype-live-stage [data-pf-inspect-kind="image"],
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-move-mode .chat-prototype-live-stage [data-pf-inspect-kind="image"] img {
    touch-action: none !important;
  }
}

/* Phone chat/prompt viewport lock. */
@media (max-width: 760px) {
  body.is-chat-home {
    --mobile-chat-top-h: calc(2.35rem + env(safe-area-inset-top));
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.is-chat-home .main {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.is-chat-home .main-top {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 340 !important;
    display: flex !important;
    align-items: center !important;
    height: var(--mobile-chat-top-h) !important;
    min-height: var(--mobile-chat-top-h) !important;
    max-height: var(--mobile-chat-top-h) !important;
    padding: calc(env(safe-area-inset-top) + 0.16rem) calc(max(0.45rem, env(safe-area-inset-right)) + 7.35rem) 0.16rem calc(max(0.45rem, env(safe-area-inset-left)) + 2.15rem) !important;
    border-bottom: 1px solid var(--dx-line, #2b2b2b) !important;
    background: #0f0f10 !important;
    transform: none !important;
  }

  body.is-chat-home .main-top-label {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.is-chat-home .sidebar-toggle,
  body.is-chat-home.is-sidebar-collapsed .sidebar-toggle,
  body.is-chat-home:not(.is-sidebar-collapsed) .sidebar-toggle {
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 0.16rem) !important;
    left: max(0.45rem, env(safe-area-inset-left)) !important;
    width: 1.72rem !important;
    min-width: 1.72rem !important;
    max-width: 1.72rem !important;
    height: 1.72rem !important;
    min-height: 1.72rem !important;
    max-height: 1.72rem !important;
    padding: 0 !important;
    border-radius: 6px !important;
    z-index: 360 !important;
    transform: none !important;
  }

  body.is-chat-home .sidebar-toggle::before {
    width: 0.58rem !important;
    height: 0.58rem !important;
    transform: translate(-50%, -50%) rotate(225deg) !important;
  }

  body.is-chat-home #chat-account-scope,
  body.is-chat-home .chat-top-hire,
  body.is-chat-home #admin-preview-toggle {
    position: fixed !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: calc(env(safe-area-inset-top) + 0.16rem) !important;
    height: 1.72rem !important;
    min-height: 1.72rem !important;
    max-height: 1.72rem !important;
    border-radius: 6px !important;
    transform: none !important;
    z-index: 355 !important;
  }

  body.is-chat-home #chat-account-scope {
    right: max(0.45rem, env(safe-area-inset-right)) !important;
    width: 1.72rem !important;
    min-width: 1.72rem !important;
    max-width: 1.72rem !important;
    padding: 0 !important;
  }

  body.is-chat-home #admin-preview-toggle {
    right: calc(max(0.45rem, env(safe-area-inset-right)) + 2rem) !important;
    width: 1.72rem !important;
    min-width: 1.72rem !important;
    max-width: 1.72rem !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  body.is-chat-home #admin-preview-toggle::after {
    content: "A" !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: inherit !important;
  }

  body.is-chat-home .chat-top-hire {
    right: calc(max(0.45rem, env(safe-area-inset-right)) + 4.05rem) !important;
    min-width: 3rem !important;
    max-width: 3.15rem !important;
    padding: 0 0.42rem !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  body.is-chat-home .chat-top-hire::after {
    content: "Expert" !important;
    font-size: 0.54rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: inherit !important;
  }

  body.is-chat-home .chat-root--home,
  body.is-chat-home .chat-root--home .chat-shell,
  body.is-chat-home .chat-root--home .chat-body,
  body.is-chat-home .chat-root--home .chat-layout,
  body.is-chat-home .chat-root--home .chat-main {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.is-chat-home .chat-root--home .chat-log {
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: var(--mobile-chat-top-h, calc(2.35rem + env(safe-area-inset-top))) !important;
    padding-bottom: calc(var(--chat-compose-height, 72px) + var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 1rem) !important;
    overflow: auto !important;
    scroll-padding-top: var(--mobile-chat-top-h, calc(2.35rem + env(safe-area-inset-top))) !important;
    scroll-padding-bottom: calc(var(--chat-compose-height, 72px) + var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 1rem) !important;
  }

  body.is-chat-home .chat-root--home .chat-compose {
    position: fixed !important;
    left: max(0.48rem, env(safe-area-inset-left)) !important;
    right: max(0.48rem, env(safe-area-inset-right)) !important;
    bottom: calc(var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 0.42rem) !important;
    z-index: 345 !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  body.is-chat-home .chat-root--home #chat-form.chat-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

@media (pointer: coarse) and (max-height: 560px) {
  body.is-chat-home:has(.chat-block-draft.is-mobile-editor) .chat-log {
    padding-inline: 0 !important;
    padding-bottom: 0 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor {
    --mobile-html-editor-dock-h: 3.7rem;
    grid-template-rows: minmax(0, 1fr) !important;
    min-height: calc(100dvh - env(safe-area-inset-top)) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-workbench-head,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-workbench-route,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-topbar,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-insert-toolbar,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-workbench-head,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-workbench-route,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-topbar,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-insert-toolbar {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-workbench-rail,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-workbench-rail {
    position: static !important;
    display: block !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-visual-pane:not(.hidden),
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-visual-pane:not(.hidden) {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-device:not(.is-active),
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-device:not(.is-active) {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-device.is-active,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-device.is-active {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-live-shell,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-live-shell {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    border-radius: 4px !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-live-stage,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-live-stage {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: auto !important;
    padding-bottom: calc(var(--mobile-html-editor-dock-h, 3.7rem) + env(safe-area-inset-bottom) + 0.45rem) !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-bottom: calc(var(--mobile-html-editor-dock-h, 3.7rem) + env(safe-area-inset-bottom) + 0.65rem) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-preview-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-preview-grid {
    height: calc(100dvh - env(safe-area-inset-top)) !important;
    min-height: 0 !important;
    padding: 0.22rem 0.22rem calc(var(--mobile-html-editor-dock-h) + env(safe-area-inset-bottom) + 0.32rem) !important;
    overflow: hidden !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe {
    position: fixed !important;
    left: max(0.38rem, env(safe-area-inset-left)) !important;
    right: max(0.38rem, env(safe-area-inset-right)) !important;
    bottom: calc(var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 0.26rem) !important;
    z-index: 320 !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-areas: "pinpoint prompt" !important;
    align-items: stretch !important;
    gap: 0.3rem !important;
    width: auto !important;
    max-width: none !important;
    min-height: 40px !important;
    padding: 0.22rem 0.28rem !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 24%, var(--dx-line, #3a3a3a) 76%) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--dx-panel, #222) 92%, #000 8%) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-pinpoint,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-pinpoint {
    grid-area: pinpoint !important;
    align-self: center !important;
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: 1px solid var(--dx-line, #3a3a3a) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--dx-elevated, #333) 70%, #000 30%) !important;
    color: color-mix(in srgb, var(--dx-copy, #e6e6e6) 82%, var(--pf-chat-neon, #00cfff) 18%) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form {
    grid-area: prompt !important;
    align-self: stretch !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px !important;
    align-items: center !important;
    gap: 0.28rem !important;
    min-height: 36px !important;
    padding: 0.12rem 0.12rem 0.12rem 0.38rem !important;
    border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 84%, #fff 16%) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--dx-elevated, #333) 54%, #000 46%) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form textarea,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form textarea {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 5.5rem !important;
    padding: 0 0.32rem !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--dx-copy, #e6e6e6) !important;
    font-size: 16px !important;
    line-height: 28px !important;
    resize: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form .chat-send-icon,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe-form .chat-send-icon {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--pf-chat-neon, #00cfff) !important;
    color: #00161b !important;
    box-shadow: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.has-trait-selection .chat-prototype-trait-dock,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-trait-selection .chat-prototype-trait-dock {
    bottom: calc(var(--chat-keyboard-offset, 0px) + var(--mobile-html-editor-dock-h, 3.7rem) + env(safe-area-inset-bottom) + 0.42rem) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.has-trait-selection .chat-prototype-block-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-trait-selection .chat-prototype-block-tools {
    max-height: min(36dvh, 150px) !important;
    padding: 0.34rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-block-tools-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-block-tools-grid {
    grid-template-columns: repeat(6, minmax(4.35rem, 1fr)) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Fullscreen-only HTML/CSS editor shell. */
body.is-block-draft-fullscreen {
  overflow: hidden !important;
  background: #080b0d !important;
}

.chat-media.chat-media--block-draft-fullscreen {
  inset: 0 !important;
  z-index: 10040 !important;
  padding: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0)),
    #0b0f12 !important;
}

.chat-media.chat-media--block-draft-fullscreen > .chat-prototype-workbench--fullscreen-only {
  box-sizing: border-box !important;
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  /* Flush: chrome bar sits on the canvas edge (safe-area only on notched devices). */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-route {
  display: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head {
  --wb-control-h: 2rem;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 2.5rem !important;
  padding: 0.26rem 0.34rem !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #3a3a3a !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    color-mix(in srgb, var(--dx-panel, #202020) 88%, #000 12%) !important;
  box-shadow: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mode-toggle,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device-tabs {
  height: var(--wb-control-h) !important;
  padding: 0.14rem !important;
  border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 28%, var(--dx-line, #3a3a3a) 72%) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--dx-elevated, #333) 54%, #000 46%) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mode-tab,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device-tab,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-view-controls button:not(.chat-prototype-workbench-apply):not(.chat-prototype-workbench-target):not(.chat-prototype-zoom-fit-btn):not(.chat-prototype-grid-toggle):not(.chat-prototype-grid-autoplace),
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-view-controls span:not(.chat-prototype-workbench-apply-label):not(.chat-prototype-workbench-target-label):not(.chat-prototype-grid-scale-label):not([data-prototype-zoom-label]) {
  width: var(--wb-control-h) !important;
  min-width: var(--wb-control-h) !important;
  max-width: var(--wb-control-h) !important;
  height: calc(var(--wb-control-h) - 0.28rem) !important;
  min-height: calc(var(--wb-control-h) - 0.28rem) !important;
  padding: 0 !important;
  border-radius: 7px !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mode-tab {
  position: relative !important;
  color: color-mix(in srgb, var(--dx-copy, #e6e6e6) 74%, transparent) !important;
  letter-spacing: 0 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mode-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mode-icon {
  display: block !important;
  width: 1rem !important;
  height: 1rem !important;
  background: currentColor !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mode-icon--visual {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 5h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-5v2h3v2H6v-2h3v-2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v9h16V7H4Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 5h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-5v2h3v2H6v-2h3v-2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v9h16V7H4Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mode-icon--code {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m8.7 7.3 1.4 1.4L6.8 12l3.3 3.3-1.4 1.4L4 12l4.7-4.7Zm6.6 0L20 12l-4.7 4.7-1.4-1.4 3.3-3.3-3.3-3.3 1.4-1.4ZM12.7 5l2 .5L11.3 19l-2-.5L12.7 5Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m8.7 7.3 1.4 1.4L6.8 12l3.3 3.3-1.4 1.4L4 12l4.7-4.7Zm6.6 0L20 12l-4.7 4.7-1.4-1.4 3.3-3.3-3.3-3.3 1.4-1.4ZM12.7 5l2 .5L11.3 19l-2-.5L12.7 5Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mode-tab.is-active,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device-tab.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-chat-neon, #00cfff) 92%, #fff 8%), color-mix(in srgb, var(--pf-chat-neon, #00cfff) 72%, #003544 28%)) !important;
  color: #00161b !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon, #00cfff) 48%, transparent), 0 0 18px rgba(0, 207, 255, 0.18) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-view-controls {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 0.22rem !important;
  height: var(--wb-control-h) !important;
  transform: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-view-controls button:not(.chat-prototype-workbench-apply):not(.chat-prototype-workbench-target):not(.chat-prototype-zoom-fit-btn):not(.chat-prototype-grid-toggle):not(.chat-prototype-grid-autoplace),
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-view-controls span:not(.chat-prototype-workbench-apply-label):not(.chat-prototype-workbench-target-label):not(.chat-prototype-grid-scale-label):not([data-prototype-zoom-label]) {
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 84%, #fff 16%) !important;
  background: color-mix(in srgb, var(--dx-elevated, #333) 58%, #000 42%) !important;
  color: color-mix(in srgb, var(--dx-copy, #e6e6e6) 88%, var(--pf-chat-neon, #00cfff) 12%) !important;
  font-size: 0.64rem !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-view-controls span[data-prototype-zoom-label] {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-inline: 0 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls button[data-prototype-fullscreen],
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-view-controls [data-prototype-fullscreen] {
  display: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-topbar {
  display: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-visual-pane:not(.hidden) {
  gap: 0 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
  border: 0 !important;
  border-radius: 0 !important;
  background: #060809 !important;
  box-shadow: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar {
  position: absolute !important;
  z-index: 24 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: calc(100% - 1rem) !important;
  top: 0.48rem !important;
  left: 0.48rem !important;
  right: auto !important;
  gap: 0.12rem !important;
  padding: 0.12rem !important;
  overflow: visible !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 78%, var(--pf-chat-neon, #00cfff) 22%) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--dx-panel, #222) 90%, #060a0d 10%) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar button {
  position: relative !important;
  width: 1.44rem !important;
  min-width: 1.44rem !important;
  height: 1.44rem !important;
  min-height: 1.44rem !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  border: 1px solid rgba(96, 111, 128, 0.78) !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--dx-elevated, #363636) 58%, #cfd5dc 42%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar button::before {
  content: "" !important;
  display: block !important;
  width: 0.62rem !important;
  height: 0.62rem !important;
  margin: auto !important;
  background: color-mix(in srgb, #d6eff7 72%, var(--pf-chat-neon, #00cfff) 28%) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar button:hover,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar button:focus-visible {
  border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 56%, rgba(96, 111, 128, 0.44) 44%) !important;
  background: color-mix(in srgb, var(--dx-elevated, #363636) 42%, #eef6fb 58%) !important;
  box-shadow: 0 0 0 1px rgba(0, 207, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  outline: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar button[data-prototype-insert-block="text"]::before {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 5h16v2H4V5Zm0 4h11v2H4V9Zm0 4h16v2H4v-2Zm0 4h11v2H4v-2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 5h16v2H4V5Zm0 4h11v2H4V9Zm0 4h16v2H4v-2Zm0 4h11v2H4v-2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar button[data-prototype-insert-block="columns"]::before {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 5h7v14H4V5Zm9 0h7v14h-7V5Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 5h7v14H4V5Zm9 0h7v14h-7V5Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar button[data-prototype-insert-block="imageText"]::before {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 5h8v8H4V5Zm1.5 6h5L9 9l-1.2 1.5-.8-1-1.5 1.5ZM14 6h6v2h-6V6Zm0 4h6v2h-6v-2ZM4 16h16v2H4v-2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 5h8v8H4V5Zm1.5 6h5L9 9l-1.2 1.5-.8-1-1.5 1.5ZM14 6h6v2h-6V6Zm0 4h6v2h-6v-2ZM4 16h16v2H4v-2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-code-pane:not(.hidden) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  grid-template-rows: auto minmax(0, 0.7fr) minmax(0, 1.3fr) !important;
  overflow: hidden !important;
}

@media (max-width: 760px), (pointer: coarse) and (max-height: 560px) {
  .chat-media.chat-media--block-draft-fullscreen > .chat-prototype-workbench--fullscreen-only {
    --mobile-html-editor-dock-h: 4.08rem;
    padding: 0 !important;
    gap: 0 !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head {
    display: none !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-topbar {
    position: relative !important;
    z-index: 304 !important;
    display: grid !important;
    grid-template-columns: minmax(7.8rem, 0.5fr) minmax(0, 1fr) minmax(5.8rem, 0.38fr) !important;
    align-items: stretch !important;
    gap: 0.46rem !important;
    padding: calc(env(safe-area-inset-top) + 0.46rem) max(0.62rem, env(safe-area-inset-right)) 0.46rem max(0.62rem, env(safe-area-inset-left)) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 82%, #fff 18%) !important;
    background: color-mix(in srgb, var(--dx-panel, #222) 92%, #000 8%) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3) !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-settings,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-preview {
    min-width: 0 !important;
    height: 2.42rem !important;
    min-height: 2.42rem !important;
    border-radius: 10px !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-settings {
    display: grid !important;
    grid-template-columns: 2.2rem minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.12rem !important;
    padding: 0 0.64rem 0 0.18rem !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 42%, var(--dx-line, #3a3a3a) 58%) !important;
    background: color-mix(in srgb, var(--dx-elevated, #333) 60%, #000 40%) !important;
    color: color-mix(in srgb, var(--dx-copy, #e6e6e6) 84%, var(--pf-chat-neon, #00cfff) 16%) !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-settings strong {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 0.84rem !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-preview {
    display: block !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section span,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-preview span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section select,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-preview select {
    width: 100% !important;
    height: 2.42rem !important;
    min-height: 2.42rem !important;
    padding: 0 1.6rem 0 0.72rem !important;
    border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 86%, #fff 14%) !important;
    border-radius: 10px !important;
    background-color: color-mix(in srgb, var(--dx-elevated, #333) 64%, #000 36%) !important;
    color: var(--dx-copy, #e6e6e6) !important;
    font-size: 0.86rem !important;
    font-weight: 720 !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail {
    position: static !important;
    display: block !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0.48rem max(0.52rem, env(safe-area-inset-right)) calc(var(--mobile-html-editor-dock-h, 4.08rem) + env(safe-area-inset-bottom) + 0.62rem) max(0.52rem, env(safe-area-inset-left)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-device:not(.is-active) {
    display: none !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-device.is-active {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--phone.is-active {
    max-width: min(430px, 100%) !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-stage {
    height: 100% !important;
    min-height: 100% !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(var(--mobile-html-editor-dock-h, 4.08rem) + env(safe-area-inset-bottom) + 0.7rem) !important;
    scroll-padding-bottom: calc(var(--mobile-html-editor-dock-h, 4.08rem) + env(safe-area-inset-bottom) + 0.9rem) !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-desktop-preview .chat-prototype-device--desktop.is-active .chat-prototype-live-shell,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-desktop-preview .chat-prototype-device--desktop.is-active .chat-block-draft-frame {
    min-width: 1024px !important;
    width: 1024px !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe {
    left: max(0.56rem, env(safe-area-inset-left)) !important;
    right: max(0.56rem, env(safe-area-inset-right)) !important;
    bottom: calc(var(--chat-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 0.46rem) !important;
    z-index: 320 !important;
    grid-template-columns: 2.35rem minmax(0, 1fr) !important;
    grid-template-areas: "pinpoint prompt" !important;
    gap: 0.36rem !important;
    min-height: 3.18rem !important;
    padding: 0.36rem !important;
    border-radius: 13px !important;
    background: color-mix(in srgb, var(--dx-panel, #222) 94%, #000 6%) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-pinpoint {
    grid-area: pinpoint !important;
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    border-radius: 10px !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form {
    grid-area: prompt !important;
    grid-template-columns: minmax(0, 1fr) 2.35rem !important;
    gap: 0.36rem !important;
    min-height: 2.35rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form textarea {
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    max-height: min(28dvh, 7.4rem) !important;
    padding: 0.58rem 0.7rem !important;
    border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 84%, #fff 16%) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--dx-elevated, #333) 56%, #000 44%) !important;
    color: var(--dx-copy, #e6e6e6) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form .chat-send-icon {
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    border-radius: 999px !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-insert-toolbar {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-topbar {
    grid-template-columns: minmax(7rem, 0.48fr) minmax(0, 1fr) minmax(5.25rem, 0.38fr) !important;
    gap: 0.34rem !important;
    padding-inline: max(0.48rem, env(safe-area-inset-left)) max(0.48rem, env(safe-area-inset-right)) !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-settings strong {
    font-size: 0.76rem !important;
  }
}

@media (pointer: coarse) and (max-height: 560px) {
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-topbar {
    display: none !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.chat-prototype-workbench--fullscreen-only.is-mobile-editor .chat-prototype-workbench-head {
    position: fixed !important;
    top: max(0.28rem, env(safe-area-inset-top)) !important;
    left: max(0.38rem, env(safe-area-inset-left)) !important;
    right: max(0.38rem, env(safe-area-inset-right)) !important;
    z-index: 319 !important;
    display: grid !important;
    grid-template-columns: auto auto auto !important;
    width: auto !important;
    min-height: 2rem !important;
    padding: 0.18rem !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--dx-panel, #222) 82%, #000 18%) !important;
    backdrop-filter: blur(12px) !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-tabs {
    justify-self: center !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls {
    justify-self: end !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls .chat-prototype-zoom-control {
    display: none !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
    height: 100dvh !important;
    padding: 0.24rem max(0.32rem, env(safe-area-inset-right)) calc(var(--mobile-html-editor-dock-h, 3.7rem) + env(safe-area-inset-bottom) + 0.36rem) max(0.32rem, env(safe-area-inset-left)) !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe {
    min-height: 2.92rem !important;
    padding: 0.28rem !important;
  }
}

/* Mobile image editing: gesture-first image manipulation. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 560px) {
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-image-resize-handle,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-image-drag-handle,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-image-resize-handle,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-image-drag-handle {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-live-stage [data-pf-inspect-kind="image"],
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-live-stage [data-pf-inspect-kind="image"] img,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-live-stage [data-pf-inspect-kind="image"],
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-live-stage [data-pf-inspect-kind="image"] img {
    cursor: grab !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-drag-armed .chat-prototype-live-stage [data-pf-inspect-kind="image"].is-pf-selected,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-drag-armed .chat-prototype-live-stage [data-pf-inspect-kind="image"].is-pf-selected {
    outline: 2px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 78%, #fff 22%) !important;
    outline-offset: 4px !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-live-stage .is-pf-mobile-layout-dragging,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-live-stage .is-pf-mobile-layout-dragging {
    cursor: grabbing !important;
    opacity: 0.92 !important;
    transform-origin: center center !important;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28)) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-live-stage .is-pf-mobile-image-drop-preview,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-live-stage .is-pf-mobile-image-drop-preview {
    position: relative !important;
    display: block !important;
    color: #006e82 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-live-stage .is-pf-mobile-image-drop-preview::after,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-live-stage .is-pf-mobile-image-drop-preview::after {
    content: attr(data-pf-mobile-drop-intent) !important;
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 0.28rem 0.44rem !important;
    border-radius: 999px !important;
    background: rgba(0, 207, 255, 0.92) !important;
    color: #00161b !important;
    font: 800 0.62rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head {
    grid-template-columns: minmax(0, 1fr) auto auto 2rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head .chat-prototype-mobile-image-replace,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head .chat-prototype-mobile-image-upload,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head .chat-prototype-mobile-image-replace,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head .chat-prototype-mobile-image-upload {
    display: inline-grid !important;
    place-items: center !important;
    width: auto !important;
    min-width: 4.35rem !important;
    height: 2rem !important;
    padding: 0 0.7rem !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 48%, #3a444f 52%) !important;
    border-radius: 7px !important;
    background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 14%, #15191e 86%) !important;
    color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 84%, #fff 16%) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-tools {
    max-height: min(54dvh, 430px) !important;
  }
}

/* Phone image tools: compact, search-first, and out of the page view's way. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 560px) {
  #chat-root .chat-block-draft.is-mobile-editor.has-mobile-image-selection .chat-prototype-trait-dock,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-mobile-image-selection .chat-prototype-trait-dock {
    display: none !important;
    pointer-events: none !important;
  }

  body.is-mobile-library-open #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-tools,
  body.is-mobile-library-open .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-tools {
    display: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-tools {
    bottom: calc(var(--chat-keyboard-offset, 0px) + var(--mobile-html-editor-dock-h, 4.45rem) + env(safe-area-inset-bottom) + 0.62rem) !important;
    z-index: 322 !important;
    gap: 0.28rem !important;
    max-height: min(30dvh, 220px) !important;
    padding: 0.38rem !important;
    border-radius: 10px !important;
    overflow: auto !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head {
    grid-template-columns: minmax(0, 1fr) auto 2rem !important;
    gap: 0.28rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head strong,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head strong {
    font-size: 0.64rem !important;
    text-transform: uppercase !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head button,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head button {
    height: 1.9rem !important;
    min-height: 1.9rem !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head .chat-prototype-mobile-image-replace,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head .chat-prototype-mobile-image-upload,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head .chat-prototype-mobile-image-replace,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-head .chat-prototype-mobile-image-upload {
    min-width: 4.35rem !important;
    height: 1.9rem !important;
    padding: 0 0.72rem !important;
    font-size: 0.7rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-layout,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-layout {
    gap: 0.24rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-layout button,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-layout button {
    height: 1.72rem !important;
    padding: 0 0.32rem !important;
    border-radius: 7px !important;
    font-size: 0.64rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-grid {
    gap: 0.24rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field {
    grid-template-columns: 3.65rem minmax(0, 1fr) !important;
    gap: 0.32rem !important;
    min-height: 1.58rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field span,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field span {
    font-size: 0.58rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field select,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="text"],
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="url"],
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field select,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="text"],
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-field input[type="url"] {
    height: 1.72rem !important;
    min-height: 1.72rem !important;
    font-size: 0.68rem !important;
    line-height: 1.72rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-tools p,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-image-tools p {
    display: none !important;
  }
}

/* Phone editor final pass: keep image controls light and give the canvas the room. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 560px) {
  #chat-root .chat-block-draft.is-mobile-editor:not(.is-mobile-desktop-preview) .chat-prototype-preview-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor:not(.is-mobile-desktop-preview) .chat-prototype-preview-grid {
    padding-bottom: calc(var(--mobile-html-editor-dock-h, 4.35rem) + env(safe-area-inset-bottom) + 0.24rem) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor:not(.is-mobile-desktop-preview) .chat-prototype-live-stage,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor:not(.is-mobile-desktop-preview) .chat-prototype-live-stage {
    padding-bottom: calc(var(--mobile-html-editor-dock-h, 4.35rem) + env(safe-area-inset-bottom) + 0.46rem) !important;
    scroll-padding-bottom: calc(var(--mobile-html-editor-dock-h, 4.35rem) + env(safe-area-inset-bottom) + 0.56rem) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-image-touching .chat-prototype-live-stage,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-image-touching .chat-prototype-live-stage {
    overflow: hidden !important;
    touch-action: none !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-tools {
    bottom: calc(var(--chat-keyboard-offset, 0px) + var(--mobile-html-editor-dock-h, 4.35rem) + env(safe-area-inset-bottom) + 0.34rem) !important;
    gap: 0.2rem !important;
    max-height: min(24dvh, 174px) !important;
    padding: 0.3rem !important;
    overflow: auto !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-head,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-head {
    gap: 0.22rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-head button,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-head button {
    height: 1.72rem !important;
    min-height: 1.72rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-layout button,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-layout button {
    height: 1.5rem !important;
    font-size: 0.6rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-field,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-field {
    min-height: 1.42rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-field select,
  #chat-root .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-field input[type="text"],
  #chat-root .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-field input[type="number"],
  #chat-root .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-field input[type="url"],
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-field select,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-field input[type="text"],
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-field input[type="number"],
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.has-mobile-image-tools .chat-prototype-mobile-image-field input[type="url"] {
    height: 1.52rem !important;
    min-height: 1.52rem !important;
    line-height: 1.52rem !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview.has-mobile-image-tools .chat-prototype-mobile-image-tools,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview.has-mobile-image-tools .chat-prototype-mobile-image-tools {
    bottom: calc(var(--chat-keyboard-offset, 0px) + var(--mobile-html-editor-dock-h, 4.35rem) + env(safe-area-inset-bottom) + 0.22rem) !important;
    max-height: min(18dvh, 132px) !important;
  }

  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview.has-mobile-image-tools .chat-prototype-mobile-image-field:has([data-prototype-mobile-image-crop-x]),
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview.has-mobile-image-tools .chat-prototype-mobile-image-field:has([data-prototype-mobile-image-crop-y]),
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview.has-mobile-image-tools .chat-prototype-mobile-image-field:has([data-prototype-mobile-image-link]),
  #chat-root .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview.has-mobile-image-tools .chat-prototype-mobile-image-field:has([data-prototype-mobile-image-alt]),
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview.has-mobile-image-tools .chat-prototype-mobile-image-field:has([data-prototype-mobile-image-crop-x]),
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview.has-mobile-image-tools .chat-prototype-mobile-image-field:has([data-prototype-mobile-image-crop-y]),
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview.has-mobile-image-tools .chat-prototype-mobile-image-field:has([data-prototype-mobile-image-link]),
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor.is-mobile-desktop-preview.has-mobile-image-tools .chat-prototype-mobile-image-field:has([data-prototype-mobile-image-alt]) {
    display: none !important;
  }
}

.chat-block-draft {
  display: grid;
  gap: 0.75rem;
  width: min(100%, 46rem);
  margin: 0.65rem 0 0;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--custom-text) 16%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--custom-bg) 88%, var(--custom-text) 12%);
}

.chat-block-current {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.52rem;
  width: min(100%, 48rem);
  margin: 0 auto 0.46rem;
  padding: 0.62rem;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 34%, var(--custom-text) 12%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--custom-panel) 90%, var(--pf-chat-neon) 10%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  pointer-events: auto !important;
}

.chat-block-current * {
  pointer-events: auto !important;
}

.chat-block-current.hidden {
  display: none;
}

.chat-block-current-main {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.7rem;
}

.chat-block-current-kicker,
.chat-block-current-state {
  display: block;
  color: color-mix(in srgb, var(--pf-chat-neon) 76%, var(--custom-copy) 24%);
  font-size: 0.58rem;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chat-block-current-main strong {
  display: block;
  margin-top: 0.16rem;
  color: var(--custom-copy);
  font-size: 0.78rem;
  line-height: 1.22;
  letter-spacing: 0;
}

.chat-block-current-main p {
  margin: 0.12rem 0 0;
  color: color-mix(in srgb, var(--custom-copy) 68%, transparent);
  font-size: 0.68rem;
  line-height: 1.25;
}

.chat-block-current-state {
  max-width: 10rem;
  padding-top: 0.12rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.chat-block-current-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.chat-block-current-actions .btn-neon {
  min-height: 1.65rem;
  padding: 0.2rem 0.54rem;
  border-radius: 6px;
  font-size: 0.66rem;
  letter-spacing: 0;
}

.chat-block-draft-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
}

.chat-block-draft-head strong {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0;
}

.chat-block-draft-head p,
.chat-block-draft-hint {
  margin: 0.2rem 0 0;
  color: color-mix(in srgb, var(--custom-text) 68%, transparent);
  font-size: 0.74rem;
  line-height: 1.35;
}

.chat-block-draft-namespace code {
  padding: 0.08rem 0.22rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--custom-text) 8%, transparent);
  color: var(--custom-copy);
  font: 0.68rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.chat-block-draft-frame {
  width: 100%;
  min-height: 280px;
  border: 1px solid color-mix(in srgb, var(--custom-text) 12%, transparent);
  border-radius: 6px;
  background: #fff;
}

.chat-block-draft-code {
  border-top: 1px solid color-mix(in srgb, var(--custom-text) 12%, transparent);
  padding-top: 0.55rem;
}

.chat-block-draft-code summary {
  cursor: pointer;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--custom-text) 78%, transparent);
}

.chat-block-draft-code label {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.55rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--custom-text) 62%, transparent);
}

.chat-block-draft-code textarea {
  width: 100%;
  resize: vertical;
  min-height: 6rem;
  padding: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--custom-text) 14%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--custom-bg) 94%, #000 6%);
  color: var(--custom-text);
  font: 0.72rem/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0;
}

/* Manual chat: turn send into a stop button while a reply is running. */
#chat-root #chat-form.is-processing .chat-send-icon,
body.is-chat-home #chat-form.is-processing .chat-send-icon {
  background: color-mix(in srgb, #ff7a7a 78%, #ffffff 22%) !important;
  border-color: color-mix(in srgb, #ff7a7a 82%, #9d2727 18%) !important;
  color: #1d0202 !important;
  box-shadow: 0 0 0 1px rgba(255, 122, 122, 0.18), 0 8px 18px rgba(200, 58, 58, 0.24) !important;
}

#chat-root #chat-form.is-processing .chat-send-icon:hover,
#chat-root #chat-form.is-processing .chat-send-icon:focus-visible,
body.is-chat-home #chat-form.is-processing .chat-send-icon:hover,
body.is-chat-home #chat-form.is-processing .chat-send-icon:focus-visible {
  background: color-mix(in srgb, #ff8f8f 84%, #ffffff 16%) !important;
  color: #1d0202 !important;
}

#chat-root #chat-form.is-processing .chat-send-icon.is-stop::before,
body.is-chat-home #chat-form.is-processing .chat-send-icon.is-stop::before {
  width: 0.72rem !important;
  height: 0.72rem !important;
  background: currentColor !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='6' width='12' height='12' rx='2' ry='2' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='6' width='12' height='12' rx='2' ry='2' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root #chat-form.is-processing .chat-send-icon.is-stopping,
body.is-chat-home #chat-form.is-processing .chat-send-icon.is-stopping {
  opacity: 0.7 !important;
  cursor: progress !important;
}

/* Desktop: sleek Figma-style corner grip (overrides chunky neon circle) */
#chat-root .chat-block-draft:not(.is-mobile-editor) .chat-prototype-image-resize-handle,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft:not(.is-mobile-editor) .chat-prototype-image-resize-handle {
  position: absolute !important;
  z-index: 36 !important;
  display: grid !important;
  place-items: center !important;
  width: 11px !important;
  min-width: 11px !important;
  height: 11px !important;
  min-height: 11px !important;
  padding: 0 !important;
  border: 1.5px solid rgba(12, 14, 18, 0.75) !important;
  border-radius: 2px !important;
  background: #f7f8fa !important;
  color: transparent !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.28) !important;
  cursor: nwse-resize !important;
  pointer-events: auto !important;
  touch-action: none !important;
}

#chat-root .chat-block-draft:not(.is-mobile-editor) .chat-prototype-image-resize-handle.hidden,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft:not(.is-mobile-editor) .chat-prototype-image-resize-handle.hidden {
  display: none !important;
}

#chat-root .chat-block-draft:not(.is-mobile-editor) .chat-prototype-image-resize-handle::before,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft:not(.is-mobile-editor) .chat-prototype-image-resize-handle::before {
  content: none !important;
  display: none !important;
}

#chat-root .chat-block-draft:not(.is-mobile-editor) .chat-prototype-image-resize-handle:hover,
#chat-root .chat-block-draft:not(.is-mobile-editor) .chat-prototype-image-resize-handle:focus-visible,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft:not(.is-mobile-editor) .chat-prototype-image-resize-handle:hover,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft:not(.is-mobile-editor) .chat-prototype-image-resize-handle:focus-visible {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.82) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.75),
    0 0 0 3px rgba(0, 153, 255, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.28) !important;
  transform: scale(1.1) !important;
  outline: none !important;
}

#chat-root .chat-block-draft:not(.is-mobile-editor) .chat-prototype-live-stage [data-pf-inspect-kind="image"].is-pf-selected img,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft:not(.is-mobile-editor) .chat-prototype-live-stage [data-pf-inspect-kind="image"].is-pf-selected img,
#chat-root .chat-block-draft:not(.is-mobile-editor) .chat-prototype-live-stage img.is-pf-selected,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft:not(.is-mobile-editor) .chat-prototype-live-stage img.is-pf-selected {
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

#chat-root .chat-block-draft:not(.is-mobile-editor) .chat-prototype-live-stage [data-pf-inspect-kind="image"].is-pf-selected,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft:not(.is-mobile-editor) .chat-prototype-live-stage [data-pf-inspect-kind="image"].is-pf-selected {
  outline: 2px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 72%, #ffffff 28%) !important;
  outline-offset: 4px !important;
  background-color: transparent !important;
  background-image: none !important;
}

#chat-root .chat-block-draft:not(.is-mobile-editor) .chat-prototype-live-stage img.is-pf-selected,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft:not(.is-mobile-editor) .chat-prototype-live-stage img.is-pf-selected {
  background-color: transparent !important;
  background-image: none !important;
}

#chat-root .chat-block-draft.is-image-cropping:not(.is-mobile-editor) .chat-prototype-live-stage [data-pf-inspect-kind="image"].is-pf-selected img,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-image-cropping:not(.is-mobile-editor) .chat-prototype-live-stage [data-pf-inspect-kind="image"].is-pf-selected img,
#chat-root .chat-block-draft.is-image-cropping:not(.is-mobile-editor) .chat-prototype-live-stage img.is-pf-selected,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-image-cropping:not(.is-mobile-editor) .chat-prototype-live-stage img.is-pf-selected {
  cursor: grabbing !important;
}

#chat-root .chat-block-draft.is-image-resizing:not(.is-mobile-editor) .chat-prototype-live-stage [data-pf-inspect-kind="image"].is-pf-selected img,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-image-resizing:not(.is-mobile-editor) .chat-prototype-live-stage [data-pf-inspect-kind="image"].is-pf-selected img {
  cursor: nwse-resize !important;
}

/* Trait drawer: keep desktop editor clickable and give it DX-style chrome. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock {
  width: min(30rem, calc(100% - 1.4rem)) !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 34%, var(--dx-line, #353535) 66%) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--dx-panel, #2d2d2d) 96%, #050607 4%) 0%, color-mix(in srgb, var(--dx-panel, #2d2d2d) 92%, #000 8%) 100%) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-edit-mode {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pf-chat-neon, #00cfff) 20%, transparent),
    0 24px 60px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-bar {
  min-height: 3rem !important;
  padding: 0.52rem 0.58rem !important;
  border-bottom: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 16%, var(--dx-line, #323232) 84%) !important;
  background: color-mix(in srgb, var(--dx-elevated, #363636) 62%, #111 38%) !important;
  cursor: grab !important;
  touch-action: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-dock-dragging .chat-prototype-trait-dock-bar {
  cursor: grabbing !important;
}

/* Target point settings: final compact mobile treatment. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 560px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection {
    left: max(0.44rem, env(safe-area-inset-left)) !important;
    right: max(0.44rem, env(safe-area-inset-right)) !important;
    bottom: calc(var(--chat-keyboard-offset, 0px) + var(--mobile-html-editor-dock-h, 4.35rem) + env(safe-area-inset-bottom) + 0.44rem) !important;
    max-height: min(38dvh, 17.5rem) !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 52%, var(--dx-line, #3a3a3a) 48%) !important;
    border-radius: 11px !important;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--dx-panel, #242424) 94%, #fff 6%), color-mix(in srgb, var(--dx-panel, #242424) 88%, #000 12%)) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-dock-bar,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-inline-tools,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools p {
    display: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer {
    display: grid !important;
    gap: 0.36rem !important;
    max-height: min(38dvh, 17.5rem) !important;
    overflow: auto !important;
    padding: 0.42rem !important;
    scrollbar-width: thin !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions {
    display: block !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 28%, var(--dx-line, #3a3a3a) 72%) !important;
    border-radius: 9px !important;
    background: color-mix(in srgb, #141414 78%, var(--dx-elevated, #333) 22%) !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions:has(.chat-prototype-inspector-image-picker.hidden) {
    display: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools::before,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools::before,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions::before {
    display: flex !important;
    align-items: center !important;
    min-height: 1.55rem !important;
    padding: 0 0.58rem !important;
    border-bottom: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 78%, #fff 22%) !important;
    background: color-mix(in srgb, var(--dx-bar, #2a2a2a) 88%, #000 12%) !important;
    color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 55%, var(--dx-muted, #999) 45%) !important;
    font: 800 0.56rem/1 var(--chat-chrome-mono, ui-monospace, Menlo, Consolas, monospace) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools::before {
    content: "Layout" !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools::before {
    content: "Image" !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions::before {
    content: "Replace" !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools-grid,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]),
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label:has(input[type="range"]) {
    display: grid !important;
    grid-template-columns: 4.9rem minmax(0, 1fr) 3.3rem !important;
    align-items: center !important;
    gap: 0.38rem !important;
    min-height: 2.1rem !important;
    padding: 0.3rem 0.5rem !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 66%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:not(:has(input[type="number"])),
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label:not(:has(input[type="range"])) {
    grid-template-columns: 4.9rem minmax(0, 1fr) !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:last-child,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label:last-child {
    border-bottom: 0 !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools span,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    color: var(--dx-copy, #ededed) !important;
    font: 800 0.62rem/1.1 var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools select,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools input[type="number"],
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools select,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 1.55rem !important;
    height: 1.55rem !important;
    padding: 0 0.45rem !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 32%, var(--dx-line, #3a3a3a) 68%) !important;
    border-radius: 7px !important;
    background: #0d0d0d !important;
    color: var(--dx-copy, #ededed) !important;
    font: 650 0.72rem/1.1 var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools input[type="range"],
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools input[type="range"] {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    accent-color: var(--pf-chat-neon, #00cfff) !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools input[type="number"] {
    grid-column: 3 !important;
    text-align: center !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-picker {
    margin: 0 !important;
    padding: 0.45rem !important;
  }
}

/* Fullscreen code pane: editor chrome + line numbers (outside #chat-root). */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-code-pane--layout-only:not(.hidden) {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 0.65rem !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0.75rem 0.85rem 0.85rem !important;
  overflow: hidden !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor-head-copy {
  display: grid !important;
  gap: 0.12rem !important;
  min-width: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor-head-copy strong {
  color: #eef2f5 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor-head-copy span {
  color: color-mix(in srgb, #9aa4af 92%, transparent) !important;
  font-size: 0.62rem !important;
  line-height: 1.35 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor--primary {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 88%, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #171b1f !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 88%, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #171b1f !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.55rem !important;
  padding: 0.55rem 0.72rem !important;
  border-bottom: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 88%, transparent) !important;
  background: #12161a !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor-body {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor-body.has-line-numbers {
  display: grid !important;
  grid-template-columns: 3rem minmax(0, 1fr) !important;
  align-items: stretch !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-line-numbers {
  display: block !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0.85rem 0.55rem 0.85rem 0.65rem !important;
  border: 0 !important;
  border-right: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 88%, transparent) !important;
  background: #12161a !important;
  color: #66717d !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  text-align: right !important;
  user-select: none !important;
  overflow: hidden !important;
  white-space: pre !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor-stack {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-highlight {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0.85rem 0.85rem 0.85rem 0.72rem !important;
  border: 0 !important;
  overflow: auto !important;
  pointer-events: none !important;
  background: transparent !important;
  color: #d7dee7 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  white-space: pre !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-highlight code {
  display: block !important;
  min-height: 100% !important;
  white-space: pre !important;
  font: inherit !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) textarea[data-block-html],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) textarea[data-block-css] {
  box-sizing: border-box !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.85rem 0.85rem 0.85rem 0.72rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  resize: none !important;
  background: transparent !important;
  color: #d7dee7 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  tab-size: 2 !important;
  white-space: pre !important;
  overflow: auto !important;
  caret-color: #58a6ff !important;
  outline: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor-body.has-line-numbers:not(.is-editing) textarea[data-block-html],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor-body.has-line-numbers:not(.is-editing) textarea[data-block-css],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor-body.has-line-numbers.is-editing textarea[data-block-html],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor-body.has-line-numbers.is-editing textarea[data-block-css] {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: transparent !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor-body.is-editing .chat-code-highlight {
  visibility: visible !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor .tok-tag { color: #7ee787 !important; }
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor .tok-attr { color: #79c0ff !important; }
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor .tok-string { color: #a5d6ff !important; }
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor .tok-comment { color: #8b949e !important; }
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor .tok-punct { color: #8b949e !important; }
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor .tok-number { color: #ffa657 !important; }

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-raw-toggle {
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 82%, transparent) !important;
  border-radius: 10px !important;
  background: #12161a !important;
  overflow: hidden !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-raw-toggle summary {
  display: flex !important;
  align-items: center !important;
  gap: 0.42rem !important;
  padding: 0.62rem 0.72rem !important;
  color: #c5ced6 !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  list-style: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-raw-toggle summary::-webkit-details-marker {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-raw-toggle summary::before {
  content: "" !important;
  width: 0.72rem !important;
  height: 0.72rem !important;
  flex: 0 0 auto !important;
  background: currentColor !important;
  opacity: 0.72 !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  transition: transform 120ms ease !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-raw-toggle[open] summary::before {
  transform: rotate(180deg) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-raw-toggle .chat-code-editor--html {
  border: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 82%, transparent) !important;
  min-height: min(24vh, 16rem) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-meta {
  gap: 0.12rem !important;
  max-width: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-meta strong {
  color: #f3f5f7 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-meta span {
  color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 82%, #d7d7d7 18%) !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools {
  gap: 0.34rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool {
  width: 2.05rem !important;
  min-width: 2.05rem !important;
  height: 2.05rem !important;
  min-height: 2.05rem !important;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 74%, transparent) !important;
  background: color-mix(in srgb, var(--dx-panel, #2d2d2d) 78%, #f7f7f7 22%) !important;
  color: color-mix(in srgb, var(--dx-copy, #f3f3f3) 88%, #fff 12%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool svg {
  width: 0.94rem !important;
  height: 0.94rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool:focus-visible {
  border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 54%, var(--dx-line, #3a3a3a) 46%) !important;
  background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 14%, var(--dx-panel, #2d2d2d) 86%) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--delete {
  border-color: color-mix(in srgb, #ff7f7f 48%, var(--dx-line, #3a3a3a) 52%) !important;
  color: #ffd2d2 !important;
  background: color-mix(in srgb, #622 18%, var(--dx-panel, #2d2d2d) 82%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--dismiss {
  color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 90%, #fff 10%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-drawer {
  gap: 0.54rem !important;
  padding: 0.62rem !important;
  border-top: 0 !important;
  max-height: min(48vh, 32rem) !important;
  overflow: auto !important;
  pointer-events: auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-inline-tools,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-block-tools,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-tools,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-form.chat-form,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-actions {
  position: relative !important;
  padding: 0.82rem 0.72rem 0.72rem !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 78%, var(--pf-chat-neon, #00cfff) 22%) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dx-panel, #2d2d2d) 92%, #0e0f10 8%) 0%, color-mix(in srgb, var(--dx-elevated, #363636) 86%, #090909 14%) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  pointer-events: auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-inline-tools::before,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-block-tools::before,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-tools::before,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-form.chat-form::before,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-actions::before {
  display: block !important;
  margin-bottom: 0.48rem !important;
  color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 80%, var(--pf-chat-neon, #00cfff) 20%) !important;
  font: 800 0.58rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-inline-tools::before {
  content: "Typography" !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-block-tools::before {
  content: "Box Layout" !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-tools::before {
  content: "Image" !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-form.chat-form::before {
  content: "AI Note" !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-actions::before {
  content: "Replace Media" !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-inline-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-tools-grid,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-block-tools-grid {
  gap: 0.5rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-inline-field,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-block-tools label,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-tools label {
  padding: 0.46rem !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 82%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--custom-bg, #111) 80%, var(--dx-panel, #2d2d2d) 20%) !important;
  gap: 0.28rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-inline-field span,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-block-tools span,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-tools span {
  color: #f2f3f5 !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-drawer select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-drawer input[type="number"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-drawer input[type="text"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-drawer input[type="color"] {
  min-height: 2rem !important;
  padding: 0.34rem 0.5rem !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 72%, var(--pf-chat-neon, #00cfff) 28%) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--custom-bg, #111) 88%, #050607 12%) !important;
  color: #f6f7f8 !important;
  font-size: 0.76rem !important;
  line-height: 1.1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-drawer input[type="color"] {
  padding: 0.18rem !important;
  cursor: pointer !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-drawer input[type="range"] {
  width: 100% !important;
  min-height: 1.4rem !important;
  accent-color: var(--pf-chat-neon, #00cfff) !important;
  cursor: pointer !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-drawer select:focus,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-drawer input[type="number"]:focus,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-drawer input[type="text"]:focus,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-drawer input[type="color"]:focus,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-form textarea[data-prototype-ai-note]:focus {
  outline: none !important;
  border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 62%, var(--dx-line, #3a3a3a) 38%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon, #00cfff) 26%, transparent) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-block-tools label:has(input[type="number"]) {
  grid-template-columns: minmax(0, 1fr) 4.5rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-actions {
  display: grid !important;
  gap: 0.42rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-form {
  min-height: 2.05rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-tools p {
  margin-top: 0.1rem !important;
  color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 88%, #fff 12%) !important;
  font-size: 0.62rem !important;
  line-height: 1.35 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-form.chat-form {
  gap: 0.42rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-form textarea[data-prototype-ai-note] {
  min-height: 3.2rem !important;
  height: 3.2rem !important;
  padding: 0.58rem 0.62rem !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 74%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--custom-bg, #111) 84%, #050607 16%) !important;
  color: #f5f6f7 !important;
  font-size: 0.82rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-note-actions {
  justify-content: space-between !important;
  gap: 0.34rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-note-btn {
  min-height: 1.92rem !important;
  padding: 0.2rem 0.68rem !important;
  border-radius: 9px !important;
  font-size: 0.64rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-note-btn--queue {
  border-color: color-mix(in srgb, var(--dx-line, #3a3a3a) 54%, var(--pf-chat-neon, #00cfff) 46%) !important;
  background: color-mix(in srgb, var(--dx-panel, #2d2d2d) 88%, #101214 12%) !important;
  color: #f3f5f7 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-note-btn--apply {
  min-width: 7.2rem !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-chat-neon, #00cfff) 82%, #d8fbff 18%) 0%, color-mix(in srgb, var(--pf-chat-neon, #00cfff) 94%, #009fcb 6%) 100%) !important;
  color: #001218 !important;
  box-shadow: 0 8px 20px rgba(0, 207, 255, 0.24) !important;
}

@media (max-width: 980px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-inline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Condensed pass for the anchored trait drawer in the fullscreen HTML editor. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection {
  width: min(22.75rem, calc(100vw - 1rem)) !important;
  max-width: min(22.75rem, calc(100vw - 1rem)) !important;
  border-radius: 16px !important;
  border-color: color-mix(in srgb, var(--dx-line, #3a3a3a) 72%, rgba(255, 255, 255, 0.08)) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--dx-panel, #2d2d2d) 88%, #111820 12%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-dock-bar {
  min-height: 2.55rem !important;
  padding: 0.38rem 0.42rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-dock-meta strong {
  font-size: 0.66rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-dock-meta span {
  font-size: 0.52rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-dock-tools {
  gap: 0.16rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-dock-tools .chat-trait-tool {
  width: 1.56rem !important;
  min-width: 1.56rem !important;
  height: 1.56rem !important;
  min-height: 1.56rem !important;
  border-radius: 8px !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-dock-tools .chat-trait-tool svg {
  width: 0.72rem !important;
  height: 0.72rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer {
  gap: 0.5rem !important;
  padding: 0.5rem !important;
  max-height: min(42vh, 30rem) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-inline-tools,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-form.chat-form,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions {
  padding: 0.62rem !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--dx-panel, #2d2d2d) 78%, #18202a 22%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-inline-tools::before,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools::before,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools::before,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-form.chat-form::before,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions::before {
  margin-bottom: 0.38rem !important;
  color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 88%, #dfe7ed 12%) !important;
  font-size: 0.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-inline-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools-grid,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-inline-field,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label {
  padding: 0.4rem 0.42rem !important;
  gap: 0.22rem !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--custom-bg, #111) 72%, #202934 28%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-inline-field span,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools span,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools span {
  color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 90%, #e5edf3 10%) !important;
  font-size: 0.49rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer input[type="number"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer input[type="text"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer input[type="color"] {
  min-height: 1.9rem !important;
  padding: 0.24rem 0.46rem !important;
  border-color: rgba(82, 97, 115, 0.9) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--custom-bg, #111) 84%, #08111a 16%) !important;
  color: #f0f4f7 !important;
  font-size: 0.74rem !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer input[type="color"] {
  min-height: 1.9rem !important;
  padding: 0.14rem !important;
  border-radius: 10px !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer input[type="range"] {
  min-height: 0.92rem !important;
  margin: 0.08rem 0 0 !important;
  accent-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 82%, #4bc4ff 18%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]) {
  grid-column: 1 / -1 !important;
  grid-template-columns: 4.2rem minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 0.24rem 0.5rem !important;
  align-items: center !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]) span {
  grid-column: 1 / -1 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]) input[type="number"] {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-height: 1.9rem !important;
  font-size: 0.78rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]) input[type="range"] {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 100% !important;
  margin: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label:has(input[type="range"]) {
  grid-column: 1 / -1 !important;
  gap: 0.24rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-form {
  min-height: 2rem !important;
  font-size: 0.74rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools p {
  font-size: 0.58rem !important;
  line-height: 1.28 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-form.chat-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.34rem !important;
  min-height: 0 !important;
  padding: 0.58rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--dx-panel, #2d2d2d) 76%, #1a2330 24%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-form.chat-form::before {
  margin: 0 0 0.06rem 0 !important;
  font-size: 0.52rem !important;
  letter-spacing: 0.1em !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-note-shell {
  display: grid !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(92, 108, 127, 0.8) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--custom-bg, #111) 84%, #0d1823 16%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-form textarea[data-prototype-ai-note] {
  grid-column: auto !important;
  grid-row: auto !important;
  display: block !important;
  width: 100% !important;
  min-height: 4.4rem !important;
  height: 4.4rem !important;
  max-height: 7.5rem !important;
  margin: 0 !important;
  padding: 0.82rem 0.92rem 0.68rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 0.82rem !important;
  line-height: 1.38 !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-form textarea[data-prototype-ai-note]::placeholder {
  color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 78%, #d6dde3 22%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-note-actions {
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 0.34rem !important;
  width: 100% !important;
  padding: 0.62rem 0.74rem 0.72rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0)) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-note-btn {
  grid-row: auto !important;
  align-self: auto !important;
  min-height: 1.84rem !important;
  padding: 0.16rem 0.82rem !important;
  border-radius: 999px !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-note-btn--queue {
  margin-right: auto !important;
  border-color: rgba(92, 108, 127, 0.9) !important;
  background: color-mix(in srgb, var(--dx-panel, #2d2d2d) 74%, #1a2330 26%) !important;
  color: color-mix(in srgb, #eef2f5 86%, var(--dx-muted, #8a8a8a) 14%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-note-btn--apply {
  margin-left: 0 !important;
  min-width: 6rem !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-chat-neon, #00cfff) 72%, #effdff 28%) 0%, color-mix(in srgb, var(--pf-chat-neon, #00cfff) 88%, #0a9cc4 12%) 100%) !important;
  color: #00151b !important;
  box-shadow: 0 8px 18px rgba(0, 207, 255, 0.16) !important;
}

/* DX admin-style pass for anchored trait drawer rows. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection {
  width: min(20.75rem, calc(100vw - 0.75rem)) !important;
  max-width: min(20.75rem, calc(100vw - 0.75rem)) !important;
  border-radius: 10px !important;
  background: #2d2d2d !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-dock-bar {
  min-height: 2.15rem !important;
  padding: 0.28rem 0.36rem !important;
  border-bottom: 1px solid #3a3a3a !important;
  background: #222222 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer {
  gap: 0.28rem !important;
  padding: 0.28rem !important;
  background: #2d2d2d !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-inline-tools,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-form.chat-form,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions {
  padding: 0 !important;
  border: 1px solid #3d4a55 !important;
  border-radius: 8px !important;
  background: #2d2d2d !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-inline-tools::before,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools::before,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools::before,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-form.chat-form::before,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions::before {
  display: flex !important;
  align-items: center !important;
  min-height: 1.86rem !important;
  margin: 0 !important;
  padding: 0 0.62rem !important;
  background: #222222 !important;
  color: #999999 !important;
  font: 700 0.68rem/1 var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-inline-grid,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools-grid,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1px !important;
  background: #2b2b2b !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-inline-field,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label {
  display: grid !important;
  grid-template-columns: 8.6rem minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 2.25rem !important;
  padding: 0.42rem 0.52rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #333333 !important;
  gap: 0.5rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-inline-grid > *:nth-child(even),
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools-grid > *:nth-child(even),
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools-grid > *:nth-child(even) {
  background: #2d2d2d !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-inline-field span,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools span,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools span {
  grid-column: 1 !important;
  justify-self: end !important;
  text-align: right !important;
  color: #ffffff !important;
  font: 700 0.58rem/1.2 var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer input[type="number"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer input[type="text"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer input[type="color"] {
  grid-column: 2 !important;
  min-height: 1.92rem !important;
  padding: 0.18rem 0.42rem !important;
  border: 1px solid #4c5964 !important;
  border-radius: 4px !important;
  background: rgba(17, 17, 17, 0.82) !important;
  color: #9d9d9d !important;
  font: 400 0.74rem/1.1 var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer input[type="color"] {
  justify-self: start !important;
  width: 5.2rem !important;
  min-width: 5.2rem !important;
  padding: 0.12rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer input[type="range"] {
  min-height: 1rem !important;
  margin: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]) {
  grid-template-columns: 8.6rem 4rem minmax(0, 1fr) !important;
  min-height: 2.5rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]) span {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]) input[type="number"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 1.92rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]) input[type="range"] {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label:has(input[type="range"]) {
  grid-template-columns: 8.6rem minmax(0, 1fr) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label:has(input[type="range"]) input[type="range"] {
  grid-column: 2 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-picker {
  width: 100% !important;
  margin: 0 !important;
  gap: 0.38rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-shell {
  min-height: 2rem !important;
  border-radius: 9px !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-upload {
  min-height: 1.92rem !important;
  font-size: 0.62rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-hint {
  font-size: 0.54rem !important;
}

@media (max-width: 900px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection {
    width: min(20.75rem, calc(100vw - 0.75rem)) !important;
    max-width: min(20.75rem, calc(100vw - 0.75rem)) !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-inline-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Desktop HTML editor: bottom-center prompt bar with phone-style focus tool. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-edit--viewport-dock {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(0.65rem, env(safe-area-inset-bottom)) !important;
  width: min(39rem, calc(100vw - 1.3rem)) !important;
  max-width: min(39rem, calc(100vw - 1.3rem)) !important;
  transform: translateX(-50%) !important;
  z-index: 350 !important;
  pointer-events: none !important;
  touch-action: auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor):not(:has(.chat-prototype-device--desktop.is-active)) .chat-prototype-layout-edit--viewport-dock {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-device--desktop.is-active .chat-prototype-layout-edit-bar,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-edit--viewport-dock .chat-prototype-layout-edit-bar {
  display: grid !important;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem !important;
  grid-template-areas: "focus prompt undo" !important;
  align-items: center !important;
  gap: 0.28rem !important;
  width: 100% !important;
  padding: 0.3rem 0.34rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 36%, var(--dx-line, #3a3a3a) 64%) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--dx-panel, #222) 92%, #05090c 8%) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(10px) !important;
  cursor: default !important;
  user-select: none !important;
  pointer-events: auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-focus {
  grid-area: focus !important;
  display: grid !important;
  place-items: center !important;
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--dx-copy, #e6e6e6) 78%, var(--pf-chat-neon, #00cfff) 22%) !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-focus span {
  width: 1rem !important;
  height: 1rem !important;
  background: currentColor !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2h2v3.1A7 7 0 0 1 18.9 11H22v2h-3.1A7 7 0 0 1 13 18.9V22h-2v-3.1A7 7 0 0 1 5.1 13H2v-2h3.1A7 7 0 0 1 11 5.1V2zm1 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 3.15A1.85 1.85 0 1 1 12 13.85 1.85 1.85 0 0 1 12 10.15z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2h2v3.1A7 7 0 0 1 18.9 11H22v2h-3.1A7 7 0 0 1 13 18.9V22h-2v-3.1A7 7 0 0 1 5.1 13H2v-2h3.1A7 7 0 0 1 11 5.1V2zm1 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 3.15A1.85 1.85 0 1 1 12 13.85 1.85 1.85 0 0 1 12 10.15z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-focus.is-active {
  border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 28%, transparent) !important;
  background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 14%, transparent) !important;
  color: var(--pf-chat-neon, #00cfff) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form.chat-form {
  grid-area: prompt !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 0.32rem !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-prompt-shell {
  grid-template-columns: minmax(0, 1fr) 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  padding: 0 0.18rem 0 0.46rem !important;
  border-color: color-mix(in srgb, var(--dx-line, #3a3a3a) 82%, rgba(255, 255, 255, 0.14)) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--dx-elevated, #333) 54%, #000 46%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form textarea[data-prototype-layout-input] {
  height: 1.25rem !important;
  min-height: 1.25rem !important;
  max-height: 1.25rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--dx-copy, #e6e6e6) !important;
  font-size: 0.84rem !important;
  line-height: 1.25rem !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  field-sizing: fixed !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form textarea[data-prototype-layout-input]::placeholder {
  color: color-mix(in srgb, var(--custom-muted, #8a8a8a) 82%, var(--pf-chat-neon, #00cfff) 18%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form .chat-send-icon {
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 14px rgba(0, 207, 255, 0.16) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-inline-status {
  inset: 0 2.05rem 0 0.46rem !important;
  font-size: 0.68rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-thinking-spinner {
  width: 0.84rem !important;
  height: 0.84rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form.is-thinking .chat-send-icon:not(.is-stop) {
  opacity: 0.55 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-undo {
  grid-area: undo !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  align-self: center !important;
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--dx-copy, #e6e6e6) 76%, var(--pf-chat-neon, #00cfff) 24%) !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-undo span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-undo svg {
  width: 0.92rem !important;
  height: 0.92rem !important;
  margin: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-focus:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-focus:focus-visible,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-undo:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-undo:focus-visible {
  border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 24%, transparent) !important;
  background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 12%, transparent) !important;
  color: var(--pf-chat-neon, #00cfff) !important;
  outline: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-undo.hidden {
  display: none !important;
}

/* Desktop layout edit bar: thinner, sleeker input treatment. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-edit--viewport-dock {
  width: min(39rem, calc(100vw - 1.3rem)) !important;
  max-width: min(39rem, calc(100vw - 1.3rem)) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-edit--viewport-dock .chat-prototype-layout-edit-bar {
  grid-template-columns: 1.8rem minmax(0, 1fr) 1.8rem !important;
  gap: 0.22rem !important;
  padding: 0.22rem !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 78%, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--dx-panel, #222) 95%, #05080b 5%) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(8px) !important;
  overflow: visible !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-focus,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-undo {
  width: 1.8rem !important;
  min-width: 1.8rem !important;
  height: 1.8rem !important;
  min-height: 1.8rem !important;
  border-radius: 999px !important;
  color: color-mix(in srgb, var(--dx-copy, #e6e6e6) 70%, var(--pf-chat-neon, #00cfff) 30%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-focus span {
  width: 0.92rem !important;
  height: 0.92rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form.chat-form {
  gap: 0 !important;
  position: relative !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-prompt-shell {
  grid-template-columns: minmax(0, 1fr) 1.8rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  padding: 0 0.1rem 0 0.44rem !important;
  border-color: color-mix(in srgb, var(--dx-line, #3a3a3a) 84%, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--dx-elevated, #333) 52%, #070b0f 48%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form textarea[data-prototype-layout-input] {
  height: 1.25rem !important;
  min-height: 1.25rem !important;
  max-height: 1.25rem !important;
  font-size: 0.78rem !important;
  line-height: 1.25rem !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  color: var(--dx-copy, #e6e6e6) !important;
  field-sizing: fixed !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form textarea[data-prototype-layout-input]::placeholder {
  color: color-mix(in srgb, var(--custom-muted, #8a8a8a) 88%, var(--pf-chat-neon, #00cfff) 12%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form .chat-send-icon {
  width: 1.8rem !important;
  min-width: 1.8rem !important;
  height: 1.8rem !important;
  min-height: 1.8rem !important;
  box-shadow: 0 4px 10px rgba(0, 207, 255, 0.14) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-inline-status {
  inset: 0 1.95rem 0 0.44rem !important;
  font-size: 0.66rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-inline-status [data-prototype-layout-thinking-label] {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-thinking-spinner {
  width: 0.78rem !important;
  height: 0.78rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-undo svg {
  width: 0.84rem !important;
  height: 0.84rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-edit--viewport-dock {
  width: min(41rem, calc(100vw - 1.3rem)) !important;
  max-width: min(41rem, calc(100vw - 1.3rem)) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-edit--viewport-dock .chat-prototype-layout-edit-bar {
  grid-template-columns: 2rem minmax(0, 1fr) 2rem !important;
  gap: 0.18rem !important;
  padding: 0.18rem 0.22rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 40%, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, rgba(10, 14, 16, 0.62) 100%, transparent) !important;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.11) 0%,
    rgba(255, 255, 255, 0.03) 44%,
    rgba(0, 207, 255, 0.07) 100%
  ) !important;
  backdrop-filter: blur(18px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.45) !important;
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-focus,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-undo {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--pf-chat-neon, #00cfff) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-focus:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-focus:focus-visible,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-undo:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-undo:focus-visible {
  background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 14%, transparent) !important;
  border-color: transparent !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-focus span {
  width: 1rem !important;
  height: 1rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-prompt-shell {
  grid-template-columns: minmax(0, 1fr) 32px !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  padding: 0 0 0 0.18rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form textarea[data-prototype-layout-input] {
  height: 1.25rem !important;
  min-height: 1.25rem !important;
  max-height: 1.25rem !important;
  font-size: 0.84rem !important;
  line-height: 1.25rem !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  color: var(--dx-copy, #e6e6e6) !important;
  field-sizing: fixed !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form textarea[data-prototype-layout-input]::placeholder {
  color: color-mix(in srgb, var(--custom-muted, #8a8a8a) 82%, var(--pf-chat-neon, #00cfff) 18%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form .chat-send-icon {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
  background: var(--pf-chat-neon, #00cfff) !important;
  color: #00161b !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form .chat-send-icon:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form .chat-send-icon:focus-visible {
  background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 88%, #ffffff 12%) !important;
  color: #00161b !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-note {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools::before {
  min-height: 1.68rem !important;
  padding: 0 0.58rem !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.09em !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools-grid {
  gap: 1px !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label {
  grid-template-columns: 7.4rem minmax(0, 1fr) !important;
  min-height: 1.95rem !important;
  padding: 0.28rem 0.42rem !important;
  gap: 0.4rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools span {
  font-size: 0.52rem !important;
  letter-spacing: 0.07em !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools input[type="number"] {
  min-height: 1.72rem !important;
  padding: 0.14rem 0.38rem !important;
  font-size: 0.68rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]) {
  grid-template-columns: 7.4rem 3.3rem minmax(0, 1fr) !important;
  min-height: 2.08rem !important;
  gap: 0.3rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]) input[type="number"] {
  min-height: 1.72rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]) input[type="range"] {
  min-height: 0.88rem !important;
}

@media (max-width: 760px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-topbar {
    display: grid !important;
    grid-template-columns: 2.44rem minmax(0, 1fr) minmax(4.7rem, 0.42fr) !important;
    align-items: center !important;
    gap: 0.36rem !important;
    min-height: 3.12rem !important;
    padding: calc(env(safe-area-inset-top) + 0.32rem) max(0.5rem, env(safe-area-inset-right)) 0.34rem max(0.5rem, env(safe-area-inset-left)) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 78%, #fff 22%) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
      color-mix(in srgb, var(--dx-panel, #222) 94%, #050607 6%) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22) !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    width: 2.44rem !important;
    min-width: 2.44rem !important;
    max-width: 2.44rem !important;
    height: 2.44rem !important;
    min-height: 2.44rem !important;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 40%, var(--dx-line, #3a3a3a) 60%) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--dx-elevated, #333) 58%, #000 42%) !important;
    color: color-mix(in srgb, var(--dx-copy, #e6e6e6) 82%, var(--pf-chat-neon, #00cfff) 18%) !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings strong {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings span {
    width: 1.08rem !important;
    height: 1.08rem !important;
    margin: 0 !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1.85rem minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.18rem !important;
    height: 2.44rem !important;
    min-height: 2.44rem !important;
    padding: 0 0.28rem 0 0.22rem !important;
    border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 84%, #fff 16%) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--dx-elevated, #333) 62%, #000 38%) !important;
    color: color-mix(in srgb, var(--dx-copy, #e6e6e6) 86%, var(--pf-chat-neon, #00cfff) 14%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section::before,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview::before {
    content: "" !important;
    display: block !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
    justify-self: center !important;
    background: currentColor !important;
    opacity: 0.9 !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section::before {
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 6h3v3H4V6Zm5 .5h11v2H9v-2ZM4 11h3v3H4v-3Zm5 .5h11v2H9v-2ZM4 16h3v3H4v-3Zm5 .5h11v2H9v-2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 6h3v3H4V6Zm5 .5h11v2H9v-2ZM4 11h3v3H4v-3Zm5 .5h11v2H9v-2ZM4 16h3v3H4v-3Zm5 .5h11v2H9v-2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview::before {
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8 2.75h8A2.25 2.25 0 0 1 18.25 5v14A2.25 2.25 0 0 1 16 21.25H8A2.25 2.25 0 0 1 5.75 19V5A2.25 2.25 0 0 1 8 2.75Zm0 2V18.5h8V4.75H8Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8 2.75h8A2.25 2.25 0 0 1 18.25 5v14A2.25 2.25 0 0 1 16 21.25H8A2.25 2.25 0 0 1 5.75 19V5A2.25 2.25 0 0 1 8 2.75Zm0 2V18.5h8V4.75H8Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview[data-preview-mode="desktop"]::before {
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 5.5A2.5 2.5 0 0 1 5.5 3h13A2.5 2.5 0 0 1 21 5.5v9A2.5 2.5 0 0 1 18.5 17H14v2h3v2H7v-2h3v-2H5.5A2.5 2.5 0 0 1 3 14.5v-9Zm2 0v9c0 .28.22.5.5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 5.5A2.5 2.5 0 0 1 5.5 3h13A2.5 2.5 0 0 1 21 5.5v9A2.5 2.5 0 0 1 18.5 17H14v2h3v2H7v-2h3v-2H5.5A2.5 2.5 0 0 1 3 14.5v-9Zm2 0v9c0 .28.22.5.5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section > span,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section select,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview select {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 1.18rem 0 0.1rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: var(--dx-copy, #e6e6e6) !important;
    font-size: 0.78rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings.is-active,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section:focus-within,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview:focus-within {
    border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 72%, var(--dx-line, #3a3a3a) 28%) !important;
    background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 16%, var(--dx-elevated, #333) 84%) !important;
    color: var(--pf-chat-neon, #00cfff) !important;
  }
}

@media (max-width: 430px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-topbar {
    grid-template-columns: 2.36rem minmax(0, 1fr) minmax(4.15rem, 0.4fr) !important;
    gap: 0.3rem !important;
    padding-inline: max(0.42rem, env(safe-area-inset-left)) max(0.42rem, env(safe-area-inset-right)) !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview {
    height: 2.36rem !important;
    min-height: 2.36rem !important;
    border-radius: 9px !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings {
    width: 2.36rem !important;
    min-width: 2.36rem !important;
    max-width: 2.36rem !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview {
    grid-template-columns: 1.55rem minmax(0, 1fr) !important;
    padding-left: 0.16rem !important;
    padding-right: 0.18rem !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section select,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview select {
    padding-right: 0.82rem !important;
    font-size: 0.74rem !important;
  }
}

@media (max-width: 760px), (pointer: coarse) and (max-height: 560px) {
  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet {
    display: block !important;
    position: fixed !important;
    left: max(0.48rem, env(safe-area-inset-left)) !important;
    right: max(0.48rem, env(safe-area-inset-right)) !important;
    bottom: calc(var(--chat-keyboard-offset, 0px) + var(--mobile-html-editor-dock-h, 4.35rem) + env(safe-area-inset-bottom) + 0.54rem) !important;
    top: auto !important;
    z-index: 10080 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet.hidden {
    display: none !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-toggle {
    display: none !important;
  }

  body.is-mobile-text-settings-open .chat-prototype-text-page--mobile-sheet .chat-prototype-text-page-panel {
    position: static !important;
    display: grid !important;
    gap: 0.34rem !important;
    max-height: min(52dvh, 430px) !important;
    overflow: auto !important;
    padding: 0.5rem !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 54%, var(--dx-line, #3a3a3a) 46%) !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--dx-panel, #222) 94%, #000 6%) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.52) !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (pointer: coarse) and (max-height: 560px) {
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-topbar {
    display: grid !important;
    grid-template-columns: 2.18rem minmax(0, 1fr) minmax(4rem, 0.36fr) !important;
    min-height: 2.62rem !important;
    padding: calc(env(safe-area-inset-top) + 0.22rem) max(0.42rem, env(safe-area-inset-right)) 0.24rem max(0.42rem, env(safe-area-inset-left)) !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section,
  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview {
    height: 2.18rem !important;
    min-height: 2.18rem !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings {
    width: 2.18rem !important;
    min-width: 2.18rem !important;
    max-width: 2.18rem !important;
  }
}

/* Section map wizard actions + device-scale controls. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-view-controls {
  gap: 0.24rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-view-controls button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-view-controls .chat-prototype-zoom-fit {
  width: auto !important;
  min-width: 4.85rem !important;
  max-width: none !important;
  padding: 0 0.48rem !important;
  gap: 0.28rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-view-controls .chat-prototype-zoom-fit [data-prototype-zoom-label] {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: currentColor !important;
  font: inherit !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-control-icon,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-fullscreen-icon,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-close-icon {
  display: block !important;
  width: 0.86rem !important;
  min-width: 0.86rem !important;
  max-width: 0.86rem !important;
  height: 0.86rem !important;
  min-height: 0.86rem !important;
  max-height: 0.86rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  box-shadow: none !important;
  color: currentColor !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-control-icon--minus {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11h14v2H5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11h14v2H5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-control-icon--plus {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-control-icon--fit {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-6v2h3v2H7v-2h3v-2H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1 2v8h14V7H5Zm2 2h3V8H6v4h1V9Zm10 0v3h1V8h-4v1h3Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-6v2h3v2H7v-2h3v-2H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1 2v8h14V7H5Zm2 2h3V8H6v4h1V9Zm10 0v3h1V8h-4v1h3Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-control-icon--settings {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.4 13.5a7.8 7.8 0 0 0 .05-1 7.8 7.8 0 0 0-.05-1l2.05-1.6-2-3.46-2.42.98a7.2 7.2 0 0 0-1.72-1l-.36-2.58h-4l-.36 2.58a7.2 7.2 0 0 0-1.72 1l-2.42-.98-2 3.46 2.05 1.6a7.8 7.8 0 0 0-.05 1 7.8 7.8 0 0 0 .05 1l-2.05 1.6 2 3.46 2.42-.98a7.2 7.2 0 0 0 1.72 1l.36 2.58h4l.36-2.58a7.2 7.2 0 0 0 1.72-1l2.42.98 2-3.46-2.05-1.6ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.4 13.5a7.8 7.8 0 0 0 .05-1 7.8 7.8 0 0 0-.05-1l2.05-1.6-2-3.46-2.42.98a7.2 7.2 0 0 0-1.72-1l-.36-2.58h-4l-.36 2.58a7.2 7.2 0 0 0-1.72 1l-2.42-.98-2 3.46 2.05 1.6a7.8 7.8 0 0 0-.05 1 7.8 7.8 0 0 0 .05 1l-2.05 1.6 2 3.46 2.42-.98a7.2 7.2 0 0 0 1.72 1l.36 2.58h4l.36-2.58a7.2 7.2 0 0 0 1.72-1l2.42.98 2-3.46-2.05-1.6ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-control-icon--page {
  width: 13px !important;
  height: 13px !important;
  background: currentColor !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2h8l4 4v16H6V2zm8 2.8V8h3.2L14 4.8zM8 11v2h8v-2H8zm0 4v2h8v-2H8z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2h8l4 4v16H6V2zm8 2.8V8h3.2L14 4.8zM8 11v2h8v-2H8zm0 4v2h8v-2H8z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-close-icon {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.4 5 19 17.6 17.6 19 5 6.4 6.4 5Zm11.2 0L19 6.4 6.4 19 5 17.6 17.6 5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.4 5 19 17.6 17.6 19 5 6.4 6.4 5Zm11.2 0L19 6.4 6.4 19 5 17.6 17.6 5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root .chat-section-map-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.55rem 0.72rem !important;
}

#chat-root .chat-section-map-title {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.12rem !important;
}

#chat-root .chat-section-map-title small {
  text-align: left !important;
}

#chat-root .chat-section-map-toolbar,
#chat-root .chat-section-map-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.26rem !important;
}

#chat-root .chat-section-map-toolbar {
  justify-content: flex-end !important;
  gap: 0.18rem !important;
}

#chat-root .chat-section-map-toolbar .btn-neon,
#chat-root .chat-section-map-actions .btn-neon {
  width: auto !important;
  min-height: 1.45rem !important;
  padding: 0 0.48rem !important;
  border-radius: 4px !important;
  font-size: 0.56rem !important;
  line-height: 1 !important;
}

#chat-root .chat-section-map-actions .btn-neon--icon {
  width: 1.45rem !important;
  min-width: 1.45rem !important;
  padding: 0 !important;
  justify-content: center !important;
}

#chat-root .chat-section-map-toolbar .btn-neon {
  gap: 0.22rem !important;
  min-height: 1.28rem !important;
  padding: 0 0.38rem !important;
  border-width: 2px !important;
  border-radius: 3px !important;
  font-size: 0.52rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 72%, #eafcff 28%) !important;
  background: color-mix(in srgb, rgba(8, 13, 16, 0.88) 100%, transparent) !important;
  border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 60%, rgba(255, 255, 255, 0.1) 40%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#chat-root .chat-section-map-actions .btn-neon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.22rem !important;
  min-height: 1.28rem !important;
  padding: 0 0.38rem !important;
  border-width: 2px !important;
  border-radius: 3px !important;
  font-size: 0.52rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 72%, #eafcff 28%) !important;
  background: color-mix(in srgb, rgba(8, 13, 16, 0.88) 100%, transparent) !important;
  border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 60%, rgba(255, 255, 255, 0.1) 40%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#chat-root .chat-section-map-toolbar .btn-neon:hover,
#chat-root .chat-section-map-toolbar .btn-neon:focus-visible,
#chat-root .chat-section-map-actions .btn-neon:hover,
#chat-root .chat-section-map-actions .btn-neon:focus-visible {
  color: #00161b !important;
  background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 86%, #ffffff 14%) !important;
  border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 88%, #dfffff 12%) !important;
  box-shadow: 0 0 20px rgba(0, 207, 255, 0.18) !important;
}

#chat-root .chat-section-map-tool-icon {
  display: block !important;
  width: 0.68rem !important;
  height: 0.68rem !important;
  background: currentColor !important;
}

#chat-root .chat-section-map-toolbar .chat-section-map-tool-icon {
  width: 0.6rem !important;
  height: 0.6rem !important;
  opacity: 0.92 !important;
}

#chat-root .chat-section-map-actions .chat-section-map-tool-icon {
  width: 0.6rem !important;
  height: 0.6rem !important;
  opacity: 0.92 !important;
}

#chat-root .chat-section-map-tool-icon--wizard {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 1.7 4.6L18 8.3l-4.3 1.7L12 14l-1.7-4L6 8.3l4.3-1.7L12 2Zm6.5 9 1 2.7 2.5 1-2.5 1-1 2.8-1-2.8-2.5-1 2.5-1 1-2.7ZM5.5 13l1.2 3.2 3.3 1.3-3.3 1.3L5.5 22l-1.2-3.2L1 17.5l3.3-1.3L5.5 13Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 1.7 4.6L18 8.3l-4.3 1.7L12 14l-1.7-4L6 8.3l4.3-1.7L12 2Zm6.5 9 1 2.7 2.5 1-2.5 1-1 2.8-1-2.8-2.5-1 2.5-1 1-2.7ZM5.5 13l1.2 3.2 3.3 1.3-3.3 1.3L5.5 22l-1.2-3.2L1 17.5l3.3-1.3L5.5 13Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root .chat-section-map-tool-icon--add {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root .chat-section-map-tool-icon--preview {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v10H4V5Zm2 2v6h12V7H6Zm2 10h8v2H8v-2Zm-3 4h14v1H5v-1Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v10H4V5Zm2 2v6h12V7H6Zm2 10h8v2H8v-2Zm-3 4h14v1H5v-1Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root .chat-section-map-tool-icon--remove {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.3 5.3 12 11l5.7-5.7 1.4 1.4L13.4 12.4l5.7 5.7-1.4 1.4L12 13.4l-5.7 5.7-1.4-1.4 5.7-5.7-5.7-5.7 1.4-1.4Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.3 5.3 12 11l5.7-5.7 1.4 1.4L13.4 12.4l5.7 5.7-1.4 1.4L12 13.4l-5.7 5.7-1.4-1.4 5.7-5.7-5.7-5.7 1.4-1.4Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#chat-root .chat-section-map-row-grid {
  display: grid !important;
  grid-template-columns: minmax(10rem, 1fr) minmax(0, auto) minmax(11.5rem, auto) !important;
  grid-template-areas: "main meta actions" !important;
  gap: 0.36rem 0.55rem !important;
  align-items: center !important;
}

#chat-root .chat-section-map-main {
  grid-area: main !important;
}

#chat-root .chat-section-map-meta {
  grid-area: meta !important;
}

#chat-root .chat-section-map-actions {
  grid-area: actions !important;
  justify-content: flex-end !important;
}

@media (max-width: 760px) {
  #chat-root .chat-section-map-head {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  #chat-root .chat-section-map-toolbar,
  #chat-root .chat-section-map-actions {
    justify-content: stretch !important;
  }

  #chat-root .chat-section-map-toolbar .btn-neon {
    flex: 1 1 6rem !important;
    justify-content: center !important;
  }

  #chat-root .chat-section-map-row-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto !important;
    grid-template-areas: "main meta actions" !important;
    align-items: center !important;
    min-height: 1.72rem !important;
    gap: 0.22rem 0.32rem !important;
  }

  #chat-root .chat-section-map-main {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.24rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #chat-root .chat-section-map-name,
  #chat-root .chat-section-map-key {
    display: inline !important;
    white-space: nowrap !important;
  }

  #chat-root .chat-section-map-meta,
  #chat-root .chat-section-map-actions {
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
  }

  #chat-root .chat-section-map-meta {
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  #chat-root .chat-section-map-meta::-webkit-scrollbar {
    display: none !important;
  }
}

/* Mobile HTML editor topbar: icon-only controls. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 560px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-topbar {
    grid-template-columns: repeat(3, 2.44rem) minmax(0, 1fr) !important;
    justify-content: start !important;
    align-items: center !important;
    gap: 0.36rem !important;
    min-height: 2.92rem !important;
    padding-top: calc(env(safe-area-inset-top) + 0.28rem) !important;
    padding-bottom: 0.3rem !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    grid-template-columns: 1fr !important;
    width: 2.44rem !important;
    min-width: 2.44rem !important;
    max-width: 2.44rem !important;
    height: 2.44rem !important;
    min-height: 2.44rem !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section::before,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview::before {
    grid-column: 1 !important;
    width: 1.08rem !important;
    height: 1.08rem !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section > span,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview > span,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings strong {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section select,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview select {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
}

@media (max-width: 430px), (pointer: coarse) and (max-height: 560px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-topbar {
    grid-template-columns: repeat(3, 2.18rem) minmax(0, 1fr) !important;
    gap: 0.3rem !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-settings,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-section,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-mobile-preview {
    width: 2.18rem !important;
    min-width: 2.18rem !important;
    max-width: 2.18rem !important;
    height: 2.18rem !important;
    min-height: 2.18rem !important;
  }
}

/* Mobile selected-element settings: compact DX settings-panel treatment. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 560px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection {
    left: max(0.5rem, env(safe-area-inset-left)) !important;
    right: max(0.5rem, env(safe-area-inset-right)) !important;
    bottom: calc(var(--chat-keyboard-offset, 0px) + var(--mobile-html-editor-dock-h, 4.35rem) + env(safe-area-inset-bottom) + 0.5rem) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(42dvh, 20rem) !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 42%, var(--dx-line, #3a3a3a) 58%) !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--dx-panel, #222) 94%, #000 6%) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-dock-bar {
    min-height: 2rem !important;
    padding: 0.24rem 0.34rem !important;
    border-bottom: 1px solid var(--dx-line, #3a3a3a) !important;
    background: color-mix(in srgb, var(--dx-bar, #262626) 86%, #000 14%) !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-drawer {
    display: grid !important;
    gap: 0.34rem !important;
    max-height: calc(min(42dvh, 20rem) - 2rem) !important;
    overflow: auto !important;
    padding: 0.38rem !important;
    background: transparent !important;
    -webkit-overflow-scrolling: touch !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions {
    border: 1px solid var(--dx-line, #3a3a3a) !important;
    border-radius: 9px !important;
    background: color-mix(in srgb, var(--dx-elevated, #333) 54%, #000 46%) !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools::before,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools::before,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions::before {
    min-height: 1.38rem !important;
    padding: 0 0.48rem !important;
    border-bottom: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 82%, #fff 18%) !important;
    background: color-mix(in srgb, var(--dx-bar, #262626) 88%, #000 12%) !important;
    color: var(--dx-muted, #8a8a8a) !important;
    font: 800 0.52rem/1 var(--chat-chrome-mono, monospace) !important;
    letter-spacing: 0.08em !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools-grid,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label {
    display: grid !important;
    grid-template-columns: minmax(5.6rem, 0.38fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.42rem !important;
    min-height: 2.08rem !important;
    padding: 0.3rem 0.5rem !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 72%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:last-child,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label:last-child {
    border-bottom: 0 !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools span,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools span {
    grid-column: 1 !important;
    justify-self: start !important;
    text-align: left !important;
    color: color-mix(in srgb, var(--dx-copy, #e6e6e6) 86%, var(--dx-muted, #8a8a8a) 14%) !important;
    font: 800 0.58rem/1.1 var(--chat-chrome-mono, monospace) !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools select,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools input[type="number"],
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools select,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools input[type="number"],
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-form {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 1.6rem !important;
    height: 1.6rem !important;
    padding: 0 0.46rem !important;
    border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 34%, var(--dx-line, #3a3a3a) 66%) !important;
    border-radius: 7px !important;
    background: color-mix(in srgb, #111 72%, var(--dx-elevated, #333) 28%) !important;
    color: var(--dx-copy, #e6e6e6) !important;
    font: 600 0.78rem/1.1 var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
    box-shadow: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]),
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label:has(input[type="range"]) {
    grid-template-columns: minmax(5.6rem, 0.38fr) minmax(0, 1fr) 4rem !important;
    gap: 0.38rem !important;
    min-height: 2.08rem !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]) span,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label:has(input[type="range"]) span {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]) input[type="range"],
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label:has(input[type="range"]) input[type="range"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 1rem !important;
    margin: 0 !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]) input[type="number"] {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions {
    display: grid !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-picker {
    grid-column: auto !important;
    width: auto !important;
    margin: 0.38rem !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-form {
    color: color-mix(in srgb, var(--dx-copy, #e6e6e6) 78%, var(--dx-muted, #8a8a8a) 22%) !important;
  }
}

@media (max-width: 430px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]),
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label:has(input[type="range"]) {
    grid-template-columns: 4.85rem minmax(0, 1fr) 3.35rem !important;
    padding-inline: 0.42rem !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:not(:has(input[type="number"])),
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label:not(:has(input[type="range"])) {
    grid-template-columns: 4.85rem minmax(0, 1fr) !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools span,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools span {
    font-size: 0.52rem !important;
  }
}

/* Phone header: extra-tight on narrow screens. */
@media (max-width: 430px) {
  body.is-chat-home {
    --mobile-chat-top-h: calc(2.15rem + env(safe-area-inset-top));
  }

  body.is-chat-home .main-top {
    padding: calc(env(safe-area-inset-top) + 0.12rem) calc(max(0.4rem, env(safe-area-inset-right)) + 7rem) 0.12rem calc(max(0.4rem, env(safe-area-inset-left)) + 2rem) !important;
  }

  body.is-chat-home .main-top-label {
    font-size: 0.68rem !important;
  }

  body.is-chat-home .sidebar-toggle,
  body.is-chat-home.is-sidebar-collapsed .sidebar-toggle,
  body.is-chat-home:not(.is-sidebar-collapsed) .sidebar-toggle,
  body.is-chat-home #chat-account-scope,
  body.is-chat-home #admin-preview-toggle {
    top: calc(env(safe-area-inset-top) + 0.12rem) !important;
    width: 1.62rem !important;
    min-width: 1.62rem !important;
    max-width: 1.62rem !important;
    height: 1.62rem !important;
    min-height: 1.62rem !important;
    max-height: 1.62rem !important;
    border-radius: 5px !important;
  }

  body.is-chat-home #admin-preview-toggle {
    right: calc(max(0.4rem, env(safe-area-inset-right)) + 1.86rem) !important;
  }

  body.is-chat-home .chat-top-hire {
    top: calc(env(safe-area-inset-top) + 0.12rem) !important;
    height: 1.62rem !important;
    min-height: 1.62rem !important;
    max-height: 1.62rem !important;
    border-radius: 5px !important;
    right: calc(max(0.4rem, env(safe-area-inset-right)) + 3.78rem) !important;
    min-width: 2.85rem !important;
    max-width: 2.95rem !important;
    padding: 0 0.34rem !important;
  }

  body.is-chat-home .chat-top-hire::after {
    font-size: 0.5rem !important;
  }
}

/* Main chat compose: 4-column grid — upload | input | dictate | send. */
body.is-chat-home #chat-form.chat-form {
  position: relative !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
}

body.is-chat-home #chat-form #chat-upload {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.is-chat-home #chat-form textarea#chat-input {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding-left: 0.06rem !important;
}

body.is-chat-home #chat-form #chat-dictate {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

body.is-chat-home #chat-form .chat-send-icon {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

body.is-chat-home #chat-form .visually-hidden,
body.is-chat-home #chat-form #chat-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Layout edit prompt: always single-line. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-prompt-shell {
  align-items: center !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-form textarea[data-prototype-layout-input] {
  height: 1.25rem !important;
  min-height: 1.25rem !important;
  max-height: 1.25rem !important;
  line-height: 1.25rem !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  resize: none !important;
  field-sizing: fixed !important;
}

/* Fullscreen desktop editor: lock layout prompt bar to bottom center of viewport. */
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-edit--viewport-dock,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-edit--viewport-dock {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(0.65rem, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  z-index: 350 !important;
}

/* Layout prompt: keep send button inside the input shell (override main chat-form grid leaks). */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-form.chat-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  overflow: visible !important;
}

body.is-chat-home :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-form.chat-form textarea[data-prototype-layout-input],
body.is-chat-home :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-form.chat-form .chat-send-icon {
  grid-column: auto !important;
  grid-row: auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-prompt-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 0.28rem !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  padding: 0 0.18rem 0 0.46rem !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 82%, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--dx-elevated, #333) 54%, #000 46%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-prompt-shell textarea[data-prototype-layout-input] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-prompt-shell .chat-send-icon {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--pf-chat-neon, #00cfff) !important;
  color: #00161b !important;
  box-shadow: none !important;
  position: static !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-prompt-shell .chat-send-icon::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  width: 0.74rem !important;
  height: 0.74rem !important;
  margin: 0 !important;
  inset: auto !important;
  transform: none !important;
  background: currentColor !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.6 19.4 11h-4.7v9.4H9.3V11H4.6L12 3.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.6 19.4 11h-4.7v9.4H9.3V11H4.6L12 3.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-prompt-shell .chat-send-icon::after {
  display: none !important;
}

/* Desktop editor: image hold-drag placement (same behavior as mobile). */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor).is-mobile-image-drag-armed .chat-prototype-live-stage [data-pf-inspect-kind="image"].is-pf-selected,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor).is-mobile-image-dragging .chat-prototype-live-stage [data-pf-inspect-kind="image"].is-pf-selected {
  outline-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 72%, #ffffff 28%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-live-stage .is-pf-mobile-layout-dragging,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor).is-mobile-image-dragging .chat-prototype-live-stage {
  cursor: grabbing !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-live-stage .is-pf-mobile-image-drop-preview {
  opacity: 0.92 !important;
}

/* Trait dock replace-image search: compact toolbar inside inspector card. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-form {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: static !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-shell {
  display: grid !important;
  grid-template-columns: 1.1rem minmax(0, 1fr) 1.6rem !important;
  align-items: center !important;
  gap: 0.3rem !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 2rem !important;
  padding: 0 0.28rem 0 0.46rem !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 82%, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--dx-elevated, #333) 54%, #000 46%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-shell input[data-prototype-inspector-image-search] {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 1.25rem !important;
  min-height: 1.25rem !important;
  font-size: 0.7rem !important;
  line-height: 1.25rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-search-btn {
  width: 1.6rem !important;
  min-width: 1.6rem !important;
  height: 1.6rem !important;
  min-height: 1.6rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-status {
  margin: 0.32rem 0 0 !important;
  padding: 0 0.12rem !important;
  color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 92%, var(--pf-chat-neon, #00cfff) 8%) !important;
  font: 500 0.58rem/1.35 var(--dx-body-font, "Inter", "Helvetica Neue", Arial, sans-serif) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.38rem !important;
  max-height: min(14rem, 42vh) !important;
  margin-top: 0.32rem !important;
  padding: 0.48rem !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 88%, transparent) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--dx-panel, #2d2d2d) 92%, #0a0a0a 8%) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu.hidden {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu .chat-prototype-library-option {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.22rem !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0.28rem !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 86%, transparent) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--dx-elevated, #333) 88%, #111 12%) !important;
  color: var(--custom-copy, #e8e8e8) !important;
  cursor: pointer !important;
  text-align: left !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu .chat-prototype-library-option:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu .chat-prototype-library-option.is-selected,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu .chat-prototype-library-option:focus-visible {
  border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 62%, transparent) !important;
  background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 10%, var(--dx-elevated, #333) 90%) !important;
  outline: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu .chat-prototype-library-option img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 4.25rem !important;
  border-radius: 4px !important;
  object-fit: cover !important;
  background: #111 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu .chat-prototype-library-option-copy {
  display: grid !important;
  gap: 0.04rem !important;
  min-width: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu .chat-prototype-library-option-copy strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.48rem !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu .chat-prototype-library-option-copy small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 92%, transparent) !important;
  font-size: 0.42rem !important;
  line-height: 1.1 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu .chat-prototype-library-empty {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 0.32rem 0.12rem !important;
  color: color-mix(in srgb, var(--dx-muted, #8a8a8a) 92%, transparent) !important;
  font-size: 0.58rem !important;
  line-height: 1.35 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions {
  overflow: visible !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-picker {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-menu {
  grid-template-columns: 1fr !important;
  gap: 0.24rem !important;
  margin-top: 0 !important;
  padding: 0.34rem !important;
  max-height: min(10rem, 28vh) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-menu .chat-prototype-library-option {
  display: grid !important;
  grid-template-columns: 2.35rem minmax(0, 1fr) !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.42rem !important;
  min-height: 0 !important;
  padding: 0.28rem 0.34rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-menu .chat-prototype-library-option img {
  width: 2.35rem !important;
  height: 2.35rem !important;
  min-height: 2.35rem !important;
  aspect-ratio: auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-form {
  min-height: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Main-top header actions: text/icon only, no button chrome. */
.chat-top-hire,
body.is-chat-home .chat-top-hire,
.admin-preview-toggle,
body.is-chat-home #admin-preview-toggle,
#chat-account-scope,
body.is-chat-home #chat-account-scope {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.chat-top-hire:hover,
body.is-chat-home .chat-top-hire:hover,
.admin-preview-toggle:hover,
body.is-chat-home #admin-preview-toggle:hover,
#chat-account-scope:hover,
body.is-chat-home #chat-account-scope:hover {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: var(--pf-chat-neon, #00cfff) !important;
  opacity: 0.92 !important;
}

.admin-preview-toggle.is-active,
body.is-chat-home #admin-preview-toggle.is-active {
  color: var(--pf-chat-neon, #00cfff) !important;
  background: transparent !important;
}

#chat-account-scope.is-scoped,
body.is-chat-home #chat-account-scope.is-scoped {
  background: transparent !important;
  color: var(--pf-chat-neon, #00cfff) !important;
}

/* Section map row: keep meta chips flush right beside actions. */
#chat-root .chat-section-map-row-grid {
  display: flex !important;
  align-items: center !important;
  gap: 0.36rem 0.55rem !important;
}

#chat-root .chat-section-map-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  grid-area: auto !important;
}

#chat-root .chat-section-map-meta {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  justify-self: auto !important;
  grid-area: auto !important;
  display: inline-flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

#chat-root .chat-section-map-actions {
  flex: 0 0 auto !important;
  justify-self: auto !important;
  grid-area: auto !important;
  justify-content: flex-end !important;
}

@media (max-width: 760px) {
  #chat-root .chat-section-map-row-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto !important;
    grid-template-areas: "main meta actions" !important;
  }

  #chat-root .chat-section-map-main {
    grid-area: main !important;
    flex: initial !important;
  }

  #chat-root .chat-section-map-meta {
    grid-area: meta !important;
    margin-left: 0 !important;
    justify-self: end !important;
  }

  #chat-root .chat-section-map-actions {
    grid-area: actions !important;
    justify-self: end !important;
  }
}

/* Layout prompt bar: collapse hidden undo slot and shrink-wrap the dock. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-edit--viewport-dock {
  width: auto !important;
  max-width: min(41rem, calc(100vw - 1.3rem)) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-edit--viewport-dock .chat-prototype-layout-edit-bar {
  width: auto !important;
  max-width: 100% !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-edit--viewport-dock .chat-prototype-layout-edit-bar:has(.chat-prototype-layout-undo.hidden) {
  grid-template-columns: 2rem minmax(0, 1fr) !important;
  grid-template-areas: "focus prompt" !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-edit--viewport-dock .chat-prototype-layout-edit-bar:has(.chat-prototype-layout-undo:not(.hidden)) {
  grid-template-columns: 2rem minmax(0, 1fr) auto !important;
  grid-template-areas: "focus prompt undo" !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft:not(.is-mobile-editor) .chat-prototype-layout-form.chat-form {
  width: min(34rem, calc(100vw - 5rem)) !important;
  max-width: 100% !important;
}

/* Trait dock drag: inline coordinates must beat default dock anchoring. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection.is-manual-position,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-dock-dragging {
  transition: none !important;
  right: auto !important;
  bottom: auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-dock-dragging {
  cursor: grabbing !important;
  user-select: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-dock-dragging .chat-prototype-trait-dock-bar {
  cursor: grabbing !important;
}

/* Desktop fullscreen header: page settings gear + dropdown sheet. */
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-workbench-settings {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--wb-control-h, 1.75rem) !important;
  min-width: var(--wb-control-h, 1.75rem) !important;
  height: var(--wb-control-h, 1.75rem) !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: color-mix(in srgb, var(--custom-copy, #e6e6e6) 88%, #fff 12%) !important;
  cursor: pointer !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-workbench-settings .chat-prototype-control-icon {
  width: 0.86rem !important;
  min-width: 0.86rem !important;
  max-width: 0.86rem !important;
  height: 0.86rem !important;
  min-height: 0.86rem !important;
  max-height: 0.86rem !important;
  border: 0 !important;
  background: currentColor !important;
  box-shadow: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-workbench-settings.hidden {
  display: none !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-workbench-settings:hover,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-workbench-settings.is-active {
  border-color: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 52%, transparent) !important;
  background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 14%, rgba(255, 255, 255, 0.04) 86%) !important;
  color: var(--pf-chat-neon, #00cfff) !important;
}

body.is-workbench-text-settings-open::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 10060 !important;
  background: rgba(0, 0, 0, 0.28) !important;
  pointer-events: auto !important;
}

body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 10070 !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet.hidden {
  display: none !important;
}

body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-toggle {
  display: none !important;
}

body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-dropdown {
  position: fixed !important;
  top: calc(2.85rem + env(safe-area-inset-top)) !important;
  right: max(0.9rem, env(safe-area-inset-right)) !important;
  left: auto !important;
  width: min(29rem, calc(100vw - 1.8rem)) !important;
  pointer-events: auto !important;
  z-index: 10071 !important;
}

body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-panel {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  max-height: min(68vh, 520px) !important;
  overflow: auto !important;
}

body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-panel.hidden {
  display: none !important;
}

@media (max-width: 980px) {
  body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-row--margins,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-row--margins {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-row--settings,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-row--settings {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.is-workbench-text-settings-open .chat-prototype-text-page--workbench-sheet .chat-prototype-text-page-row--colors,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-page-row--colors {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px), (pointer: coarse) and (max-height: 560px) {
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-workbench-settings {
    display: none !important;
  }
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-layout-bar {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.28rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-layout-bar button {
  min-width: 0 !important;
  min-height: 1.55rem !important;
  padding: 0.12rem 0.24rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 22%, var(--custom-line, #3a3a3a) 78%) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--custom-bg, #101418) 90%, var(--custom-panel, #15191e) 10%) !important;
  color: var(--custom-copy, #e6edf3) !important;
  font-size: 0.52rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-layout-bar button.is-active {
  border-color: var(--pf-chat-neon, #00cfff) !important;
  background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 14%, var(--custom-bg, #101418) 86%) !important;
  color: var(--pf-chat-neon, #00cfff) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-live-stage [data-pf-inspect-kind="image"].is-pf-selected,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-live-stage img.is-pf-selected {
  background-color: transparent !important;
  background-image: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-scratch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: var(--wb-control-h, 1.75rem) !important;
  min-width: var(--wb-control-h, 1.75rem) !important;
  height: var(--wb-control-h, 1.75rem) !important;
  min-height: var(--wb-control-h, 1.75rem) !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon, #00cfff) 28%, #343b43 72%) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, #15191e 92%, var(--pf-chat-neon, #00cfff) 8%) !important;
  color: #edf3f7 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-scratch.is-active {
  border-color: var(--pf-chat-neon, #00cfff) !important;
  background: color-mix(in srgb, var(--pf-chat-neon, #00cfff) 18%, #15191e 82%) !important;
  color: var(--pf-chat-neon, #00cfff) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-chat-neon, #00cfff) 24%, transparent 76%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-scratch .chat-prototype-control-icon--spark {
  width: 0.86rem !important;
  min-width: 0.86rem !important;
  max-width: 0.86rem !important;
  height: 0.86rem !important;
  min-height: 0.86rem !important;
  max-height: 0.86rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-control-icon--spark {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 9.2 8.8 2 11l7.2 2.2L12 20l2.8-6.8L22 11l-7.2-2.2L12 2Zm0 4.6 1.4 3.4 3.6 1.1-3.6 1.1L12 15.6l-1.4-3.4-3.6-1.1 3.6-1.1L12 6.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 9.2 8.8 2 11l7.2 2.2L12 20l2.8-6.8L22 11l-7.2-2.2L12 2Zm0 4.6 1.4 3.4 3.6 1.1-3.6 1.1L12 15.6l-1.4-3.4-3.6-1.1 3.6-1.1L12 6.6Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Final winning override for mobile target-point settings. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 560px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection {
    max-height: min(38dvh, 17.5rem) !important;
    border-radius: 11px !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-dock-bar,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-trait-inline-tools {
    display: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions {
    border-radius: 9px !important;
    background: #141414 !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions:has(.chat-prototype-inspector-image-picker.hidden) {
    display: none !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools::before {
    content: "Layout" !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools::before {
    content: "Image" !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions::before {
    content: "Replace" !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:has(input[type="number"]),
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label:has(input[type="range"]) {
    display: grid !important;
    grid-template-columns: 4.9rem minmax(0, 1fr) 3.3rem !important;
    min-height: 2.05rem !important;
    padding: 0.28rem 0.48rem !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, #343b43 68%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools label:not(:has(input[type="number"])),
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools label:not(:has(input[type="range"])) {
    grid-template-columns: 4.9rem minmax(0, 1fr) !important;
  }

  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-block-tools span,
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-mobile-editor .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-image-tools span {
    font: 800 0.62rem/1.1 var(--dx-label-font, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
  }
}

/* Final mobile wizard override: keep the design builder as a true app screen. */
@media (max-width: 760px) {
  .design-setup:not(.hidden) {
    inset: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    place-items: stretch !important;
    padding: 0 !important;
  }

  .design-setup:not(.hidden) .design-setup-panel {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    height: min(100dvh, var(--manual-visual-height, 100dvh)) !important;
    max-height: min(100dvh, var(--manual-visual-height, 100dvh)) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }

  .design-setup:not(.hidden) .design-setup-form {
    grid-row: 4 !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)) !important;
  }

  .design-setup-section-preview,
  .design-setup-menu-builder,
  .design-setup-section.design-setup-field--full,
  .design-setup-grid,
  .design-setup-grid--wide {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .design-setup-menu-builder {
    overflow-x: hidden;
  }

  .design-setup-preview-toggle {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    justify-self: center;
    grid-template-columns: repeat(2, minmax(102px, 1fr));
  }

  .design-setup-site-chrome {
    grid-template-columns: 1fr;
  }

  .design-setup-thumb-chrome {
    grid-template-columns: 1fr;
  }

  .design-setup-menu-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .design-setup-menu-row.is-submenu {
    margin-left: 0.85rem;
  }

  .design-setup-menu-name {
    max-width: none !important;
    grid-column: 1 !important;
    min-width: 0;
  }

  .design-setup-menu-row-actions {
    grid-column: 2 !important;
  }

  .design-setup-parent-mode {
    display: none !important;
  }

  .design-setup-row-options-menu {
    right: 0;
    left: auto;
    max-width: min(11rem, calc(100vw - 1.5rem));
  }

  .design-setup:not(.hidden) .design-setup-actions {
    grid-row: 3 !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 8 !important;
    padding: 0.45rem 0.75rem !important;
    background: color-mix(in srgb, var(--custom-bg) 96%, transparent) !important;
    box-shadow: 0 1px 0 var(--custom-line), 0 10px 18px color-mix(in srgb, #000 24%, transparent) !important;
  }

  .design-setup:not(.hidden) .design-setup-actions .design-setup-action.btn-neon {
    min-height: 2.35rem !important;
  }

  .design-setup:not(.hidden) .design-setup-output:not(:empty) {
    grid-row: 5 !important;
    max-height: min(24svh, 13rem) !important;
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom)) !important;
  }

  body.is-mobile-keyboard-open .design-setup:not(.hidden) .design-setup-panel {
    height: var(--manual-visual-height, 100dvh) !important;
    max-height: var(--manual-visual-height, 100dvh) !important;
  }
}

/* Design wizard page chrome controls must win over older page-preview defaults. */
.design-setup[data-section-preview-mode="page"][data-design-menu-position="left"] .design-setup-preview-page,
.design-setup[data-section-preview-mode="page"][data-design-menu-position="left-responsive"] .design-setup-preview-page {
  grid-template-columns: minmax(112px, 0.28fr) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="right"] .design-setup-preview-page,
.design-setup[data-section-preview-mode="page"][data-design-menu-position="right-responsive"] .design-setup-preview-page {
  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.28fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="top"] .design-setup-preview-page,
.design-setup[data-section-preview-mode="page"][data-design-menu-position="top-responsive"] .design-setup-preview-page,
.design-setup[data-section-preview-mode="page"][data-design-menu-position="overlay"] .design-setup-preview-page,
.design-setup[data-section-preview-mode="page"][data-design-menu-position="bottom"] .design-setup-preview-page {
  grid-template-columns: minmax(0, 1fr) !important;
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="right"] .design-setup-preview-chrome,
.design-setup[data-section-preview-mode="page"][data-design-menu-position="right-responsive"] .design-setup-preview-chrome {
  grid-column: 2 !important;
  grid-row: 1 !important;
  border-left: 1px solid var(--custom-line) !important;
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="right"] .design-setup-preview-screen,
.design-setup[data-section-preview-mode="page"][data-design-menu-position="right-responsive"] .design-setup-preview-screen {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="left"] .design-setup-preview-chrome,
.design-setup[data-section-preview-mode="page"][data-design-menu-position="left-responsive"] .design-setup-preview-chrome {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border-right: 1px solid var(--custom-line) !important;
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="left"] .design-setup-preview-screen,
.design-setup[data-section-preview-mode="page"][data-design-menu-position="left-responsive"] .design-setup-preview-screen {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="bottom"] .design-setup-preview-chrome {
  grid-row: 2 !important;
  border-top: 1px solid var(--custom-line) !important;
}

.design-setup[data-section-preview-mode="page"][data-design-menu-position="bottom"] .design-setup-preview-screen {
  grid-row: 1 !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-actions:has(.chat-prototype-inspector-image-picker) {
  display: block !important;
  grid-template-columns: none !important;
  overflow: visible !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-picker {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-anchor-selection .chat-prototype-inspector-image-body {
  display: grid !important;
  gap: 0.5rem !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0.62rem !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-picker {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-picker.hidden {
  display: none !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-body {
  display: grid !important;
  gap: 0.48rem !important;
  width: 100% !important;
  min-width: 0 !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-form {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-shell {
  display: grid !important;
  grid-template-columns: 1.1rem minmax(0, 1fr) 1.75rem !important;
  align-items: center !important;
  gap: 0.34rem !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 2.05rem !important;
  padding: 0 0.34rem 0 0.52rem !important;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 78%, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--custom-bg, #111) 82%, var(--custom-panel, #222) 18%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-search-icon {
  width: 0.82rem !important;
  height: 0.82rem !important;
  color: color-mix(in srgb, var(--pf-chat-neon) 72%, var(--custom-muted, #8a8a8a) 28%) !important;
  opacity: 0.92 !important;
  background: currentColor !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M16.5 16.5 20 20' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M16.5 16.5 20 20' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-form input[data-prototype-inspector-image-search] {
  width: 100% !important;
  min-width: 0 !important;
  height: 1.35rem !important;
  min-height: 1.35rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--custom-copy, #e8e8e8) !important;
  caret-color: var(--pf-chat-neon) !important;
  font: 500 0.72rem/1.35rem var(--dx-body-font, "Inter", "Helvetica Neue", Arial, sans-serif) !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-form input[data-prototype-inspector-image-search]::placeholder {
  color: color-mix(in srgb, var(--custom-muted, #8a8a8a) 88%, transparent) !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-search-btn {
  display: inline-grid !important;
  place-items: center !important;
  width: 1.75rem !important;
  min-width: 1.75rem !important;
  height: 1.75rem !important;
  min-height: 1.75rem !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 28%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 12%, transparent) !important;
  color: var(--pf-chat-neon) !important;
  cursor: pointer !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-search-btn svg {
  width: 0.78rem !important;
  height: 0.78rem !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-upload {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.42rem !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 2.05rem !important;
  padding: 0.46rem 0.72rem !important;
  border: 1px dashed color-mix(in srgb, var(--pf-chat-neon) 34%, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--custom-panel, #222) 92%, var(--pf-chat-neon) 8%) !important;
  color: color-mix(in srgb, var(--custom-copy, #e8e8e8) 88%, var(--pf-chat-neon) 12%) !important;
  cursor: pointer !important;
  font: 600 0.66rem/1.2 var(--dx-body-font, "Inter", "Helvetica Neue", Arial, sans-serif) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-upload svg {
  width: 0.88rem !important;
  height: 0.88rem !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.85 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-upload:hover,
:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-upload:focus-visible {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 52%, transparent) !important;
  border-style: solid !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 14%, var(--custom-panel, #222) 86%) !important;
  color: #f5fbff !important;
  outline: none !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-actions .chat-prototype-inspector-image-picker button {
  min-height: unset !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-hint,
:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-status {
  margin: 0 !important;
  padding: 0 0.08rem !important;
  color: color-mix(in srgb, var(--custom-muted, #8a8a8a) 88%, var(--pf-chat-neon) 12%) !important;
  font-size: 0.58rem !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-hint.hidden,
:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-status.hidden {
  display: none !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-status {
  color: color-mix(in srgb, var(--pf-chat-neon) 72%, var(--custom-muted) 28%) !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.24rem !important;
  width: 100% !important;
  max-height: min(11rem, 32vh) !important;
  overflow: auto !important;
  padding: 0.34rem !important;
  border: 1px solid color-mix(in srgb, var(--pf-chat-neon) 16%, rgba(255, 255, 255, 0.06)) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--custom-bg, #111) 90%, var(--custom-panel, #222) 10%) !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu.hidden {
  display: none !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu .chat-prototype-library-option {
  display: grid !important;
  grid-template-columns: 2.35rem minmax(0, 1fr) !important;
  gap: 0.42rem !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0.28rem 0.34rem !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--custom-copy) !important;
  cursor: pointer !important;
  text-align: left !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu .chat-prototype-library-option img {
  width: 2.35rem !important;
  height: 2.35rem !important;
  border-radius: 6px !important;
  object-fit: cover !important;
}

:is(#chat-root, #design-setup-visual-editor-host, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu .chat-prototype-library-empty {
  margin: 0 !important;
  padding: 0.42rem 0.52rem !important;
  color: var(--custom-muted) !important;
  font-size: 0.58rem !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  .design-setup-site-chrome {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
  }

  .design-setup-site-chrome .design-setup-field select {
    min-height: 2rem !important;
    font-size: 0.66rem !important;
  }
}

/* Workbench: compact +T / +I insert menus with dropdowns */
.chat-prototype-workbench-insert {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  position: relative;
}

.chat-prototype-insert-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.chat-prototype-workbench-insert-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  width: 1.55rem;
  min-height: var(--wb-control-h, 1.42rem);
  height: var(--wb-control-h, 1.42rem);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--dx-toggle, #0099ff) 42%, var(--dx-line, #3a3a3a));
  border-radius: 3px;
  background: color-mix(in srgb, var(--dx-elevated, #333) 88%, #000 12%);
  color: var(--dx-copy, #e6e6e6);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.chat-prototype-workbench-insert-btn.is-open,
.chat-prototype-workbench-insert-btn:hover {
  border-color: var(--dx-toggle, #0099ff);
  color: #fff;
  background: color-mix(in srgb, var(--dx-toggle, #0099ff) 22%, #222);
}

.chat-prototype-insert-dropdown {
  position: absolute;
  top: calc(100% + 0.28rem);
  left: 0;
  z-index: 40;
  display: grid;
  gap: 0.15rem;
  min-width: 9.5rem;
  padding: 0.28rem;
  border: 1px solid var(--dx-line, #3a3a3a);
  border-radius: 6px;
  background: var(--dx-panel, #2d2d2d);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.chat-prototype-insert-dropdown.hidden {
  display: none !important;
}

.chat-prototype-insert-dropdown > button[role="menuitem"],
.chat-prototype-insert-dropdown .chat-prototype-insert-image-blank {
  display: block;
  width: 100%;
  min-height: 1.55rem;
  padding: 0.28rem 0.45rem;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--dx-copy, #e6e6e6);
  font-size: 0.62rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.chat-prototype-insert-dropdown > button[role="menuitem"]:hover,
.chat-prototype-insert-dropdown .chat-prototype-insert-image-blank:hover {
  background: color-mix(in srgb, var(--dx-toggle, #0099ff) 16%, transparent);
  color: #fff;
}

.chat-prototype-insert-dropdown--image {
  left: auto;
  right: 0;
  width: min(16.5rem, 72vw);
  min-width: 14rem;
  gap: 0.28rem;
  padding: 0.4rem;
}

.chat-prototype-insert-image-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.28rem;
}

.chat-prototype-insert-image-form input[type="search"] {
  min-width: 0;
  min-height: 1.55rem;
  height: 1.55rem;
  padding: 0 0.4rem;
  border: 1px solid var(--dx-line, #3a3a3a);
  border-radius: 3px;
  background: var(--dx-titlebar, #111);
  color: var(--dx-copy, #e6e6e6);
  font-size: 0.62rem;
}

.chat-prototype-insert-image-form button[type="submit"] {
  min-height: 1.55rem;
  height: 1.55rem;
  padding: 0 0.45rem;
  border: 1px solid var(--dx-toggle, #0099ff);
  border-radius: 3px;
  background: var(--dx-toggle, #0099ff);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  cursor: pointer;
}

.chat-prototype-insert-image-status {
  margin: 0;
  min-height: 0.85rem;
  color: var(--dx-muted, #888);
  font-size: 0.52rem;
  line-height: 1.2;
}

.chat-prototype-insert-image-results {
  display: grid;
  gap: 0.18rem;
  max-height: 11.5rem;
  overflow: auto;
}

.chat-prototype-insert-image-option {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 2.1rem;
  padding: 0.18rem 0.28rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--dx-elevated, #333);
  color: var(--dx-copy, #e6e6e6);
  text-align: left;
  cursor: pointer;
}

.chat-prototype-insert-image-option:hover {
  border-color: color-mix(in srgb, var(--dx-toggle, #0099ff) 50%, transparent);
}

.chat-prototype-insert-image-option img {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 2px;
  background: #111;
}

.chat-prototype-insert-image-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.58rem;
  font-weight: 650;
}

.chat-prototype-insert-image-empty {
  margin: 0;
  padding: 0.35rem 0.2rem;
  color: var(--dx-muted, #888);
  font-size: 0.56rem;
  line-height: 1.3;
}

.chat-prototype-insert-image-blank {
  margin-top: 0.1rem;
  border-top: 1px solid var(--dx-line, #3a3a3a) !important;
  border-radius: 0 0 3px 3px !important;
}

.chat-prototype-workbench-insert-btn svg,
.chat-prototype-template-toggle svg {
  width: 13px;
  height: 13px;
  display: block;
  fill: currentColor;
}

.chat-prototype-template-menu {
  position: relative;
}

.chat-prototype-template-dropdown {
  width: min(64rem, 92vw);
  max-width: calc(100vw - 2rem);
  overflow: hidden;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: 2.55rem !important;
  transform: translateX(-50%) !important;
  padding: 0.6rem;
}

.chat-prototype-template-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.45rem;
}

.chat-prototype-template-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
  padding: 0 0.1rem;
}

.chat-prototype-template-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.7rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--dx-line, #3a3a3a);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 600 0.62rem/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.chat-prototype-template-cat span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-size: 0.58rem;
  letter-spacing: 0;
  opacity: 0.85;
}

.chat-prototype-template-cat:hover {
  border-color: var(--pf-chat-neon, #3ec7e0);
}

.chat-prototype-template-cat.is-active {
  border-color: var(--pf-chat-neon, #3ec7e0);
  background: color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 18%, transparent);
  color: var(--pf-chat-neon, #3ec7e0);
}

.chat-prototype-template-cat.is-active span {
  background: color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 28%, transparent);
  color: inherit;
}

.chat-prototype-template-empty {
  display: block;
  padding: 0.85rem 0.4rem;
  color: var(--custom-muted);
  font-size: 0.78rem;
}

.chat-prototype-template-head > span:first-child,
.chat-prototype-template-head strong,
.chat-prototype-template-head small {
  display: block;
}

.chat-prototype-template-arrows {
  display: inline-flex;
  gap: 0.25rem;
}

.chat-prototype-template-arrows button {
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--dx-line, #444);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.chat-prototype-template-arrows button:hover {
  border-color: var(--pf-chat-neon, #3ec7e0);
}

.chat-prototype-template-dropdown > strong,
.chat-prototype-template-dropdown > small {
  display: block;
  padding: 0.15rem 0.25rem;
}

.chat-prototype-template-dropdown > small {
  color: var(--custom-muted);
  margin-bottom: 0.4rem;
}

.chat-prototype-template-dropdown [data-template-results] {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.15rem 0.1rem 0.55rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.chat-prototype-template-dropdown [data-template-index] {
  display: grid;
  grid-template-rows: 4.75rem auto;
  gap: 0;
  flex: 0 0 11.75rem;
  width: 11.75rem;
  padding: 0;
  border: 1px solid rgba(17,17,17,.22);
  background: #fff;
  color: #111;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  overflow: hidden;
}

.chat-prototype-template-dropdown [data-template-index]:hover {
  border-color: #111;
  box-shadow: 3px 3px 0 #111;
}

.chat-prototype-template-dropdown [data-template-index] small {
  color: var(--custom-muted);
  line-height: 1.3;
}

.chat-prototype-template-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f3f3f1;
  border-bottom: 1px solid rgba(17,17,17,.16);
}

.chat-prototype-template-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(1) contrast(1.16);
  mix-blend-mode: normal;
}

.chat-prototype-template-card-media i {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(90deg, transparent 0 24%, rgba(17,17,17,.12) 24% 25%);
}

.chat-prototype-template-card-swatch {
  position: absolute;
  left: 0.45rem;
  bottom: 0.45rem;
  width: .85rem;
  height: .85rem;
  border-radius: 0;
  border: 1px solid #fff;
  background: #111;
  box-shadow: 2px 2px 0 rgba(17,17,17,.22);
  font-style: normal;
}

.chat-prototype-template-card-copy {
  display: grid;
  gap: 0.22rem;
  min-height: 5.9rem;
  padding: 0.55rem;
  align-content: start;
}

.chat-prototype-template-card-copy > small {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chat-prototype-template-card-copy > strong {
  font: 700 0.9rem/.95 Arial Narrow, Arial, sans-serif;
  letter-spacing: -0.045em;
}

.chat-prototype-template-card-copy > em {
  color: #555;
  font: normal 0.58rem/1.25 Inter, system-ui, sans-serif;
}

.chat-prototype-template-card-meta {
  margin-top: 0.16rem;
  color: #111;
  font: 700 0.48rem/1.1 Inter, system-ui, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.chat-prototype-workbench-apply.hidden {
  display: none !important;
}

.chat-prototype-block-move-handle {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 5px;
  background: #111;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.32);
  cursor: grab;
  touch-action: none;
}

.chat-prototype-block-move-handle:active {
  cursor: grabbing;
}

.chat-prototype-block-move-handle::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 3px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2h2v5l2-2 1.4 1.4L12 10.8 7.6 6.4 9 5l2 2V2zm0 20v-5l-2 2-1.4-1.4L12 13.2l4.4 4.4L15 19l-2-2v5h-2zM2 11h5L5 9l1.4-1.4L10.8 12l-4.4 4.4L5 15l2-2H2v-2zm20 0h-5l2-2-1.4-1.4L13.2 12l4.4 4.4L19 15l-2-2h5v-2z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2h2v5l2-2 1.4 1.4L12 10.8 7.6 6.4 9 5l2 2V2zm0 20v-5l-2 2-1.4-1.4L12 13.2l4.4 4.4L15 19l-2-2v5h-2zM2 11h5L5 9l1.4-1.4L10.8 12l-4.4 4.4L5 15l2-2H2v-2zm20 0h-5l2-2-1.4-1.4L13.2 12l4.4 4.4L19 15l-2-2h5v-2z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.chat-format-btn--mobile-pad { display:none !important; }
@media (pointer:coarse) and (max-width:760px), (pointer:coarse) and (max-height:560px) {
  .chat-format-btn--mobile-pad { display:inline-flex !important; }
  .chat-prototype-block-move-handle { border-radius:7px; }
  .chat-prototype-block-move-handle::before { width:17px; height:17px; margin:4px; }
  .chat-prototype-image-resize-handle.is-scale-grip { width:26px !important; height:26px !important; min-width:26px !important; min-height:26px !important; }
}

/* Content-aware grid sizing: text grows, media holds a frame, controls stay intrinsic. */
.pf-page-grid-free.pf-page-grid-text {
  height: auto !important;
  aspect-ratio: auto !important;
  min-height: calc(var(--pf-span-h, 2) * 100cqw / var(--pf-grid-div, 32)) !important;
  overflow: visible !important;
}

.pf-page-grid-free.pf-editor-template-media {
  overflow: hidden !important;
  aspect-ratio: var(--pf-span-w, 12) / var(--pf-span-h, 9) !important;
}

.pf-page-grid-free:is(.pf-editor-template-cta, .pf-editor-template-form) {
  height: auto !important;
  min-height: 42px !important;
  aspect-ratio: auto !important;
}

.chat-prototype-text-page-field--background-image {
  grid-column: span 2;
  min-width: 12rem;
}

.chat-prototype-text-page-field--background-image input {
  width: 100%;
  min-width: 0;
}

/* Compact, evenly aligned editor actions on the right. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head {
  --pf-editor-action-height: 26px;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-view-controls {
  gap: 3px !important;
  width: auto !important;
  min-width: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-view-controls > button {
  height: var(--pf-editor-action-height) !important;
  min-height: var(--pf-editor-action-height) !important;
  margin: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-close-btn {
  width: 26px !important;
  min-width: 26px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  font-size: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-close-btn::before {
  content: "×";
  font: 400 17px/1 system-ui, sans-serif;
}

/* Sidebar toggle lives beside Chat and never moves between open/closed states. */
.tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto !important;
}

.tabs .sidebar-toggle,
body.is-sidebar-collapsed .tabs .sidebar-toggle,
body:not(.is-sidebar-collapsed) .tabs .sidebar-toggle {
  position: static !important;
  inset: auto !important;
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  margin: auto 0 auto 0.2rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Keep the desktop canvas flush to both edges. */
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-shell,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-stage {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-shell {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Insert controls are icon buttons, not tiny text dots. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-insert-btn svg,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-template-toggle svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  fill: #c9c9c9 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.chat-prototype-grid-control {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: var(--wb-control-h, 1.42rem);
  padding: 0 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.chat-prototype-grid-control--settings {
  display: flex;
  width: 100%;
  min-height: 2rem;
  margin: 0.45rem 0 0.6rem;
  box-sizing: border-box;
}

.chat-prototype-grid-control--settings .chat-prototype-grid-scale {
  flex: 1 1 auto;
  width: auto;
}

.chat-prototype-grid-toggle {
  min-width: 2.6rem;
  padding: 0 0.45rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--custom-copy) 88%, #fff 12%);
  font-size: 0.56rem;
  font-weight: 700;
  cursor: pointer;
}

.chat-prototype-grid-toggle.is-active {
  color: var(--pf-chat-neon, #3ec7e0);
  background: color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 14%, transparent);
}

.chat-prototype-grid-scale {
  width: 3.2rem;
  accent-color: var(--pf-chat-neon, #3ec7e0);
}

.chat-prototype-grid-scale-label {
  min-width: 2.1rem;
  font-size: 0.54rem;
  color: var(--custom-muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.chat-prototype-grid-autoplace {
  min-height: 1.15rem;
  padding: 0 0.42rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--custom-copy) 86%, #fff 14%);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
}

.chat-prototype-grid-autoplace:hover {
  color: var(--pf-chat-neon, #3ec7e0);
  background: color-mix(in srgb, var(--pf-chat-neon, #3ec7e0) 12%, transparent);
}

.chat-prototype-grid-help {
  width: 1.15rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: transparent;
  color: var(--custom-muted, #999);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.chat-prototype-grid-help.is-active,
.chat-prototype-grid-help:hover {
  color: var(--pf-chat-neon, #0099ff);
  border-color: color-mix(in srgb, var(--pf-chat-neon, #0099ff) 50%, transparent);
}

.chat-prototype-live-shell {
  position: relative !important;
}

.chat-prototype-layout-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.14s ease;
  background-image:
    linear-gradient(to right, rgba(0, 153, 255, 0.32) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 153, 255, 0.32) 1px, transparent 1px);
  /* Square cells (width-based) — must match place/scale steps */
  background-size: var(--pf-grid-cell, 24px) var(--pf-grid-cell, 24px);
  background-position: 0 0;
}

.chat-prototype-live-shell.is-grid-visible .chat-prototype-layout-grid-overlay.is-visible,
.chat-prototype-live-stage.is-grid-visible > .chat-prototype-layout-grid-overlay.is-visible,
.chat-prototype-live-shell.is-layout-dragging .chat-prototype-layout-grid-overlay.is-visible,
.chat-prototype-live-stage.is-layout-dragging > .chat-prototype-layout-grid-overlay.is-visible {
  opacity: 1 !important;
}

/* Big plain-English coach while dragging layout */
.chat-prototype-drag-coach {
  position: absolute;
  left: 50%;
  top: 0.55rem;
  z-index: 30;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  min-width: min(18rem, 80%);
  max-width: min(28rem, 92%);
  padding: 0.45rem 0.75rem 0.5rem;
  border: 1px solid rgba(0, 153, 255, 0.45);
  border-radius: 8px;
  background: rgba(12, 18, 24, 0.92);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  text-align: center;
}

.chat-prototype-drag-coach.hidden {
  display: none !important;
}

.chat-prototype-drag-coach strong {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
}

.chat-prototype-drag-coach span {
  color: rgba(230, 240, 255, 0.88);
  font-size: 0.62rem;
  line-height: 1.25;
}

.chat-prototype-drag-coach[data-tone="column"] {
  border-color: rgba(0, 207, 255, 0.7);
  background: rgba(0, 40, 58, 0.94);
}

.chat-prototype-drag-coach[data-tone="column"] strong {
  color: #6ee0ff;
}

.chat-prototype-drag-coach[data-tone="pull"] {
  border-color: rgba(255, 180, 70, 0.65);
  background: rgba(42, 28, 8, 0.94);
}

.chat-prototype-drag-coach[data-tone="pull"] strong {
  color: #ffc56e;
}

.chat-prototype-drag-coach[data-tone="stack"] {
  border-color: rgba(160, 130, 255, 0.6);
}

.chat-prototype-grid-legend {
  position: absolute;
  right: 0.55rem;
  top: 2.6rem;
  z-index: 28;
  width: min(16.5rem, calc(100% - 1.1rem));
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(14, 18, 22, 0.95);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  color: #d8dee6;
  font-size: 0.62rem;
  line-height: 1.35;
}

.chat-prototype-grid-legend.hidden {
  display: none !important;
}

.chat-prototype-grid-legend p {
  margin: 0 0 0.35rem;
}

.chat-prototype-grid-legend p:last-child {
  margin-bottom: 0;
}

.chat-prototype-grid-legend strong {
  color: #7ad7ff;
  font-weight: 800;
}

.chat-prototype-grid-legend em {
  font-style: normal;
  color: #ffd18a;
}

/* Drop previews: readable labels + smooth position updates */
.chat-prototype-live-stage [data-pf-free-place-preview],
.chat-prototype-live-stage [data-pf-flex-drop-preview] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0.15rem !important;
  padding: 0.35rem 0.45rem !important;
  border: 2px dashed rgba(0, 207, 255, 0.9) !important;
  border-radius: 8px !important;
  background: rgba(0, 207, 255, 0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 207, 255, 0.2) !important;
  color: rgba(0, 230, 255, 0.98) !important;
  font-weight: 700 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  will-change: left, margin-top, width, height !important;
  contain: layout style !important;
}

/* Free-follow drag: block tracks pointer 1:1; ghost snaps to grid */
.chat-prototype-live-stage .is-pf-flex-dragging {
  transition: none !important;
  animation: none !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
}

/* Studio boot — hide flash until fullscreen/layout settles */
.chat-block-draft.is-studio-booting .chat-prototype-preview-grid,
.chat-media.chat-media--block-draft-fullscreen.is-studio-booting .chat-prototype-preview-grid,
.chat-block-draft.is-studio-booting .chat-prototype-format-strip,
.chat-block-draft.is-studio-booting .chat-prototype-shape-strip,
.chat-media.chat-media--block-draft-fullscreen.is-studio-booting .chat-prototype-format-strip {
  opacity: 0 !important;
  pointer-events: none !important;
}
.chat-block-draft.is-studio-booting .chat-prototype-preview-grid,
.chat-media.chat-media--block-draft-fullscreen.is-studio-booting .chat-prototype-preview-grid {
  transition: opacity 0.12s ease !important;
}
.chat-block-draft:not(.is-studio-booting) .chat-prototype-preview-grid,
.chat-media.chat-media--block-draft-fullscreen:not(.is-studio-booting) .chat-prototype-preview-grid {
  opacity: 1 !important;
}

/* Never disable pointer-events while repositioning — that made buttons unclickable. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-positioning,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-shape-strip.is-positioning {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Contain panel chrome — less layout thrash */
#chat-root .chat-studio-bar {
  flex: 0 0 auto !important;
  contain: layout style !important;
}
#chat-root .chat-shell {
  contain: layout style !important;
}
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail {
  contain: layout style !important;
}
.chat-section-pick-overlay {
  contain: layout style paint !important;
}
/* Kill conflicting overflow on preview grid in fullscreen (hidden vs visible fight) */
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
  overflow: hidden !important;
}
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-inspector {
  overflow: visible !important;
  pointer-events: none !important;
}
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-format-strip,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-shape-strip {
  pointer-events: auto !important;
}

/* Kill layout thrash while placing/scaling */
.chat-prototype-live-stage.is-pf-place-active,
.chat-prototype-live-stage.is-pf-scale-active {
  touch-action: none !important;
}
.chat-prototype-live-stage.is-pf-place-active *,
.chat-prototype-live-stage.is-pf-scale-active * {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}
.chat-prototype-live-stage.is-pf-place-active [data-pf-free-place-preview] {
  transition: none !important;
}
.chat-prototype-live-stage .is-pf-block-scaling {
  transition: none !important;
  animation: none !important;
  will-change: transform !important;
  transform-origin: 0 0 !important;
  backface-visibility: hidden !important;
}
/* Hide format strip mid-gesture so it doesn’t reflow under the pointer */
.chat-block-draft.is-auto-flex-dragging .chat-prototype-format-strip,
.chat-block-draft.is-block-scaling .chat-prototype-format-strip,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-auto-flex-dragging .chat-prototype-format-strip,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-block-scaling .chat-prototype-format-strip {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.chat-prototype-live-stage [data-pf-free-place-preview] .pf-drop-label,
.chat-prototype-live-stage [data-pf-flex-drop-preview] .pf-drop-label {
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
}

.chat-prototype-live-stage [data-pf-free-place-preview] small,
.chat-prototype-live-stage [data-pf-flex-drop-preview] small {
  font-size: 10px !important;
  opacity: 0.9 !important;
  font-weight: 650 !important;
}

.chat-prototype-live-stage [data-pf-drop-tone="column"] {
  border-color: rgba(0, 207, 255, 0.95) !important;
  background: rgba(0, 153, 255, 0.18) !important;
}

.chat-prototype-live-stage [data-pf-drop-tone="pull"] {
  border-color: rgba(255, 180, 70, 0.9) !important;
  background: rgba(255, 170, 40, 0.14) !important;
  color: #ffd18a !important;
}

.chat-prototype-live-stage [data-pf-drop-tone="stack"] {
  border-color: rgba(170, 140, 255, 0.9) !important;
  background: rgba(140, 110, 255, 0.14) !important;
  color: #d4c4ff !important;
}

.chat-prototype-preview-grid {
  position: relative;
}

/* Trait inspector — compact rail */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  overflow: visible !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-prototype-trait-dock-bar {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.28rem !important;
  padding: 0.34rem 0.24rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-prototype-trait-dock-meta {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-prototype-trait-dock-tools {
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.24rem !important;
  margin: 0 !important;
  width: 100% !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-prototype-trait-drawer {
  position: absolute !important;
  left: calc(100% + 0.42rem) !important;
  top: 0 !important;
  width: min(16.5rem, calc(100vw - 5.5rem)) !important;
  min-width: 14rem !important;
  max-width: min(18rem, 42vw) !important;
  max-height: min(70vh, 520px) !important;
  overflow: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  background: rgba(10, 16, 20, 0.96) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.52) !important;
  z-index: 8 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-prototype-trait-drawer.hidden {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-trait-tool--expand.is-active {
  border-color: color-mix(in srgb, var(--pf-chat-neon) 72%, #fff 28%) !important;
  background: color-mix(in srgb, var(--pf-chat-neon) 18%, transparent) !important;
  color: var(--pf-chat-neon) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-layout-dragging .chat-prototype-trait-dock,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-layout-dragging .chat-prototype-trait-queue-chip {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-10px) !important;
  transition: opacity 0.14s ease, visibility 0.14s ease, transform 0.14s ease !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock.is-trait-rail:not(.is-anchor-selection) {
  left: max(0.45rem, env(safe-area-inset-left)) !important;
  top: max(0.45rem, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  width: 28px !important;
  max-width: 28px !important;
}


/* ==========================================================================
   PF Admin density makeover v1
   Match PhotoFolio admin Account settings: compact 32–36px rows, Lato,
   #111/#222/#2d2d2d/#333 surfaces, #999 labels, #0099ff accent, 3–6px radii.
   Condensed · elegant · accessible.
   ========================================================================== */

:root {
  --dx-titlebar: #111111;
  --dx-section: #222222;
  --dx-panel: #2d2d2d;
  --dx-row: #333333;
  --dx-row-alt: #2d2d2d;
  --dx-elevated: #333333;
  --dx-bar: #262626;
  --dx-line: #3a3a3a;
  --dx-line-strong: #454545;
  --dx-label: #999999;
  --dx-label-hi: #ffffff;
  --dx-copy: #e6e6e6;
  --dx-muted: #888888;
  --dx-toggle: #0099ff;
  --dx-toggle-off: #111111;
  --dx-toggle-knob: #888888;
  --dx-toggle-ink: #ffffff;
  --dx-label-font: "Lato", "Helvetica Neue", Arial, sans-serif;
  --dx-row-h: 36px;
  --dx-section-h: 32px;
  --dx-title-h: 36px;
  --dx-control-h: 28px;
  --dx-radius: 6px;
  --dx-control-radius: 3px;
  --dx-label-size: 10px;
  --dx-section-size: 13px;
  --dx-title-size: 14px;
  --wb-control-h: 28px;
  --pf-chat-neon: #0099ff;
  --pf-chat-neon-strong: #33adff;
  --pf-chat-neon-soft: rgba(0, 153, 255, 0.14);
}

:root[data-manual-theme="dark"] {
  --custom-bg: #111111;
  --custom-paper: #1a1a1a;
  --custom-panel: #2d2d2d;
  --custom-ink: #eeeeee;
  --custom-copy: #e6e6e6;
  --custom-muted: #999999;
  --custom-line: #3a3a3a;
  --custom-accent: #0099ff;
  --custom-accent-soft: rgba(0, 153, 255, 0.12);
  --custom-accent-line: rgba(0, 153, 255, 0.42);
  --custom-warm: #0099ff;
  --custom-radius: 6px;
  --pf-chat-neon: #0099ff !important;
  --pf-chat-neon-strong: #33adff !important;
  --pf-chat-neon-soft: rgba(0, 153, 255, 0.14) !important;
  --pf-chat-stage: #111111;
  --pf-chat-surface: #222222;
  --pf-chat-surface-soft: #1a1a1a;
  --pf-chat-ink: #e6e6e6;
  --pf-chat-muted: #999999;
  --pf-chat-line: #3a3a3a;
  --neon: #0099ff !important;
  --neon-border: #0099ff !important;
}

:root:not([data-manual-theme="dark"]) {
  --pf-chat-neon: #0099ff !important;
  --pf-chat-neon-strong: #007acc !important;
  --pf-chat-neon-soft: rgba(0, 153, 255, 0.1) !important;
  --neon: #0099ff !important;
  --neon-border: #0099ff !important;
  --dx-titlebar: #ededed;
  --dx-section: #e4e4e4;
  --dx-panel: #f3f3f3;
  --dx-row: #ffffff;
  --dx-elevated: #ffffff;
  --dx-bar: #f0f0f0;
  --dx-line: #d0d0d0;
  --dx-label: #777777;
  --dx-label-hi: #222222;
  --dx-copy: #222222;
  --dx-muted: #888888;
  --dx-toggle: #0099ff;
}

/* ---- Shared type / control baseline (UI chrome only — not live preview content) ---- */
#chat-root,
.chat-media.chat-media--block-draft-fullscreen {
  font-family: var(--dx-label-font);
}

#chat-root .chat-shell button,
#chat-root .chat-compose button,
#chat-root .chat-head button,
#chat-root .chat-account-panel button,
#chat-root .chat-session-panel button,
#chat-root .chat-prototype-workbench-head button,
#chat-root .chat-prototype-trait-dock button,
#chat-root .chat-prototype-trait-drawer button,
#chat-root .chat-prototype-layout-composer button,
#chat-root .chat-prototype-targeting button,
#chat-root .chat-mode-picker button,
#chat-root .chat-model-picker button,
#chat-root .chat-target-picker button,
#chat-root .btn-neon,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head button,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock button,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-drawer button,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-composer button,
.chat-media.chat-media--block-draft-fullscreen .btn-neon {
  min-height: var(--dx-control-h) !important;
  height: auto !important;
  padding: 0 0.55rem !important;
  border-radius: var(--dx-control-radius) !important;
  font-family: var(--dx-label-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

#chat-root .chat-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
#chat-root .chat-shell select,
#chat-root .chat-compose textarea,
#chat-root .chat-account-panel input,
#chat-root .chat-account-panel select,
#chat-root .chat-session-panel input,
#chat-root .chat-session-panel select,
#chat-root .chat-session-panel textarea,
#chat-root .chat-prototype-workbench-head input,
#chat-root .chat-prototype-workbench-head select,
#chat-root .chat-prototype-trait-dock input:not([type="range"]):not([type="color"]),
#chat-root .chat-prototype-trait-dock select,
#chat-root .chat-prototype-trait-dock textarea,
#chat-root .chat-prototype-layout-composer input,
#chat-root .chat-prototype-layout-composer select,
#chat-root .chat-prototype-layout-composer textarea,
#chat-root .chat-prototype-targeting input,
#chat-root .chat-prototype-targeting select,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head input,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head select,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock input:not([type="range"]):not([type="color"]),
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock select,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock textarea {
  min-height: var(--dx-control-h) !important;
  border-radius: var(--dx-control-radius) !important;
  border: 1px solid var(--dx-line) !important;
  background: var(--dx-titlebar) !important;
  color: var(--dx-copy) !important;
  font-family: var(--dx-label-font) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  padding: 0.28rem 0.42rem !important;
  box-shadow: none !important;
}

#chat-root .chat-shell input:focus,
#chat-root .chat-shell select:focus,
#chat-root .chat-compose textarea:focus,
#chat-root .chat-prototype-trait-dock input:focus,
#chat-root .chat-prototype-trait-dock select:focus,
#chat-root .chat-prototype-trait-dock textarea:focus {
  border-color: var(--dx-toggle) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dx-toggle) 35%, transparent) !important;
}

#chat-root .chat-prototype-trait-inline-field span,
#chat-root .chat-prototype-block-tools span,
#chat-root .chat-prototype-image-tools span,
#chat-root .chat-account-panel label,
#chat-root .chat-session-panel label,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-inline-field span,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-block-tools span,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-tools span {
  color: var(--dx-label) !important;
  font-size: var(--dx-label-size) !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

/* ---- Chat shell: denser chrome ---- */
body.is-chat-home .chat-root--home .chat-shell,
#chat-root.chat-root--home .chat-shell,
#chat-root .chat-shell {
  border-radius: var(--dx-radius) !important;
  border-color: var(--dx-line) !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
}

:root[data-manual-theme="dark"] body.is-chat-home .chat-root--home .chat-shell,
:root[data-manual-theme="dark"] #chat-root .chat-shell {
  background: var(--dx-panel) !important;
  border-color: var(--dx-line) !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.35) !important;
}

body.is-chat-home .chat-root--home .chat-head,
#chat-root .chat-head {
  min-height: var(--dx-title-h) !important;
  height: var(--dx-title-h) !important;
  padding: 0 10px !important;
  border-bottom: 1px solid var(--dx-line) !important;
  background: var(--dx-titlebar) !important;
}

#chat-root .chat-title,
body.is-chat-home .chat-root--home .chat-title {
  font-size: var(--dx-title-size) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--dx-label) !important;
  line-height: 1 !important;
}

#chat-root .chat-eyebrow,
body.is-chat-home .chat-root--home .chat-eyebrow {
  font-size: 10px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  color: var(--dx-muted) !important;
}

/* Mode / model / target pickers — compact admin chips */
#chat-root .chat-mode-picker,
#chat-root .chat-model-picker,
#chat-root .chat-target-picker {
  gap: 0.2rem !important;
}

#chat-root .chat-mode-picker button,
#chat-root .chat-model-picker button,
#chat-root .chat-target-picker button {
  height: 28px !important;
  min-height: 28px !important;
  border-radius: var(--dx-control-radius) !important;
  font-size: 10px !important;
  letter-spacing: 0.4px !important;
  background: var(--dx-section) !important;
  border: 1px solid var(--dx-line) !important;
  color: var(--dx-label) !important;
}

#chat-root .chat-mode-picker button.is-active,
#chat-root .chat-model-picker button.is-active,
#chat-root .chat-target-picker button.is-active {
  background: color-mix(in srgb, var(--dx-toggle) 18%, var(--dx-section)) !important;
  border-color: var(--dx-toggle) !important;
  color: var(--dx-toggle) !important;
}

/* Compose dock — no full-width bar; only the input pill is visible */
#chat-root .chat-compose,
body.is-chat-home .chat-root--home .chat-compose {
  padding: 0.35rem 0.4rem !important;
  border-top: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#chat-root .chat-form,
body.is-chat-home .chat-root--home .chat-form {
  min-height: var(--dx-row-h) !important;
  gap: 0.28rem !important;
  padding: 0.2rem !important;
  border: 1px solid var(--dx-line) !important;
  border-radius: var(--dx-control-radius) !important;
  background: var(--dx-titlebar) !important;
  box-shadow: none !important;
}

#chat-root .chat-form textarea,
body.is-chat-home .chat-root--home .chat-form textarea {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0.28rem 0.4rem !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}

#chat-root .chat-tool,
#chat-root .chat-send-icon,
body.is-chat-home .chat-root--home .chat-tool,
body.is-chat-home .chat-root--home .chat-send-icon {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: var(--dx-control-radius) !important;
  border: 1px solid var(--dx-line) !important;
  background: var(--dx-elevated) !important;
}

#chat-root .chat-send-icon,
body.is-chat-home .chat-root--home .chat-send-icon {
  background: var(--dx-toggle) !important;
  border-color: var(--dx-toggle) !important;
  color: #fff !important;
}

/* Account / session panels */
#chat-root .chat-account-panel,
#chat-root .chat-session-panel,
#chat-session-panel {
  border: 1px solid var(--dx-line) !important;
  border-radius: var(--dx-radius) !important;
  background: var(--dx-panel) !important;
  padding: 0.45rem !important;
  gap: 0.35rem !important;
}

#chat-root .chat-account-panel label,
#chat-root .chat-session-panel label {
  color: var(--dx-label) !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

#chat-root .chat-account-panel input,
#chat-root .chat-session-panel input,
#chat-root .chat-session-panel textarea,
#chat-root .chat-account-panel button,
#chat-root .chat-session-panel button {
  min-height: 28px !important;
  height: 28px !important;
  border-radius: var(--dx-control-radius) !important;
  font-size: 11px !important;
}

/* ---- Design Studio workbench: Account-panel proportions ---- */
#chat-root .chat-prototype-workbench,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench {
  --wb-bg: var(--dx-panel);
  --wb-panel: var(--dx-panel);
  --wb-head: var(--dx-titlebar);
  --wb-rail: var(--dx-bar);
  --wb-line: var(--dx-line);
  --wb-label: var(--dx-label);
  --wb-label-font: var(--dx-label-font);
  --wb-control-h: 28px;
  gap: 0 !important;
  padding: 0 !important;
  border-radius: var(--dx-radius) !important;
  border: 1px solid var(--dx-line) !important;
  background: var(--dx-panel) !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
}

#chat-root .chat-prototype-workbench-head,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head {
  --wb-control-h: 28px;
  min-height: var(--dx-title-h) !important;
  height: var(--dx-title-h) !important;
  padding: 0 8px !important;
  gap: 0.35rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dx-line) !important;
  border-radius: 0 !important;
  background: var(--dx-titlebar) !important;
}

#chat-root .chat-prototype-mode-toggle,
#chat-root .chat-prototype-device-tabs,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mode-toggle,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device-tabs {
  height: 28px !important;
  min-height: 28px !important;
  padding: 2px !important;
  border: 1px solid var(--dx-line) !important;
  border-radius: var(--dx-control-radius) !important;
  background: var(--dx-titlebar) !important;
}

#chat-root .chat-prototype-mode-tab,
#chat-root .chat-prototype-device-tab,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mode-tab,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device-tab {
  min-height: 24px !important;
  height: 24px !important;
  min-width: 1.7rem !important;
  padding: 0 0.38rem !important;
  border-radius: 2px !important;
  font-size: 10px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  color: var(--dx-label) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-mode-tab.is-active,
#chat-root .chat-prototype-device-tab.is-active,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-mode-tab.is-active,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device-tab.is-active {
  background: var(--dx-toggle) !important;
  color: #fff !important;
  box-shadow: none !important;
}

#chat-root .chat-prototype-view-controls,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-view-controls {
  height: 28px !important;
  gap: 0.18rem !important;
}

#chat-root .chat-prototype-grid-control,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-grid-control {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 0.28rem !important;
  border: 1px solid var(--dx-line) !important;
  border-radius: var(--dx-control-radius) !important;
  background: var(--dx-section) !important;
  gap: 0.22rem !important;
}

#chat-root .chat-prototype-grid-toggle,
#chat-root .chat-prototype-grid-autoplace,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-grid-toggle,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-grid-autoplace {
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 0.4rem !important;
  border-radius: 2px !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  color: var(--dx-label) !important;
  background: transparent !important;
}

#chat-root .chat-prototype-grid-toggle.is-active,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-grid-toggle.is-active {
  background: color-mix(in srgb, var(--dx-toggle) 20%, transparent) !important;
  color: var(--dx-toggle) !important;
}

#chat-root .chat-prototype-grid-scale-label,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-grid-scale-label {
  min-width: 2rem !important;
  font-size: 10px !important;
  color: var(--dx-muted) !important;
  letter-spacing: 0.2px !important;
}

#chat-root .chat-prototype-workbench-insert-btn,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-insert-btn {
  min-width: 1.55rem !important;
  width: 1.55rem !important;
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 1px solid var(--dx-line) !important;
  border-radius: var(--dx-control-radius) !important;
  background: var(--dx-elevated) !important;
  color: var(--dx-copy) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#chat-root .chat-prototype-workbench-apply,
#chat-root .chat-prototype-workbench-target,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-apply,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-target {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 0.65rem !important;
  border-radius: var(--dx-control-radius) !important;
  font-size: 10px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

#chat-root .chat-prototype-workbench-apply,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-apply {
  background: var(--dx-toggle) !important;
  border-color: var(--dx-toggle) !important;
  color: #fff !important;
  border-radius: var(--dx-control-radius) !important;
}

#chat-root .chat-prototype-workbench-target,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-target {
  background: var(--dx-elevated) !important;
  border: 1px solid var(--dx-line) !important;
  color: var(--dx-copy) !important;
}

/* Inspect hint is a bottom floating pill — never a top chrome strip */
#chat-root .chat-prototype-inspect-hint,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-inspect-hint {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  width: auto !important;
  max-width: min(36rem, 90%) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.2rem 0.55rem !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  color: #bbbbbb !important;
  background: rgba(12, 12, 12, 0.88) !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28) !important;
}

/* Trait inspector — admin panel look */
#chat-root .chat-prototype-trait-dock,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock {
  border: 1px solid var(--dx-line) !important;
  border-radius: var(--dx-radius) !important;
  background: var(--dx-panel) !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
}

#chat-root .chat-prototype-trait-dock-bar,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock-bar {
  min-height: var(--dx-section-h) !important;
  padding: 0 8px !important;
  background: var(--dx-section) !important;
  border-bottom: 1px solid var(--dx-line) !important;
  gap: 0.35rem !important;
}

#chat-root .chat-prototype-trait-dock-meta strong,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock-meta strong {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  color: var(--dx-label) !important;
}

#chat-root .chat-prototype-trait-dock-meta span,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock-meta span {
  font-size: 10px !important;
  color: var(--dx-muted) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  border-radius: var(--dx-control-radius) !important;
  border: 1px solid var(--dx-line) !important;
  background: var(--dx-elevated) !important;
  color: var(--dx-label) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool svg {
  width: 11px !important;
  height: 11px !important;
}

#chat-root .chat-prototype-trait-drawer,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-drawer {
  gap: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
  background: var(--dx-panel) !important;
}

/* Form tool groups as collapsible admin sections */
#chat-root .chat-prototype-trait-inline-tools,
#chat-root .chat-prototype-image-tools,
#chat-root .chat-prototype-block-tools,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-inline-tools,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-tools,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-block-tools {
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dx-line) !important;
  border-radius: 0 !important;
  background: var(--dx-panel) !important;
}

#chat-root .chat-prototype-trait-inline-grid,
#chat-root .chat-prototype-image-tools-grid,
#chat-root .chat-prototype-block-tools-grid,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-inline-grid,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-tools-grid,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-block-tools-grid {
  gap: 0 !important;
  grid-template-columns: 1fr !important;
}

#chat-root .chat-prototype-trait-inline-field,
#chat-root .chat-prototype-image-tools label,
#chat-root .chat-prototype-block-tools label,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-inline-field,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-tools label,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-block-tools label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 46%) !important;
  align-items: center !important;
  gap: 0.35rem 0.5rem !important;
  min-height: var(--dx-row-h) !important;
  padding: 0 10px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--dx-line) 70%, transparent) !important;
  background: var(--dx-row-alt) !important;
}

#chat-root .chat-prototype-trait-inline-field:nth-child(even),
#chat-root .chat-prototype-image-tools label:nth-child(even),
#chat-root .chat-prototype-block-tools label:nth-child(even),
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-inline-field:nth-child(even),
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-tools label:nth-child(even),
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-block-tools label:nth-child(even) {
  background: var(--dx-row) !important;
}

#chat-root .chat-prototype-trait-inline-field span,
#chat-root .chat-prototype-image-tools label > span,
#chat-root .chat-prototype-block-tools label > span,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-inline-field span,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-tools label > span,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-block-tools label > span {
  justify-self: end !important;
  text-align: right !important;
  color: var(--dx-label-hi) !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#chat-root .chat-prototype-trait-inline-field select,
#chat-root .chat-prototype-trait-inline-field input,
#chat-root .chat-prototype-image-tools select,
#chat-root .chat-prototype-image-tools input,
#chat-root .chat-prototype-block-tools select,
#chat-root .chat-prototype-block-tools input,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-inline-field select,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-tools select,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-block-tools select,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-block-tools input {
  min-height: 24px !important;
  height: 24px !important;
  border-radius: var(--dx-control-radius) !important;
  border: 1px solid var(--dx-line) !important;
  background: var(--dx-titlebar) !important;
  color: var(--dx-copy) !important;
  font-size: 11px !important;
  padding: 0 0.35rem !important;
}

#chat-root .chat-prototype-image-layout-bar,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-layout-bar {
  gap: 0 !important;
  border-bottom: 1px solid var(--dx-line) !important;
  background: var(--dx-section) !important;
  padding: 4px !important;
}

#chat-root .chat-prototype-image-layout-bar button,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-layout-bar button {
  min-height: 26px !important;
  height: 26px !important;
  border-radius: 2px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--dx-label) !important;
  font-size: 9px !important;
  letter-spacing: 0.25px !important;
  text-transform: uppercase !important;
}

#chat-root .chat-prototype-image-layout-bar button.is-active,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-image-layout-bar button.is-active {
  background: var(--dx-toggle) !important;
  border-color: var(--dx-toggle) !important;
  color: #fff !important;
}

#chat-root .chat-prototype-trait-inline-tools [data-prototype-inline-apply],
#chat-root .chat-prototype-note-btn,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-note-btn {
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 0.55rem !important;
  border-radius: var(--dx-control-radius) !important;
  border: 1px solid var(--dx-line) !important;
  background: var(--dx-elevated) !important;
  color: var(--dx-copy) !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

#chat-root .chat-prototype-trait-form.chat-form {
  min-height: 0 !important;
  padding: 6px 8px !important;
  border: 0 !important;
  border-top: 1px solid var(--dx-line) !important;
  border-radius: 0 !important;
  background: var(--dx-section) !important;
}

#chat-root .chat-prototype-trait-form textarea[data-prototype-ai-note] {
  min-height: 2.2rem !important;
  height: 2.2rem !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  background: var(--dx-titlebar) !important;
  border: 1px solid var(--dx-line) !important;
  border-radius: var(--dx-control-radius) !important;
  padding: 0.35rem 0.45rem !important;
}

#chat-root .chat-prototype-trait-queue-chip,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-queue-chip {
  min-height: 26px !important;
  padding: 0 0.55rem !important;
  border-radius: var(--dx-control-radius) !important;
  border: 1px solid var(--dx-line) !important;
  background: var(--dx-section) !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

/* Layout AI / targeting rails denser */
#chat-root .chat-prototype-layout-composer,
#chat-root .chat-prototype-targeting,
#chat-root .chat-prototype-workbench-route,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-layout-composer,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-targeting,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-route {
  padding: 0.35rem 0.5rem !important;
  border-color: var(--dx-line) !important;
  background: var(--dx-section) !important;
  border-radius: 0 !important;
  gap: 0.3rem !important;
}

#chat-root .chat-prototype-workbench-route-kicker,
#chat-root .chat-prototype-targeting label span,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-route-kicker {
  font-size: 10px !important;
  letter-spacing: 0.35px !important;
  text-transform: uppercase !important;
  color: var(--dx-label) !important;
}

/* Zoom / range accents */
#chat-root input[type="range"],
.chat-media.chat-media--block-draft-fullscreen input[type="range"] {
  accent-color: var(--dx-toggle) !important;
  min-height: 18px !important;
  height: 18px !important;
}

/* Library search denser */
#chat-root .chat-prototype-library,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-library {
  border-color: var(--dx-line) !important;
  background: var(--dx-panel) !important;
  border-radius: 0 !important;
}

#chat-root .chat-prototype-library-status,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-library-status {
  font-size: 10px !important;
  color: var(--dx-muted) !important;
  letter-spacing: 0.25px !important;
}

/* Side rail / design setup denser where present */
.design-setup-tabs button,
.design-setup-actions .design-setup-action.btn-neon {
  min-height: 28px !important;
  height: 28px !important;
  border-radius: var(--dx-control-radius) !important;
  font-size: 10px !important;
  letter-spacing: 0.35px !important;
  text-transform: uppercase !important;
  padding-inline: 0.7rem !important;
}

.design-setup-form {
  padding: 0.55rem !important;
}

.design-setup-brand-section {
  padding: 0.45rem 0.5rem !important;
  border-radius: var(--dx-control-radius) !important;
  gap: 0.35rem !important;
}

.design-setup-brand-field-label {
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  color: var(--dx-label) !important;
}

.design-setup-brand-logo-field input,
.design-setup-brand-logo-upload {
  min-height: 28px !important;
  border-radius: var(--dx-control-radius) !important;
  font-size: 11px !important;
}

/* Sidebar + floating chrome denser */
.tab {
  min-height: 28px !important;
  font-size: 11px !important;
  letter-spacing: 0.35px !important;
  text-transform: uppercase !important;
}

.admin-preview-toggle,
.ai-fab {
  min-height: 28px !important;
  height: 28px !important;
  border-radius: var(--dx-control-radius) !important;
  font-size: 10px !important;
  letter-spacing: 0.35px !important;
  text-transform: uppercase !important;
  padding: 0 0.55rem !important;
}

#search {
  min-height: 28px !important;
  height: 28px !important;
  border-radius: var(--dx-control-radius) !important;
  font-size: 11px !important;
}

.nav-section-title,
.nav-folder summary {
  font-size: 11px !important;
  letter-spacing: 0.35px !important;
  text-transform: uppercase !important;
  color: var(--dx-label) !important;
}

/* Soften neon glow elsewhere so #0099ff feels admin, not vaporwave */
:root[data-manual-theme="dark"] body.is-chat-home .chat-root--home .chat-shell {
  background: var(--dx-panel) !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.28) !important;
  border-color: var(--dx-line) !important;
}

:root[data-manual-theme="dark"] body.is-chat-home .chat-root--home .chat-head {
  background: var(--dx-titlebar) !important;
}

:root[data-manual-theme="dark"] body.is-chat-home .chat-root--home .chat-log {
  background: var(--dx-panel) !important;
}

/* Fullscreen workbench inherits same density */
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head {
  --wb-control-h: 28px;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-view-controls button:not(.chat-prototype-workbench-apply):not(.chat-prototype-workbench-target):not(.chat-prototype-zoom-fit-btn):not(.chat-prototype-grid-toggle):not(.chat-prototype-grid-autoplace) {
  min-width: 28px !important;
  min-height: 28px !important;
  height: 28px !important;
  border-radius: var(--dx-control-radius) !important;
  font-size: 10px !important;
}

/* Approval cards denser */
.pending-approval-card__approve,
.pending-approval-card__cancel {
  min-height: 28px !important;
  border-radius: var(--dx-control-radius) !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  padding: 0 0.65rem !important;
}

.pending-approval-card__approve {
  background: var(--dx-toggle) !important;
  color: #fff !important;
  border-color: var(--dx-toggle) !important;
}

/* Trait rail v3 — compact mini strip (~1/4 footprint) */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  background: rgba(12, 18, 24, 0.94) !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(0, 207, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  overflow: hidden !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail.is-anchor-selection {
  min-width: 28px !important;
  max-width: 28px !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-prototype-trait-dock-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  min-height: auto !important;
  height: auto !important;
  padding: 4px 3px 4px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-prototype-trait-dock-meta {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-prototype-trait-dock-tools {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  width: 100% !important;
  margin: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-prototype-trait-dock-tools .chat-trait-tool {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(236, 244, 248, 0.92) !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    color 0.12s ease,
    box-shadow 0.12s ease !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-prototype-trait-dock-tools .chat-trait-tool svg {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  fill: currentColor !important;
  opacity: 0.95 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-prototype-trait-dock-tools .chat-trait-tool:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-prototype-trait-dock-tools .chat-trait-tool:focus-visible {
  border-color: rgba(0, 207, 255, 0.5) !important;
  background: rgba(0, 207, 255, 0.14) !important;
  color: #fff !important;
  transform: none !important;
  outline: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-trait-tool--expand {
  margin-bottom: 4px !important;
  border-color: rgba(0, 207, 255, 0.28) !important;
  background: rgba(0, 207, 255, 0.1) !important;
  color: #8be9ff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-trait-tool--expand::after {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  right: 3px !important;
  bottom: -3px !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  pointer-events: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-trait-tool--expand.is-active {
  border-color: rgba(0, 207, 255, 0.65) !important;
  background: rgba(0, 207, 255, 0.2) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(0, 207, 255, 0.18) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-trait-tool--delete {
  border-color: rgba(255, 108, 108, 0.3) !important;
  background: rgba(255, 80, 80, 0.07) !important;
  color: #ffb8b8 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-trait-tool--delete:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-trait-tool--delete:focus-visible {
  border-color: rgba(255, 120, 120, 0.55) !important;
  background: rgba(255, 80, 80, 0.16) !important;
  color: #ffe0e0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-trait-tool--dismiss {
  margin-top: 4px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(168, 178, 186, 0.88) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-trait-tool--dismiss::before {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  right: 3px !important;
  top: -3px !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  pointer-events: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-trait-tool--dismiss:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-trait-tool--dismiss:focus-visible {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #e8eef2 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.is-trait-rail .chat-prototype-trait-drawer {
  left: calc(100% + 6px) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock.is-trait-rail:not(.is-anchor-selection) {
  left: max(0.45rem, env(safe-area-inset-left)) !important;
  top: max(0.45rem, env(safe-area-inset-top)) !important;
  width: 28px !important;
  max-width: 28px !important;
}

/* Text align in box — always-visible toolbar on selection */
.chat-prototype-text-align-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  margin-right: 0.2rem;
  padding: 0.1rem;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 80%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--dx-titlebar, #111) 70%, transparent);
}

.chat-prototype-text-align-bar.hidden {
  display: none !important;
}

.chat-text-align-btn {
  display: inline-grid;
  place-items: center;
  width: 1.42rem;
  min-width: 1.42rem;
  height: 1.42rem;
  min-height: 1.42rem;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--dx-copy, #e6e6e6);
  cursor: pointer;
}

.chat-text-align-btn svg {
  width: 0.82rem;
  height: 0.82rem;
  fill: currentColor;
}

.chat-text-align-btn:hover {
  background: color-mix(in srgb, var(--dx-toggle, #0099ff) 18%, transparent);
  color: #fff;
}

.chat-text-align-btn.is-active {
  background: color-mix(in srgb, var(--dx-toggle, #0099ff) 32%, #1a1a1a);
  color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dx-toggle, #0099ff) 55%, transparent);
}

.chat-text-align-sep {
  width: 1px;
  height: 0.95rem;
  margin: 0 0.12rem;
  background: color-mix(in srgb, var(--dx-line, #3a3a3a) 90%, transparent);
}

/* Size snap guide — full-stage grid + edge lines while scaling (matches place grid) */
[data-pf-size-snap-guide] {
  position: absolute;
  inset: 0;
  pointer-events: none !important;
  z-index: 28;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  opacity: 1;
}

.chat-block-draft.is-block-scaling [data-pf-size-snap-guide],
.chat-media.chat-media--block-draft-fullscreen .is-block-scaling [data-pf-size-snap-guide] {
  display: block !important;
}

[data-pf-size-snap-guide] .pf-size-snap-label {
  position: absolute;
  left: 50%;
  top: -1.55rem;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  background: rgba(4, 14, 20, 0.92);
  color: #7fe9ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#chat-root .chat-block-draft.is-block-scaling .chat-prototype-layout-grid-overlay.is-visible,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-block-scaling .chat-prototype-layout-grid-overlay.is-visible,
#chat-root .chat-block-draft.is-grid-visible .chat-prototype-layout-grid-overlay.is-visible,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell.is-grid-visible .chat-prototype-layout-grid-overlay.is-visible,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-stage.is-grid-visible > .chat-prototype-layout-grid-overlay.is-visible {
  opacity: 1 !important;
}

/* Column resize: kill layout transitions so drag feels precise */
#chat-root .chat-block-draft.is-column-resizing .chat-prototype-live-stage [class*="-flex-col"],
#chat-root .chat-block-draft.is-column-resizing .chat-prototype-live-stage [class*="-flex-row"],
#chat-root .chat-block-draft.is-column-resizing .chat-prototype-live-stage [class*="-grid-row"],
#chat-root .chat-block-draft.is-block-scaling .chat-prototype-live-stage .is-pf-block-scaling,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-column-resizing .chat-prototype-live-stage [class*="-flex-col"],
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-column-resizing .chat-prototype-live-stage [class*="-flex-row"],
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-column-resizing .chat-prototype-live-stage [class*="-grid-row"] {
  transition: none !important;
}

#chat-root .chat-block-draft.is-column-resizing .chat-prototype-image-resize-handle,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-column-resizing .chat-prototype-image-resize-handle {
  cursor: ew-resize !important;
}

[data-pf-size-snap-guide] .pf-size-snap-split {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: rgba(255, 210, 70, 0.95);
  box-shadow: 0 0 12px rgba(255, 210, 70, 0.55);
}

/* Selection-only HTML / CSS snippet in trait drawer */
.chat-prototype-selection-code {
  display: grid;
  gap: 0.35rem;
  padding: 0.4rem 0.45rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 85%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--dx-titlebar, #111) 88%, #000 12%);
}

.chat-prototype-selection-code.hidden {
  display: none !important;
}

.chat-prototype-selection-code-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.chat-prototype-selection-code-head strong {
  font-size: 0.62rem;
  font-weight: 750;
  color: #fff;
  letter-spacing: 0.02em;
}

.chat-prototype-selection-code-head span {
  font-size: 0.55rem;
  color: color-mix(in srgb, var(--dx-copy, #ccc) 70%, transparent);
}

.chat-prototype-selection-code-block {
  display: grid;
  gap: 0.15rem;
  margin: 0;
}

.chat-prototype-selection-code-block > span {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dx-toggle, #0099ff) 70%, #aaa);
}

.chat-prototype-selection-code-block pre {
  margin: 0;
  max-height: 5.5rem;
  overflow: auto;
  padding: 0.35rem 0.4rem;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--dx-line, #3a3a3a) 80%, transparent);
  background: #0a0c0e;
  color: #c8e6ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.55rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-prototype-selection-code-hint {
  margin: 0;
  font-size: 0.55rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--dx-copy, #bbb) 75%, transparent);
}

/* Shape insert menu (+S) */
.chat-prototype-insert-dropdown--shape {
  min-width: 10.5rem;
}

.chat-prototype-insert-dropdown--shape > button[role="menuitem"] {
  display: flex !important;
  align-items: center;
  gap: 0.45rem;
}

.chat-shape-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
  background: #c8ccd2;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.chat-shape-swatch--rect {
  border-radius: 1px;
}

.chat-shape-swatch--rounded {
  border-radius: 4px;
}

.chat-shape-swatch--circle {
  border-radius: 999px;
}

.chat-shape-swatch--triangle {
  width: 0;
  height: 0;
  background: transparent;
  border: 0;
  border-left: 0.42rem solid transparent;
  border-right: 0.42rem solid transparent;
  border-bottom: 0.72rem solid #c8ccd2;
}

.chat-shape-swatch--line {
  height: 3px;
  border-radius: 999px;
  align-self: center;
}

/* Shape style tools in trait drawer */
.chat-prototype-shape-tools {
  display: grid;
  gap: 0.35rem;
  padding: 0.15rem 0 0.25rem;
}

.chat-prototype-shape-tools.hidden {
  display: none !important;
}

.chat-prototype-shape-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.45rem;
}

.chat-prototype-shape-field {
  display: grid;
  gap: 0.15rem;
  margin: 0;
}

.chat-prototype-shape-field span {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dx-copy, #ccc) 70%, transparent);
}

.chat-prototype-shape-field input[type="color"] {
  width: 100%;
  min-height: 1.55rem;
  height: 1.55rem;
  padding: 0.1rem;
  border: 1px solid var(--dx-line, #3a3a3a);
  border-radius: 3px;
  background: var(--dx-titlebar, #111);
  cursor: pointer;
}

.chat-prototype-shape-field input[type="range"] {
  width: 100%;
  accent-color: var(--dx-toggle, #0099ff);
}

.chat-prototype-shape-tools-hint {
  margin: 0;
  font-size: 0.55rem;
  color: color-mix(in srgb, var(--dx-copy, #bbb) 72%, transparent);
  line-height: 1.3;
}

/* =============================================================================
   Editorial workbench chrome — smaller, tighter, cohesive, quiet
   ============================================================================= */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench {
  --ed-ink: #e8e6e3;
  --ed-muted: #8a8680;
  --ed-faint: #5c5955;
  --ed-line: rgba(255, 255, 255, 0.08);
  --ed-line-strong: rgba(255, 255, 255, 0.14);
  --ed-panel: #161513;
  --ed-elevated: #1c1b19;
  --ed-soft: #121110;
  --ed-accent: #c4b5a0;
  --ed-accent-dim: rgba(196, 181, 160, 0.18);
  --ed-font: "Inter", "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --ed-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ed-control-h: 1.22rem;
  --ed-radius: 3px;
  --ed-gap: 0.18rem;
  --ed-type-xs: 0.5rem;
  --ed-type-sm: 0.58rem;
  --ed-type-md: 0.64rem;
  font-family: var(--ed-font) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Shell */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench {
  gap: 0.2rem !important;
  padding: 0.22rem !important;
  border-radius: 4px !important;
  border-color: var(--ed-line) !important;
  background: var(--ed-soft) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
}

.chat-media.chat-media--block-draft-fullscreen > .chat-block-draft {
  gap: 0.18rem !important;
  border-color: var(--ed-line-strong) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55) !important;
  background: #0e0d0c !important;
}

/* Head bar */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head {
  --wb-control-h: var(--ed-control-h) !important;
  gap: 0.28rem !important;
  padding: 0.12rem 0.28rem !important;
  border-color: var(--ed-line) !important;
  border-radius: var(--ed-radius) !important;
  background: var(--ed-panel) !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head .chat-prototype-workbench-head-center {
  gap: 0.28rem !important;
}

/* Mode tabs — quiet text, no neon pill */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head .chat-prototype-mode-toggle,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench .chat-prototype-mode-toggle {
  height: var(--ed-control-h) !important;
  padding: 0.06rem !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: var(--ed-radius) !important;
  background: var(--ed-soft) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head .chat-prototype-mode-tab,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench .chat-prototype-mode-tab {
  min-width: 1.85rem !important;
  min-height: calc(var(--ed-control-h) - 0.12rem) !important;
  height: calc(var(--ed-control-h) - 0.12rem) !important;
  padding: 0 0.32rem !important;
  border-radius: 2px !important;
  font-family: var(--ed-font) !important;
  font-size: var(--ed-type-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--ed-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench .chat-prototype-mode-tab.is-active {
  color: var(--ed-ink) !important;
  background: var(--ed-elevated) !important;
  box-shadow: none !important;
}

/* Device tabs */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head .chat-prototype-device-tabs {
  height: var(--ed-control-h) !important;
  padding: 0.06rem !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: var(--ed-radius) !important;
  background: var(--ed-soft) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head .chat-prototype-device-tab {
  min-width: 1.28rem !important;
  min-height: calc(var(--ed-control-h) - 0.12rem) !important;
  height: calc(var(--ed-control-h) - 0.12rem) !important;
  padding: 0 0.22rem !important;
  border-radius: 2px !important;
  color: var(--ed-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head .chat-prototype-device-tab.is-active {
  color: var(--ed-ink) !important;
  background: var(--ed-elevated) !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head .chat-prototype-device-tab .chat-prototype-device-icon {
  width: 0.68rem !important;
  height: 0.5rem !important;
  opacity: 0.9 !important;
}

/* Insert +T +I +S */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-insert {
  gap: 0.12rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-insert-btn {
  min-width: 1.22rem !important;
  width: 1.22rem !important;
  min-height: var(--ed-control-h) !important;
  height: var(--ed-control-h) !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: var(--ed-radius) !important;
  background: var(--ed-elevated) !important;
  color: var(--ed-muted) !important;
  font-family: var(--ed-font) !important;
  font-size: var(--ed-type-xs) !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-insert-btn.is-open,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-insert-btn:hover {
  border-color: var(--ed-line-strong) !important;
  color: var(--ed-ink) !important;
  background: color-mix(in srgb, var(--ed-elevated) 70%, #000 30%) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-insert-dropdown {
  top: calc(100% + 0.18rem) !important;
  min-width: 8.5rem !important;
  padding: 0.18rem !important;
  gap: 0.06rem !important;
  border: 1px solid var(--ed-line-strong) !important;
  border-radius: 4px !important;
  background: var(--ed-panel) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-insert-dropdown > button[role="menuitem"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-insert-dropdown .chat-prototype-insert-image-blank {
  min-height: 1.35rem !important;
  padding: 0.22rem 0.38rem !important;
  border-radius: 2px !important;
  font-family: var(--ed-font) !important;
  font-size: var(--ed-type-sm) !important;
  font-weight: 500 !important;
  color: var(--ed-ink) !important;
  letter-spacing: 0.01em !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-insert-dropdown > button[role="menuitem"]:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-insert-dropdown .chat-prototype-insert-image-blank:hover {
  background: var(--ed-accent-dim) !important;
  color: #fff !important;
}

/* Grid / snap / zoom / apply — compact editorial */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head .chat-prototype-view-controls {
  gap: 0.14rem !important;
  height: var(--ed-control-h) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-grid-control {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.14rem !important;
  padding: 0 0.12rem !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: var(--ed-radius) !important;
  background: var(--ed-soft) !important;
  height: var(--ed-control-h) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-grid-toggle,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-grid-autoplace,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-grid-help {
  min-height: calc(var(--ed-control-h) - 0.14rem) !important;
  height: calc(var(--ed-control-h) - 0.14rem) !important;
  padding: 0 0.32rem !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: var(--ed-muted) !important;
  font-family: var(--ed-font) !important;
  font-size: var(--ed-type-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-grid-toggle.is-active,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-grid-toggle:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-grid-autoplace:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-grid-help:hover {
  color: var(--ed-ink) !important;
  background: var(--ed-elevated) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-grid-scale-label {
  font-family: var(--ed-mono) !important;
  font-size: var(--ed-type-xs) !important;
  color: var(--ed-faint) !important;
  min-width: 1.6rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-grid-scale {
  width: 3.2rem !important;
  accent-color: var(--ed-accent) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-zoom-control {
  gap: 0.12rem !important;
  min-height: var(--ed-control-h) !important;
  height: var(--ed-control-h) !important;
  padding: 0 0.2rem !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: var(--ed-radius) !important;
  background: var(--ed-soft) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-zoom-fit-btn,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-zoom-fit-btn span {
  font-family: var(--ed-mono) !important;
  font-size: var(--ed-type-xs) !important;
  font-weight: 500 !important;
  color: var(--ed-muted) !important;
  letter-spacing: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-zoom-slider {
  width: 3rem !important;
  accent-color: var(--ed-accent) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-target,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-settings,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-scratch {
  min-height: var(--ed-control-h) !important;
  height: var(--ed-control-h) !important;
  padding: 0 0.4rem !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: var(--ed-radius) !important;
  background: var(--ed-elevated) !important;
  color: var(--ed-muted) !important;
  font-family: var(--ed-font) !important;
  font-size: var(--ed-type-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-target-label {
  font-size: var(--ed-type-xs) !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-target.is-ready,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-target:hover {
  border-color: var(--ed-line-strong) !important;
  color: var(--ed-ink) !important;
  background: var(--ed-panel) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-apply {
  min-height: var(--ed-control-h) !important;
  height: var(--ed-control-h) !important;
  min-width: 2.6rem !important;
  padding: 0 0.55rem !important;
  border-radius: var(--ed-radius) !important;
  border: 1px solid var(--ed-line-strong) !important;
  background: var(--ed-ink) !important;
  color: #141210 !important;
  font-family: var(--ed-font) !important;
  font-size: var(--ed-type-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-apply:hover {
  background: #fff !important;
  border-color: #fff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head .chat-prototype-view-controls button[data-prototype-fullscreen],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head .chat-prototype-view-controls button[data-prototype-close-workbench] {
  width: var(--ed-control-h) !important;
  min-width: var(--ed-control-h) !important;
  max-width: var(--ed-control-h) !important;
  height: var(--ed-control-h) !important;
  min-height: var(--ed-control-h) !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: var(--ed-radius) !important;
  background: var(--ed-elevated) !important;
  color: var(--ed-muted) !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-fullscreen-icon,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-close-icon {
  width: 0.68rem !important;
  height: 0.68rem !important;
  opacity: 0.85 !important;
}

/* Inspect hint */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspect-hint {
  bottom: 0.4rem !important;
  padding: 0.2rem 0.45rem !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: var(--ed-radius) !important;
  background: rgba(14, 13, 12, 0.88) !important;
  color: var(--ed-muted) !important;
  font-family: var(--ed-font) !important;
  font-size: var(--ed-type-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(8px) !important;
}

/* Trait dock — quiet editorial floating panel */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock {
  width: min(20rem, calc(100% - 1rem)) !important;
  border: 1px solid var(--ed-line-strong) !important;
  border-radius: 5px !important;
  background: rgba(18, 17, 16, 0.94) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-bar {
  gap: 0.35rem !important;
  padding: 0.28rem 0.32rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-meta {
  max-width: 8.5rem !important;
  gap: 0.02rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-meta strong {
  font-family: var(--ed-font) !important;
  font-size: var(--ed-type-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--ed-ink) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-meta span {
  font-family: var(--ed-mono) !important;
  font-size: 0.48rem !important;
  color: var(--ed-faint) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools {
  gap: 0.1rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool {
  width: 1.18rem !important;
  min-width: 1.18rem !important;
  height: 1.18rem !important;
  min-height: 1.18rem !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: var(--ed-radius) !important;
  background: transparent !important;
  color: var(--ed-muted) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool svg {
  width: 0.66rem !important;
  height: 0.66rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool:focus-visible,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool.is-active {
  border-color: var(--ed-line-strong) !important;
  color: var(--ed-ink) !important;
  background: var(--ed-elevated) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--delete {
  border-color: rgba(180, 90, 90, 0.35) !important;
  color: #d4a0a0 !important;
}

/* Align bar in trait tools */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-align-bar {
  gap: 0.06rem !important;
  margin-right: 0.12rem !important;
  padding: 0.06rem !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: var(--ed-radius) !important;
  background: var(--ed-soft) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-text-align-btn {
  width: 1.12rem !important;
  min-width: 1.12rem !important;
  height: 1.12rem !important;
  min-height: 1.12rem !important;
  border-radius: 2px !important;
  color: var(--ed-muted) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-text-align-btn svg {
  width: 0.7rem !important;
  height: 0.7rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-text-align-btn.is-active,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-text-align-btn:hover {
  background: var(--ed-elevated) !important;
  color: var(--ed-ink) !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-text-align-sep {
  background: var(--ed-line) !important;
  height: 0.7rem !important;
}

/* Trait drawer fields */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-drawer {
  gap: 0.32rem !important;
  padding: 0 0.32rem 0.36rem !important;
  border-top-color: var(--ed-line) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-inline-field span,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-block-tools span,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-shape-field span,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-selection-code-block > span {
  font-family: var(--ed-font) !important;
  font-size: 0.48rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ed-faint) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-inline-field select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-block-tools select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-block-tools input[type="number"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-inline-field input[type="color"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-shape-field input[type="color"] {
  min-height: 1.28rem !important;
  height: 1.28rem !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: var(--ed-radius) !important;
  background: var(--ed-soft) !important;
  color: var(--ed-ink) !important;
  font-family: var(--ed-font) !important;
  font-size: var(--ed-type-sm) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-selection-code {
  padding: 0.32rem !important;
  border-color: var(--ed-line) !important;
  border-radius: var(--ed-radius) !important;
  background: var(--ed-soft) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-selection-code-block pre {
  max-height: 4.2rem !important;
  padding: 0.28rem 0.32rem !important;
  border-color: var(--ed-line) !important;
  border-radius: 2px !important;
  background: #0a0908 !important;
  color: #b8b0a4 !important;
  font-family: var(--ed-mono) !important;
  font-size: 0.5rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-selection-code-hint,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-shape-tools-hint {
  font-size: 0.5rem !important;
  color: var(--ed-faint) !important;
}

/* Layout edit dock (prompt) */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-edit {
  border: 1px solid var(--ed-line-strong) !important;
  border-radius: 5px !important;
  background: rgba(18, 17, 16, 0.92) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(10px) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-form textarea,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) [data-prototype-layout-input] {
  font-family: var(--ed-font) !important;
  font-size: var(--ed-type-sm) !important;
  color: var(--ed-ink) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-form .chat-send-icon,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) [data-prototype-layout-apply] {
  border-radius: var(--ed-radius) !important;
  box-shadow: none !important;
}

/* Drag coach */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-drag-coach {
  min-width: min(14rem, 70%) !important;
  padding: 0.32rem 0.55rem !important;
  border: 1px solid var(--ed-line-strong) !important;
  border-radius: 4px !important;
  background: rgba(14, 13, 12, 0.92) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-drag-coach strong {
  font-family: var(--ed-font) !important;
  font-size: var(--ed-type-sm) !important;
  font-weight: 650 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ed-ink) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-drag-coach span {
  font-family: var(--ed-font) !important;
  font-size: var(--ed-type-xs) !important;
  color: var(--ed-muted) !important;
}

/* Live shell chrome quieter */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-live-shell {
  border-color: var(--ed-line) !important;
  border-radius: 3px !important;
  background: #faf9f7 !important;
}

/* Code pane labels */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor-head strong,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-code-pane-head strong {
  font-family: var(--ed-font) !important;
  font-size: var(--ed-type-sm) !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ed-muted) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-code-editor-head span,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-code-pane-head span {
  font-size: var(--ed-type-xs) !important;
  color: var(--ed-faint) !important;
}

/* Shape swatches quieter */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-shape-swatch {
  background: #a39e96 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-shape-swatch--triangle {
  border-bottom-color: #a39e96 !important;
}

/* Scale grip stays small white square; soft editorial ring on hover */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-resize-handle:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-resize-handle:focus-visible {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.75),
    0 0 0 3px rgba(196, 181, 160, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.28) !important;
}

/* =============================================================================
   Always-visible text format strip — bold / size / color / align
   ============================================================================= */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock.has-format-strip {
  width: min(28rem, calc(100% - 1rem)) !important;
  max-width: min(28rem, calc(100vw - 1.2rem)) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.28rem 0.36rem !important;
  padding: 0.4rem 0.45rem 0.45rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(22, 21, 19, 0.98) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.hidden {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.12rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 1.85rem !important;
  width: 1.85rem !important;
  height: 1.85rem !important;
  min-height: 1.85rem !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 4px !important;
  background: #1c1b19 !important;
  color: #e8e6e3 !important;
  cursor: pointer !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--italic span {
  font-style: italic !important;
  font-weight: 600 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--underline span {
  text-decoration: underline !important;
  text-underline-offset: 0.12em !important;
  font-weight: 600 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn:hover {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: #252320 !important;
  color: #fff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn.is-active {
  border-color: rgba(232, 230, 227, 0.55) !important;
  background: #e8e6e3 !important;
  color: #141210 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-sep {
  width: 1px !important;
  height: 1.35rem !important;
  background: rgba(255, 255, 255, 0.12) !important;
  flex: 0 0 auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-size {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-size select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip [data-prototype-inline-size] {
  min-width: 3.6rem !important;
  width: auto !important;
  min-height: 1.85rem !important;
  height: 1.85rem !important;
  padding: 0 0.4rem !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 4px !important;
  background: #1c1b19 !important;
  color: #e8e6e3 !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-color {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-color input[type="color"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip [data-prototype-inline-color] {
  width: 1.85rem !important;
  min-width: 1.85rem !important;
  height: 1.85rem !important;
  min-height: 1.85rem !important;
  padding: 0.12rem !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 4px !important;
  background: #1c1b19 !important;
  cursor: pointer !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-prototype-text-align-bar {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 0.08rem !important;
  margin: 0 !important;
  padding: 0.12rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 5px !important;
  background: #121110 !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-prototype-text-align-bar--main {
  /* H + V on the main strip: always visible next to Dup/Del when text is selected */
  flex-shrink: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-text-align-sep {
  width: 1px !important;
  height: 1.1rem !important;
  margin: 0 0.18rem !important;
  background: rgba(255, 255, 255, 0.18) !important;
  flex: 0 0 auto !important;
  pointer-events: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-text-align-btn {
  width: 1.7rem !important;
  min-width: 1.7rem !important;
  height: 1.7rem !important;
  min-height: 1.7rem !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: #c4bfb6 !important;
  background: transparent !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-text-align-btn svg {
  width: 0.85rem !important;
  height: 0.85rem !important;
  pointer-events: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-text-align-btn.is-active,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-text-align-btn:hover {
  background: #e8e6e3 !important;
  color: #141210 !important;
  box-shadow: none !important;
}

/* Trait dock: keep format strip above the fold; larger on fullscreen */
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock.has-format-strip {
  width: min(30rem, calc(100% - 1.2rem)) !important;
  max-width: min(30rem, 92vw) !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(0.85rem, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  z-index: 40 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock.has-format-strip.is-anchor-selection,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock.has-format-strip.is-manual-position {
  transform: none !important;
  left: auto !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock.has-format-strip .chat-prototype-trait-drawer {
  max-height: min(28vh, 220px) !important;
}

/* Selection code collapsed by default (details) */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-selection-code > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.4rem !important;
  cursor: pointer !important;
  list-style: none !important;
  padding: 0.28rem 0.1rem !important;
  font-size: 0.58rem !important;
  color: #a39e96 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-selection-code > summary::-webkit-details-marker {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-selection-code[open] > summary {
  color: #e8e6e3 !important;
  margin-bottom: 0.28rem !important;
}

#chat-root .chat-block-draft.has-trait-selection .chat-prototype-trait-dock.has-format-strip {
  z-index: 42 !important;
}

/* Scale tip — follows the cursor while resizing (smooth, no box flash) */
.chat-prototype-scale-tip,
#chat-root .chat-prototype-scale-tip,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-scale-tip {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 80 !important;
  pointer-events: none !important;
  will-change: transform !important;
  padding: 0.28rem 0.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 4px !important;
  background: rgba(14, 13, 12, 0.94) !important;
  color: #f0ebe3 !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4) !important;
  opacity: 0 !important;
  transform: translate3d(-9999px, -9999px, 0) !important;
  transition: opacity 0.08s ease !important;
}

.chat-prototype-scale-tip.is-visible,
#chat-root .chat-prototype-scale-tip.is-visible,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-scale-tip.is-visible {
  opacity: 1 !important;
}

#chat-root .chat-block-draft.is-block-scaling .chat-prototype-preview-grid,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-block-scaling .chat-prototype-preview-grid {
  cursor: nwse-resize !important;
  user-select: none !important;
}

#chat-root .chat-block-draft.is-block-scaling .chat-prototype-image-resize-handle,
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-block-scaling .chat-prototype-image-resize-handle {
  opacity: 0.92 !important;
  pointer-events: none !important;
}

/* =============================================================================
   Format strip — own floating layer, pinned to top of selected item
   ============================================================================= */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-inspector {
  overflow: visible !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-shape-strip,
.chat-prototype-format-strip.is-floating-chrome,
.chat-prototype-shape-strip.is-floating-chrome {
  position: fixed !important;
  z-index: 100120 !important;
  left: 0 !important;
  top: 0 !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.22rem !important;
  width: max-content !important;
  max-width: min(96vw, 38rem) !important;
  margin: 0 !important;
  padding: 0.28rem 0.36rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(18, 17, 16, 0.96) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.25) !important;
  /* No backdrop-filter: it creates a stacking context that trapped dropdowns. */
  pointer-events: auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
  touch-action: manipulation !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip *,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-shape-strip *,
.chat-prototype-format-strip.is-floating-chrome *,
.chat-prototype-shape-strip.is-floating-chrome * {
  pointer-events: auto !important;
}

.chat-prototype-format-strip.is-floating-chrome button,
.chat-prototype-format-strip.is-floating-chrome summary,
.chat-prototype-format-strip.is-floating-chrome select,
.chat-prototype-format-strip.is-floating-chrome input,
.chat-prototype-shape-strip.is-floating-chrome button,
.chat-prototype-shape-strip.is-floating-chrome select,
.chat-prototype-shape-strip.is-floating-chrome input {
  cursor: pointer !important;
  touch-action: manipulation !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.hidden {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-anchored {
  /* Anchored via JS top/left; never bottom-center dock */
  transform: none !important;
}

/* Override previous centered fullscreen dock rules for the strip */
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-trait-dock.has-format-strip {
  left: 10px !important;
  right: auto !important;
  bottom: 10px !important;
  top: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: min(18rem, calc(100% - 20px)) !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-format-strip,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-shape-strip {
  z-index: 100120 !important;
}

/* Make sure parent shells don't clip the bar */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-preview-grid,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-visual-pane,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-device.is-active {
  overflow: visible !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-preview-grid {
  position: relative !important;
}

/* Trait dock is compact actions only when format strip is out */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.has-format-strip .chat-prototype-trait-dock.is-trait-rail {
  width: auto !important;
  min-width: 0 !important;
  max-width: min(20rem, calc(100% - 20px)) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn {
  min-width: 1.7rem !important;
  width: 1.7rem !important;
  height: 1.7rem !important;
  min-height: 1.7rem !important;
  font-size: 0.74rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-size select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip [data-prototype-inline-size] {
  min-height: 1.7rem !important;
  height: 1.7rem !important;
  font-size: 0.68rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-color input[type="color"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip [data-prototype-inline-color] {
  width: 1.7rem !important;
  min-width: 1.7rem !important;
  height: 1.7rem !important;
  min-height: 1.7rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-text-align-btn {
  width: 1.55rem !important;
  min-width: 1.55rem !important;
  height: 1.55rem !important;
  min-height: 1.55rem !important;
}

/* =============================================================================
   Shape strip — float above selected shape; style + nest + content position
   ============================================================================= */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-shape-strip {
  position: absolute !important;
  z-index: 56 !important;
  left: 0 !important;
  top: 0 !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.28rem 0.32rem !important;
  width: max-content !important;
  max-width: min(96%, 36rem) !important;
  margin: 0 !important;
  padding: 0.36rem 0.42rem !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 6px !important;
  background: rgba(16, 15, 14, 0.97) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(12px) !important;
  pointer-events: auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-shape-strip.hidden {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-shape-strip-field {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
  margin: 0 !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.5rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #9a948c !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-shape-strip-field input[type="color"] {
  width: 1.55rem !important;
  min-width: 1.55rem !important;
  height: 1.55rem !important;
  min-height: 1.55rem !important;
  padding: 0.1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 4px !important;
  background: #1c1b19 !important;
  cursor: pointer !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-shape-strip-field--range input[type="range"] {
  width: 3.2rem !important;
  accent-color: #c4b5a0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-shape-content-align {
  display: inline-flex !important;
  gap: 0.08rem !important;
  padding: 0.08rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  background: #121110 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-shape-align-btn,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-shape-action-btn {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0 0.35rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 3px !important;
  background: #1c1b19 !important;
  color: #e8e6e3 !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-shape-align-btn.is-active,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-shape-align-btn:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-shape-action-btn:hover {
  background: #e8e6e3 !important;
  color: #141210 !important;
  border-color: transparent !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-shape-align-btn:disabled,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-shape-action-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* Live shell shape drop target */
.chat-prototype-live-shell.is-inspector-mode [data-pf-shape].is-pf-shape-drop-target {
  outline: 2px dashed rgba(0, 153, 255, 0.8) !important;
  outline-offset: 3px !important;
}

/* =============================================================================
   Layer order controls — z-index front/back + parent select
   ============================================================================= */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-trait-tool-sep {
  display: inline-block !important;
  width: 1px !important;
  height: 1.1rem !important;
  margin: 0 0.12rem !important;
  background: rgba(255, 255, 255, 0.14) !important;
  flex: 0 0 auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.08rem !important;
  padding: 0.08rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  background: #121110 !important;
}

/* Cute layer stack control on the main format strip */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-stack {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.14rem !important;
  flex: 0 0 auto !important;
  padding: 0.1rem 0.18rem 0.1rem 0.22rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #1a1917 0%, #121110 100%) !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-stack.is-idle {
  opacity: 0.55 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-stack-art {
  position: relative !important;
  width: 1.05rem !important;
  height: 1.05rem !important;
  flex: 0 0 auto !important;
  margin-right: 0.05rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-stack-sheet {
  position: absolute !important;
  width: 0.72rem !important;
  height: 0.52rem !important;
  border-radius: 2px !important;
  border: 1px solid rgba(0, 207, 255, 0.45) !important;
  background: color-mix(in srgb, #00cfff 22%, #1c1b19) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-stack-sheet--back {
  left: 0 !important;
  top: 0.38rem !important;
  opacity: 0.45 !important;
  transform: rotate(-8deg) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-stack-sheet--mid {
  left: 0.16rem !important;
  top: 0.2rem !important;
  opacity: 0.7 !important;
  transform: rotate(-3deg) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-stack-sheet--front {
  left: 0.3rem !important;
  top: 0.04rem !important;
  opacity: 1 !important;
  background: color-mix(in srgb, #00cfff 42%, #fff) !important;
  border-color: rgba(0, 207, 255, 0.85) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-stack[data-depth="1"] .chat-layer-stack-sheet--front {
  background: color-mix(in srgb, #00cfff 18%, #2a2825) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-stack[data-depth="3"] .chat-layer-stack-sheet--front {
  transform: translateY(-1px) rotate(-2deg) scale(1.05) !important;
  box-shadow: 0 0 0 1px rgba(0, 207, 255, 0.35), 0 2px 6px rgba(0, 153, 255, 0.35) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-stack-badge {
  min-width: 1.55rem !important;
  padding: 0.1rem 0.28rem !important;
  border-radius: 999px !important;
  background: rgba(0, 207, 255, 0.12) !important;
  border: 1px solid rgba(0, 207, 255, 0.28) !important;
  color: #9fe9ff !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  user-select: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-btn {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0 0.18rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
  background: #1c1b19 !important;
  color: #e8e6e3 !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-btn svg {
  width: 0.85rem !important;
  height: 0.85rem !important;
  pointer-events: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-btn:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-btn:focus-visible {
  background: #e8e6e3 !important;
  color: #141210 !important;
  border-color: transparent !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-btn:disabled {
  opacity: 0.32 !important;
  cursor: default !important;
  pointer-events: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-btn--parent {
  font-size: 0.72rem !important;
}

/* Soft pop when layer order changes */
.chat-prototype-live-shell .is-pf-layer-pop {
  animation: pf-layer-pop 0.38s cubic-bezier(0.2, 0.85, 0.25, 1) !important;
}
@keyframes pf-layer-pop {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.03); filter: brightness(1.08); box-shadow: 0 0 0 2px rgba(0, 207, 255, 0.55); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Portaled dropdown panels (on document.body) — always above the canvas */
.chat-format-menu-panel.is-pinned-fixed,
.chat-format-menu-panel[data-pf-portaled="1"] {
  position: fixed !important;
  z-index: 100200 !important;
  pointer-events: auto !important;
  max-height: min(55vh, 22rem) !important;
  overflow: auto !important;
  min-width: 12.5rem !important;
  padding: 0 !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 6px !important;
  background: #2d2d2d !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 207, 255, 0.12) !important;
}

.chat-format-menu-panel.is-pinned-fixed *,
.chat-format-menu-panel[data-pf-portaled="1"] * {
  pointer-events: auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--layer-front,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--layer-back,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--layer-forward,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--layer-backward,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock-tools .chat-trait-tool--parent {
  border-color: color-mix(in srgb, #c4b5a0 40%, transparent) !important;
}

/* Nested content inside shapes must receive pointer hits above the container fill */
.chat-prototype-live-shell.is-inspector-mode [data-pf-shape-container] > [data-pf-inspect-index],
.chat-prototype-live-shell.is-inspector-mode [data-pf-shape] > [data-pf-inspect-index] {
  position: relative !important;
  z-index: var(--pf-layer-z, 2) !important;
  pointer-events: auto !important;
}

/* =============================================================================
   Expanded inline editor — box styles, actions, motion, multi-row strip
   ============================================================================= */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-shape-strip {
  max-width: min(98vw, 46rem) !important;
  row-gap: 0.28rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.1rem !important;
  padding: 0.08rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  background: #121110 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--dup,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--trash,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--clear {
  min-width: 1.55rem !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--trash {
  color: #999999 !important;
  border-color: #3a3a3a !important;
  background: #333333 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--trash:hover {
  background: color-mix(in srgb, #0099ff 22%, #333333) !important;
  color: #ffffff !important;
  border-color: #0099ff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-field {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.18rem !important;
  margin: 0 !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.5rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #9a948c !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-field input[type="color"] {
  width: 1.5rem !important;
  min-width: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0.08rem !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 4px !important;
  background: #1c1b19 !important;
  cursor: pointer !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-field--range input[type="range"] {
  width: 3rem !important;
  accent-color: #c4b5a0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-select {
  appearance: none !important;
  min-height: 1.5rem !important;
  max-width: 5.2rem !important;
  padding: 0 0.35rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 3px !important;
  background: #1c1b19 !important;
  color: #e8e6e3 !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.55rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-select:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-select:focus-visible {
  border-color: rgba(196, 181, 160, 0.55) !important;
  outline: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-image-mode .chat-format-group--type,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-image-mode [data-inline-type-group] {
  display: none !important;
}

/* Hide text-only controls for image selection. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-image-mode [data-inline-align-group],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-image-mode [data-prototype-text-align-bar],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-image-mode [data-format-menu="align"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-image-mode [data-format-menu="type"] {
  display: none !important;
}

/* Align buttons must always receive hits (SVG glyphs never steal). */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-text-align-bar,
.chat-prototype-format-strip .chat-prototype-text-align-bar {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 5 !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-text-align-btn,
.chat-prototype-format-strip .chat-text-align-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  position: relative !important;
  z-index: 1 !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-text-align-btn svg,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-text-align-btn path,
.chat-prototype-format-strip .chat-text-align-btn svg,
.chat-prototype-format-strip .chat-text-align-btn path {
  pointer-events: none !important;
}

/* Font family picker on the inline format strip */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-font {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-font select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip [data-prototype-inline-font] {
  appearance: none !important;
  min-height: 1.55rem !important;
  max-width: 7.5rem !important;
  min-width: 5.4rem !important;
  padding: 0 0.4rem !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 4px !important;
  background: #1c1b19 !important;
  color: #e8e6e3 !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip [data-prototype-inline-font]:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip [data-prototype-inline-font]:focus-visible {
  border-color: rgba(196, 181, 160, 0.55) !important;
  outline: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip [data-prototype-inline-font] option {
  font-size: 0.85rem !important;
  background: #1c1b19 !important;
  color: #e8e6e3 !important;
}

/* =============================================================================
   Trait dock retired — floating format/shape strips replace it
   ============================================================================= */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-dock[data-prototype-trait-panel],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-trait-drawer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  max-width: 0 !important;
  max-height: 0 !important;
  inset: auto !important;
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* Grid overlay is never interactive / never selectable */
.chat-prototype-layout-grid-overlay,
[data-prototype-layout-grid] {
  pointer-events: none !important;
  user-select: none !important;
}

/* Place / Move — drag-to-grid control on format strip */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--move {
  min-width: 2.6rem !important;
  width: auto !important;
  height: 1.4rem !important;
  padding: 0 0.4rem !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: #333333 !important;
  color: #999999 !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--move.is-active,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--move:hover {
  background: color-mix(in srgb, #0099ff 28%, #333333) !important;
  color: #ffffff !important;
  box-shadow: inset 0 -2px 0 #0099ff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu--image[open] ~ .chat-format-btn--move,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-place-tools {
  /* panel styles shared with image tools sections */
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu[data-format-menu="place"][open] .chat-format-place-tools {
  display: grid !important;
  gap: 0 !important;
  min-width: 14rem !important;
  max-width: min(16rem, 88vw) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #2d2d2d !important;
  box-shadow: rgba(0, 0, 0, 0.18) 0 0 22px !important;
  overflow: hidden !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-place-tools .chat-format-section-label {
  margin: 0 !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  background: #222222 !important;
  color: #999999 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-place-help {
  margin: 0 !important;
  padding: 8px 10px !important;
  background: #2d2d2d !important;
  color: #999999 !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.4 !important;
  border-bottom: 1px solid #333333 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-place-tools .chat-format-menu-row--seg {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 0 !important;
  min-height: 30px !important;
  border-bottom: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-place-tools .chat-format-menu-row--seg:has([data-prototype-place-move-set]) {
  grid-template-columns: 1fr 1fr !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-place-tools .chat-format-btn--seg {
  min-width: 0 !important;
  width: 100% !important;
  height: 30px !important;
  border: 0 !important;
  border-right: 1px solid #333333 !important;
  border-radius: 0 !important;
  background: #333333 !important;
  color: #999999 !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-place-tools .chat-format-btn--seg:last-child {
  border-right: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-place-tools .chat-format-btn--seg.is-active,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-place-tools .chat-format-btn--seg:hover {
  background: color-mix(in srgb, #0099ff 22%, #333333) !important;
  color: #ffffff !important;
  box-shadow: inset 0 -2px 0 #0099ff !important;
}

/* Live stage: images grab; text is editable with a visible caret */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-live-stage.is-place-move-mode [data-pf-inspect-index][data-pf-inspect-kind="image"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-live-stage.is-place-move-mode [data-pf-inspect-index][data-pf-inspect-kind="shape"] {
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-live-stage.is-place-move-mode [data-pf-inspect-index][data-pf-inspect-kind="text"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-live-stage.is-place-move-mode [data-pf-inspect-index][data-pf-inspect-kind="text"][contenteditable="true"] {
  cursor: text !important;
  touch-action: manipulation !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  caret-color: #0099ff !important;
  -webkit-text-fill-color: inherit !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-live-stage.is-place-move-mode [data-pf-inspect-index][data-pf-inspect-kind="text"]:focus,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-live-stage.is-place-move-mode [data-pf-inspect-index][data-pf-inspect-kind="text"].is-pf-selected {
  caret-color: #0099ff !important;
  cursor: text !important;
}

/* While placing, show grab even on text */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-live-stage .is-pf-flex-dragging,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .is-auto-flex-dragging .chat-prototype-live-stage [data-pf-inspect-index] {
  cursor: grabbing !important;
  user-select: none !important;
  caret-color: transparent !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-auto-flex-dragging .chat-prototype-live-stage [data-pf-inspect-index],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-live-stage .is-pf-flex-dragging {
  cursor: grabbing !important;
}

/* Inline image tools — condensed DX panel (Source / Layout / Display) */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools {
  display: none;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu--image[open] .chat-format-image-tools,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-image-mode .chat-format-menu--image[open] .chat-format-image-tools {
  display: grid !important;
  gap: 0 !important;
  min-width: 15.5rem !important;
  max-width: min(17.5rem, 88vw) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #2d2d2d !important;
  box-shadow: rgba(0, 0, 0, 0.18) 0 0 22px !important;
  overflow: hidden !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-section {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #333333 !important;
  background: #2d2d2d !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-section:last-child {
  border-bottom: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-section-label {
  margin: 0 !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  background: #222222 !important;
  color: #999999 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-menu-row {
  min-height: 32px !important;
  padding: 0 10px !important;
  gap: 8px !important;
  border-bottom: 1px solid #333333 !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: #2d2d2d !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-menu-row:last-child {
  border-bottom: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-menu-row:nth-child(even) {
  background: #333333 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-menu-row > span:first-child {
  min-width: 2.8rem !important;
  color: #ffffff !important;
  text-align: right !important;
  font-size: 10px !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-menu-row--find {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 8px !important;
  justify-content: stretch !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-image-search {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: #222222 !important;
  color: #ffffff !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-image-search:focus {
  outline: 1px solid #0099ff !important;
  outline-offset: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-image-search:disabled,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-btn--action {
  min-width: 32px !important;
  width: auto !important;
  height: 26px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: #333333 !important;
  color: #ffffff !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-btn--action:hover:not(:disabled) {
  background: color-mix(in srgb, #0099ff 28%, #333333) !important;
  color: #ffffff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-menu-row--seg {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 0 !important;
  min-height: 30px !important;
  justify-content: stretch !important;
  background: #222222 !important;
  border-bottom: 0 !important;
  overflow: hidden !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-btn--seg {
  min-width: 0 !important;
  width: 100% !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 1px solid #333333 !important;
  border-radius: 0 !important;
  background: #333333 !important;
  color: #999999 !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-btn--seg:last-child {
  border-right: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-btn--seg:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-btn--seg.is-active {
  background: color-mix(in srgb, #0099ff 22%, #333333) !important;
  color: #ffffff !important;
  box-shadow: inset 0 -2px 0 #0099ff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-menu-row--pair {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  background: transparent !important;
  border-bottom: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-field {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border-bottom: 1px solid #333333 !important;
  background: #2d2d2d !important;
  color: #ffffff !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-field:nth-child(even) {
  background: #333333 !important;
  border-left: 1px solid #3a3a3a !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-field > span {
  color: #ffffff !important;
  font-size: 10px !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools select {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: #222222 !important;
  color: #ffffff !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-select:focus,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools select:focus {
  outline: 1px solid #0099ff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools input[type="range"] {
  width: 100% !important;
  max-width: none !important;
  accent-color: #0099ff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools .chat-format-menu-hint {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu--float {
  display: grid !important;
  gap: 0.25rem !important;
  padding: 0.4rem !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  background: rgba(16, 15, 14, 0.97) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu--float.hidden {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--dismiss {
  opacity: 0.75;
}

/* Focused element mode — pick a page target, then AI prompt */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-layout-focus-mode .chat-prototype-live-stage {
  cursor: crosshair !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-layout-focus-mode .chat-prototype-live-stage [data-pf-inspect-index] {
  cursor: crosshair !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-block-draft.is-layout-focus-mode .chat-prototype-live-stage [data-pf-inspect-index]:hover {
  outline: 2px dashed rgba(0, 207, 255, 0.85) !important;
  outline-offset: 3px !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-edit.is-focus-mode .chat-prototype-layout-focus.is-active {
  box-shadow: 0 0 0 2px rgba(0, 207, 255, 0.65) !important;
  background: color-mix(in srgb, #00cfff 28%, #141210) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-edit.is-focus-mode .chat-prototype-layout-form.is-awaiting-selection [data-prototype-layout-input] {
  border-color: rgba(0, 207, 255, 0.45) !important;
  color: #9a948c !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-layout-edit.is-focus-mode.has-focus-target .chat-prototype-layout-form [data-prototype-layout-input] {
  border-color: rgba(0, 207, 255, 0.75) !important;
  color: #e8e6e3 !important;
}

/* =============================================================================
   Compact format strip — primary row + dropdown menus
   ============================================================================= */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip {
  max-width: min(96vw, 34rem) !important;
  flex-wrap: nowrap !important;
  gap: 0.22rem !important;
  padding: 0.28rem 0.34rem !important;
  align-items: center !important;
  overflow: visible !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu {
  position: relative !important;
  display: inline-block !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-summary {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.2rem !important;
  min-height: 1.5rem !important;
  padding: 0 0.42rem !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 4px !important;
  background: #1c1b19 !important;
  color: #e8e6e3 !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  user-select: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-summary::-webkit-details-marker {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-summary::after {
  content: "▾" !important;
  font-size: 0.5rem !important;
  opacity: 0.7 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu[open] > .chat-format-menu-summary {
  background: color-mix(in srgb, #0099ff 28%, #333333) !important;
  color: #ffffff !important;
  border-color: #0099ff !important;
  box-shadow: inset 0 -2px 0 #0099ff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-panel {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  z-index: 90 !important;
  display: grid !important;
  gap: 0.35rem !important;
  min-width: 11.5rem !important;
  max-width: min(18rem, 80vw) !important;
  padding: 0.45rem 0.5rem !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 6px !important;
  background: #2d2d2d !important;
  box-shadow: rgba(0, 0, 0, 0.18) 0 0 22px !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu--image .chat-format-menu-panel.chat-format-image-tools {
  /* DX panel: no padded “card” chrome — sections own spacing */
  gap: 0 !important;
  min-width: 15.5rem !important;
  max-width: min(17.5rem, 88vw) !important;
  padding: 0 !important;
  border: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.4rem !important;
  margin: 0 !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.52rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #9a948c !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-row > span:first-child {
  flex: 0 0 auto !important;
  min-width: 2.6rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-row input[type="range"] {
  width: 6.5rem !important;
  accent-color: #c4b5a0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-row input[type="color"] {
  width: 1.55rem !important;
  height: 1.55rem !important;
  padding: 0.08rem !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 4px !important;
  background: #1c1b19 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-row .chat-format-select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-row select {
  flex: 1 1 auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-row .chat-format-image-search {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 7rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-row--layers {
  flex-direction: column !important;
  align-items: stretch !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-row--layers .chat-layer-bar {
  justify-content: flex-start !important;
}

/* Keep primary type controls compact */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-font select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip [data-prototype-inline-font] {
  max-width: 5.6rem !important;
  min-width: 4.2rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-image-mode [data-inline-type-group],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-image-mode [data-format-menu="type"] {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-image-mode [data-format-menu="image"] {
  display: inline-block !important;
}

/* Ultra-tight format strip: actions + short dropdown labels only */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip {
  max-width: min(92vw, 22rem) !important;
  gap: 0.16rem !important;
  padding: 0.24rem 0.3rem !important;
  flex-wrap: nowrap !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-summary {
  min-width: 2.1rem !important;
  padding: 0 0.36rem !important;
  font-size: 0.52rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-row--btns {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-row--btns .chat-format-group,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-row--btns .chat-prototype-text-align-bar,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-row--btns {
  gap: 0.18rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-actions {
  gap: 0.08rem !important;
  padding: 0.04rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-btn {
  min-width: 1.4rem !important;
  width: 1.4rem !important;
  height: 1.4rem !important;
}

/* =============================================================================
   Section pick overlay — condensed PhotoFolio admin panel (#111 / #222 / #2d2d2d / #0099ff)
   ============================================================================= */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  place-items: center !important;
  padding: 1rem !important;
  box-sizing: border-box !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-overlay.hidden {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-panel {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(450px, 96%) !important;
  max-height: min(78vh, 560px) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #2d2d2d !important;
  box-shadow: rgba(0, 0, 0, 0.12) 0 0 25px !important;
  color: #fff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-bottom: 0 !important;
  background: #111111 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-kicker {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #999999 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-head h3 {
  margin: 2px 0 0 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  color: #999999 !important;
  line-height: 1.2 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-sub {
  margin: 2px 0 0 !important;
  font-size: 10px !important;
  color: #888888 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-close {
  border: 0 !important;
  border-radius: 0 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #999999 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-close:hover {
  color: #0099ff !important;
  background: transparent !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-controls {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  background: #2d2d2d !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-controls label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 1.1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: #2d2d2d !important;
  border-bottom: 1px solid #333333 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-controls label:nth-child(even) {
  background: #333333 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-controls label > span {
  text-align: right !important;
  color: #ffffff !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-controls select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-controls input {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: #222222 !important;
  color: #ffffff !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11px !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-controls select:focus,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-controls input:focus {
  outline: 1px solid #0099ff !important;
  outline-offset: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-controls label.hidden {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-status {
  padding: 6px 10px !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  color: #999999 !important;
  background: #222222 !important;
  border-bottom: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-list {
  flex: 1 1 auto !important;
  overflow: auto !important;
  padding: 0 !important;
  display: grid !important;
  gap: 0 !important;
  align-content: start !important;
  background: #2d2d2d !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  width: 100% !important;
  margin: 0 !important;
  min-height: 36px !important;
  padding: 6px 10px !important;
  padding-left: calc(10px + var(--pick-depth, 0) * 12px) !important;
  border: 0 !important;
  border-bottom: 1px solid #333333 !important;
  border-radius: 0 !important;
  background: #2d2d2d !important;
  color: #ffffff !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-row:nth-child(even) {
  background: #333333 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-row:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-row.is-active {
  border-color: transparent !important;
  border-bottom-color: #333333 !important;
  background: color-mix(in srgb, #0099ff 18%, #2d2d2d) !important;
  box-shadow: inset 2px 0 0 #0099ff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-row-main {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-row-main strong {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-row-main small,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-row-key {
  font-size: 10px !important;
  color: #999999 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-empty {
  margin: 1rem !important;
  color: #999999 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-foot {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  border-top: 0 !important;
  background: #222222 !important;
}

/* Footer buttons — dark PF chrome, primary = PhotoFolio blue (no white neon frames) */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-foot .btn-neon,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-foot button {
  min-height: 28px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: #333333 !important;
  color: #ffffff !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-foot .btn-neon:hover:not(:disabled),
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-foot button:hover:not(:disabled) {
  background: #3a3a3a !important;
  color: #ffffff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-foot .btn-neon--primary,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-foot [data-section-pick-insert] {
  background: #0099ff !important;
  color: #ffffff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-foot .btn-neon--primary:hover:not(:disabled),
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-foot [data-section-pick-insert]:hover:not(:disabled) {
  background: #0088e6 !important;
  color: #ffffff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-foot .btn-neon:disabled,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-section-pick-foot button:disabled {
  opacity: 0.4 !important;
  background: #2a2a2a !important;
  color: #888888 !important;
}

body.is-section-pick-open {
  overflow: hidden;
}

/* =============================================================================
   PhotoFolio blue consistency — no red, no harsh white buttons in studio chrome
   Accent: #0099ff · bars #111 · panels #2d2d2d · elevated #333 · labels #999
   ============================================================================= */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) {
  --pf-chat-neon: #0099ff !important;
  --pf-chat-neon-soft: rgba(0, 153, 255, 0.16) !important;
  --dx-toggle: #0099ff !important;
  --dx-panel: #2d2d2d !important;
  --dx-elevated: #333333 !important;
  --dx-elevated-hover: #3a3a3a !important;
  --dx-bar: #111111 !important;
  --dx-section: #222222 !important;
  --dx-line: #3a3a3a !important;
  --dx-label: #999999 !important;
  --dx-copy: #ffffff !important;
  --dx-muted: #888888 !important;
}

/* Discard / trash / danger — mute to gray, never red */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool--discard,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--trash,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--dismiss,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) [data-prototype-inspector-action="delete"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-close-btn {
  border-color: var(--dx-line) !important;
  color: var(--dx-label) !important;
  background: var(--dx-elevated) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool--discard:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--trash:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--dismiss:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) [data-prototype-inspector-action="delete"]:hover {
  border-color: color-mix(in srgb, #0099ff 40%, var(--dx-line)) !important;
  color: #ffffff !important;
  background: var(--dx-elevated-hover) !important;
}

/* Primary / Apply / Insert buttons — solid PF blue, not white neon frames */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-apply,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-apply.is-ready,
#chat-root .chat-prototype-workbench-apply,
#chat-root .chat-prototype-workbench-apply.is-ready {
  background: #0099ff !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-apply:hover:not(:disabled),
#chat-root .chat-prototype-workbench-apply:hover:not(:disabled) {
  background: #0088e6 !important;
  color: #ffffff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-apply.is-needs-target,
#chat-root .chat-prototype-workbench-apply.is-needs-target {
  background: #333333 !important;
  color: #999999 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-target,
#chat-root .chat-prototype-workbench-target {
  background: #333333 !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-target.is-ready,
#chat-root .chat-prototype-workbench-target.is-ready {
  background: color-mix(in srgb, #0099ff 22%, #333333) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px #0099ff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-target.is-needs-target,
#chat-root .chat-prototype-workbench-target.is-needs-target {
  background: #333333 !important;
  color: #999999 !important;
  box-shadow: none !important;
}

/* Insert (+T / +I / shapes) chips — dark elevated, not white */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-insert-btn,
#chat-root .chat-prototype-workbench-insert-btn {
  background: #333333 !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-insert-btn:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-insert-btn.is-open,
#chat-root .chat-prototype-workbench-insert-btn:hover,
#chat-root .chat-prototype-workbench-insert-btn.is-open {
  background: color-mix(in srgb, #0099ff 22%, #333333) !important;
  color: #ffffff !important;
}

/* Format strip + menus */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-panel,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-shape-strip {
  background: #2d2d2d !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 6px !important;
  box-shadow: rgba(0, 0, 0, 0.12) 0 0 25px !important;
  color: #ffffff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-summary,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-text-align-btn {
  background: #333333 !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn.is-active,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu[open] > .chat-format-menu-summary,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-text-align-btn.is-active {
  background: color-mix(in srgb, #0099ff 28%, #333333) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px #0099ff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-row > span,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-hint {
  color: #999999 !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-panel select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-panel input[type="search"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-panel input[type="text"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-panel input[type="url"] {
  background: #222222 !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Insert dropdown menus */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-insert-dropdown,
#chat-root .chat-prototype-insert-dropdown {
  background: #2d2d2d !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 6px !important;
  box-shadow: rgba(0, 0, 0, 0.12) 0 0 25px !important;
  color: #ffffff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-insert-dropdown button,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-insert-dropdown [role="menuitem"],
#chat-root .chat-prototype-insert-dropdown button,
#chat-root .chat-prototype-insert-dropdown [role="menuitem"] {
  background: #333333 !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-insert-dropdown button:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-insert-dropdown [role="menuitem"]:hover,
#chat-root .chat-prototype-insert-dropdown button:hover,
#chat-root .chat-prototype-insert-dropdown [role="menuitem"]:hover {
  background: color-mix(in srgb, #0099ff 22%, #333333) !important;
  color: #ffffff !important;
}

/* Grid / snap / help chips */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-grid-toggle,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-grid-help,
#chat-root .chat-prototype-grid-toggle,
#chat-root .chat-prototype-grid-help {
  background: transparent !important;
  border: 0 !important;
  color: #999999 !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-grid-toggle.is-active,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-grid-toggle:hover,
#chat-root .chat-prototype-grid-toggle.is-active,
#chat-root .chat-prototype-grid-toggle:hover {
  color: #0099ff !important;
  background: color-mix(in srgb, #0099ff 12%, transparent) !important;
}

/* Selection outline / accents → PF blue */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-live-shell.is-inspector-mode [data-pf-inspect-index].is-pf-selected {
  outline-color: #0099ff !important;
}

/* Any leftover pink/red accents in format / AI busy states */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--trash,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) [class*="danger"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .is-error {
  --danger: #0099ff;
}

/* Draft action prepare stays blue */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool--prepare {
  border: 0 !important;
  background: #0099ff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-draft-actions-bar .chat-draft-tool--revise {
  border: 0 !important;
  background: #333333 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* =============================================================================
   Mobile = desktop DX chrome parity
   Phone workbench uses the same head, format strip, colors, and place tools.
   ============================================================================= */
@media (max-width: 760px), (pointer: coarse) and (max-height: 560px) {
  /* Restore full desktop workbench head (Apply / Target / insert / grid) */
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head,
  #chat-root .chat-prototype-workbench-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "view center controls" !important;
    align-items: center !important;
    gap: 0.28rem !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-bottom: 1px solid #3a3a3a !important;
    border-radius: 0 !important;
    background: #111111 !important;
    box-shadow: none !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-mode-toggle,
  #chat-root .chat-prototype-workbench-head .chat-prototype-mode-toggle {
    display: inline-flex !important;
    grid-area: view !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-device-tabs,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head-center,
  #chat-root .chat-prototype-workbench-head .chat-prototype-device-tabs,
  #chat-root .chat-prototype-workbench-head-center {
    display: flex !important;
    grid-area: center !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls,
  #chat-root .chat-prototype-workbench-head .chat-prototype-view-controls {
    display: flex !important;
    grid-area: controls !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.2rem !important;
    width: auto !important;
    max-width: min(58vw, 16rem) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls button,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head .chat-prototype-view-controls span,
  #chat-root .chat-prototype-workbench-head .chat-prototype-view-controls button,
  #chat-root .chat-prototype-workbench-head .chat-prototype-view-controls span {
    display: inline-flex !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
    flex: 0 0 auto !important;
    font-size: 10px !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-apply,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-target,
  #chat-root .chat-prototype-workbench-apply,
  #chat-root .chat-prototype-workbench-target {
    display: inline-flex !important;
    background: #333333 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 3px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-apply.is-ready,
  #chat-root .chat-prototype-workbench-apply.is-ready {
    background: #0099ff !important;
    color: #fff !important;
  }

  /* Hide legacy mobile-only chrome that diverges from desktop */
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-topbar,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-image-tools,
  #chat-root .chat-prototype-mobile-topbar,
  #chat-root .chat-prototype-mobile-image-tools {
    display: none !important;
  }

  /* Vibe bar = compact desktop AI row */
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-mobile-vibe {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-top: 1px solid #3a3a3a !important;
    border-radius: 0 !important;
    background: #222222 !important;
    box-shadow: none !important;
    z-index: 40 !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-pinpoint,
  #chat-root .chat-prototype-mobile-pinpoint {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: #333333 !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form,
  #chat-root .chat-prototype-mobile-vibe-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    gap: 4px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form textarea,
  #chat-root .chat-prototype-mobile-vibe-form textarea {
    min-height: 28px !important;
    height: 28px !important;
    max-height: 4.5rem !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: #2d2d2d !important;
    color: #fff !important;
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12px !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-vibe-form .chat-send-icon,
  #chat-root .chat-prototype-mobile-vibe-form .chat-send-icon {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    border-radius: 3px !important;
    background: #0099ff !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-mobile-section,
  #chat-root .chat-prototype-mobile-section {
    display: none !important;
  }

  /* Format strip dock — same tools as desktop */
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-format-strip.is-mobile-dock,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-shape-strip.is-mobile-dock,
  #chat-root .chat-prototype-format-strip.is-mobile-dock,
  #chat-root .chat-prototype-shape-strip.is-mobile-dock {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.22rem !important;
    max-width: none !important;
    padding: 0.35rem 0.4rem !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 6px !important;
    background: #2d2d2d !important;
    box-shadow: rgba(0, 0, 0, 0.22) 0 0 22px !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-format-strip.is-mobile-dock .chat-format-btn,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-format-strip.is-mobile-dock .chat-format-menu-summary,
  #chat-root .chat-prototype-format-strip.is-mobile-dock .chat-format-btn,
  #chat-root .chat-prototype-format-strip.is-mobile-dock .chat-format-menu-summary {
    min-width: 1.65rem !important;
    width: auto !important;
    min-height: 1.65rem !important;
    height: 1.65rem !important;
    padding: 0 0.42rem !important;
    font-size: 0.58rem !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-format-strip.is-mobile-dock .chat-format-btn--move,
  #chat-root .chat-prototype-format-strip.is-mobile-dock .chat-format-btn--move {
    min-width: 2.8rem !important;
  }

  /* Menus open upward on the bottom dock */
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-format-strip.is-mobile-dock .chat-format-menu-panel,
  #chat-root .chat-prototype-format-strip.is-mobile-dock .chat-format-menu-panel {
    top: auto !important;
    bottom: calc(100% + 4px) !important;
    left: 0 !important;
    right: auto !important;
    max-height: min(58dvh, 22rem) !important;
    overflow: auto !important;
  }

  /* Stage uses full width like desktop canvas */
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid,
  #chat-root .chat-block-draft.is-mobile-editor .chat-prototype-preview-grid {
    padding: 0.45rem !important;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important;
    background: #1a1a1a !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell--phone,
  #chat-root .chat-prototype-live-shell,
  #chat-root .chat-prototype-live-shell--phone {
    border-radius: 6px !important;
    border: 1px solid #3a3a3a !important;
    background: #fff !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-inspect-hint,
  #chat-root .chat-prototype-inspect-hint {
    color: #999999 !important;
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
  }

  /* Insert chips match desktop */
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-insert-btn,
  #chat-root .chat-prototype-workbench-insert-btn {
    display: inline-flex !important;
    background: #333333 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 3px !important;
  }

  /* Targeting rail condensed like desktop panel rows */
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail .chat-prototype-targeting,
  #chat-root .chat-prototype-workbench-rail .chat-prototype-targeting {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid #3a3a3a !important;
    border-radius: 0 !important;
    background: #2d2d2d !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-targeting label span,
  #chat-root .chat-prototype-targeting label span {
    color: #999999 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
  }

  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-targeting select,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-targeting input,
  #chat-root .chat-prototype-targeting select,
  #chat-root .chat-prototype-targeting input {
    background: #222222 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 3px !important;
    min-height: 28px !important;
  }
}

/* =============================================================================
   Format strip — ONE continuous pill, tight · aligned · styled
   ============================================================================= */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip--condensed,
.chat-prototype-format-strip.is-floating-chrome {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.2rem !important;
  width: max-content !important;
  max-width: calc(100vw - 1.5rem) !important;
  min-height: 2.35rem !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.28rem 0.34rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  background: #141312 !important;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: none !important;
  z-index: 100120 !important;
  pointer-events: auto !important;
  position: fixed !important;
  overflow: visible !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.hidden {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-actions,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-group--type {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.12rem !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  flex: 0 0 auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-field-select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-color,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  position: relative !important;
  vertical-align: middle !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-sep {
  width: 1px !important;
  height: 1.05rem !important;
  min-height: 0 !important;
  align-self: center !important;
  margin: 0 0.14rem !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 0 !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
}

/* Unified control height — buttons, menus, selects, color */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-btn,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 1.7rem !important;
  width: auto !important;
  height: 1.7rem !important;
  min-height: 1.7rem !important;
  max-height: 1.7rem !important;
  margin: 0 !important;
  padding: 0 0.45rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-btn:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-summary:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-btn.is-active,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu[open] > .chat-format-menu-summary {
  background: #f2f0ec !important;
  color: #121110 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-btn--trash:hover {
  background: #e25555 !important;
  color: #fff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-summary {
  gap: 0.28rem !important;
  padding: 0 0.55rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-summary::after {
  content: "" !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 0 0 0.12rem !important;
  border-left: 3px solid transparent !important;
  border-right: 3px solid transparent !important;
  border-top: 3.5px solid currentColor !important;
  opacity: 0.65 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-summary::-webkit-details-marker {
  display: none !important;
}

/* Styled selects — same pill language as buttons */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip select,
.chat-format-menu-panel .chat-format-select,
.chat-format-menu-panel select {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  min-height: 1.7rem !important;
  height: 1.7rem !important;
  max-height: 1.7rem !important;
  margin: 0 !important;
  padding: 0 1.2rem 0 0.55rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.55) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.55) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 0.55rem) calc(50% - 0.5px),
    calc(100% - 0.35rem) calc(50% - 0.5px) !important;
  background-size: 3.5px 3.5px, 3.5px 3.5px !important;
  background-repeat: no-repeat !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.7rem !important;
  cursor: pointer !important;
  box-shadow: none !important;
  vertical-align: middle !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-select:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip select:hover,
.chat-format-menu-panel .chat-format-select:hover,
.chat-format-menu-panel select:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-select:focus,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip select:focus,
.chat-format-menu-panel .chat-format-select:focus,
.chat-format-menu-panel select:focus {
  outline: none !important;
  background-color: rgba(0, 153, 255, 0.16) !important;
  box-shadow: 0 0 0 1.5px rgba(0, 153, 255, 0.45) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-select--size {
  min-width: 2.75rem !important;
  max-width: 3.1rem !important;
  text-align: center !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-select--font {
  min-width: 4.4rem !important;
  max-width: 5.4rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-select option,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip select option,
.chat-format-menu-panel select option {
  background: #1a1918 !important;
  color: #e8e6e3 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-color input[type="color"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip [data-prototype-inline-color] {
  box-sizing: border-box !important;
  width: 1.7rem !important;
  min-width: 1.7rem !important;
  height: 1.7rem !important;
  min-height: 1.7rem !important;
  padding: 0 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu--layer .chat-layer-stack-badge,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-layer-stack-badge {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 1rem !important;
  height: 1rem !important;
  padding: 0 0.22rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 207, 255, 0.45) !important;
  background: rgba(0, 207, 255, 0.12) !important;
  color: #9fe9ff !important;
  font-size: 0.5rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-summary-label {
  font-size: 0.58rem !important;
  letter-spacing: 0.04em !important;
}

/* Panels */
.chat-format-menu-panel--compact,
.chat-format-menu-panel--more,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-panel--compact,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-panel--more {
  min-width: 12.5rem !important;
  max-width: min(16rem, 92vw) !important;
  padding: 0.45rem !important;
  display: grid !important;
  gap: 0.35rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: #1a1918 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
}

.chat-format-menu-panel--more {
  max-height: min(70vh, 28rem) !important;
  overflow: auto !important;
  gap: 0.55rem !important;
}

.chat-format-menu-panel--more .chat-format-section {
  display: grid !important;
  gap: 0.22rem !important;
  padding: 0.35rem 0.2rem 0.45rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.chat-format-menu-panel--more .chat-format-section:first-child {
  border-top: 0 !important;
  padding-top: 0.1rem !important;
}

.chat-format-panel-label,
.chat-format-menu-panel--more .chat-format-section-label {
  margin: 0 0 0.15rem !important;
  padding: 0 0.15rem !important;
  color: #8a857c !important;
  font-size: 0.52rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

.chat-format-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.28rem !important;
  align-items: center !important;
}

.chat-format-chip-row .chat-text-align-btn,
.chat-format-chip-row .chat-layer-btn {
  min-width: 2.2rem !important;
  height: 1.65rem !important;
  padding: 0 0.45rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
}

.chat-format-chip-row .chat-text-align-btn.is-active,
.chat-format-chip-row .chat-layer-btn.is-active,
.chat-format-chip-row .chat-text-align-btn:hover,
.chat-format-chip-row .chat-layer-btn:hover {
  background: #f2f0ec !important;
  color: #121110 !important;
}

.chat-format-chip-row .chat-text-align-btn svg {
  width: 0.85rem !important;
  height: 0.85rem !important;
  fill: currentColor !important;
  pointer-events: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-stack--compact {
  gap: 0.28rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-layer-stack--compact .chat-layer-stack-art {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-btn,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.4rem !important;
  width: auto !important;
  min-height: 1.45rem !important;
  height: 1.45rem !important;
  padding: 0 0.32rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 5px !important;
  background: #1c1b19 !important;
  color: #e8e6e3 !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-summary {
  min-width: 2.35rem !important;
  list-style: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-summary::-webkit-details-marker {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-summary::after {
  content: "" !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 0.18rem !important;
  border-left: 2.5px solid transparent !important;
  border-right: 2.5px solid transparent !important;
  border-top: 3px solid #999999 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-btn:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-summary:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-btn.is-active,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu[open] > .chat-format-menu-summary {
  background: #e8e6e3 !important;
  color: #141210 !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-btn--trash:hover {
  background: rgba(220, 80, 80, 0.92) !important;
  color: #fff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-size select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip [data-prototype-inline-size] {
  min-width: 3.2rem !important;
  max-width: 3.6rem !important;
  min-height: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0 0.28rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
  background: #1c1b19 !important;
  color: #e8e6e3 !important;
  font-size: 0.58rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip [data-prototype-inline-color],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-color input[type="color"] {
  width: 1.5rem !important;
  min-width: 1.5rem !important;
  height: 1.5rem !important;
  min-height: 1.5rem !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 4px !important;
  background: #1c1b19 !important;
  cursor: pointer !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu[open] > .chat-format-menu-summary::after {
  border-top-color: #ffffff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-btn--dismiss {
  background: #222222 !important;
  color: #cccccc !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-btn--dismiss:hover {
  background: #e8e6e3 !important;
  color: #141210 !important;
}

/* Drop panels under the bar — fixed chrome above everything (clicks were stolen at z 120). */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-shape-strip {
  overflow: visible !important;
  z-index: 100120 !important;
  pointer-events: auto !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu {
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu[open] {
  z-index: 2 !important;
}
/* In-strip panels (before portal) — portaled panels use .is-pinned-fixed on body */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-panel:not(.is-pinned-fixed) {
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 4px) !important;
  min-width: 12.5rem !important;
  max-width: min(18rem, 92vw) !important;
  max-height: min(18rem, 50vh) !important;
  overflow: auto !important;
  padding: 0 !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 6px !important;
  background: #2d2d2d !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
  z-index: 10080 !important;
}

/* Image search results float above top editor bar */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu--float,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-inspector-image-menu--float,
#chat-root .chat-prototype-inspector-image-menu--float {
  position: fixed !important;
  z-index: 10080 !important;
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0.25rem !important;
  min-width: 16rem !important;
  max-width: min(22rem, calc(100vw - 1rem)) !important;
  max-height: min(16rem, 42vh) !important;
  overflow: auto !important;
  border: 1px solid #0099ff !important;
  border-radius: 8px !important;
  background: #1a1a1a !important;
  box-shadow:
    0 0 0 1px rgba(0, 153, 255, 0.25),
    0 16px 40px rgba(0, 0, 0, 0.55) !important;
  pointer-events: auto !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu--float.hidden {
  display: none !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu--float .chat-prototype-library-option {
  display: grid !important;
  grid-template-columns: 2.4rem minmax(0, 1fr) !important;
  gap: 0.45rem !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0.35rem 0.4rem !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #f0f0f0 !important;
  text-align: left !important;
  cursor: pointer !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu--float .chat-prototype-library-option:hover {
  background: #2a2a2a !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-inspector-image-menu--float .chat-prototype-library-option img {
  width: 2.4rem !important;
  height: 2.4rem !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  display: block !important;
}

/* Kill dead air between top editor chrome and canvas.
   Higher specificity beats older media-query padding-top: 4.35rem / 2.65rem rules. */
body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid,
body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench .chat-prototype-preview-grid {
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  gap: 0 !important;
}

/* Inspect hint must never reserve a black strip under the workbench head */
body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-inspect-hint,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-inspect-hint,
body.is-block-draft-fullscreen .chat-prototype-inspect-hint {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  display: block !important;
  width: auto !important;
  max-width: min(36rem, 90%) !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.2rem 0.55rem !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 999px !important;
  background: rgba(12, 12, 12, 0.88) !important;
  color: #bbbbbb !important;
  pointer-events: none !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28) !important;
}

body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench .chat-prototype-live-shell {
  margin: 0 !important;
  border-radius: 0 !important;
  align-self: stretch !important;
  /* Pin canvas under the top bar — no vertical letterbox */
  transform-origin: top center !important;
}
/* Keep side padding when page-frame sim is on so max-width gutters show */
body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell:not([data-pf-page-frame="1"]),
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-live-shell:not([data-pf-page-frame="1"]) {
  padding: 0 !important;
}

body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-device.is-active,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device.is-active {
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Route banner / targeting strip — never steal vertical space in fullscreen */
body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-route,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-route,
body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-targeting:not(.is-retargeting):not(.is-target-picking),
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-targeting:not(.is-retargeting):not(.is-target-picking),
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-rail {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-workbench-head {
  border-bottom: 1px solid #3a3a3a !important;
  box-shadow: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-visual-pane:not(.hidden) {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* Mobile media-query padding on preview-grid must stay zero in fullscreen */
@media (max-width: 900px) {
  body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
    padding: 0 !important;
    padding-top: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
  }
}

@media (max-width: 760px) {
  body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
    padding: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 430px) {
  body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid,
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-preview-grid {
    padding: 0 !important;
    padding-top: 0 !important;
  }
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-row {
  min-height: 1.7rem !important;
  padding: 0 0.48rem !important;
  font-size: 0.52rem !important;
  color: #ffffff !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-row > span:first-child {
  min-width: 2.5rem !important;
  color: #bbbbbb !important;
  font-size: 0.5rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip input[type="search"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip input[type="text"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip input[type="url"] {
  min-height: 1.4rem !important;
  height: 1.4rem !important;
  font-size: 0.6rem !important;
  background: #222222 !important;
  color: #ffffff !important;
  border-radius: 3px !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-text-align-btn {
  min-width: 1.35rem !important;
  width: 1.35rem !important;
  height: 1.35rem !important;
  background: #333333 !important;
  border-radius: 3px !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-text-align-btn.is-active {
  background: #0099ff !important;
}

/* Kill leftover Move / Place chrome if any cached HTML remains */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-btn--move,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu[data-format-menu="place"],
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-place-tools {
  display: none !important;
}

/* Mobile dock — same tight bar as desktop */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-mobile-dock {
  min-height: 2.05rem !important;
  padding: 0.28rem 0.34rem !important;
  border: 1px solid #0099ff !important;
  background: #1a1a1a !important;
  box-shadow:
    0 0 0 1px rgba(0, 153, 255, 0.28),
    0 8px 22px rgba(0, 0, 0, 0.48) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-mobile-dock .chat-format-btn,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-mobile-dock .chat-format-menu-summary {
  min-width: 1.85rem !important;
  min-height: 1.55rem !important;
  height: 1.55rem !important;
  font-size: 0.56rem !important;
  padding: 0 0.4rem !important;
}

/* Link panel rows */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-link-tools {
  display: grid !important;
  gap: 0 !important;
  min-width: 13.5rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-row--link-actions {
  display: flex !important;
  gap: 0.28rem !important;
  padding: 0.35rem 0.48rem 0.45rem !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-row--link-actions .chat-format-btn {
  flex: 1 1 auto !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-shape-strip {
  min-height: 2.55rem !important;
  padding: 0.4rem 0.48rem !important;
  border: 1px solid #0099ff !important;
  border-radius: 8px !important;
  background: #1a1a1a !important;
  box-shadow:
    0 0 0 1px rgba(0, 153, 255, 0.35),
    0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

/* Scale grip — clear blue corner handle */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-resize-handle.is-scale-grip {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border: 2px solid #ffffff !important;
  border-radius: 3px !important;
  background: #0099ff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  cursor: nwse-resize !important;
  z-index: 95 !important;
  touch-action: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-resize-handle.is-scale-grip:hover,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen).is-block-scaling .chat-prototype-image-resize-handle.is-scale-grip,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .is-block-scaling .chat-prototype-image-resize-handle.is-scale-grip {
  background: #33adff !important;
  transform: scale(1.08);
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-scale-tip {
  position: absolute !important;
  z-index: 96 !important;
  padding: 0.22rem 0.45rem !important;
  border-radius: 4px !important;
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #0099ff !important;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .is-pf-block-scaling {
  outline: 2px solid #0099ff !important;
  outline-offset: 2px !important;
  transition: none !important;
}

/* Scale grip — plain, reliable corner handle (no fancy transforms) */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-resize-handle,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-resize-handle.is-scale-grip {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border: 2px solid #fff !important;
  border-radius: 2px !important;
  background: #0099ff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
  cursor: nwse-resize !important;
  z-index: 96 !important;
  touch-action: none !important;
  transform: none !important;
  opacity: 1 !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-resize-handle::before,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-image-resize-handle::after {
  display: none !important;
  content: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-scale-tip {
  display: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .is-pf-block-scaling {
  outline: 1px solid #0099ff !important;
  outline-offset: 1px !important;
  transition: none !important;
}

/* Final: compose dock is never a dark/full-width strip (input pill only) */
body.is-chat-home .chat-root--home .chat-compose,
#chat-root .chat-compose,
.chat-root--panel .chat-compose {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

/* =============================================================================
   iPhone device chrome + phone layout mode
   ============================================================================= */
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--phone.is-active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0.75rem !important;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 153, 255, 0.06), transparent 60%),
    #0a0a0b !important;
  overflow: auto !important;
}

.chat-prototype-iphone {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55));
}

.chat-prototype-iphone-bezel {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(390px, calc(100vw - 2.5rem)) !important;
  /* ~19.5:9 iPhone proportion */
  height: min(844px, calc(100dvh - 7.5rem)) !important;
  padding: 12px !important;
  border-radius: 48px !important;
  background:
    linear-gradient(145deg, #3a3a3c 0%, #1c1c1e 40%, #0a0a0a 100%) !important;
  box-shadow:
    inset 0 0 0 2px #2c2c2e,
    inset 0 0 0 3px #0a0a0a,
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 20px 50px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden !important;
}

/* Dynamic Island / fake status bar removed — they looked like UI bugs on the canvas */

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-iphone-bezel .chat-prototype-live-shell--phone,
.chat-prototype-iphone-bezel .chat-prototype-live-shell--phone {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 36px !important;
  overflow: hidden !important;
  background: #fff !important;
  transform: none !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
}

.chat-prototype-seo-score {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  align-items: baseline !important;
  gap: 3px !important;
  min-width: 66px !important;
  height: 30px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(88,214,141,.7) !important;
  border-radius: 999px !important;
  background: rgba(33,102,65,.5) !important;
  color: #fff !important;
  font: 800 10px/1 var(--chat-chrome-mono, monospace) !important;
  white-space: nowrap !important;
  box-shadow: 0 0 0 2px rgba(88,214,141,.12), 0 0 14px rgba(88,214,141,.2) !important;
}
.chat-prototype-seo-score.hidden { display: none !important; }
.chat-prototype-seo-score strong { color: #75e6a5 !important; font-size: 14px !important; letter-spacing: -.03em !important; }
.chat-prototype-seo-score.is-warning { border-color: rgba(255,189,89,.8) !important; background: rgba(128,76,0,.58) !important; box-shadow: 0 0 0 2px rgba(255,189,89,.13), 0 0 14px rgba(255,189,89,.2) !important; }
.chat-prototype-seo-score.is-warning strong { color: #ffbd59 !important; }
.chat-prototype-seo-score.is-low { border-color: rgba(255,116,116,.8) !important; background: rgba(120,30,30,.62) !important; box-shadow: 0 0 0 2px rgba(255,116,116,.12), 0 0 14px rgba(255,116,116,.2) !important; }
.chat-prototype-seo-score.is-low strong { color: #ff7474 !important; }

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) [data-insert-dropdown="icon"] button[role="menuitem"] svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  margin-right: 8px !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-iphone-bezel .chat-prototype-live-stage,
.chat-prototype-iphone-bezel .chat-prototype-live-stage {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  border-radius: 0 !important;
  /* Phone is already the frame — no extra page max-width gutters */
  margin: 0 !important;
}

.chat-prototype-iphone-home {
  position: absolute !important;
  left: 50% !important;
  bottom: 10px !important;
  z-index: 8 !important;
  width: 120px !important;
  height: 5px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.35) !important;
  pointer-events: none !important;
}

/* Phone mode badge on format strip context */
.chat-media.chat-media--block-draft-fullscreen .chat-block-draft.is-phone-preview-mode .chat-prototype-inspect-hint {
  opacity: 0.85 !important;
}

/* Side buttons (volume / power) subtle */
.chat-prototype-iphone-bezel::before {
  content: "" !important;
  position: absolute !important;
  left: -3px !important;
  top: 110px !important;
  width: 3px !important;
  height: 28px !important;
  border-radius: 2px 0 0 2px !important;
  background: #2a2a2c !important;
  box-shadow:
    0 40px 0 #2a2a2c,
    0 78px 0 #2a2a2c !important;
}
.chat-prototype-iphone-bezel::after {
  content: "" !important;
  position: absolute !important;
  right: -3px !important;
  top: 150px !important;
  width: 3px !important;
  height: 64px !important;
  border-radius: 0 2px 2px 0 !important;
  background: #2a2a2c !important;
}

@media (max-height: 780px) {
  .chat-prototype-iphone-bezel {
    height: min(720px, calc(100dvh - 6.5rem)) !important;
    border-radius: 40px !important;
    padding: 10px !important;
  }
  .chat-media.chat-media--block-draft-fullscreen .chat-prototype-iphone-bezel .chat-prototype-live-shell--phone {
    border-radius: 30px !important;
  }
}

/* Desktop page canvas is a rectangle — never a stadium/oval */
body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-shell,
body.is-block-draft-fullscreen .chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-stage,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-shell,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-stage {
  border-radius: 0 !important;
  clip-path: none !important;
}

/* Final Design Studio geometry and icon overrides. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-insert-btn svg,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-template-toggle svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  fill: #d0d0d0 !important;
  opacity: 1 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-shell,
.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-stage {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

.chat-media.chat-media--block-draft-fullscreen .chat-prototype-device--desktop .chat-prototype-live-shell {
  padding-inline: 0 !important;
}

/* =============================================================================
   Inline editor chrome — FINAL click reliability (do not lower z-index)
   Format strip lived under trait-inspector (z≈5–8) so stage/handles stole clicks.
   ============================================================================= */
.chat-prototype-format-strip.is-floating-chrome,
.chat-prototype-shape-strip.is-floating-chrome,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-anchored,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-shape-strip.is-anchored,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip.is-mobile-dock {
  position: fixed !important;
  z-index: 100120 !important;
  pointer-events: auto !important;
}
.chat-prototype-format-strip.is-floating-chrome button,
.chat-prototype-format-strip.is-floating-chrome summary,
.chat-prototype-format-strip.is-floating-chrome select,
.chat-prototype-format-strip.is-floating-chrome input,
.chat-prototype-format-strip.is-floating-chrome .chat-text-align-btn,
.chat-prototype-format-strip.is-floating-chrome .chat-layer-btn,
.chat-prototype-shape-strip.is-floating-chrome button,
.chat-prototype-shape-strip.is-floating-chrome select,
.chat-prototype-shape-strip.is-floating-chrome input {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
.chat-format-menu-panel.is-pinned-fixed,
.chat-format-menu-panel[data-pf-portaled="1"] {
  position: fixed !important;
  z-index: 100200 !important;
  pointer-events: auto !important;
}

/* =============================================================================
   Format strip FINAL — one continuous pill (no stray menu chips)
   ============================================================================= */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip--condensed,
.chat-prototype-format-strip.is-floating-chrome,
.chat-prototype-format-strip.is-anchored {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.2rem !important;
  width: max-content !important;
  max-width: calc(100vw - 1.25rem) !important;
  min-height: 2.35rem !important;
  padding: 0.28rem 0.34rem !important;
  border-radius: 999px !important;
  background: #141312 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  overflow: visible !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Every direct control shares one row height */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip > * {
  flex: 0 0 auto !important;
  align-self: center !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-btn,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-menu-summary,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip .chat-format-select,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip [data-prototype-inline-color] {
  height: 1.7rem !important;
  min-height: 1.7rem !important;
  max-height: 1.7rem !important;
  border-radius: 999px !important;
}

/* Kill old multi-row / max-width rules that split the bar */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-format-strip {
  flex-wrap: nowrap !important;
  max-width: calc(100vw - 1.25rem) !important;
}

/* =============================================================================
   More + Image dropdowns — sleek, tight, intuitive
   ============================================================================= */
.chat-format-menu-panel--more,
.chat-format-menu-panel--image,
.chat-format-menu-panel.is-pinned-fixed.chat-format-menu-panel--more,
.chat-format-menu-panel.is-pinned-fixed.chat-format-image-tools,
.chat-format-menu-panel[data-pf-portaled="1"].chat-format-menu-panel--more,
.chat-format-menu-panel[data-pf-portaled="1"].chat-format-image-tools,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-panel--more,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-menu-panel--image,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-format-image-tools {
  box-sizing: border-box !important;
  display: grid !important;
  gap: 0 !important;
  min-width: 13.25rem !important;
  max-width: min(15.5rem, 92vw) !important;
  max-height: min(72vh, 26rem) !important;
  margin: 0 !important;
  padding: 0.35rem !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
    #161514 !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent !important;
}

/* Sections = soft grouped cards */
.chat-format-menu-panel--more .chat-format-section,
.chat-format-menu-panel--image .chat-format-section,
.chat-format-image-tools .chat-format-section {
  display: grid !important;
  gap: 0.18rem !important;
  margin: 0 !important;
  padding: 0.32rem 0.28rem 0.38rem !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
}

.chat-format-menu-panel--more .chat-format-section + .chat-format-section,
.chat-format-menu-panel--image .chat-format-section + .chat-format-section,
.chat-format-image-tools .chat-format-section + .chat-format-section {
  margin-top: 0.28rem !important;
}

.chat-format-menu-panel--more .chat-format-section-label,
.chat-format-menu-panel--image .chat-format-section-label,
.chat-format-image-tools .chat-format-section-label,
.chat-format-menu-panel--more .chat-format-panel-label {
  display: block !important;
  margin: 0 0 0.12rem !important;
  padding: 0 0.12rem !important;
  color: rgba(255, 255, 255, 0.42) !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.5rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Rows — tight label | control */
.chat-format-menu-panel--more .chat-format-menu-row,
.chat-format-menu-panel--image .chat-format-menu-row,
.chat-format-image-tools .chat-format-menu-row {
  display: grid !important;
  grid-template-columns: 2.6rem minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.35rem !important;
  min-height: 1.55rem !important;
  margin: 0 !important;
  padding: 0.08rem 0.12rem !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  justify-content: stretch !important;
}

.chat-format-menu-panel--more .chat-format-menu-row:hover,
.chat-format-menu-panel--image .chat-format-menu-row:hover,
.chat-format-image-tools .chat-format-menu-row:hover {
  background: rgba(255, 255, 255, 0.035) !important;
}

.chat-format-menu-panel--more .chat-format-menu-row > span:first-child,
.chat-format-menu-panel--image .chat-format-menu-row > span:first-child,
.chat-format-image-tools .chat-format-menu-row > span:first-child,
.chat-format-menu-panel--more .chat-format-field > span,
.chat-format-menu-panel--image .chat-format-field > span,
.chat-format-image-tools .chat-format-field > span {
  min-width: 0 !important;
  color: rgba(255, 255, 255, 0.48) !important;
  font-size: 0.52rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

/* Selects inside panels */
.chat-format-menu-panel--more .chat-format-select,
.chat-format-menu-panel--more select,
.chat-format-menu-panel--image .chat-format-select,
.chat-format-menu-panel--image select,
.chat-format-image-tools .chat-format-select,
.chat-format-image-tools select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 1.45rem !important;
  height: 1.45rem !important;
  max-height: 1.45rem !important;
  padding: 0 1.05rem 0 0.4rem !important;
  border: 0 !important;
  border-radius: 7px !important;
  background-color: rgba(0, 0, 0, 0.28) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

.chat-format-menu-panel--more .chat-format-select:hover,
.chat-format-menu-panel--more select:hover,
.chat-format-menu-panel--image .chat-format-select:hover,
.chat-format-menu-panel--image select:hover,
.chat-format-image-tools .chat-format-select:hover,
.chat-format-image-tools select:hover {
  background-color: rgba(0, 0, 0, 0.38) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 207, 255, 0.28) !important;
}

.chat-format-menu-panel--more .chat-format-select:focus,
.chat-format-menu-panel--more select:focus,
.chat-format-menu-panel--image .chat-format-select:focus,
.chat-format-menu-panel--image select:focus,
.chat-format-image-tools .chat-format-select:focus,
.chat-format-image-tools select:focus {
  outline: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 153, 255, 0.55),
    0 0 0 2px rgba(0, 153, 255, 0.12) !important;
}

/* Ranges */
.chat-format-menu-panel--more input[type="range"],
.chat-format-menu-panel--image input[type="range"],
.chat-format-image-tools input[type="range"] {
  width: 100% !important;
  max-width: none !important;
  height: 1.1rem !important;
  margin: 0 !important;
  accent-color: #00a8ff !important;
}

/* Color + clear on one row */
.chat-format-menu-panel--more .chat-format-menu-row:has(input[type="color"]) {
  grid-template-columns: 2.6rem auto auto 1fr !important;
  justify-content: start !important;
}

.chat-format-menu-panel--more input[type="color"],
.chat-format-menu-panel--image input[type="color"] {
  width: 1.35rem !important;
  min-width: 1.35rem !important;
  height: 1.35rem !important;
  min-height: 1.35rem !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  background: transparent !important;
  cursor: pointer !important;
}

.chat-format-menu-panel--more .chat-format-btn--clear {
  min-width: 1.35rem !important;
  width: 1.35rem !important;
  height: 1.35rem !important;
  min-height: 1.35rem !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.62rem !important;
}

.chat-format-menu-panel--more .chat-format-btn--clear:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* Link URL + actions */
.chat-format-menu-panel--more input[type="text"],
.chat-format-menu-panel--more input[type="search"],
.chat-format-menu-panel--image input[type="search"],
.chat-format-image-tools .chat-format-image-search {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 1.5rem !important;
  height: 1.5rem !important;
  margin: 0 !important;
  padding: 0 0.45rem !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: rgba(0, 0, 0, 0.28) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

.chat-format-menu-panel--more input[type="text"]:focus,
.chat-format-menu-panel--more input[type="search"]:focus,
.chat-format-menu-panel--image input[type="search"]:focus,
.chat-format-image-tools .chat-format-image-search:focus {
  outline: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 153, 255, 0.5),
    0 0 0 2px rgba(0, 153, 255, 0.12) !important;
}

.chat-format-menu-panel--more .chat-format-menu-row--link-actions {
  grid-template-columns: 1fr 1fr !important;
  gap: 0.28rem !important;
  margin-top: 0.12rem !important;
  padding-top: 0.15rem !important;
}

.chat-format-menu-panel--more .chat-format-menu-row--link-actions .chat-format-btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 1.55rem !important;
  min-height: 1.55rem !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.04em !important;
}

.chat-format-menu-panel--more .chat-format-menu-row--link-actions .chat-format-btn--action {
  background: rgba(0, 153, 255, 0.22) !important;
  color: #c8ecff !important;
}

.chat-format-menu-panel--more .chat-format-menu-row--link-actions .chat-format-btn:hover {
  background: #f2f0ec !important;
  color: #121110 !important;
}

/* Image: find row */
.chat-format-menu-panel--image .chat-format-menu-row--find,
.chat-format-image-tools .chat-format-menu-row--find {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 0.22rem !important;
  padding: 0.1rem 0.08rem !important;
  background: transparent !important;
}

.chat-format-menu-panel--image .chat-format-btn--action,
.chat-format-image-tools .chat-format-btn--action {
  min-width: 1.7rem !important;
  width: auto !important;
  height: 1.5rem !important;
  min-height: 1.5rem !important;
  padding: 0 0.4rem !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: rgba(0, 153, 255, 0.2) !important;
  color: #c8ecff !important;
  font-size: 0.52rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.chat-format-menu-panel--image .chat-format-btn--action:hover,
.chat-format-image-tools .chat-format-btn--action:hover {
  background: #f2f0ec !important;
  color: #121110 !important;
}

/* Image: place chips */
.chat-format-menu-panel--image .chat-format-chip-row,
.chat-format-menu-panel--image .chat-format-menu-row--seg,
.chat-format-image-tools .chat-format-menu-row--seg {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.22rem !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.08rem !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  overflow: hidden !important;
}

.chat-format-menu-panel--image .chat-format-btn--seg,
.chat-format-image-tools .chat-format-btn--seg {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 1.5rem !important;
  min-height: 1.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.52rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

.chat-format-menu-panel--image .chat-format-btn--seg:hover,
.chat-format-menu-panel--image .chat-format-btn--seg.is-active,
.chat-format-image-tools .chat-format-btn--seg:hover,
.chat-format-image-tools .chat-format-btn--seg.is-active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.chat-format-menu-panel--image .chat-format-btn--seg.is-active,
.chat-format-image-tools .chat-format-btn--seg.is-active {
  background: #f2f0ec !important;
  color: #121110 !important;
}

/* Image: mode/fit pair */
.chat-format-menu-panel--image .chat-format-menu-row--pair,
.chat-format-image-tools .chat-format-menu-row--pair {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.28rem !important;
  min-height: 0 !important;
  padding: 0.08rem !important;
  background: transparent !important;
  border: 0 !important;
}

.chat-format-menu-panel--image .chat-format-field,
.chat-format-image-tools .chat-format-field {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.28rem !important;
  min-height: 1.55rem !important;
  margin: 0 !important;
  padding: 0.12rem 0.28rem !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.52rem !important;
}

.chat-format-menu-panel--image .chat-format-field:nth-child(even),
.chat-format-image-tools .chat-format-field:nth-child(even) {
  background: rgba(0, 0, 0, 0.2) !important;
  border-left: 0 !important;
}

/* Hide noisy hints in condensed image panel */
.chat-format-menu-panel--image .chat-format-menu-hint,
.chat-format-image-tools .chat-format-menu-hint {
  display: none !important;
}

/* One destination action: Pick section first, then reveal Apply. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) [data-workbench-apply].hidden {
  display: none !important;
}

/* Final SEO badge sizing: keep generic toolbar button rules from shrinking it. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head
  .chat-prototype-view-controls
  button.chat-prototype-seo-score[data-prototype-seo-score] {
  display: inline-grid !important;
  grid-template-columns: auto auto auto !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 0 0 108px !important;
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  overflow: visible !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: .07em !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head
  .chat-prototype-view-controls
  button.chat-prototype-seo-score[data-prototype-seo-score].hidden {
  display: none !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head
  .chat-prototype-view-controls
  button.chat-prototype-seo-score[data-prototype-seo-score] span {
  display: inline !important;
  height: auto !important;
  min-height: 0 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head
  .chat-prototype-view-controls
  button.chat-prototype-seo-score[data-prototype-seo-score] strong {
  display: inline !important;
  height: auto !important;
  min-height: 0 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head
  .chat-prototype-view-controls
  button.chat-prototype-seo-score[data-prototype-seo-score] small {
  display: inline !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  opacity: .82 !important;
  letter-spacing: 0 !important;
}

/* DX-style header lanes: status, tools, and actions never overlap. */
@media (min-width: 761px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) 236px !important;
    grid-template-areas: "view center controls" !important;
    align-items: center !important;
  }
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls {
    grid-area: controls !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    overflow: visible !important;
  }
}

/* A phone preview is a real narrow layout, never a scaled-down desktop poster. */
.chat-prototype-device--phone .pf-page-grid-canvas[data-pf-tpl-root] {
  container-type: inline-size !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.chat-prototype-device--phone [data-pf-template-id][data-pf-role="heading"] {
  font-size: clamp(2rem, 12cqw, 4.2rem) !important;
  line-height: .94 !important;
  overflow-wrap: anywhere !important;
}
.chat-prototype-device--phone [data-pf-template-id][data-pf-role="subhead"],
.chat-prototype-device--phone [data-pf-template-id][data-pf-role="quote"] {
  font-size: clamp(1.25rem, 6.5cqw, 2.25rem) !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
}
.chat-prototype-device--phone [data-pf-template-id][data-pf-role="copy"],
.chat-prototype-device--phone [data-pf-template-id][data-pf-role="metadata"] {
  font-size: clamp(.95rem, 4.2cqw, 1.2rem) !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}
.chat-prototype-device--phone [data-pf-template-id][data-pf-role="eyebrow"],
.chat-prototype-device--phone [data-pf-template-id][data-pf-role="caption"],
.chat-prototype-device--phone [data-pf-template-id][data-pf-role="copyright"] {
  font-size: clamp(.68rem, 2.8cqw, .82rem) !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}

/* Phone media shows the complete photograph; desktop may keep editorial crops. */
.chat-prototype-device--phone [data-pf-template-id][data-pf-inspect-kind="image"] img,
.chat-prototype-device--phone [data-pf-template-id][data-pf-role="media"] img,
.chat-prototype-device--phone .pf-page-grid-free[data-pf-inspect-kind="image"] img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* SEO score popover uses the same restrained DX editor chrome. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls {
  position: relative !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 100500 !important;
  display: grid !important;
  gap: 10px !important;
  width: min(340px, calc(100vw - 24px)) !important;
  max-height: min(72vh, 560px) !important;
  padding: 14px !important;
  overflow: auto !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 6px !important;
  background: #171717 !important;
  color: #f4f2ee !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.48) !important;
  text-align: left !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover.hidden {
  display: none !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid #333 !important;
  background: transparent !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover header span,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover header strong {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  font: 800 13px/1.2 var(--chat-chrome-mono, monospace) !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover header strong {
  color: #75e6a5 !important;
  font-size: 16px !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover > p {
  margin: 0 !important;
  color: #aaa !important;
  font: 500 11px/1.45 var(--chat-chrome-font, sans-serif) !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover ul {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover li {
  display: grid !important;
  grid-template-columns: 18px minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 7px 8px !important;
  border: 1px solid #303030 !important;
  border-radius: 3px !important;
  background: #202020 !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover li > span {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  color: #ffbd59 !important;
  font: 800 13px/1 monospace !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover li.is-pass > span { color: #75e6a5 !important; }
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover li strong {
  font: 650 11px/1.25 var(--chat-chrome-font, sans-serif) !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover li small {
  color: #8b8b8b !important;
  font: 600 9px/1 monospace !important;
  white-space: nowrap !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover [data-prototype-seo-autofix] {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid #5b8cff !important;
  border-radius: 3px !important;
  background: #1d3f72 !important;
  color: #fff !important;
  font: 800 10px/1 var(--chat-chrome-mono, monospace) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover [data-prototype-seo-fix-status] {
  color: #aaa !important;
  font: 500 10px/1.4 var(--chat-chrome-font, sans-serif) !important;
}
.chat-prototype-device--phone [data-pf-template-id][data-pf-inspect-kind="image"] picture,
.chat-prototype-device--phone [data-pf-template-id][data-pf-role="media"] picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* The phone mockup is narrow inside a wide desktop window. Its layout must be
   selected by the device class, rather than relying on the browser viewport. */
.chat-prototype-device--phone .pf-page-grid-canvas[data-pf-phone-layout="flow"] {
  display: grid !important;
  grid-template-columns: repeat(16, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  column-gap: 0 !important;
  row-gap: clamp(12px, 4vw, 24px) !important;
  padding: clamp(16px, 5vw, 28px) !important;
  min-height: 100% !important;
  height: auto !important;
}
.chat-prototype-device--phone .pf-page-grid-canvas[data-pf-phone-layout="flow"] > .pf-page-grid-free[data-pf-m-source="auto"] {
  position: relative !important;
  inset: auto !important;
  grid-column: 2 / span 14 !important;
  grid-row: auto !important;
  order: var(--pf-flow-order, 0) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  transform: none !important;
}
.chat-prototype-device--phone .pf-page-grid-canvas[data-pf-phone-layout="flow"] > .pf-page-grid-free[data-pf-m-source="auto"][data-pf-inspect-kind="image"] img {
  width: 100% !important;
  height: auto !important;
  min-height: clamp(180px, 62vw, 420px) !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}
.chat-prototype-device--phone .pf-page-grid-canvas[data-pf-phone-layout="flow"] > .pf-page-grid-free[data-pf-m-source="auto"][data-pf-role="panel"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.chat-prototype-device--phone .pf-page-grid-canvas[data-pf-phone-layout="flow"] > .pf-page-grid-free[data-pf-m-source="custom"] {
  position: absolute !important;
  left: calc(var(--pf-mx, var(--pf-gx, 0)) * 100% / var(--pf-m-div, 16)) !important;
  top: calc(var(--pf-my, var(--pf-gy, 0)) * 100cqw / var(--pf-m-div, 16)) !important;
  width: calc(var(--pf-mw, var(--pf-span-w, 8)) * 100% / var(--pf-m-div, 16)) !important;
  max-width: calc(var(--pf-mw, var(--pf-span-w, 8)) * 100% / var(--pf-m-div, 16)) !important;
  aspect-ratio: var(--pf-mw, var(--pf-span-w, 8)) / var(--pf-mh, var(--pf-span-h, var(--pf-span-w, 8))) !important;
}

/* Final compact SEO chrome: one-line status and dense aligned recommendations. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls
  > button.chat-prototype-seo-score[data-prototype-seo-score] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  flex: 0 0 72px !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 8px !important;
  border: 1px solid #454545 !important;
  border-radius: 3px !important;
  background: #242424 !important;
  box-shadow: none !important;
  color: #d8d8d8 !important;
  font: 750 10px/1 var(--chat-chrome-mono, monospace) !important;
  letter-spacing: .04em !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls
  > button.chat-prototype-seo-score[data-prototype-seo-score] > span,
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls
  > button.chat-prototype-seo-score[data-prototype-seo-score] > strong {
  display: inline !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls
  > button.chat-prototype-seo-score.is-warning { border-color: #8b6a34 !important; color: #ffbd59 !important; background: #302719 !important; }
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls
  > button.chat-prototype-seo-score.is-low { border-color: #754141 !important; color: #ff8e8e !important; background: #321e1e !important; }
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls
  > button.chat-prototype-seo-score:not(.is-warning):not(.is-low) { border-color: #35684b !important; color: #75e6a5 !important; background: #1c2d23 !important; }

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls
  > .chat-prototype-seo-popover {
  gap: 6px !important;
  width: min(320px, calc(100vw - 20px)) !important;
  padding: 11px !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover header {
  padding-bottom: 8px !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover > p {
  font-size: 10px !important;
  line-height: 1.35 !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover ul {
  gap: 3px !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover li {
  grid-template-columns: 16px minmax(0, 1fr) auto !important;
  gap: 6px !important;
  min-height: 30px !important;
  padding: 5px 7px !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover li strong {
  font-size: 10px !important;
  line-height: 1.2 !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-seo-popover li small {
  font-size: 8px !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls
  .chat-prototype-seo-popover > button.chat-prototype-seo-autofix {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 2px 0 0 !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border: 1px solid #4e72a8 !important;
  border-radius: 3px !important;
  background: #243a59 !important;
  color: #f4f7fb !important;
  font: 750 9px/1 var(--chat-chrome-mono, monospace) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* Final header action alignment: one 28px control rhythm. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls {
  gap: 6px !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls
  > :is(button.chat-prototype-workbench-settings, button.chat-prototype-close-btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  border: 1px solid #454545 !important;
  border-radius: 3px !important;
  background: #242424 !important;
  box-sizing: border-box !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls
  > button.chat-prototype-workbench-target {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 88px !important;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 9px !important;
  border-radius: 3px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls
  > button.chat-prototype-workbench-apply:not(.hidden) {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  border-radius: 3px !important;
}
.chat-prototype-settings-icon {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none !important;
}

/* Page-frame badge belongs to the pseudo-element, never the canvas itself. */
.chat-prototype-live-stage {
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}

/* Compact right lane for narrower desktop editors. */
@media (min-width: 761px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-workbench-head {
    grid-template-columns: auto minmax(0, 1fr) 200px !important;
  }
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    gap: 4px !important;
  }
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls
    > button.chat-prototype-seo-score[data-prototype-seo-score] {
    flex-basis: 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding-inline: 6px !important;
  }
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls
    > :is(button.chat-prototype-workbench-settings, button.chat-prototype-close-btn) {
    flex-basis: 26px !important;
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
  }
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls
    > button.chat-prototype-workbench-target {
    flex-basis: 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding-inline: 6px !important;
    font-size: 8px !important;
  }
}

/* Chat/editor polish must remain last in the cascade. */
body.is-chat-home .main-top,
body.is-chat-home.is-sidebar-collapsed .main-top {
  padding-left: 8px !important;
}

body.is-chat-home #chat-input:focus,
body.is-chat-home #chat-input:focus-visible,
#chat-root #chat-input:focus,
#chat-root #chat-input:focus-visible {
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls {
  max-width: 184px !important;
  gap: 3px !important;
}

/* Actual final editor action group. */
@media (min-width: 761px) {
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 32px !important;
    gap: 4px !important;
    padding: 3px 5px !important;
    border: 1px solid #2b2b2b !important;
    border-radius: 6px !important;
    background: #171717 !important;
    box-sizing: border-box !important;
  }
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls
    > button.chat-prototype-seo-score[data-prototype-seo-score] {
    flex: 0 0 58px !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    border-radius: 4px !important;
  }
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-head .chat-prototype-view-controls
    > :is(button.chat-prototype-workbench-target, button.chat-prototype-workbench-settings, button.chat-prototype-close-btn) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #aeb4ba !important;
    box-shadow: none !important;
  }
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-target-label {
    display: none !important;
  }
  :is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
    .chat-prototype-workbench-target-label::after {
    display: none !important;
    content: none !important;
  }
}

/* Pause motion only during a direct manipulation gesture. Otherwise the live
   editor previews the same parallax behavior that the template publishes. */
.is-auto-flex-dragging .chat-prototype-live-stage [data-pf-parallax-scroll][data-pf-parallax-mode="block"],
.is-auto-flex-dragging .chat-prototype-live-stage [data-pf-parallax-scroll][data-pf-parallax-mode="crop"] > img,
.is-auto-flex-dragging .chat-prototype-live-stage [data-pf-parallax-scroll][data-pf-parallax-mode="crop"] > picture > img,
.is-auto-flex-dragging .chat-prototype-live-stage [data-pf-parallax-block],
.is-block-scaling .chat-prototype-live-stage [data-pf-parallax-scroll][data-pf-parallax-mode="block"],
.is-block-scaling .chat-prototype-live-stage [data-pf-parallax-scroll][data-pf-parallax-mode="crop"] > img,
.is-block-scaling .chat-prototype-live-stage [data-pf-parallax-scroll][data-pf-parallax-mode="crop"] > picture > img,
.is-block-scaling .chat-prototype-live-stage [data-pf-parallax-block] {
  transform: none !important;
  transition: none !important;
}

/* Per-item SEO questionnaire and approval workflow. */
#chat-root .chat-seo-category > header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
#chat-root .chat-seo-category > header small { color:#8fa0ad; font:600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.04em; }
#chat-root .chat-seo-check { grid-template-columns:auto minmax(0,1fr) auto !important; }
#chat-root .chat-seo-questionnaire { grid-column:2/-1; margin:2px 0 0; border-top:1px solid rgba(255,255,255,.08); padding-top:8px; }
#chat-root .chat-seo-questionnaire summary { cursor:pointer; color:#87bed6; font:700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.05em; text-transform:uppercase; }
#chat-root .chat-seo-questionnaire > p { margin:8px 0 0; color:#a5b1ba; font-size:11px; line-height:1.4; }
#chat-root .chat-seo-questionnaire label { display:grid; gap:5px; margin-top:8px; color:#91a0aa; font-size:11px; }
#chat-root .chat-seo-questionnaire textarea { width:100%; min-height:58px; resize:vertical; box-sizing:border-box; border:1px solid #364651; border-radius:5px; background:#131a20; color:#e5edf1; padding:8px; font:12px/1.4 inherit; }
#chat-root .chat-seo-questionnaire > div { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
#chat-root .chat-seo-questionnaire button { min-height:28px; padding:0 8px; border:1px solid #3c5665; border-radius:4px; background:#1c2931; color:#cbe7ef; font:700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; cursor:pointer; }
#chat-root .chat-seo-questionnaire button[data-seo-check-prepare-patch] { border-color:#2d826f; color:#7ce1cb; }
#chat-root .chat-seo-questionnaire > small { display:block; margin-top:7px; color:#84939d; font-size:10px; line-height:1.35; }

/* Profile-led SEO questionnaire. Each check asks for only the facts it needs. */
#chat-root .chat-seo-profile { border:1px solid rgba(112,181,205,.2); background:rgba(18,31,39,.58); padding:9px 10px; }
#chat-root .chat-seo-profile > summary { cursor:pointer; color:#d6eef5; font:700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.045em; text-transform:uppercase; }
#chat-root .chat-seo-profile > summary small { margin-left:7px; color:#8097a3; font:600 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:0; text-transform:none; }
#chat-root .chat-seo-profile > p { margin:7px 0 0; color:#9fadb5; font-size:11px; line-height:1.4; }
#chat-root .chat-seo-profile-fields,
#chat-root .chat-seo-question-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 8px; margin-top:8px; }
#chat-root .chat-seo-profile-fields label,
#chat-root .chat-seo-question-fields label { display:grid; gap:4px; min-width:0; color:#9fb0ba; font-size:10px; }
#chat-root .chat-seo-profile-fields textarea,
#chat-root .chat-seo-question-fields textarea { width:100%; min-height:43px; resize:vertical; box-sizing:border-box; border:1px solid #364651; border-radius:4px; background:#121a20; color:#e8f0f3; padding:6px 7px; font:11px/1.35 inherit; }
#chat-root .chat-seo-profile > small { display:block; margin-top:8px; color:#81929b; font-size:10px; line-height:1.35; }
#chat-root .chat-seo-questionnaire > p { max-width:70ch; }
@media(max-width:700px){ #chat-root .chat-seo-profile-fields,#chat-root .chat-seo-question-fields { grid-template-columns:1fr; } }

/* Selected-block box padding grips. They are deliberately small: four sides,
   one move grip, and one corner scale grip make the editable frame explicit. */
.chat-prototype-padding-grips { position:fixed; inset:0; z-index:100155; pointer-events:none; }
.chat-prototype-padding-grips.hidden { display:none !important; }
.chat-prototype-padding-grip { pointer-events:auto; width:14px; height:14px; min-width:14px; min-height:14px; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; touch-action:none; opacity:.78; }
.chat-prototype-padding-grip::before { content:""; display:block; width:8px; height:1px; margin:6px 3px; background:#a9afb5; box-shadow:0 1px 2px rgba(0,0,0,.42); }
.chat-prototype-padding-grip[data-prototype-padding-grip="left"]::before,
.chat-prototype-padding-grip[data-prototype-padding-grip="right"]::before { width:1px; height:8px; margin:3px 6px; }
.chat-prototype-padding-grip[data-prototype-padding-grip="top"],
.chat-prototype-padding-grip[data-prototype-padding-grip="bottom"] { cursor:ns-resize; }
.chat-prototype-padding-grip[data-prototype-padding-grip="left"],
.chat-prototype-padding-grip[data-prototype-padding-grip="right"] { cursor:ew-resize; }
.chat-prototype-padding-grip:hover { opacity:1; transform:scale(1.25); }
.chat-prototype-padding-grip:hover::before { background:#e3e6e8; }
.chat-prototype-live-stage .pf-page-grid-free[data-pf-inspect-kind="text"] { box-sizing:border-box; }

/* 2026-07-10: compact DX editor chrome. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls {
  gap: 2px !important;
  padding: 2px 3px !important;
  height: 30px !important;
  border-color: #292929 !important;
  border-radius: 4px !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen)
  .chat-prototype-workbench-head .chat-prototype-view-controls
  > :is(button.chat-prototype-workbench-target, button.chat-prototype-workbench-settings, button.chat-prototype-close-btn) {
  flex-basis: 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
}
.chat-prototype-target-icon {
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.chat-prototype-close-icon {
  display: block !important;
  width: auto !important;
  height: auto !important;
  font: 300 18px/1 Arial, sans-serif !important;
  color: currentColor !important;
  transform: translateY(-1px) !important;
}
.chat-prototype-close-icon::before,
.chat-prototype-close-icon::after { content: none !important; display: none !important; }

/* Keep the close action to one centered glyph. Earlier editor chrome used a
   pseudo-element fallback as well as the inline icon, which visually doubled it. */
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-close-btn::before {
  content: none !important;
  display: none !important;
}
:is(#chat-root, .chat-media.chat-media--block-draft-fullscreen) .chat-prototype-close-btn .chat-prototype-close-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  font: 300 18px/14px Arial, sans-serif !important;
  transform: none !important;
}

#chat-root .chat-prototype-layout-edit--viewport-dock {
  width: min(520px, calc(100vw - 28px)) !important;
  bottom: 12px !important;
}
#chat-root .chat-prototype-layout-edit-bar {
  min-height: 42px !important;
  padding: 4px !important;
  gap: 4px !important;
  border-radius: 9px !important;
  border: 1px solid #33414a !important;
  background: rgba(15, 20, 24, .96) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
}
#chat-root .chat-prototype-layout-focus,
#chat-root .chat-prototype-layout-undo {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 6px !important;
}
#chat-root .chat-prototype-layout-undo span { display: none !important; }
#chat-root .chat-prototype-layout-prompt-shell textarea {
  min-height: 32px !important;
  height: 32px !important;
  padding: 7px 38px 6px 10px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 18px !important;
}
#chat-root .chat-prototype-layout-prompt-shell .chat-send-icon {
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  right: 2px !important;
  top: 2px !important;
}