/* ═══════════════════════════════════════════════════════════════
   CLOTO ZEN — Fullscreen Writing Mode
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   ZEN CONTAINER
   ══════════════════════════════════════════════════════════════ */

.fbw-zen {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
  background: rgba(13, 15, 23, 0.88);
  color: var(--cloto-text-100);
}

.fbw-zen-dark {
  background: rgba(8, 10, 18, 0.92);
}

/* ══════════════════════════════════════════════════════════════
   ZEN BAR (top bar)
   ══════════════════════════════════════════════════════════════ */

.fbw-zen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-10);
  border-bottom: 1px solid var(--cloto-glass-border);
  flex-shrink: 0;
  min-height: 42px;
  background: var(--cloto-glass-bg);
  backdrop-filter: var(--cloto-glass-blur);
  -webkit-backdrop-filter: var(--cloto-glass-blur);
}

.fbw-zen-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-40);
  min-width: 0;
  overflow: hidden;
}

.fbw-zen-title {
  font-weight: 600;
  color: var(--cloto-text-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fbw-zen-wc {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  font-family: var(--cloto-font-mono);
  flex-shrink: 0;
}

.fbw-zen-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.fbw-zen-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ══════════════════════════════════════════════════════════════
   ZEN CENTER (main area)
   ══════════════════════════════════════════════════════════════ */

.fbw-zen-center {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ── Editor ── */
.fbw-zen-editor {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.fbw-zen-text {
  flex: 1 1 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-20);
  font-family: var(--cloto-font-body);
  font-size: 16px;
  line-height: 1.9;
  color: var(--cloto-text-100);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  overflow-y: auto;
}

.fbw-zen-text::placeholder {
  color: var(--cloto-text-15);
  font-style: italic;
}

.fbw-zen-block {
  padding: var(--space-16) var(--space-20);
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

/* ── Scene List ── */
.fbw-zen-scene {
  padding: var(--space-3) var(--space-7);
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-40);
  cursor: pointer;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-zen-scene:hover {
  background: var(--cloto-teal-a4);
  color: var(--cloto-text-70);
}

.fbw-zen-scene.selected {
  color: var(--cloto-teal);
  border-left-color: var(--cloto-teal);
  background: var(--cloto-teal-a6);
}

.fbw-zen-scene.is-promoted {
  border-left-color: var(--cloto-gold);
}

.fbw-zen-separator {
  height: 1px;
  background: var(--cloto-glass-border);
  margin: var(--space-2) var(--space-7);
}

/* ══════════════════════════════════════════════════════════════
   ZEN OUTLINE (left sidebar)
   ══════════════════════════════════════════════════════════════ */

.fbw-zen-outline {
  flex: 0 0 260px;
  width: 260px;
  border-right: 1px solid var(--cloto-glass-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cloto-void-a40);
}

.fbw-zen-outline-inner {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-4) 0;
}

.fbw-zen-outline-ai-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-7);
  margin: var(--space-4) var(--space-6);
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-gold);
  background: var(--cloto-gold-a6);
  border: 1px solid var(--cloto-gold-a15);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-zen-outline-ai-btn:hover {
  background: var(--cloto-gold-a12);
  border-color: var(--cloto-gold-a25);
}

/* ══════════════════════════════════════════════════════════════
   ZEN INDEX (right sidebar / chapter index)
   ══════════════════════════════════════════════════════════════ */

.fbw-zen-index-root {
  flex: 0 0 220px;
  width: 220px;
  border-left: 1px solid var(--cloto-glass-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cloto-void-a40);
}

.fbw-zen-index-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-7);
  border-bottom: 1px solid var(--cloto-glass-border);
  flex-shrink: 0;
}

.fbw-zen-index-title {
  font-size: var(--cloto-fs-sm);
  font-weight: 600;
  color: var(--cloto-text-70);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fbw-zen-index-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-4) 0;
}

.fbw-zen-index-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1); /* ~1px, rounded to --space-1 */
}

.fbw-zen-index-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-7);
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-40);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-zen-index-item:hover {
  color: var(--cloto-text-70);
  background: var(--cloto-teal-a4);
}

.fbw-zen-index-item.is-active {
  color: var(--cloto-teal);
  background: var(--cloto-teal-a6);
}

.fbw-zen-index-item.is-root {
  font-weight: 600;
  color: var(--cloto-text-100);
}

.fbw-zen-index-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cloto-text-15);
  flex-shrink: 0;
}

.fbw-zen-index-item.is-active .fbw-zen-index-bullet {
  background: var(--cloto-teal);
}

.fbw-zen-index-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   ZEN TOOLBAR (bottom)
   ══════════════════════════════════════════════════════════════ */

.fbw-zen-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-10);
  border-top: 1px solid var(--cloto-glass-border);
  flex-shrink: 0;
  background: var(--cloto-glass-bg);
  backdrop-filter: var(--cloto-glass-blur);
  -webkit-backdrop-filter: var(--cloto-glass-blur);
}

.fbw-zen-style-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.fbw-zen-theme-sun,
.fbw-zen-theme-moon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--cloto-text-40);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-zen-theme-sun:hover,
.fbw-zen-theme-moon:hover {
  color: var(--cloto-text-70);
  background: var(--cloto-teal-a6);
}

/* ══════════════════════════════════════════════════════════════
   ZEN FEEDBACK SHELL
   ══════════════════════════════════════════════════════════════ */

