@font-face {
    font-family: 'GT Walsheim';
    src: url('fonts/GT-Walsheim-Regular.woff') format('woff'),
         url('fonts/GT-Walsheim-Regular.ttf') format('truetype'),
         url('fonts/GT-Walsheim-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

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

:root {
    --bg: #12103a;
    --bg-light: #1a1750;
    --text: #f5f5f5;
    --text-dim: #b8b5d0;
    --text-muted: #6e6a8a;
    --orange: #F15A22;
    --pink: #ED3694;
    --teal: #27BDBE;
    --yellow: #E4E517;
    --font: 'GT Walsheim', 'Space Grotesk', sans-serif;
    --mono: 'GT Walsheim', sans-serif;
}

html { font-size: 16px; overflow-x: hidden; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* App shell holds the full-height chat experience */
.app-shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* === HEADER === */
.header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.logo {
    height: 72px;
    width: auto;
    transition: filter 0.6s ease;
}
@media (max-width: 640px) {
    .logo { height: 48px; }
}

/* Logo shifts to exact brand colours per active stage.
   Brand palette: Orange #F15A22 · Pink #ED3694 · Teal #27BDBE · Yellow #E4E517 */
/* Logo stays orange — no colour shifting per stage */

/* === SESSION BAR (shown during active exercise) === */
.session-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    animation: fadeIn 0.2s ease;
}

.session-bar.hidden { display: none; }
.js-state { display: none; }

/* === STAGE COLOUR SYSTEM — applies everywhere when data-mode is set === */
/* CSS custom property for current stage colour — set via JS or cascade */
body[data-mode="reframe"]   { --stage-color: var(--orange); }
body[data-mode="ideate"]    { --stage-color: var(--pink); }
body[data-mode="debate"]    { --stage-color: var(--teal); }
body[data-mode="framework"] { --stage-color: var(--yellow); }
body[data-mode="routing"]   { --stage-color: var(--orange); }

/* Logo — swap wordmark per stage (JS sets src, no filters needed) */

/* Session bar bottom border */
body[data-mode] .session-bar { border-bottom-color: var(--stage-color); border-bottom-width: 2px; }

/* Session label exercise name */
body[data-mode] .session-label-exercise { color: var(--stage-color); }

/* Input field focus glow */
body[data-mode] .input-field:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-color) 12%, transparent); border-color: color-mix(in srgb, var(--stage-color) 40%, transparent); }

/* Send button */
body[data-mode] .send-btn { background: var(--stage-color); }

/* Report CTA button */
body[data-mode] .report-cta-btn { color: var(--stage-color); border-color: var(--stage-color); }

/* Board toggle active */
body[data-mode] .board-toggle.active { border-color: var(--stage-color); color: var(--stage-color); }

/* Help me / Challenge me hover */
body[data-mode] .chat-action-btn:hover { border-color: var(--stage-color); color: var(--stage-color); }
body[data-mode] .chat-action-btn.active { border-color: var(--stage-color); color: var(--stage-color); background: color-mix(in srgb, var(--stage-color) 10%, transparent); }

/* Progress bar fill */
body[data-mode] .progress-bar-fill { background: var(--stage-color); }

/* Session action buttons hover */
body[data-mode] .session-action-btn:hover { color: var(--stage-color); }

/* Pitch preview border */
body[data-mode] .pitch-preview { border-color: color-mix(in srgb, var(--stage-color) 20%, transparent); }

/* Board pane — stage colour border and header */
body[data-mode] .board-pane { border-left-color: var(--stage-color); }
body[data-mode] .board-title { color: var(--stage-color); }
body[data-mode] .board-grid-canvas,
body[data-mode] .board-grid-pitch,
body[data-mode] .board-grid-premortem,
body[data-mode] .board-grid-effectuation,
body[data-mode] .board-grid-default { border-color: color-mix(in srgb, var(--stage-color) 20%, transparent); }
body[data-mode] .zone-name { color: var(--stage-color); }
body[data-mode] .board-card { border-left-color: var(--stage-color); }
body[data-mode] .pitch-slot.filled { color: var(--stage-color); border-bottom-color: var(--stage-color); }
body[data-mode] .pitch-progress-dot.filled { background: var(--stage-color); border-color: var(--stage-color); }

/* Session label — replaces stage dots */
.session-label { display: none; } /* replaced by breadcrumb */

/* Session breadcrumb — STAGE → Tool */
.session-breadcrumb {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
}
.breadcrumb-stage {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stage-color, var(--orange));
}
.breadcrumb-arrow {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0 0.1rem;
}
.breadcrumb-tool {
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--stage-color, var(--orange));
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s;
}
.breadcrumb-tool:hover {
    background: rgba(255,255,255,0.06);
}
.breadcrumb-chevron {
    transition: transform 0.2s;
}
.breadcrumb-tool.open .breadcrumb-chevron {
    transform: rotate(180deg);
}

/* Dropdown */
.breadcrumb-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.5rem 0;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 200;
}
.breadcrumb-dropdown.hidden { display: none; }

.breadcrumb-dropdown-section {
    padding: 0.4rem 0.75rem 0.2rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.breadcrumb-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.45rem 0.75rem;
    font-family: var(--font);
    font-size: 0.8rem;
    color: var(--text-dim);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.breadcrumb-dropdown-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text);
}
.breadcrumb-dropdown-item.active {
    color: var(--stage-color, var(--orange));
    font-weight: 600;
}
.breadcrumb-toolbox-link {
    display: block;
    padding: 0.5rem 0.75rem 0.4rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-decoration: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 0.3rem;
    transition: color 0.15s;
}
.breadcrumb-toolbox-link:hover { color: var(--orange); }

/* Light theme */
html[data-theme="light"] .breadcrumb-dropdown { background: #fff; border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
html[data-theme="light"] .breadcrumb-dropdown-item:hover { background: rgba(0,0,0,0.04); }
html[data-theme="light"] .breadcrumb-toolbox-link { border-top-color: rgba(0,0,0,0.08); }
.mode-label {
    text-decoration: none;
    color: inherit;
}
.mode-label:hover { text-decoration: underline; }

.session-mode {
    font-family: var(--mono);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.session-sep {
    color: var(--text-muted);
    font-size: 1rem;
}

.session-exercise {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dim);
}

.session-close {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    font-size: 0.875rem;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    transition: all 0.2s;
    line-height: 1;
}

.session-close:hover {
    border-color: rgba(255,255,255,0.3);
    color: var(--text);
}

/* === PHASE INDICATOR (session bar) === */

.phase-indicator {
    font-size: 0.65rem;
    font-weight: 600;
    font-family: var(--font);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 0.5rem;
    transition: all 0.4s ease;
    white-space: nowrap;
}
.phase-indicator:empty { display: none; }
.phase-diverge {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.15);
    animation: phasePulse 2s ease-in-out;
}
.phase-converge {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.25);
    animation: phasePulse 2s ease-in-out;
}
@keyframes phasePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
html[data-theme="light"] .phase-diverge {
    background: rgba(30,25,79,0.05);
    color: rgba(30,25,79,0.6);
    border-color: rgba(30,25,79,0.12);
}
html[data-theme="light"] .phase-converge {
    background: rgba(30,25,79,0.08);
    color: rgba(30,25,79,0.8);
    border-color: rgba(30,25,79,0.2);
}

/* === PROGRESS INDICATOR (session bar) === */

.progress-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 0.5rem;
    font-family: var(--font);
}
.progress-count {
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.progress-bar-track {
    width: 40px;
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: var(--orange);
    border-radius: 2px;
    transition: width 0.4s ease;
}
html[data-theme="light"] .progress-bar-track { background: rgba(30,25,79,0.08); }

/* === PHASE TRANSITION DIVIDER (in chat) === */

.phase-transition {
    text-align: center;
    padding: 1rem 0;
    opacity: 0.5;
}
.phase-transition-text {
    font-size: 0.7rem;
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* === ACTIVITY BRIEF CARD (exercise start) === */

.activity-brief {
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.activity-brief-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.activity-brief-stage {
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--orange);
}
[data-mode="ideate"] .activity-brief-stage { color: var(--pink); }
[data-mode="debate"] .activity-brief-stage { color: var(--teal); }
[data-mode="framework"] .activity-brief-stage { color: var(--yellow); }
.activity-brief-time {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-family: var(--font);
}
.activity-brief-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    font-family: var(--font);
}
.activity-brief-name a { color: inherit; text-decoration: none; }
.activity-brief-name a:hover { text-decoration: underline; }
.activity-brief-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 0.35rem;
    font-family: var(--font);
}
.activity-brief-arc {
    font-size: 0.8rem;
    color: var(--text);
    opacity: 0.7;
    margin: 0;
    font-style: italic;
    font-family: var(--font);
}
html[data-theme="light"] .activity-brief {
    background: rgba(30,25,79,0.03);
    border-color: rgba(30,25,79,0.08);
}

/* === CELEBRATION EFFECT === */

.celebrate {
    animation: celebrateGlow 2s ease-out;
}
@keyframes celebrateGlow {
    0% { box-shadow: 0 0 0 0 rgba(228,229,23,0.4); }
    30% { box-shadow: 0 0 20px 4px rgba(228,229,23,0.3); }
    100% { box-shadow: 0 0 0 0 rgba(228,229,23,0); }
}

/* === PARKING LOT TOGGLE (session bar) === */

.parking-lot-toggle {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    transition: all 0.2s;
    position: relative;
    font-family: var(--font);
}
.parking-lot-toggle:hover {
    border-color: rgba(255,255,255,0.3);
    color: var(--text);
}
.parking-lot-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--orange);
    color: #fff;
    font-size: 0.55rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* === PARKING LOT PANEL === */

.parking-lot-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg);
    border-left: 3px solid var(--orange);
    z-index: 200;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    animation: slideInRight 0.2s ease;
    overflow-y: auto;
}
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.parking-lot-panel.hidden { display: none; }

