/* ═══════════════════════════════════════════════════════════════
   CLOTO SOMMARIO — Linear story index
   ═══════════════════════════════════════════════════════════════ */

/* ── Sommario view: fullscreen background covering nebula ── */
#cloto-sommario-view {
  margin: -24px -32px -32px;
  margin-top: calc(-24px - 24px);
  width: calc(100% + 64px);
  min-height: calc(100vh - 52px);
  background: var(--cloto-surface);
  padding-top: 24px;
}
body.fd-light #cloto-sommario-view {
  background: var(--cloto-surface);
}

/* ── Inner content centering ── */
.cloto-som-main {
  max-width: 740px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

@media (min-width: 601px) and (max-width: 1024px) {
  #cloto-sommario-view {
    margin: -24px -24px -32px;
    width: calc(100% + 48px);
  }
}
@media (max-width: 600px) {
  #cloto-sommario-view {
    margin: -16px -16px -24px;
    width: calc(100% + 32px);
  }
}

/* ═══ STORY HEADER ═══ */

.cloto-som-story-header {
  text-align: center;
  margin-bottom: 32px;
}

.cloto-som-story-title {
  font-family: var(--cloto-font-brand);
  font-size: 32px;
  font-weight: 600;
  color: var(--cloto-text-100);
  margin-bottom: 8px;
  line-height: 1.2;
}

.cloto-som-story-logline {
  font-family: var(--cloto-font-ui);
  font-size: 15px;
  color: var(--cloto-text-70);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.cloto-som-story-stats {
  margin-top: 12px;
  font-family: var(--cloto-font-mono);
  font-size: 10px;
  color: var(--cloto-text-50);
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* ═══ SECTION HEADER ═══ */

.cloto-som-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  border-left: 3px solid var(--cloto-teal-a30);
  background: var(--cloto-teal-a4);
  border-radius: var(--radius-lg);
  margin-bottom: 2px;
  transition: background 0.12s;
}
.cloto-som-section-header:hover {
  background: var(--cloto-teal-a8);
}

.cloto-som-section-chevron {
  font-size: 14px;
  color: var(--cloto-text-70);
  transition: transform 0.25s var(--ease-spring);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.cloto-som-section-header.is-open .cloto-som-section-chevron {
  transform: rotate(90deg);
}

.cloto-som-section-title {
  font-family: var(--cloto-font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--cloto-text-70);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cloto-som-section-count {
  font-family: var(--cloto-font-mono);
  font-size: 9px;
  color: var(--cloto-text-60);
  margin-left: auto;
}

.cloto-som-section-content {
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.cloto-som-section-content.is-collapsed {
  max-height: 0 !important;
}

/* ═══ LEAF ROW ═══ */

.cloto-som-leaf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  transition: background 0.12s;
  margin: 1px 0;
  cursor: pointer;
}
.cloto-som-leaf:hover {
  background: var(--cloto-white-a8);
}

/* Depth indentation — margin shrinks the colored bar, padding stays internal */
.cloto-som-leaf[data-depth="0"] { margin-left: 0; }
.cloto-som-leaf[data-depth="1"] { margin-left: 20px; }
.cloto-som-leaf[data-depth="2"] { margin-left: 40px; }
.cloto-som-leaf[data-depth="3"] { margin-left: 60px; }

/* Leaf rows: clean background, status communicated by chip only */
.cloto-som-leaf:hover {
  background: var(--cloto-white-a8);
}

/* Number */
.cloto-som-leaf-num {
  font-family: var(--cloto-font-mono);
  font-size: 13px;
  color: var(--cloto-text-70);
  width: 22px;
  text-align: right;
  flex-shrink: 0;
}

/* Title */
.cloto-som-leaf-title {
  font-family: var(--cloto-font-brand);
  font-size: 18px;
  font-weight: 500;
  color: var(--cloto-text-70);
  flex: 1;
  line-height: 1.3;
}

/* Chip */
.cloto-som-leaf-chip {
  font-family: var(--cloto-font-ui);
  font-size: 11px;
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: 14px;
  font-weight: 500;
  border: 1px solid;
}

.cloto-som-chip--explore {
  color: var(--cloto-teal);
  background: var(--cloto-teal-a15);
  border-color: var(--cloto-teal-a30);
}

.cloto-som-chip--expand {
  color: rgb(180, 140, 220);
  background: rgba(180, 140, 220, 0.15);
  border-color: rgba(180, 140, 220, 0.3);
}

.cloto-som-chip--woven {
  color: var(--cloto-gold);
  background: var(--cloto-gold-a15);
  border-color: var(--cloto-gold-a30);
}

.cloto-som-chip--in-progress {
  color: var(--cloto-teal, #5ec6c6);
  background: rgba(94,198,198,0.2);
  border-color: rgba(94,198,198,0.4);
  font-weight: 600;
}

/* ── Riga "In esplorazione" — teal pulsante ── */
.cloto-som-leaf--in-progress {
  background: rgba(94,198,198,0.12);
  border-radius: 10px;
  animation: somExploringPulse 2.5s ease-in-out infinite;
}
@keyframes somExploringPulse {
  0%   { background: rgba(94,198,198,0.08); }
  50%  { background: rgba(94,198,198,0.16); }
  100% { background: rgba(94,198,198,0.08); }
}

/* ═══ SCENE DETAIL VIEW ═══ */

/* Break out of fc-main padding + gap to go fullscreen */
#cloto-scene-detail-view,
#cloto-chat-view {
  margin: -24px -32px -32px;
  margin-top: calc(-24px - 24px); /* padding-top + gap of fc-main */
  width: calc(100% + 64px);
  min-height: calc(100vh - 52px);
}

.cloto-som-scene-view {
  min-height: calc(100vh - 52px);
  display: flex;
  flex-direction: column;
  background: var(--cloto-surface);
}

.cloto-som-scene-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 120px;
}

.cloto-som-scene-content {
  width: 100%;
  max-width: 640px;
  padding-top: 48px; /* compensate for breakout under FC header */
  padding: 32px 24px 0;
}

/* Back link */
.cloto-som-scene-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cloto-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--cloto-text-70);
  cursor: pointer;
  margin-bottom: 20px;
  padding: 6px 0;
  transition: color var(--duration-fast);
}
.cloto-som-scene-back:hover {
  color: var(--cloto-text-100);
}

