/* ═══════════════════════════════════════════════════════════════
   CLOTO THREE-COLUMN LAYOUT
   Index | Chat | Editor (openable)
   ═══════════════════════════════════════════════════════════════ */

/* ====== Kill legacy containers ====== */
#fc-header,
#fc-main,
#fc-breadcrumb,
#fc-topbar,
#fbw-outline-root,
#fbw-draft-root,
#fbw-wizard-root,
.cloto-unibar,
.cloto-sidebar,
.fbw-wizard-overlay,
.fc-focus-card,
.fc-children-section,
.wiz-prefunnel-close {
  display: none !important;
}

/* ====== Tokens ====== */

:root {
  --cloto-index-w: 260px;
  --cloto-context-w: 260px;
  --cloto-editor-min-w: 360px;
  --cloto-editor-text: rgba(224,220,214,0.92);
}

body.fd-light {
  --cloto-editor-text: #333;
}

/* ====== Header — hidden (profilo in footer indice) ====== */
#cloto-header { display: none !important; }

/* ====== Anonymous mode: hide sidebar, full-width chat ====== */
body.cloto-anon #cloto-index-panel { display: none !important; }
body.cloto-anon #cloto-context-panel { display: none !important; }
body.cloto-anon .cloto-context-toggle { display: none !important; }
body.cloto-anon #cloto-workspace {
  display: flex !important;
}
body.cloto-anon #cloto-chat-panel {
  flex: 1;
}

/* Anonymous top bar — lang switch + login */
body.cloto-anon .cloto-anon-bar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
}
body.cloto-anon .cloto-anon-login {
  color: var(--cloto-text-70);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
body.cloto-anon .cloto-anon-login:hover { color: var(--cloto-text-100); }

/* Lang switch */
.cloto-anon-lang {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cloto-anon-lang button {
  background: none;
  border: none;
  color: var(--cloto-text-40);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 4px;
  font-family: var(--cloto-font-ui);
  transition: color 0.15s;
  letter-spacing: 0.03em;
}
.cloto-anon-lang button:hover { color: var(--cloto-text-100); }
.cloto-anon-lang button.active { color: var(--cloto-teal); }
.cloto-anon-lang-sep {
  color: var(--cloto-text-25);
  font-size: 10px;
  user-select: none;
}

/* ====== Workspace — 3-column grid, no header ====== */

#cloto-workspace {
  display: grid;
  grid-template-columns: var(--cloto-index-w) 1fr 0;
  grid-template-rows: 1fr;
  height: 100dvh;
  transition: grid-template-columns 0.3s ease;
  overflow: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Project open: context hidden by default, shown only in editor mode */
body.cloto-in-project #cloto-workspace {
  grid-template-columns: var(--cloto-index-w) 1fr 0;
}
body.cloto-in-project #cloto-workspace.editor-open {
  grid-template-columns: var(--cloto-index-w) 1fr var(--cloto-context-w, 280px);
}

/* Context hidden toggle (desktop) */
#cloto-workspace.context-hidden {
  grid-template-columns: var(--cloto-index-w) 1fr 0 !important;
}
.context-hidden #cloto-context-panel {
  width: 0;
  padding: 0;
  overflow: hidden;
  border: none;
}

/* Editor open: editor replaces chat in center column, context stays */
#cloto-workspace.editor-open {
  grid-template-columns: var(--cloto-index-w) 1fr var(--cloto-context-w, 280px);
}

/* Focus mode: editor takes full width */
#cloto-workspace.focus-mode {
  grid-template-columns: 0 1fr 0;
}

#cloto-workspace.focus-mode #cloto-index-panel,
#cloto-workspace.focus-mode #cloto-context-panel {
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Focus button */
.cloto-editor-btn--focus {
  position: absolute;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--cloto-text-30);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.cloto-editor-btn--focus:hover {
  color: var(--cloto-text-70);
  background: var(--cloto-white-a6, rgba(255,255,255,0.12));
}

.focus-mode .cloto-editor-btn--focus {
  color: var(--cloto-text-50);
}

body.fd-light .cloto-editor-btn--focus {
  color: rgba(26,28,40,0.65);
}

body.fd-light .cloto-editor-btn--focus:hover {
  color: rgba(26,28,40,0.7);
  background: rgba(0,0,0,0.08);
}

body.fd-light .focus-mode .cloto-editor-btn--focus {
  color: rgba(26,28,40,0.7);
}

/* Continue button (completed mode) */
.cloto-editor-btn--continue {
  background: var(--cloto-gold, #b8860b);
  color: white;
  border: none;
  padding: 8px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.15s;
}

.cloto-editor-btn--continue:hover {
  filter: brightness(1.1);
}

.cloto-editor-btn--continue:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Crossfade transition overlay */
.cloto-transition-fade {
  position: fixed;
  inset: 0;
  background: var(--cloto-void, #0d0f17);
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 9999;
  pointer-events: none;
}

.cloto-transition-fade.is-active {
  opacity: 1;
}

/* ====== Context Panel (right column) ====== */

/* Context hidden when not in editor mode */
#cloto-context-panel {
  overflow: hidden;
}
body.cloto-in-project #cloto-workspace:not(.editor-open) #cloto-context-panel {
  width: 0;
  padding: 0;
  border: none;
}

/* Context panel: font scale between chat (15px ui) and editor (16-20px serif)
   Uses serif like editor but slightly smaller — reading companion feel */
#cloto-context-panel {
  background: var(--color-background-primary, var(--cloto-surface, #161a24));
  border-left: 0.5px solid var(--color-border-tertiary, var(--cloto-glass-border, rgba(255,255,255,0.08)));
  padding: 28px 22px;
  overflow-y: auto;
  font-family: 'Cardo', Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cloto-editor-text, rgba(224,220,214,0.92));
  transition: width 0.3s ease, padding 0.3s ease;
}

