* { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── APP LOADER ──────────────────────────────────────────── */
.app-loader {
    position: fixed;
    inset: 0;
    z-index: var(--z-loader, 99999);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--warm-white, #F5F6F8);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
body.dark-mode .app-loader {
    background: var(--warm-white, #0F0F12);
}
.app-loader.fade-out {
    opacity: 0;
    visibility: hidden;
}
.app-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.app-loader-logo {
    width: 64px;
    height: 64px;
    animation: loaderPulse 1.8s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(13, 92, 107, 0.2));
}
@keyframes loaderPulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.08); opacity: 1; }
}
.app-loader-dots {
    display: flex;
    gap: 0.4rem;
}
.app-loader-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary, #0D5C6B);
    animation: loaderBounce 1.2s ease-in-out infinite;
}
.app-loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.app-loader-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes loaderBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
    40%           { transform: scale(1); opacity: 1; }
}

/* Scrollbar styling — prevent white flash in dark mode */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--slate); }
html, body {
    overflow-x: hidden;
    width: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, var(--cream) 0%, var(--warm-white) 100%);
    color: var(--charcoal);
    line-height: 1.6;
    min-height: 100vh;
}

/* ─── LAYOUT ──────────────────────────────── */
.app-layout {
    display: flex;
    min-height: 100vh;
    background-color: var(--canvas-bg, #F0F2F5);
}

/* ─── TOOL RAIL (Miro-style toolbar) ─── */
.tool-rail-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-bottom: 18px;
    flex-shrink: 0;
    overflow: hidden;
    transition: transform 0.15s ease;
}
.tool-rail-logo:hover {
    transform: scale(1.08);
}
.tool-rail-logo svg {
    width: 36px;
    height: 36px;
}
.tool-rail-logo .tool-rail-tooltip {
    display: none;
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--tool-color, var(--charcoal));
    color: var(--on-brand);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 200;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.tool-rail-logo .tool-rail-tooltip::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid var(--tool-color, #1E2030);
}
.tool-rail-logo:hover .tool-rail-tooltip {
    display: block;
}

.tool-rail {
    width: 56px;
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0;
    gap: 2px;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 150;
    flex-shrink: 0;
    border-right: 1px solid var(--border-light);
    box-shadow: 2px 0 8px var(--shadow-sm);
}
.tool-rail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--topbar-bg, var(--bg-surface));
    z-index: -1;
}
.tool-rail::after {
    content: '';
    position: absolute;
    top: 63px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-light);
    z-index: 1;
}

.tool-rail-item {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    background: transparent;
    color: var(--slate);
    border: none;
    position: relative;
}
.tool-rail-item .tool-rail-icon {
    width: 24px;
    height: 24px;
    display: block;
}
.tool-rail-item[data-tool="narrative-action-cycle"] .tool-rail-icon {
    width: 28px;
    height: 28px;
}
/* Per-tool color identity — references base palette so themes cascade */
/* Tool rail colors — no two adjacent tools share a color */
.tool-rail-item[data-tool="intake"] { --tool-color: var(--green); }
.tool-rail-item[data-tool="intake"] .tool-rail-icon { transform: translateX(2.5px); }
.tool-rail-item[data-tool="recommendations"] { --tool-color: var(--green); }
.tool-rail-item[data-tool="recommendations"] .tool-rail-icon { transform: translateX(2px); }
.tool-rail-item[data-tool="narrative-arc"] { --tool-color: var(--rose); }
.tool-rail-item[data-tool="narrative-action-cycle"] { --tool-color: var(--violet); }
.tool-rail-item[data-tool="toolkit"] { --tool-color: var(--gamboge); }
.tool-rail-item[data-tool="clarity-sort"] { --tool-color: var(--primary); }
.tool-rail-item[data-tool="narrative-expansion"] { --tool-color: var(--ultraviolet); }
.tool-rail-item[data-tool="structure-map"] { --tool-color: var(--green); }
.tool-rail-item[data-tool="script-editor"] { --tool-color: var(--primary); }
.tool-rail-item[data-tool="present"] { --tool-color: var(--gamboge); }