.parking-lot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.parking-lot-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font);
}
.parking-lot-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem;
}
.parking-lot-close:hover { color: var(--text); }

.parking-lot-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: var(--font);
}

.parking-lot-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.parking-lot-item {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    position: relative;
}
.parking-lot-item-text {
    font-size: 0.85rem;
    color: var(--text);
    font-family: var(--font);
    padding-right: 1.5rem;
}
.parking-lot-item-from {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    font-family: var(--font);
}
.parking-lot-item-delete {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}
.parking-lot-item:hover .parking-lot-item-delete { opacity: 1; }
.parking-lot-item-delete:hover { color: var(--text); }

.parking-lot-add {
    background: none;
    border: 1px dashed rgba(255,255,255,0.15);
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.15s;
}
.parking-lot-add:hover {
    border-color: rgba(255,255,255,0.3);
    color: var(--text);
}

.parking-lot-add-input {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.parking-lot-input {
    flex: 1;
    background: var(--bg-light);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text);
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-family: var(--font);
    outline: none;
}
.parking-lot-input:focus { border-color: var(--orange); }
.parking-lot-input-save {
    background: var(--orange);
    color: #fff;
    border: none;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: var(--font);
    font-weight: 600;
}

/* Light theme parking lot */
html[data-theme="light"] .parking-lot-panel { background: #fff; border-left-color: var(--orange); }
html[data-theme="light"] .parking-lot-item { background: #f6f5f5; }
html[data-theme="light"] .parking-lot-input { background: #f6f5f5; border-color: rgba(30,25,79,0.12); color: #1E194F; }
html[data-theme="light"] .parking-lot-toggle { border-color: rgba(30,25,79,0.12); }
html[data-theme="light"] .parking-lot-toggle:hover { border-color: rgba(30,25,79,0.3); }

/* Session bar color handled by stage-step[data-stage] selectors */

/* === STAGE PROGRESS (inline inside session bar) === */

.stage-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 0.2rem;
}

.stage-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    position: relative;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s;
}

/* Dots gone — color is the indicator */
.stage-dot { display: none; }

/* Stage names: bold mono, home-page card-header style */
.stage-name {
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: opacity 0.2s;
}

/* Connector lines between steps */
.stage-conn {
    width: 20px;
    height: 1px;
    background: rgba(255,255,255,0.07);
    flex-shrink: 0;
    margin: 0;
}

/* Each stage in its own color, dimmed when inactive */
.stage-step[data-stage="reframe"]   .stage-name { color: var(--orange); opacity: 0.28; }
.stage-step[data-stage="ideate"]    .stage-name { color: var(--pink); opacity: 0.28; }
.stage-step[data-stage="debate"]    .stage-name { color: var(--teal);   opacity: 0.28; }
.stage-step[data-stage="framework"] .stage-name { color: var(--yellow);   opacity: 0.28; }

/* Done (visited) steps: slightly brighter */
.stage-step.done .stage-name { opacity: 0.5; }

/* Active step: full color + subtle card background matching home page cards */
.stage-step.active[data-stage="reframe"],
.stage-step.active[data-stage="ideate"],
.stage-step.active[data-stage="debate"],
.stage-step.active[data-stage="framework"] { background: rgba(241,90,34,0.1); border-color: rgba(241,90,34,0.2); --stage-pulse-color: rgba(241,90,34,0.22); animation: stagePulse 3s ease-in-out infinite; }

.stage-step.active .stage-name { opacity: 1; }

/* All steps open a picker — always pointer, hover tint in stage color */
.stage-step { cursor: pointer; }
.stage-step[data-stage="reframe"]:hover,
.stage-step[data-stage="ideate"]:hover,
.stage-step[data-stage="debate"]:hover,
.stage-step[data-stage="framework"]:hover { background: rgba(241,90,34,0.06); }
.stage-step[data-stage="ideate"]:hover    { background: rgba(236,54,147,0.06); }
.stage-step[data-stage="debate"]:hover    { background: rgba(38,189,190,0.06);  }
.stage-step[data-stage="framework"]:hover { background: rgba(228,229,23,0.06);  }
.stage-step:hover .stage-name { opacity: 0.8; }
.stage-step.active[data-stage="reframe"]:hover   { background: rgba(241,90,34,0.14);   }
.stage-step.active[data-stage="ideate"]:hover    { background: rgba(236,54,147,0.14); }
.stage-step.active[data-stage="debate"]:hover    { background: rgba(38,189,190,0.14);  }
.stage-step.active[data-stage="framework"]:hover { background: rgba(228,229,23,0.14);  }

/* Tool label: matches active stage color */
.stage-tool {
    font-size: 0.7125rem;
    font-family: var(--font);
    white-space: nowrap;
    opacity: 0.45;
    transition: opacity 0.2s;
}
.stage-tool::after { content: ' ▾'; }

.stage-step[data-stage="reframe"]   .stage-tool { color: var(--orange); }
.stage-step[data-stage="ideate"]    .stage-tool { color: var(--pink); }
.stage-step[data-stage="debate"]    .stage-tool { color: var(--teal);   }
.stage-step[data-stage="framework"] .stage-tool { color: var(--yellow);   }

/* Once picker is enabled — active step becomes a clickable trigger */
#stageProgress.tool-enabled .stage-step.active { cursor: pointer; }
#stageProgress.tool-enabled .stage-step.active .stage-tool { opacity: 0.8; }
#stageProgress.tool-enabled .stage-step.active:hover .stage-tool { opacity: 1; }

/* === TOOL PICKER === */
.tool-picker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.tool-picker-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1;
    padding: 0 0.1rem;
    cursor: default;
    opacity: 0.4;
    transition: all 0.2s;
}

.tool-picker-btn:not(:disabled) {
    cursor: pointer;
    opacity: 0.7;
}

.tool-picker-btn:not(:disabled):hover {
    opacity: 1;
    color: var(--text);
}

.tool-picker-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1c1a54;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 0.3rem;
    z-index: 200;
    min-width: 190px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    animation: pickerOpen 0.15s ease both;
    transform-origin: top center;
}

.tool-picker-menu.hidden { display: none; }

.tool-picker-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 1.025rem;
    padding: 0.4rem 0.65rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
}

.tool-picker-item:hover {
    background: rgba(255,255,255,0.07);
    color: var(--text);
}

/* Current tool shown with a subtle indicator */
.tool-picker-current {
    color: var(--text);
    font-weight: 600;
}
.tool-picker-current::after {
    content: ' ·';
    color: var(--text-muted);
    font-weight: 400;
}

/* Divider between tools and "Help me choose" */
.picker-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 0.25rem 0.3rem;
}

/* Help me choose button */
.tool-picker-help {
    color: var(--text-muted);
    font-size: 0.975rem;
}
.tool-picker-help:hover {
    color: var(--text);
    background: rgba(255,255,255,0.05);
}

/* === CHAT AREA === */
.chat-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    padding-bottom: 6rem; /* clearance for fixed prompt bar during sessions */
    position: relative;
}

/* Hide Wade CTA during active session */
body[data-mode] .site-footer,
body.in-session .site-footer,
body[data-mode] #wadeCta,
body.in-session #wadeCta { display: none !important; }

/* No background images on session page — clean dark navy */

/* Ensure chat content sits above the background */
.chat-area > * {
    position: relative;
    z-index: 1;
}

/* Welcome state: input is inline so no extra bottom padding needed */
.chat-area:has(.welcome .input-area) {
    padding-bottom: 1.5rem;
}

/* === RESUME BANNER === */

.resume-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem 0.4rem 0.85rem;
    background: rgba(18, 16, 58, 0.92);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    animation: fadeIn 0.3s ease;
    width: fit-content;
    margin: 0.75rem auto 0;
}

.resume-banner.hidden { display: none; }

.resume-text {
    font-size: 0.9375rem;
    color: var(--text-dim);
    white-space: nowrap;
}

.resume-btn {
    background: var(--orange);
    border: none;
    border-radius: 999px;
    color: white;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.28rem 0.75rem;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.resume-btn:hover { opacity: 0.85; }

.resume-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8125rem;
    padding: 0.2rem 0.35rem;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.resume-dismiss:hover { color: var(--text); }

/* === WELCOME === */
.welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    text-align: center;
    padding: 1.5rem 2rem 2.5rem;
    position: relative;
    overflow: hidden;
}

/* Wade diagonal accent — top-right corner, follows polygon's signature diagonal */
.welcome::after {
    content: '';
    position: absolute;
    top: 0;
    right: 4rem;
    width: 1px;
    height: 35%;
    background: linear-gradient(to bottom, transparent, rgba(241,90,34,0.18), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}

.welcome.hidden { display: none; }

.welcome-tagline {
    font-size: 0.95rem;
    color: var(--text-dim);
    max-width: 520px;
    line-height: 1.7;
    margin-bottom: 0.6rem;
}
@media (min-width: 641px) {
    .welcome-tagline { font-size: 1.05rem; }
}

.welcome-tagline:last-of-type { margin-bottom: 2.5rem; }

.welcome-tagline-bold {
    font-weight: 600;
    color: var(--text);
    font-size: 1.05rem;
}

/* Enter the Studio CTA */
.enter-studio-btn {
    display: inline-block;
    background: var(--orange);
    color: #fff;
    border: none;
    padding: 0.9rem 2.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: var(--font);
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    margin-bottom: 1.5rem;
}

.enter-studio-btn:hover {
    background: #d94f1a;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(241, 90, 34, 0.35);
}

.enter-studio-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(241, 90, 34, 0.2);
}

