/* ============================================
   THEME TOKENS
   A host app restyles the editor by setting these on any ancestor
   (or :root). Defaults are the Testomat.io look.
   ============================================ */
:root {
  --tme-font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --tme-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Step field text. */
  --tme-text-size: 14px;
  --tme-leading: 20px;
  --tme-h1: 22px;
  --tme-h2: 20px;
  --tme-h3: 18px;
  --tme-h4: 16px;
  --tme-h5: 14px;
  --tme-h6: 14px;

  --tme-fg: #262626;
  --tme-fg-strong: #0a0a0a;
  --tme-fg-soft: #404040;
  --tme-muted-fg: #737373;
  --tme-placeholder: #a1a1a1;
  --tme-border: #e5e5e5;
  --tme-border-strong: #d4d4d4;
  --tme-surface: #ffffff;
  --tme-surface-hover: #fafafa;
  --tme-muted: rgba(15, 23, 42, 0.05);
  --tme-primary: #4f46e5;
  --tme-ring: rgba(79, 70, 229, 0.25);
  --tme-link: #4f46e5;
  --tme-code: rgb(146, 64, 14);
  --tme-danger: #ef4444;
  --tme-tooltip-bg: #0a0a0a;
  --tme-tooltip-fg: #fafafa;
  --tme-shadow: rgba(0, 0, 0, 0.12);
  --tme-radius: 8px;

  /* Test and suite header. */
  --tme-meta-bg: var(--tme-muted);
  --tme-meta-border: var(--tme-border);
  --tme-meta-border-open: color-mix(in srgb, var(--tme-primary) 50%, transparent);
  --tme-meta-gap: 2rem;
}

html.dark {
  --tme-fg: #fafafa;
  --tme-fg-strong: #d4d4d4;
  --tme-fg-soft: #a3a3a3;
  --tme-muted-fg: #737373;
  --tme-placeholder: #525252;
  --tme-border: #404040;
  --tme-border-strong: #404040;
  --tme-surface: #262626;
  --tme-surface-hover: #333333;
  --tme-muted: rgba(255, 255, 255, 0.05);
  --tme-primary: #6366f1;
  --tme-ring: rgba(99, 102, 241, 0.25);
  --tme-link: rgb(129, 140, 248);
  --tme-code: rgb(251, 191, 36);
  --tme-tooltip-bg: #262626;
  --tme-shadow: rgba(0, 0, 0, 0.3);
}

/* ============================================
   COLOR PALETTE
   Adjust these variables to change the theme
   ============================================ */
:root {
  /* Base colors */
  --color-white: #ffffff;
  --color-slate-900: #0f172a;
  --color-slate-400: #94a3b8;

  /* Primary (Blue) - used for steps, buttons, focus states */
  --color-primary-900: #1e3a8a;
  --color-primary-700: #1d4ed8;
  --color-primary-600: #2563eb;
  --color-primary-500: #3b82f6;

  /* Success (Green) - used for ready status */
  --color-success-500: #22c55e;

  /* Danger (Red) - used for blocked status */
  --color-danger-500: #ef4444;

  /* Accent (Emerald/Teal) - used for snippets */
  --color-accent-700: #0f766e;
  --color-accent-500: #10b981;

  /* Selection */
  --color-selection: rgba(0, 120, 215, 0.3);

  /* Semantic tokens - these reference the palette above */
  --text-primary: #262626;
  --text-muted: rgba(15, 23, 42, 0.65);

  --border-light: rgba(15, 23, 42, 0.1);
  --border-default: rgba(15, 23, 42, 0.12);
  --shadow-subtle: rgba(15, 23, 42, 0.05);
  --shadow-medium: rgba(15, 23, 42, 0.16);
  --shadow-heavy: rgba(15, 23, 42, 0.35);
  --overlay-dark: rgba(15, 23, 42, 0.75);

  --bg-white: rgba(255, 255, 255, 0.85);
  --bg-white-solid: rgba(255, 255, 255, 0.92);
  --bg-white-opaque: rgba(255, 255, 255, 0.98);
  --bg-muted: rgba(15, 23, 42, 0.05);

  /* Step block colors */
  --step-card-bg: #f7f7f8;
  --step-card-border: #e5e7eb;
  --step-card-shadow: rgba(15, 23, 42, 0.06);
  --step-input-shadow: rgba(79, 70, 229, 0.25);
  --step-text: #1f2937;
  --step-muted: #6b7280;
  --step-action: #374151;
  --step-bg-button: #ffffff;
  --step-bg-button-hover: #f3f4f6;
  --step-border-focus: rgba(79, 70, 229, 0.4);
  --step-border-light: rgba(15, 23, 42, 0.12);
  --step-bg-light: rgba(15, 23, 42, 0.04);
  --step-shadow-hover: rgba(15, 23, 42, 0.1);

  /* Step timeline design tokens */
  --step-number-size: 24px;
  --step-number-bg: #e5e5e5;
  --step-number-text: #0a0a0a;
  --step-label-color: #404040;
  --step-column-gap: 16px;
  --step-section-gap: 16px;
  --step-input-radius: 8px;
  --step-input-border: #d4d4d4;
  --step-input-border-focus: #4f46e5;
  --snippet-dropdown-bg: #fafafa;
  --snippet-content-bg: #fafafa;
  --snippet-content-border: #e5e5e5;

  /* Snippet block colors */
  --snippet-border: rgba(16, 185, 129, 0.75);
  --snippet-bg: rgba(16, 185, 129, 0.12);
  --snippet-shadow: rgba(16, 185, 129, 0.16);
  --snippet-border-light: rgba(16, 185, 129, 0.25);
  --snippet-border-medium: rgba(16, 185, 129, 0.35);
  --snippet-border-strong: rgba(16, 185, 129, 0.55);
  --snippet-border-focus: rgba(16, 185, 129, 0.7);
  --snippet-bg-light: rgba(16, 185, 129, 0.1);
  --snippet-bg-hover: rgba(16, 185, 129, 0.18);
  --snippet-focus-ring: rgba(16, 185, 129, 0.2);

  /* Status colors */
  --status-default: var(--color-slate-400);
  --status-default-bg: rgba(148, 163, 184, 0.12);
  --status-ready: var(--color-success-500);
  --status-ready-bg: rgba(34, 197, 94, 0.12);
  --status-blocked: var(--color-danger-500);
  --status-blocked-bg: rgba(239, 68, 68, 0.12);
}