.tool-rail-item:hover {
    background: color-mix(in srgb, var(--tool-color) 10%, transparent);
    color: var(--tool-color);
}
body.dark-mode .tool-rail-item:hover {
    background: color-mix(in srgb, var(--tool-color) 30%, transparent);
    color: var(--tool-color);
}
.tool-rail-item.active {
    background: color-mix(in srgb, var(--tool-color) 10%, transparent);
    color: var(--tool-color);
}
body.dark-mode .tool-rail-item.active {
    background: color-mix(in srgb, var(--tool-color) 30%, transparent);
    color: var(--tool-color);
}
.tool-rail-item.disabled {
    opacity: 0.32;
    cursor: not-allowed;
}
.tool-rail-item.disabled:hover {
    background: transparent;
    color: var(--slate);
}

/* Active indicator pip */
.tool-rail-item.active::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--tool-color, var(--primary));
    border-radius: 0 3px 3px 0;
}

/* Hotkey number badge */
.tool-rail-item .tool-rail-hotkey {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    color: var(--slate);
    opacity: 0.45;
    pointer-events: none;
    z-index: 2;
}
.tool-rail-item:hover .tool-rail-hotkey,
.tool-rail-item.active .tool-rail-hotkey {
    color: var(--tool-color, var(--primary));
    opacity: 0.7;
}

/* Completion checkmark badge */
.tool-rail-item .tool-complete-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tool-color, var(--green));
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.tool-rail-item .tool-complete-badge svg {
    width: 8px;
    height: 8px;
    stroke: var(--on-brand);
    stroke-width: 2.5;
    fill: none;
}

/* ─── Journey Hub Banner (on My Journey page) ─── */
.journey-hub-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    background: color-mix(in srgb, var(--green) 8%, var(--off-white));
    border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
    border-radius: 10px;
    margin-bottom: 1rem;
}
.journey-hub-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--green) 15%, transparent);
    border-radius: 50%;
    margin-top: 1px;
}
.journey-hub-text {
    font-size: 0.78rem;
    color: var(--charcoal);
    line-height: 1.55;
}
.journey-hub-text strong {
    color: var(--green);
}

/* ─── Next Step button on Journey page ─── */
.journey-next-step-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.journey-next-step-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.6rem;
    background: var(--primary);
    color: var(--on-brand);
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 2px 10px var(--shadow-primary);
}
.journey-next-step-btn:hover { background: var(--primary-mid); }
.journey-next-step-btn:active { transform: scale(0.97); }

/* ─── Return to My Journey button ─── */
.return-to-journey-bar {
    display: flex;
    justify-content: center;
    padding: 1.25rem 1rem 2rem;
}
.return-to-journey-bar.return-bar-complete {
    padding: 1rem 1rem 2rem;
}
.return-bar-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.return-bar-message {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--green);
    text-align: center;
}
.return-to-journey-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.4rem;
    background: var(--green);
    color: var(--on-brand);
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.return-bar-complete .return-to-journey-btn {
    padding: 0.65rem 1.8rem;
    font-size: 0.88rem;
    animation: journeyBtnPulse 2s ease-in-out 1;
}
@keyframes journeyBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 40%, transparent); }
    50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--green) 0%, transparent); }
}
.return-to-journey-btn:hover { background: color-mix(in srgb, var(--green) 85%, #000); }
.return-to-journey-btn:active { transform: scale(0.97); }
.return-to-journey-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Separator line */
.tool-rail-separator {
    width: 32px;
    height: 1px;
    background: var(--border-light);
    border-radius: 1px;
    margin: 6px 0;
}

/* Tooltip */
.tool-rail-item .tool-rail-tooltip {
    display: none;
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--tool-color, #1E2030);
    color: var(--on-brand);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 200;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
/* Left-pointing arrow on tooltip */
.tool-rail-item .tool-rail-tooltip::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid var(--tool-color, #1E2030);
}
.tool-rail-item .tool-rail-tooltip .tool-rail-soon {
    display: block;
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--on-brand-muted, rgba(255,255,255,0.7));
    margin-top: 2px;
}
.tool-rail-item:hover .tool-rail-tooltip {
    display: block;
}

.sidebar {
    width: 280px;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 56px;
    height: 100vh;
    z-index: 100;
    overflow: visible;
}

.sidebar-header {
    min-height: 64px;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--topbar-bg, var(--bg-surface));
    flex-shrink: 0;
}

.sidebar-app-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-top: 0;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow: hidden;
}
.sidebar-app-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sidebar-section-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--charcoal);
    padding: 0.85rem 1rem 0rem;
    flex-shrink: 0;
}