/* Scene title */
.cloto-som-scene-title {
  font-family: var(--cloto-font-brand);
  font-size: 34px;
  font-weight: 600;
  color: var(--cloto-text-100);
  line-height: 1.2;
  margin-bottom: 20px;
}

/* Setting line (place, time — like a screenplay slug) */
.cloto-som-scene-setting {
  font-family: var(--cloto-font-brand);
  font-size: 16px;
  color: var(--cloto-text-70);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Synopsis / scene text — plain reading */
.cloto-som-scene-text {
  font-family: var(--cloto-font-ui);
  font-size: 16px;
  color: var(--cloto-text-70);
  line-height: 1.8;
  margin-bottom: 24px;
}

/* Woven: book page title */
.cloto-som-scene-title--page {
  text-align: center;
  margin-bottom: 16px;
}

/* Woven: prose like a book page */
.cloto-som-scene-prose {
  font-family: var(--cloto-font-brand);
  font-size: 17px;
  color: var(--cloto-text-100);
  line-height: 1.8;
  margin-bottom: 24px;
}

/* Word count */
.cloto-som-scene-words {
  font-family: var(--cloto-font-mono);
  font-size: 11px;
  color: var(--cloto-text-50);
  margin-bottom: 24px;
}

/* ═══ INLINE ACTIONS (inside content flow) ═══ */

.cloto-som-scene-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 0 24px;
}

/* ═══ STICKY BOTTOM BAR (appears when inline buttons scroll out) ═══ */

.cloto-som-scene-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: var(--cloto-surface);
  border-top: 1px solid var(--cloto-text-15);
  padding: 16px 0 max(16px, env(safe-area-inset-bottom));
  display: none;
}
.cloto-som-scene-bar.is-active {
  display: block;
}

.cloto-som-scene-bar-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Action buttons */
.cloto-som-bar-btn {
  padding: 10px 24px;
  border-radius: 18px;
  font-family: var(--cloto-font-ui);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid;
  background: transparent;
  transition: all var(--duration-fast);
  min-width: 120px;
  text-align: center;
}

.cloto-som-bar-btn--explore {
  color: var(--cloto-teal);
  border-color: var(--cloto-teal-a40);
  background: var(--cloto-teal-a8);
}
.cloto-som-bar-btn--explore:hover {
  background: var(--cloto-teal-a15);
}

.cloto-som-bar-btn--expand {
  color: var(--cloto-teal);
  border-color: var(--cloto-teal-a40);
  background: var(--cloto-teal-a8);
}
.cloto-som-bar-btn--expand:hover {
  background: var(--cloto-teal-a15);
}

.cloto-som-bar-btn--write {
  color: var(--cloto-gold);
  border-color: var(--cloto-gold-a35);
  background: var(--cloto-gold-a8);
}
.cloto-som-bar-btn--write:hover {
  background: var(--cloto-gold-a15);
}

/* ═══ CHAT FULLSCREEN VIEW ═══ */

.cloto-som-chat-view {
  min-height: calc(100vh - 52px);
  display: flex;
  flex-direction: column;
  background: var(--cloto-surface);
}

.cloto-som-chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
}

.cloto-som-chat-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 64px 24px 8px; /* 48px header + 16px spacing */
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.cloto-som-chat-back {
  font-family: var(--cloto-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--cloto-text-70);
  cursor: pointer;
  transition: color var(--duration-fast);
}
.cloto-som-chat-back:hover {
  color: var(--cloto-teal);
}

.cloto-som-chat-title {
  font-family: var(--cloto-font-brand);
  font-size: 16px;
  color: var(--cloto-text-60);
}

