/**
 * Cloto Focus+Context Layout
 * Drill-down navigation replacing kanban columns.
 * Prefix: fc- (focus-context)
 * Tokens: --fc-*
 *
 * Active only when FBW.config.layoutFC is true.
 */

/* ══════════════════════════════════════════
   Body override — allow native scroll
   cloto-reset.css sets html,body { height:100vh; overflow:hidden }
   which prevents scrolling. When FC is active we need body scroll.
   ══════════════════════════════════════════ */
html.fc-active,
body.cloto-app.fc-active {
    height: auto;
    overflow: visible;
}

/* ══════════════════════════════════════════
   Design tokens — dark theme (Fase 0)
   ══════════════════════════════════════════ */
:root {
    --fc-bg: #0d0f17;
    --fc-surface: #1a1c28;
    --fc-surface-alt: #222436;
    --fc-card-bg: rgba(255,255,255,0.05);
    --fc-card-bg-hover: rgba(255,255,255,0.08);
    --fc-card-bg-selected: rgba(255,255,255,0.12);
    --fc-card-border: rgba(255,255,255,0.10);
    --fc-card-border-selected: rgba(255,255,255,0.30);
    --fc-text-100: #e8e6e1;
    --fc-text-70: #8b949e;
    --fc-text-40: #5a6370;
    --fc-text-25: #404858;
    --fc-text-15: #252d3a;
    --fc-teal: #5ec6c6;
    --fc-teal-a10: rgba(94,198,198,0.10);
    --fc-teal-a20: rgba(94,198,198,0.20);
    --fc-gold: #c9a84c;
    --fc-gold-a06: rgba(201,168,76,0.06);
    --fc-gold-a10: rgba(201,168,76,0.10);
    --fc-gold-a20: rgba(201,168,76,0.20);
    --fc-font-brand: 'Cardo', Georgia, serif;
    --fc-font-body: 'Inter', -apple-system, sans-serif;
    --fc-font-mono: 'JetBrains Mono', monospace;
    --fc-white-04: rgba(255,255,255,0.04);
    --fc-white-06: rgba(255,255,255,0.06);
    --fc-white-08: rgba(255,255,255,0.08);
    --fc-overlay-bg: rgba(13,15,23,0.85);
    --fc-red: #e05555;
    --fc-surface-raised: #22243280;
    --fc-teal-dim: rgba(94,198,198,0.15);
    --fc-teal-glow: rgba(94,198,198,0.06);
    --fc-gold-dim: rgba(201,168,76,0.15);
    --fc-radius: 10px;
    --fc-radius-sm: 6px;
    --fc-transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Light theme overrides */
body.fd-light {
    --fc-bg: #f2efe9;
    --fc-surface: #ffffff;
    --fc-surface-alt: #faf8f4;
    --fc-card-bg: rgba(0,0,0,0.04);
    --fc-card-bg-hover: rgba(0,0,0,0.07);
    --fc-card-bg-selected: rgba(0,0,0,0.08);
    --fc-card-border: rgba(0,0,0,0.12);
    --fc-card-border-selected: rgba(0,0,0,0.25);
    --fc-text-100: #111111;
    --fc-text-70: rgba(17,17,17,0.78);
    --fc-text-40: rgba(17,17,17,0.55);
    --fc-text-25: rgba(17,17,17,0.40);
    --fc-text-15: rgba(17,17,17,0.20);
    --fc-teal: #1a8a8a;
    --fc-teal-a10: rgba(26,138,138,0.10);
    --fc-teal-a20: rgba(26,138,138,0.20);
    --fc-gold: #8a6d18;
    --fc-gold-a06: rgba(138,109,24,0.06);
    --fc-gold-a10: rgba(138,109,24,0.10);
    --fc-gold-a20: rgba(138,109,24,0.20);
    --fc-white-04: rgba(0,0,0,0.03);
    --fc-white-06: rgba(0,0,0,0.05);
    --fc-white-08: rgba(0,0,0,0.08);
    --fc-overlay-bg: rgba(255,255,255,0.85);
    --fc-red: #c94444;
    --fc-surface-raised: rgba(0,0,0,0.03);
    --fc-teal-dim: rgba(60,160,160,0.12);
    --fc-teal-glow: rgba(60,160,160,0.06);
    --fc-gold-dim: rgba(170,140,50,0.12);
}

/* Light mode card shadows — disabled in chat mode to avoid side bands */
body.fd-light .fc-focus-card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body.fd-light .fc-chat-active .fc-focus-card {
    box-shadow: none;
    border-color: transparent;
}
.fc-chat-active .fc-focus-card,
.fc-chat-active .fc-focus-card.is-explore,
.fc-chat-active .fc-focus-card.is-expand,
.fc-chat-active .fc-focus-card.is-woven {
    border: none;
    background: transparent;
    box-shadow: none;
    padding-left: 32px;
}
body.fd-light .fc-child-card {
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
body.fd-light .fc-weaving-card {
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    background: #fdfcf9;
}
body.fd-light .fc-focus-card__logline {
    border-left-color: var(--fc-teal);
}
body.fd-light .fc-focus-card__meta {
    color: var(--fc-text-40);
}
body.fd-light .fc-weaving-char-section {
    border-bottom-color: rgba(0,0,0,0.06);
}
body.fd-light .tw-char-card,
body.fd-light .tw-relation-card,
body.fd-light .tw-promise,
body.fd-light .tw-world-section,
body.fd-light .tw-timeline-trigger {
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
body.fd-light .tw-relation-type-badge {
    background: var(--fc-surface);
}
body.fd-light .tw-section-title::after {
    background: rgba(0,0,0,0.1);
}

/* FC active body background */
body.cloto-app.fc-active {
    background: var(--fc-bg);
}

/* ══════════════════════════════════════════
   Unified header (logo + breadcrumb + actions)
   ══════════════════════════════════════════ */
.fc-header {
    display: flex;
    align-items: center;
    padding: 0 24px;
    height: 48px;
    position: sticky;
    z-index: 110;
    top: 0;
    z-index: 10;
    background: var(--cloto-surface);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}
body.fd-light .fc-header {
    background: var(--cloto-surface);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.fc-header__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    margin-right: 16px;
    flex-shrink: 0;
    border-radius: var(--fc-radius-sm, 6px);
    transition: opacity var(--fc-transition), background var(--fc-transition);
    padding: 4px;
}
.fc-header__logo:hover {
    opacity: 0.8;
    background: rgba(94, 198, 198, 0.08);
}
.fc-header__logo svg { width: 24px; height: 24px; display: block; }
.fc-header__breadcrumb {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.fc-header__breadcrumb::-webkit-scrollbar { display: none; }
.fc-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 16px;
}
.fc-header__action-btn {
    background: none;
    border: none;
    color: var(--fc-text-40);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--fc-radius-sm);
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.fc-header__action-btn:hover { color: var(--fc-text-70); }
.fc-header__action-btn svg { width: 16px; height: 16px; }

/* Map button — full brightness */
.fc-header__map-btn { color: var(--fc-text-100); }
.fc-header__map-btn:hover { color: var(--fc-teal); }
body.fd-light .fc-header__map-btn { color: rgba(0,0,0,0.7); }
body.fd-light .fc-header__map-btn:hover { color: #3a9999; }

/* Theme toggle — subdued */
#fc-theme-toggle { opacity: 0.5; }
#fc-theme-toggle:hover { opacity: 0.8; }
body.fd-light .fc-theme-icon--light { display: none; }
body:not(.fd-light) .fc-theme-icon--dark { display: none; }

/* Onboarding: welcome note + telaio subtitle */
.wiz-landing__note {
    font-size: 13px;
    color: var(--fc-text-40);
    margin-top: 8px;
}
.wam-modal__subtitle {
    font-size: 15px;
    font-style: italic;
    color: var(--fc-text-40);
    text-align: center;
    margin: -8px 0 8px;
}

/* ══════════════════════════════════════════
   Phase progress bar (FC standalone, above chat)
   ══════════════════════════════════════════ */
.fc-phase-bar {
    display: flex;
    gap: 12px;
    padding: 10px 0 10px;
    justify-content: center;
    margin: 0 auto;
    flex-shrink: 0;
}
.fc-phase-segment {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    transition: background 0.6s ease, transform 0.4s ease;
}
.fc-phase-segment.is-in-progress {
    background: var(--fc-teal);
    opacity: 0.4;
}
.fc-phase-segment.is-reached {
    background: var(--fc-teal);
    transform: scale(1.3);
}
.fc-phase-bar.is-complete .fc-phase-segment.is-reached {
    background: var(--fc-gold);
    animation: phase-dot-gold 0.6s ease both;
}
.fc-phase-bar.is-complete .fc-phase-segment.is-reached:nth-child(2) { animation-delay: 0.15s; }
.fc-phase-bar.is-complete .fc-phase-segment.is-reached:nth-child(3) { animation-delay: 0.3s; }
@keyframes phase-dot-gold {
    0%   { background: var(--fc-teal); transform: scale(1.3); }
    50%  { transform: scale(1.8); }
    100% { background: var(--fc-gold); transform: scale(1.3); }
}
body.fd-light .fc-phase-segment {
    background: rgba(0,0,0,0.15);
}
body.fd-light .fc-phase-segment.is-in-progress {
    background: var(--fc-teal);
    opacity: 0.4;
}
body.fd-light .fc-phase-segment.is-reached {
    background: var(--fc-teal);
}
body.fd-light .fc-phase-bar.is-complete .fc-phase-segment.is-reached {
    background: var(--fc-gold);
}

/* ══════════════════════════════════════════
   Breadcrumb (inside fc-header__breadcrumb)
   ══════════════════════════════════════════ */
.fc-breadcrumb__item {
    font-size: 13px;
    color: var(--fc-text-40);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--fc-radius-sm);
    transition: all var(--fc-transition);
    background: transparent;
    border: none;
    font-family: var(--fc-font-body);
    white-space: nowrap;
    flex-shrink: 0;
}
.fc-breadcrumb__item:hover {
    color: var(--fc-teal);
    background: var(--fc-teal-a10);
}
.fc-breadcrumb__sep {
    color: var(--fc-text-25);
    font-size: 11px;
    flex-shrink: 0;
}
.fc-breadcrumb__current {
    font-size: 13px;
    color: var(--fc-text-70);
    font-weight: 600;
    padding: 4px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   Main container
   ══════════════════════════════════════════ */
.fc-main {
    flex: 1;
    display: none;
    flex-direction: column;
    padding: 24px 32px 32px;
    gap: 24px;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.fc-main.is-active {
    display: flex;
}

/* Vertical centering when content is shorter than viewport */
.fc-main:not(.fc-chat-active):not(.fc-main--writing) #fc-content-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 48px - 48px); /* viewport minus header minus padding */
}
.fc-main:not(.fc-chat-active):not(.fc-main--writing) #fc-content-area.has-overflow {
    justify-content: flex-start;
}

/* ══════════════════════════════════════════
   LEGACY FC: Focus card, children, weaving, explorer, context bar, card panel
   Dead when useSommario=true — sommario uses its own layout
   ══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   Focus card (the current card, large)
   ══════════════════════════════════════════ */
.fc-focus-card {
    background: var(--fc-surface);
    border: 1px solid var(--fc-white-08);
    border-radius: var(--fc-radius);
    padding: 32px;
    position: relative;
    z-index: 1;
}
/* Focus card — state borders */
.fc-focus-card.is-explore {
    border-left: 3px solid var(--fc-teal);
    padding-left: 29px;
}
.fc-focus-card.is-expand {
    border-left: 3px solid var(--fc-teal);
    border-image: linear-gradient(to bottom, var(--fc-teal, #5ec6c6), var(--fc-gold, #c9a84c)) 1;
    padding-left: 29px;
}
.fc-focus-card.is-woven {
    border-left: 3px solid var(--fc-gold);
    padding-left: 29px;
}
.fc-focus-card__title {
    font-family: var(--fc-font-brand);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--fc-text-100);
    line-height: 1.3;
    margin-bottom: 12px;
}
.fc-focus-card__logline {
    font-family: var(--fc-font-brand);
    font-size: 21px;
    color: var(--fc-text-100);
    line-height: 1.7;
    font-style: normal;
    margin-bottom: 16px;
    padding-left: 16px;
    border-left: 3px solid var(--fc-teal);
}
.fc-focus-card__synopsis {
    font-family: var(--fc-font-brand);
    font-size: 17px;
    color: var(--fc-text-100);
    line-height: 1.7;
    font-style: normal;
    padding-left: 16px;
    border-left: 3px solid var(--fc-teal);
    margin-bottom: 16px;
}
.fc-focus-card__synopsis p {
    margin-bottom: 8px;
}
.fc-focus-card__meta {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fc-white-06);
}
.fc-focus-card__meta-item {
    font-size: 13px;
    color: var(--fc-text-40);
    font-family: var(--fc-font-mono);
    display: flex;
    align-items: center;
    gap: 4px;
}


/* Story summary — root card only, inside the focus card after synopsis */
.fc-story-summary {
    font-family: var(--fc-font-body);
    font-size: 13px;
    color: var(--fc-text-40);
    margin-top: 8px;
    letter-spacing: 0.01em;
}

/* Focus card — CTA buttons */
.fc-focus-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.fc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-family: var(--fc-font-body);
    font-weight: 500;
    border: 1px solid;
    border-radius: var(--fc-radius-sm);
    cursor: pointer;
    transition: all var(--fc-transition);
}
.fc-btn--primary {
    color: var(--fc-teal);
    background: var(--fc-teal-a10);
    border-color: var(--fc-teal-a20);
}
.fc-btn--primary:hover {
    background: var(--fc-teal-a20);
}
.fc-btn--gold {
    color: var(--fc-gold);
    background: rgba(201,168,76,0.15);
    border-color: rgba(201,168,76,0.35);
}
.fc-btn--gold:hover {
    background: rgba(201,168,76,0.25);
}
.fc-focus-hint {
    font-family: var(--fc-font-body);
    font-size: 12px;
    color: var(--fc-text-40);
    margin-top: 8px;
    font-style: italic;
    line-height: 1.5;
}
body.fd-light .fc-focus-hint {
    color: #6b7580;
}
.fc-btn--ghost {
    color: var(--fc-text-40);
    background: transparent;
    border-color: var(--fc-white-08);
}
.fc-btn--ghost:hover {
    color: var(--fc-text-70);
    background: var(--fc-white-04);
}

/* ══════════════════════════════════════════
   Children section
   ══════════════════════════════════════════ */
/* Spacing between focus card and children */
.fc-children-section {
    margin-top: 32px;
}

/* ══════════════════════════════════════════
   Tree connector: focus card → children
   ══════════════════════════════════════════ */
.fc-children-section.fc-has-tree {
    margin-top: 32px;
    position: relative;
}

/* Light mode: slightly higher opacity for visibility */
.fd-light .fc-connection-svg path {
    opacity: 0.30;
}

/* ══════════════════════════════════════════
   Child cards grid (3 columns)
   ══════════════════════════════════════════ */
.fc-children-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    position: relative;
}

.fc-child-card {
    background: var(--fc-surface);
    border: 1px solid var(--fc-card-border);
    border-radius: var(--fc-radius);
    padding: 20px;
    cursor: pointer;
    transition: all var(--fc-transition);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 120px;
}
.fc-child-card:hover {
    background: var(--fc-surface-alt);
    border-color: var(--fc-card-border-selected);
    transform: translateY(-2px);
}
.fc-child-card:active {
    transform: translateY(0);
}

/* Child card states — unified: explore | expandable | expanded | woven */
.fc-child-card.is-explore {
    border-left: 3px solid var(--fc-teal);
    padding-left: 17px;
}
.fc-child-card.is-expandable {
    border-left: 3px solid transparent;
    border-image: linear-gradient(to bottom, var(--fc-teal, #5ec6c6), var(--fc-gold, #c9a84c)) 1;
    padding-left: 17px;
}
.fc-child-card.is-expanded {
    opacity: 0.55;
}
.fc-child-card.is-expanded:hover {
    opacity: 0.8;
}
.fc-child-card.is-woven {
    border-left: 3px solid var(--fc-gold);
    padding-left: 17px;
    background: var(--fc-gold-a06);
}

/* Child card content */
.fc-child-card__num {
    font-size: 11px;
    font-family: var(--fc-font-mono);
    color: var(--fc-text-25);
    margin-bottom: 6px;
}
.fc-child-card__title {
    font-family: var(--fc-font-brand);
    font-size: 17px;
    font-weight: 400;
    color: var(--fc-text-100);
    line-height: 1.3;
    margin-bottom: 6px;
}
.fc-child-card__logline {
    font-size: 13px;
    color: var(--fc-text-40);
    line-height: 1.55;
    flex: 1;
}

/* Status badges — informational (expanded, woven) */
.fc-child-card__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    font-size: 10px;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.fc-child-card__status.s-expanded {
    color: var(--fc-text-40);
    background: transparent;
}
.fc-child-card__status.s-woven {
    color: var(--fc-gold);
    background: transparent;
}

/* Badge CTA buttons (explore/expand/write) — same family as .fc-btn */
button.fc-child-card__status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-top: 14px;
    padding: 6px 14px;
    font-size: 13px;
    font-family: var(--fc-font-body);
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: var(--fc-radius-sm);
    cursor: pointer;
    transition: all var(--fc-transition);
    border: 1px solid;
    line-height: 1.3;
}
button.fc-child-card__status.s-explore {
    color: var(--fc-teal);
    background: var(--fc-teal-a10);
    border-color: var(--fc-teal-a20);
}
button.fc-child-card__status.s-explore:hover {
    background: var(--fc-teal-a20);
}
button.fc-child-card__status.s-expand {
    color: var(--fc-teal);
    background: var(--fc-teal-a10);
    border-color: var(--fc-teal-a20);
}
button.fc-child-card__status.s-expand:hover {
    background: var(--fc-teal-a20);
}
button.fc-child-card__status.s-write {
    color: var(--fc-gold);
    background: rgba(201,168,76,0.15);
    border-color: rgba(201,168,76,0.35);
}
button.fc-child-card__status.s-write:hover {
    background: rgba(201,168,76,0.25);
}
button.fc-child-card__status:active {
    transform: scale(0.97);
}
body.fd-light button.fc-child-card__status.s-write {
    background: #c9a84c;
    border-color: #b8962e;
    color: #2a2310;
}
body.fd-light button.fc-child-card__status.s-write:hover {
    background: #d4b45a;
    border-color: #c9a84c;
}

/* Container for double badges (Espandi + Scrivi) */
.fc-child-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.fc-child-badges .fc-child-card__status {
    margin-top: 0;
    padding-top: 0;
}

/* Badge loading state */
.fc-badge--loading {
    pointer-events: none;
    opacity: 0.8;
}

/* Drill-down arrow */
.fc-child-card__arrow {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 14px;
    color: var(--fc-text-25);
    opacity: 0;
    transition: opacity var(--fc-transition), transform var(--fc-transition);
}
.fc-child-card:hover .fc-child-card__arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Leaf indicator */
.fc-child-card__leaf {
    font-size: 11px;
    color: var(--fc-gold);
    opacity: 0.6;
    margin-left: 4px;
}

/* Reading text (tessuto read-only) */
.fc-reading-text {
    font-family: var(--fc-font-brand);
    font-size: 17px;
    line-height: 1.7;
    color: var(--fc-text-100);
    margin-top: 8px;
}

/* Tessila count */
.fc-tessila-count {
    font-family: var(--fc-font-mono);
    font-size: 12px;
    color: var(--fc-text-25);
    margin-top: 16px;
}

/* Back link */
.fc-back-link {
    display: inline-block;
    margin-bottom: 8px;
    background: none;
    border: none;
    color: var(--fc-text-40);
    font-family: var(--fc-font-body);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    transition: color var(--fc-transition);
}
.fc-back-link:hover {
    color: var(--fc-text-70);
}

/* ══════════════════════════════════════════
   Weaving card (sibling to focus card)
   ══════════════════════════════════════════ */
.fc-weaving-card {
    background: var(--fc-surface);
    border: 1px solid var(--fc-card-border);
    border-radius: var(--fc-radius);
    padding: 24px;
    margin-top: 24px;
}
.fc-weaving-card__header {
    margin-bottom: 16px;
}
.fc-weaving-card__icon {
    font-size: 18px;
}
.fc-weaving-card__title {
    font-family: var(--fc-font-brand);
    font-size: 18px;
    color: var(--fc-text-100);
}
.fc-weaving-card__content {
    /* populated by JS */
}

/* Legacy fili toggle (unused, kept for kanban compat) */
.fc-fili-toggle {
    background: none;
    border: none;
    color: var(--fc-text-70);
    font-family: var(--fc-font-body);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 0;
    transition: color var(--fc-transition);
}
.fc-fili-toggle:hover {
    color: var(--fc-text-100);
}
.fc-fili-content {
    padding: 12px 0;
}

/* ══════════════════════════════════════════
   Per-card weaving: entity-based layout
   ══════════════════════════════════════════ */

/* Time & place */
.fc-weaving-time-place {
    font-family: var(--fc-font-body);
    font-size: 14px;
    color: var(--fc-text-70);
    font-style: normal;
    margin-bottom: 20px;
}

/* Character grid */
.fc-weaving-char-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    .fc-weaving-char-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mini-card (closed) */
.fc-weaving-char-card {
    background: var(--fc-card-bg);
    border: 1px solid var(--fc-card-border);
    border-radius: var(--fc-radius-sm);
    padding: 12px 16px;
    cursor: pointer;
    transition: background var(--fc-transition);
}
.fc-weaving-char-card:hover {
    background: var(--fc-card-bg-hover);
}
.fc-weaving-char-card__name {
    font-family: var(--fc-font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--fc-text-100);
}
.fc-weaving-char-card__role {
    font-family: var(--fc-font-body);
    font-size: 12px;
    color: var(--fc-text-40);
    font-style: normal;
}
/* Expanded character card */
.fc-weaving-char-expanded {
    background: var(--fc-card-bg);
    border: 1px solid var(--fc-card-border);
    border-radius: var(--fc-radius-sm);
    padding: 20px;
    margin-bottom: 20px;
}
.fc-weaving-char-expanded__header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.fc-weaving-char-expanded__name {
    font-family: var(--fc-font-body);
    font-weight: 600;
    font-size: 16px;
    color: var(--fc-text-100);
}
.fc-weaving-char-expanded__role {
    font-family: var(--fc-font-body);
    font-size: 14px;
    color: var(--fc-text-40);
    font-style: normal;
    margin-left: 4px;
}
.fc-weaving-char-expanded__close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--fc-text-40);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.fc-weaving-char-expanded__close:hover {
    color: var(--fc-text-70);
}
.fc-weaving-char-expanded__physical {
    font-family: var(--fc-font-body);
    line-height: 1.5;
}
.fc-weaving-char-expanded__physical-identity {
    font-size: 14px;
    color: var(--fc-text-40);
    font-style: normal;
}
.fc-weaving-char-expanded__physical-momentary {
    font-size: 14px;
    color: var(--fc-text-70);
    margin-top: 2px;
}
.fc-weaving-char-expanded__state {
    font-family: var(--fc-font-body);
    font-size: 14px;
    color: var(--fc-text-70);
    line-height: 1.6;
}
.fc-weaving-char-expanded__state p {
    margin: 0;
}
.fc-weaving-char-expanded__body {
    /* container for all sections */
}

/* Section separators inside expanded card */
.fc-weaving-char-section {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.fc-weaving-char-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Sub-section titles inside expanded card */
.fc-weaving-section-title {
    font-family: var(--fc-font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fc-text-40);
    margin-bottom: 6px;
}

/* Generic weaving items (tensions, arcs, relationships, doesnt_know) */
.fc-weaving-item {
    padding: 4px 0;
    font-family: var(--fc-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--fc-text-70);
}
.fc-weaving-item--rel strong {
    font-weight: 600;
    color: var(--fc-text-100);
}
.fc-weaving-bullet {
    color: var(--fc-teal);
    font-size: 10px;
    margin-right: 8px;
}
.fc-weaving-arc-from {
    color: var(--fc-text-40);
}
.fc-weaving-arc-to {
    color: var(--fc-text-100);
    font-weight: 600;
}
.fc-weaving-charname {
    font-weight: 600;
    color: var(--fc-text-100);
}

/* Legacy section styles (used by root FBW.fili.render) */
.fc-weaving-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fc-white-06);
}
.fc-weaving-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.fc-weaving-section__title {
    font-family: var(--fc-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fc-text-25);
    margin-bottom: 8px;
}
.fc-weaving-character {
    margin-bottom: 12px;
}
.fc-weaving-character:last-child {
    margin-bottom: 0;
}
.fc-weaving-character__name {
    font-family: var(--fc-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--fc-text-100);
}
.fc-weaving-character__detail {
    font-family: var(--fc-font-body);
    font-size: 14px;
    color: var(--fc-text-70);
    line-height: 1.5;
}
.fc-weaving-arc {
    margin-bottom: 8px;
}
.fc-weaving-arc:last-child {
    margin-bottom: 0;
}
.fc-weaving-arc__name {
    font-family: var(--fc-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--fc-text-100);
}
.fc-weaving-arc__transition {
    font-family: var(--fc-font-body);
    color: var(--fc-text-70);
    font-size: 14px;
    line-height: 1.5;
}