body.fd-light #cloto-context-panel {
  background: var(--color-background-primary, #fff);
  border-left-color: var(--color-border-tertiary, #e5e7eb);
  color: #444;
}

.cloto-context-header {
  margin-bottom: 24px;
}

.cloto-context-title {
  font-family: 'Cardo', Georgia, serif;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 500;
  color: var(--cloto-gold, #c9a84c);
  line-height: 1.3;
}

.cloto-context-logline {
  font-family: 'Cardo', Georgia, serif;
  font-size: clamp(15px, 2vw, 18px);
  font-style: italic;
  color: var(--cloto-text-50, #6c6f78);
  line-height: 1.75;
  margin-top: 10px;
}

.cloto-context-status-chip {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 8px;
  font-weight: 500;
}

.cloto-context-status-chip--exploring {
  background: var(--cloto-teal-a8, rgba(62,207,207,0.08));
  color: var(--cloto-teal, #3ecfcf);
}
.cloto-context-status-chip--unwritten {
  background: var(--cloto-gold-a8, rgba(201,168,76,0.08));
  color: var(--cloto-gold, #c9a84c);
}
.cloto-context-status-chip--written {
  background: var(--cloto-success-a8, rgba(74,222,128,0.08));
  color: var(--cloto-success, #4ade80);
}
.cloto-context-status-chip--future {
  background: var(--cloto-surface-a20, rgba(22,26,36,0.2));
  color: var(--cloto-text-30, #4c4f58);
}
.cloto-context-status-chip--writing {
  background: var(--cloto-purple-a8, rgba(167,139,250,0.08));
  color: var(--cloto-purple, #a78bfa);
}

/* Entity sections inside context panel: inherit serif, override wp__ small sizes */
#cloto-context-panel .cloto-wp__slug {
  font-size: inherit;
  color: var(--cloto-text-40, #5c5f68);
  margin-bottom: 20px;
}
#cloto-context-panel .cloto-wp__label {
  font-size: 11px;
  font-family: var(--cloto-font-ui, system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
#cloto-context-panel .cloto-wp__char-name {
  font-size: inherit;
  color: var(--cloto-editor-text, rgba(224,220,214,0.92));
}
body.fd-light #cloto-context-panel .cloto-wp__char-name { color: #333; }
#cloto-context-panel .cloto-wp__char-role {
  font-size: 0.9em;
}
#cloto-context-panel .cloto-wp__char-desc {
  font-size: 0.9em;
  line-height: 1.65;
}
#cloto-context-panel .cloto-wp__note {
  font-size: inherit;
  line-height: 1.75;
}
#cloto-context-panel .cloto-wp__section {
  margin-bottom: 22px;
}

/* Identity block: title + logline — the compass of the scene */
.cloto-context-identity {
  margin-bottom: 28px;
}

.cloto-context-identity__title {
  font-family: 'Cardo', Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--cloto-gold, #c9a84c);
  line-height: 1.3;
}

.cloto-context-identity__logline {
  font-family: 'Cardo', Georgia, serif;
  font-size: 16px;
  font-style: italic;
  color: #666;
  line-height: 1.5;
  margin-top: 6px;
}

body.fd-light .cloto-context-identity__logline {
  color: #999;
}

/* Zone labels (LA SCENA / LA TUA VOCE) */
.cloto-context-zone-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #555;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--cloto-font-ui, system-ui, sans-serif);
}
body.fd-light .cloto-context-zone-label {
  color: #aaa;
  border-bottom-color: #e8e5de;
}

.cloto-context-zone-label--voice {
  margin-top: 24px;
  color: #5ec6c6;
}
body.fd-light .cloto-context-zone-label--voice {
  color: #1D9E75;
}

/* Notes collapsible */
.cloto-notes-collapsible.is-collapsed {
  max-height: 4.5em; /* ~3 lines at 1.5 line-height */
  overflow: hidden;
  position: relative;
}
.cloto-notes-collapsible.is-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2em;
  background: linear-gradient(transparent, var(--cloto-surface, #161a24));
  pointer-events: none;
}
body.fd-light .cloto-notes-collapsible.is-collapsed::after {
  background: linear-gradient(transparent, #fff);
}

.cloto-notes-toggle {
  display: block;
  background: none;
  border: none;
  color: #5ec6c6;
  font-size: 12px;
  font-family: var(--cloto-font-ui, system-ui, sans-serif);
  cursor: pointer;
  padding: 4px 0;
  margin-top: 4px;
}
.cloto-notes-toggle:hover { text-decoration: underline; }
body.fd-light .cloto-notes-toggle { color: #1D9E75; }

.cloto-context-cta {
  margin-top: 24px;
}

.cloto-context-cta-btn {
  background: var(--cloto-gold, #c9a84c);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 9px 24px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.15s;
  font-family: inherit;
  width: 100%;
}

.cloto-context-cta-btn:hover { filter: brightness(1.1); }

.cloto-context-section--future {
  opacity: 0.6;
}

/* ── Nota Scena structured (review mode) ── */
/* Pattern: cloto-context-identity warmth + zone-label typography */
.cloto-context-nota-scena {
  margin-bottom: 24px;
  padding: 16px 18px;
  background: rgba(94, 198, 198, 0.04);
  border: 1px solid rgba(94, 198, 198, 0.12);
  border-radius: 10px;
}
body.fd-light .cloto-context-nota-scena {
  background: rgba(26, 138, 138, 0.04);
  border-color: rgba(26, 138, 138, 0.15);
}

.cloto-context-nota-scena__title {
  font-family: var(--cloto-font-ui, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #5ec6c6;
  margin-bottom: 14px;
}
body.fd-light .cloto-context-nota-scena__title {
  color: #1a8a8a;
}

.cloto-context-nota-scena__field {
  margin-bottom: 12px;
}
.cloto-context-nota-scena__field:last-child {
  margin-bottom: 0;
}

.cloto-context-nota-scena__label {
  font-family: var(--cloto-font-ui, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cloto-text-70, #8b949e);
  margin-bottom: 3px;
}

.cloto-context-nota-scena__value {
  font-family: 'Cardo', Georgia, serif;
  font-size: 15px;
  line-height: 1.65;
  color: #e8e6e1;
}
body.fd-light .cloto-context-nota-scena__value {
  color: #222;
}

/* ── Loading state ── */
/* Pattern: cw-scene-submit-spinner aesthetic — centered, calm */
.cloto-context-loading {
  font-family: var(--cloto-font-ui, system-ui, sans-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--cloto-text-40, #5c5f68);
  text-align: center;
  padding: 40px 16px;
  animation: cloto-loading-pulse 2s ease-in-out infinite;
}
@keyframes cloto-loading-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ── Context toggle (accordion in review mode) ── */
/* Pattern: cloto-notes-toggle — teal text button */
.cloto-context-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: #5ec6c6;
  font-size: 12px;
  font-family: var(--cloto-font-ui, system-ui, sans-serif);
  cursor: pointer;
  padding: 10px 0 6px;
  margin-top: 8px;
  text-align: left;
  transition: color 0.15s;
}
.cloto-context-toggle:hover { text-decoration: underline; }
.cloto-context-toggle.is-open { color: var(--cloto-text-40, #5c5f68); }
body.fd-light .cloto-context-toggle {
  color: #1D9E75;
  border-top-color: #e8e5de;
}
body.fd-light .cloto-context-toggle.is-open { color: #999; }

/* ── Collapsible wrapper ── */
.cloto-context-collapsible {
  padding-top: 12px;
}

/* ── Card sense section (cloto-wp__sense-*) from card_sense refactor ── */
/* Pattern: cloto-wp__section + cloto-wp__label */
.cloto-wp__section--sense {
  margin-bottom: 22px;
}
.cloto-wp__sense-row {
  margin-bottom: 6px;
  line-height: 1.5;
}
.cloto-wp__sense-label {
  font-family: var(--cloto-font-ui, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cloto-text-40, #5c5f68);
  margin-right: 6px;
}
.cloto-wp__sense-value {
  font-family: 'Cardo', Georgia, serif;
  font-size: 14px;
  color: var(--cloto-editor-text, rgba(224,220,214,0.92));
}
body.fd-light .cloto-wp__sense-value { color: #444; }

/* ====== Celebration Modal ====== */

.cloto-celebration-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Celebration modal: chat-sized, compact */
.cloto-celebration-modal {
  background: var(--color-background-primary, var(--cloto-surface, #161a24));
  border-radius: 12px;
  padding: 32px 28px 24px;
  max-width: 360px;
  width: 85%;
  text-align: center;
  border: 0.5px solid var(--color-border-tertiary, var(--cloto-glass-border, rgba(255,255,255,0.08)));
}

body.fd-light .cloto-celebration-modal {
  background: #fff;
  border-color: #e5e7eb;
}

.cloto-celebration-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cloto-teal, #3ecfcf);
  margin-bottom: 14px;
  font-weight: 500;
  font-family: var(--cloto-font-ui, system-ui, sans-serif);
}
body.fd-light .cloto-celebration-label { color: #1D9E75; }

.cloto-celebration-title {
  font-family: 'Cardo', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--cloto-gold, #c9a84c);
  margin-bottom: 10px;
  line-height: 1.3;
}

.cloto-celebration-logline {
  font-family: 'Cardo', Georgia, serif;
  font-size: 18px;
  font-style: italic;
  color: var(--cloto-text-50, #6c6f78);
  line-height: 1.6;
  margin-bottom: 24px;
  padding: 0 8px;
}

.cloto-celebration-btn {
  background: var(--cloto-gold, #c9a84c);
  color: var(--cloto-void, #0d0f17);
  border: 1px solid var(--cloto-gold, #c9a84c);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.6s ease, border-color 0.6s ease, color 0.6s ease, opacity 0.6s ease;
  font-family: var(--cloto-font-ui, system-ui, sans-serif);
}

.cloto-celebration-btn:disabled {
  border-color: var(--cloto-white-a15, rgba(255,255,255,0.15));
  color: var(--cloto-text-40);
  background: transparent;
  opacity: 0.3;
  cursor: default;
}

.cloto-celebration-btn:not(:disabled):hover {
  background: #d4b65a;
  border-color: #d4b65a;
}

body.fd-light .cloto-celebration-btn {
  background: #b8960b;
  color: #fff;
  border-color: #b8960b;
}
body.fd-light .cloto-celebration-btn:not(:disabled):hover {
  background: #a6870a;
  border-color: #a6870a;
}
.cloto-register-gate__continue-hint {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  text-align: center;
  margin-top: 12px;
  line-height: 1.4;
}
body.fd-light .cloto-register-gate__continue-hint { color: rgba(0,0,0,0.4);
}

/* ====== Hero card (future node preview) ====== */

.cloto-hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 40px 24px;
}

.cloto-hero-badge {
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  margin-bottom: 16px;
}

.cloto-hero-badge--future {
  background: rgba(255,255,255,0.06);
  color: #666;
  border: 1px solid rgba(255,255,255,0.1);
}

.cloto-hero-badge--unwritten {
  background: rgba(139,115,64,0.15);
  color: #C4A55A;
  border: 1px solid rgba(196,165,90,0.2);
}

body.fd-light .cloto-hero-badge--future {
  background: #F0EDE6;
  color: #999;
  border-color: #e0dbd0;
}

body.fd-light .cloto-hero-badge--unwritten {
  background: #FDF6EC;
  color: #8B7340;
  border-color: #E8D5B0;
}

.cloto-hero-title {
  font-family: 'Cardo', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--cloto-gold, #c9a84c);
  margin-bottom: 12px;
}

.cloto-hero-logline {
  font-family: 'Cardo', Georgia, serif;
  font-size: 16px;
  font-style: italic;
  line-height: 1.6;
  max-width: 500px;
  color: #666;
  margin-bottom: 24px;
}

body.fd-light .cloto-hero-logline {
  color: #999;
}

.cloto-hero-message {
  font-size: 13px;
  font-weight: 400;
  color: #555;
}

body.fd-light .cloto-hero-message {
  color: #bbb;
}

/* ====== Cloto message: context + question separation ====== */

.cloto-msg-context {
  display: block;
  color: #8892a4;
}

body.fd-light .cloto-msg-context {
  color: #999;
}

.cloto-msg-question {
  display: block;
  margin-top: 10px;
  /* inherits #b0b8c8 from bubble — brighter than mirror */
}


/* Question fade-in after mirror type-on */
.cloto-msg-question--fade {
  animation: cloto-question-fade 0.6s ease;
}
@keyframes cloto-question-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* (transition chip removed — chat v2) */

/* (old cloto-chat-load-more moved to cloto-wizard.css — chat v2) */

/* Project complete celebration */
.cloto-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  padding-bottom: 80px;
  text-align: center;
}

.cloto-complete-logo {
  width: 96px;
  height: 96px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.cloto-complete-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--cloto-text-1, #e8e6e1);
  margin: 0;
  font-family: 'Cardo', Georgia, serif;
}

.cloto-complete-message {
  font-size: 15px;
  color: var(--cloto-text-3, #666);
  margin: 0;
}

body.fd-light .cloto-complete-title {
  color: #1a1a2e;
}

/* Completion in focus mode (inside editor) */
.cloto-complete-focus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  text-align: center;
}

.cloto-complete-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.cloto-complete-btn {
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: filter 0.15s;
  font-family: system-ui, -apple-system, sans-serif;
}

.cloto-complete-btn:hover {
  filter: brightness(1.1);
}

.cloto-complete-btn--primary {
  background: var(--cloto-gold, #b8860b);
  color: white;
}

.cloto-complete-btn--secondary {
  background: transparent;
  border: 1px solid var(--cloto-glass-border, rgba(255,255,255,0.08));
  color: var(--cloto-text-2, #999);
}

.cloto-complete-btn--secondary:hover {
  background: var(--cloto-white-a6, rgba(255,255,255,0.12));
}

body.fd-light .cloto-complete-btn--secondary {
  border-color: rgba(0,0,0,0.12);
  color: #666;
}

body.fd-light .cloto-complete-btn--secondary:hover {
  background: rgba(0,0,0,0.08);
}

/* ====== Index Panel (left) ====== */

/* ── Index Panel: 3-zone flex layout ── */
#cloto-index-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid var(--cloto-white-a8, rgba(255,255,255,0.08));
  overflow: hidden;
  background: var(--cloto-surface, #1a1c28);
  font-size: 13px;
}

.cloto-index-header {
  padding: 16px 16px 8px;
  flex-shrink: 0;
}

.cloto-index-project-name {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cloto-text-70);
}

/* Center zone: scrollable tree */
.cloto-index-tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
  scrollbar-width: thin;
}
.cloto-index-tree::-webkit-scrollbar { width: 4px; }
.cloto-index-tree::-webkit-scrollbar-track { background: transparent; }
.cloto-index-tree::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
body.fd-light .cloto-index-tree::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* ── Top zone (fixed header) ── */
.cloto-index-back-sticky {
  flex-shrink: 0;
  padding: 16px 14px 12px;
  background: var(--cloto-surface, #161822);
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
body.fd-light .cloto-index-back-sticky {
  background: var(--cloto-surface, #fafaf8);
  border-bottom-color: #e8e5de;
}

/* ── Section label (root title as label above tree) ── */
.cloto-index-section-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #666;
  padding: 10px 14px 6px;
  cursor: pointer;
}
.cloto-index-section-label:hover { color: var(--cloto-teal, #14b8a6); }
body.fd-light .cloto-index-section-label { color: #999; }

/* ── Tree nodes ── */
.cloto-index-node {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 400;
  color: #aaa;
  cursor: pointer;
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, border-left-color 0.15s ease;
}
.cloto-index-node--root { padding: 7px 10px 7px 11px; }
.cloto-index-node--child { padding: 6px 10px 6px 12px; }
body.fd-light .cloto-index-node { color: #555; }

/* Active node */
.cloto-index-node.is-current {
  background: rgba(94,198,198,0.08);
  border-left-color: #5ec6c6;
  font-weight: 500;
  color: #5ec6c6;
}
body.fd-light .cloto-index-node.is-current {
  background: rgba(15,110,86,0.06);
  border-left-color: #0F6E56;
  color: #0F6E56;
}

/* Preview highlight */
.cloto-index-node.is-in-editor,
.cloto-index-node.is-preview {
  background: #342a14;
  border-left-color: var(--cloto-gold);
}

/* ── Chevron (expandable nodes) ── */
.cloto-index-chevron-node {
  width: 12px;
  height: 12px;
  min-width: 12px;
  margin-right: 6px;
  stroke: #555;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.cloto-index-node.is-expanded > .cloto-index-chevron-node {
  transform: rotate(90deg);
}
.cloto-index-node.is-current > .cloto-index-chevron-node {
  stroke: #5ec6c6;
}
body.fd-light .cloto-index-chevron-node { stroke: #bbb; }
body.fd-light .cloto-index-node.is-current > .cloto-index-chevron-node { stroke: #0F6E56; }

/* ── Leaf dot ── */
.cloto-index-leaf-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #555;
  margin-left: 2px;
  margin-right: 9px;
  flex-shrink: 0;
}
body.fd-light .cloto-index-leaf-dot { background: #ccc; }
.cloto-index-node.is-current .cloto-index-leaf-dot {
  background: none;
  width: 14px;
  height: 14px;
  border-radius: 0;
  background-image: url('/assets/img/favicon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
body.fd-light .cloto-index-node.is-current .cloto-index-leaf-dot {
  background: none;
  background-image: url('/assets/img/favicon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Children container (legacy tree — kept for compat) ── */
.cloto-index-children {
  margin-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.1);
}
body.fd-light .cloto-index-children { border-left-color: #ddd8d0; }

/* ══════════════════════════════════════════════════════════════
   FLAT LIST — write cards only
   ══════════════════════════════════════════════════════════════ */
.cloto-flat-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 12px;
  min-height: 36px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cloto-flat-row:hover {
  background: rgba(255,255,255,0.04);
}
body.fd-light .cloto-flat-row:hover {
  background: rgba(0,0,0,0.04);
}

/* ── Dot indicator ── */
.cloto-flat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 10px;
}

/* ── Title ── */
.cloto-flat-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── "scritta" label ── */
.cloto-flat-label {
  font-size: 10px;
  color: #d4af5c;
  opacity: 0.7;
  margin-left: 8px;
  flex-shrink: 0;
}
body.fd-light .cloto-flat-label { color: #b8942e; }
.cloto-flat-label--writing { color: #d4af5c !important; opacity: 1; }
body.fd-light .cloto-flat-label--writing { color: #b8942e !important; }

/* ── State: writing (Writing Q&A in progress) ── */
.cloto-flat-row--writing {
  color: var(--text-primary, #e0e0e0);
  background: rgba(212,175,92,0.06);
}
.cloto-flat-row--writing .cloto-flat-dot {
  background: #d4af5c;
}
body.fd-light .cloto-flat-row--writing {
  background: rgba(184,148,46,0.06);
}

/* ── Active + writing phase: golden instead of teal ── */
.cloto-flat-row--writing-active {
  background: rgba(212,175,92,0.10) !important;
}
.cloto-flat-row--writing-active .cloto-flat-spinner svg .arc-outer,
.cloto-flat-row--writing-active .cloto-flat-spinner svg .arc-inner {
  stroke: #d4af5c !important;
}
.cloto-flat-row--writing-active .cloto-flat-title {
  color: #d4af5c;
}
.cloto-flat-row--writing-active:hover {
  background: rgba(212,175,92,0.14) !important;
}
body.fd-light .cloto-flat-row--writing-active {
  background: rgba(184,148,46,0.08) !important;
}
body.fd-light .cloto-flat-row--writing-active .cloto-flat-title {
  color: #8a6d2b;
}

/* ── State: written ── */
.cloto-flat-row--written {
  color: var(--text-secondary, #aaa);
}
.cloto-flat-row--written .cloto-flat-dot {
  background: #555;
}
body.fd-light .cloto-flat-row--written { color: #666; }
body.fd-light .cloto-flat-row--written .cloto-flat-dot { background: #bbb; }

/* ── State: active (DFS current) — uses tesse SVG spinner ── */
.cloto-flat-row--active {
  background: rgba(94,198,198,0.08);
  color: #5ec6c6;
  font-weight: 500;
  cursor: pointer;
}
.cloto-flat-row--active:hover {
  background: rgba(94,198,198,0.12);
}

/* Logline under active/selected node */
.cloto-flat-logline {
  width: 100%;
  padding-left: 28px; /* align with title: 18px spinner + 10px gap */
  margin-top: 3px;
  margin-bottom: 4px;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: #777;
  border-left: 2px solid #5ec6c6;
  padding-top: 2px;
  padding-bottom: 2px;
  /* animation removed — multiple rapid re-renders caused flicker */
}
body.fd-light .cloto-flat-logline { color: #888; border-left-color: #1D9E75; }

/* Writing phase: logline border golden */
.cloto-flat-row--writing-active .cloto-flat-logline {
  border-left-color: #d4af5c;
}
body.fd-light .cloto-flat-row--writing-active .cloto-flat-logline {
  border-left-color: #b8942e;
}

@keyframes cloto-logline-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Active card spinner — uses cloto-tesse animation from cloto-wizard.css */
.cloto-flat-spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-right: 8px;
}
body.fd-light .cloto-flat-row--active { color: #0F6E56; background: rgba(15,110,86,0.06); }
body.fd-light .cloto-flat-spinner .arc-outer,
body.fd-light .cloto-flat-spinner .arc-inner { stroke: #0F6E56; }
body.fd-light .cloto-flat-spinner .center { fill: #BA7517; }

/* ── State: unwritten (reached, not yet written) ── */
.cloto-flat-row--unwritten {
  color: var(--text-primary, #ddd);
}
.cloto-flat-row--unwritten .cloto-flat-dot {
  background: #666;
}
body.fd-light .cloto-flat-row--unwritten { color: #333; }
body.fd-light .cloto-flat-row--unwritten .cloto-flat-dot { background: #aaa; }

/* ── State: future (not reached by DFS) ── */
.cloto-flat-row--future {
  opacity: 0.5;
  cursor: pointer;
  color: var(--cloto-text-40, #5c5f68);
  font-style: italic;
}
.cloto-flat-row--future:hover {
  opacity: 0.7;
}
.cloto-flat-row--future .cloto-flat-dot {
  display: none;
}
body.fd-light .cloto-flat-row--future { color: #aaa; }

/* ── State: selected (editor open on this card) ── */
.cloto-flat-row.is-selected {
  background: rgba(212,175,92,0.10);
  border-left: 3px solid var(--cloto-gold, #d4af5c);
  border-radius: 0;
  padding-left: 9px;
}
.cloto-flat-row.is-selected .cloto-flat-title {
  color: var(--cloto-gold, #d4af5c);
  font-weight: 500;
}
body.fd-light .cloto-flat-row.is-selected {
  background: rgba(186,117,23,0.08);
  border-left-color: #BA7517;
}
body.fd-light .cloto-flat-row.is-selected .cloto-flat-title {
  color: #8a5a10;
}

/* ── State: sidebar-selected (non-active card clicked in sidebar) ── */
.cloto-flat-row.sidebar-selected {
  background: rgba(212, 175, 92, 0.12);
  border-left: 3px solid #d4af5c;
  padding-left: 9px;
  border-radius: 0;
}
.cloto-flat-row.sidebar-selected .cloto-flat-title {
  color: #d4af5c;
}
body.fd-light .cloto-flat-row.sidebar-selected {
  background: rgba(186, 117, 23, 0.08);
  border-left-color: #BA7517;
}
body.fd-light .cloto-flat-row.sidebar-selected .cloto-flat-title {
  color: #8a5a10;
}

/* ── Title text ── */
.cloto-index-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}

.cloto-index-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--cloto-text-60);
  font-size: 13px;
}

/* ── Bottom zone: Bible button — teal ghost ── */
.cloto-index-bible-sticky {
  flex-shrink: 0;
  padding: 10px 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cloto-index-bible {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid var(--cloto-teal, #3ecfcf);
  border-radius: 8px;
  background: transparent;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cloto-teal, #3ecfcf);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cloto-index-bible .cloto-bible-ico { stroke: var(--cloto-teal, #3ecfcf); }
.cloto-index-bible:hover {
  background: rgba(94, 198, 198, 0.1);
  color: #5ec6c6;
}
.cloto-index-bible:hover .cloto-bible-ico { stroke: #5ec6c6; }
body.fd-light .cloto-index-bible {
  color: #1D9E75;
  border-color: #1D9E75;
}
body.fd-light .cloto-index-bible .cloto-bible-ico { stroke: #1D9E75; }
body.fd-light .cloto-index-bible:hover {
  background: rgba(29, 158, 117, 0.08);
  color: #0F6E56;
}
body.fd-light .cloto-index-bible:hover .cloto-bible-ico { stroke: #0F6E56; }

.cloto-bible-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--cloto-gold, #c9a84c);
  color: var(--cloto-void, #1a1a1a);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
}
/* Territory badge: teal */
.cloto-bible-badge--territory {
  background: var(--cloto-teal, #3ecfcf);
  color: var(--cloto-void, #0b0e15);
}
/* Written badge: golden (default) */
.cloto-bible-badge--written {
  background: var(--cloto-gold, #c9a84c);
  color: var(--cloto-void, #1a1a1a);
}
body.fd-light .cloto-bible-badge {
  color: #fff;
}
body.fd-light .cloto-bible-badge--territory {
  background: #1D9E75;
}
body.fd-light .cloto-bible-badge--written {
  background: #b8960b;
}
.cloto-bible-badge--pop {
  animation: cloto-badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes cloto-badge-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.cloto-bible-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cloto-teal, #5ec6c6);
  margin-left: 2px;
  animation: cloto-bible-pulse 1.5s ease-in-out infinite;
}
@keyframes cloto-bible-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* legacy — kept for compat */
.cloto-index-sep {
  border-top: 1px solid var(--cloto-white-a6, rgba(255,255,255,0.06));
  margin: 12px 8px;
}

/* ====== Project list (in index panel) ====== */

/* Fixed header for project list */
.cloto-index-projects-header {
  flex-shrink: 0;
  padding: 16px 14px 12px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
body.fd-light .cloto-index-projects-header {
  border-bottom-color: #e8e5de;
}

/* New story button */
.cloto-index-new-story-wrap {
  flex-shrink: 0;
  padding: 10px 14px;
}
.cloto-index-new-story-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  background: rgba(94,198,198,0.1);
  color: #5ec6c6;
}
.cloto-index-new-story-btn svg { stroke: #5ec6c6; }
.cloto-index-new-story-btn:hover { background: rgba(94,198,198,0.16); }
body.fd-light .cloto-index-new-story-btn {
  background: rgba(15,110,86,0.08);
  color: #0F6E56;
}
body.fd-light .cloto-index-new-story-btn svg { stroke: #0F6E56; }
body.fd-light .cloto-index-new-story-btn:hover { background: rgba(15,110,86,0.13); }

/* Temporal group headers */
.cloto-index-group-header {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 14px 4px;
  color: #555;
}
.cloto-index-group-header--first { padding-top: 8px; }
body.fd-light .cloto-index-group-header { color: #bbb; }

/* Project row */
.cloto-index-project {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  cursor: pointer;
  position: relative;
  border-left: 3px solid transparent;
  transition: background 0.15s;
}
.cloto-index-project:hover {
  background: rgba(255,255,255,0.04);
}
body.fd-light .cloto-index-project:hover {
  background: rgba(0,0,0,0.03);
}

/* Active project */
.cloto-index-project.is-active {
  border-left-color: #5ec6c6;
  background: rgba(94,198,198,0.08);
}
.cloto-index-project.is-active .cloto-index-project-title {
  color: #5ec6c6;
  font-weight: 500;
}
body.fd-light .cloto-index-project.is-active {
  border-left-color: #0F6E56;
  background: rgba(15,110,86,0.06);
}
body.fd-light .cloto-index-project.is-active .cloto-index-project-title {
  color: #0F6E56;
}

.cloto-index-project-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #aaa;
}
body.fd-light .cloto-index-project-title { color: #444; }

.cloto-index-project-menu {
  display: none;
  font-size: 16px;
  color: var(--cloto-text-50);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.cloto-index-project:hover .cloto-index-project-menu {
  display: block;
}

.cloto-index-project-dropdown {
  position: absolute;
  right: 4px;
  top: 100%;
  background: var(--cloto-surface, #1a1c28);
  border: 1px solid var(--cloto-glass-border, rgba(94,198,198,0.08));
  border-radius: 8px;
  padding: 4px 0;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  z-index: 20;
  min-width: 130px;
}

/* Legacy compat */
.cloto-index-new-project { display: none; }
.cloto-index-project-dot { display: none; }
.cloto-index-project-date { display: none; }
.cloto-index-project-row { display: contents; }

/* Footer actions (export + chevron) */
.cloto-index-footer-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.cloto-index-footer-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cloto-text-25);
  background: transparent;
  color: var(--cloto-text-60);
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.cloto-index-footer-btn:hover {
  color: var(--cloto-text, #e8e6e1);
  background: var(--cloto-white-a8, rgba(255,255,255,0.15));
  border-color: var(--cloto-text-40);
}
body.fd-light .cloto-index-footer-btn {
  color: rgba(26,28,40,0.7);
  border-color: rgba(26,28,40,0.2);
}
body.fd-light .cloto-index-footer-btn:hover {
  color: rgba(26,28,40,0.8);
  background: rgba(0,0,0,0.08);
  border-color: rgba(26,28,40,0.35);
}

.cloto-dropdown-item--danger {
  color: #dc5050;
}

/* Light mode — project dropdown */
body.fd-light .cloto-index-project-menu {
  color: rgba(26,28,40,0.55);
}
body.fd-light .cloto-index-project-dropdown {
  background: var(--cloto-surface, #faf8f4);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* Back link (legacy class — kept for compat) */
.cloto-index-back {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--cloto-text-70);
  cursor: pointer;
  margin-bottom: 4px;
}
.cloto-index-back:hover {
  color: var(--cloto-text, #e8e6e1);
}

/* Drawer header (project title + back link) — all viewports */
.cloto-index-drawer-header {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cloto-drawer-header-title {
  font-size: 15px;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  color: #eee;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
body.fd-light .cloto-drawer-header-title { color: #222; }
.cloto-index-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.cloto-index-back-link {
  font-size: 12px;
  color: #5ec6c6;
  cursor: pointer;
}
.cloto-index-back-link:hover {
  opacity: 0.8;
}
body.fd-light .cloto-index-back-link { color: #0F6E56; }
body.fd-light .cloto-index-back-link:hover { opacity: 0.8; }

/* ── Header three-dot menu (story view) ── */
.cloto-index-header-menu-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.15s;
}
.cloto-index-header-menu-btn svg { stroke: #666; }
.cloto-index-header-menu-btn:hover { background: rgba(255,255,255,0.06); }
.cloto-index-header-menu-btn:hover svg { stroke: #aaa; }
body.fd-light .cloto-index-header-menu-btn svg { stroke: #999; }
body.fd-light .cloto-index-header-menu-btn:hover { background: rgba(0,0,0,0.05); }
body.fd-light .cloto-index-header-menu-btn:hover svg { stroke: #555; }

/* Header dropdown */
.cloto-index-header-dropdown {
  position: absolute;
  top: 100%;
  right: 14px;
  width: 200px;
  background: #2C2C2E;
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 50;
}
body.fd-light .cloto-index-header-dropdown {
  background: #FDFBF7;
  border-color: #ddd8d0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.cloto-header-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #ccc;
  transition: background 0.15s;
}
.cloto-header-dd-item svg { stroke: #ccc; fill: none; }
.cloto-header-dd-item:hover { background: rgba(255,255,255,0.06); }
body.fd-light .cloto-header-dd-item { color: #444; }
body.fd-light .cloto-header-dd-item svg { stroke: #444; }
body.fd-light .cloto-header-dd-item:hover { background: rgba(0,0,0,0.04); }

/* ── Search input (project list) ── */
.cloto-index-search-wrap {
  flex-shrink: 0;
  padding: 0 14px 4px;
}
.cloto-index-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 0.5px solid rgba(255,255,255,0.12);
  background: transparent;
  transition: border-color 0.15s;
}
body.fd-light .cloto-index-search { border-color: #ddd8d0; }
.cloto-index-search.is-active { border-color: #5ec6c6; }
.cloto-index-search.is-active .cloto-index-search-ico { stroke: #5ec6c6; }
body.fd-light .cloto-index-search.is-active { border-color: #0F6E56; }
body.fd-light .cloto-index-search.is-active .cloto-index-search-ico { stroke: #0F6E56; }
.cloto-index-search-ico { stroke: #555; flex-shrink: 0; }
body.fd-light .cloto-index-search-ico { stroke: #bbb; }
.cloto-index-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  color: #ddd;
  flex: 1;
  min-width: 0;
}
.cloto-index-search-input::placeholder { color: #555; }
body.fd-light .cloto-index-search-input { color: #333; }
body.fd-light .cloto-index-search-input::placeholder { color: #bbb; }
.cloto-index-search-clear {
  stroke: #bbb;
  cursor: pointer;
  flex-shrink: 0;
}
.cloto-index-search-clear:hover { stroke: #ddd; }
body.fd-light .cloto-index-search-clear:hover { stroke: #666; }

/* Search match highlight */
.cloto-search-match {
  background: rgba(94,198,198,0.12);
  color: #5ec6c6;
  padding: 0 2px;
  border-radius: 2px;
}
body.fd-light .cloto-search-match {
  background: rgba(15,110,86,0.1);
  color: #0F6E56;
}

/* Search result count */
.cloto-index-search-count {
  font-size: 12px;
  color: #555;
  padding: 10px 14px;
  text-align: center;
}
body.fd-light .cloto-index-search-count { color: #bbb; }

/* Footer (user profile) */
.cloto-index-footer {
  padding: 12px;
  border-top: 1px solid var(--cloto-white-a6, rgba(255,255,255,0.06));
  flex-shrink: 0;
  cursor: pointer;
}
.cloto-index-footer:hover {
  background: #283248;
}
.cloto-index-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cloto-index-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1e4848;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--cloto-teal, #5ec6c6);
  flex-shrink: 0;
}
.cloto-index-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cloto-index-user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--cloto-text-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cloto-index-user-plan {
  font-size: 11px;
  color: var(--cloto-text-60);
}
.cloto-index-chevron {
  opacity: 0.7;
  flex-shrink: 0;
}

/* Dropdown (rises from footer) */
.cloto-index-dropdown {
  background: var(--cloto-surface, #1a1c28);
  border: 1px solid var(--cloto-glass-border, rgba(94,198,198,0.08));
  border-radius: 10px;
  padding: 8px 0;
  margin: 0 8px 8px;
  font-size: 13px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.cloto-dropdown-email {
  padding: 4px 16px 8px;
  color: var(--cloto-text-50);
  font-size: 11px;
}
.cloto-dropdown-item {
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ccc;
  cursor: pointer;
}
.cloto-dropdown-item:hover {
  background: rgba(255,255,255,0.04);
}

/* ── Left group: icon + label ── */
.cloto-dd-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cloto-dd-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── SVG icons ── */
.cloto-dd-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: #888;
}

/* Theme icon: show moon in dark, sun in light */
.cloto-dd-ico--sun  { display: none; }
.cloto-dd-ico--moon { display: inline-block; }
body.fd-light .cloto-dd-ico--sun  { display: inline-block; }
body.fd-light .cloto-dd-ico--moon { display: none; }

/* ── Chevron (Account) ── */
.cloto-dd-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: #555;
}
body.fd-light .cloto-dd-chevron { stroke: #bbb; }

/* ── Credits number ── */
.cloto-dd-credits-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--cloto-text-70);
}

/* ── Buy pill ── */
.cloto-dd-buy-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(94,198,198,0.15);
  color: #5ec6c6;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cloto-dd-buy-pill:hover { opacity: 0.8; }
body.fd-light .cloto-dd-buy-pill {
  background: #1D9E75;
  color: #fff;
}

/* ── Logout row ── */
.cloto-dropdown-item--logout,
.cloto-dropdown-item--logout .cloto-dd-ico {
  color: #E06060;
  stroke: #E06060;
}
body.fd-light .cloto-dropdown-item--logout,
body.fd-light .cloto-dropdown-item--logout .cloto-dd-ico {
  color: #CC4444;
  stroke: #CC4444;
}

.cloto-dropdown-item--active {
  font-weight: 500;
  color: var(--cloto-teal, #5ec6c6);
}

.cloto-dropdown-back {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--cloto-text-60);
  cursor: pointer;
}
.cloto-dropdown-back:hover {
  color: var(--cloto-text-70);
}

.cloto-dropdown-credits-panel {
  padding: 16px;
  text-align: center;
}
.cloto-dropdown-credits-number {
  font-size: 22px;
  font-weight: 500;
  color: var(--cloto-text, #e8e6e1);
}
.cloto-dropdown-credits-label {
  font-size: 12px;
  color: var(--cloto-text-60);
  margin-bottom: 12px;
}
.cloto-dropdown-credits-buy {
  background: var(--cloto-teal, #5ec6c6);
  color: var(--cloto-void, #0d0f17);
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
}
.cloto-dropdown-credits-buy:hover {
  background: var(--cloto-teal-bright, #7ad6d6);
}

body.fd-light .cloto-dropdown-item--active {
  color: var(--cloto-teal-deep, #0e5454);
}
body.fd-light .cloto-dropdown-credits-number {
  color: #1a1c28;
}
body.fd-light .cloto-dropdown-credits-buy {
  background: var(--cloto-teal, #1a8a8a);
  color: #fff;
}
.cloto-dropdown-value {
  color: var(--cloto-text-60);
  font-size: 12px;
}
.cloto-dropdown-buy-link {
  color: var(--cloto-teal);
  cursor: pointer;
  font-weight: 500;
}
.cloto-dropdown-buy-link:hover {
  color: var(--cloto-teal-light);
}
.cloto-dropdown-sep {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 2px 12px;
  border: none;
}
body.fd-light .cloto-dropdown-sep {
  background: #e8e5de;
}

/* ── Theme toggle switch ── */
.cloto-theme-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border: none;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.cloto-theme-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: all 0.2s ease;
}
/* Light mode active → toggle ON: track teal, thumb right */
body.fd-light .cloto-theme-toggle {
  background: var(--cloto-teal-mid, #2da5a5);
}
body.fd-light .cloto-theme-toggle .cloto-theme-toggle__thumb {
  left: 18px;
}

/* Light mode overrides */
body.fd-light .cloto-index-dropdown {
  background: var(--cloto-surface);
  border-color: rgba(26,28,40,0.1);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
}
body.fd-light .cloto-index-back { color: rgba(26,28,40,0.75); }
body.fd-light .cloto-index-back:hover { color: var(--cloto-text-100); }
body.fd-light .cloto-dropdown-item { color: #444; }
body.fd-light .cloto-dropdown-item:hover { background: rgba(0,0,0,0.04); }

/* ====== Account Modal ====== */

.cloto-account-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cloto-fade-in 0.15s ease;
}
@keyframes cloto-fade-in { from { opacity: 0 } to { opacity: 1 } }
.cloto-account-dialog {
  background: var(--cloto-surface, #1a1c28);
  border: 1px solid var(--cloto-glass-border, rgba(94,198,198,0.08));
  border-radius: 14px;
  width: 420px;
  max-width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px 28px 24px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.cloto-account-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--cloto-text-50);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.cloto-account-close:hover { color: var(--cloto-text-100); }
.cloto-account-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--cloto-text-100);
  margin: 0 0 24px;
}
.cloto-account-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cloto-account-field label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
  font-weight: 500;
  letter-spacing: 0;
}
.cloto-account-email {
  font-size: 14px;
  color: var(--cloto-text-60);
}
.cloto-account-name-row {
  display: flex;
  gap: 8px;
}
.cloto-account-input {
  flex: 1;
  background: var(--cloto-void, #0d0f17);
  border: 1px solid var(--cloto-glass-border, rgba(94,198,198,0.08));
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--cloto-text-100);
  outline: none;
  transition: border-color 0.15s;
}
.cloto-account-input:focus {
  border-color: var(--cloto-teal, #5ec6c6);
}
.cloto-account-save {
  background: var(--cloto-teal, #5ec6c6);
  color: var(--cloto-void, #0d0f17);
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.cloto-account-save:disabled {
  opacity: 0.35;
  cursor: default;
}
.cloto-account-save:not(:disabled):hover {
  background: var(--cloto-teal-bright, #7ad6d6);
}
.cloto-account-msg {
  font-size: 12px;
  min-height: 18px;
  margin-top: 4px;
}
.cloto-account-msg--ok { color: var(--cloto-teal, #5ec6c6); }
.cloto-account-msg--error { color: #e07070; }

/* Legal links */
.cloto-account-links {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cloto-account-links a {
  font-size: 11px;
  color: #555;
  text-decoration: none;
}
.cloto-account-links a:hover {
  color: var(--cloto-text-70);
  text-decoration: underline;
}
.cloto-account-links span {
  font-size: 11px;
  color: #555;
}

/* Danger zone */
.cloto-account-danger {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--cloto-glass-border, rgba(94,198,198,0.06));
}
.cloto-account-danger h3 {
  font-size: 14px;
  font-weight: 600;
  color: #c07070;
  margin: 0 0 8px;
}
.cloto-account-danger p {
  font-size: 13px;
  color: var(--cloto-text-50);
  line-height: 1.5;
  margin: 0 0 16px;
}
.cloto-account-delete-btn {
  background: transparent;
  border: 1px solid #E06060;
  color: #E06060;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.cloto-account-delete-btn:hover {
  background: rgba(192,112,112,0.08);
  border-color: rgba(192,112,112,0.5);
}

/* Confirm sub-section */
.cloto-account-confirm {
  margin-top: 20px;
  padding: 20px;
  background: rgba(192,112,112,0.05);
  border: 1px solid rgba(192,112,112,0.15);
  border-radius: 10px;
}
.cloto-account-confirm p {
  font-size: 13px;
  color: var(--cloto-text-70);
  margin: 0 0 12px;
  line-height: 1.5;
}
.cloto-account-confirm-input {
  width: 100%;
  background: var(--cloto-void, #0d0f17);
  border: 1px solid rgba(192,112,112,0.25);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--cloto-text-100);
  outline: none;
  box-sizing: border-box;
}
.cloto-account-confirm-input:focus {
  border-color: #c07070;
}
.cloto-account-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}
.cloto-account-confirm-cancel {
  background: none;
  border: 1px solid var(--cloto-glass-border, rgba(94,198,198,0.08));
  color: var(--cloto-text-60);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.cloto-account-confirm-cancel:hover {
  background: rgba(255,255,255,0.04);
}
.cloto-account-confirm-delete {
  background: #c05050;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cloto-account-confirm-delete:disabled {
  opacity: 0.35;
  cursor: default;
}
.cloto-account-confirm-delete:not(:disabled):hover {
  background: #d05555;
}
.cloto-account-confirm-msg {
  font-size: 12px;
  min-height: 16px;
  margin-top: 8px;
  text-align: right;
}

/* Light mode */
body.fd-light .cloto-account-dialog {
  background: var(--cloto-surface);
  border-color: rgba(26,28,40,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
body.fd-light .cloto-account-input {
  background: #fff;
  border-color: rgba(26,28,40,0.12);
  color: #1a1c28;
}
body.fd-light .cloto-account-confirm-input {
  background: #fff;
  border-color: rgba(192,112,112,0.2);
  color: #1a1c28;
}
body.fd-light .cloto-account-confirm {
  background: rgba(192,80,80,0.04);
  border-color: rgba(192,80,80,0.1);
}
body.fd-light .cloto-account-field label {
  color: #999;
}
body.fd-light .cloto-account-links a,
body.fd-light .cloto-account-links span {
  color: #bbb;
}
body.fd-light .cloto-account-links a:hover {
  color: #666;
}
body.fd-light .cloto-account-delete-btn {
  border-color: #CC4444;
  color: #CC4444;
  background: transparent;
}
body.fd-light .cloto-account-delete-btn:hover {
  background: rgba(204,68,68,0.06);
  border-color: #CC4444;
}

/* ====== Chat Panel (center) ====== */

#cloto-chat-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  font-size: 14px;
  min-width: 0;
  width: 100%;
}

#cloto-chat-panel .cloto-chat-conversation {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
}
#cloto-chat-panel .cloto-chat-input-inner {
  max-width: 680px;
  margin: 0 auto;
}
/* Top-anchored: messages accumulate from top down, no bottom push */

/* When showing a future/past preview card: center vertically */
.cloto-chat-conversation:has(.card-context-block[data-context-mode="future"]),
.cloto-chat-conversation:has(.card-context-block[data-context-mode="past"]) {
  justify-content: center;
}
.cloto-chat-conversation:has(.card-context-block[data-context-mode="future"])::before,
.cloto-chat-conversation:has(.card-context-block[data-context-mode="past"])::before {
  display: none;
}

/* When landing is showing: conversation takes full height, no internal scrollbar */
.cloto-chat-conversation:has(.cloto-landing) {
  overflow-y: scroll;
  scrollbar-width: none;       /* Firefox */
}
.cloto-chat-conversation:has(.cloto-landing)::-webkit-scrollbar {
  display: none;               /* Chrome/Safari */
}

/* Hide scroll-to-bottom button when landing is showing */
.cloto-chat-conversation:has(.cloto-landing) ~ .wiz-scroll-bottom {
  display: none !important;
}
body.cloto-anon .wiz-scroll-bottom {
  display: none !important;
}

/* Landing screen (no project open) — centered like Claude */
.cloto-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  padding: 0 24px 60px;
  user-select: none;
}
/* Logged-in landing: centered, same width as external landing */
.cloto-landing:not(.has-sections) {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
/* Brand: logo above CLOTO, stacked and centered */
.cloto-landing-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 12px;
}
.cloto-landing-brandname {
  font-family: var(--cloto-font-brand);
  font-size: var(--cloto-fs-2xl, 22px);
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--cloto-text-100);
}
.cloto-landing-claim {
  font-size: 15px;
  color: var(--cloto-text-40);
  margin: -4px 0 8px;
  text-align: center;
}
.cloto-landing-spiral {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cloto-landing-spiral svg,
.cloto-landing-spiral img {
  width: 48px;
  height: 48px;
}
/* Title: the question, below brand */
.cloto-landing-title {
  font-family: var(--cloto-font-brand);
  font-size: 24px;
  font-weight: 500;
  color: #eee;
  text-align: center;
  margin: 0 0 24px;
}
body.fd-light .cloto-landing-title { color: #222; }
.cloto-landing-input-wrap {
  width: 100%;
  max-width: 600px;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.cloto-landing-input {
  width: 100%;
  padding: 16px 52px 16px 24px;
  border: 1px solid rgba(128,128,128,0.2);
  border-radius: 24px;
  font-size: 16px;
  font-family: var(--cloto-font-ui, system-ui, sans-serif);
  background: var(--cloto-surface, #1a1c28);
  color: var(--cloto-text, #e8e6e1);
  resize: none;
  outline: none;
  line-height: 1.5;
  height: 110px;
  min-height: 110px;
  max-height: 110px;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cloto-landing-input::placeholder {
  color: var(--cloto-text-50);
}
.cloto-landing-input:focus {
  border-color: var(--cloto-teal, #5ec6c6);
  box-shadow: 0 0 0 2px rgba(94,198,198,0.1);
}
.cloto-landing-send {
  position: absolute;
  right: 12px;
  bottom: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--cloto-teal);
  color: #0b0e15;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0;
  pointer-events: none;
}
.cloto-landing-send.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.cloto-landing-send:hover {
  background: var(--cloto-teal-bright, #7ad6d6);
}
.cloto-landing-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 600px;
  margin-top: 8px;
  max-height: 200px;
  overflow: hidden;
  transition: opacity 0.25s ease, max-height 0.3s ease, margin 0.3s ease;
}
/* Single chip — no multi-chip limit needed */
.cloto-landing-chip {
  padding: 7px 14px;
  border-radius: 18px;
  border: 1px solid var(--cloto-white-a15, rgba(255,255,255,0.15));
  background: transparent;
  color: var(--cloto-text-50);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  font-family: inherit;
  line-height: 1.3;
}
.cloto-landing-chip:hover {
  color: var(--cloto-text, #e8e6e1);
  border-color: var(--cloto-teal-a30, rgba(94,198,198,0.3));
  background: var(--cloto-white-a6, rgba(255,255,255,0.10));
}
/* Chip: fade-out for non-selected */
.cloto-landing-chip.is-fading {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.2s ease 0.1s, padding 0.2s ease 0.1s, margin 0.2s ease 0.1s, border 0.2s ease 0.1s;
}
/* Chip: active/selected state */
.cloto-landing-chip.is-active {
  border-color: var(--cloto-teal, #3ecfcf);
  color: var(--cloto-text, #e8e6e1);
  background: rgba(62,207,207,0.08);
  cursor: default;
  pointer-events: none;
}

/* Light mode — landing */
body.fd-light .cloto-landing-brandname {
  color: var(--cloto-text-100);
}
body.fd-light .cloto-landing-input {
  background: var(--cloto-surface, #faf8f4);
  color: #1a1c28;
  border-color: rgba(26,28,40,0.15);
}
body.fd-light .cloto-landing-input::placeholder {
  color: rgba(26,28,40,0.55);
}
body.fd-light .cloto-landing-input:focus {
  border-color: var(--cloto-teal, #1a8a8a);
  box-shadow: 0 0 0 2px rgba(26,138,138,0.1);
}
body.fd-light .cloto-landing-send {
  background: var(--cloto-teal, #1a8a8a);
  color: #fff;
}
body.fd-light .cloto-landing-chip {
  border-color: rgba(26,28,40,0.15);
  color: rgba(26,28,40,0.7);
}
body.fd-light .cloto-landing-chip:hover {
  color: rgba(26,28,40,0.9);
  border-color: var(--cloto-teal, #1a8a8a);
  background: rgba(0,0,0,0.06);
}
body.fd-light .cloto-landing-chip.is-active {
  border-color: var(--cloto-teal, #1a8a8a);
  color: rgba(26,28,40,0.9);
  background: rgba(26,138,138,0.08);
}

/* ═══ Landing V3 — Below the fold sections (anonymous only) ═══ */

/* Restructure landing for scroll when sections present */
.cloto-landing.has-sections {
  justify-content: flex-start;
  height: auto;
  min-height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
}

/* Hero wrapper — keeps above-fold content centered */
.cloto-landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  padding-bottom: 80px;
}

/* Chevron "Scopri di più" */
.cloto-landing-chevron {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s;
  margin-top: 32px;
}
.cloto-landing-chevron:hover { opacity: 1; }
.cloto-landing-chevron span {
  font-size: 12px;
  color: var(--cloto-text-70);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 400;
}
.cloto-landing-chevron svg {
  animation: cloto-landing-bounce 2s ease-in-out infinite;
}
@keyframes cloto-landing-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Micro-copy under input */
.cloto-landing-micro {
  font-size: 12px;
  color: var(--cloto-text-40);
  margin-top: 8px;
  font-weight: 300;
}

/* Skeptic line (replaces chevron) */
.cloto-landing-skeptic {
  font-size: 14px;
  color: var(--cloto-text-50);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 300;
  margin-top: 32px;
  line-height: 1.6;
  text-align: center;
}
.text-teal {
  color: var(--cloto-teal);
}

/* ── Section base ── */
.cloto-landing-section {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 0;
  text-align: center;
}

/* ── Fade-in animation ── */
.cloto-landing-fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.cloto-landing-fadein.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staged reveal fade — starts invisible, fades in when .is-visible added */
.cloto-reveal-fade {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.cloto-reveal-fade.is-visible {
  opacity: 1;
}
/* Reveal overlay — full viewport with cutout hole for the card */
.cloto-reveal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9000;
  opacity: 0;
  transition: opacity 800ms ease;
  pointer-events: none;
}
body.fd-light .cloto-reveal-overlay { background: rgba(0,0,0,0.2); }
.cloto-reveal-overlay.is-active { opacity: 1; }

/* Teal accent for landing headlines */
.cl-teal { color: var(--cloto-teal, #3ecfcf); }
body.fd-light .cl-teal { color: var(--cloto-teal-deep, #0e5454); }

/* ── S1: Dichiarazione ── */
.cloto-landing-s1 .cl-headline {
  font-family: var(--cloto-font-brand);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--cloto-text-100);
  margin-bottom: 24px;
}
.cloto-landing-s1 .cl-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--cloto-text-70);
  font-weight: 300;
  margin-bottom: 16px;
}
.cloto-landing-s1 .cl-claim {
  font-family: var(--cloto-font-brand);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 400;
  color: var(--cloto-teal);
  margin-top: 32px;
  font-style: italic;
}

/* ── S2: Percorso ── */
.cloto-landing-s2 .cl-narrative {
  font-size: 16px;
  line-height: 2;
  color: var(--cloto-text-70);
  font-weight: 300;
  text-align: center;
  margin-bottom: 24px;
}
.cloto-landing-s2 .cl-sacred {
  font-size: 16px;
  font-weight: 300;
  text-align: center;
  margin-top: 32px;
  margin-bottom: 32px;
  line-height: 2;
  color: var(--cloto-text-70);
}
.cloto-landing-s2 .cl-sacred strong {
  color: var(--cloto-text-100);
  font-weight: 400;
}

/* ── Tessila demo ── */
.cloto-landing-tessila {
  background: var(--cloto-surface);
  border-radius: var(--radius-xl);
  margin: 0 auto;
  max-width: 680px;
  border: 1px solid var(--cloto-glass-border);
}
.cloto-landing-tessila-banner {
  padding: 10px 18px;
  background: var(--cloto-teal-a6);
  border-bottom: 1px solid var(--cloto-teal-a10);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--cloto-text-70);
}
.cloto-landing-tessila-banner .info-icon {
  color: var(--cloto-teal);
  font-weight: 600;
  font-size: 14px;
}
.cloto-landing-tessila-body {
  padding: 28px 32px 32px;
}
.cloto-landing-tessila-text {
  font-family: var(--cloto-font-brand);
  font-size: 18px;
  line-height: 2;
  color: var(--cloto-text-100);
  font-weight: 400;
  text-align: left;
}
.cloto-landing-tessila-text .infusion {
  border-bottom: 2px solid var(--cloto-infusion-border);
  cursor: pointer;
  transition: all 0.3s;
  background: var(--cloto-infusion-bg);
}
.cloto-landing-tessila-text .infusion:hover {
  background: var(--cloto-infusion-bg-hover);
  border-color: var(--cloto-teal);
}
.cloto-landing-tessila-text .infusion.accepted {
  border-color: transparent;
  background: transparent;
  cursor: default;
}
.cloto-landing-tessila-text .infusion.rejected {
  text-decoration: line-through;
  opacity: 0.35;
  border-color: transparent;
  background: transparent;
  cursor: default;
}
.cloto-landing-tessila-text .correction {
  border-bottom: 1.5px dashed var(--cloto-correction-border);
  cursor: pointer;
  transition: all 0.3s;
}
.cloto-landing-tessila-text .correction:hover {
  border-color: var(--cloto-gold);
}
.cloto-landing-tessila-text .correction.accepted {
  border-color: transparent;
  cursor: default;
}
.cloto-landing-tessila-text .correction.rejected {
  text-decoration: line-through;
  opacity: 0.35;
  border-color: transparent;
  cursor: default;
}
.cloto-landing-tessila-footer {
  padding: 10px 20px;
  border-top: 1px solid var(--cloto-glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.cloto-landing-tessila-stats {
  font-size: 12px;
  color: var(--cloto-text-40);
  font-weight: 300;
}
.cloto-landing-tessila-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Tessila tooltip */
.cloto-landing-tt-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
}
.cloto-landing-tt-overlay.active { display: block; }
.cloto-landing-tt {
  display: none;
  position: fixed;
  z-index: 100;
  background: var(--cloto-elevated-bg);
  border: 1px solid var(--cloto-glass-border-hover);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  width: 320px;
  max-width: calc(100vw - 24px);
  box-shadow: var(--shadow-md);
}
.cloto-landing-tt.active { display: block; }
.cloto-landing-tt-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cloto-text-40);
  margin-bottom: 4px;
  font-weight: 500;
}
.cloto-landing-tt-value {
  font-size: 13px;
  color: var(--cloto-text-70);
  line-height: 1.5;
  margin-bottom: 12px;
  font-weight: 300;
}
.cloto-landing-tt-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--cloto-glass-border);
}

/* Nota di Cloto modal */
.cloto-landing-nota-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--cloto-void-a60);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cloto-landing-nota-overlay.active { display: flex; }
.cloto-landing-nota-modal {
  background: var(--cloto-elevated-bg);
  border: 1px solid var(--cloto-glass-border-hover);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.cloto-landing-nota-title {
  font-family: var(--cloto-font-brand);
  font-size: 20px;
  font-weight: 400;
  color: var(--cloto-teal);
  margin-bottom: 4px;
  font-style: italic;
}
.cloto-landing-nota-subtitle {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--cloto-text-40);
  margin-bottom: 18px;
}
.cloto-landing-nota-body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--cloto-text-70);
  font-weight: 300;
}
.cloto-landing-nota-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--cloto-text-40);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}
.cloto-landing-nota-close:hover { color: var(--cloto-text-100); }

/* ── S3: Fiducia ── */
.cloto-landing-s3 .cl-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--cloto-text-40);
  text-align: center;
  margin-bottom: 32px;
  font-weight: 300;
}
.cloto-landing-s3 .cl-founder-quote {
  background: var(--cloto-surface);
  border-radius: var(--radius-xl);
  padding: 32px;
  border: 1px solid var(--cloto-glass-border);
  text-align: left;
}
.cloto-landing-s3 blockquote {
  font-size: 15px;
  line-height: 1.9;
  color: var(--cloto-text-70);
  font-weight: 300;
  font-style: italic;
  margin: 0;
}
.cloto-landing-s3 .cl-founder-id {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cloto-glass-border);
}
.cloto-landing-s3 .cl-founder-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.cloto-landing-s3 .cl-founder-name {
  font-size: 15px;
  font-weight: 400;
  color: var(--cloto-text-100);
}
.cloto-landing-s3 .cl-founder-role {
  font-size: 12px;
  color: var(--cloto-text-40);
  font-weight: 300;
  margin-top: 2px;
}
.cloto-landing-s3 .cl-founder-credentials {
  font-size: 13px;
  color: var(--cloto-text-40, rgba(255,255,255,0.35));
  line-height: 1.55;
  margin-top: 20px;
  font-weight: 300;
}
body.fd-light .cloto-landing-s3 .cl-founder-credentials { color: #888; }

/* ── S4: Chiusura ── */
.cloto-landing-s4 {
  text-align: center;
}
.cloto-landing-s4 .cl-philosophy {
  font-family: var(--cloto-font-brand);
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--cloto-text-100);
  margin-bottom: 28px;
  white-space: pre-line;
}
.cloto-landing-s4 .cl-bridge {
  font-size: 15px;
  color: var(--cloto-text-70);
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 28px;
}
.cloto-landing-s4 .cl-finale {
  font-family: var(--cloto-font-brand);
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cloto-text-100);
  white-space: pre-line;
}
.cloto-landing-s4 .cl-finale em {
  color: var(--cloto-teal);
  font-style: normal;
}

/* "Te lo chiedo di nuovo:" bridge */
.cl-ask-again {
  font-family: var(--cloto-font-brand);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 300;
  font-style: italic;
  color: var(--cloto-text-70);
  margin-top: 20px;
  margin-bottom: 0;
  text-align: center;
}

/* ── Hero loop (cloned above-fold at bottom) ── */
.cloto-landing-hero + .cloto-landing-section ~ .cloto-landing-hero {
  min-height: auto;
  padding-top: 24px;
  padding-bottom: 100px;
}

/* ── Footer ── */
.cloto-landing-footer {
  padding: 28px;
  text-align: center;
  border-top: 1px solid var(--cloto-glass-border);
  width: 100%;
}
.cloto-landing-footer span,
.cloto-landing-footer-link {
  font-size: 11px;
  color: var(--cloto-text-40);
  font-weight: 300;
  text-decoration: none;
}
.cloto-landing-footer-link:hover {
  color: var(--cloto-text-70);
  text-decoration: underline;
}
.cloto-landing-footer-sep {
  font-size: 11px;
  color: var(--cloto-text-25);
  margin: 0 4px;
}

/* ── Tessila intro label ── */
.cl-tessila-intro {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--cloto-text-40);
  text-align: center;
  margin-bottom: 24px;
  margin-top: 16px;
  font-weight: 300;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .cloto-landing.has-sections { padding-top: 0; }
  .cloto-landing-hero { padding-bottom: 32px; }
}
@media (max-width: 640px) {
  .cloto-landing-section { padding: 48px 0; }
  .cloto-landing-tessila-body { padding: 20px 16px; }
  .cloto-landing-tessila-text { font-size: 16px; }
  .cloto-landing-s3 .cl-founder-quote { padding: 20px; }
  .cloto-landing-tt { width: 280px; }
  .cloto-landing-nota-modal { padding: 20px; }
  .cloto-landing.has-sections { padding-top: 0; }
}
@media (max-width: 480px) {
  /* ── Splash: tighter margins ── */
  #cloto-chat-panel .cloto-chat-conversation {
    padding-left: 12px;
    padding-right: 12px;
  }
  .cloto-landing {
    padding-left: 0;
    padding-right: 0;
  }

  /* ── 1. Brand + titolo ── */
  .cloto-landing-brand {
    gap: 0.4rem;
    margin-bottom: 8px;
  }
  .cloto-landing-brandname {
    font-size: 20px;
  }
  .cloto-landing-spiral,
  .cloto-landing-spiral svg,
  .cloto-landing-spiral img {
    width: 28px;
    height: 28px;
  }
  .cloto-landing-title {
    font-size: 22px;
    line-height: 1.15;
  }

  /* ── 2. Textarea: ridurre padding e altezza ── */
  .cloto-landing-input {
    padding: 1rem 44px 1rem 1rem;
    min-height: 60px;
    font-size: 15px;
  }
  .cloto-landing-send {
    right: 8px;
    bottom: 10px;
    width: 32px;
    height: 32px;
  }

  /* ── 3. Chip: max 2, full width ── */
  .cloto-landing-chip:nth-child(n+3) {
    display: none;
  }
  .cloto-landing-chip {
    flex: 1 1 100%;
    text-align: center;
    justify-content: center;
  }
  .cloto-landing-chips {
    max-width: 100%;
    gap: 6px;
    margin-top: 6px;
  }

  /* ── Claim ── */
  .cloto-landing-claim {
    font-size: 13px;
  }

  /* ── Micro-copy ── */
  .cloto-landing-micro {
    font-size: 11px;
  }

  /* ── Tessila footer: pulsanti wrappati ── */
  .cloto-landing-tessila-footer {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px;
    gap: 8px;
  }
  .cloto-landing-tessila-stats {
    text-align: center;
  }
  .cloto-landing-tessila-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  .cloto-landing-tessila-actions .cloto-btn {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    justify-content: center;
  }
}

#cloto-chat-panel .cloto-chat-input {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  padding: 0 16px 12px;
  border-top: none;
  background: var(--cloto-void, #0d0f17);
  max-width: none;
}

#cloto-chat-panel .cloto-chat-input .wiz-input__bar {
  max-width: 800px;
  margin: 0 auto;
}

#cloto-chat-panel .cloto-chat-input::before {
  display: none;
}

/* Action buttons as bubble — legacy inline (hidden, actions now in bottom bar) */
.cloto-chat-actions-bubble {
  display: none;
}

/* ── Bottom bar: CTA actions replacing textarea ── */
#cloto-chat-panel .cloto-chat-input.has-actions .wiz-input__bar,
#cloto-chat-panel .cloto-chat-input.has-actions .wiz-input--disabled {
  display: none;
}
/* (bar-actions, skip-confirm removed — chat v2) */

/* ── Chapter divider: ornamental separator ── */
.chapter-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem 20% 0.5rem;
  color: var(--text-tertiary, #555);
  font-size: 0.7rem;
}
.chapter-divider::before,
.chapter-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

/* (chapter-card removed — chat v2) */

/* (milestone-card, current-exploration, future-exploration removed — chat v2) */

/* (card-context-write-btn removed — chat v2) */
}

/* ── Future scene disabled textarea ── */
.milestone-future-textarea {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 12px auto 0;
  padding: 14px 16px;
  font-family: var(--font-serif, 'Lora', Georgia, serif);
  font-size: 13px;
  font-style: italic;
  color: var(--text-tertiary, #777);
  background: var(--bg-elevated, rgba(255,255,255,0.03));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 8px;
  resize: none;
  cursor: default;
  min-height: 48px;
  text-align: center;
  line-height: 1.5;
}
body.fd-light .milestone-future-textarea {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}

body.fd-light .milestone-separator { color: #1D9E75; }
body.fd-light .milestone-title { color: #BA7517; }

/* (dfs-separator removed — chat v2) */
.dfs-separator--removed {
  display: none;
  gap: 1rem;
  padding: 1.5rem 20% 0.5rem;
  color: #5ec6c6;
  font-size: 0.7rem;
}
body.fd-light .dfs-separator { color: #1D9E75; }
.dfs-separator::before,
.dfs-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.cloto-chat-action {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--cloto-teal, #5ec6c6);
  background: transparent;
  color: var(--cloto-teal, #5ec6c6);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
  font-family: inherit;
}

.cloto-chat-action:hover {
  background: var(--cloto-teal, #5ec6c6);
  color: var(--cloto-void, #0d0f17);
}

.cloto-chat-action--secondary {
  border-color: var(--cloto-text-30);
  color: var(--cloto-text-70);
}
.cloto-chat-action--secondary:hover {
  background: var(--cloto-white-a10, rgba(255,255,255,0.15));
  color: var(--cloto-text, #e8e6e1);
  border-color: var(--cloto-text-50);
}

.cloto-chat-action--primary {
  background: var(--cloto-teal, #5ec6c6);
  color: var(--cloto-void, #0d0f17);
}

.cloto-chat-action--disabled {
  opacity: 0.65;
  pointer-events: none;
}

.cloto-chat-action--selected {
  background: var(--cloto-teal, #5ec6c6);
  color: var(--cloto-void, #0d0f17);
  opacity: 1 !important;
}

/* Loading state: Cloto spiral in pressed button */
.cloto-chat-action.is-loading {
  opacity: 0.85;
  cursor: wait;
  pointer-events: none;
  flex: none;
  width: auto;
}
/* (cloto-action-spiral removed — chat v2) */

/* Skip confirm button: muted colors (not teal) */
.cloto-skip-confirm-row__btns .cloto-skip-yes {
  background: #9A9387;
  color: #1C1C1E;
  border-color: #9A9387;
}
.cloto-skip-confirm-row__btns .cloto-skip-yes:hover {
  background: #b0a89c;
  border-color: #b0a89c;
}
body.fd-light .cloto-skip-confirm-row__btns .cloto-skip-yes {
  background: #6B6355;
  color: #fff;
  border-color: #6B6355;
}
body.fd-light .cloto-skip-confirm-row__btns .cloto-skip-yes:hover {
  background: #5a5347;
  border-color: #5a5347;
}

/* Breadcrumb message */
.cloto-chat-breadcrumb .wiz-bubble__content {
  font-size: 12px;
  color: var(--cloto-text-40);
  letter-spacing: 0.02em;
}

/* Info message */
.cloto-chat-info .wiz-bubble__content {
  color: var(--cloto-teal, #5ec6c6);
  font-size: 13px;
}

/* Synopsis bubble — same style as other bubbles, just italic */
.cloto-chat-synopsis .cloto-chat-synopsis-content {
  font-style: italic;
}

/* ====== Editor Host (center column, replaces chat) — the page itself ====== */

#cloto-editor-host {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

/* Content area — generous padding, centered narrow column */
.cloto-editor-content {
  flex: 1;
  overflow-y: auto;
  padding: 64px 40px 24px;
  display: flex;
  justify-content: center;
}

.cloto-editor-content .cw-scene {
  max-width: 580px;
  width: 100%;
  margin: 0 auto;
}

/* Textarea IS the page — invisible container */
.cloto-editor-content .cw-scene-textarea {
  font-family: 'Cardo', Georgia, serif;
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: clamp(1.7, 1.7 + 0.3 * 1, 2.0);
  color: var(--cloto-editor-text, #333);
  border: none !important;
  outline: none !important;
  background: transparent !important;
  resize: none !important;
  padding: 0;
  min-height: 60vh;
}
.cloto-editor-content .cw-scene-textarea::placeholder {
  color: var(--cloto-text-2, #999);
  opacity: 0.7;
  font-style: normal;
}

/* Manuscript title in focus mode after tessila */
/* Hidden on desktop, shown only on mobile via media query */
.cloto-editor-mobile-title {
  display: none;
}

.cloto-manuscript-title {
  font-family: 'Cardo', Georgia, serif;
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 400;
  color: var(--cloto-editor-text, rgba(224,220,214,0.92));
  text-align: center;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  letter-spacing: 0.02em;
}
body.fd-light .cloto-manuscript-title {
  color: #333;
  border-bottom-color: rgba(0,0,0,0.12);
}

/* In completed/focus mode: less top padding so text starts higher */
.focus-mode .cloto-editor-content {
  padding-top: 40px;
}
/* Focus mode title — hidden by default, visible only in focus mode */
.focus-mode-title {
  display: none;
}
.focus-mode .focus-mode-title {
  display: block;
  font-family: 'Cardo', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  font-style: italic;
  color: #d4af5c;
  text-align: center;
  margin-bottom: 16px;
  pointer-events: none;
}
body.fd-light .focus-mode .focus-mode-title {
  color: #BA7517;
}
.focus-mode .cw-scene {
  max-width: 620px;
}
.focus-mode .cw-scene-textarea {
  min-height: auto;
  overflow-y: auto !important;
}

/* Manuscript text (replaces textarea in completed/focus mode) */
.cloto-manuscript-text {
  font-family: 'Cardo', Georgia, serif;
  font-size: 20px;
  line-height: 2.0;
  color: var(--cloto-editor-text, rgba(224,220,214,0.92));
  padding-bottom: 60px;
}
.cloto-manuscript-text p {
  margin: 0 0 1.2em;
}
body.fd-light .cloto-manuscript-text {
  color: #333;
}

/* Scene bridge (between tessila confirm and next card) */
.cloto-scene-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 0 24px;
}

.cloto-bridge-nav {
  font-size: 13px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cloto-bridge-prev {
  color: var(--cloto-text-3, #666);
}
.cloto-bridge-arrow {
  color: var(--cloto-text-3, #666);
  font-size: 16px;
}
.cloto-bridge-next {
  color: var(--cloto-text-1, #e8e6e1);
  font-weight: 500;
}

.cloto-bridge-sep {
  width: 40px;
  height: 1px;
  background: var(--cloto-white-a6, rgba(255,255,255,0.12));
  margin: 0 auto 28px;
}

.cloto-bridge-logline {
  font-family: 'Cardo', Georgia, serif;
  font-size: 18px;
  line-height: 1.7;
  font-style: italic;
  color: var(--cloto-text-2, #999);
  max-width: 480px;
  margin: 0;
}

.cloto-bridge-btn {
  margin-top: 48px;
  background: var(--cloto-teal, #5ec6c6);
  color: var(--cloto-bg, #0d0f17);
  border: none;
  padding: 10px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.15s;
}
.cloto-bridge-btn:hover { filter: brightness(1.1); }
.cloto-bridge-btn:disabled { opacity: 0.65; cursor: not-allowed; }

/* ── Unified transition card (bridge / completion) ── */
.cloto-transition-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 12px 0;
  text-align: center;
}
body.fd-light .cloto-transition-card {
  background: #F9F7F2;
  border-color: #e8e3d8;
}
.cloto-transition-card__done {
  font-size: 14px;
  color: var(--cloto-text-50);
  margin: 0 0 16px;
  line-height: 1.5;
}
.cloto-transition-card__done strong {
  color: var(--cloto-text-70);
}
body.fd-light .cloto-transition-card__done { color: #888; }
body.fd-light .cloto-transition-card__done strong { color: #444; }
.cloto-transition-card__next {
  margin-bottom: 16px;
}
.cloto-transition-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cloto-text-30);
  display: block;
  margin-bottom: 4px;
}
body.fd-light .cloto-transition-card__label { color: #bbb; }
.cloto-transition-card__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--cloto-text, #e8e6e1);
  display: block;
}
body.fd-light .cloto-transition-card__title { color: #222; }
.cloto-transition-card__logline {
  font-size: 13px;
  color: var(--cloto-text-40);
  margin: 6px 0 0;
  line-height: 1.5;
  font-style: italic;
}
body.fd-light .cloto-transition-card__logline { color: #888; }
/* Transition card buttons: harmonized with chat/editor actions */
.cloto-transition-card__btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--cloto-teal, #5ec6c6);
  background: var(--cloto-teal, #5ec6c6);
  color: var(--cloto-void, #0d0f17);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.cloto-transition-card__btn:hover {
  background: var(--cloto-teal-bright, #7ad6d6);
  border-color: var(--cloto-teal-bright, #7ad6d6);
}
.cloto-transition-card__btn:disabled { opacity: 0.6; cursor: default; }
.cloto-transition-card__btn--secondary {
  background: transparent;
  color: var(--cloto-text-70);
  border-color: var(--cloto-text-30);
}
.cloto-transition-card__btn--secondary:hover {
  background: var(--cloto-white-a10, rgba(255,255,255,0.15));
  color: var(--cloto-text, #e8e6e1);
  border-color: var(--cloto-text-50);
}
body.fd-light .cloto-transition-card__btn {
  background: var(--cloto-teal-deep, #2a6b6b);
  border-color: var(--cloto-teal-deep, #2a6b6b);
  color: #fff;
}
body.fd-light .cloto-transition-card__btn--secondary {
  background: transparent;
  color: rgba(26,28,40,0.6);
  border-color: rgba(26,28,40,0.2);
}
body.fd-light .cloto-transition-card__btn--secondary:hover {
  background: rgba(0,0,0,0.06);
  color: rgba(26,28,40,0.8);
  border-color: rgba(26,28,40,0.3);
}
.cloto-transition-card__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.cloto-transition-card__logo {
  margin: 0 auto 16px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cloto-transition-card__complete-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--cloto-text, #e8e6e1);
  margin: 0 0 20px;
}
body.fd-light .cloto-transition-card__complete-title { color: #222; }

/* Preview mode: chat hidden, editor takes remaining space */
#cloto-workspace.preview-open {
  grid-template-columns: var(--cloto-index-w) 0 1fr;
}
#cloto-workspace.preview-open #cloto-chat-panel {
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.cloto-preview-content {
  padding-top: 40px;
}
.cloto-preview-content .cw-scene {
  max-width: 620px;
}

.cloto-preview-empty {
  color: var(--cloto-text-3, #666);
  font-style: italic;
  text-align: center;
  margin-top: 48px;
  font-family: 'Cardo', Georgia, serif;
  font-size: 18px;
}

/* (preview highlight moved to main index-node section) */

body.fd-light .cloto-bridge-sep { background: rgba(0,0,0,0.1); }
body.fd-light .cloto-bridge-next { color: #1a1a2e; }
body.fd-light .cloto-bridge-btn { color: #fff; }

.cloto-editor-content .cw-tessuto-view {
  font-family: 'Cardo', Georgia, serif;
  font-size: 20px;
  line-height: 2.0;
  color: var(--cloto-editor-text, #333);
  padding: 0;
}

/* ── Word count overlay (bottom-left of editor) ── */
.cloto-editor-content { position: relative; }
.cloto-editor-wc-overlay {
  position: absolute;
  bottom: 12px;
  left: 16px;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.2);
  pointer-events: none;
  z-index: 3;
}
body.fd-light .cloto-editor-wc-overlay { color: rgba(0,0,0,0.25); }

/* ── Editor top-right buttons (focus + context) ── */
.cloto-editor-top-btns {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  z-index: 3;
}
.cloto-editor-top-btns button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #666;
  transition: background 0.15s;
}
.cloto-editor-top-btns button:hover { background: rgba(255,255,255,0.06); }
body.fd-light .cloto-editor-top-btns button { color: #999; }
body.fd-light .cloto-editor-top-btns button:hover { background: rgba(0,0,0,0.05); }

/* Context button: hidden on desktop (writing panel visible in chat column) */
.cloto-editor-top-btns .cloto-editor-context-btn { display: none; }

/* Show context button on tablet and mobile (≤1100px) where chat is hidden during editor */
@media (max-width: 1100px) {
  .cloto-editor-top-btns .cloto-editor-context-btn { display: flex; }
}
/* Also show chat sheet on tablet (not just mobile) */
@media (min-width: 769px) and (max-width: 1100px) {
  .cloto-chat-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70vh;
    background: var(--cloto-surface, #1a1c28);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    z-index: 500;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
  }
  .cloto-chat-sheet.is-open {
    transform: translateY(0);
    pointer-events: auto;
  }
  .cloto-chat-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cloto-glass-border);
    flex-shrink: 0;
  }
  .cloto-chat-sheet-title {
    font-family: 'Cardo', Georgia, serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--cloto-text-70);
  }
  .cloto-chat-sheet-close {
    background: none;
    border: none;
    color: var(--cloto-text-50);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
  }
  .cloto-chat-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px 22px;
    font-family: 'Cardo', Georgia, serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cloto-editor-text, rgba(224,220,214,0.92));
  }
  body.fd-light .cloto-chat-sheet-body {
    color: #444;
  }
  .cloto-chat-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: var(--cloto-void-a60);
    z-index: 499;
  }
  .cloto-chat-sheet-backdrop.is-open {
    display: block;
  }
  body.fd-light .cloto-chat-sheet {
    background: var(--cloto-surface, #faf8f4);
  }

  /* Sheet body: same font overrides as context panel */
  .cloto-chat-sheet-body .cloto-wp__slug {
    font-size: inherit;
    color: var(--cloto-text-40, #5c5f68);
    margin-bottom: 20px;
  }
  .cloto-chat-sheet-body .cloto-wp__label {
    font-size: 11px;
    font-family: var(--cloto-font-ui, system-ui, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .cloto-chat-sheet-body .cloto-wp__char-name {
    font-size: inherit;
    color: var(--cloto-editor-text, rgba(224,220,214,0.92));
  }
  body.fd-light .cloto-chat-sheet-body .cloto-wp__char-name { color: #333; }
  .cloto-chat-sheet-body .cloto-wp__char-role { font-size: 0.9em; }
  .cloto-chat-sheet-body .cloto-wp__char-desc { font-size: 0.9em; line-height: 1.65; }
  .cloto-chat-sheet-body .cloto-wp__note { font-size: inherit; line-height: 1.75; }
  .cloto-chat-sheet-body .cloto-wp__section { margin-bottom: 22px; }

  /* Single column layout for context sheet */
}

/* ── Simplified action bar (bottom — only writing actions) ── */
.cloto-editor-action-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-top: 1px solid var(--cloto-white-a8, rgba(255,255,255,0.08));
  flex-shrink: 0;
}
.cloto-editor-action-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 620px;
}
.cloto-editor-action-bar-inner.solo-action,
.cloto-editor-action-bar.review-mode .cloto-editor-action-bar-inner {
  justify-content: center;
  gap: 10px;
}

/* "Continua" — outline secondary (same as .cloto-chat-action--secondary) */
.cloto-editor-advance-link {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--cloto-text-30);
  background: transparent;
  color: var(--cloto-text-70);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: all 0.15s;
}
.cloto-editor-advance-link:hover {
  background: var(--cloto-white-a10, rgba(255,255,255,0.15));
  color: var(--cloto-text, #e8e6e1);
  border-color: var(--cloto-text-50);
}
.cloto-editor-advance-link:disabled { cursor: default; opacity: 0.4; }
body.fd-light .cloto-editor-advance-link {
  border-color: rgba(26,28,40,0.25);
  color: rgba(26,28,40,0.6);
}
body.fd-light .cloto-editor-advance-link:hover {
  background: rgba(26,28,40,0.08);
  color: rgba(26,28,40,0.8);
  border-color: rgba(26,28,40,0.4);
}

.cloto-editor-bar-left,
.cloto-editor-bar-right,
.cloto-editor-bar-center {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cloto-editor-bar-center {
  justify-content: center;
  width: 100%;
}

/* Editor buttons: harmonized with chat action buttons */
.cloto-editor-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--cloto-text-30);
  background: transparent;
  color: var(--cloto-text-70);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.cloto-editor-btn:hover {
  background: var(--cloto-white-a10, rgba(255,255,255,0.15));
  color: var(--cloto-text, #e8e6e1);
  border-color: var(--cloto-text-50);
}
.cloto-editor-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

/* Infondi: gold when active, muted when disabled */
.cloto-editor-btn--tessila {
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.cloto-editor-btn--tessila:disabled {
  border-color: var(--cloto-white-a15, rgba(255,255,255,0.15));
  color: var(--cloto-text-40);
  background: transparent;
  opacity: 0.7;
}
.cloto-editor-btn--tessila:not(:disabled) {
  background: var(--cloto-gold, #c9a84c);
  border-color: var(--cloto-gold, #c9a84c);
  color: var(--cloto-void, #0d0f17);
}
.cloto-editor-btn--tessila:hover:not(:disabled) {
  background: #d4b65a;
  border-color: #d4b65a;
}
/* Loading state: gold → teal ghost */
.cloto-editor-btn--tessila.is-loading {
  background: transparent !important;
  border-color: var(--cloto-teal, #3ecfcf) !important;
  color: var(--cloto-teal, #3ecfcf) !important;
  opacity: 1 !important;
  cursor: wait;
}

/* "Vai avanti" — skip tessila, complete writing */
.cloto-editor-btn--advance {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 6px;
  color: var(--cloto-text-50);
  border-color: var(--cloto-white-a15, rgba(255,255,255,0.15));
  margin-left: auto;
}
.cloto-editor-btn--advance:not(:disabled):hover {
  color: var(--cloto-text-70);
  border-color: var(--cloto-text-30);
}
body.fd-light .cloto-editor-btn--advance {
  color: rgba(26,28,40,0.45);
  border-color: rgba(26,28,40,0.15);
}
body.fd-light .cloto-editor-btn--advance:not(:disabled):hover {
  color: rgba(26,28,40,0.65);
  border-color: rgba(26,28,40,0.25);
}

/* ── Save indicator dot for preview edit ── */
.cloto-preview-save-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  margin-bottom: 8px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.cloto-preview-save-dot.is-saving {
  background: var(--cloto-gold, #c9a84c);
  box-shadow: 0 0 4px var(--cloto-gold, #c9a84c);
}
.cloto-preview-save-dot.is-saved {
  background: var(--cloto-success, #4ade80);
  box-shadow: 0 0 4px var(--cloto-success, #4ade80);
  animation: cloto-dot-flash 1.5s ease forwards;
}

/* Accetta: primary teal (same as chat --primary) */
.cloto-editor-btn--confirm {
  background: var(--cloto-teal, #5ec6c6);
  color: var(--cloto-void, #0d0f17);
  border-color: var(--cloto-teal, #5ec6c6);
}
.cloto-editor-btn--confirm:hover {
  background: var(--cloto-teal-bright, #7ad6d6);
  border-color: var(--cloto-teal-bright, #7ad6d6);
}

.cloto-editor-btn--revert {
  background: transparent;
  color: var(--cloto-text-70);
  border-color: var(--cloto-text-30);
}

/* Annulla: secondary outline (same as chat --secondary) */
.cloto-editor-btn--discard {
  background: transparent;
  color: var(--cloto-text-70);
  border-color: var(--cloto-text-30);
}
.cloto-editor-btn--discard:hover {
  background: var(--cloto-white-a10, rgba(255,255,255,0.15));
  color: var(--cloto-text, #e8e6e1);
  border-color: var(--cloto-text-50);
}

.cloto-editor-btn--nota {
  color: var(--cloto-teal, #5ec6c6);
  border-color: rgba(94,198,198,0.3);
}
.cloto-editor-btn--nota:hover {
  background: rgba(94,198,198,0.18);
}

.cloto-editor-save-dot {
  position: absolute;
  left: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.3s, opacity 0.3s;
  flex-shrink: 0;
}
.cloto-editor-save-dot.is-saving {
  background: var(--cloto-gold, #c9a84c);
  animation: cloto-save-pulse 0.8s ease-in-out infinite;
}
.cloto-editor-save-dot.is-saved {
  background: var(--cloto-teal, #5ec6c6);
  animation: cloto-dot-flash 1.5s forwards;
}

.cloto-editor-wordcount {
  position: absolute;
  left: 20px;
  font-size: 12px;
  color: var(--cloto-text-40);
}

.cloto-editor-tessila-stats {
  font-size: 11px;
  color: var(--cloto-text-40);
}

.cloto-editor-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  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: cw-spin 3s linear infinite;
}

@keyframes cw-spin { to { transform: rotate(360deg); } }

/* ====== Editor-open adjustments ====== */

/* Editor host fills center column when visible */
.editor-open #cloto-editor-host {
  display: flex !important;
}

/* ====== Resize handle between chat and editor ====== */

.cloto-resize-handle {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.cloto-resize-handle:hover,
.cloto-resize-handle.is-dragging {
  background: var(--cloto-teal-a30, rgba(94,198,198,0.3));
}

/* ====== Mobile hamburger ====== */

.cloto-header__hamburger {
  display: none;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--cloto-text-70);
}

/* Legacy .cloto-bar-menu — removed from action bars, now in .cloto-mobile-topbar */

/* Mobile index drawer overlay */
.cloto-index-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 400;
}

/* ====== Light mode ====== */

body.fd-light #cloto-header {
  background: #fff;
  border-bottom-color: rgba(0,0,0,0.08);
}

body.fd-light .cloto-header__project-name {
  color: #1a1c28;
}

body.fd-light .cloto-header__btn {
  color: rgba(26,28,40,0.5);
}
body.fd-light .cloto-header__btn:hover {
  color: #1a1c28;
  background: rgba(0,0,0,0.08);
}

body.fd-light #cloto-index-panel {
  background: #fafaf8;
  border-right-color: rgba(0,0,0,0.08);
}

body.fd-light .cloto-index-project-name {
  color: rgba(26,28,40,0.5);
}

body.fd-light .cloto-index-node.is-in-editor,
body.fd-light .cloto-index-node.is-preview {
  background: #f0eadc;
  border-left-color: var(--cloto-gold);
}

body.fd-light #cloto-chat-panel .cloto-chat-input {
  background: var(--cloto-void, #ece8df);
}
body.fd-light #cloto-chat-panel .cloto-chat-input::before {
  display: none;
}

/* Editor host inherits chat panel background — no border needed */

body.fd-light .cloto-editor-title {
  color: #1a1c28;
}

body.fd-light .cloto-editor-action-bar {
  border-top-color: rgba(0,0,0,0.08);
}

body.fd-light .cloto-chat-action {
  border-color: var(--cloto-teal-deep, #2a6b6b);
  color: var(--cloto-teal-deep, #2a6b6b);
}
body.fd-light .cloto-chat-action:hover {
  background: var(--cloto-teal-deep, #2a6b6b);
  color: #fff;
}

body.fd-light .cloto-chat-action--primary {
  background: var(--cloto-teal-deep, #2a6b6b);
  color: #fff;
}
body.fd-light .cloto-chat-action--secondary {
  border-color: rgba(26,28,40,0.25);
  color: rgba(26,28,40,0.6);
}
body.fd-light .cloto-chat-action--selected {
  background: var(--cloto-teal-deep, #2a6b6b);
  color: #fff;
}

body.fd-light .cloto-editor-btn {
  border-color: rgba(26,28,40,0.2);
  color: rgba(26,28,40,0.6);
}
body.fd-light .cloto-editor-btn:hover {
  background: rgba(0,0,0,0.06);
  color: rgba(26,28,40,0.8);
  border-color: rgba(26,28,40,0.3);
}
body.fd-light .cloto-editor-btn--tessila:disabled {
  border-color: rgba(0,0,0,0.1);
  color: rgba(26,28,40,0.3);
}
body.fd-light .cloto-editor-btn--tessila:not(:disabled) {
  background: #b8960b;
  color: #fff;
  border-color: #b8960b;
}
body.fd-light .cloto-editor-btn--tessila.is-loading {
  background: transparent !important;
  border-color: #1D9E75 !important;
  color: #1D9E75 !important;
}
body.fd-light .cloto-editor-btn--confirm {
  background: var(--cloto-teal-deep, #2a6b6b);
  color: #fff;
  border-color: var(--cloto-teal-deep, #2a6b6b);
}
body.fd-light .cloto-editor-btn--discard {
  border-color: rgba(26,28,40,0.2);
  color: rgba(26,28,40,0.6);
}

body.fd-light .cloto-index-footer {
  border-top-color: rgba(0,0,0,0.06);
}
body.fd-light .cloto-index-footer:hover {
  background: rgba(0,0,0,0.04);
}
body.fd-light .cloto-index-avatar {
  background: #e0f0f0;
  color: var(--cloto-teal);
}
body.fd-light .cloto-index-user-name {
  color: rgba(26,28,40,0.8);
}
body.fd-light .cloto-index-user-plan {
  color: rgba(26,28,40,0.45);
}
body.fd-light .cloto-index-chevron {
  color: rgba(26,28,40,0.3);
}

body.fd-light .cloto-index-progress {
  background: rgba(0,0,0,0.06);
}

/* ====== Responsive ====== */

/* Mobile topbar: hidden on desktop and for anonymous users */
.cloto-mobile-topbar { display: none; }
body.cloto-anon .cloto-mobile-topbar { display: none !important; }

/* Context (i) button in topbar — right after the title, easy to tap */
.cloto-mobile-topbar__ctx {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--cloto-text-50);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-left: 0;
  margin-right: auto; /* push avatar to the right, keep (i) near the title */
}
.cloto-mobile-topbar__ctx svg { width: 20px; height: 20px; }
.cloto-mobile-topbar__ctx:active { color: var(--cloto-text-70); background: rgba(255,255,255,0.08); }

/* Mobile ≤768px */
@media (max-width: 768px) {

  #cloto-workspace,
  body.cloto-in-project #cloto-workspace,
  body.cloto-in-project #cloto-workspace.editor-open {
    grid-template-columns: 1fr !important;
  }

  #cloto-context-panel {
    display: none !important;
  }

  /* ── Drawer index ── */
  #cloto-index-panel {
    display: flex !important;
    position: fixed;
    top: calc(48px + env(safe-area-inset-top));
    left: 0;
    bottom: 0;
    width: 280px;
    height: auto;
    z-index: 500;
    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
    flex-direction: column;
    border-right: none;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    visibility: hidden;
  }

  #cloto-index-panel.is-drawer-open {
    transform: translateX(0);
    visibility: visible;
  }

  .cloto-index-drawer-backdrop {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .cloto-index-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer header */
  #cloto-index-panel .cloto-index-back-sticky {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .cloto-index-drawer-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
  }
  .cloto-drawer-header-title {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .cloto-index-back-link {
    padding: 10px 16px;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
  }
  .cloto-index-back-link:active {
    background: rgba(255,255,255,0.04);
  }
  body.fd-light .cloto-index-drawer-header {
    border-bottom-color: rgba(0,0,0,0.06);
  }
  body.fd-light .cloto-drawer-header-title {
    color: rgba(0,0,0,0.85);
  }
  body.fd-light .cloto-index-back-link {
    color: rgba(0,0,0,0.4);
    border-bottom-color: rgba(0,0,0,0.04);
  }
  body.fd-light .cloto-index-back-link:active {
    background: rgba(0,0,0,0.03);
  }

  /* Tree scrolls independently */
  #cloto-index-panel .cloto-index-tree {
    flex: 1;
    overflow-y: auto;
  }

  /* Footer stays at bottom */
  #cloto-index-panel .cloto-index-footer {
    flex-shrink: 0;
    margin-top: auto;
  }

  /* Bible sticky bottom */
  #cloto-index-panel .cloto-index-bible-sticky {
    flex-shrink: 0;
  }

  /* Safe area: prevent footer/bible from hiding behind iOS home indicator */
  #cloto-index-panel .cloto-index-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* ── Chat input: iOS safe area ── */
  #cloto-chat-panel .cloto-chat-input {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* Editor replaces chat on mobile — single column */
  #cloto-workspace.editor-open {
    grid-template-columns: 1fr !important;
  }

  /* Editor host fills chat panel on mobile — chat elements hidden via JS */
  #cloto-workspace.editor-open #cloto-editor-host {
    display: flex !important;
  }

  /* ── Preview mode: same as editor-open on mobile ── */
  #cloto-workspace.preview-open {
    grid-template-columns: 1fr;
  }
  #cloto-workspace.preview-open #cloto-index-panel:not(.is-drawer-open) {
    display: none !important;
  }
  /* Preview host fills chat panel on mobile — chat elements hidden via JS */
  #cloto-workspace.preview-open #cloto-editor-host {
    display: flex !important;
  }

  /* ── Editor content: zero chrome on mobile, maximize writing area ── */
  .cloto-editor-content {
    padding: 0;
    justify-content: stretch;
  }
  .cloto-editor-content .cw-scene {
    max-width: none;
    margin: 0;
    width: 100%;
    padding: 8px 12px 0;
  }
  .cloto-editor-content .cw-scene-textarea {
    font-size: 17px;
    padding: 8px 12px;
    min-height: 80px;
  }

  /* ── Mobile sticky title — visible when keyboard closed ── */
  .cloto-editor-mobile-title {
    display: block;
    position: sticky;
    top: 0;
    z-index: 10;
    font-family: var(--cloto-font-ui, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--cloto-text-70, rgba(255,255,255,0.7));
    padding: 6px 12px;
    background: var(--cloto-void, #0d0f17);
    border-bottom: 1px solid var(--cloto-white-a8, rgba(255,255,255,0.08));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: height 0.15s ease, padding 0.15s ease, opacity 0.15s ease;
  }
  /* Hide title when keyboard is open (workspace has inline height from visualViewport) */
  #cloto-workspace[style*="height"] .cloto-editor-mobile-title {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    opacity: 0;
    overflow: hidden;
  }
  body.fd-light .cloto-editor-mobile-title {
    background: var(--cloto-surface, #f5f3ee);
    color: var(--cloto-text-70, #555);
    border-bottom-color: rgba(0,0,0,0.08);
  }

  /* ── Dropdown: prevent overflow on narrow screens ── */
  .cloto-index-dropdown {
    max-width: calc(100vw - 16px);
    left: 8px;
    right: 8px;
  }
  .cloto-index-project-dropdown {
    max-width: calc(100vw - 16px);
    right: 4px;
    left: auto;
  }

  /* ── Manuscript title: sticky on mobile so author always sees card name ── */
  .cloto-manuscript-title {
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--cloto-void, #0d0f17);
    border-bottom: 1px solid var(--cloto-white-a8, rgba(255,255,255,0.08));
  }
  body.fd-light .cloto-manuscript-title {
    background: var(--cloto-surface, #f5f3ee);
    border-bottom-color: rgba(0,0,0,0.08);
  }

  /* ── Action bar: same padding, safe area on mobile ── */
  .cloto-editor-action-bar {
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .cloto-editor-action-bar.review-mode .cloto-editor-btn--confirm,
  .cloto-editor-action-bar.review-mode .cloto-editor-btn--discard {
    flex: 1;
  }

  /* ── Focus mode on mobile ── */
  #cloto-workspace.focus-mode {
    grid-template-columns: 1fr;
  }
  .focus-mode .cloto-editor-content {
    padding: 20px 16px 16px;
  }
  .focus-mode .cw-scene {
    max-width: 100%;
  }

  /* ── Preview content padding ── */
  .cloto-preview-content {
    padding-top: 20px;
  }
  .cloto-preview-content .cw-scene {
    max-width: 100%;
  }

  /* ── Bridge: wrap nav on mobile ── */
  .cloto-bridge-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .cloto-bridge-logline {
    max-width: 100%;
  }

  /* ── Mobile: Context replaces Focus in editor ── */
  .cloto-editor-btn--context {
    display: inline-flex;
  }
  .cloto-editor-btn--focus {
    display: none;
  }

  /* ── Mobile: Chat sheet (slide-up) ── */
  .cloto-chat-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70vh;
    z-index: 500;
    background: var(--cloto-surface);
    border-top: 1px solid var(--cloto-glass-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
  }
  .cloto-chat-sheet.is-open {
    transform: translateY(0);
    pointer-events: auto;
  }
  .cloto-chat-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cloto-glass-border);
    flex-shrink: 0;
  }
  .cloto-chat-sheet-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--cloto-text-70);
  }
  .cloto-chat-sheet-close {
    background: none;
    border: none;
    color: var(--cloto-text-50);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
  }
  .cloto-chat-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
  }
  .cloto-chat-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: var(--cloto-void-a60);
    z-index: 499;
  }
  .cloto-chat-sheet-backdrop.is-open {
    display: block;
  }

  /* ── Mobile top navigation bar ── */
  .cloto-mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    padding: 0 12px;
    padding-top: env(safe-area-inset-top);
    z-index: 501;
    background: #1C1C1E;
    border-bottom: 0.5px solid rgba(255,255,255,0.08);
  }
  body.fd-light .cloto-mobile-topbar {
    background: #FDFBF7;
    border-bottom-color: #e8e5de;
  }
  .cloto-mobile-topbar__menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .cloto-mobile-topbar__menu:active { background: rgba(255,255,255,0.06); }
  body.fd-light .cloto-mobile-topbar__menu:active { background: rgba(0,0,0,0.04); }
  .cloto-mobile-topbar__menu > span {
    display: block;
    width: 16px;
    height: 1.5px;
    background: rgba(255,255,255,0.5);
    border-radius: 1px;
  }
  body.fd-light .cloto-mobile-topbar__menu > span {
    background: rgba(0,0,0,0.4);
  }
  .cloto-mobile-topbar__title {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ccc;
  }
  body.fd-light .cloto-mobile-topbar__title { color: #444; }
  .cloto-mobile-topbar__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0F6E56;
    border: none;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  /* Mobile profile popover (anchored to avatar, no sidebar) */
  .cloto-mobile-profile-popover {
    position: fixed;
    inset: 0;
    z-index: 9000;
  }
  .cloto-mobile-profile-backdrop {
    position: absolute;
    inset: 0;
  }
  .cloto-mobile-profile-dd {
    position: fixed;
    z-index: 9001;
    width: min(280px, calc(100vw - 24px));
    margin: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  }
  body.fd-light .cloto-mobile-profile-dd {
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  }

  /* Mobile layout offset for topbar (not for anonymous) */
  #cloto-workspace,
  #fbw-splash-root {
    padding-top: calc(48px + env(safe-area-inset-top));
  }
  body.cloto-anon #cloto-workspace,
  body.cloto-anon #fbw-splash-root {
    padding-top: 0;
  }

  /* Chat input: full width on mobile */
  #cloto-chat-panel .cloto-chat-input .wiz-input__bar {
    max-width: none;
    width: 100%;
    margin: 0;
  }

  /* Mobile: action buttons fill width, skip below */
  .cloto-bar-actions .cloto-actions-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  .cloto-bar-actions .cloto-chat-action {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    font-size: 14px;
  }
  .cloto-bar-actions .cloto-chat-action.is-loading {
    flex: none;
    width: auto;
  }
  .cloto-bar-actions .cloto-skip-writing-wrap {
    width: 100%;
    text-align: center;
    margin-left: 0;
  }
  .cloto-bar-actions .cloto-skip-confirm {
    text-align: center;
  }
  .cloto-bar-actions .cloto-skip-actions {
    justify-content: center;
    padding-top: 6px;
  }

  /* Landing: larger logo + title for logged-in users on mobile (+15%) */
  body:not(.cloto-anon) .cloto-landing-spiral,
  body:not(.cloto-anon) .cloto-landing-spiral svg,
  body:not(.cloto-anon) .cloto-landing-spiral img {
    width: 55px;
    height: 55px;
  }
  body:not(.cloto-anon) .cloto-landing-title {
    font-size: 28px;
  }

  /* Focus button: hidden on mobile */
  .cloto-editor-focus-btn { display: none !important; }
  /* Context button: moved to topbar on mobile */
  .cloto-editor-top-btns .cloto-editor-context-btn { display: none !important; }

  /* Context sheet (slide-up from bottom) */
  .cloto-chat-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80vh;
    background: var(--cloto-surface, #1a1c28);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    z-index: 500;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
  }
  .cloto-chat-sheet.is-open {
    transform: translateY(0);
    pointer-events: auto;
  }
  .cloto-chat-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cloto-glass-border);
    flex-shrink: 0;
  }
  .cloto-chat-sheet-title {
    font-family: 'Cardo', Georgia, serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--cloto-text-70);
  }
  .cloto-chat-sheet-close {
    background: none;
    border: none;
    color: var(--cloto-text-50);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
  }
  .cloto-chat-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px 22px;
    font-family: 'Cardo', Georgia, serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cloto-editor-text, rgba(224,220,214,0.92));
  }
  body.fd-light .cloto-chat-sheet { background: var(--cloto-surface, #faf8f4); }
  body.fd-light .cloto-chat-sheet-body { color: #444; }
  .cloto-chat-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: var(--cloto-void-a60);
    z-index: 499;
    display: none;
  }
  .cloto-chat-sheet-backdrop.is-open {
    display: block;
  }
  .cloto-chat-sheet-body .cloto-wp__slug { font-size: inherit; color: var(--cloto-text-40); margin-bottom: 20px; }
  .cloto-chat-sheet-body .cloto-wp__label { font-size: 11px; font-family: var(--cloto-font-ui, system-ui, sans-serif); text-transform: uppercase; letter-spacing: 0.06em; }
  .cloto-chat-sheet-body .cloto-wp__char-name { font-size: inherit; color: var(--cloto-editor-text, rgba(224,220,214,0.92)); }
  body.fd-light .cloto-chat-sheet-body .cloto-wp__char-name { color: #333; }
  .cloto-chat-sheet-body .cloto-wp__char-role { font-size: 0.9em; }
  .cloto-chat-sheet-body .cloto-wp__char-desc { font-size: 0.9em; line-height: 1.65; }
  .cloto-chat-sheet-body .cloto-wp__note { font-size: inherit; line-height: 1.75; }
  .cloto-chat-sheet-body .cloto-wp__section { margin-bottom: 22px; }

  /* Context button in mobile topbar — styles inherited from global rule below */

  /* Scroll FAB: sticky inside conversation, no mobile override needed */

  /* Review mode: two-row layout on mobile */
  .cloto-editor-action-bar.review-mode {
    flex-wrap: wrap;
    padding: 6px 8px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    gap: 4px 6px;
  }
  .cloto-editor-action-bar.review-mode .cloto-editor-bar-left {
    flex-basis: 100%;
    order: -1;
    font-size: 11px;
  }
  .cloto-editor-action-bar.review-mode .cloto-editor-bar-right {
    display: flex;
    flex: 1;
    gap: 4px;
  }
  .cloto-editor-action-bar.review-mode .cloto-editor-bar-right button {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 6px 8px;
  }
  /* (hamburger removed from editor action bar) */
  .cloto-editor-action-bar.review-mode .cloto-editor-btn--nota {
    font-size: 11px;
    padding: 4px 6px;
  }
}

/* Wide desktop (>1440px): wider context column */
@media (min-width: 1440px) {
  :root {
    --cloto-context-w: 340px;
  }
}

/* Tablet 769-1024px */
/* Tablet: narrower index */
@media (min-width: 769px) and (max-width: 1100px) {
  :root {
    --cloto-index-w: 200px;
  }
}

/* Tablet only (769-1100px): sidebar + center, context hidden */
@media (min-width: 769px) and (max-width: 1100px) {
  #cloto-workspace.editor-open {
    grid-template-columns: var(--cloto-index-w) 1fr 0 !important;
  }

  #cloto-workspace.editor-open #cloto-context-panel {
    overflow: hidden;
    padding: 0;
    border: none;
  }

  /* Focus mode on tablet: full viewport, hide sidebar + context */
  #cloto-workspace.focus-mode {
    grid-template-columns: 0 1fr 0 !important;
  }
  #cloto-workspace.focus-mode #cloto-index-panel,
  #cloto-workspace.focus-mode #cloto-context-panel {
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

/* Default: hide legacy context button + chat sheet backdrop */
.cloto-editor-btn--context { display: none; }
.cloto-chat-sheet-backdrop { display: none; }

/* ══════════════════════════════════════════════════════════════
   TOAST — Mobile notification
   ══════════════════════════════════════════════════════════════ */

.cloto-toast {
  position: fixed;
  bottom: 80px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--cloto-surface, #1a1c28);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  z-index: 600;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.cloto-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cloto-toast__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cloto-teal, #3ecfcf);
  flex-shrink: 0;
}
.cloto-toast__body {
  flex: 1;
  min-width: 0;
}
.cloto-toast__title {
  font-family: var(--cloto-font-ui);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cloto-toast__subtitle {
  font-family: var(--cloto-font-ui);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 1px;
}
.cloto-toast__action {
  font-family: var(--cloto-font-ui);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
}
body.fd-light .cloto-toast {
  background: var(--cloto-surface, #f5f3ef);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
body.fd-light .cloto-toast__title { color: rgba(0,0,0,0.85); }
body.fd-light .cloto-toast__subtitle { color: rgba(0,0,0,0.5); }
body.fd-light .cloto-toast__action { color: rgba(0,0,0,0.35); }

@media (min-width: 769px) {
  .cloto-toast { display: none; }
}

/* ── UI Test reset FAB (user 34 only, rendered by JS) ── */
#uitest-reset-fab {
  position: fixed;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #E06060;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  z-index: 9998;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
#uitest-reset-fab:hover { background: #c44; transform: translateY(-50%) scale(1.1); }
#uitest-reset-fab:disabled { opacity: 0.5; cursor: default; }

#uitest-play-fab {
  position: fixed;
  top: calc(50% + 48px);
  right: 12px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #1D9E75;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  z-index: 9998;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
#uitest-play-fab:hover { background: #22b585; transform: translateY(-50%) scale(1.1); }
#uitest-play-fab:disabled { opacity: 0.5; cursor: default; }