.cloto-som-chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Chat flex chain (fc-chat-active on #fc-main activates these) ── */

.fc-chat-active .cloto-som-chat-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.fc-chat-active .cloto-som-chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.fc-chat-active .cloto-som-chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.fc-chat-active .cloto-som-chat-body .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 messages to bottom (gravity) */
.fc-chat-active .cloto-som-chat-body .wiz-conversation:not(.wiz-conversation--start)::before {
  content: '';
  flex: 1;
}

/* Start container centered vertically */
.fc-chat-active .cloto-som-chat-body .wiz-conversation.wiz-conversation--start {
  justify-content: flex-start;
}
.fc-chat-active .cloto-som-chat-body .wiz-conversation.wiz-conversation--start .fc-chat-start-container {
  margin: auto 0;
}

/* Input pinned at bottom */
.fc-chat-active .cloto-som-chat-body .wiz-input {
  flex-shrink: 0;
  position: relative;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* Hide wizard chrome when mounted inside sommario chat */
.cloto-som-chat-body .wiz-prefunnel-close { display: none !important; }
.cloto-som-chat-body .wiz-qa-header { display: none !important; }
.cloto-som-chat-body .wiz-input__hint { display: none !important; }

/* Phase dots in sommario chat — visible and centered */
.fc-chat-active .cloto-som-chat-body .fc-phase-bar {
  display: flex;
  justify-content: center;
  padding: 8px 0;
  flex-shrink: 0;
}

/* Hide history and card breadcrumb inside sommario chat (redundant with our header) */
.cloto-som-chat-body .wiz-history { display: none !important; }
.cloto-som-chat-body .wiz-card-divider { display: none !important; }

/* Light mode */
body.fd-light .cloto-som-chat-view {
  background: var(--cloto-surface);
}

@media (max-width: 768px) {
  .cloto-som-chat-header { padding: 12px 16px 6px; }
  .cloto-som-chat-back { font-size: 13px; }
  .cloto-som-chat-title { font-size: 14px; }
}

/* ═══ INLINE EDITOR (inside scene detail) ═══ */

/* Hide editor's own title and synopsis — scene detail already shows them */
.cloto-som-editor-inline .cw-scene-title { display: none; }
.cloto-som-editor-inline .cw-scene-synopsis { display: none; }

/* Loading indicator */
.cloto-som-editor-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 32px 0;
  font-family: var(--cloto-font-ui);
  font-size: 14px;
  color: var(--cloto-text-60);
}

/* Textarea: match prose reading size, auto-height (page scrolls, not textarea) */
.cloto-som-editor-inline .cw-scene-textarea {
  min-height: 100px;
  height: auto;
  font-size: 17px;
  line-height: 1.8;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden; /* no internal scroll — textarea grows, page scrolls */
  resize: none;
}
.cloto-som-editor-inline .cw-scene-textarea:focus {
  border: none;
}

/* Readonly state: textarea looks like plain text */
.cloto-som-editor-inline--readonly .cw-scene-textarea {
  cursor: default;
  color: var(--cloto-text-100);
  -webkit-user-select: text;
  user-select: text;
}
.cloto-som-editor-inline--readonly .cw-scene-textarea:focus {
  outline: none;
}

/* Override scene editor's min-height and overflow */
.cloto-som-editor-inline .cw-scene {
  overflow: visible;
}

/* Diff view (tessuto): match textarea size */
.cloto-som-editor-inline .cw-tessuto-view {
  font-size: 17px;
  line-height: 1.8;
  padding: 0;
  border: none;
  overflow: visible;
  min-height: auto;
}

/* (tessila actions now go directly to sticky bar via _externalBar) */

/* Tessila hint: keep inline */
.cloto-som-editor-inline .cw-tessila-hint {
  margin: 16px 0;
}

/* Tessila stats: keep inline */
.cloto-som-editor-inline .cw-tessila-stats {
  margin: 12px 0;
}

/* Editor bar: always hidden (our sticky bar replaces it) */
.cloto-som-editor-inline .cw-scene-bar {
  display: none !important;
}
/* Tessila actions: hidden in editor (shown when moved to sticky) */
.cloto-som-editor-inline .cw-tessila-actions {
  display: none !important;
}

/* Editor bar inside sticky: match our button style */
.cloto-som-scene-bar-inner .cw-scene-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0;
}
.cloto-som-scene-bar-inner .cw-scene-submit {
  padding: 10px 24px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 500;
  min-width: 120px;
  min-height: auto;
  text-align: center;
  justify-content: center;
}
.cloto-som-scene-bar-inner .cw-scene-save-dot {
  display: none;
}
.cloto-som-scene-bar-inner .cw-scene-nota-btn {
  display: none;
}

/* Hide "mostra originale" toggle */
.cloto-som-editor-inline .cw-restore-original {
  display: none !important;
}

/* Infusion tooltip: above sticky bar (tooltip is appended to body, not inside editor) */
body.fc-active .cw-infusion-tooltip {
  z-index: 9500;
}

/* Infusion tooltip buttons: pill style matching sticky bar CTA
   Tooltip is appended to <body>, so scope via body.fc-active (sommario mode) */