/* Dark mode variable overrides */
html.dark {
  --color-white: #171717;
  --color-slate-900: #fafafa;
  --color-slate-400: #737373;

  --text-primary: #fafafa;
  --text-muted: rgba(250, 250, 250, 0.5);

  --border-light: rgba(255, 255, 255, 0.1);
  --border-default: rgba(255, 255, 255, 0.12);
  --shadow-subtle: rgba(0, 0, 0, 0.2);
  --shadow-medium: rgba(0, 0, 0, 0.35);
  --shadow-heavy: rgba(0, 0, 0, 0.6);
  --overlay-dark: rgba(0, 0, 0, 0.8);

  --bg-white: rgba(38, 38, 38, 0.85);
  --bg-white-solid: rgba(38, 38, 38, 0.92);
  --bg-white-opaque: rgba(38, 38, 38, 0.98);
  --bg-muted: rgba(255, 255, 255, 0.05);

  /* Step block colors */
  --step-card-bg: #1a1a1a;
  --step-card-border: #333333;
  --step-card-shadow: rgba(0, 0, 0, 0.2);
  --step-input-border: #404040;
  --step-input-border-focus: #6366f1;
  --step-input-shadow: rgba(99, 102, 241, 0.25);
  --step-text: #e5e5e5;
  --step-muted: #737373;
  --step-action: #a3a3a3;
  --step-bg-button: #262626;
  --step-bg-button-hover: #333333;
  --step-border-focus: rgba(99, 102, 241, 0.4);
  --step-border-light: rgba(255, 255, 255, 0.1);
  --step-bg-light: rgba(255, 255, 255, 0.06);
  --step-shadow-hover: rgba(0, 0, 0, 0.2);

  /* Step timeline */
  --step-number-bg: #404040;
  --step-number-text: #fafafa;
  --step-label-color: #a3a3a3;
  --snippet-dropdown-bg: #262626;
  --snippet-content-bg: #1a1a1a;
  --snippet-content-border: #333333;

  /* Snippet block colors */
  --snippet-border: rgba(16, 185, 129, 0.6);
  --snippet-bg: rgba(16, 185, 129, 0.08);
  --snippet-shadow: rgba(16, 185, 129, 0.12);
  --snippet-border-light: rgba(16, 185, 129, 0.2);
  --snippet-border-medium: rgba(16, 185, 129, 0.3);
  --snippet-border-strong: rgba(16, 185, 129, 0.45);
  --snippet-border-focus: rgba(16, 185, 129, 0.6);
  --snippet-bg-light: rgba(16, 185, 129, 0.08);
  --snippet-bg-hover: rgba(16, 185, 129, 0.14);
  --snippet-focus-ring: rgba(16, 185, 129, 0.15);

  /* Status colors */
  --status-default-bg: rgba(148, 163, 184, 0.08);
  --status-ready-bg: rgba(34, 197, 94, 0.08);
  --status-blocked-bg: rgba(239, 68, 68, 0.08);
}

/* Dark mode overrides for BlockNote's own file block */

html.dark [data-file-block] .bn-add-file-button {
  background-color: var(--tme-surface);
  color: var(--tme-fg-soft);
}

html.dark .bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover,
html.dark [data-file-block] .bn-file-name-with-icon:hover,
html.dark .ProseMirror-selectednode .bn-file-name-with-icon {
  background-color: var(--tme-surface-hover);
}

.testomatio-editor,
.testomatio-editor .bn-default-styles {
  font-family: var(--tme-font-sans);
}

.bn-testcase {
  --status-color: var(--status-default);
  position: relative;
  border-radius: 1rem;
  border-left: 6px solid var(--status-color);
  padding: 1rem 1.25rem;
  background: var(--status-default-bg);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bn-testcase::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--shadow-subtle);
}

.bn-testcase__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.bn-testcase__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bn-testcase__label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}

.bn-testcase__reference {
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-light);
  background: var(--bg-white);
  font-size: 0.85rem;
  min-width: 8rem;
}

.bn-testcase__reference:focus-visible {
  outline: 2px solid var(--tme-primary);
  outline-offset: 2px;
}

.bn-testcase__status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 600;
}