/* Welcome hero — full bleed image above text */
.welcome-hero {
    width: calc(100% + 4rem);
    margin-left: -2rem;
    margin-right: -2rem;
    margin-top: -1.5rem;
    margin-bottom: 1.5rem;
    height: 30vh;
    min-height: 180px;
    max-height: 300px;
    background: url('banner.jpg') center 40% / cover no-repeat;
    position: relative;
}
/* No gradient overlay on hero image */

@media (max-width: 640px) {
    .welcome-hero { width: calc(100% + 1.5rem); margin-left: -0.75rem; margin-right: -0.75rem; margin-top: -0.75rem; margin-bottom: 1rem; height: 25vh; min-height: 140px; max-height: 220px; }
}

.welcome-title {
    font-size: 2.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text);
    letter-spacing: -0.025em;
    line-height: 1.1;
}
@media (min-width: 641px) {
    .welcome-title { font-size: 3.5rem; }
}

.welcome-sub {
    font-size: 1.05rem;
    color: var(--orange);
    font-weight: 500;
    margin-bottom: 1.5rem;
    letter-spacing: 0.01em;
}

.welcome-intro {
    font-size: 1.125rem;
    color: var(--text-dim);
    max-width: 460px;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* === SITUATIONAL GUIDE === */
.welcome-guide {
    display: flex;
    gap: 0.5rem 1.2rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
    font-size: 0.975rem;
    color: var(--text-dim);
}

.guide-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.guide-signal {
    color: var(--text);
    font-weight: 600;
}

.guide-sep {
    color: var(--text-muted);
}

/* === CARDS HEADING === */
.cards-heading {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.cards-chevron { display: none; }

.cards-sub {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 660px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin: 0 0 1rem;
}
.cards-sub-link {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-muted);
    opacity: 0.6;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.cards-sub-link:hover {
    opacity: 1;
    color: var(--text);
}

/* === WELCOME CARDS === */
.welcome-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.welcome-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 3px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s ease;
}

/* Stage-coloured top accent borders */
.card-reframe  { border-top-color: var(--orange); }
.card-ideate   { border-top-color: var(--pink); }
.card-debate   { border-top-color: var(--teal); }
.card-framework { border-top-color: var(--yellow); }

.welcome-card:hover {
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.card-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.card-mode-name {
    font-family: var(--mono);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.card-reframe .card-mode-name { color: var(--orange); }
.card-ideate .card-mode-name { color: var(--pink); }
.card-debate .card-mode-name { color: var(--teal); }
.card-framework .card-mode-name { color: var(--yellow); }

.card-mode-desc {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.card-exercises {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.card-exercise-btn {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    font-family: var(--font);
    padding: 0.65rem 0.8rem;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    transform: translateY(0);
}

.exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.exercise-name {
    font-size: 1.0375rem;
    font-weight: 600;
    color: var(--text-dim);
    transition: color 0.2s;
}

.exercise-time {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.05);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

.exercise-desc {
    font-size: 0.925rem;
    color: var(--text-muted);
    line-height: 1.45;
    font-weight: 400;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
}

.card-exercise-btn:hover {
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
    transform: translateY(-1px);
}

.card-exercise-btn:hover .exercise-desc {
    color: var(--text-dim);
    max-height: 8rem;
    opacity: 1;
}

/* Card-specific hover colors */
.card-reframe .card-exercise-btn:hover {
    border-color: rgba(241, 90, 34, 0.35);
    background: rgba(241, 90, 34, 0.07);
    box-shadow: 0 4px 16px rgba(241,90,34,0.12);
}
.card-reframe .card-exercise-btn:hover .exercise-name { color: var(--orange); }

.card-ideate .card-exercise-btn:hover,
.card-debate .card-exercise-btn:hover,
.card-framework .card-exercise-btn:hover {
    border-color: rgba(241, 90, 34, 0.35);
    background: rgba(241, 90, 34, 0.07);
    box-shadow: 0 4px 16px rgba(241,90,34,0.12);
}
.card-ideate .card-exercise-btn:hover .exercise-name,
.card-debate .card-exercise-btn:hover .exercise-name,
.card-framework .card-exercise-btn:hover .exercise-name { color: var(--orange); }

/* === EXERCISE INTRO CARD === */
.msg-intro {
    align-self: stretch;
    max-width: 100%;
    border-left: 3px solid rgba(255,255,255,0.15);
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.55;
    animation: fadeIn 0.3s ease;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    padding-bottom: 0.8rem;
    margin-bottom: 0.3rem;
}

.msg-intro[data-mode="reframe"]   { border-left-color: var(--orange); animation: fadeIn 0.3s ease; }
.msg-intro[data-mode="ideate"]    { border-left-color: var(--pink); animation: fadeIn 0.3s ease; }
.msg-intro[data-mode="debate"]    { border-left-color: var(--teal);   animation: fadeIn 0.3s ease; }
.msg-intro[data-mode="framework"] { border-left-color: var(--yellow);   animation: fadeIn 0.3s ease; }

.msg-intro-label {
    font-family: var(--mono);
    font-size: 0.775rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.msg-intro[data-mode="reframe"] .msg-intro-label { color: var(--orange); }
.msg-intro[data-mode="ideate"]  .msg-intro-label { color: var(--pink); }
.msg-intro[data-mode="debate"]  .msg-intro-label { color: var(--teal); }
.msg-intro[data-mode="framework"] .msg-intro-label { color: var(--yellow); }

/* Inline exercise section break — same style but not sticky, with a top separator */
.msg-intro-break {
    align-self: stretch;
    max-width: 100%;
    border-left: 3px solid rgba(255,255,255,0.15);
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.55;
    animation: fadeIn 0.3s ease;
    margin-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 1.4rem;
    position: relative;
}

/* Wade diamond accent above section breaks */
.msg-intro-break::before {
    content: '◆';
    position: absolute;
    top: -0.7rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5625rem;
    color: var(--text-muted);
    opacity: 0.35;
    background: var(--bg);
    padding: 0 0.5rem;
}
.msg-intro-break[data-mode="reframe"] { border-left-color: var(--orange); }
.msg-intro-break[data-mode="ideate"]  { border-left-color: var(--pink); }
.msg-intro-break[data-mode="debate"]  { border-left-color: var(--teal); }
.msg-intro-break[data-mode="framework"] { border-left-color: var(--yellow); }
.msg-intro-break[data-mode="reframe"] .msg-intro-label { color: var(--orange); }
.msg-intro-break[data-mode="ideate"]  .msg-intro-label { color: var(--pink); }
.msg-intro-break[data-mode="debate"]  .msg-intro-label { color: var(--teal); }
.msg-intro-break[data-mode="framework"] .msg-intro-label { color: var(--yellow); }

/* === MESSAGES === */
.messages {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.msg {
    padding: 0.85rem 1.1rem;
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 82%;
    animation: fadeIn 0.25s ease;
}
@media (max-width: 640px) {
    .msg { max-width: 92%; font-size: 0.9rem; padding: 0.75rem 0.9rem; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === WADE BRAND ANIMATIONS === */

/* Slow diagonal drift — follows the Wade polygon's signature angle */
@keyframes wadeFloat {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(6px, -10px); }
}

/* Staggered card entrance */
@keyframes cardReveal {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Active stage step — gentle stage-color pulse */
@keyframes stagePulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%       { box-shadow: 0 0 0 4px var(--stage-pulse-color, rgba(241,90,34,0.2)); }
}

/* Intro card left border shimmer */
@keyframes borderGlow {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}

/* Welcome hero text entrance */
@keyframes heroFloat {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Tool picker open */
@keyframes pickerOpen {
    from { opacity: 0; transform: scale(0.95) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.msg-user {
    background: rgba(241, 90, 34, 0.12);
    border: 1px solid rgba(241, 90, 34, 0.2);
    align-self: flex-end;
    color: var(--text);
}

.msg-agent {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    align-self: flex-start;
    color: var(--text-dim);
}

/* Markdown inside agent messages */
.msg-agent h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin: 1rem 0 0.4rem;
}

.msg-agent h2:first-child { margin-top: 0; }

.msg-agent h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin: 0.8rem 0 0.3rem;
}

.msg-agent strong {
    color: var(--text);
    font-weight: 600;
}

.msg-agent em {
    color: var(--text);
    font-style: italic;
}

.msg-agent ul, .msg-agent ol {
    margin: 0.4rem 0;
    padding-left: 1.3rem;
}

.msg-agent li {
    margin: 0.25rem 0;
}

.msg-agent p {
    margin: 0.4rem 0;
}

.msg-agent p:first-child { margin-top: 0; }
.msg-agent p:last-child { margin-bottom: 0; }

.msg-agent code {
    font-family: var(--mono);
    font-size: 1rem;
    background: rgba(255,255,255,0.06);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}
.msg-agent a {
    color: var(--stage-color, var(--orange));
    text-decoration: underline;
    text-underline-offset: 2px;
}
.msg-agent a:hover {
    opacity: 0.8;
}

/* Typing indicator */
.typing {
    display: flex;
    gap: 4px;
    padding: 1rem;
    align-self: flex-start;
}

.typing span {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: bounce 1.2s infinite;
}

.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

/* === INPUT AREA === */
.input-area {
    padding: 0.75rem 1.5rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: var(--bg);
}

/* Fixed at viewport bottom during sessions (when moved to body by JS) */
body > .input-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    transition: right 0.3s ease;
}
/* When board is open, input bar shrinks to match chat pane width */
body.board-open > .input-area {
    right: 55%;
}

/* Input embedded inside welcome (home page) — inline, no border, constrained width */
.welcome .input-area {
    position: relative;
    border-top: none;
    padding: 0.25rem 0 1.5rem;
    width: 100%;
    max-width: 580px;
    align-self: center;
}

.input-form {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.input-btns {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
    position: relative;
}

.input-field {
    flex: 1;
    background: var(--bg-light);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 0.55rem 1rem;
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.45;
    resize: none;
    outline: none;
    min-height: 2.5rem;
    max-height: 120px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
@media (max-width: 640px) {
    .input-field { font-size: 0.95rem; min-height: 3rem; padding: 0.6rem 0.85rem; }
}

.input-field:focus {
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 3px rgba(241,90,34,0.07);
    outline: none;
}

/* === PITCH PREVIEW CARD === */
.pitch-preview {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border: 1px solid rgba(241,90,34,0.15);
    border-radius: 0 0 10px 10px;
    padding: 1rem 1.25rem;
    margin: 0 auto 1rem;
    max-width: 700px;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.pitch-preview.hidden { display: none; }
.pitch-preview-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pitch-progress-dots {
    display: flex;
    gap: 0.3rem;
    margin-left: auto;
}
.pitch-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.2);
    background: transparent;
    transition: all 0.3s;
}
.pitch-progress-dot.filled {
    background: var(--orange);
    border-color: var(--orange);
}
.pitch-preview-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 0.25rem;
}
.pitch-preview-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-dim);
    font-style: normal;
}
.pitch-slot {
    font-style: normal;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px dashed rgba(255,255,255,0.15);
    padding: 0 0.1rem;
    transition: all 0.3s;
}
.pitch-slot.filled {
    color: var(--orange);
    border-bottom-color: var(--orange);
}
.pitch-preview.collapsed .pitch-preview-text { display: none; }
html[data-theme="light"] .pitch-preview { background: rgba(241,90,34,0.03); border-color: rgba(241,90,34,0.12); }
html[data-theme="light"] .pitch-progress-dot { border-color: rgba(0,0,0,0.15); }
html[data-theme="light"] .pitch-slot { border-bottom-color: rgba(0,0,0,0.1); color: #999; }
html[data-theme="light"] .pitch-slot.filled { color: var(--orange); }

/* === PRE-MORTEM BOARD GRID === */
.board-grid-premortem {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 1px;
    overflow-y: auto;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    flex: 1;
}
.board-grid-premortem .board-zone { min-height: 100px; border-radius: 0; background: var(--bg); }
/* Mitigations spans full bottom row */
.board-grid-premortem .board-zone[data-zone="risk-mitigations"] { grid-column: 1 / -1; }
.board-grid-premortem .zone-name { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.board-grid-premortem .board-card-text { font-size: 0.85rem; line-height: 1.45; color: #f5f5f5; }
@media (max-width: 1024px) {
    .board-grid-premortem { grid-template-columns: 1fr 1fr; }
    .board-grid-premortem .board-zone[data-zone="risk-mitigations"] { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .board-grid-premortem { grid-template-columns: 1fr; }
}

/* === EFFECTUATION BOARD GRID === */
.board-grid-effectuation {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1px;
    overflow-y: auto;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    flex: 1;
}
.board-grid-effectuation .board-zone { min-height: 120px; border-radius: 0; background: var(--bg); }
/* First Move spans full bottom row */
.board-grid-effectuation .board-zone[data-zone="eff-action"] { grid-column: 1 / -1; }
.board-grid-effectuation .zone-name { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.board-grid-effectuation .board-card-text { font-size: 0.85rem; line-height: 1.45; color: #f5f5f5; }
@media (max-width: 1024px) {
    .board-grid-effectuation { grid-template-columns: 1fr 1fr; }
    .board-grid-effectuation .board-zone[data-zone="eff-action"] { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .board-grid-effectuation { grid-template-columns: 1fr; }
}

/* === PITCH BOARD GRID === */
.board-grid-pitch {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 1px;
    overflow-y: auto;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    flex: 1;
}
.board-grid-pitch .board-zone {
    min-height: 150px;
    border-radius: 0;
    background: var(--bg);
}
.board-grid-pitch .zone-name {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.board-grid-pitch .board-card-text {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #f5f5f5;
}
@media (max-width: 1024px) {
    .board-grid-pitch {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
}
@media (max-width: 480px) {
    .board-grid-pitch {
        grid-template-columns: 1fr;
    }
}

/* Focus glow — always orange */
.input-field:focus { box-shadow: 0 0 0 3px rgba(241,90,34,0.12); border-color: rgba(241,90,34,0.4); }

.input-field::placeholder {
    color: var(--text-muted);
}

.send-btn {
    background: var(--orange);
    border: none;
    border-radius: 6px;
    padding: 0.6rem;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.send-btn { transition: opacity 0.2s, transform 0.15s ease; }
.send-btn:hover:not(:disabled) { opacity: 1; transform: scale(1.07); }
.send-btn:active:not(:disabled) { transform: scale(0.96); }
.send-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.mic-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 0.6rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.mic-btn:hover { border-color: rgba(255,255,255,0.3); color: var(--text); }
.mic-btn.recording {
    border-color: var(--orange);
    color: var(--orange);
    animation: micPulse 1s ease-in-out infinite;
}
.mic-btn.unsupported { display: none; }

.mic-hint {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: rgba(30,25,79,0.92);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10;
}
.mic-hint.visible { opacity: 1; transform: translateY(0); }
html[data-theme="light"] .mic-hint { background: rgba(30,25,79,0.88); }

@keyframes micPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(241,90,34,0); }
    50%       { box-shadow: 0 0 0 5px rgba(241,90,34,0.2); }
}

html[data-theme="light"] .mic-btn { border-color: rgba(30,25,79,0.15); }
html[data-theme="light"] .mic-btn:hover { border-color: rgba(30,25,79,0.3); color: var(--text); }

.input-disclaimer {
    text-align: center;
    font-size: 0.6rem;
    color: var(--text-muted);
    opacity: 0.55;
    margin: 0.4rem auto 0;
    max-width: 600px;
    letter-spacing: 0.02em;
    font-family: var(--mono);
}

.input-hint {
    max-width: 800px;
    margin: 0.4rem auto 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-family: var(--mono);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mode-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* === REPORT CTA (footer) === */
.report-cta { display: contents; }
.report-cta.hidden { display: none; }

.report-cta-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--orange);
    cursor: pointer;
    transition: opacity 0.4s, color 0.4s;
    white-space: nowrap;
}

.report-cta-btn:hover:not(:disabled) { opacity: 0.7; }

/* Hidden until earned — completely invisible while disabled, fades in when ready */
.report-cta-btn:disabled {
    opacity: 0;
    cursor: default;
    pointer-events: none;
}

/* === UNIVERSAL SITE FOOTER === */
.site-footer {
    margin: 3rem auto 0;
    width: 100%;
    max-width: 860px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 2rem;
    display: none; /* hidden by default — JS reveals after scroll past CTA */
}
.site-footer.visible {
    display: block;
    animation: fadeSlideUp 0.5s ease forwards;
}
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


.site-footer-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1rem 1.5rem;
    flex-wrap: wrap;
}

.site-footer-brand {
    display: none; /* Hide the logo block — keep it minimal */
}

.site-footer-icon {
    height: 32px;
    width: auto;
    opacity: 0.85;
}

.site-footer-orgname {
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-align: center;
    max-width: 90px;
    line-height: 1.3;
}

.site-footer-body {
    flex: 1;
    min-width: 200px;
}

.site-footer-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 0.2rem;
}

.site-footer-text {
    font-size: 0.72rem;
    color: var(--text-dim);
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.site-footer-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.site-footer-link {
    font-size: 0.8rem;
    color: var(--text-dim);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.site-footer-link:hover {
    color: var(--text);
}

.site-footer-cta-wrap {
    flex-shrink: 0;
}

.site-footer-cta {
    display: inline-block;
    background: var(--orange);
    color: #fff;
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.site-footer-cta:hover {
    opacity: 0.88;
}
.site-footer-legal {
    text-align: center;
    padding: 0.75rem 0;
    font-size: 0.75rem;
}
.site-footer-legal a {
    color: var(--text-muted);
    text-decoration: none;
}
.site-footer-legal a:hover {
    color: var(--text-dim);
    text-decoration: underline;
}

.report-copy-notice {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
    margin-left: auto;
}

/* === ROUTING INLINE SUGGESTIONS === */

.routing-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 540px;
    margin: 0.75rem 0 0 0;
    animation: fadeIn 0.3s ease;
}

.routing-suggest-btn {
    background: transparent;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-family: var(--font);
    font-size: 1.0625rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.01em;
}

.routing-suggest-btn.mode-reframe  { border: 1px solid rgba(255,160,50,0.45); color: var(--orange); }
.routing-suggest-btn.mode-reframe:hover  { background: rgba(255,160,50,0.12); border-color: var(--orange); }

.routing-suggest-btn.mode-ideate   { border: 1px solid rgba(236,54,147,0.45); color: var(--pink); }
.routing-suggest-btn.mode-ideate:hover   { background: rgba(236,54,147,0.12); border-color: var(--pink); }

.routing-suggest-btn.mode-debate   { border: 1px solid rgba(0,200,180,0.45); color: var(--teal); }
.routing-suggest-btn.mode-debate:hover   { background: rgba(0,200,180,0.12); border-color: var(--teal); }

.routing-suggest-btn.mode-framework { border: 1px solid rgba(255,100,160,0.45); color: var(--yellow); }
.routing-suggest-btn.mode-framework:hover { background: rgba(255,100,160,0.12); border-color: var(--yellow); }

/* === SWAP TOOL SUGGESTIONS === */

.swap-suggestions {
    max-width: 600px;
    margin: 0.75rem 0 0 0;
    animation: fadeIn 0.3s ease;
}

.swap-transition {
    font-size: 1.0625rem;
    color: var(--text-dim);
    margin-bottom: 0.75rem;
    font-style: italic;
    line-height: 1.5;
}

.swap-tools {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.swap-suggest-btn {
    flex: 1;
    min-width: 200px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    font-family: var(--font);
}

.swap-suggest-btn:hover {
    background: rgba(255,255,255,0.07);
}

.swap-suggest-stage {
    display: block;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.swap-suggest-name {
    display: block;
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 0.35rem;
}

.swap-suggest-reason {
    display: block;
    font-size: 0.975rem;
    color: var(--text-dim);
    line-height: 1.45;
}

.swap-suggest-btn.mode-reframe  { border: 1px solid rgba(255,160,50,0.35); color: var(--orange); }
.swap-suggest-btn.mode-reframe:hover  { border-color: var(--orange); background: rgba(255,160,50,0.08); }
.swap-suggest-btn.mode-reframe .swap-suggest-stage { color: var(--orange); }

.swap-suggest-btn.mode-ideate,
.swap-suggest-btn.mode-debate,
.swap-suggest-btn.mode-framework { border: 1px solid rgba(241,90,34,0.35); color: var(--orange); }
.swap-suggest-btn.mode-ideate:hover,
.swap-suggest-btn.mode-debate:hover,
.swap-suggest-btn.mode-framework:hover { border-color: var(--orange); background: rgba(241,90,34,0.08); }
.swap-suggest-btn.mode-ideate .swap-suggest-stage,
.swap-suggest-btn.mode-debate .swap-suggest-stage,
.swap-suggest-btn.mode-framework .swap-suggest-stage { color: var(--orange); }

/* === WRAP UP PROMPT === */

.wrap-prompt {
    max-width: 600px;
    margin: 1rem 0 0 0;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    animation: fadeIn 0.3s ease;
}

.wrap-prompt-text {
    font-size: 1.0625rem;
    color: var(--text-dim);
    margin: 0 0 0.75rem;
}

.wrap-prompt-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Quick-reply option chips */
.option-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 0.75rem 0;
}
.option-chip {
    background: none;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.option-chip:hover {
    border-color: var(--orange);
    color: var(--text);
    background: rgba(239,90,33,0.08);
}
html[data-theme="light"] .option-chip {
    border-color: rgba(30,25,79,0.2);
    color: var(--text-dim);
}
html[data-theme="light"] .option-chip:hover {
    border-color: var(--orange);
    background: rgba(239,90,33,0.06);
}

.wrap-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 1.0375rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.wrap-btn:hover {
    border-color: rgba(255,255,255,0.35);
    color: var(--text);
}

.wrap-btn-report {
    border-color: rgba(241, 90, 34, 0.4);
    color: var(--orange);
}

.wrap-btn-report:hover {
    background: rgba(241, 90, 34, 0.08);
    border-color: var(--orange);
}

/* Thumbs rating inside wrap card */
.wrap-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.wrap-rating-label {
    font-size: 0.975rem;
    color: var(--text-muted);
}

.wrap-rate-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    font-size: 1.25rem;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.4;
}

.wrap-rate-btn:hover,
.wrap-rate-btn.selected { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); }

/* === ROUTING BACK === */

.routing-back {
    max-width: 800px;
    margin: 1rem auto 0;
    text-align: center;
    animation: fadeIn 0.3s ease;
}

.routing-back.hidden { display: none; }

.routing-back-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 0.65rem 1.4rem;
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.01em;
}

.routing-back-btn:hover {
    border-color: rgba(255,255,255,0.4);
    color: var(--text);
    background: rgba(255,255,255,0.05);
}

/* === LEAD MODAL === */
.lead-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 30, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: fadeIn 0.25s ease;
}

.lead-modal-overlay.hidden { display: none; }

.lead-modal {
    background: var(--bg-light);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.lead-modal-title {
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.4rem;
}

.lead-modal-sub {
    font-size: 1.0625rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.lead-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.lead-input {
    background: var(--bg);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    color: var(--text);
    font-family: var(--font);
    font-size: 1.0625rem;
    outline: none;
    transition: border-color 0.2s;
}

.lead-input:focus {
    border-color: rgba(255,255,255,0.3);
}

.lead-input::placeholder {
    color: var(--text-muted);
}

.lead-submit {
    background: var(--orange);
    border: none;
    border-radius: 6px;
    padding: 0.7rem;
    color: white;
    font-family: var(--font);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.3rem;
    transition: opacity 0.2s;
}

.lead-submit:hover { opacity: 0.85; }
.lead-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.lead-disclaimer {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 1rem;
    line-height: 1.4;
}

/* === REPORT CARD === */
.report-card {
    max-width: 680px;
    margin: 1.5rem auto 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(241, 90, 34, 0.2);
    border-radius: 10px;
    padding: 2rem;
    animation: fadeIn 0.3s ease;
}
.report-actions-top {
    display: flex; gap: 0.5rem; align-items: center;
    margin-bottom: 1.5rem; padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.report-share-dropdown { position: relative; }
.report-share-menu {
    position: absolute; top: 100%; right: 0; margin-top: 4px;
    background: var(--bg-light, #1a1750); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; padding: 0.25rem 0; min-width: 180px; z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.report-share-option {
    display: block; width: 100%; text-align: left;
    background: none; border: none; color: var(--text-dim);
    padding: 0.5rem 0.75rem; font-size: 0.8rem; cursor: pointer;
}
.report-share-option:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.report-new-session {
    background: none; border: none; color: var(--text-dim);
    font-size: 0.8rem; cursor: pointer; padding: 0;
    margin-bottom: 0.75rem;
}
.report-new-session:hover { color: var(--text); }
.report-footer-line { font-size: 0.75rem; color: var(--text-dim); }
.report-footer-line a { color: var(--text-dim); }
.report-footer-contact { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.25rem; }
.report-footer-contact a { color: var(--orange); }

.report-card.hidden { display: none; }

/* Preview state — fade out after 280px */
.report-card.report-preview {
    border-radius: 10px 10px 0 0;
    border-bottom: none;
}

.report-card.report-preview .report-content {
    max-height: 280px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* === REPORT UNLOCK PANEL === */
.report-unlock {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(241, 90, 34, 0.2);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 1.5rem;
    animation: fadeIn 0.3s ease;
}

.report-unlock.hidden { display: none; }

.report-unlock-sub {
    font-size: 1.0625rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
    line-height: 1.5;
    text-align: center;
}

.report-content {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-dim);
}

.report-content h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--orange);
    margin: 1.2rem 0 0.5rem;
}

.report-content h2:first-child { margin-top: 0; }

.report-content h3 {
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--text);
    margin: 2.5rem 0 0.5rem;
}
.report-content h3:first-child { margin-top: 0; }
.report-content blockquote {
    border-left: 3px solid var(--orange);
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--text);
    background: rgba(241,90,34,0.04);
    border-radius: 0 6px 6px 0;
    line-height: 1.6;
}
.report-content hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 2rem 0;
}

.report-content strong {
    color: var(--text);
    font-weight: 600;
}

.report-content em {
    color: var(--text);
    font-style: italic;
}

.report-content ul, .report-content ol {
    margin: 0.4rem 0;
    padding-left: 1.3rem;
}

.report-content li {
    margin: 0.3rem 0;
}

.report-content p {
    margin: 0.5rem 0;
}

.report-content p:first-child { margin-top: 0; }
.report-content p:last-child { margin-bottom: 0; }

.report-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 1.2rem;
}

.report-logo-top {
    height: 48px;
    width: auto;
}

.report-meta {
    font-size: 0.9rem;
    font-family: var(--mono);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.report-footer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.report-logo {
    height: 20px;
    width: auto;
    opacity: 0.5;
}

.report-disclaimer {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-family: var(--mono);
    opacity: 0.6;
    margin-left: auto;
}

/* PDF / Share buttons in report footer */
.report-footer { flex-wrap: wrap; }

.report-action-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 0.9rem;
    padding: 0.28rem 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}

.report-action-btn + .report-action-btn { margin-left: 0.4rem; }

.report-action-btn:hover { border-color: rgba(255,255,255,0.3); color: var(--text); }

.report-action-btn.hidden { display: none; }

/* === RESPONSIVE === */
@media (max-width: 640px) {
    /* Header */
    .header { padding: 0.5rem 0.75rem; }

    /* Chat + input */
    .chat-area { padding: 0.75rem 0.75rem; padding-bottom: 5.5rem; }
    .input-area { padding: 0.5rem 0.75rem 0.5rem; }
    .input-form { flex-wrap: nowrap; gap: 0.35rem; }
    .input-btns { flex-direction: row; gap: 0.3rem; }
    .input-hint-copy { display: none; }
    .input-disclaimer { font-size: 0.55rem; }

    /* Welcome screen */
    .welcome { padding: 0 0.75rem 1.5rem; min-height: auto; }
    .welcome-title { font-size: 2rem; }
    .welcome-sub { font-size: 0.95rem; margin-bottom: 1rem; }
    .welcome-intro { margin-bottom: 0.75rem; }

    .welcome-guide {
        flex-direction: column;
        gap: 0.35rem;
        margin-bottom: 1.25rem;
        font-size: 1rem;
    }
    .guide-sep { display: none; }

    /* Home stage cards — 1-column grid on mobile */
    .welcome-cards {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        padding: 0 1rem 0.5rem;
        gap: 0.75rem;
        box-sizing: border-box;
    }
    .welcome-card {
        min-width: 0;
        /* reset hover lift for touch — avoids sticky transform state */
        transform: none !important;
    }

    /* Stage progress bar — compress to fit 4 stages */
    .session-bar { padding: 0.4rem 0.75rem; }
    .stage-conn { display: none; }
    .stage-step { padding: 0.25rem 0.5rem; }
    .stage-name { font-size: 0.6875rem; letter-spacing: 0.05em; }
    .stage-tool { font-size: 0.6rem; }
    .session-close { margin-left: 0.25rem; }

    /* Session intro card */
    .msg-intro { padding: 0.6rem 0.9rem; }
    .msg-intro-title { font-size: 0.8125rem; }
    .msg-intro-body { font-size: 1rem; }

    /* Messages */
    .msg { max-width: 95%; }

    /* Modals + report */
    .lead-modal { padding: 1.25rem; }
    .report-card { padding: 1rem; margin: 0.75rem auto 0; }
    .report-card .report-footer { flex-direction: column; align-items: flex-start; gap: 0.4rem; }

    /* Universal site footer */
    .site-footer { margin: 1.5rem auto 0; }
    .site-footer-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 1.5rem 1rem 2rem; }
    .site-footer-brand { flex-direction: row; align-items: center; min-width: unset; }
    .site-footer-orgname { max-width: none; text-align: left; }
    .site-footer-icon { height: 40px; }
    .site-footer-contacts { flex-direction: column; gap: 0.4rem; }
    .site-footer-cta-wrap { width: 100%; }
    .site-footer-cta { width: 100%; box-sizing: border-box; text-align: center; }

    /* Toolbox toggle on mobile */
    .cards-heading { cursor: pointer; user-select: none; margin-top: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.4em; font-size: 0.75rem; letter-spacing: 0.04em; white-space: nowrap; }
    .cards-chevron { display: inline-block; transition: transform 0.25s ease; letter-spacing: 0; flex-shrink: 0; }
    .welcome-cards.cards-collapsed .welcome-card { display: none; }
    .welcome-cards.cards-collapsed { overflow: hidden; }
    .welcome-cards.cards-collapsed .cards-chevron { transform: rotate(-90deg); }
}

/* === TEXT SIZE CONTROL — in header === */
.header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.text-size-control {
    position: relative;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.text-size-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.text-size-btn:hover {
    border-color: rgba(255,255,255,0.25);
    color: var(--text);
}

.text-size-picker {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--bg-light);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 0.3rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    animation: fadeIn 0.15s ease;
}
.text-size-picker.hidden { display: none; }

.text-size-option {
    background: none;
    border: none;
    color: var(--text-dim);
    font-family: var(--font);
    font-weight: 600;
    padding: 0.35rem 0.6rem;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.15s;
    white-space: nowrap;
}
.text-size-option[data-size="small"] { font-size: 0.75rem; }
.text-size-option[data-size="medium"] { font-size: 0.9rem; }
.text-size-option[data-size="large"] { font-size: 1.1rem; }

.text-size-option:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.text-size-option.active { color: var(--orange); }

.text-size-label {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* Text size classes on body */
body.text-small .msg { font-size: 0.82rem; }
body.text-small .input-field { font-size: 0.88rem; }
body.text-large .msg { font-size: 1.1rem; }
body.text-large .input-field { font-size: 1.15rem; }

html[data-theme="light"] .text-size-btn { background: #fff; border-color: rgba(0,0,0,0.1); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
html[data-theme="light"] .text-size-picker { background: #fff; border-color: rgba(0,0,0,0.1); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

/* === SESSION ACTIONS === */
.session-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    margin-right: 0.5rem;
}
.session-action-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    width: 28px;
    height: 28px;
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.session-action-btn:hover {
    border-color: rgba(255,255,255,0.25);
    color: var(--orange);
}
.session-action-btn:disabled { opacity: 0.4; cursor: default; }

/* === SAVE SESSION MODAL === */
.save-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.save-modal-overlay.hidden { display: none; }
.save-modal {
    background: var(--bg-light);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    position: relative;
    text-align: center;
}
.save-modal h3 {
    color: var(--text);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.save-modal p {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
.save-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
}
.save-modal-email {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    outline: none;
}
.save-modal-email:focus {
    border-color: var(--orange);
}
.save-modal-submit {
    width: 100%;
    padding: 0.7rem;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.save-modal-submit:hover { opacity: 0.9; }
.save-modal-submit:disabled { opacity: 0.5; cursor: default; }
.save-modal-status {
    color: var(--orange);
    font-size: 0.8rem;
    margin-top: 0.75rem;
}
.save-modal-status.hidden { display: none; }
html[data-theme="light"] .save-modal { background: #fff; border-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .save-modal-email { background: #f6f5f5; border-color: rgba(0,0,0,0.1); color: #333; }
html[data-theme="light"] .text-size-option:hover { background: rgba(0,0,0,0.04); }

/* === PUSH HARDER TOGGLE === */

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

/* === SESSION ACTIONS (Challenge me / Help me — appear after each AI response) === */

.session-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0 0.25rem;
    align-items: center;
}

.session-action-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    padding: 0.28rem 0.65rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.session-action-btn:hover {
    border-color: rgba(255,255,255,0.25);
    color: var(--text-dim);
}

/* === IN-CHAT HELP / CHALLENGE BUTTONS === */
.chat-action-btns {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0;
    max-width: 800px;
}
.chat-action-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 20px;
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1.5px solid rgba(255,255,255,0.15);
    background: transparent;
    color: var(--text-dim);
}
.chat-action-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
}
.chat-action-btn.help-btn:hover {
    background: rgba(241,90,34,0.06);
}
.chat-action-btn.challenge-btn.active {
    border-color: var(--orange);
    color: var(--orange);
    background: rgba(241,90,34,0.1);
}
html[data-theme="light"] .chat-action-btn {
    border-color: rgba(0,0,0,0.12);
    color: #666;
}
html[data-theme="light"] .chat-action-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
}

/* === NEXT EXERCISE PANEL === */

.next-exercise-panel {
    max-width: 800px;
    margin: 1rem auto 0;
    padding: 1.2rem 1.5rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    animation: fadeIn 0.4s ease;
}

.next-exercise-label {
    font-family: var(--mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.next-exercise-stage {
    font-family: var(--mono);
    font-size: 0.775rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
}

.next-exercise-stage.mode-reframe   { color: var(--orange); }
.next-exercise-stage.mode-ideate    { color: var(--pink); }
.next-exercise-stage.mode-debate    { color: var(--teal); }
.next-exercise-stage.mode-framework { color: var(--yellow); }

.next-exercise-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.4rem;
}

.next-exercise-desc {
    font-size: 0.975rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 1rem;
}

.next-exercise-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    padding: 0.5rem 1.2rem;
    font-family: var(--font);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s;
}

.next-exercise-btn:hover                   { border-color: rgba(255,255,255,0.35); color: var(--text); }
.next-exercise-btn-ideate:hover            { border-color: rgba(236,54,147,0.5); color: var(--pink); }
.next-exercise-btn-debate:hover            { border-color: rgba(38,189,190,0.5);  color: var(--teal); }
.next-exercise-btn-framework:hover         { border-color: rgba(228,229,23,0.5);  color: var(--yellow); }

/* === THEME TOGGLE === */
.theme-toggle {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    color: var(--text-dim);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle:hover { border-color: rgba(255,255,255,0.25); color: var(--text); }

.header-save-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    color: var(--text-dim);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.header-save-btn:hover { border-color: rgba(255,255,255,0.3); color: var(--text); }
body.in-session .header-save-btn { display: flex; }

/* === LIGHT MODE === */
html[data-theme="light"] {
    --bg: #F6F5F5;
    --bg-light: #FFFFFF;
    --text: #1E194F;
    --text-dim: rgba(30,25,79,0.72);
    --text-muted: rgba(30,25,79,0.45);
}

html[data-theme="light"] .input-hint { color: var(--text-dim); }
html[data-theme="light"] .theme-toggle { border-color: rgba(30,25,79,0.15); }
html[data-theme="light"] .theme-toggle:hover { border-color: rgba(30,25,79,0.3); color: var(--text); }

html[data-theme="light"] .header { border-bottom-color: rgba(30,25,79,0.1); }
html[data-theme="light"] .session-bar { border-bottom-color: rgba(30,25,79,0.1); }
html[data-theme="light"] .session-close { border-color: rgba(30,25,79,0.12); }
html[data-theme="light"] .session-close:hover { border-color: rgba(30,25,79,0.3); }
html[data-theme="light"] .stage-conn { background: rgba(30,25,79,0.1); }

html[data-theme="light"] .welcome-card { border-color: rgba(30,25,79,0.1); }
html[data-theme="light"] .welcome-card:hover { border-color: rgba(30,25,79,0.22); }
html[data-theme="light"] .card-header { border-bottom-color: rgba(30,25,79,0.08); }
html[data-theme="light"] .card-exercise-btn { background: rgba(30,25,79,0.03); border-color: rgba(30,25,79,0.1); }
html[data-theme="light"] .card-exercise-btn:hover { background: rgba(30,25,79,0.06); border-color: rgba(30,25,79,0.2); box-shadow: none; }
html[data-theme="light"] .exercise-time { background: rgba(30,25,79,0.06); }

html[data-theme="light"] .input-area { border-top-color: rgba(30,25,79,0.1); }
html[data-theme="light"] .input-field { border-color: rgba(30,25,79,0.15); color: var(--text); }
html[data-theme="light"] .input-field:focus { border-color: rgba(30,25,79,0.3); box-shadow: 0 0 0 3px rgba(241,90,34,0.07); }
html[data-theme="light"] body[data-mode="reframe"]   .input-field:focus { box-shadow: 0 0 0 3px rgba(241,90,34,0.1);   border-color: rgba(241,90,34,0.5); }
html[data-theme="light"] body[data-mode="ideate"]    .input-field:focus { box-shadow: 0 0 0 3px rgba(236,54,147,0.1);  border-color: rgba(236,54,147,0.5); }
html[data-theme="light"] body[data-mode="debate"]    .input-field:focus { box-shadow: 0 0 0 3px rgba(38,189,190,0.1);  border-color: rgba(38,189,190,0.5); }
html[data-theme="light"] body[data-mode="framework"] .input-field:focus { box-shadow: 0 0 0 3px rgba(228,229,23,0.15); border-color: rgba(228,229,23,0.6); }

html[data-theme="light"] .msg-agent { background: rgba(30,25,79,0.04); border-color: rgba(30,25,79,0.08); }
html[data-theme="light"] .msg-agent code { background: rgba(30,25,79,0.06); }
html[data-theme="light"] .msg-intro { border-bottom-color: rgba(30,25,79,0.06); }
html[data-theme="light"] .msg-intro-break { border-top-color: rgba(30,25,79,0.07); border-left-color: rgba(30,25,79,0.15); }
html[data-theme="light"] .msg-intro-break::before { background: var(--bg); }

html[data-theme="light"] .tool-picker-menu { background: #FFFFFF; border-color: rgba(30,25,79,0.12); box-shadow: 0 8px 28px rgba(0,0,0,0.12); }
html[data-theme="light"] .tool-picker-item:hover { background: rgba(30,25,79,0.05); }
html[data-theme="light"] .picker-divider { background: rgba(30,25,79,0.08); }

html[data-theme="light"] .session-action-btn { border-color: rgba(30,25,79,0.15); }
html[data-theme="light"] .session-action-btn:hover { border-color: rgba(30,25,79,0.3); }

html[data-theme="light"] .wrap-prompt { border-color: rgba(30,25,79,0.1); background: rgba(30,25,79,0.02); }
html[data-theme="light"] .wrap-btn { border-color: rgba(30,25,79,0.15); }
html[data-theme="light"] .wrap-btn:hover { border-color: rgba(30,25,79,0.3); }
html[data-theme="light"] .wrap-rate-btn { border-color: rgba(30,25,79,0.12); }
html[data-theme="light"] .wrap-rate-btn:hover,
html[data-theme="light"] .wrap-rate-btn.selected { border-color: rgba(30,25,79,0.35); background: rgba(30,25,79,0.06); }

html[data-theme="light"] .routing-suggest-btn.mode-reframe  { border-color: rgba(241,90,34,0.4); }
html[data-theme="light"] .routing-suggest-btn.mode-ideate   { border-color: rgba(236,54,147,0.4); }
html[data-theme="light"] .routing-suggest-btn.mode-debate   { border-color: rgba(38,189,190,0.4); }
html[data-theme="light"] .routing-suggest-btn.mode-framework { border-color: rgba(228,229,23,0.5); }
html[data-theme="light"] .swap-suggest-btn { background: rgba(30,25,79,0.03); }
html[data-theme="light"] .swap-suggest-btn:hover { background: rgba(30,25,79,0.06); }

html[data-theme="light"] .routing-back-btn { border-color: rgba(30,25,79,0.15); }
html[data-theme="light"] .routing-back-btn:hover { border-color: rgba(30,25,79,0.3); background: rgba(30,25,79,0.04); }

html[data-theme="light"] .next-exercise-panel { border-color: rgba(30,25,79,0.1); background: rgba(30,25,79,0.02); }
html[data-theme="light"] .next-exercise-btn { border-color: rgba(30,25,79,0.15); }
html[data-theme="light"] .next-exercise-btn:hover { border-color: rgba(30,25,79,0.35); color: var(--text); }

html[data-theme="light"] .site-footer { border-top-color: rgba(30,25,79,0.1); }
html[data-theme="light"] .site-footer-link { color: rgba(30,25,79,0.6); }
html[data-theme="light"] .site-footer-link:hover { color: var(--navy); }
html[data-theme="light"] .site-footer-text { color: rgba(30,25,79,0.65); }

html[data-theme="light"] .report-card { background: rgba(30,25,79,0.02); }
html[data-theme="light"] .report-header { border-bottom-color: rgba(30,25,79,0.1); }
html[data-theme="light"] .report-footer { border-top-color: rgba(30,25,79,0.08); }
html[data-theme="light"] .report-action-btn { border-color: rgba(30,25,79,0.12); }
html[data-theme="light"] .report-action-btn:hover { border-color: rgba(30,25,79,0.3); }
html[data-theme="light"] .report-unlock { background: rgba(30,25,79,0.02); }

html[data-theme="light"] .lead-modal-overlay { background: rgba(30,25,79,0.35); }
html[data-theme="light"] .lead-modal { border-color: rgba(30,25,79,0.1); }
html[data-theme="light"] .lead-input { border-color: rgba(30,25,79,0.15); }
html[data-theme="light"] .lead-input:focus { border-color: rgba(30,25,79,0.35); }

html[data-theme="light"] .resume-banner { background: rgba(246,245,245,0.95); border-color: rgba(30,25,79,0.12); box-shadow: 0 4px 20px rgba(0,0,0,0.1); }


/* ============================================================
   INNOVATION TOOLBOX PAGE
   ============================================================ */

.toolbox-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
}

.toolbox {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 1.5rem 5rem;
}

.toolbox-back {
    display: inline-block;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-decoration: none;
    margin-bottom: 2rem;
    transition: color 0.2s;
}
.toolbox-back:hover { color: var(--text); }

.toolbox-page-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--text);
}

.toolbox-page-sub {
    font-size: 0.875rem;
    color: var(--text-dim);
    line-height: 1.55;
    margin-bottom: 3rem;
    max-width: 560px;
}

/* Stage section headers */
.toolbox-stage-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 3rem 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.toolbox-stage-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.2rem 0.65rem;
    border-radius: 4px;
    flex-shrink: 0;
}
.stage-badge-reframe   { color: var(--orange); border: 1px solid var(--orange); }
.stage-badge-ideate    { color: var(--pink);   border: 1px solid var(--pink); }
.stage-badge-debate    { color: var(--teal);   border: 1px solid var(--teal); }
.stage-badge-framework { color: var(--yellow); border: 1px solid var(--yellow); }

.toolbox-stage-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Individual tool entries */
.tool-entry {
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tool-entry:last-child { border-bottom: none; }
.tool-entry-featured { border: 1px solid rgba(241,90,34,0.2); border-radius: 10px; padding: 1.5rem; background: rgba(241,90,34,0.03); }
.tool-entry-cta {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.65rem 1.5rem;
    background: var(--orange);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: opacity 0.2s;
}
.tool-entry-cta:hover { opacity: 0.9; }

/* Toolbox stage colour coding */
.tool-stage-reframe   { border-left: 3px solid var(--orange); }
.tool-stage-ideate    { border-left: 3px solid var(--pink); }
.tool-stage-debate    { border-left: 3px solid var(--teal); }
.tool-stage-framework { border-left: 3px solid var(--yellow); }
.tool-stage-reframe .tool-entry-name   { color: var(--orange); }
.tool-stage-ideate .tool-entry-name    { color: var(--pink); }
.tool-stage-debate .tool-entry-name    { color: var(--teal); }
.tool-stage-framework .tool-entry-name { color: var(--yellow); }
.tool-stage-reframe .tool-entry-cta   { background: var(--orange); }
.tool-stage-ideate .tool-entry-cta    { background: var(--pink); }
.tool-stage-debate .tool-entry-cta    { background: var(--teal); }
.tool-stage-framework .tool-entry-cta { background: var(--yellow); color: #1a1a2e; }
.toolbox-coming-soon {
    margin-top: 2.5rem;
    padding: 1.5rem;
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 10px;
}
.toolbox-coming-soon h3 { font-size: 0.95rem; color: var(--text-dim); margin-bottom: 0.5rem; }
.toolbox-coming-soon p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
html[data-theme="light"] .tool-entry-featured { border-color: rgba(241,90,34,0.15); background: rgba(241,90,34,0.03); }
html[data-theme="light"] .toolbox-coming-soon { border-color: rgba(0,0,0,0.08); }

.tool-entry-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.tool-entry-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.tool-entry-time {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.05);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.tool-entry-desc {
    font-size: 0.875rem;
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.tool-entry-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.tool-meta-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.tool-meta-text {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.55;
    margin: 0;
}

/* Mode label link (in prompt bar) */
.mode-label-link {
    color: inherit;
    text-decoration: none;
}
.mode-label-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Exercise name link (in tool cards) */
.exercise-name-link {
    color: inherit;
    text-decoration: none;
}
.exercise-name-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Intro card exercise name link */
.intro-label-link {
    color: inherit;
    text-decoration: none;
}
.intro-label-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.85;
}

/* "Learn more →" link at bottom of each stage card */
.card-learn-more {
    display: block;
    text-align: right;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-muted);
    padding: 0.6rem 0.25rem 0.25rem;
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.card-learn-more:hover {
    opacity: 1;
    color: var(--text);
}

/* Light theme overrides for toolbox */
html[data-theme="light"] .toolbox-stage-header { border-bottom-color: rgba(30,25,79,0.1); }
html[data-theme="light"] .tool-entry { border-bottom-color: rgba(30,25,79,0.06); }
html[data-theme="light"] .tool-entry-time { background: rgba(30,25,79,0.05); }

/* === WORKSHOP BOARD === */

.workshop-layout {
    display: grid;
    grid-template-columns: 1fr;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    position: relative;
    z-index: 1;
}

.workshop-layout.board-active {
    grid-template-columns: 45fr 55fr;
}

.chat-pane {
    overflow-y: auto;
    padding: 1.5rem;
    padding-bottom: 6rem;
    min-width: 0;
}

.board-pane {
    overflow-y: auto;
    border-left: 1px solid rgba(255,255,255,0.08);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: rgba(255,255,255,0.015);
}

.board-pane.hidden { display: none; }

.board-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.board-close-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    font-size: 0.8rem;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: all 0.2s;
}
.board-close-btn:hover { border-color: rgba(255,255,255,0.3); color: var(--text); }

.board-maximise-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    font-size: 0.8rem;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.board-maximise-btn:hover { border-color: rgba(255,255,255,0.3); color: var(--text); }

/* Full-screen board mode */
.workshop-layout.board-maximised {
    grid-template-columns: 0fr 1fr;
}
.workshop-layout.board-maximised .chat-pane {
    overflow: hidden;
    width: 0;
    padding: 0;
    opacity: 0;
}
body.board-maximised > .input-area {
    display: none;
}

.board-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.5);
    margin: 0;
}

.board-add-card-btn {
    background: none;
    border: 1px dashed rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.4);
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s;
}
.board-add-card-btn:hover {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7);
}

/* Board toggle button in session bar */
.board-toggle {
    position: relative;
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}
.board-toggle:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); }
.board-toggle.active {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
.board-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--orange);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.board-count.hidden { display: none; }

/* Board Zones */
.board-zones {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
}

/* Default board: single column */
.board-grid-default {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Lean Canvas board: 3x3 grid matching the standard canvas layout */
/* Lean Canvas grid — matches Ash Maurya's layout */
.board-grid-canvas {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 0.8fr;
    gap: 1px;
    overflow-y: auto;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    flex: 1;
}
/* Row 1 — top: Problem spans 2 rows, Solution top, UVP spans 2 rows, Unfair top, Segments spans 2 rows */
.board-grid-canvas .board-zone[data-zone="problem"]   { grid-column: 1; grid-row: 1 / 3; }
.board-grid-canvas .board-zone[data-zone="solution"]   { grid-column: 2; grid-row: 1; }
.board-grid-canvas .board-zone[data-zone="uvp"]        { grid-column: 3; grid-row: 1 / 3; }
.board-grid-canvas .board-zone[data-zone="unfair"]     { grid-column: 4; grid-row: 1; }
.board-grid-canvas .board-zone[data-zone="segments"]   { grid-column: 5; grid-row: 1 / 3; }
/* Row 2 — mid: Key Metrics under Solution, Channels under Unfair */
.board-grid-canvas .board-zone[data-zone="metrics"]    { grid-column: 2; grid-row: 2; }
.board-grid-canvas .board-zone[data-zone="channels"]   { grid-column: 4; grid-row: 2; }
/* Row 3 — bottom: Cost Structure left half, Revenue Streams right half */
.board-grid-canvas .board-zone[data-zone="costs"]      { grid-column: 1 / 3; grid-row: 3; }
.board-grid-canvas .board-zone[data-zone="revenue"]    { grid-column: 3 / 6; grid-row: 3; }

.board-grid-canvas .board-zone {
    min-height: 80px;
    border-radius: 0;
    background: var(--bg);
}
/* Zone colour accents — left border per section */
/* Zone borders are neutral — stage colour on board header/border only */
.board-zone { border-left: 3px solid rgba(255,255,255,0.15); }

.board-grid-canvas .zone-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Zone name colours match their section */
/* Zone names are neutral — stage colour is on board header/border only */
.board-zone .zone-name { color: rgba(255,255,255,0.5); }
.board-grid-canvas .board-card-text {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #f5f5f5;
}
.board-grid-canvas .board-card {
    padding: 0.5rem 0.6rem;
}

/* Zone hint text */
.zone-hint {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    margin-bottom: 0.4rem;
    line-height: 1.35;
    font-style: italic;
}
/* Hide hint when zone has cards — JS handles this via zone-hint class toggle */

/* Card colours match zone colours */
/* Card borders use stage colour via --stage-color (set on body) */
.board-card { border-left-color: var(--stage-color, rgba(255,255,255,0.2)); }

/* Inline edit textarea */
.board-card-edit {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    color: rgba(255,255,255,0.9);
    font-size: 0.75rem;
    font-family: var(--font);
    line-height: 1.35;
    padding: 0.25rem;
    resize: vertical;
    outline: none;
}
.board-card-edit:focus {
    border-color: var(--orange);
}

.board-zone {
    background: rgba(255,255,255,0.025);
    border-radius: 8px;
    padding: 0.5rem;
    min-height: 50px;
    transition: background 0.15s, outline 0.15s;
    display: flex;
    flex-direction: column;
}

.board-zone.drag-over {
    background: rgba(255,255,255,0.06);
    outline: 2px dashed rgba(255,255,255,0.2);
    outline-offset: -2px;
}

.zone-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    flex-shrink: 0;
}

.zone-name {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.45);
}

.zone-count {
    font-size: 0.6rem;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.4);
    padding: 0.1rem 0.35rem;
    border-radius: 8px;
    margin-left: auto;
}