/* ══════════════════════════════════════════
   Editor mount (scene editor inside focus card)
   ══════════════════════════════════════════ */
.fc-editor-mount {
    margin-top: 16px;
}
/* Hide redundant scene headers, legacy toggle, and nota button inside FC */
.fc-editor-mount .cw-scene-title,
.fc-editor-mount .cw-scene-synopsis,
.fc-editor-mount .cw-restore-original,
.fc-editor-mount .cw-scene-nota-btn {
    display: none;
}
/* Match reading view typography */
.fc-editor-mount .cw-scene-textarea {
    font-size: 17px;
    line-height: 1.7;
    font-family: var(--fc-font-brand);
    color: var(--fc-text-100);
    min-height: 42vh;
}
.fc-editor-mount .cw-tessuto-view {
    font-size: 17px;
    line-height: 1.7;
    font-family: var(--fc-font-brand);
    color: var(--fc-text-100);
}
.fc-editor-mount .cw-scene-bar {
    justify-content: flex-start;
}

/* ══════════════════════════════════════════
   Q&A mount (wizard chat inside focus card)
   ══════════════════════════════════════════ */
/* ── Onboarding intro block ── */
.fc-onboarding-intro {
    max-width: 520px;
    margin: 0 auto var(--space-8, 16px) auto;
    text-align: center;
    font-family: var(--cloto-font-ui);
    font-size: var(--cloto-fs-sm, 13px);
    color: var(--cloto-text-60, rgba(255,255,255,0.6));
    line-height: 1.7;
}
.fc-onboarding-intro p {
    margin: 0 0 var(--space-3, 6px) 0;
}
.fc-onboarding-intro p:last-child {
    margin-bottom: 0;
}