.beta-badge {
    display: inline-block;
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: var(--subpoint-color);
    color: var(--on-brand);
    padding: 0.18rem 0.5rem;
    border-radius: 20px;
    vertical-align: middle;
    line-height: 1;
    margin-left: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-y: overlay;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 2px; }

/* Node-details header shown at the top of the left panel when a node is selected */
.sidebar-node-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
    flex-shrink: 0;
    background: var(--bg-surface);
    position: sticky;
    top: 0;
    z-index: 2;
}
.sidebar-node-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--charcoal);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-node-back {
    font-size: 0.65rem;
    color: var(--slate);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    background: var(--bg-surface);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.15s;
}
.sidebar-node-back:hover { border-color: var(--primary); color: var(--primary); }
.sidebar-details-body { padding: 1rem 1.25rem; }

.sidebar-section { margin-bottom: 1.5rem; }

.sidebar-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--charcoal);
    opacity: 0.5;
    padding: 0 1.25rem;
    margin-bottom: 0.5rem;
}

.sidebar-info-block {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-lighter);
}

.sidebar-info-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate);
    margin-bottom: 0.25rem;
    font-family: 'Montserrat', sans-serif;
}

.sidebar-info-value {
    font-size: 0.8rem;
    color: var(--charcoal);
    line-height: 1.4;
    font-weight: 500;
}

.sidebar-edit-link {
    font-size: 0.65rem;
    color: var(--primary);
    cursor: pointer;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    float: right;
}

.sidebar-edit-link:hover { text-decoration: underline; }

.sidebar-action-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--charcoal);
}

.sidebar-action-btn:hover { background: var(--cream); }

.sidebar-action-icon {
    width: 28px; height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    background: var(--primary-tint-md);
    color: var(--primary);
}

/* Accordion header for sidebar sections */
.sidebar-accordion-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.sidebar-accordion-header:hover { opacity: 0.8; }
.accordion-chevron {
    margin-left: auto;
    margin-right: 1.25rem;
    font-size: 0.55rem;
    transition: transform 0.2s ease;
}
.accordion-chevron.collapsed { transform: rotate(-90deg); }

/* Coaching guide tiles in the sidebar narrative info view */
.coaching-guides-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.coaching-guide-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--bg-surface);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.coaching-guide-item.disabled {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
}

.coaching-guide-item:not(.disabled):hover {
    background: var(--primary-tint-sm);
    border-color: var(--primary-light);
}

.coaching-guide-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}

.coaching-guide-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--charcoal);
    font-family: 'Montserrat', sans-serif;
    line-height: 1.2;
}

.coaching-guide-desc {
    font-size: 0.62rem;
    color: var(--slate);
    line-height: 1.3;
    margin-top: 0.1rem;
}

.coaching-guide-soon {
    margin-left: auto;
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: var(--border-medium);
    color: var(--slate);
    padding: 0.15rem 0.4rem;
    border-radius: 20px;
    flex-shrink: 0;
}

