/* Unified persona / creative-template drawer for every generation tool page. */

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context] {
  --context-accent: #7c3aed;
  --context-accent-soft: #f4f0ff;
  --context-border: #e5e7eb;
  --context-ink: #1f2937;
  --context-muted: #60697a;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  :is(.tb-context-drawer, .tb-context-editor, .tb-context-drawer-backdrop, .tb-context-editor-backdrop)[hidden],
.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  :is([data-context-option], [data-context-search-empty])[hidden] {
  display: none !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-trigger {
  width: 100% !important;
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 16px !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid #dfe2e8 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--context-ink) !important;
  padding: 0 13px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: border-color 160ms ease-out, background-color 160ms ease-out !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-trigger:hover {
  border-color: #b9a7f8 !important;
  background: #fcfbff !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-trigger:focus-visible {
  outline: 3px solid rgb(124 58 237 / 18%) !important;
  outline-offset: 2px !important;
  border-color: var(--context-accent) !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-trigger > span {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-trigger > em {
  color: var(--context-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
  white-space: nowrap !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer {
  position: fixed !important;
  inset: 0 0 0 auto !important;
  z-index: 1400 !important;
  width: min(440px, 100vw) !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  padding: 0 !important;
  box-shadow: -12px 0 28px rgb(30 25 50 / 14%) !important;
  transform: translateX(0) !important;
  animation: tb-context-drawer-enter 190ms cubic-bezier(.22, 1, .36, 1) both !important;
}

@keyframes tb-context-drawer-enter {
  from { transform: translateX(28px); opacity: .75; }
  to { transform: translateX(0); opacity: 1; }
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-head {
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 0 0 auto !important;
  border-bottom: 1px solid #eceef2 !important;
  background: #fff !important;
  padding: 0 20px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-head strong {
  color: var(--context-ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  :is(.tb-context-drawer-head button, .tb-context-editor > header button) {
  width: 36px !important;
  height: 36px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #697183 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  :is(.tb-context-drawer-head button, .tb-context-editor > header button):hover {
  background: #f3f4f6 !important;
  color: #252a35 !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-tip {
  margin: 16px 20px 12px !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--context-accent-soft) !important;
  color: #493b72 !important;
  padding: 12px 13px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-tip > i {
  color: var(--context-accent) !important;
  font-size: 15px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-tip div {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-tip strong {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-tip span {
  color: #62577d !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-actions {
  display: flex !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  padding: 0 20px 12px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-actions .tb-btn {
  min-height: 38px !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-search {
  min-height: 40px !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) 30px !important;
  align-items: center !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
  margin: 0 20px 14px !important;
  border: 1px solid #dfe2e8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #737b8b !important;
  padding: 0 7px 0 11px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-search:focus-within {
  border-color: var(--context-accent) !important;
  outline: 3px solid rgb(124 58 237 / 12%) !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-search input {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--context-ink) !important;
  padding: 0 !important;
  font: inherit !important;
  font-size: 13px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-search input::placeholder {
  color: #667085 !important;
  opacity: 1 !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-search-clear {
  width: 30px !important;
  height: 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #7d8492 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-search-clear:hover {
  background: #f3f4f6 !important;
  color: #343943 !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-section {
  min-height: 0 !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 9px !important;
  overflow: auto !important;
  border: 0 !important;
  padding: 0 20px 18px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-section > strong {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  display: block !important;
  background: #fff !important;
  color: #4f5665 !important;
  padding: 2px 0 7px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  [data-context-options-list] {
  display: grid !important;
  gap: 8px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-option {
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid var(--context-border) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--context-ink) !important;
  padding: 7px 8px 7px 11px !important;
  box-shadow: none !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-option:has(input:checked) {
  border-color: #a78bfa !important;
  background: #faf8ff !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-option > label {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  cursor: pointer !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-option input {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  accent-color: var(--context-accent) !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-option label > span {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-option strong {
  overflow: hidden !important;
  color: var(--context-ink) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-option small {
  overflow: hidden !important;
  color: var(--context-muted) !important;
  font-size: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-option > em {
  border-radius: 999px !important;
  background: #ede9fe !important;
  color: #6344b8 !important;
  padding: 3px 7px !important;
  font-size: 10px !important;
  font-style: normal !important;
  white-space: nowrap !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-option-edit {
  width: 34px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #667085 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-option-edit:hover {
  background: #efecff !important;
  color: var(--context-accent) !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  :is(.tb-context-empty, .tb-context-search-empty) {
  min-height: 92px !important;
  display: grid !important;
  place-content: center !important;
  gap: 5px !important;
  border: 1px dashed #d3d6de !important;
  border-radius: 9px !important;
  background: #fafbfc !important;
  color: #5d6574 !important;
  padding: 16px !important;
  text-align: center !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer > footer {
  min-height: 66px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  border-top: 1px solid #e9ebef !important;
  background: #fff !important;
  padding: 12px 20px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-selection {
  color: var(--context-muted) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-footer-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-drawer-footer-actions .tb-btn {
  min-width: 76px !important;
  min-height: 40px !important;
  border-radius: 8px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  :is(.tb-context-drawer-backdrop, .tb-context-editor-backdrop) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1390 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgb(24 28 38 / 46%) !important;
  padding: 0 !important;
  cursor: default !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-editor-backdrop {
  z-index: 1490 !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-editor {
  position: fixed !important;
  inset: 0 0 0 auto !important;
  z-index: 1500 !important;
  width: min(460px, 100vw) !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  padding: 0 !important;
  box-shadow: -12px 0 28px rgb(30 25 50 / 16%) !important;
  transform: translateX(0) !important;
  animation: tb-context-drawer-enter 190ms cubic-bezier(.22, 1, .36, 1) both !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-editor > header {
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 0 0 auto !important;
  border-bottom: 1px solid #eceef2 !important;
  background: #fff !important;
  padding: 0 20px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-editor > header strong {
  color: var(--context-ink) !important;
  font-size: 16px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-editor-fields {
  display: grid !important;
  gap: 13px !important;
  flex: 1 1 auto !important;
  padding: 18px 20px 24px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-editor-fields label {
  display: grid !important;
  gap: 6px !important;
  color: #4b5260 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-editor-fields :is(input, textarea) {
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid #dfe2e8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--context-ink) !important;
  padding: 9px 11px !important;
  font: inherit !important;
  font-size: 13px !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-editor-fields :is(input, textarea):focus {
  border-color: var(--context-accent) !important;
  outline: 3px solid rgb(124 58 237 / 12%) !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-editor-fields textarea {
  min-height: 88px !important;
  resize: vertical !important;
  line-height: 1.55 !important;
}

.toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
  .tb-context-editor > footer {
  min-height: 66px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  border-top: 1px solid #e9ebef !important;
  background: #fff !important;
  padding: 12px 20px !important;
}

body.tb-context-drawer-is-open,
body.tb-context-editor-is-open {
  overflow: hidden !important;
}

@media (max-width: 720px) {
  .toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
    :is(.tb-context-drawer, .tb-context-editor) {
    width: 100vw !important;
  }

  .toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
    .tb-context-drawer > footer {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
    .tb-context-drawer-footer-actions .tb-btn {
    flex: 1 1 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toolbox-body .tb-app[data-app-shell][data-ui-revision="3"] [data-generation-context]
    :is(.tb-context-drawer, .tb-context-editor) {
    animation: none !important;
    transition: none !important;
  }
}