/* ── Collapsible parent draft ── */
.fc-parent-draft {
    margin: var(--space-4, 16px) 0;
}
.fc-parent-draft__toggle {
    font-family: var(--fc-font-ui, var(--cloto-font-ui));
    font-size: 12px;
    color: var(--fc-text-50, var(--cloto-text-50));
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.fc-parent-draft__toggle:hover {
    color: var(--fc-text-50, var(--cloto-text-60));
}
.fc-parent-draft__chevron {
    transition: transform 0.2s ease;
    font-size: 10px;
}
.fc-parent-draft.is-open .fc-parent-draft__chevron {
    transform: rotate(180deg);
}
.fc-parent-draft__content {
    display: none;
    font-family: var(--cloto-font-body, Georgia, serif);
    font-size: 15px;
    color: var(--fc-text-40, var(--cloto-text-40));
    line-height: 1.7;
    padding: var(--space-4, 16px) 0;
    border-top: 1px solid var(--fc-card-border, rgba(255,255,255,0.06));
    margin-top: var(--space-2, 8px);
}
.fc-parent-draft.is-open .fc-parent-draft__content {
    display: block;
}
body.fd-light .fc-onboarding-intro {
    color: rgba(0,0,0,0.55);
}

/* Landing mode inside chat-active: center the whole block vertically */
.fc-chat-active:has(.wiz-conversation--landing) {
    justify-content: center;
}
.fc-chat-active:has(.wiz-conversation--landing) #fc-content-area,
.fc-chat-active:has(.wiz-conversation--landing) .fc-focus-card,
.fc-chat-active:has(.wiz-conversation--landing) .fc-focus-card__qa-mount,
.fc-chat-active:has(.wiz-conversation--landing) .fbw-wizard-overlay {
    flex: none;
    overflow: visible;
}
.fc-chat-active .wiz-conversation--landing {
    flex: none;
}
.fc-chat-active .wiz-conversation--landing ~ .wiz-input {
    flex: none;
}

.fc-focus-card__qa-mount {
    margin-top: 16px;
}
.fc-focus-card__qa-mount .wiz-input {
    background: transparent;
    padding-top: 8px;
}
.fc-focus-card__qa-mount .wiz-input__bar {
    background: var(--fc-surface);
    border-color: var(--fc-card-border);
}
/* ── Chat-active: viewport-locked layout (WhatsApp-style) ──
   DOM chain: body > .fc-header(48px) + .fc-main > #fc-content-area > .fc-focus-card > #fc-qa-mount > .wiz-conversation + .wiz-input
   Every level must be flex-column + overflow:hidden so the input stays pinned at the bottom.
*/
.fc-main.fc-chat-active {
    /* JS sets exact height via window.innerHeight; CSS is fallback */
    height: calc(100vh - 48px - 24px);
    height: calc(100dvh - 48px - 24px);
    overflow: hidden;
    padding-bottom: 0;
    gap: 0;
}
.fc-chat-active #fc-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.fc-chat-active .fc-focus-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.fc-chat-active .fc-focus-card__title,
.fc-chat-active .fc-focus-card__logline,
.fc-chat-active .fc-context-bar,
.fc-chat-active .fc-back-link {
    flex-shrink: 0;
}
.fc-chat-active .fc-focus-card__qa-mount {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    margin-top: 0;
}
.fc-chat-active .fc-focus-card__qa-mount .fbw-wizard-overlay {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.fc-chat-active .wiz-conversation {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    padding: 8px 12px;
}
/* Push chat messages to bottom — but only when there ARE messages */
.fc-chat-active .wiz-conversation:not(.wiz-conversation--start)::before {
    content: '';
    flex: 1;
}
.fc-chat-active .wiz-conversation.wiz-conversation--start {
    justify-content: flex-start;
}
.fc-chat-active .wiz-conversation.wiz-conversation--start .fc-chat-start-container {
    margin: auto 0;
}
.fc-chat-active .wiz-input {
    flex-shrink: 0;
    position: relative;
    padding-bottom: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.fc-chat-active .wiz-bubble {
    margin-bottom: 8px;
}
/* ── Pre-explore: hide context bar and dots until Q&A starts ── */
.fc-pre-explore .fc-context-bar,
.fc-pre-explore .fc-phase-bar,
.fc-pre-explore .wiz-input {
    display: none;
}

/* ── Start exploration button (shown before Q&A begins) ── */
.fc-chat-start-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    gap: 16px;
}
.fc-chat-start-synopsis {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 14px;
    line-height: 1.6;
    color: var(--fc-text-70, rgba(232,230,225,0.7));
    font-style: italic;
    text-align: center;
    max-width: 480px;
    overflow-y: auto;
}
.fc-chat-start-btn {
    padding: 10px 28px;
    border-radius: 20px;
    border: 1px solid var(--fc-teal);
    background: rgba(94,198,198,0.08);
    color: var(--fc-teal);
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.fc-chat-start-btn:hover {
    background: rgba(94,198,198,0.15);
}
.fc-chat-start-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.fc-chat-start-hint {
    font-size: 12px;
    color: var(--fc-text-25, rgba(232,230,225,0.25));
    font-style: italic;
    text-align: center;
}
body.fd-light .fc-chat-start-synopsis {
    color: rgba(0,0,0,0.65);
}
body.fd-light .fc-chat-start-btn {
    border-color: #3a9999;
    color: #3a9999;
    background: rgba(60,160,160,0.06);
}
body.fd-light .fc-chat-start-btn:hover {
    background: rgba(60,160,160,0.12);
}
body.fd-light .fc-chat-start-hint {
    color: rgba(0,0,0,0.25);
}

/* Phase dots riattivati — tracking progresso Q&A implementato */
/* Compact focus card padding in chat mode */
.fc-chat-active .fc-focus-card {
    padding: 12px 16px;
    border: none;
    background: transparent;
}

/* ── Context bar (logline summary for outlined child cards) ── */
.fc-context-bar {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(94,198,198,0.06);
    border-left: 2px solid var(--fc-teal);
    border-radius: 0 var(--fc-radius-sm) var(--fc-radius-sm) 0;
    margin-bottom: 4px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}
.fc-context-bar__text {
    flex: 1;
    font-size: 13px;
    color: var(--fc-text-70);
    font-style: normal;
    line-height: 1.4;
    transition: max-height 0.2s ease;
}
.fc-context-bar__toggle {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--fc-text-25);
    line-height: 1.4;
    margin-top: 1px;
    transition: transform 0.2s ease;
}
.fc-context-bar.is-collapsed .fc-context-bar__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fc-context-bar.is-collapsed .fc-context-bar__toggle {
    transform: rotate(-90deg);
}

/* Hide close button in FC — breadcrumb handles navigation */
.fc-focus-card__qa-mount .wiz-prefunnel-close {
    display: none;
}
/* Q&A disclaimer — centered, subtle */
.fc-focus-card__qa-mount .wiz-input__hint {
    text-align: center;
    opacity: 0.55;
    font-size: 12px;
    color: var(--fc-text-40);
    margin-top: 8px;
}
/* Send button in FC chat */
.fc-focus-card__qa-mount .wiz-input__send--inactive {
    background: var(--fc-teal-a10);
    color: var(--fc-text-25);
}
.fc-focus-card__qa-mount .wiz-input__send--active {
    background: var(--fc-teal);
    color: #fff;
    box-shadow: 0 0 12px var(--fc-teal-a20);
}
.fc-focus-card__qa-mount .wiz-input__send--active:hover {
    opacity: 0.85;
}
body.fd-light .fc-focus-card__qa-mount .wiz-input__send--inactive {
    background: rgba(26,138,138,0.10);
    color: rgba(17,17,17,0.25);
}
body.fd-light .fc-focus-card__qa-mount .wiz-input__send--active {
    background: #0e7a7a;
    color: #fff;
    box-shadow: 0 2px 8px rgba(14,122,122,0.4);
}
/* Hide history dividers / phase separators / card dividers / logline header in FC chat */
.fc-focus-card__qa-mount .wiz-history,
.fc-focus-card__qa-mount .wiz-phase-separator,
.fc-focus-card__qa-mount .wiz-card-divider,
.fc-focus-card__qa-mount .wiz-logline-header {
    display: none;
}

/* ══════════════════════════════════════════
   Zoom overlay (drill-down transition)
   ══════════════════════════════════════════ */
.fc-zoom-overlay {
    position: fixed;
    inset: 0;
    background: var(--fc-overlay-bg);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.fc-zoom-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ══════════════════════════════════════════
   Explorer — Column Navigation (Miller/Finder)
   ══════════════════════════════════════════ */
.fc-explorer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}
.fc-explorer-overlay.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}
.fc-explorer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}
.fc-explorer-modal {
    position: relative;
    background: var(--fc-surface);
    border: 1px solid var(--fc-card-border);
    border-radius: 16px;
    width: 95%;
    max-width: 960px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.fc-explorer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--fc-card-border);
    flex-shrink: 0;
}
.fc-explorer-header > .fc-explorer-title {
    font-family: var(--fc-font-brand);
    font-size: 18px;
    font-weight: 600;
    color: var(--fc-text-70);
}
.fc-explorer-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--fc-white-06);
    color: var(--fc-text-40);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--fc-transition);
}
.fc-explorer-close:hover {
    background: rgba(232,230,225,0.1);
    color: var(--fc-text-70);
}