.bn-testcase__status select {
  border-radius: 0.5rem;
  border: 1px solid var(--border-default);
  padding: 0.35rem 0.6rem;
  background: var(--tme-surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: inherit;
}

.bn-testcase__body {
  min-height: 2.5rem;
}

.bn-testcase--ready {
  --status-color: var(--status-ready);
  background: var(--status-ready-bg);
}

.bn-testcase--blocked {
  --status-color: var(--status-blocked);
  background: var(--status-blocked-bg);
}

.bn-teststep-plain {
  padding: 4px 0;
  font-family: var(--tme-font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--tme-fg);
}

.bn-teststep-plain__data,
.bn-teststep-plain__expected {
  display: block;
  color: var(--tme-muted-fg);
  font-size: 13px;
}

.bn-teststep,
.bn-teststep button,
.bn-teststep input,
.bn-teststep textarea,
.bn-teststep select {
  font-family: var(--tme-font-sans);
}

.bn-teststep {
  display: grid;
  grid-template-columns: var(--step-number-size) 1fr;
  gap: 0 var(--step-column-gap);
  position: relative;
  width: 100%;
}

.bn-teststep::after {
  display: none;
}

.bn-block-content.ProseMirror-selectednode > .bn-teststep,
.ProseMirror-selectednode > .bn-block-content > .bn-teststep {
  outline: none;
}

.bn-snippet {
  border-color: var(--snippet-border);
  background: var(--snippet-bg);
}

.bn-snippet::after {
  box-shadow: none;
}

.bn-snippet .bn-step-field__label {
  color: var(--color-accent-700);
}

.bn-teststep__timeline {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.bn-teststep__line {
  flex: 1;
  width: 1px;
  background: var(--step-number-bg);
}

.bn-teststep__content {
  display: flex;
  flex-direction: column;
  gap: var(--step-section-gap);
  padding-bottom: 8px;
}

.bn-teststep__content > .bn-teststep__header + .bn-step-field {
  margin-top: calc(4px - var(--step-section-gap));
}

.bn-teststep__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 28px;
}

.bn-teststep__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bn-teststep__number {
  width: var(--step-number-size);
  height: var(--step-number-size);
  border-radius: 999px;
  background: var(--step-number-bg);
  color: var(--step-number-text);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bn-teststep__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--step-label-color);
}

.bn-teststep__view-toggle {
  border: none;
  background: transparent;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition:
    background-color 120ms ease,
    opacity 120ms ease;
}

.bn-teststep:hover .bn-teststep__view-toggle,
.bn-teststep__view-toggle:focus-visible {
  opacity: 1;
}

.bn-teststep__view-toggle:hover {
  background: var(--step-bg-button-hover);
}

.bn-teststep__view-toggle svg {
  display: block;
  color: var(--tme-fg-strong);
}

.bn-teststep__view-toggle--horizontal svg {
  transform: rotate(90deg);
}

.bn-teststep__view-toggle--disabled {
  cursor: not-allowed;
  opacity: 0.3 !important;
}

.bn-teststep__horizontal-fields {
  display: flex;
  gap: 16px;
}