.zone-cards {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 8px;
}

.zone-empty {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.2);
    font-style: italic;
    padding: 0.25rem 0;
}

.zone-cards:not(:empty) + .zone-empty { display: none; }

/* Board Cards */
.board-card {
    background: var(--bg);
    border-radius: 6px;
    padding: 0.45rem 0.55rem;
    cursor: grab;
    border-left: 3px solid var(--orange);
    transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
    animation: cardFadeIn 0.25s ease-out;
}

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.board-card:active { cursor: grabbing; }
.board-card.dragging { opacity: 0.4; transform: scale(0.96); }

.board-card-text {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #f5f5f5;
}

.board-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.25rem;
}

.board-card-source {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.3);
}

.board-card-delete {
    background: none;
    border: none;
    color: rgba(255,255,255,0.2);
    cursor: pointer;
    font-size: 0.65rem;
    padding: 0 0.2rem;
    line-height: 1;
}
.board-card-delete:hover { color: rgba(255,255,255,0.6); }

/* Stage colours on card left border */
.board-card[data-stage="reframe"],
.board-card[data-stage="ideate"],
.board-card[data-stage="debate"],
.board-card[data-stage="framework"] { border-left-color: var(--orange); }

/* Add card inline form */
.board-add-inline {
    display: flex;
    gap: 0.35rem;
    padding: 0.35rem;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}
