/* Story Builder Component Styles */

/* CSS Custom Properties - removed duplicates, using main.css variables */

/* Story Builder Container */
.container_story-builder {
    /* NAME: StoryBuilderContainer */
    /* PURPOSE: Page container with scrolling for story builder */
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Let flow-viewport handle scrolling */
    position: relative;
    padding: 0; /* Remove padding to allow full-screen flow */
    box-sizing: border-box;
}

/* Insights view container — sized to fill the story builder so the SVG renderer has height */
.story-insights-view {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.svg-insights-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.svg-insights-canvas:active {
    cursor: grabbing;
}

.svg-insights-canvas .insights-column-empty,
.svg-insights-canvas .insights-atom-tags {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
}

/* Mirror .branch-label from SVGFlowStyles.css */
.svg-insights-canvas .insights-column-header {
    font-size: var(--font-size-lg, 1.125rem);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-semibold);
    fill: var(--text-secondary, #666);
}

.svg-insights-canvas .insights-column-empty {
    fill: var(--text-tertiary, #999);
}

.svg-insights-canvas .insights-atom-tags {
    fill: var(--text-tertiary, #999);
}

/* Per-tag colors. Each segment is one <tspan> so fill applies cleanly. */
.insights-tag                              { fill: var(--text-tertiary, #999); }
.insights-tag-label                        { font-size: var(--font-size-xs); }
.insights-tag--ideal                       { fill: var(--color-green-600, #16a34a); }
.insights-tag--failure                     { fill: var(--color-red-600, #dc2626); }
.insights-tag--dealbreaker                 { fill: var(--color-red-600, #dc2626); }
.insights-tag--open_question               { fill: var(--color-amber-700, #b8860b); }

/* Harvey ball confidence glyph — bottom-right of each card */
.svg-insights-canvas .insights-confidence {
    font-size: var(--font-size-sm);
    fill: var(--text-tertiary, #999);
}
.insights-confidence--strong               { fill: var(--color-green-600, #16a34a); }
.insights-confidence--inferred             { fill: var(--color-amber-700, #b8860b); }
.insights-confidence--weak                 { fill: var(--text-tertiary, #999); }

/* ==========================================================================
   Decomposition workspace — v3 atom authoring surface for the insights tab
   ========================================================================== */

.decomp-workspace {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    /* Top padding clears the absolutely-positioned canvas view tabs
       (top: 16px + ~26px tall + breathing room). */
    padding: 64px 32px 64px;
    font-family: var(--font-family-base);
    color: var(--text-primary, #222);
}

.decomp-workspace__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.decomp-workspace__title h3 { margin: 0 0 4px; font-size: var(--font-size-lg, 1.125rem); }
.decomp-workspace__title p  { margin: 0; max-width: 60ch; color: var(--text-secondary, #666); font-size: var(--font-size-sm); }
.decomp-workspace__count    { font-family: var(--font-family-mono); color: var(--text-secondary, #666); }
.decomp-workspace__count span { font-weight: 600; color: var(--text-primary, #222); }

.decomp-group {
    margin-bottom: 32px;
}
.decomp-group__head {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 16px;
    align-items: center;
    margin-bottom: 12px;
}
.decomp-group__title {
    grid-column: 1; grid-row: 1;
    margin: 0;
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
}
.decomp-group__count {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-muted, #f3f4f6);
    color: var(--text-secondary, #666);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    font-weight: 400;
}
.decomp-group__hint {
    grid-column: 1; grid-row: 2;
    margin: 0;
    color: var(--text-tertiary, #999);
    font-size: var(--font-size-xs);
}
.decomp-group__add {
    grid-column: 2; grid-row: 1 / span 2;
    align-self: center;
}
.decomp-group__list {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.decomp-group__empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px 16px;
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: 8px;
    color: var(--text-tertiary, #999);
    font-style: italic;
}

.decomp-atom {
    background: var(--surface-raised, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.decomp-atom__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.decomp-atom__kind {
    text-transform: uppercase;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    color: var(--text-secondary, #666);
}
.decomp-atom__key {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    background: var(--surface-muted, #f3f4f6);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--text-secondary, #444);
}
.decomp-atom__key--uuid { color: var(--color-blue-600, #2563eb); }
.decomp-atom__confidence {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    padding: 1px 6px;
    border-radius: 4px;
}
.decomp-atom__confidence--strong   { background: rgba(22,163,74,0.12); color: var(--color-green-700, #15803d); }
.decomp-atom__confidence--weak     { background: rgba(100,116,139,0.12); color: var(--text-secondary, #475569); }
.decomp-atom__confidence--inferred { background: rgba(184,134,11,0.12); color: var(--color-amber-700, #b8860b); }

.decomp-atom__remove {
    margin-left: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--text-tertiary, #999);
    padding: 0 4px;
}
.decomp-atom__remove:hover { color: var(--color-red-600, #dc2626); }

.decomp-atom__text {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.45;
    white-space: pre-wrap;
}
.decomp-atom__meta,
.decomp-atom__supports {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary, #999);
}
.decomp-atom__supports {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.decomp-atom__supports > span {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.decomp-ref {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    background: var(--surface-muted, #f3f4f6);
    color: var(--text-secondary, #444);
    padding: 1px 6px;
    border-radius: 4px;
}
.decomp-ref--uuid { color: var(--color-blue-600, #2563eb); }

/* Constraint enforceability detail (enforcement_mode / scope / violation_action) */
.decomp-atom__enforce {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--surface-muted, #f9fafb);
    font-size: var(--font-size-xs);
}
.decomp-atom__enforce dt {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary, #999);
    white-space: nowrap;
}
.decomp-atom__enforce dd {
    margin: 0;
    color: var(--text-secondary, #444);
    line-height: 1.4;
}

/* Condition expression state indicator */
.decomp-atom__expr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    font-family: var(--font-family-mono);
}
.decomp-atom__expr-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary, #999);
}
.decomp-atom__expr-value {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--surface-muted, #f3f4f6);
    color: var(--text-secondary, #444);
}
.decomp-atom__expr--set    .decomp-atom__expr-value { background: rgba(22,163,74,0.12); color: var(--color-green-700, #15803d); }
.decomp-atom__expr--needed .decomp-atom__expr-value { background: rgba(184,134,11,0.12); color: var(--color-amber-700, #b8860b); }

.decomp-form {
    grid-column: 1 / -1;
    background: var(--surface-muted, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.decomp-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary, #666);
}
.decomp-form__field--inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.decomp-form__field--inline > span { min-width: 110px; }
.decomp-form__field input,
.decomp-form__field textarea,
.decomp-form__field select {
    flex: 1;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 4px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: var(--font-size-sm);
    background: var(--surface-raised, #fff);
    color: var(--text-primary, #222);
}
.decomp-form__supports {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0;
    max-height: 160px;
    overflow-y: auto;
}
.decomp-form__supports legend {
    padding: 0 4px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary, #666);
}
.decomp-form__pick {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-size: var(--font-size-xs);
    color: var(--text-secondary, #444);
}
.decomp-form__pick code { color: var(--text-primary, #222); }
.decomp-form__pick span { color: var(--text-tertiary, #999); }
.decomp-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* Story Builder Component Classes */
.story-builder-empty {
    /* NAME: StoryBuilderContainer */
    /* PURPOSE: Main container for story builder content */
    text-align: center;
    padding-top: 64px;
}

/* Branch button styles moved to FlowRendererStyles.css */

.empty-story-state {
    /* NAME: ErrorMessage */
    /* PURPOSE: Error message styling for story builder */
    background: var(--color-error-bg, #f8d7da);
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 1rem;
    color: var(--color-error, #721c24);
    text-align: center;
    margin: 1rem 0;
}



/* Panel - now renders inside mega menu */
.mega-menu-content {
    width: 100%;
    background: transparent;
}

.doc-page {
    background: var(--bg-raised);
    border-radius: var(--border-radius-xl);
    padding: 32px 46px;
    margin: 0 40px 0 0;
}

.panel-content {
    padding: 0;
}

/* Document content layout (mega menu body) */
.mega-menu-title {
    margin: 0 0 1em 0;
    padding: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    cursor: default;
}

.mega-menu-title[contenteditable] {
    cursor: text;
    outline: none;
}

.mega-menu-title[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

.doc-content {
    padding: 0;
    margin-bottom: 32px;
}

.doc-section-label {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
}

.doc-section-label:first-child {
    padding-top: 0;
}

.doc-editable {
    cursor: text;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.15s;
}

.doc-editable:hover {
    background-color: var(--bg-raised-hover);
}

.doc-editable-text {
    cursor: text;
    outline: none;
    border-radius: var(--border-radius-sm);
    padding: 0 2px;
}

.doc-editable-text:focus {
    background-color: transparent;
}

.doc-editable-text[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

.doc-selected {
    background-color: var(--bg-lower);
}

/* Footer bar styles */
.footer-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.footer-more-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.footer-more-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.35rem;
    background: var(--bg-raised, white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: 10001;
    overflow: hidden;
    padding: 0.25rem 0;
    display: none;
}

.footer-more-dropdown.open {
    display: block;
}

.footer-more-item {
    width: 100%;
    padding: 0.6rem 1rem;
    background: none;
    border: none;
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

.footer-more-item:hover {
    background: var(--color-hover);
    color: var(--text-primary);
}

.footer-btn {
    padding: 0.25rem 0.75rem;
    font-size: 12px;
    border: none;
    background: var(--btn-bg, #eee);
    color: var(--text-secondary, #666);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-btn:hover {
    background: var(--btn-bg-hover, #ddd);
}

.footer-btn.active {
    background: var(--btn-bg-hover, #ddd);
    color: var(--text-primary, #333);
}

/* State-icon buttons (mini rectangles with fill indicators) */
.footer-state-btn {
    width: 16px;
    height: 12px;
    background: none;
    border: 1px solid var(--btn-border, #ccc);
    cursor: pointer;
    padding: 0;
    position: relative;
    border-radius: 0;
}

.footer-state-btn:hover {
    border-color: var(--btn-border-hover, #999);
}

/* Expand-half: bottom portion filled */
.footer-state-btn.expand-half::after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: 4px;
    background: var(--btn-border, #ccc);
}

.footer-state-btn.expand-half:hover::after {
    background: var(--btn-border-hover, #999);
}

/* Expand-full: fully filled */
.footer-state-btn.expand-full-btn::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    top: 2px;
    bottom: 2px;
    background: var(--btn-border, #ccc);
}

.footer-state-btn.expand-full-btn:hover::after {
    background: var(--btn-border-hover, #999);
}

/* Active state for state buttons */
body.menu-expanded .footer-state-btn.expand-half,
body.menu-full .footer-state-btn.expand-full-btn {
    border-color: var(--btn-border-active, #666);
    background: var(--btn-bg, #eee);
}

body.menu-expanded .footer-state-btn.expand-half::after,
body.menu-full .footer-state-btn.expand-full-btn::after {
    background: var(--btn-border-active, #666);
}

.footer-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    color: var(--text-muted, #999);
}

.footer-preview-item {
    white-space: nowrap;
    color: var(--text-secondary, #666);
}

.footer-preview-divider {
    color: var(--text-muted, #999);
}

.footer-spacer {
    flex: 1;
}

.footer-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.footer-btn--generate-topics {
    background: var(--bg-surface, #f5f5f5);
    border: var(--border-default);
    color: var(--text-secondary, #666);
    font-size: 11px;
    padding: 0.2rem 0.6rem;
    transition: background 0.15s, color 0.15s;
}

.footer-btn--generate-topics:hover {
    background: var(--btn-primary-bg, #4a9eff);
    color: var(--btn-primary-text, #fff);
    border-color: var(--btn-primary-bg, #4a9eff);
}

.footer-btn--generate-topics:disabled {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

.footer-btn--graph {
    background: var(--bg-surface, #f5f5f5);
    border: var(--border-default);
    color: var(--text-secondary, #666);
    font-size: 11px;
    padding: 0.2rem 0.6rem;
}

.footer-btn--graph:hover {
    background: var(--color-success, #22c55e);
    color: #fff;
    border-color: var(--color-success, #22c55e);
}

.footer-btn--graph:disabled {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

.footer-btn--delete {
    background: var(--bg-surface, #f5f5f5);
    border: var(--border-default);
    color: var(--text-tertiary, #999);
    font-size: 11px;
    padding: 0.2rem 0.6rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.footer-btn--delete:hover {
    background: var(--color-error, #ef4444);
    color: #fff;
    border-color: var(--color-error, #ef4444);
}

.footer-btn--delete:disabled {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

.footer-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
}

.footer-btn--mcp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-raised, #2a2a2a);
    border: 1px solid var(--border-color-light, #444);
    color: var(--text-secondary, #aaa);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.footer-btn--mcp:hover {
    background: var(--btn-primary-bg, #4a9eff);
    color: var(--btn-primary-text, #fff);
    border-color: var(--btn-primary-bg, #4a9eff);
}

.footer-btn--mcp svg {
    flex-shrink: 0;
}

.mcp-toast {
    position: fixed;
    bottom: 60px;
    right: 16px;
    background: var(--bg-raised, #2a2a2a);
    color: var(--text-primary, #eee);
    border: 1px solid var(--border-color-light, #444);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    z-index: 10000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    animation: mcp-toast-in 0.2s ease-out;
    max-width: 420px;
}

.mcp-toast code {
    display: block;
    margin: 6px 0;
    padding: 6px 8px;
    background: var(--bg-lower, #1a1a1a);
    border-radius: 4px;
    font-family: var(--font-family-mono);
    font-size: 12px;
    word-break: break-all;
    user-select: all;
}

.mcp-toast small {
    color: var(--text-muted, #888);
    font-size: 11px;
}

@keyframes mcp-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.goal-section {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.branch-section {
    padding: 0;
    margin-bottom: 0;
    border-top: var(--border-content-default);
}

.doc-branches {
    margin-top: 0.75rem;
}





.goal-input {
    /* NAME: BranchHeader */
    /* PURPOSE: Branch header styling */
    margin-bottom: 0.5rem;
}

/* Row groups for branch organization */
.row-group {
    margin-bottom: 0.75rem;
}

.row-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.25rem 0;
}

.row-header h3 {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.collapse-icon {
    font-size: 8px;
    color: var(--text-muted);
}

.row-group.collapsed .row-content {
    display: none;
}

/* Step row — 4-column grid: num | content | details | margin */
.doc-step-row {
    display: grid;
    grid-template-columns: 1.25rem 1fr 1fr 4rem;
    column-gap: 0.75rem;
}

/* Row number column */
.doc-step-num {
    padding: 0.75rem 0;
}

.doc-step-id {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

/* Body — spans columns 2-4 via subgrid, carries border on step rows */
.doc-step-body {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: subgrid;
}

.doc-step-row:not(.doc-branch-row) > .doc-step-body {
    border-top: var(--border-content-default);
}

/* Column wrappers — vertical padding replaces .doc-step-cell */
.doc-step-content {
    min-width: 0;
    padding: 0.75rem 0;
}

.doc-step-details {
    min-width: 0;
    overflow: hidden;
    padding: 0 1rem 0 0;
}

.doc-step-margin {
    padding: 0.75rem 0;
    text-align: right;
}

/* Header (title + goal) — same grid as step rows, spans num + content columns */
.doc-header {
    display: grid;
    grid-template-columns: 1.25rem 1fr 1fr 4rem;
    column-gap: 0.75rem;
    margin-bottom: 24px;
}

.doc-header > * {
    grid-column: 1 / 3;
}

/* Label inside content cell. Branch names override this via .doc-heading,
   which sets its own font-size-base; step labels use the smaller body size. */
.doc-step-label {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.5;
}

.doc-step-details-btn {
    opacity: 1;
}

.doc-task-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Label/value rows in the details column */
.doc-detail-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.75rem 0;
}

/* Separator above every row except the first one in the details panel.
   Using the general-sibling combinator avoids the brittleness of
   :first-child, which broke when non-row elements (nested link, source,
   notes) preceded the rows. */
.doc-detail-row ~ .doc-detail-row {
    border-top: var(--border-content-default);
}

.doc-detail-label {
    flex-shrink: 0;
    width: 5.75rem;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

.doc-detail-value {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.doc-detail-list {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Source citation */
.doc-source {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.doc-source-icon {
    flex-shrink: 0;
}

/* Nested story link */

/* Toggle Button Positioning */
.story-details-toggle {
    /* NAME: ToggleButton */
    /* PURPOSE: Fixed positioning for panel toggle button */
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Back to Parent Button */
.back-to-parent-button {
    position: fixed;
    left: 20px;
    top: 80px;
    z-index: 1001;
    text-decoration: none;
    color: var(--text-secondary);
}

.back-to-parent-button:hover {
    color: var(--text-primary);
}

/* Selection styles moved to FlowRendererStyles.css */

/* Inline edit form */
.doc-inline-edit-form {
    display: flex;
    align-items: center;
}

.doc-inline-prefix {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
}

.doc-inline-input {
    padding: 0.25rem 0.5rem;
    border: var(--border-default);
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-family: inherit;
    flex: 1;
    min-width: 120px;
}

.doc-inline-input:focus {
    outline: none;
    border-color: var(--text-muted);
}


/* Notes System Styles */

.doc-notes-section {
    padding: 0;
}

.doc-notes-content {
    display: block;
    padding: 0;
}

.doc-notes-add {
    padding: 0;
}

.doc-add-note-btn {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s;
}

.doc-step-row:hover .doc-add-note-btn,
.branch-section:hover > .doc-notes-section .doc-add-note-btn {
    opacity: 1;
}

.doc-note-item {
    position: relative;
    margin-top: 0.25rem;
    cursor: text;
}

.doc-note-content {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--text-primary);
}

.doc-note-type {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: var(--border-radius-sm);
    background: var(--bg-lower);
    color: var(--text-primary);
}

.note-meta {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.doc-note-item:hover .note-meta {
    opacity: 1;
}

/* Note Form Styles */
.add-note-form {
    margin: 0.5rem 0;
    padding: 12px;
    background: var(--bg-lower);
    border-radius: var(--border-radius-sm);
    border: var(--border-default);
}

.note-content-field {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: var(--border-default);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background: transparent;
    resize: vertical;
    font-family: inherit;
}

.note-content-field:focus {
    outline: none;
    border-color: var(--text-muted);
}

.note-type-field,
.note-color-field {
    padding: 4px 8px;
    border: var(--border-default);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background: transparent;
}

.form-group {
    margin-bottom: 0.75rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start;
    margin-top: 1rem;
}

/* Modal styles moved to main.css for global use */ 

/* v0.6 Step Edit Form Styles */
.step-edit-field {
    margin-bottom: 0.5rem;
}

.step-edit-field label {
    display: block;
    font-weight: var(--font-weight-bold);
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.step-actor-select,
.step-location-select {
    width: 100%;
    padding: 0.375rem;
    border: var(--border-default);
    border-radius: 2px;
    font-size: 13px;
    background: transparent;
    color: var(--text-primary);
}

.step-actor-select:focus,
.step-location-select:focus {
    outline: none;
    border-color: var(--btn-border-hover);
}

.step-actor-select option[value="__add_new__"],
.step-location-select option[value="__add_new__"] {
    font-style: italic;
    color: var(--text-secondary);
}

/* Decision Point Checkbox */
.step-decision-field {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: var(--border-default);
}

.step-decision-checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: var(--btn-border-active);
}

.checkbox-text {
    font-size: 13px;
    color: var(--text-secondary);
}

.checkbox-hint {
    font-size: var(--font-size-sm);
    color: var(--grey-light);
    font-style: italic;
}

/* Compact v0.6 Step Edit Form Styles (Panel) */
.step-edit-field-compact {
    display: inline-block;
    margin: 0 0.25rem;
}

.step-actor-select-compact,
.step-location-select-compact {
    padding: 0.25rem;
    border: var(--sage-border);
    border-radius: 0.25rem;
    font-size: var(--text-small);
    background: var(--bg-raised);
    color: var(--text-primary);
    min-width: 80px;
}

.step-actor-select-compact:focus,
.step-location-select-compact:focus {
    outline: none;
    border-color: var(--blue-border);
    box-shadow: 0 0 0 1px var(--blue-subtle);
}

.step-actor-select-compact option[value="__add_new__"],
.step-location-select-compact option[value="__add_new__"] {
    font-style: italic;
    color: var(--blue-text);
}

.step-location-display-compact {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: var(--text-small);
    background: var(--bg-muted);
    border: var(--sage-border);
    border-radius: 0.25rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Full diagram form styles */
.step-location-display {
    padding: 0.5rem 0.75rem;
    background: var(--bg-muted);
    border: var(--sage-border);
    border-radius: 0.25rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 0.25rem;
}

.step-location-note {
    color: var(--text-muted);
    font-size: var(--text-small);
    font-style: italic;
}

/* Branch edit form styles */
.branch-system-select {
    padding: 0.5rem;
    border: var(--sage-border);
    border-radius: 0.25rem;
    font-size: var(--text-base);
    background: var(--bg-raised);
    color: var(--text-primary);
    min-width: 200px;
    margin-bottom: 0.5rem;
}

.branch-system-select:focus {
    outline: none;
    border-color: var(--blue-border);
    box-shadow: 0 0 0 1px var(--blue-subtle);
}

.branch-system-select option[value="__add_new__"] {
    font-style: italic;
    color: var(--blue-text);
}