/* Columns container */
.fc-explorer {
    display: flex;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
}
.fc-explorer::-webkit-scrollbar { height: 4px; }
.fc-explorer::-webkit-scrollbar-thumb { background: var(--fc-text-40); border-radius: 2px; }

/* Single column */
.fc-explorer-col {
    min-width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    position: relative;
}
/* Divider between columns */
.fc-explorer-col + .fc-explorer-col::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: var(--fc-card-border);
}
.fc-explorer-col.on-path + .fc-explorer-col.on-path::before {
    background: rgba(94,198,198,0.2);
}
.fc-explorer-col.on-path {
    background: rgba(94,198,198,0.02);
}

/* Item row */
.fc-explorer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    cursor: pointer;
    transition: all 0.12s;
    border-left: 3px solid transparent;
    margin: 1px 0;
}
.fc-explorer-item:hover {
    background: rgba(232,230,225,0.03);
}

/* Status dot */
.fc-explorer-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fc-explorer-dot--explore  { background: var(--fc-teal); opacity: 0.7; }
.fc-explorer-dot--expand   { background: linear-gradient(135deg, var(--fc-teal), var(--fc-gold)); }
.fc-explorer-dot--expanded { background: var(--fc-text-40); }
.fc-explorer-dot--woven    { background: var(--fc-gold); }

/* Title wrapper */
.fc-explorer-item > .fc-explorer-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fc-explorer-title-text {
    font-family: var(--fc-font-brand);
    font-size: 17px;
    font-weight: 500;
    color: var(--fc-text-40);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Arrow chevron */
.fc-explorer-arrow {
    color: var(--fc-text-40);
    font-size: 16px;
    flex-shrink: 0;
    opacity: 0.4;
    transition: color 0.12s;
}

/* "Vai →" link for selected non-leaf items */
.fc-explorer-goto {
    font-family: var(--fc-font-body);
    font-size: 11px;
    color: var(--fc-teal);
    opacity: 0.7;
    cursor: pointer;
    transition: all 0.12s;
}
.fc-explorer-goto:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ── Item states ── */

/* On active path */
.fc-explorer-item.on-path {
    background: rgba(94,198,198,0.08);
    border-left-color: var(--fc-teal);
}
.fc-explorer-item.on-path .fc-explorer-title-text {
    color: var(--fc-teal);
    font-weight: 600;
}
.fc-explorer-item.on-path .fc-explorer-arrow {
    color: rgba(94,198,198,0.4);
    opacity: 1;
}

/* Selected (clicked, showing children) */
.fc-explorer-item.selected {
    background: rgba(94,198,198,0.15);
    border-left-color: var(--fc-teal);
}
.fc-explorer-item.selected .fc-explorer-title-text {
    color: var(--fc-text-100);
    font-weight: 600;
}

/* Current card (where the author IS) */
.fc-explorer-item.current {
    background: rgba(201,168,76,0.1);
    border-left-color: var(--fc-gold);
}
.fc-explorer-item.current .fc-explorer-title-text {
    color: var(--fc-gold);
    font-weight: 600;
    font-size: 18px;
}

/* Leaf — no arrow */
.fc-explorer-item.leaf .fc-explorer-arrow { display: none; }

/* Legend */
.fc-explorer-legend {
    display: flex;
    gap: 20px;
    padding: 14px 24px;
    border-top: 1px solid var(--fc-card-border);
    flex-shrink: 0;
}
.fc-explorer-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fc-font-body);
    font-size: 11px;
    color: var(--fc-text-40);
}

/* ── Light mode ── */
body.fd-light .fc-explorer-backdrop {
    background: rgba(0, 0, 0, 0.4);
}
body.fd-light .fc-explorer-modal {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
body.fd-light .fc-explorer-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.fd-light .fc-explorer-close {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.4);
}
body.fd-light .fc-explorer-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.6);
}
body.fd-light .fc-explorer-col + .fc-explorer-col::before {
    background: rgba(0, 0, 0, 0.06);
}
body.fd-light .fc-explorer-item:hover {
    background: rgba(0, 0, 0, 0.03);
}
body.fd-light .fc-explorer-title-text {
    color: rgba(0, 0, 0, 0.4);
}
body.fd-light .fc-explorer-item.on-path .fc-explorer-title-text {
    color: var(--fc-teal);
}
body.fd-light .fc-explorer-item.selected .fc-explorer-title-text {
    color: rgba(0, 0, 0, 0.85);
}
body.fd-light .fc-explorer-item.current .fc-explorer-title-text {
    color: var(--fc-gold);
}
body.fd-light .fc-explorer-legend {
    border-top-color: rgba(0, 0, 0, 0.06);
}
body.fd-light .fc-explorer-legend-item {
    color: rgba(0, 0, 0, 0.4);
}

/* ══════════════════════════════════════════
   Responsive breakpoints
   ══════════════════════════════════════════ */

/* Tablet: 700-1024px — keep 3 columns, adjust padding */
@media (min-width: 601px) and (max-width: 1024px) {
    .fc-main {
        max-width: 100%;
        padding: 24px 24px 32px;
    }
    .fc-header { padding: 0 24px; }
}

/* Mobile: ≤600px — 1 column */
@media (max-width: 600px) {
    .fc-main {
        max-width: 100%;
        padding: 16px 16px 24px;
    }
    .fc-header {
        padding: 0 16px;
        height: 44px;
    }
    .fc-header__logo { margin-right: 8px; }
    .fc-header__breadcrumb {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .fc-header__breadcrumb::-webkit-scrollbar { display: none; }
    .fc-children-grid {
        grid-template-columns: 1fr;
    }
    .fc-connection-svg { display: none; }
    .fc-children-section.fc-has-tree { margin-top: 24px; }
    .fc-focus-card {
        padding: 20px;
    }
    .fc-focus-card__title {
        font-size: 26px;
    }
    .fc-explorer-modal {
        width: 100%;
        max-height: 90vh;
        border-radius: 8px;
    }
    .fc-explorer-col {
        min-width: 180px;
    }
    /* Mobile: header is 44px */
    .fc-main.fc-chat-active {
        height: calc(100vh - 44px - 24px);
        height: calc(100dvh - 44px - 24px);
    }
}

/* ══════════════════════════════════════════
   Flash — highlights child card on go-up
   ══════════════════════════════════════════ */
.fc-child-card.is-flash {
    animation: fc-flash 1s ease-out;
}
@keyframes fc-flash {
    0%   { box-shadow: 0 0 0 2px var(--fc-teal); }
    100% { box-shadow: 0 0 0 0px transparent; }
}

/* ══════════════════════════════════════════
   Reveal — staggered entrance after expansion
   ══════════════════════════════════════════ */
.fc-child-card.is-reveal {
    animation: fc-childReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
}
.fc-child-card.is-reveal:nth-child(1) { animation-delay: 0s; }
.fc-child-card.is-reveal:nth-child(2) { animation-delay: 0.15s; }
.fc-child-card.is-reveal:nth-child(3) { animation-delay: 0.3s; }
@keyframes fc-childReveal {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   Reduced motion
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .fc-child-card.is-flash,
    .fc-child-card.is-reveal {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .fc-zoom-overlay {
        transition: none;
    }
}

/* ═══════════════════════════════════════════
   WEAVING STATUS — spinner during first weave
   ═══════════════════════════════════════════ */
.fc-weaving-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-top: 16px;
    color: var(--fc-text-40);
    font-family: var(--fc-font-body);
    font-size: 15px;
    font-style: normal;
}
.fc-weaving-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--fc-card-border);
    border-top-color: var(--fc-teal);
    border-radius: 50%;
    animation: fc-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes fc-spin {
    to { transform: rotate(360deg); }
}


/* ══════════════════════════════════════════
   Synopsis loading + collapsible reference
   ══════════════════════════════════════════ */
.fc-synopsis-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    color: var(--fc-text-40);
    font-family: var(--fc-font-body);
    font-size: 15px;
    font-style: normal;
    margin-bottom: 16px;
}
.fc-chat-thinking {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 16px;
    color: var(--fc-text-40);
    font-family: var(--fc-font-body);
    font-size: 14px;
    font-style: italic;
    letter-spacing: 0.01em;
}
.fc-synopsis-collapsible {
    margin-bottom: 16px;
}
.fc-synopsis-collapsible__toggle {
    font-family: var(--fc-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fc-text-40);
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 8px;
    list-style: none;
    transition: color var(--fc-transition);
}
.fc-synopsis-collapsible__toggle::-webkit-details-marker { display: none; }
.fc-synopsis-collapsible__toggle::before {
    content: '\25B6';
    display: inline-block;
    margin-right: 6px;
    font-size: 9px;
    transition: transform 0.2s ease;
}
.fc-synopsis-collapsible[open] > .fc-synopsis-collapsible__toggle::before {
    transform: rotate(90deg);
}
.fc-synopsis-collapsible__toggle:hover {
    color: var(--fc-text-70);
}

/* ══════════════════════════════════════════
   Expand button: loading state + error toast
   ══════════════════════════════════════════ */
.fc-btn--loading {
    pointer-events: none;
    opacity: 0.8;
}
.fc-btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: fc-spin 0.8s linear infinite;
    vertical-align: middle;
}
.fc-expand-error {
    font-family: var(--fc-font-body);
    font-size: 13px;
    color: #e57373;
    margin-top: 10px;
    animation: fc-fadeIn 0.3s ease;
}
@keyframes fc-fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   Hint backdrop (blur overlay behind banner)
   ══════════════════════════════════════════ */