.bn-teststep__horizontal-col {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bn-teststep__horizontal-col .bn-step-field__top {
  min-height: 28px;
}

/* Compact (reading-focused) view: tight rows with no chrome until a field is
   focused, at which point the step expands to the normal editing layout.

   Structural rules below apply to the whole compact mode (both collapsed and
   expanded) so that expanding a step never shifts the field's position — the
   view-toggle floats out of flow and the editor keeps its default padding, so
   focusing only reveals chrome *below* the field instead of pushing it down. */
.bn-teststep--compact .bn-teststep__header {
  position: absolute;
  top: 0;
  right: 0;
  min-height: 0;
  z-index: 2;
}

/* Tighten the gap between the step title and its data/expected fields while
   reading. Applied to the whole compact mode (not just collapsed) so the
   spacing is identical when a field expands — no jump on focus. */
.bn-teststep--compact .bn-teststep__content {
  gap: 6px;
}

.bn-teststep--compact .bn-teststep__content > .bn-teststep__header + .bn-step-field {
  margin-top: 0;
}

/* Collapsed-only rules below hide the remaining chrome for reading. None of
   them change the field's top position, so toggling them on focus is jump-free
   (the border only changes colour, min-height only grows the box downward). */
.bn-teststep--collapsed .bn-step-field__input {
  border-color: transparent;
}

.bn-teststep--collapsed .bn-step-field__input:hover {
  border-color: var(--step-input-border);
}

/* Zero the whole min-height chain in compact mode so reading rows hug their
   content. OverType floors the textarea height at its CSS min-height (which the
   wrapper inherits as 100% of the editor's old 4rem box), so dropping only the
   OverType minHeight option isn't enough — the textarea's own min-height must
   go too. Applied to all of compact (not just collapsed) so the height is
   identical when a field expands: no jump on focus. Vertical padding is also
   tightened consistently for the same reason. */
/* OverType injects its own stylesheet (after ours) that hard-codes
   `.overtype-container.overtype-auto-resize .overtype-wrapper { min-height: 60px }`
   with the same specificity we'd normally use, so it wins on source order. The
   extra `.overtype-container` qualifier below raises our specificity above it. */
.bn-teststep--compact .bn-step-field__input--multiline,
.bn-teststep--compact .bn-step-editor,
.bn-teststep--compact .bn-step-editor--multiline,
.bn-teststep--compact .bn-step-editor .overtype-container .overtype-wrapper,
.bn-teststep--compact .bn-step-editor .overtype-container .overtype-wrapper .overtype-input,
.bn-teststep--compact .bn-step-editor .overtype-container .overtype-wrapper .overtype-preview {
  min-height: 0 !important;
}

.bn-teststep--compact .bn-step-editor .overtype-wrapper .overtype-input,
.bn-teststep--compact .bn-step-editor .overtype-wrapper .overtype-preview {
  padding: 4px 12px !important;
}

.bn-teststep--collapsed .bn-step-actions {
  display: none;
}

/* Prefix the expected-result text with a small "Expected" label while reading,
   so the line reads e.g. "Expected  Login form is shown". OverType wraps each
   line in its own block element, so the badge goes on the first line element to
   sit inline before the text. It's a pseudo-element (not editable text), so it
   never enters the serialized value. */
.bn-teststep--collapsed [data-step-field="expected"] .overtype-wrapper .overtype-preview > :first-child::before {
  content: "Expected";
  display: inline-block;
  margin-right: 8px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--step-bg-light);
  color: var(--step-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  vertical-align: 1px;
}

/* Read-only preview parity for compact reading rows: the live compact field
   tightens padding on the OverType layers (above), which the static preview
   doesn't have, so apply the same padding to the flow `--preview` box. */
.bn-teststep--compact .bn-step-editor--preview {
  padding: 4px 12px;
}

/* Same "Expected" reading badge for the static preview. The static preview is a
   single flow box (not OverType's per-line divs), so the badge goes on its own
   ::before. */
.bn-teststep--collapsed .bn-step-editor--preview[data-step-field="expected"]::before {
  content: "Expected";
  display: inline-block;
  margin-right: 8px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--step-bg-light);
  color: var(--step-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  vertical-align: 1px;
}

.bn-teststep__view-toggle--compact svg {
  color: var(--step-muted);
}

html.dark .bn-teststep__view-toggle--compact svg {
  color: var(--step-muted);
}


.bn-snippet .bn-step-field__input {
  border-color: var(--snippet-border-light);
}

.bn-snippet .bn-step-field__input--focused {
  border-color: var(--snippet-border-focus);
  box-shadow: 0 0 0 3px var(--snippet-focus-ring);
}

.bn-snippet .bn-step-toolbar__button {
  color: var(--color-accent-700);
}

.bn-snippet .bn-step-suggestions {
  border-color: var(--snippet-border-light);
}

.bn-snippet .bn-step-suggestion:hover,
.bn-snippet .bn-step-suggestion--active {
  background: var(--snippet-bg-light);
}

.bn-snippet .bn-step-suggestion__meta {
  color: rgba(15, 118, 110, 0.65);
}

.bn-snippet {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  border-color: transparent;
}

.bn-snippet__header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.bn-snippet__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--step-label-color);
  flex-shrink: 0;
}

/* ============================================
   HEADING SIZES INSIDE THE EDITOR
   Override BlockNote's default heading scale (3em / 2em / 1.3em) with a
   compact 22px → 14px range. BlockNote derives heading font-size from the
   `--level` custom property, so we just redefine it per level.
   ============================================ */
.testomatio-editor [data-content-type="heading"],
.testomatio-editor [data-content-type="heading"][data-level="1"] {
  --level: var(--tme-h1); /* h1 (level 1 has no [data-level] rule of its own) */
}
.testomatio-editor [data-content-type="heading"][data-level="2"] {
  --level: var(--tme-h2);
}
.testomatio-editor [data-content-type="heading"][data-level="3"] {
  --level: var(--tme-h3);
}
.testomatio-editor [data-content-type="heading"][data-level="4"] {
  --level: var(--tme-h4);
}
.testomatio-editor [data-content-type="heading"][data-level="5"] {
  --level: var(--tme-h5);
}
.testomatio-editor [data-content-type="heading"][data-level="6"] {
  --level: var(--tme-h6);
}
/* Keep size stable during BlockNote's heading-transition animation. */
.testomatio-editor [data-prev-level="1"] {
  --prev-level: var(--tme-h1);
}
.testomatio-editor [data-prev-level="2"] {
  --prev-level: var(--tme-h2);
}
.testomatio-editor [data-prev-level="3"] {
  --prev-level: var(--tme-h3);
}
.testomatio-editor [data-prev-level="4"] {
  --prev-level: var(--tme-h4);
}
.testomatio-editor [data-prev-level="5"] {
  --prev-level: var(--tme-h5);
}
.testomatio-editor [data-prev-level="6"] {
  --prev-level: var(--tme-h6);
}

/* ============================================
   TAG BADGES IN HEADINGS
   `@tag` tokens inside headings are painted as compact badges by a ProseMirror
   inline decoration (see src/editor/tagBadge.ts). The text stays editable; only
   the styling is applied.
   ============================================ */