body.fc-active .cw-infusion-tooltip .cw-tip-actions {
  gap: 8px;
}
body.fc-active .cw-infusion-tooltip .cw-tip-btn {
  font-family: var(--cloto-font-ui);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 20px;
  min-height: auto;
  cursor: pointer;
  transition: all var(--duration-fast);
}
body.fc-active .cw-infusion-tooltip .cw-tip-btn--accept {
  color: var(--cloto-teal);
  border: 1px solid rgba(94,198,198,0.4);
  background: rgba(94,198,198,0.08);
}
body.fc-active .cw-infusion-tooltip .cw-tip-btn--accept:hover {
  background: rgba(94,198,198,0.15);
}
body.fc-active .cw-infusion-tooltip .cw-tip-btn--reject {
  color: #c44;
  border: 1px solid rgba(200,70,70,0.2);
  background: transparent;
}
body.fc-active .cw-infusion-tooltip .cw-tip-btn--reject:hover {
  background: rgba(200,70,70,0.06);
}
body.fc-active .cw-infusion-tooltip .cw-tip-btn--edit,
body.fc-active .cw-infusion-tooltip .cw-tip-btn--ok {
  color: var(--cloto-text-50);
  border: 1px solid var(--cloto-glass-border-hover);
  background: var(--cloto-glass-border);
}
body.fc-active .cw-infusion-tooltip .cw-tip-btn--edit:hover,
body.fc-active .cw-infusion-tooltip .cw-tip-btn--ok:hover {
  background: var(--cloto-white-a8);
}
/* Light mode */
body.fd-light.fc-active .cw-infusion-tooltip .cw-tip-btn--accept {
  color: #3a9999;
  border-color: rgba(60,160,160,0.3);
  background: rgba(60,160,160,0.06);
}
body.fd-light.fc-active .cw-infusion-tooltip .cw-tip-btn--accept:hover {
  background: rgba(60,160,160,0.12);
}
body.fd-light.fc-active .cw-infusion-tooltip .cw-tip-btn--reject {
  color: #b33;
  border-color: rgba(180,50,50,0.15);
}
body.fd-light.fc-active .cw-infusion-tooltip .cw-tip-btn--edit,
body.fd-light.fc-active .cw-infusion-tooltip .cw-tip-btn--ok {
  color: rgba(0,0,0,0.4);
  border-color: rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.03);
}
body.fd-light.fc-active .cw-infusion-tooltip .cw-tip-btn--edit:hover,
body.fd-light.fc-active .cw-infusion-tooltip .cw-tip-btn--ok:hover {
  background: rgba(0,0,0,0.06);
}

/* ═══ UNIFIED HEADER ═══ */

/* Nav section (left of header, after logo) */
.fc-header__nav {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin-left: 12px;
}

/* Right section (Contesto + Credits + Theme) */
.fc-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: 16px;
}