.fc-hint-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.fc-hint-backdrop.is-open { opacity: 1; }

/* ══════════════════════════════════════════
   Hint banner (fixed, centered under header)
   ══════════════════════════════════════════ */
.fc-hint-banner {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 480px;
    width: calc(100% - 48px);
    padding: 16px 20px;
    background: var(--fc-surface);
    border: 1px solid var(--fc-teal);
    border-radius: var(--fc-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 16px;
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.fc-hint-banner.is-open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.fc-hint-banner p {
    flex: 1;
    font-family: var(--fc-font-body);
    font-size: 14px;
    color: var(--fc-text-70);
    line-height: 1.5;
    margin: 0;
}
.fc-hint-dismiss {
    flex-shrink: 0;
    background: var(--fc-teal);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-family: var(--fc-font-body);
    cursor: pointer;
    transition: opacity var(--fc-transition);
}
.fc-hint-dismiss:hover {
    opacity: 0.85;
}

/* ══════════════════════════════════════════
   TESSITURA ROOT — Global story bible (tw-*)
   ══════════════════════════════════════════ */

.tw-root-weaving {
    margin-top: 24px;
    max-width: 100%;
}

/* ── Nav bar (bible summary) ── */
.tw-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 0 8px;
    margin-bottom: 8px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--fc-bg, #0d0f17);
}
body.fd-light .tw-nav { background: var(--fc-bg, #f2efe9); }
.tw-nav-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    font-family: var(--fc-font-body);
    font-size: 12px;
    font-weight: 400;
    color: var(--fc-text-40);
    white-space: nowrap;
    transition: all 0.2s ease;
}
body.fd-light .tw-nav-chip {
    border-color: rgba(0,0,0,0.15);
    color: #888;
}
.tw-nav-chip:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
}
body.fd-light .tw-nav-chip:hover {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.22);
}
.tw-nav-chip.is-active {
    background: var(--cloto-teal-deep, #228585);
    border-color: var(--cloto-teal-deep, #228585);
    color: #fff;
    font-weight: 500;
}
body.fd-light .tw-nav-chip.is-active {
    background: #1D9E75;
    border-color: #1D9E75;
    color: #fff;
}
.tw-nav-chip.is-active:hover {
    background: var(--cloto-teal-mid, #2da5a5);
    border-color: var(--cloto-teal-mid, #2da5a5);
}
body.fd-light .tw-nav-chip.is-active:hover {
    background: #178a66;
    border-color: #178a66;
}
.tw-nav-count {
    font-family: var(--fc-font-mono);
    font-size: 10px;
    color: var(--fc-text-30, rgba(255,255,255,0.3));
}
body.fd-light .tw-nav-count {
    color: rgba(0,0,0,0.35);
}
.tw-nav-chip.is-active .tw-nav-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
    padding: 1px 5px;
    border-radius: 8px;
}

/* ── Section toggle (collapsible) ── */
.tw-sec-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--fc-font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fc-text-60);
    text-align: left;
}
.tw-sec-toggle:hover { color: var(--fc-text-70); }
.tw-sec-toggle::before {
    content: '\25B8';
    font-size: 10px;
    transition: transform 0.3s ease;
}
.tw-sec-toggle.is-open::before { transform: rotate(90deg); }
.tw-sec-toggle::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--fc-card-border);
}
.tw-sec-preview {
    font-family: var(--fc-font-body);
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--fc-text-40);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
.tw-sec-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}
.tw-sec-body.is-open {
    max-height: 10000px;
    overflow: visible;
}

/* ── Section (legacy wrapper) ── */
.tw-section {
    margin-bottom: 20px;
}
.tw-section-title {
    font-family: var(--fc-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fc-text-60);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.tw-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--fc-card-border);
}

/* ── Trama ── */
.tw-trama {
    background: var(--fc-surface);
    border: 1px solid var(--fc-card-border);
    border-radius: var(--fc-radius);
    overflow: hidden;
}
.tw-trama-compact {
    padding: 16px 20px;
    cursor: pointer;
}
.tw-trama-compact:hover {
    background: rgba(94,198,198,0.02);
}
.tw-trama-compact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.tw-trama-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.tw-trama-stat {
    font-family: var(--fc-font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--fc-text-40);
    display: flex;
    align-items: center;
    gap: 5px;
}
.tw-trama-stat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.tw-trama-stat--woven .tw-trama-stat-dot { background: var(--fc-gold); }
.tw-trama-stat--explore .tw-trama-stat-dot { background: var(--fc-teal); }
.tw-trama-stat--expand .tw-trama-stat-dot { background: linear-gradient(135deg, var(--fc-teal), var(--fc-gold)); }
.tw-trama-stat--backstory .tw-trama-stat-dot { background: transparent; border: 1.5px dashed var(--fc-text-25); }
/* Dot strip */
.tw-trama-dots {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    row-gap: 4px;
}
.tw-trama-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tw-trama-dot--woven { background: var(--fc-gold); }
.tw-trama-dot--explore { background: var(--fc-teal); }
.tw-trama-dot--expand { background: linear-gradient(135deg, var(--fc-teal), var(--fc-gold)); }
.tw-trama-dot--backstory { background: transparent; border: 1.5px dashed var(--fc-text-25); box-sizing: border-box; }
.tw-trama-dot-connector {
    width: 6px;
    height: 1.5px;
    background: var(--fc-text-10);
    flex-shrink: 0;
}

/* Expanded list */
.tw-trama-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}
.tw-trama.is-open .tw-trama-list {
    max-height: 8000px;
}
.tw-trama-list-inner {
    padding: 0 20px 16px;
    border-top: 1px solid var(--fc-card-border);
}

/* Event */
.tw-trama-event {
    display: flex;
    gap: 14px;
}
.tw-trama-event-body {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    background: var(--fc-surface);
    border: 1px solid var(--fc-card-border);
    border-radius: var(--fc-radius-sm);
    margin-bottom: 8px;
    transition: background 0.15s;
}
.tw-trama-event:last-of-type .tw-trama-event-body {
    margin-bottom: 0;
}
/* trama events are read-only — no hover highlight */

/* Event top row */
.tw-trama-event-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.tw-trama-event-title {
    font-family: var(--fc-font-brand);
    font-size: 17px;
    font-weight: 600;
    color: var(--fc-text-100);
    line-height: 1.3;
}
.tw-trama-event-title--backstory {
    font-style: italic;
    font-weight: 400;
    color: var(--fc-text-70);
}

/* Where + when */
.tw-trama-event-where-when {
    font-family: var(--fc-font-mono);
    font-size: 11px;
    color: var(--fc-text-60);
    margin-top: 2px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tw-trama-event-place { color: var(--fc-text-60); }
.tw-trama-event-separator { color: var(--fc-text-40); }
.tw-trama-event-time { color: var(--fc-text-50); }

/* Logline */
.tw-trama-event-logline {
    font-size: 13px;
    color: var(--fc-text-70);
    line-height: 1.55;
}
.tw-trama-event-logline--empty {
    color: var(--fc-text-40);
}

/* Status badge */
.tw-trama-event-status {
    font-family: var(--fc-font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}
.tw-trama-event-status--backstory { color: var(--fc-text-50); border: 1px dashed var(--fc-text-40); }
.tw-trama-event-status--explore { color: var(--fc-teal); border: 1px solid rgba(94,198,198,0.3); }
.tw-trama-event-status--woven { color: var(--fc-gold); border: 1px solid rgba(201,168,76,0.3); }
.tw-trama-event-status--expand { color: var(--fc-teal); border: 1px solid rgba(94,198,198,0.3); }
.tw-trama-event-status--write { color: var(--fc-gold); border: 1px solid rgba(201,168,76,0.3); }
body.fd-light .tw-trama-event-status--write {
    background: rgba(201,168,76,0.15);
    color: #8a6d18;
    border-color: rgba(138,109,24,0.35);
}
.tw-trama-event-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Trama section toggle (mostra di più / mostra meno) */
.tw-trama-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--fc-font-body);
    font-size: 12px;
    color: var(--fc-teal);
    opacity: 0.7;
    transition: opacity 0.2s;
}
.tw-trama-section-toggle:hover {
    opacity: 1;
}
.tw-trama-section-toggle__icon {
    transition: transform 0.3s ease;
}
.tw-trama.is-open .tw-trama-section-toggle__icon {
    transform: rotate(180deg);
}

/* Spine */
.tw-trama-spine {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 16px;
    flex-shrink: 0;
    padding-top: 16px;
}
.tw-trama-spine-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--fc-teal);
    background: transparent;
    flex-shrink: 0;
    box-sizing: border-box;
}
.tw-trama-spine-dot--backstory { border-style: dashed; border-color: var(--fc-text-40); }
.tw-trama-spine-dot--explore { background: transparent; border-color: var(--fc-teal); }
.tw-trama-spine-dot--woven { background: var(--fc-gold); border-color: var(--fc-gold); }
.tw-trama-spine-dot--expand { background: linear-gradient(135deg, var(--fc-teal), var(--fc-gold)); border-color: var(--fc-teal); }
.tw-trama-spine-line {
    width: 1.5px;
    flex: 1;
    background: var(--fc-text-25);
    min-height: 8px;
}
.tw-trama-spine-line--backstory {
    background: repeating-linear-gradient(
        to bottom,
        var(--fc-text-25) 0px,
        var(--fc-text-25) 3px,
        transparent 3px,
        transparent 6px
    );
}

/* Gap pill */
.tw-trama-gap {
    display: flex;
    gap: 14px;
    align-items: stretch;
}
.tw-trama-gap-spine {
    width: 16px;
    display: flex;
    justify-content: center;
}
.tw-trama-gap-line {
    width: 1.5px;
    height: 100%;
    min-height: 32px;
    background: var(--fc-text-25);
}
.tw-trama-gap-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 6px 0;
}
.tw-trama-gap-pill-text {
    font-family: var(--fc-font-mono);
    font-size: 10px;
    color: var(--fc-text-40);
    letter-spacing: 0.04em;
    padding: 3px 14px;
    border: 1px dashed var(--fc-text-25);
    border-radius: 20px;
    white-space: nowrap;
}

/* Hint */
.tw-trama-hint {
    text-align: center;
    padding: 10px 0 2px;
    font-family: var(--fc-font-mono);
    font-size: 10px;
    color: var(--fc-text-15);
}

/* Light mode overrides */
body.fd-light .tw-trama-compact:hover {
    background: rgba(0,0,0,0.02);
}
/* light mode trama hover removed — read-only */
body.fd-light .tw-trama-gap-pill-text {
    color: var(--fc-text-40);
    border-color: rgba(0,0,0,0.1);
}

.tw-trama-list-inner--no-border {
    border-top: none;
    padding-top: 16px;
}
.tw-trama-hint-contextual {
    text-align: center;
    padding: 8px 0 4px;
    font-size: 12px;
    color: var(--fc-text-25);
    font-style: normal;
}

/* ── Characters grid ── */
.tw-characters-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Character card ── */
.tw-char-card {
    flex: none;
    width: 100%;
    max-width: 100%;
    background: var(--fc-surface);
    border: 1px solid var(--fc-card-border);
    border-radius: var(--fc-radius);
    overflow: hidden;
    transition: border-color 0.3s;
}
.tw-char-card:hover {
    border-color: rgba(94,198,198,0.2);
}
.tw-char-header {
    padding: 20px;
}
.tw-char-name-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}
.tw-char-name {
    font-family: var(--fc-font-brand);
    font-weight: 600;
    font-size: 22px;
    color: var(--fc-text-100);
}
.tw-char-role {
    font-family: var(--fc-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fc-teal);
    opacity: 0.85;
    font-weight: 400;
}
.tw-char-desc {
    font-family: var(--fc-font-body);
    font-size: 13px;
    color: var(--fc-text-70);
    line-height: 1.5;
    margin-bottom: 16px;
}