/* ─── MAIN AREA ──────────────────────────────── */
.main-area {
    flex: 1;
    margin-left: 336px;
    margin-right: 340px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 64px;
    position: relative;
    background-color: var(--canvas-bg, #F0F2F5);
}

.script-view-active.main-area {
    padding-top: 64px;
}

/* ─── GRAPH AREA ──────────────────────────────── */
.graph-area {
    position: relative;
    flex: 1;
    min-height: 100vh;
    overflow: hidden;
    touch-action: none;
    background-color: var(--canvas-bg, #F0F2F5);
    background-image: radial-gradient(circle, var(--canvas-dot, #D5DAE0) 0.8px, transparent 0.8px);
    background-size: 20px 20px;
}

#graphSvg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

#nodesContainer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
}

#graphWorld {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform-origin: center center;
}

.zoom-controls {
    position: absolute;
    top: 56px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 20;
}

.zoom-btn, .canvas-fullscreen-btn {
    height: 36px;
    min-width: 36px;
    border-radius: 18px;
    border: 1.5px solid var(--border-medium);
    background: var(--bg-surface);
    color: var(--charcoal);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 2px 8px var(--shadow-md);
    transition: min-width 0.25s ease, gap 0.25s ease, background 0.15s, border-color 0.15s, color 0.15s;
}
.zoom-btn { font-size: 18px; font-weight: 700; }
.canvas-fullscreen-btn { font-size: 15px; margin-top: 2px; }

.zoom-btn .fab-icon, .canvas-fullscreen-btn .fab-icon {
    flex-shrink: 0;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zoom-btn .fab-label, .canvas-fullscreen-btn .fab-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    padding-right: 0;
}
.zoom-controls:hover .fab-label {
    max-width: 7rem;
    opacity: 1;
    padding-right: 0.7rem;
}

.zoom-btn:hover, .canvas-fullscreen-btn:hover {
    background: var(--primary-lightest);
    border-color: var(--primary-light);
    color: var(--primary);
}

/* ─── Collapsible sidebar / right panel ──────── */
/* Legacy class kept for any remaining references */
.panel-collapse-btn { display: none !important; }

/* Triangle toggles sitting on the panel border edge */
.panel-border-toggle {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 20px;
    height: 40px;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--slate);
    z-index: 110;
    transition: color 0.15s, background 0.15s;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0;
}
.panel-border-toggle:hover {
    color: var(--primary);
    background: var(--bg-surface);
}
/* Left sidebar: triangle on right edge */
.panel-border-toggle-sidebar {
    right: -1px;
    border-radius: 0 5px 5px 0;
    border-left: none;
    transform: translateY(-50%) translateX(100%);
}
/* Right panel: triangle on left edge */
.panel-border-toggle-right {
    left: -1px;
    border-radius: 5px 0 0 5px;
    border-right: none;
    transform: translateY(-50%) translateX(-100%);
}

/* Expand tabs shown when panels are collapsed (same style, fixed position) */
.panel-expand-tab {
    position: fixed;
    top: 42%;
    transform: translateY(-50%);
    width: 20px;
    height: 40px;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--slate);
    z-index: 150;
    transition: color 0.15s, background 0.15s;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0;
}
.panel-expand-tab:hover {
    color: var(--primary);
    background: var(--bg-surface);
}
.panel-expand-tab-left {
    left: 56px;
    border-radius: 0 5px 5px 0;
    border-left: none;
}
.panel-expand-tab-right {
    right: 0;
    border-radius: 5px 0 0 5px;
    border-right: none;
}

body.sidebar-collapsed .sidebar { display: none !important; }
body.sidebar-collapsed .main-area { margin-left: 56px !important; }
body.sidebar-collapsed .view-toggle-bar { left: 56px !important; }

body.right-panel-collapsed .right-panel { display: none !important; }
body.right-panel-collapsed .panel-pull-tab { display: none !important; }
body.right-panel-collapsed .main-area { margin-right: 0 !important; }
body.right-panel-collapsed .view-toggle-bar { right: 0 !important; }

/* Hide expand tabs and border toggles during fullscreen and intake modes */
body.canvas-fullscreen .panel-expand-tab, body.canvas-fullscreen .panel-border-toggle { display: none !important; }
body.intake-fullscreen .panel-expand-tab, body.intake-fullscreen .panel-border-toggle { display: none !important; }
@media (max-width: 1024px) { .panel-expand-tab { display: none !important; } .panel-border-toggle { display: none !important; } }