.board-add-inline input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: var(--fg);
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    font-family: var(--font);
}
.board-add-inline select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: var(--fg);
    padding: 0.3rem;
    font-size: 0.7rem;
    font-family: var(--font);
}
.board-add-inline button {
    background: var(--orange);
    border: none;
    color: #fff;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    font-family: var(--font);
}

/* Light theme */
html[data-theme="light"] .board-pane { background: rgba(0,0,0,0.015); border-left-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .board-zone { background: rgba(0,0,0,0.025); }
html[data-theme="light"] .board-zone.drag-over { background: rgba(0,0,0,0.05); outline-color: rgba(0,0,0,0.15); }
html[data-theme="light"] .board-title { color: rgba(0,0,0,0.4); }
html[data-theme="light"] .zone-name { color: rgba(0,0,0,0.4); }
html[data-theme="light"] .zone-count { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.35); }
html[data-theme="light"] .zone-empty { color: rgba(0,0,0,0.2); }
html[data-theme="light"] .board-card { background: #fff; }
html[data-theme="light"] .board-card-text { color: rgba(0,0,0,0.8); }
html[data-theme="light"] .board-card-source { color: rgba(0,0,0,0.3); }
html[data-theme="light"] .board-card-delete { color: rgba(0,0,0,0.2); }
html[data-theme="light"] .board-card-delete:hover { color: rgba(0,0,0,0.5); }
html[data-theme="light"] .board-add-card-btn { border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.35); }
html[data-theme="light"] .board-toggle { border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.4); }