.fbw-zen-fb-shell {
  flex: 0 0 320px;
  width: 320px;
  border-left: 1px solid var(--cloto-glass-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cloto-void-a40);
}

.fbw-zen-fb-shell .fbw-ttabs {
  padding: 0 var(--space-6);
}

/* ══════════════════════════════════════════════════════════════
   ZEN MUSIC
   ══════════════════════════════════════════════════════════════ */

.fbw-zen-music-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fbw-zen-music-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-6);
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-40);
  background: transparent;
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-zen-music-btn:hover {
  border-color: var(--cloto-glass-border-hover);
  color: var(--cloto-text-70);
}

.fbw-zen-music-btn.is-playing {
  color: var(--cloto-teal);
  border-color: var(--cloto-teal-a20);
}

.fbw-music-dropdown-wrapper {
  position: relative;
}

.fbw-music-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: var(--cloto-z-dropdown);
  min-width: 200px;
  background: var(--cloto-surface);
  border: 1px solid var(--cloto-glass-border-hover);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-lg);
}

.fbw-music-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-70);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-spring);
  text-align: left;
}

.fbw-music-item:hover {
  background: var(--cloto-teal-a6);
}

.fbw-music-item.is-active {
  color: var(--cloto-teal);
  background: var(--cloto-teal-a8);
}

/* ══════════════════════════════════════════════════════════════
   ZEN STATUS BADGES
   ══════════════════════════════════════════════════════════════ */

.fbw-zen-clean-badge,
.fbw-zen-revised-badge,
.fbw-zen-analyzed-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  font-size: var(--cloto-fs-2xs);
  border-radius: var(--radius-full);
  border: 1px solid;
}

.fbw-zen-clean-badge {
  color: var(--cloto-success);
  background: var(--cloto-success-a6);
  border-color: var(--cloto-success-a12);
}

.fbw-zen-revised-badge {
  color: var(--cloto-info);
  background: var(--cloto-info-a6);
  border-color: var(--cloto-info-a12);
}

.fbw-zen-analyzed-badge {
  color: var(--cloto-purple);
  background: var(--cloto-purple-a6);
  border-color: var(--cloto-purple-a12);
}

.fbw-zen-needs-revision-badge,
.fbw-zen-needs-clean-badge,
.fbw-zen-needs-analysis-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  font-size: var(--cloto-fs-2xs);
  border-radius: var(--radius-full);
  color: var(--cloto-danger);
  background: var(--cloto-danger-a6);
  border: 1px solid var(--cloto-danger-a12);
}

.fbw-zen-obsolete-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  font-size: var(--cloto-fs-2xs);
  border-radius: var(--radius-full);
  color: var(--cloto-warning);
  background: var(--cloto-warning-a6);
  border: 1px solid var(--cloto-warning-a12);
}

.has-obsolete-summary {
  border-left: 3px solid var(--cloto-warning);
}

.fbw-zen-anchor-highlight {
  background: var(--cloto-teal-a10);
  border-radius: var(--radius-xs);
  padding: var(--space-1) var(--space-2);
}

/* ══════════════════════════════════════════════════════════════
   ZEN EXIT CONFIRM
   ══════════════════════════════════════════════════════════════ */

.fbw-zen-confirm,
.fbw-zen-exit-confirm {
  position: fixed;
  inset: 0;
  z-index: calc(var(--cloto-z-zen) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fbw-zen-confirm-backdrop,
.fbw-zen-exit-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: var(--cloto-black-a50);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.fbw-zen-exit-dialog,
.fbw-zen-exit-box {
  position: relative;
  background: var(--cloto-surface);
  border: 1px solid var(--cloto-glass-border-hover);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  max-width: 400px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.fbw-zen-confirm-title,
.fbw-zen-exit-title {
  font-size: var(--cloto-fs-lg);
  font-weight: 600;
  color: var(--cloto-text-100);
  margin-bottom: var(--space-4);
}

.fbw-zen-confirm-body,
.fbw-zen-exit-body {
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-70);
  margin-bottom: var(--space-8);
}

.fbw-zen-exit-text {
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-70);
  margin-bottom: var(--space-8);
}

.fbw-zen-confirm-actions,
.fbw-zen-exit-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

/* ══════════════════════════════════════════════════════════════
   ZEN STATES
   ══════════════════════════════════════════════════════════════ */

.fbw-zen.is-feedback .fbw-zen-fb-shell {
  display: flex;
}

.fbw-zen.is-following-fd .fbw-zen-text {
  color: var(--cloto-text-40);
}

.fbw-zen.is-busy .fbw-zen-text {
  opacity: 0.6;
  pointer-events: none;
}

.fbw-zen.is-light {
  background: rgba(245, 243, 238, 0.88);
  color: var(--cloto-text-100);
}

.fbw-zen.is-light .fbw-zen-text {
  color: var(--cloto-text-100);
}

.fbw-zen.is-light .fbw-zen-bar,
.fbw-zen.is-light .fbw-zen-toolbar {
  background: rgba(245, 243, 238, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--cloto-surface-a8);
}

.fbw-zen.is-light .fbw-zen-breadcrumb { color: var(--cloto-surface-a50); }
.fbw-zen.is-light .fbw-zen-title { color: var(--cloto-text-100); }
.fbw-zen.is-light .fbw-zen-wc { color: rgba(26, 28, 40, 0.3); }

.fbw-zen.is-dark {
  background: rgba(6, 8, 16, 0.92);
}