/* Canvas fullscreen mode */
body.canvas-fullscreen .tool-rail { display: none !important; }
body.canvas-fullscreen .sidebar { display: none !important; }
body.canvas-fullscreen .right-panel { display: none !important; }
body.canvas-fullscreen .panel-pull-tab { display: none !important; }
body.canvas-fullscreen .mobile-header { display: none !important; }
body.canvas-fullscreen .main-area {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Walkthrough-style intake: hide everything but the main area */
body.intake-fullscreen .tool-rail { display: none !important; }
body.intake-fullscreen .sidebar { display: none !important; }
body.intake-fullscreen .view-toggle-bar { display: none !important; }
body.intake-fullscreen .mobile-bottom-bar { display: none !important; }
body.intake-fullscreen .mobile-header { display: none !important; }
body.intake-fullscreen .main-area {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
}
/* Intake completion: sidebar reveal animation */
@keyframes sidebarSlideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes intakeFieldReveal {
    0%   { opacity: 0; transform: translateY(10px); background: transparent; }
    30%  { opacity: 1; transform: translateY(0); background: rgba(5,150,105,0.13); }
    100% { opacity: 1; transform: translateY(0); background: transparent; }
}
body.intake-reveal .sidebar {
    display: flex !important;
    animation: sidebarSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.intake-reveal .tool-rail {
    display: flex !important;
}
body.intake-reveal .sidebar-info-block {
    opacity: 0;
    border-radius: 6px;
    animation: intakeFieldReveal 0.8s ease forwards;
}
body.intake-reveal .sidebar-info-block:nth-child(1) { animation-delay: 0.4s; }
body.intake-reveal .sidebar-info-block:nth-child(2) { animation-delay: 0.55s; }
body.intake-reveal .sidebar-info-block:nth-child(3) { animation-delay: 0.7s; }
body.intake-reveal .sidebar-info-block:nth-child(4) { animation-delay: 0.85s; }
body.intake-reveal .sidebar-info-block:nth-child(5) { animation-delay: 1.0s; }
body.intake-reveal .sidebar-info-block:nth-child(6) { animation-delay: 1.15s; }
body.intake-reveal .sidebar-info-block:nth-child(7) { animation-delay: 1.3s; }



body.canvas-fullscreen .view-toggle-bar {
    left: 0 !important;
    right: 0 !important;
    align-items: center;
    padding: 0 12px;
}

/* Fullscreen branding — logo + title on top-left, page header shifts right */
.fullscreen-brand {
    display: none;
}
body.canvas-fullscreen .fullscreen-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 1.25rem;
    margin-right: 1.25rem;
    border-right: 1px solid var(--border-light);
    flex-shrink: 0;
}
.fullscreen-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.fullscreen-brand-logo:hover {
    transform: scale(1.08);
}
.fullscreen-brand-logo svg {
    width: 32px;
    height: 32px;
}
.fullscreen-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.fullscreen-brand-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--charcoal);
    white-space: nowrap;
    line-height: 1.3;
}
.fullscreen-brand-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 300;
    color: var(--slate);
    white-space: nowrap;
}
body.canvas-fullscreen .top-bar-page-title {
    top: 0;
    margin-left: 0;
}
body.canvas-fullscreen .canvas-fullscreen-btn {
    background: var(--primary);
    color: var(--on-brand);
    border-color: var(--primary);
}
body.canvas-fullscreen .floating-fullscreen-btn {
    right: 16px !important;
    background: var(--primary);
    color: var(--on-brand);
    border-color: var(--primary);
}
body.canvas-fullscreen .panel-expand-tab { display: none !important; }
body.canvas-fullscreen .panel-border-toggle { display: none !important; }

/* Floating fullscreen button — bottom-right of canvas */
.floating-fullscreen-btn {
    position: fixed;
    bottom: 16px;
    right: 356px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--slate);
    z-index: 90;
    transition: all 0.15s;
}
.floating-fullscreen-btn:hover {
    background: var(--charcoal);
    color: var(--on-brand);
    border-color: var(--charcoal);
}
.floating-fullscreen-btn .i { width: 16px; height: 16px; }
.floating-tidy-btn {
    position: fixed;
    bottom: 16px;
    right: 400px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 12px;
    cursor: pointer;
    color: var(--slate);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 90;
    transition: all 0.15s;
}
.floating-tidy-btn:hover {
    background: var(--charcoal);
    color: var(--on-brand);
    border-color: var(--charcoal);
}
.floating-tidy-btn .i { width: 14px; height: 14px; }
body.canvas-fullscreen .floating-tidy-btn { right: 60px; }
body.intake-fullscreen .floating-fullscreen-btn, body.intake-fullscreen .floating-tidy-btn { display: none !important; }
@media (max-width: 1024px) { .floating-fullscreen-btn, .floating-tidy-btn { display: none !important; } }