.testomatio-editor [data-content-type="heading"] .bn-tag-badge {
  font-size: 0.78em;
  font-weight: 500;
  line-height: 1.2;
  background: var(--bg-muted);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 0.05em 0.4em;
  vertical-align: middle;
  white-space: nowrap;
}
html.dark .testomatio-editor [data-content-type="heading"] .bn-tag-badge {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ============================================
   AUTO-LINKED URLS
   Bare `http(s)://` URLs are painted as links by a ProseMirror inline
   decoration (see src/editor/autoLink.ts). The text stays editable and the
   markdown is untouched; only the styling and a Cmd/Ctrl+click handler are
   added. Opening on click is wired in the plugin, not via `pointer-events`.
   ============================================ */
.testomatio-editor .bn-auto-link {
  color: var(--color-primary-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.testomatio-editor .bn-auto-link:hover {
  color: var(--color-primary-600);
}
html.dark .testomatio-editor .bn-auto-link {
  color: var(--tme-link);
}


/* ============================================
   TEST / SUITE HEADER
   A card for `<!-- test ... -->` / `<!-- suite ... -->` comments that folds
   open into its fields. Colors come from the --tme-meta-* tokens.
   ============================================ */
.bn-testmeta-block {
  width: 100%;
}

/* The open border already marks the header in use; BlockNote's selection ring would double it. */
.bn-block-content[data-content-type="testMeta"].ProseMirror-selectednode > *,
.ProseMirror-selectednode > .bn-block-content[data-content-type="testMeta"] > * {
  outline: none;
}

.bn-block-outer:not(:first-child):has(> .bn-block > .bn-block-content[data-content-type="testMeta"]) {
  margin-top: var(--tme-meta-gap);
}

.bn-testmeta {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--tme-font-sans);
  color: var(--tme-fg);
  background: var(--tme-meta-bg);
  border: 1px solid var(--tme-meta-border);
  border-radius: var(--tme-radius);
  transition: border-color 150ms ease;
}

.bn-testmeta--open {
  border-color: var(--tme-meta-border-open);
}

.bn-testmeta__header {
  position: relative;
  display: flex;
  border-radius: inherit;
}

.bn-testmeta__trigger {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 6px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: inherit;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.bn-testmeta__header--actions .bn-testmeta__trigger {
  padding-right: 44px;
}

.bn-testmeta--open .bn-testmeta__trigger {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bn-testmeta__trigger:hover {
  background: color-mix(in srgb, var(--tme-muted) 60%, transparent);
}

.bn-testmeta__trigger:focus-visible {
  outline: none;
  border-color: var(--tme-primary);
  box-shadow: 0 0 0 3px var(--tme-ring);
}

.bn-testmeta__title {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.bn-testmeta__label,
.bn-testmeta__summary,
.bn-testmeta__status {
  font-size: 12px;
  font-weight: 400;
  color: var(--tme-muted-fg);
}

.bn-testmeta__label,
.bn-testmeta__id,
.bn-testmeta__more,
.bn-testmeta__status {
  flex-shrink: 0;
}

.bn-testmeta__id {
  font-family: var(--tme-font-mono);
  font-size: 12px;
}

.bn-testmeta__summary {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bn-testmeta__more {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--tme-muted-fg);
  background: var(--tme-muted);
  border-radius: 999px;
}

.bn-testmeta__status {
  margin-left: auto;
}

.bn-testmeta__chevron {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--tme-muted-fg);
  transition: transform 200ms ease-out, color 150ms ease;
}

.bn-testmeta__trigger:hover .bn-testmeta__chevron {
  color: var(--tme-fg);
}

.bn-testmeta--open .bn-testmeta__chevron {
  transform: rotate(180deg);
}

.bn-testmeta__actions {
  position: absolute;
  top: 0;
  right: 6px;
  bottom: 0;
  display: flex;
  align-items: center;
}

.bn-testmeta__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--tme-muted-fg);
  background: transparent;
  border: none;
  border-radius: calc(var(--tme-radius) - 2px);
  cursor: pointer;
}

.bn-testmeta__icon-btn:hover {
  color: var(--tme-fg);
  background: var(--tme-muted);
}

.bn-testmeta__remove {
  width: 24px;
  height: 24px;
}

.bn-testmeta__menu {
  position: absolute;
  top: calc(100% - 2px);
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: 160px;
  max-height: 240px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 4px;
  background: var(--tme-surface);
  border: 1px solid var(--tme-border);
  border-radius: var(--tme-radius);
  box-shadow: 0 4px 12px var(--tme-shadow);
}

.bn-testmeta__menu-item {
  display: block;
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--tme-fg);
  background: transparent;
  border: none;
  border-radius: calc(var(--tme-radius) - 2px);
  cursor: pointer;
}

.bn-testmeta__menu-item:hover {
  background: var(--tme-muted);
}

.bn-testmeta__menu-separator {
  height: 1px;
  margin: 4px -4px;
  background: var(--tme-border);
}

.bn-testmeta__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px 8px;
}

.bn-testmeta__empty {
  margin: 0;
  padding: 4px 0;
  font-size: 12px;
  color: var(--tme-muted-fg);
}

.bn-testmeta__row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 8px;
  margin-left: -8px;
}

.bn-testmeta__key,
.bn-testmeta__value {
  width: 100%;
  min-width: 0;
  height: 28px;
  box-sizing: border-box;
  padding: 0 8px;
  font: inherit;
  font-size: 14px;
  color: var(--tme-fg);
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--tme-radius) - 2px);
  outline: none;
}

.bn-testmeta__key {
  color: var(--tme-muted-fg);
}

.bn-testmeta__key:not([readonly]):hover,
.bn-testmeta__value:not([readonly]):hover,
.bn-testmeta__key:not([readonly]):focus,
.bn-testmeta__value:not([readonly]):focus {
  border-color: var(--tme-border);
}

.bn-testmeta__key::placeholder,
.bn-testmeta__value::placeholder {
  color: var(--tme-placeholder);
}