/* ── Arc (bézier SVG) ── */
.tw-arc {
    position: relative;
    padding: 12px 0;
    margin-bottom: 12px;
}
.tw-arc-track {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}
.tw-arc-from, .tw-arc-to {
    font-family: var(--fc-font-body);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    max-width: 45%;
    word-break: break-word;
}
.tw-arc-from {
    background: var(--fc-teal-dim);
    color: var(--fc-teal);
    border: 1px solid rgba(94,198,198,0.2);
}
.tw-arc-to {
    background: var(--fc-gold-dim);
    color: var(--fc-gold);
    border: 1px solid rgba(201,168,76,0.2);
}
.tw-arc-line {
    flex: 1;
    height: 2px;
    min-width: 30px;
    position: relative;
    overflow: visible;
}
.tw-arc-line svg {
    position: absolute;
    top: -8px;
    left: 0;
    width: 100%;
    height: 18px;
    pointer-events: none;
}

/* ── Motives (vertical list from mockup) ── */
.tw-motives {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tw-motive {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--fc-font-body);
    font-size: 13px;
}
.tw-motive-label {
    font-family: var(--fc-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fc-text-25);
    width: 52px;
    flex-shrink: 0;
    text-align: right;
}
.tw-motive-text {
    color: var(--fc-text-70);
}
.tw-motive--vuole .tw-motive-label { color: var(--fc-teal); opacity: 0.6; }
.tw-motive--teme .tw-motive-label { color: var(--fc-red); opacity: 0.5; }
.tw-motive--difetto .tw-motive-label { color: var(--fc-gold); opacity: 0.5; }

/* ── Character toggle button ── */
.tw-char-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--fc-font-body);
    font-size: 12px;
    color: var(--fc-teal);
    opacity: 0.7;
    transition: opacity 0.2s;
}
.tw-char-toggle:hover {
    opacity: 1;
}
.tw-char-toggle__icon {
    transition: transform 0.3s ease;
}
.tw-char-card.is-open .tw-char-toggle__icon {
    transform: rotate(180deg);
}

/* ── Character details (collapsible with animation) ── */
.tw-char-details {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    padding: 0 20px;
}
.tw-char-card.is-open .tw-char-details {
    max-height: 800px;
    opacity: 1;
    padding-bottom: 20px;
}

/* ── Character deep toggle button ── */
.tw-char-toggle-deep {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--fc-font-body);
    font-size: 12px;
    color: var(--fc-teal);
    opacity: 0.7;
    transition: opacity 0.2s;
}
.tw-char-toggle-deep:hover { opacity: 1; }
.tw-char-toggle-deep__icon { transition: transform 0.3s ease; }
.tw-char-card.is-deep .tw-char-toggle-deep__icon { transform: rotate(180deg); }

/* ── Character deep details (second expansion) ── */
.tw-char-deep {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    padding: 0 20px;
}
.tw-char-card.is-deep .tw-char-deep {
    max-height: 600px;
    opacity: 1;
    padding-bottom: 20px;
}
.tw-detail-block {
    margin-top: 12px;
}
.tw-detail-label {
    font-family: var(--fc-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fc-text-25);
    margin-bottom: 4px;
}
.tw-detail-text {
    font-family: var(--fc-font-body);
    font-size: 13px;
    color: var(--fc-text-70);
    font-style: normal;
    line-height: 1.5;
}
.tw-detail-empty {
    font-family: var(--fc-font-body);
    font-size: 12px;
    color: var(--fc-text-25);
    font-style: normal;
}

/* ── Relations ── */
.tw-relations {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tw-relation-card {
    background: var(--fc-surface);
    border: 1px solid var(--fc-card-border);
    border-radius: var(--fc-radius);
    padding: 16px 20px;
}
.tw-relation-participants {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.tw-relation-node-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 80px;
}
.tw-relation-node {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fc-font-brand);
    font-size: 16px;
    font-weight: 600;
    background: var(--fc-teal-dim);
    color: var(--fc-teal);
    border: 1px solid rgba(94,198,198,0.25);
}
.tw-relation-node-name {
    font-family: var(--fc-font-body);
    font-size: 11px;
    color: var(--fc-text-70);
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}
.tw-relation-line-container {
    flex: 1;
    position: relative;
    height: 24px;
    margin-top: 6px;
}
.tw-relation-line-container svg {
    width: 100%;
    height: 24px;
}
.tw-relation-type-badge {
    font-family: var(--fc-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fc-text-60);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--fc-surface);
    padding: 0 6px;
    white-space: nowrap;
}
.tw-relation-arc-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.tw-relation-arc-step {
    font-family: var(--fc-font-body);
    font-size: 13px;
    line-height: 1.4;
}
.tw-relation-arc-step--initial {
    color: var(--fc-text-60);
    padding-left: 0;
}
.tw-relation-arc-step--current {
    color: var(--fc-text-70);
    font-weight: 500;
    padding-left: 12px;
}
.tw-relation-arc-step--target {
    color: var(--fc-gold);
    font-weight: 500;
    padding-left: 24px;
    opacity: 0.8;
}

/* Conflict inside relation card */
.tw-conflict {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(224, 85, 85, 0.06);
    border-left: 2px solid rgba(224, 85, 85, 0.3);
    border-radius: 0 var(--fc-radius-sm) var(--fc-radius-sm) 0;
}
.tw-conflict-label {
    font-family: var(--fc-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fc-red);
    opacity: 0.6;
    margin-bottom: 4px;
}
.tw-conflict-text {
    font-family: var(--fc-font-body);
    font-size: 13px;
    color: var(--fc-text-70);
    line-height: 1.5;
    margin-bottom: 4px;
}
.tw-conflict-stakes {
    font-family: var(--fc-font-body);
    font-size: 12px;
    color: var(--fc-text-40);
}

/* Structural badge */
.tw-structural-badge {
    font-family: var(--fc-font-mono);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px dashed var(--fc-text-25);
    color: var(--fc-text-40);
    letter-spacing: 0.04em;
    margin-left: 8px;
}

/* ── Promises ── */
.tw-promises {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tw-promise {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--fc-surface);
    border: 1px solid var(--fc-card-border);
    border-radius: var(--fc-radius-sm);
}
.tw-promise-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
.tw-promise-dot--open {
    border: 2px solid var(--fc-teal);
    background: transparent;
}
.tw-promise-dot--resolved {
    background: var(--fc-gold);
    border: 2px solid var(--fc-gold);
}
.tw-promise-content {
    flex: 1;
    min-width: 0;
}
.tw-promise-element {
    font-family: var(--fc-font-body);
    font-size: 14px;
    color: var(--fc-text-100);
    line-height: 1.5;
    margin-bottom: 2px;
}
.tw-promise-context {
    font-family: var(--fc-font-body);
    font-size: 12px;
    color: var(--fc-text-70);
}
.tw-promise-link {
    font-family: var(--fc-font-mono);
    font-size: 10px;
    color: var(--fc-teal);
    text-decoration: none;
    opacity: 0.7;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity var(--fc-transition);
}
.tw-promise-link:hover {
    opacity: 1;
}
.tw-promise-status {
    font-family: var(--fc-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    margin-top: 2px;
}
.tw-promise-status--open {
    color: var(--fc-teal);
    border: 1px solid rgba(94,198,198,0.3);
}
.tw-promise-status--resolved {
    color: var(--fc-gold);
    border: 1px solid rgba(201,168,76,0.3);
}

/* ── Timeline trigger ── */
.tw-timeline-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--fc-card-bg);
    border: 1px solid var(--fc-card-border);
    border-radius: var(--fc-radius);
    cursor: pointer;
    transition: all var(--fc-transition);
    width: 100%;
    text-align: left;
    font-family: var(--fc-font-body);
    font-size: 14px;
    color: var(--fc-text-70);
}
.tw-timeline-trigger:hover {
    background: var(--fc-card-bg-hover);
    border-color: var(--fc-card-border-selected);
}
.tw-timeline-preview {
    display: flex;
    gap: 3px;
    flex: 1;
}
.tw-timeline-dot-preview {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fc-teal);
    opacity: 0.5;
}
.tw-timeline-dot-preview:nth-child(even) {
    opacity: 0.3;
}

/* ── Timeline modal ── */
.tw-timeline-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--fc-overlay-bg);
}
.tw-timeline-modal.is-open {
    display: flex;
}
.tw-timeline-modal .fc-map-overlay__panel {
    max-width: 90vw;
    max-height: 70vh;
    width: auto;
    min-width: 400px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2rem;
    border-radius: 1rem;
    background: var(--fc-surface);
    border: 1px solid var(--fc-card-border);
}
@media (max-width: 480px) {
    .tw-timeline-modal .fc-map-overlay__panel {
        min-width: 0;
        width: 95vw;
        padding: 1rem;
    }
}
.tw-timeline-track {
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-width: max-content;
    padding: 16px 0;
}
.tw-timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    text-align: center;
}
.tw-timeline-node:hover .tw-timeline-node-dot {
    transform: scale(1.3);
}
.tw-timeline-node-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--fc-teal);
    margin-bottom: 8px;
    transition: transform var(--fc-transition);
    position: relative;
    z-index: 1;
}
.tw-timeline-node.is-backstory .tw-timeline-node-dot {
    background: var(--fc-text-25);
    border: 2px dashed var(--fc-text-40);
}
.tw-timeline-node.is-explore .tw-timeline-node-dot {
    background: transparent;
    border: 2px solid var(--fc-teal);
    box-sizing: border-box;
}
.tw-timeline-node.is-expand .tw-timeline-node-dot {
    background: linear-gradient(135deg, var(--fc-teal), var(--fc-gold));
}
.tw-timeline-node.is-expanded .tw-timeline-node-dot {
    background: var(--fc-text-25);
}
.tw-timeline-node.is-woven .tw-timeline-node-dot {
    background: var(--fc-gold);
}
.tw-timeline-node-label {
    font-family: var(--fc-font-body);
    font-size: 11px;
    color: var(--fc-text-70);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tw-timeline-node-status {
    font-family: var(--fc-font-mono);
    font-size: 9px;
    color: var(--fc-text-25);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.tw-timeline-connector {
    width: 40px;
    height: 2px;
    background: var(--fc-white-08);
    align-self: center;
    margin-top: -20px;
    flex-shrink: 0;
}
.tw-timeline-node.is-backstory + .tw-timeline-connector {
    border-top: 2px dashed var(--fc-text-25);
    background: none;
}

/* ── World section (collapsible) ── */
.tw-world-section {
    margin-bottom: 0;
    border: 1px solid var(--fc-card-border);
    border-radius: var(--fc-radius);
    overflow: hidden;
}
.tw-world-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: var(--fc-surface);
    border: none;
    cursor: pointer;
    font-family: var(--fc-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fc-text-60);
    text-align: left;
}
.tw-world-toggle:hover {
    color: var(--fc-text-70);
}
.tw-world-toggle::before {
    content: '\25B8';
    font-size: 10px;
    transition: transform 0.3s ease;
}
.tw-world-toggle.is-open::before {
    transform: rotate(90deg);
}
.tw-world-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: var(--fc-surface);
}
.tw-world-content.is-open {
    max-height: 2000px;
}
.tw-world-inner {
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.tw-world-subsection {
    margin-bottom: 0;
}
.tw-world-subtitle {
    font-family: var(--fc-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fc-text-50);
    margin-bottom: 10px;
}
.tw-world-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tw-world-card {
    padding: 10px 14px;
    background: var(--fc-surface);
    border: 1px solid var(--fc-card-border);
    border-radius: var(--fc-radius-sm);
    min-width: 200px;
    flex: 1;
}
.tw-world-card-name {
    font-family: var(--fc-font-body);
    font-size: 14px;
    color: var(--fc-text-100);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tw-world-card-type {
    font-family: var(--fc-font-mono);
    font-size: 9px;
    text-transform: uppercase;
    color: var(--fc-text-50);
    letter-spacing: 0.04em;
}
.tw-world-card-sig {
    font-family: var(--fc-font-body);
    font-size: 12px;
    color: var(--fc-text-70);
    line-height: 1.4;
}
.tw-world-card-desc {
    font-family: var(--fc-font-body);
    font-size: 12px;
    color: var(--fc-text-70);
    line-height: 1.4;
}
.tw-world-rule {
    padding: 8px 14px;
    background: var(--fc-surface);
    border-left: 2px solid var(--fc-text-40);
    border-radius: 0 var(--fc-radius-sm) var(--fc-radius-sm) 0;
    margin-bottom: 8px;
    font-family: var(--fc-font-body);
    font-size: 13px;
    color: var(--fc-text-70);
    line-height: 1.5;
}
.tw-world-rule:last-child {
    margin-bottom: 0;
}
.tw-theme-tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--fc-teal-dim);
    border-radius: 20px;
    font-family: var(--fc-font-body);
    font-size: 12px;
    color: var(--fc-teal);
    opacity: 0.7;
    margin: 0 4px 4px 0;
}