.graph-area { cursor: grab; }
.graph-area.is-panning { cursor: grabbing !important; }
.graph-area .graph-node { cursor: pointer; }

/* Quick add bar */
.quick-add-bar {
    position: absolute;
    top: 56px;
    right: 56px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 0.4rem 0.75rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    box-shadow: 0 4px 16px var(--shadow-md);
    z-index: 51;
    min-width: 300px;
    height: 36px;
    box-sizing: border-box;
}

.quick-add-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--charcoal);
    background: transparent;
}
.quick-add-bar input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.quick-add-btn {
    padding: 0.4rem 0.8rem;
    background: var(--primary);
    color: var(--on-brand);
    border: none;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
}

.quick-add-btn:hover { background: var(--primary-mid); }

.quick-add-cancel {
    font-size: 0.8rem;
    color: var(--slate);
    cursor: pointer;
    padding: 0 0.25rem;
}

.quick-add-cancel:hover { color: var(--charcoal); }

/* Link mode hint */
.link-mode-hint {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pillar-color);
    color: var(--on-brand);
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--pillar-color) 30%, transparent);
}

.link-cancel-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.75rem;
    font-family: 'Montserrat', sans-serif;
}

/* Canvas brand logo (above FAB) */
.canvas-brand {
    position: absolute;
    top: 60px;
    right: 1.5rem;
    z-index: 10;
    display: block;
    width: 48px;
}
.canvas-brand img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.82;
    filter: drop-shadow(0 1px 3px var(--shadow-md));
    transition: opacity 0.15s;
}
.canvas-brand:hover img { opacity: 1; }

/* Add idea floating button */
/* ── FAB control group ── */
.fab-controls {
    position: absolute;
    top: 56px;
    right: 1rem;
    z-index: 51;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* ── Shared FAB pill-expand behaviour ── */
.fab-add, .fab-group, .fab-filter {
    position: relative;
    right: auto;
    top: auto;
    height: 36px;
    min-width: 36px;
    border-radius: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: min-width 0.25s ease, gap 0.25s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    z-index: 51;
}
.fab-add .fab-icon, .fab-group .fab-icon, .fab-filter .fab-icon {
    flex-shrink: 0;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fab-add .fab-label, .fab-group .fab-label, .fab-filter .fab-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    padding-right: 0;
}
.fab-controls:hover .fab-label {
    max-width: 7rem;
    opacity: 1;
    padding-right: 0.7rem;
}

/* ── Add button ── */
.fab-add {
    background: var(--primary);
    color: var(--on-brand);
    border: 1.5px solid var(--primary);
    font-size: 1.25rem;
    box-shadow: 0 4px 16px var(--shadow-primary);
}
.fab-add:hover { background: var(--primary-mid); }
.fab-add.active { background: var(--slate); }

/* ── Group button ── */
.fab-group {
    background: var(--bg-surface);
    color: var(--charcoal);
    border: 1.5px solid var(--border-medium);
    font-size: 1.1rem;
    box-shadow: 0 2px 8px var(--shadow-sm);
}
.fab-group:hover { border-color: var(--primary); color: var(--primary); }

/* ── Filter button ── */
.fab-filter {
    background: var(--bg-surface);
    color: var(--charcoal);
    border: 1.5px solid var(--border-medium);
    font-size: 1rem;
    box-shadow: 0 2px 8px var(--shadow-sm);
}
.fab-filter:hover { border-color: var(--primary); color: var(--primary); }
.fab-filter.active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-brand);
}

.level-filter-menu {
    position: absolute;
    top: 136px;
    right: calc(1rem + 44px);
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    padding: 0.5rem 0;
    box-shadow: 0 6px 24px var(--shadow-md);
    z-index: 52;
    min-width: 180px;
    display: none;
}
.level-filter-menu.open {
    display: block;
}
.level-filter-menu .filter-menu-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    padding: 0.35rem 0.85rem 0.35rem;
}
.level-filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.85rem;
    color: var(--charcoal);
    user-select: none;
}
.level-filter-item:hover {
    background: var(--bg-hover);
}
.level-filter-item input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--primary);
    cursor: pointer;
    margin: 0;
}
.level-filter-item .filter-color-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ─── SCRIPT VIEW TOGGLE ──────────────────────────────── */
.view-toggle-bar {
    position: fixed;
    top: 0;
    left: 336px;
    right: 340px;
    height: 64px;
    background: var(--topbar-bg, var(--bg-surface));
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 1px 4px var(--shadow-xs);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.5rem;
    z-index: 100;
    padding: 0 12px 0.35rem;
}
.top-bar-page-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 1rem;
    position: relative;
    top: -3px;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.top-bar-page-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-bar-page-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.view-toggle-btn {
    padding: 0.4rem 1rem;
    border: 1.5px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--charcoal);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.view-toggle-btn .btn-icon {
    margin-right: 0.3em;
    font-style: normal;
}