/* Board responsive — full-screen modal below 1024px */
@media (max-width: 1024px) {
    .workshop-layout.board-active { grid-template-columns: 1fr; }
    .board-pane {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: var(--bg);
        padding: 1rem;
        overflow-y: auto;
        border-radius: 0;
    }
    .board-pane.hidden { display: none !important; }
    .board-close-btn {
        font-size: 1.2rem;
        width: 36px;
        height: 36px;
    }
    .board-grid-canvas {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .board-grid-canvas .board-zone {
        grid-column: auto !important;
        grid-row: auto !important;
        min-height: 70px;
    }
    /* Cost/Revenue still span full width on mobile */
    .board-grid-canvas .board-zone[data-zone="costs"],
    .board-grid-canvas .board-zone[data-zone="revenue"] {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 480px) {
    .board-grid-canvas {
        grid-template-columns: 1fr;
    }
    .board-grid-canvas .board-zone {
        grid-column: 1 !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .toolbox { padding: 1.5rem 1rem 4rem; }
    .toolbox-page-title { font-size: 1.3rem; }
    .tool-entry-meta { grid-template-columns: 1fr; gap: 0.9rem; }
    .toolbox-stage-desc { display: none; }
}

/* === TOUR === */
.tour-help-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.2);
    background: transparent;
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.2s, color 0.2s;
}
.tour-help-btn:hover { border-color: var(--orange); color: var(--orange); }
html[data-theme="light"] .tour-help-btn { border-color: rgba(30,25,79,0.2); color: rgba(30,25,79,0.5); }
html[data-theme="light"] .tour-help-btn:hover { border-color: var(--orange); color: var(--orange); }

.tour-overlay {
    position: fixed; inset: 0;
    z-index: 10000;
    pointer-events: none;
    display: none;
}
.tour-overlay:not(.hidden) { display: block; pointer-events: auto; }

.tour-spotlight {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.65);
    transition: all 0.35s ease;
    pointer-events: none;
    z-index: 10001;
}

.tour-tooltip {
    position: absolute;
    background: var(--bg-light, #1a1750);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    max-width: 320px;
    z-index: 10002;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    animation: tourFadeIn 0.3s ease;
}
@keyframes tourFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
html[data-theme="light"] .tour-tooltip { background: #fff; border-color: rgba(30,25,79,0.1); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }

.tour-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 0.75rem;
}
.tour-nav {
    display: flex; align-items: center; justify-content: space-between;
}
.tour-step-count {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-family: var(--mono);
}
.tour-btns { display: flex; gap: 0.5rem; }
.tour-skip {
    background: none; border: none;
    color: var(--text-dim);
    font-size: 0.8rem; cursor: pointer;
    padding: 0.3rem 0.5rem;
}
.tour-skip:hover { color: var(--text); }
.tour-next {
    background: var(--orange);
    color: #fff; border: none;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-size: 0.8rem; font-weight: 600;
    cursor: pointer;
}
.tour-next:hover { opacity: 0.9; }