/* Compact marker for `<!-- example -->` — a cropped variant of the testMeta bar
   (fit-content width, not full editor width) labelling the table below it. */
.bn-example-marker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  box-sizing: border-box;
  padding: 4px 12px;
  background: var(--bg-muted);
  border-top: 3px solid var(--color-slate-400);
  margin-top: 1rem;
  opacity: 0.6;
}

.bn-example-marker__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Gray cells for the data table that follows an `<!-- example -->` marker. The
   `.bn-example-table` class is applied by a ProseMirror decoration (see
   exampleTableHighlight.ts), bounded to tables between the marker and the next
   test/suite comment (or end of document). */
.bn-editor [data-content-type="table"].bn-example-table td,
.bn-editor [data-content-type="table"].bn-example-table th {
  background: var(--bg-muted);
}

/*
 * The "new test" title heading is inserted directly after a testMeta panel, so it
 * is the block-outer immediately following the one containing a testMeta block.
 * Override BlockNote's injected "Heading" placeholder just for that heading.
 * !important beats the dynamically injected placeholder rule.
 */
.bn-block-outer:has(.bn-block-content[data-content-type="testMeta"])
  + .bn-block-outer
  .bn-block-content[data-content-type="heading"]
  .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
  content: "Enter test title" !important;
}

.bn-snippet-dropdown {
  position: relative;
}

.bn-snippet-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px 0 12px;
  background: var(--snippet-dropdown-bg);
  border: 1px solid var(--step-input-border);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--step-label-color);
  transition: border-color 120ms ease;
}

.bn-snippet-dropdown__trigger:hover {
  border-color: var(--snippet-border-medium);
}

.bn-snippet-dropdown__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--tme-muted-fg);
}

.bn-snippet-dropdown__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Dropdown panel */
.bn-snippet-dropdown__panel {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  width: 280px;
  background: var(--tme-surface);
  border: 1px solid var(--tme-border);
  border-radius: 8px;
  box-shadow: 0 4px 10px var(--tme-shadow);
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.bn-snippet-dropdown__search-wrapper {
  padding: 4px 16px 12px;
  border-bottom: 1px solid var(--tme-border);
}

.bn-snippet-dropdown__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--tme-border-strong);
  border-radius: 6px;
  transition: border-color 120ms ease;
}

.bn-snippet-dropdown__search:focus-within {
  border-color: var(--tme-primary);
}

.bn-snippet-dropdown__search-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--tme-placeholder);
}

.bn-snippet-dropdown__search-input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 500;
  line-height: normal !important;
  color: var(--text-primary);
  width: 100%;
  height: auto;
  display: inline !important;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.bn-snippet-dropdown__search-input::placeholder {
  color: var(--tme-placeholder);
}

.bn-snippet-dropdown__list {
  max-height: 252px;
  overflow-y: auto;
}

.bn-snippet-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.bn-snippet-dropdown__item-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bn-snippet-dropdown__item-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-primary);
}

.bn-snippet-dropdown__item--selected {
  background: var(--tme-surface-hover);
}

.bn-snippet-dropdown__item:hover {
  background: var(--step-bg-light);
}

.bn-snippet-dropdown__empty {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--text-muted);
}

.bn-snippet__content {
  background: var(--snippet-content-bg);
  border: 1px solid var(--snippet-content-border);
  border-radius: 8px;
  padding: 10px 16px;
  min-height: 92px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.bn-snippet__empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.bn-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.bn-step-action-btn {
  border: none;
  background: transparent;
  color: var(--tme-fg-soft);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  height: 28px;
  padding: 0 12px 0 8px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 120ms ease;
}

.bn-step-action-btn:hover {
  background: var(--step-bg-button-hover);
}

.bn-step-action-btn__icon {
  flex-shrink: 0;
}

.bn-step-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.bn-step-field--collapsed {
  align-items: flex-start;
}

.bn-step-field__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.bn-step-field__label-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.bn-step-field__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--step-label-color);
}

.bn-step-field__label--toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--step-muted);
}

.bn-step-field__label--toggle:hover {
  color: var(--step-text);
}

.bn-step-field__label-action {
  display: inline-flex;
  align-items: center;
}