.view-toggle-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.view-toggle-btn.active {
    background: var(--primary);
    color: var(--on-brand);
    border-color: var(--primary);
}

.actions-dropdown {
    position: relative;
}

.actions-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 4px 16px var(--shadow-lg);
    min-width: 260px;
    padding: 4px 0;
    z-index: 200;
}

.actions-dropdown-menu.open {
    display: block;
}

.actions-dropdown-menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    color: var(--charcoal);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.1s;
}

.actions-dropdown-menu button:hover {
    background: var(--primary-tint-sm);
    color: var(--primary);
}

.actions-dropdown-menu button.action-narratives {
    color: var(--primary);
    font-weight: 600;
}

.actions-dropdown-menu .action-icon {
    font-size: 0.85rem;
    width: 1.2rem;
    text-align: center;
    flex-shrink: 0;
}

.actions-dropdown-menu .action-format {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 3px;
    padding: 0.1em 0.35em;
    margin-left: 0.1rem;
}

.actions-dropdown-menu hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 4px 0;
}

.actions-section-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    padding: 0.4rem 1rem 0.2rem;
}

.coaching-action-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.coaching-action-item:disabled {
    opacity: 0.42;
}

.undo-btn, .redo-btn {
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--charcoal);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, opacity 0.15s;
    padding: 0;
    line-height: 1;
}

.undo-btn:hover:not(:disabled), .redo-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.undo-btn:disabled, .redo-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Reset standalone undo/redo styles when inside actions menu */
.actions-dropdown-menu .undo-btn,
.actions-dropdown-menu .redo-btn {
    width: 100%;
    height: auto;
    border: none;
    border-radius: 0;
    background: none;
    justify-content: flex-start;
}

/* ─── USER MENU ───────────────────────────────────────────── */
.user-menu-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--primary);
    color: var(--on-brand);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-sm);
}
.user-menu-btn:hover {
    background: var(--primary-hover, var(--primary));
    color: var(--on-brand);
    box-shadow: var(--shadow-md);
}
.user-menu-btn .i {
    width: 16px;
    height: 16px;
}
.user-initials {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}
.user-menu-email {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--slate);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}
.user-menu-dropdown .actions-dropdown-menu a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
}
.user-menu-dropdown .actions-dropdown-menu a:hover {
    background: var(--primary-tint-sm);
    color: var(--primary);
}

/* ─── A35: UTILITY CLASSES (extracted from inline styles) ─── */
.section-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: 'Montserrat', sans-serif;
}
.empty-state-text {
    font-size: 0.75rem;
    color: var(--slate);
    text-align: center;
    padding: 1rem;
}
.flex-row { display: flex; align-items: center; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.flex-col { display: flex; flex-direction: column; }
.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.35rem; }
.gap-md { gap: 0.5rem; }
.gap-lg { gap: 0.75rem; }
.gap-xl { gap: 1rem; }
.helper-text {
    font-size: 0.72rem;
    color: var(--slate);
    margin-top: 0.5rem;
}
.section-divider {
    margin-top: 1.5rem;
    border-top: 1px solid var(--border-light);
    padding-top: 1.25rem;
}
.interactive-card {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    background: var(--bg-surface);
    color: var(--charcoal);
}
.interactive-card:hover {
    border-color: var(--primary-light);
    background: var(--primary-tint-sm);
}
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* ─── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── SKIP LINK ──────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 999999;
}
.skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 8px 16px;
    background: var(--primary);
    color: var(--on-brand);
    border-radius: 4px;
    font-size: 0.875rem;
    text-decoration: none;
    z-index: 999999;
}