/* ── Empty slot ── */
.tw-empty-slot {
    font-family: var(--fc-font-body);
    font-size: 12px;
    color: var(--fc-text-50);
    font-style: normal;
    padding: 8px 0;
}

/* ── Spacer ── */
.tw-spacer {
    height: 16px;
}

/* ══════════════════════════════════════════
   Small viewport — compact chat layout
   (iPhone 13 mini: 375×667, etc.)
   ══════════════════════════════════════════ */
@media (max-height: 700px) {
    .fc-chat-active .fc-context-bar {
        padding: 4px 12px;
    }
    .fc-chat-active .fc-phase-bar {
        padding: 6px 0 6px;
        gap: 10px;
    }
    .fc-chat-active .wiz-conversation {
        padding: 4px 10px;
    }
    .fc-chat-active .wiz-bubble {
        margin-bottom: 6px;
    }
    .fc-chat-active .fc-focus-card__qa-mount {
        margin-top: 4px;
    }
    .fc-chat-active .wiz-input {
        padding-bottom: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
    .fc-chat-active .fc-focus-card {
        padding: 8px 12px;
        border: none;
        background: transparent;
    }
}

/* ══════════════════════════════════════════
   Writing experience — fullscreen editor
   Looks like Ulysses / iA Writer: neutral bg,
   large serif text, zero decoration.
   ══════════════════════════════════════════ */

/* ── Page-level: uniform neutral background edge-to-edge ── */
/* Kill the nebula pseudo-elements in writing mode */
body.fc-write-mode::before,
body.fc-write-mode::after {
    display: none !important;
}
html.fc-active.fc-write-mode-html,
body.fc-write-mode,
body.fc-write-mode.cloto-app,
body.fc-write-mode.cloto-app.fc-active {
    background: #1a1c24 !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
}
body.fc-write-mode .fc-header {
    background: #1a1c24;
    border-bottom-color: rgba(232,230,225,0.04);
}
body.fc-write-mode .fc-breadcrumb__current {
    color: var(--cloto-text-60);
}
body.fd-light.fc-write-mode .fc-breadcrumb__current {
    color: rgba(17,17,17,0.6);
}
body.fd-light.fc-write-mode,
body.fd-light.fc-write-mode.cloto-app,
body.fd-light.fc-write-mode.cloto-app.fc-active {
    background: #f8f7f4 !important;
}
body.fd-light.fc-write-mode .fc-header {
    background: #f8f7f4;
    border-bottom-color: rgba(17,17,17,0.06);
}

.fc-main--writing {
    padding: 0 24px;
    gap: 0;
    overflow: hidden;
    max-width: 100%;
    background: transparent;
    /* Fixed height = viewport minus header. This anchors the flex chain
       so flex:1 on children actually fills space (body is not a flex container). */
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    min-height: 0;
}
.fc-main--writing #fc-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* ── Focus card: no card — the page IS the editor ── */
.fc-focus-card--writing {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    border-image: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    /* max-width managed by inner .fc-write-editor-col */
}

/* ══════════════════════════════════════════════
   WRITE LAYOUT: side panel (desktop) / bottom sheet (mobile)
   ══════════════════════════════════════════════ */

.fc-write-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
}

.fc-write-editor-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

/* ── Desktop ≥1025px: side panel ── */

@media (min-width: 1025px) {
    .fc-write-layout {
        flex-direction: row;
        gap: 0;
    }

    .fc-write-editor-col {
        flex: 1;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding-right: 32px;
        /* Constrain the prose column */
    }
    .fc-write-editor-col .cw-scene-textarea,
    .fc-write-editor-col .cw-tessuto-view {
        max-width: 700px;
    }

    .fc-write-panel-col {
        width: 0;
        overflow: hidden;
        transition: width 0.3s ease, opacity 0.3s ease;
        opacity: 0;
        border-left: 1px solid transparent;
        flex-shrink: 0;
        position: relative;
    }

    .fc-write-layout.fc-panel-open .fc-write-panel-col {
        width: 440px;
        opacity: 1;
        overflow-y: auto;
        padding: 8px 20px 24px;
        border-left-color: var(--fc-card-border, rgba(232,230,225,0.06));
        font-size: 0.9rem;
    }

    /* Handle: hidden on desktop */
    .fc-write-panel-col .fc-sheet-handle { display: none; }
}

/* Ultra-wide: wider panel */
@media (min-width: 1600px) {
    .fc-write-layout.fc-panel-open .fc-write-panel-col {
        width: 500px;
    }
}

/* Panel toggle button */
.fc-panel-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--fc-card-border, rgba(232,230,225,0.08));
    border-radius: 6px;
    color: var(--fc-text-40, rgba(232,230,225,0.4));
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    flex-shrink: 0;
}
.fc-panel-toggle-btn:hover {
    color: var(--fc-text-60, rgba(232,230,225,0.6));
    border-color: var(--fc-text-25, rgba(232,230,225,0.25));
    background: rgba(232,230,225,0.04);
}
.fc-panel-open .fc-panel-toggle-btn,
.fc-write-layout.fc-panel-open ~ * .fc-panel-toggle-btn {
    color: var(--fc-teal, #5ec6c6);
    border-color: var(--fc-teal-a25, rgba(94,198,198,0.25));
}

/* Resize handle (desktop side panel) */
.fc-panel-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.15s;
}
.fc-panel-resize-handle:hover,
.fc-panel-resize-handle:active {
    background: rgba(94,198,198,0.25);
}

/* ── Mobile/Tablet ≤1024px: bottom sheet ── */

@media (max-width: 1024px) {
    .fc-panel-resize-handle { display: none; }
    .fc-write-panel-col {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        background: var(--fc-surface, #1a1f2e);
        border-top: 1px solid var(--fc-card-border, rgba(232,230,225,0.08));
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
        transform: translateY(calc(100% - 48px));
        transition: transform 0.3s ease;
        max-height: 70vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0 16px 16px;
    }

    /* Drag handle */
    .fc-sheet-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0 6px;
        cursor: grab;
        flex-shrink: 0;
    }
    .fc-sheet-handle::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--fc-text-25, rgba(232,230,225,0.25));
        border-radius: 2px;
    }

    /* State: peek — shows slug + characters */
    .fc-write-panel-col.fc-sheet-peek {
        transform: translateY(calc(100% - 200px));
    }

    /* State: open — full content visible */
    .fc-write-panel-col.fc-sheet-open {
        transform: translateY(0);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Editor padding to account for bottom sheet handle */
    .fc-write-editor-col {
        padding-bottom: 56px;
    }

    /* Hide panel toggle button on mobile (bottom sheet is always accessible) */
    .fc-panel-toggle-btn { display: none; }
}

/* Handle: hidden on desktop (fallback) */
@media (min-width: 1025px) {
    .fc-sheet-handle { display: none; }
}

/* Panel scrollbar */
.fc-write-panel-col::-webkit-scrollbar { width: 3px; }
.fc-write-panel-col::-webkit-scrollbar-thumb { background: rgba(232,230,225,0.1); border-radius: 2px; }

/* Light mode */
body.fd-light .fc-write-panel-col {
    background: var(--fc-surface, #fafaf8);
    border-left-color: rgba(0,0,0,0.06);
}
@media (max-width: 1024px) {
    body.fd-light .fc-write-panel-col {
        border-top-color: rgba(0,0,0,0.08);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    }
}

/* ══════════════════════════════════════════════ */

/* ── Back to choice link (under title) ── */
.fc-write-back-to-choice {
    display: block;
    text-align: center;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--cloto-text-50);
    cursor: pointer;
    padding: 0 0 12px;
    transition: color 0.2s;
    text-decoration: none;
    flex-shrink: 0;
}
.fc-write-back-to-choice:hover {
    color: var(--fc-teal);
}
body.fd-light .fc-write-back-to-choice {
    color: rgba(0,0,0,0.5);
}
body.fd-light .fc-write-back-to-choice:hover {
    color: #3a9999;
}

/* ══════════════════════════════════════════
   Chat experience — fullscreen immersive Q&A
   Like the writing mode: uniform bg, no card
   chrome, content centered and spacious.
   ══════════════════════════════════════════ */

/* ── Page-level: kill nebula, lock viewport ── */
body.fc-chat-mode::before,
body.fc-chat-mode::after {
    display: none !important;
}
body.fc-chat-mode {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

/* ── Uniform background ── */
.fc-chat-mode #fc-content-area {
    background: var(--fc-bg, #0d0f17);
}
body.fd-light.fc-chat-mode #fc-content-area {
    background: #f8f7f4;
}

/* ── fc-main: full viewport height, no padding ── */
.fc-chat-mode .fc-main.fc-chat-active {
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    padding: 0;
}
@media (max-width: 600px) {
    .fc-chat-mode .fc-main.fc-chat-active {
        height: calc(100vh - 44px);
        height: calc(100dvh - 44px);
    }
}

/* ── Focus card: transparent, no borders, centered ── */
.fc-chat-mode .fc-focus-card {
    background: transparent;
    border: none;
    border-left: none;
    border-image: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0 auto;
    max-width: 680px;
    width: 100%;
}

/* ── Title: compact, centered ── */
.fc-chat-mode .fc-focus-card__title {
    font-size: 20px;
    padding: 12px 16px 0;
    text-align: center;
    color: var(--fc-text-100);
    margin-bottom: 0;
}

/* ── Context bar: compact ── */
.fc-chat-mode .fc-context-bar {
    margin: 0 16px;
    padding: 8px 12px;
    font-size: 13px;
}

/* ── QA mount: fill remaining space ── */
.fc-chat-mode .fc-focus-card__qa-mount {
    margin: 0;
}