.bn-step-field__dismiss {
  border: none;
  background: transparent;
  color: var(--tme-muted-fg);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.bn-step-field__dismiss:hover {
  color: var(--step-text);
  background: var(--step-bg-button-hover);
}

.bn-step-suggestions-toggle {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.4rem;
  border: 1px solid var(--step-border-light);
  background: transparent;
  color: var(--step-text);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.bn-step-suggestions-toggle:hover {
  background: var(--step-bg-button-hover);
  border-color: rgba(15, 23, 42, 0.2);
}

.bn-step-field__input {
  position: relative;
  border: 1px solid var(--step-input-border);
  border-radius: var(--step-input-radius);
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow: visible;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    outline-color 120ms ease;
}

.bn-step-field__input--multiline {
  min-height: 80px;
}

.bn-step-field__input--focused {
  border-color: var(--step-input-border-focus);
  box-shadow: 0 0 0 1px var(--step-input-border-focus);
}

.bn-step-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px 4px;
}

.bn-step-toolbar__divider {
  width: 1px;
  align-self: stretch;
  background: var(--tme-border);
  margin: 4px;
}

.bn-step-toolbar__button {
  border: none;
  background: transparent;
  color: var(--tme-fg-strong);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-weight: 600;
  font-size: 14px;
}

.bn-step-toolbar__button:hover {
  background: var(--step-bg-button-hover);
}

.bn-step-toolbar__button--active {
  background: var(--step-bg-button-hover);
  color: var(--step-input-border-focus);
}

.bn-container {
  overflow-x: clip;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tme-tooltip-bg);
  color: var(--tme-tooltip-fg);
  font-family: var(--tme-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 4px 12px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 1000;
}

[data-tooltip]:hover::after {
  opacity: 1;
  transition-delay: 300ms;
}

[data-tooltip]:active::after {
  opacity: 0;
  transition-delay: 0ms;
}

.bn-step-editor {
  position: relative;
  border-radius: 0.6rem;
  border: none;
  background: transparent;
  transition: none;
  min-height: 2.5rem;
  font-family: var(--tme-font-sans);
  font-size: var(--tme-text-size);
  font-weight: 400;
  line-height: var(--tme-leading);
  color: var(--tme-fg);
  overflow: hidden;
}

.bn-step-editor .overtype-wrapper .overtype-input {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.bn-step-editor .overtype-wrapper .overtype-input::-webkit-scrollbar {
  width: 6px;
}

.bn-step-editor .overtype-wrapper .overtype-input::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.bn-step-editor--multiline {
  min-height: 4rem;
}

/* Static stand-in shown before a step's interactive editor is lazily mounted.
   Mirrors the OverType inner padding/typography so document height stays stable. */
.bn-step-editor--preview {
  padding: 10px 12px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--tme-fg);
  cursor: text;
}


/* Wrapper around a non-edited step's read-only preview. Focusable so Tab enters
   a step (which mounts its editor); no lingering outline since focus moves to
   the freshly-mounted field immediately. */
.bn-teststep-preview-wrapper {
  outline: none;
}

/* Inline decorations inside the read-only preview mirror the live OverType
   preview, which uses the same step-preview-* classes. The live rules are
   scoped to `.overtype-wrapper .overtype-preview` (which the static preview
   doesn't render), so the same declarations are repeated here for the flow
   `--preview` container. */
.bn-step-editor--preview a.step-preview-link {
  color: var(--tme-link);
  text-decoration: underline;
  pointer-events: none;
}

.bn-step-editor--preview strong.step-preview-bold {
  -webkit-text-stroke: 0.5px currentColor;
  font-weight: inherit;
  color: inherit;
}

.bn-step-editor--preview em.step-preview-italic {
  font-style: italic;
  color: inherit;
}

.bn-step-editor--preview code.step-preview-code {
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  color: var(--tme-code);
}

.bn-step-editor--preview img {
  display: block;
  max-width: 100%;
  border-radius: 0.65rem;
  margin: 0.5rem 0;
  pointer-events: none;
}

.bn-step-editor.bn-step-editor--focused {
  outline: none;
  box-shadow: none;
}

.bn-step-editor .overtype-container {
  height: 100%;
}

.bn-step-editor .overtype-wrapper {
  min-height: 100%;
  background: transparent !important;
}

.bn-step-editor .overtype-wrapper .overtype-input,
.bn-step-editor .overtype-wrapper .overtype-preview {
  padding: 10px 12px !important;
  min-height: inherit !important;
  background: transparent !important;
  font-family: var(--tme-font-sans) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

.bn-step-editor .overtype-wrapper .overtype-input {
  color: transparent !important;
  caret-color: var(--tme-fg) !important;
}

.bn-step-editor .overtype-wrapper .overtype-input.bn-step-caret-hidden {
  caret-color: transparent !important;
}

.bn-step-editor .overtype-wrapper .overtype-preview {
  color: inherit !important;
}

.bn-step-editor .overtype-wrapper textarea.overtype-input::placeholder {
  color: var(--tme-placeholder) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.bn-step-editor .overtype-wrapper textarea.overtype-input::-webkit-input-placeholder {
  color: var(--tme-placeholder) !important;
  font-weight: 400 !important;
}

.bn-step-editor .overtype-wrapper .overtype-placeholder {
  display: none !important;
}

.bn-step-editor .overtype-wrapper .overtype-preview {
  color: var(--tme-fg) !important;
}

.bn-step-editor .overtype-wrapper .overtype-preview a.step-preview-link {
  color: var(--tme-link) !important;
  text-decoration: underline !important;
  pointer-events: none !important;
}

.bn-step-editor .overtype-wrapper .overtype-preview strong.step-preview-bold {
  -webkit-text-stroke: 0.5px currentColor;
  font-weight: inherit !important;
  color: inherit !important;
}

.bn-step-editor .overtype-wrapper .overtype-preview em.step-preview-italic {
  font-style: italic !important;
  color: inherit !important;
}

.bn-step-editor .overtype-wrapper .overtype-preview code.step-preview-code {
  background-color: transparent !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: var(--tme-code) !important;
}

.bn-step-editor .overtype-wrapper .overtype-preview li.bullet-list .syntax-marker,
.bn-step-editor .overtype-wrapper .overtype-preview li.ordered-list .syntax-marker {
  color: inherit !important;
  opacity: 1 !important;
}

.bn-step-custom-caret {
  display: none;
  position: absolute;
  width: 1px;
  background: var(--tme-fg);
  z-index: 2;
  pointer-events: none;
  animation: bn-step-caret-blink 1s step-end infinite;
}

@keyframes bn-step-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.bn-step-link-tooltip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--tme-surface);
  border: 1px solid var(--tme-border-strong);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--tme-shadow);
  font-size: 12px;
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 4px);
  left: 0;
  white-space: nowrap;
}