/* Story title in sommario */
.fc-header__title {
  font-family: var(--cloto-font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: var(--cloto-text-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Back link */
.fc-header__back {
  font-family: var(--cloto-font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--cloto-text-70);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
}
.fc-header__back:hover {
  color: var(--cloto-text-100, #e8e6e1);
}

/* Contesto button */
.fc-header__context-btn {
  font-family: var(--cloto-font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--cloto-text-50);
  background: var(--cloto-glass-border);
  border: 1px solid var(--cloto-glass-border-hover);
  border-radius: 12px;
  padding: 4px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.fc-header__context-btn:hover {
  background: var(--cloto-glass-border-hover);
  color: var(--cloto-text-70);
}

/* Credits mount */
.fc-header__credits-mount {
  display: flex;
  align-items: center;
}

/* Light mode header */
body.fd-light .fc-header__title { color: rgba(0,0,0,0.3); }
body.fd-light .fc-header__back { color: rgba(0,0,0,0.6); }
body.fd-light .fc-header__back:hover { color: rgba(0,0,0,0.85); }
body.fd-light .fc-header__context-btn {
  color: rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
body.fd-light .fc-header__context-btn:hover {
  background: rgba(0,0,0,0.08);
  color: rgba(0,0,0,0.7);
}

/* Mobile header */
@media (max-width: 768px) {
  .fc-header__title { font-size: 12px; }
  .fc-header__back { font-size: 13px; }
  .fc-header__context-btn { font-size: 11px; padding: 3px 10px; }
  .fc-header__right { gap: 8px; }
}
@media (max-width: 480px) {
  .fc-header__context-btn { padding: 3px 8px; font-size: 10px; }
}

/* ── Hide redundant back links (back is in unified header) ── */
.cloto-som-chat-header { display: none; }
.cloto-som-scene-back { display: none; }

/* ═══ CONTESTO ESPLORAZIONE — Modal extras ═══ */

/* Slug line (funzione strutturale + luogo) */
.cloto-scheda-slug {
  font-family: var(--cloto-font-mono, monospace);
  font-size: 11px;
  color: var(--cloto-gold, #c9a84c);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(201,168,76,0.06);
  padding: 5px 14px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 8px;
}
.cloto-scheda-time {
  font-family: var(--cloto-font-mono, monospace);
  font-size: 10px;
  color: var(--cloto-text-50);
  margin-bottom: 12px;
}
.cloto-scheda-logline {
  font-family: var(--cloto-font-body, var(--cloto-font-ui));
  font-size: 15px;
  color: var(--cloto-text-50);
  line-height: 1.7;
  margin-bottom: 16px;
}

/* Section dividers */
.cloto-scheda-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cloto-glass-border);
}

/* Character cards */
.cloto-scheda-char-card {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fbw-divider);
}
.cloto-scheda-char-card:last-child {
  border-bottom: none; margin-bottom: 0; padding-bottom: 0;
}
.cloto-scheda-char-name {
  font-family: var(--cloto-font-brand);
  font-size: 16px;
  font-weight: 600;
  color: var(--cloto-text-100);
  margin-bottom: 4px;
}
.cloto-scheda-char-role {
  font-family: var(--cloto-font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--cloto-text-50);
}
.cloto-scheda-char-detail {
  font-size: 13px;
  color: var(--cloto-text-70);
  line-height: 1.6;
  margin-bottom: 6px;
}
.cloto-scheda-char-traits {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
}
.cloto-scheda-char-trait {
  font-size: 12px;
  color: var(--cloto-text-50);
  line-height: 1.5;
}
.cloto-scheda-char-trait--flaw {
  color: rgba(200,120,80,0.7);
}
.cloto-scheda-char-arc {
  font-size: 12px;
  color: var(--cloto-teal, #5ec6c6);
  line-height: 1.5;
  padding: 6px 0 0 10px;
  border-left: 2px solid rgba(94,198,198,0.2);
}

/* Location card */
.cloto-scheda-location-card { margin-bottom: 8px; }
.cloto-scheda-location-name {
  font-family: var(--cloto-font-brand);
  font-size: 15px;
  font-weight: 600;
  color: var(--cloto-text-70);
  margin-bottom: 4px;
}
.cloto-scheda-location-type {
  font-family: var(--cloto-font-mono);
  font-size: 10px;
  color: var(--cloto-text-20);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.cloto-scheda-location-desc {
  font-size: 13px;
  color: var(--cloto-text-70);
  line-height: 1.6;
  margin-bottom: 4px;
}
.cloto-scheda-location-atmo {
  font-size: 12px;
  color: var(--cloto-text-50);
  line-height: 1.5;
}

/* Siblings (prima/dopo) */
.cloto-scheda-sibling { margin-bottom: 12px; }
.cloto-scheda-sibling:last-child { margin-bottom: 0; }
.cloto-scheda-sibling-label {
  font-family: var(--cloto-font-mono);
  font-size: 10px;
  color: var(--cloto-text-20);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.cloto-scheda-sibling-title {
  font-family: var(--cloto-font-brand);
  font-size: 14px;
  font-weight: 600;
  color: var(--cloto-text-50);
  margin-bottom: 2px;
}
.cloto-scheda-sibling-logline {
  font-size: 13px;
  color: var(--cloto-text-50);
  line-height: 1.6;
}

/* Light mode context extras */
body.fd-light .cloto-scheda-section { border-top-color: rgba(0,0,0,0.06); }
body.fd-light .cloto-scheda-char-card { border-bottom-color: rgba(0,0,0,0.04); }
body.fd-light .cloto-scheda-char-name { color: rgba(0,0,0,0.85); }
body.fd-light .cloto-scheda-char-detail { color: rgba(0,0,0,0.4); }
body.fd-light .cloto-scheda-char-trait { color: rgba(0,0,0,0.3); }
body.fd-light .cloto-scheda-char-trait--flaw { color: rgba(180,90,50,0.7); }
body.fd-light .cloto-scheda-char-arc { color: #3a9999; border-left-color: rgba(60,160,160,0.2); }
body.fd-light .cloto-scheda-sibling-title { color: rgba(0,0,0,0.5); }
body.fd-light .cloto-scheda-sibling-logline { color: rgba(0,0,0,0.3); }

@media (max-width: 768px) {
  .cloto-scheda-logline { font-size: 14px; }
  .cloto-scheda-char-name { font-size: 15px; }
}

/* ═══ UNDO EXPANSION LINK ═══ */

.cloto-som-scene-undo {
  text-align: center;
  padding: 12px 0 0;
}
.cloto-som-scene-undo-link {
  font-family: var(--cloto-font-ui);
  font-size: 12px;
  color: var(--cloto-text-50);
  cursor: pointer;
  transition: color 0.15s;
}
.cloto-som-scene-undo-link:hover {
  color: var(--cloto-text-50);
}
body.fd-light .cloto-som-scene-undo-link {
  color: rgba(0,0,0,0.2);
}
body.fd-light .cloto-som-scene-undo-link:hover {
  color: rgba(0,0,0,0.45);
}

/* ═══ CHAT ERROR STATE ═══ */

.cloto-som-chat-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 12px;
  flex: 1;
}
.cloto-som-chat-error-icon {
  font-size: 28px;
  opacity: 0.4;
}
.cloto-som-chat-error-text {
  font-family: var(--cloto-font-body, var(--cloto-font-ui));
  font-size: 14px;
  color: var(--cloto-text-50);
  text-align: center;
}
.cloto-som-chat-error-btn {
  padding: 8px 20px;
  border-radius: 16px;
  border: 1px solid var(--cloto-text-15);
  background: transparent;
  color: var(--cloto-text-50);
  font-family: var(--cloto-font-ui);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--duration-fast);
}
.cloto-som-chat-error-btn:hover {
  background: var(--cloto-white-a8);
}

/* ═══ TRANSITION ANIMATION ═══ */

.cloto-som-view-transition {
  animation: cloto-som-fadeSlideIn 0.25s ease forwards;
}
@keyframes cloto-som-fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══ THREAD OF GOLD — post-tessila ═══ */

.cloto-som-leaf--thread-of-gold {
  position: relative;
  overflow: hidden;
  animation: somThreadSettle 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Golden thread sweeping across */
.cloto-som-leaf--thread-of-gold::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -30%;
  width: 30%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,168,76,0.3) 20%,
    rgba(201,168,76,0.7) 45%,
    rgba(255,220,120,0.8) 50%,
    rgba(201,168,76,0.7) 55%,
    rgba(201,168,76,0.3) 80%,
    transparent 100%
  );
  animation: somThreadMove 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  z-index: 1;
  pointer-events: none;
}

@keyframes somThreadMove {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* Default: expand (viola) → gold */
@keyframes somThreadSettle {
  0%   { background: rgba(180,140,220,0.12); }
  20%  { background: rgba(180,140,220,0.10); }
  50%  { background: rgba(201,168,76,0.08); }
  70%  { background: rgba(201,168,76,0.12); }
  100% { background: rgba(201,168,76,0.12); }
}

/* Variant: explore (teal) → gold */
.cloto-som-leaf--thread-of-gold--from-teal {
  animation-name: somThreadSettleTeal;
}
@keyframes somThreadSettleTeal {
  0%   { background: rgba(94,198,198,0.12); }
  20%  { background: rgba(94,198,198,0.08); }
  50%  { background: rgba(201,168,76,0.08); }
  70%  { background: rgba(201,168,76,0.12); }
  100% { background: rgba(201,168,76,0.12); }
}

/* Variant: re-tessila (gold → gold flash) */
.cloto-som-leaf--thread-of-gold--from-gold {
  animation-name: somThreadSettleGold;
}
@keyframes somThreadSettleGold {
  0%   { background: rgba(201,168,76,0.12); }
  30%  { background: rgba(201,168,76,0.25); }
  100% { background: rgba(201,168,76,0.12); }
}

/* Chip: viola → gold */
.cloto-som-chip--thread {
  animation: somChipThread 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes somChipThread {
  0%   { color: rgb(180,140,220); border-color: rgba(180,140,220,0.3); background: rgba(180,140,220,0.15); }
  50%  { color: #c9a84c; border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.2); }
  100% { color: #c9a84c; border-color: rgba(201,168,76,0.3); background: rgba(201,168,76,0.15); }
}

/* Chip: teal → gold */
.cloto-som-chip--thread-from-teal {
  animation: somChipThreadTeal 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes somChipThreadTeal {
  0%   { color: var(--cloto-teal); border-color: rgba(94,198,198,0.3); background: rgba(94,198,198,0.15); }
  50%  { color: #c9a84c; border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.2); }
  100% { color: #c9a84c; border-color: rgba(201,168,76,0.3); background: rgba(201,168,76,0.15); }
}

/* Light mode variants */
body.fd-light .cloto-som-leaf--thread-of-gold::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(154,126,48,0.2) 20%,
    rgba(154,126,48,0.5) 45%,
    rgba(180,150,60,0.6) 50%,
    rgba(154,126,48,0.5) 55%,
    rgba(154,126,48,0.2) 80%,
    transparent 100%
  );
}
body.fd-light .cloto-som-leaf--thread-of-gold {
  animation-name: somThreadSettleLight;
}
@keyframes somThreadSettleLight {
  0%   { background: rgba(140,90,180,0.08); }
  50%  { background: rgba(154,126,48,0.06); }
  100% { background: rgba(154,126,48,0.08); }
}

/* ═══ EXPANSION ANIMATIONS ═══ */

/* Flash on section header when just expanded */
@keyframes somSectionFlash {
  0% { background: rgba(94, 198, 198, 0.2); }
  100% { background: transparent; }
}
.cloto-som-section--just-expanded {
  animation: somSectionFlash 1.2s ease forwards;
  border-radius: 8px;
}

/* New child rows slide in */
@keyframes somLeafAppear {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.cloto-som-leaf--just-appeared {
  animation: somLeafAppear 0.4s ease forwards;
}

/* Spacer (pushes items apart) */
.cloto-som-bar-spacer { flex: 1; }

/* Word count in sticky bar */
.cloto-som-bar-wordcount {
  font-family: var(--cloto-font-mono, monospace);
  font-size: 11px;
  color: var(--cloto-text-50);
}

/* Scheda button */
.cloto-som-bar-btn--scheda {
  color: var(--cloto-text-50);
  border-color: var(--cloto-glass-border-hover);
  background: var(--cloto-glass-border);
  min-width: auto;
  padding: 10px 16px;
  font-size: 13px;
}
.cloto-som-bar-btn--scheda:hover {
  background: var(--cloto-white-a8);
  color: var(--cloto-text-70);
}

/* Confirm button (teal accent) */
.cloto-som-bar-btn--confirm {
  color: var(--cloto-teal);
  border-color: var(--cloto-teal-a40);
  background: var(--cloto-teal-a8);
}
.cloto-som-bar-btn--confirm:hover {
  background: var(--cloto-teal-a15);
}

/* Disabled state */
.cloto-som-bar-btn:disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Ghost button (Annulla) */
.cloto-som-bar-btn--ghost {
  color: #e05555;
  border-color: rgba(224, 85, 85, 0.3);
  background: transparent;
}
.cloto-som-bar-btn--ghost:hover {
  background: rgba(224, 85, 85, 0.08);
}

/* Nota di Cloto button */
.cloto-som-bar-btn--nota {
  color: var(--cloto-gold);
  border-color: var(--cloto-gold-a25);
  background: var(--cloto-gold-a8);
}
.cloto-som-bar-btn--nota:hover {
  background: var(--cloto-gold-a15);
}

/* Spinner state on bar button */
.cloto-som-bar-btn.is-loading,
.cloto-som-bar-btn.is-spinning {
  opacity: 0.7;
  pointer-events: none;
}

/* Brand spiral inside button */
.cloto-som-bar-btn .wiz-spiral {
  display: inline-block;
  vertical-align: middle;
}

/* ═══ SCHEDA SCENA MODAL ═══ */

.cloto-scheda-backdrop {
  position: fixed; inset: 0;
  background: var(--cloto-void-a60);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s ease;
}
.cloto-scheda-backdrop.is-visible { opacity: 1; }

.cloto-scheda-modal {
  background: var(--cloto-bg-scene, #151721);
  border: 1px solid var(--cloto-glass-border);
  border-radius: 16px;
  width: 92%; max-width: 560px;
  max-height: 85vh; overflow-y: auto;
}

.cloto-scheda-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0;
}
.cloto-scheda-title {
  font-family: var(--cloto-font-brand);
  font-size: 22px; font-weight: 600;
  color: var(--cloto-text-100);
}
.cloto-scheda-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--cloto-glass-border); color: var(--cloto-text-50);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cloto-scheda-close:hover { background: var(--cloto-glass-border-hover); }

.cloto-scheda-body { padding: 20px 24px 28px; }

.cloto-scheda-place {
  font-family: var(--cloto-font-mono);
  font-size: 11px; color: var(--cloto-gold);
  text-transform: uppercase; letter-spacing: 0.03em;
  background: rgba(201,168,76,0.06);
  padding: 5px 14px; border-radius: 6px;
  display: inline-block; margin-bottom: 12px;
}
.cloto-scheda-chars {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.cloto-scheda-char {
  font-size: 12px; color: var(--cloto-teal);
  padding: 4px 12px; border: 1px solid rgba(94,198,198,0.2); border-radius: 12px;
}
.cloto-scheda-synopsis {
  font-family: var(--cloto-font-body, var(--cloto-font-ui));
  font-size: 15px; color: var(--cloto-text-50);
  line-height: 1.7; margin-bottom: 20px;
}
.cloto-scheda-section-title {
  font-family: var(--cloto-font-body, var(--cloto-font-ui));
  font-size: 11px; font-weight: 600;
  color: var(--cloto-text-50);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 8px; margin-top: 16px;
}
.cloto-scheda-dq {
  font-family: var(--cloto-font-body, var(--cloto-font-ui));
  font-size: 14px; color: var(--cloto-gold);
  padding: 12px 0 12px 14px;
  border-left: 2px solid rgba(201,168,76,0.3);
}
.cloto-scheda-promises { margin-bottom: 12px; }
.cloto-scheda-promise {
  font-family: var(--cloto-font-body, var(--cloto-font-ui));
  font-size: 13px; color: var(--cloto-text-70);
  line-height: 1.6; padding-left: 4px;
}
.cloto-scheda-struct {
  font-family: var(--cloto-font-body, var(--cloto-font-ui));
  font-size: 13px; color: var(--cloto-text-50);
  line-height: 1.6;
}

/* Light mode scheda */
body.fd-light .cloto-scheda-modal { background: #fff; border-color: rgba(0,0,0,0.08); }
body.fd-light .cloto-scheda-title { color: rgba(0,0,0,0.85); }
body.fd-light .cloto-scheda-close { background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.3); }
body.fd-light .cloto-scheda-synopsis { color: rgba(0,0,0,0.5); }
body.fd-light .cloto-scheda-section-title { color: rgba(0,0,0,0.35); }
body.fd-light .cloto-scheda-promise { color: rgba(0,0,0,0.4); }
body.fd-light .cloto-scheda-struct { color: rgba(0,0,0,0.3); }
body.fd-light .cloto-som-bar-btn--scheda {
  color: rgba(0,0,0,0.4);
  border-color: rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.03);
}
body.fd-light .cloto-som-bar-btn--scheda:hover {
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.6);
}
body.fd-light .cloto-som-bar-btn--confirm {
  color: var(--cloto-teal);
  border-color: rgba(26,138,138,0.3);
  background: rgba(26,138,138,0.06);
}
body.fd-light .cloto-som-bar-btn--confirm:hover {
  background: rgba(26,138,138,0.12);
}
body.fd-light .cloto-som-bar-wordcount {
  color: rgba(0,0,0,0.25);
}

@media (max-width: 768px) {
  .cloto-scheda-modal { width: 96%; border-radius: 12px; }
  .cloto-scheda-title { font-size: 20px; }
  .cloto-scheda-body { padding: 16px 20px 24px; }
}

/* ═══ LIGHT THEME ═══ */

body.fd-light .cloto-som-leaf:hover {
  background: var(--cloto-black-a5);
}

body.fd-light .cloto-som-chip--explore {
  color: var(--cloto-teal);
  background: rgba(26, 138, 138, 0.1);
  border-color: rgba(26, 138, 138, 0.25);
}

body.fd-light .cloto-som-chip--expand {
  color: rgb(140, 90, 180);
  background: rgba(140, 90, 180, 0.1);
  border-color: rgba(140, 90, 180, 0.25);
}

body.fd-light .cloto-som-chip--woven {
  color: var(--cloto-gold);
  background: rgba(154, 126, 48, 0.1);
  border-color: rgba(154, 126, 48, 0.25);
}

body.fd-light .cloto-som-chip--in-progress {
  color: var(--cloto-teal);
  background: rgba(26, 138, 138, 0.15);
  border-color: rgba(26, 138, 138, 0.35);
  font-weight: 600;
}
body.fd-light .cloto-som-leaf--in-progress {
  animation: somExploringPulseLight 2.5s ease-in-out infinite;
}
@keyframes somExploringPulseLight {
  0%   { background: rgba(60,160,160,0.06); }
  50%  { background: rgba(60,160,160,0.14); }
  100% { background: rgba(60,160,160,0.06); }
}

body.fd-light .cloto-som-scene-view {
  background: var(--cloto-surface);
}

body.fd-light .cloto-som-scene-bar {
  background: linear-gradient(transparent, var(--cloto-surface) 20%);
}

body.fd-light .cloto-som-bar-btn--explore,
body.fd-light .cloto-som-bar-btn--expand {
  color: var(--cloto-teal);
  border-color: rgba(26, 138, 138, 0.3);
  background: rgba(26, 138, 138, 0.06);
}
body.fd-light .cloto-som-bar-btn--explore:hover,
body.fd-light .cloto-som-bar-btn--expand:hover {
  background: rgba(26, 138, 138, 0.12);
}

body.fd-light .cloto-som-bar-btn--write {
  color: var(--cloto-gold);
  border-color: rgba(154, 126, 48, 0.3);
  background: rgba(154, 126, 48, 0.06);
}
body.fd-light .cloto-som-bar-btn--write:hover {
  background: rgba(154, 126, 48, 0.12);
}

body.fd-light .cloto-som-section-header {
  border-left-color: rgba(26, 138, 138, 0.25);
  background: rgba(26, 138, 138, 0.03);
}
body.fd-light .cloto-som-section-header:hover {
  background: rgba(26, 138, 138, 0.06);
}

/* ═══ RESPONSIVE ═══ */

/* Responsive breakout margins (match fc-main padding) */
@media (min-width: 601px) and (max-width: 1024px) {
  #cloto-scene-detail-view,
  #cloto-chat-view,
  #cloto-editor-view {
    margin: -24px -24px -32px;
    width: calc(100% + 48px);
  }
}
@media (max-width: 600px) {
  #cloto-scene-detail-view,
  #cloto-chat-view,
  #cloto-editor-view {
    margin: -16px -16px -24px;
    margin-top: calc(-16px - 24px);
    width: calc(100% + 32px);
  }
}

@media (max-width: 768px) {
  .cloto-som-main { padding: 16px 12px 80px; }
  .cloto-som-story-title { font-size: 28px; }
  .cloto-som-story-logline { font-size: 14px; }
  .cloto-som-leaf { padding: 14px 12px; }
  .cloto-som-leaf[data-depth="1"] { margin-left: 16px; }
  .cloto-som-leaf[data-depth="2"] { margin-left: 32px; }
  .cloto-som-leaf[data-depth="3"] { margin-left: 48px; }
  .cloto-som-leaf-title { font-size: 18px; }
  .cloto-som-leaf-num { font-size: 11px; }
  .cloto-som-section-title { font-size: 14px; }
  .cloto-som-section-count { font-size: 10px; }
  .cloto-som-scene-content { padding: 48px 16px 0; /* must clear fc-header 48px */ }
  .cloto-som-scene-title { font-size: 30px; }
  .cloto-som-scene-synopsis { font-size: 15px; }
  .cloto-som-scene-preview { font-size: 14px; }
  .cloto-som-scene-place { font-size: 12px; }
  .cloto-som-scene-char { font-size: 12px; }
  .cloto-som-scene-bar-inner { padding: 0 16px; }
  .cloto-som-bar-btn { padding: 10px 18px; font-size: 12px; }
}

@media (max-width: 480px) {
  .cloto-som-story-title { font-size: 24px; }
  .cloto-som-leaf-title { font-size: 17px; }
  .cloto-som-leaf-num { display: none; }
  .cloto-som-section-title { font-size: 13px; }
  .cloto-som-scene-title { font-size: 26px; }
  .cloto-som-scene-synopsis { font-size: 14px; padding-left: 14px; }
  .cloto-som-scene-preview { font-size: 14px; padding-left: 14px; }
  .cloto-som-bar-btn { padding: 9px 16px; font-size: 11px; min-width: 90px; }
}