/* ── Landing splash: true viewport centering ──
   The landing block (greeting + input + chips) must sit at the
   vertical center of the visible area below the header.
   We use margin:auto on the conversation to push it to center,
   and flex:none on both conversation and input so they behave
   as a single compact group.                                    */
.fc-chat-mode .wiz-conversation--landing {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
    overflow: visible;
    gap: 0;
    margin-top: auto;
}
.fc-chat-mode .wiz-conversation--landing ~ .wiz-input {
    flex: none;
}
.fc-chat-mode .wiz-conversation--landing ~ .wiz-landing__chips {
    margin-top: auto;
    margin-bottom: auto;
}
.fc-chat-mode .wiz-landing {
    text-align: center;
    max-width: 500px;
}

/* ── Pre-explore: centered vertically ── */
.fc-chat-mode .wiz-conversation--start {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

/* ── Tablet (768–1024px) ── */
@media (max-width: 1024px) {
    .fc-chat-mode .fc-focus-card {
        max-width: 100%;
        padding: 0 16px;
    }
}

/* ── Mobile (<768px) ── */
@media (max-width: 768px) {
    .fc-chat-mode .fc-focus-card {
        max-width: 100%;
        padding: 0 8px;
    }
    .fc-chat-mode .fc-focus-card__title {
        font-size: 14px;
        padding: 8px 8px 0;
    }
    .fc-chat-mode .fc-context-bar {
        margin: 0 8px;
        padding: 6px 10px;
        font-size: 12px;
    }
    .fc-chat-mode .wiz-input {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    .fc-chat-mode .wiz-bubble {
        max-width: 90%;
    }
}

/* ── Small mobile (<480px) ── */
@media (max-width: 480px) {
    .fc-chat-mode .fc-focus-card__title {
        font-size: 13px;
    }
    .fc-chat-mode .wiz-bubble {
        max-width: 95%;
        font-size: 14px;
    }
    .fc-chat-mode .wiz-input textarea {
        font-size: 16px; /* prevent iOS zoom */
    }
}

/* ── Editor mount: fullscreen flex chain ── */
.fc-focus-card--writing .fc-editor-mount {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 0;
    padding: 0;
}
.fc-focus-card--writing .cw-scene {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    gap: 0;
}

/* ── Textarea: the protagonist ── */
.fc-focus-card--writing .cw-scene-textarea {
    flex: 1;
    min-height: 0;
    height: 100%;
    font-family: var(--fc-font-brand);
    font-size: 20px;
    line-height: 1.9;
    font-weight: 400;
    color: var(--fc-text-100);
    caret-color: var(--fc-gold);
    padding: 32px 0 0;
    border: none;
    border-left: none;
    letter-spacing: 0.01em;
    background: transparent;
    resize: none;
}
.fc-focus-card--writing .cw-scene-textarea:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
.fc-focus-card--writing .cw-scene-textarea::placeholder {
    color: var(--cloto-text-50);
    font-style: italic;
}
.fc-focus-card--writing .cw-scene-textarea::-webkit-scrollbar { width: 4px; }
.fc-focus-card--writing .cw-scene-textarea::-webkit-scrollbar-track { background: transparent; }
.fc-focus-card--writing .cw-scene-textarea::-webkit-scrollbar-thumb { background: rgba(232,230,225,0.08); border-radius: 2px; }

/* ── Tessuto view: mirror textarea for visual continuity ── */
.fc-focus-card--writing .cw-tessuto-view {
    flex: 1;
    min-height: 0;
    height: 100%;
    font-family: var(--fc-font-brand);
    font-size: 20px;
    line-height: 1.9;
    font-weight: 400;
    color: var(--fc-text-100);
    padding: 32px 0 0;
    border: none;
    border-radius: 0;
    letter-spacing: 0.01em;
    background: transparent;
}
.fc-focus-card--writing .cw-tessuto-view::-webkit-scrollbar { width: 4px; }
.fc-focus-card--writing .cw-tessuto-view::-webkit-scrollbar-track { background: transparent; }
.fc-focus-card--writing .cw-tessuto-view::-webkit-scrollbar-thumb { background: rgba(232,230,225,0.08); border-radius: 2px; }

/* ── Word count (nearly invisible) ── */
.fc-write-wordcount {
    display: block;
    font-family: var(--fc-font-mono);
    font-size: 10px;
    color: var(--fc-text-25);
    letter-spacing: 0.04em;
    padding: 4px 0;
    flex-shrink: 0;
}

/* ── Tessila bar ── */
.fc-focus-card--writing .cw-scene-bar.fc-write-tessila-bar {
    flex-shrink: 0;
    padding: 12px 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-start;
    border-top: 1px solid rgba(232,230,225,0.06);
}
body.fd-light .fc-focus-card--writing .cw-scene-bar.fc-write-tessila-bar {
    border-top: 1px solid rgba(17,17,17,0.08);
}

/* Save dot */
.fc-focus-card--writing .cw-scene-save-dot {
    order: -1;
}

/* ── Tessila wrapper (clean, no orbit) ── */
.fc-write-tessila-outer {
    display: inline-flex;
    border-radius: 32px;
    cursor: pointer;
}

/* Button */
.fc-focus-card--writing .fc-write-tessila-outer .cw-scene-submit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 32px;
    border: 1px solid rgba(201,168,76,0.18);
    background: #1a1c24;
    color: var(--fc-gold);
    font-family: var(--fc-font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.2s, border-color 0.2s;
    min-height: auto;
    opacity: 1;
}
.fc-focus-card--writing .fc-write-tessila-outer .cw-scene-submit:hover:not(:disabled) {
    background: #22242e;
    border-color: rgba(201,168,76,0.30);
}
.fc-focus-card--writing .fc-write-tessila-outer .cw-scene-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Animated golden spiral icon */
.fc-focus-card--writing .fc-write-tessila-outer .cw-scene-submit::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180' fill='none'%3E%3Ccircle cx='90' cy='90' r='75.6' stroke='%23c9a84c' stroke-width='21.6' fill='none' opacity='0.8' stroke-dasharray='342 648' transform='rotate(0 90 90)'/%3E%3Ccircle cx='90' cy='90' r='46.8' stroke='%23c9a84c' stroke-width='21.6' fill='none' opacity='0.45' stroke-dasharray='216 648' transform='rotate(55 90 90)'/%3E%3Ccircle cx='90' cy='90' r='16.2' fill='%23c9a84c'/%3E%3C/svg%3E") no-repeat center / contain;
    animation: fc-spiral-rotate 16s linear infinite, fc-spiral-breathe 8s ease-in-out infinite;
    animation-play-state: paused;
}
.fc-focus-card--writing .fc-write-tessila-outer .cw-scene-submit:hover::before {
    animation-play-state: running;
}
@keyframes fc-spiral-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes fc-spiral-breathe {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* Hide static spiral when spinner is active */
.fc-focus-card--writing .fc-write-tessila-outer .cw-scene-submit.is-spinning::before {
    display: none;
}

/* Hint */
.fc-write-tessila-hint {
    font-size: 12px;
    color: var(--fc-text-25);
    font-style: normal;
}

/* ── Light mode overrides ── */
body.fd-light .fc-focus-card--writing .fc-write-tessila-outer .cw-scene-submit {
    border-color: rgba(154,123,32,0.15);
    background: #f8f7f4;
}
body.fd-light .fc-focus-card--writing .fc-write-tessila-outer .cw-scene-submit:hover:not(:disabled) {
    background: #eeecea;
    border-color: rgba(154,123,32,0.28);
}
body.fd-light .fc-focus-card--writing .fc-write-tessila-outer .cw-scene-submit::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180' fill='none'%3E%3Ccircle cx='90' cy='90' r='75.6' stroke='%239a7b20' stroke-width='21.6' fill='none' opacity='0.8' stroke-dasharray='342 648' transform='rotate(0 90 90)'/%3E%3Ccircle cx='90' cy='90' r='46.8' stroke='%239a7b20' stroke-width='21.6' fill='none' opacity='0.45' stroke-dasharray='216 648' transform='rotate(55 90 90)'/%3E%3Ccircle cx='90' cy='90' r='16.2' fill='%239a7b20'/%3E%3C/svg%3E");
}

/* ── Scene title — prominent, centered ── */
.fc-write-scene-title {
    font-family: var(--fc-font-brand);
    font-size: 32px;
    font-weight: 600;
    color: var(--fc-text-100);
    text-align: center;
    padding: 28px 0 12px;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}

/* ── Scrivi button — gold filled in light mode ── */
body.fd-light .fc-btn--gold {
    background: #c9a84c;
    border-color: #b8962e;
    color: #2a2310;
}
body.fd-light .fc-btn--gold:hover {
    background: #d4b45a;
    border-color: #c9a84c;
}

/* ══════════════════════════════════════════
   View transitions — smooth drill-down
   ══════════════════════════════════════════ */
.fc-focus-card:not(.fc-focus-card--writing) {
    animation: fc-viewEnter 0.25s ease-out;
}
.fc-children-section {
    animation: fc-childrenEnter 0.3s ease-out 0.1s both;
}
@keyframes fc-viewEnter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fc-childrenEnter {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Writing mode: fade in without slide */
.fc-focus-card--writing {
    animation: fc-writeEnter 0.4s ease-out;
}
@keyframes fc-writeEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Tessitura root: gentle fade */
.tw-root-weaving {
    animation: fc-viewEnter 0.3s ease-out 0.15s both;
}

@media (prefers-reduced-motion: reduce) {
    .fc-focus-card,
    .fc-focus-card--writing,
    .fc-children-section,
    .tw-root-weaving {
        animation: none;
    }
}

/* ── Mobile adjustments ── */
@media (max-width: 640px) {
    .fc-focus-card--writing {
        padding: 0;
        max-width: 100%;
    }
    .fc-focus-card--writing .fc-write-scene-title {
        position: sticky;
        top: 0;
        z-index: 10;
        font-size: 15px;
        font-weight: 500;
        text-align: left;
        padding: 10px 16px;
        margin: 0;
        background: var(--cloto-surface, #13161f);
        border-bottom: 1px solid var(--cloto-glass-border, rgba(94,198,198,0.08));
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.fd-light .fc-focus-card--writing .fc-write-scene-title {
        background: var(--cloto-surface, #f5f3ee);
        border-bottom-color: rgba(26,28,40,0.08);
    }
    .fc-focus-card--writing .fc-write-back-to-choice {
        display: none;
    }
    .fc-focus-card--writing .cw-scene-textarea {
        font-size: 18px;
        line-height: 1.8;
        padding-top: 20px;
    }
    .fc-focus-card--writing .cw-tessuto-view {
        font-size: 18px;
        line-height: 1.8;
        padding-top: 20px;
    }
    .fc-focus-card--writing .cw-scene-bar.fc-write-tessila-bar {
        position: sticky;
        bottom: 0;
        z-index: 10;
        padding: 10px 16px;
        flex-wrap: wrap;
        gap: 10px;
        background: var(--cloto-surface, #13161f);
        border-top: 1px solid var(--cloto-glass-border, rgba(94,198,198,0.08));
        margin: 0 -16px;
        width: calc(100% + 32px);
    }
    body.fd-light .fc-focus-card--writing .cw-scene-bar.fc-write-tessila-bar {
        background: var(--cloto-surface, #f5f3ee);
        border-top-color: rgba(26,28,40,0.08);
    }
    .fc-write-tessila-hint {
        font-size: 11px;
        flex-basis: 100%;
    }
}