.bn-step-link-tooltip__url {
  color: var(--tme-muted-fg);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bn-step-link-tooltip__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: none;
  background: transparent;
  color: var(--tme-link);
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  text-decoration: none;
}

.bn-step-link-tooltip__btn:hover {
  background: color-mix(in srgb, var(--tme-link) 8%, transparent);
}

.bn-step-link-tooltip__btn--danger {
  color: var(--tme-danger);
}

.bn-step-link-tooltip__btn--danger:hover {
  background: color-mix(in srgb, var(--tme-danger) 8%, transparent);
}

.bn-step-editor .overtype-wrapper .overtype-preview img {
  display: block;
  max-width: 100%;
  border-radius: 0.65rem;
  margin: 0.5rem 0;
  pointer-events: none;
}

.bn-step-field:not(:focus-within) .overtype-wrapper .overtype-input::selection {
  background-color: transparent !important;
}

.bn-step-field:focus-within .overtype-wrapper .overtype-input::selection {
  background-color: var(--color-selection) !important;
}

/* Hide OverType's built-in link tooltip — we use our own */
.bn-step-editor .overtype-link-tooltip {
  display: none !important;
}

.bn-step-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.bn-step-image-thumb {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 0.5rem;
  border: 1px solid var(--step-border-light);
  overflow: hidden;
  background: var(--bg-muted);
}

.bn-step-image-thumb__button {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.bn-step-image-thumb__button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bn-step-image-thumb__remove {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  border: none;
  border-radius: 999px;
  width: 1.35rem;
  height: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1;
  background: var(--overlay-dark);
  color: var(--color-white);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease;
}

.bn-step-image-thumb:hover .bn-step-image-thumb__remove,
.bn-step-image-thumb__remove:focus-visible {
  opacity: 1;
}

.bn-step-image-preview {
  position: fixed;
  inset: 0;
  background: var(--overlay-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 15;
}

.bn-step-image-preview__content {
  position: relative;
  max-width: min(90vw, 800px);
  width: 100%;
  background: var(--tme-surface);
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: 0 25px 45px var(--shadow-heavy);
}

.bn-step-image-preview__content img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}

.bn-step-image-preview__close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  border: none;
  background: rgba(15, 23, 42, 0.65);
  color: var(--color-white);
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  font-size: 1.1rem;
}

.bn-step-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  background: var(--bg-white-opaque);
  border-radius: 0.65rem;
  border: 1px solid var(--step-border-light);
  box-shadow: 0 18px 35px var(--shadow-medium);
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 5;
  max-height: 12rem;
  overflow-y: auto;
}

.bn-step-suggestion {
  border: none;
  background: transparent;
  border-radius: 0.5rem;
  padding: 0.45rem 0.75rem;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--text-primary);
}

.bn-step-suggestion:hover,
.bn-step-suggestion--active {
  background: var(--step-bg-light);
}

.bn-step-suggestion__title {
  font-weight: 400;
  font-size: 0.95rem;
}

.bn-step-suggestion__meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--step-muted);
}

/* Universal @-mention autocomplete popup (portaled to <body>, fixed to caret). */
.bn-mention-popup {
  position: fixed;
  min-width: 15rem;
  max-width: 24rem;
  background: var(--bg-white-opaque);
  border-radius: 0.65rem;
  border: 1px solid var(--step-border-light);
  box-shadow: 0 18px 35px var(--shadow-medium);
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  z-index: 9999;
  max-height: 15rem;
  overflow-y: auto;
}

.bn-mention-popup__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem 0.35rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--step-muted);
}

.bn-mention-popup__prefix {
  font-weight: 700;
  color: var(--text-primary);
}

.bn-mention-popup__status {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--step-muted);
}

.bn-mention-item {
  border: none;
  background: transparent;
  border-radius: 0.5rem;
  padding: 0.4rem 0.75rem;
  text-align: left;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  color: var(--text-primary);
  width: 100%;
}

.bn-mention-item:hover,
.bn-mention-item--active {
  background: var(--step-bg-light);
}

.bn-mention-item__label {
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bn-mention-item__detail {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--step-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.bn-inline-image {
  display: block;
  max-width: 100%;
  border-radius: 0.65rem;
  margin: 0.5rem 0;
  pointer-events: none;
}

.bn-suggestion-menu .mantine-Badge-label {
  text-transform: none;
  font-size: var(--badge-fz-sm);
}

.bn-mantine .bn-suggestion-menu {
  max-width: 24rem;
}

.bn-mt-suggestion-menu-item-body {
  min-width: 0;
}

.bn-mt-suggestion-menu-item-subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bn-suggestion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 14px;
}

.bn-testcase--draft {
  --status-color: var(--status-default);
}

/* Prevent unnecessary horizontal scrollbar on BlockNote tables.
   ProseMirror sets overflow-x: auto on .tableWrapper, but the
   table-widgets-container extends slightly past the wrapper edge,
   triggering a scrollbar even when table content fits. */
.bn-editor [data-content-type="table"] .tableWrapper {
  overflow-x: hidden;
}