/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: #e8e8e6;
  background: #0f0f10;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
input, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}
ul { list-style: none; padding: 0; margin: 0; }

/* ---------- app shell ---------- */
.app {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: 100vh;
  height: 100dvh; /* respects mobile browser chrome (iOS Safari, Android Chrome) */
  background: #0f0f10;
}

/* iPhone safe areas — when installed as a PWA the status bar / home indicator
   eat into the viewport. Pad the outer containers so content stays visible. */
@supports (padding: max(0px)) {
  .sidebar {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .editor-head {
    padding-top: max(14px, env(safe-area-inset-top));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  .editor {
    padding-right: max(48px, env(safe-area-inset-right));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }
  .status-bar {
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
}

/* ---------- sidebar ---------- */
.sidebar {
  display: flex;
  flex-direction: column;
  background: #16161a;
  border-right: 1px solid #25252b;
  overflow: hidden;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid #25252b;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.brand > span { white-space: nowrap; }
/* Brand "k" mark — mirrors the app icon (italic serif, pink). */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: #f5c2d8;
  margin-right: 2px;
}
.brand-name {
  color: #ece6da;
  letter-spacing: 0.2px;
}

.panel {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #25252b;
  min-height: 0;
}
.panel-grow { flex: 1 1 auto; min-height: 120px; }
.panel-static { flex-shrink: 0; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px 6px;
  color: #b0b0b0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  font-style: normal;
}
.panel-head > span {
  display: inline-block;
  white-space: nowrap;
  font-style: normal;
}

.icon-btn {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  color: #8a8a90;
  font-size: 16px;
  line-height: 1;
  transition: background 120ms, color 120ms;
}
.icon-btn:hover { background: #25252b; color: #e8e8e6; }
.text-btn {
  color: #8a8a90;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 120ms, color 120ms;
}
.text-btn:hover { background: #25252b; color: #e8e8e6; }
.text-btn.danger:hover { color: #d97a7a; }
.file-btn { cursor: pointer; }

/* ---------- chapter list ---------- */
.chapter-list { padding: 0 8px 10px; overflow-y: auto; max-height: 240px; }
.chapter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  color: #c0c0c0;
  cursor: pointer;
  font-size: 13px;
  transition: background 120ms;
}
.chapter-item:hover { background: #1f1f23; }
.chapter-item.active {
  background: #2a2620;
  color: #e8d8a0;
}
.chapter-item .chapter-num {
  color: #6c6c72;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  min-width: 18px;
}
.chapter-item .chapter-title-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chapter-item .chapter-actions {
  display: none;
  gap: 2px;
}
.chapter-item:hover .chapter-actions { display: flex; }
.chapter-item .chapter-actions button {
  font-size: 11px;
  padding: 2px 4px;
  color: #8a8a90;
  border-radius: 3px;
}
.chapter-item .chapter-actions button:hover { background: #2e2e34; color: #e8e8e6; }

/* ---------- cards ---------- */
.cards-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.empty-state {
  color: #5a5a60;
  font-size: 12px;
  line-height: 1.5;
  padding: 12px 4px;
  font-style: italic;
}
.card {
  background: #1d1d22;
  border: 1px solid #2a2a30;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 120ms;
  cursor: pointer; /* click anywhere outside buttons to re-highlight in editor */
}
.card:hover { border-color: #3a3a42; }
.card button, .card .draft-instruction { cursor: auto; }
.card button { cursor: pointer; }
.card.pending { opacity: 0.85; }
.card.error { border-color: #5a3030; }

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8a8a90;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.card-head .card-type { color: #c8b988; }
.card-head .card-time { color: #6c6c72; font-weight: 400; }

.card-original {
  color: #6c6c72;
  font-size: 11px;
  font-style: italic;
  border-left: 2px solid #2e2e34;
  padding: 2px 0 2px 8px;
  max-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-output {
  font-family: 'Lora', Georgia, serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: #d8d8d4;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
}

.card-instruction {
  font-size: 11.5px;
  color: #a89870;
  background: #25201a;
  border-left: 2px solid #4a3f2a;
  padding: 4px 8px;
  border-radius: 0 4px 4px 0;
  font-style: italic;
}

.draft-instruction {
  width: 100%;
  min-height: 60px;
  max-height: 160px;
  resize: vertical;
  padding: 8px 10px;
  background: #14140f;
  border: 1px solid #3a3225;
  border-radius: 6px;
  color: #e8d8a0;
  font-size: 12.5px;
  line-height: 1.45;
  font-family: 'Inter', sans-serif;
}
.draft-instruction:focus { border-color: #6a5530; outline: none; }
.draft-instruction::placeholder { color: #6a5a3a; font-style: italic; }

.card.draft { border-color: #3a3225; background: #1f1b15; }
.card.draft .card-type { color: #e8d8a0; }

.card-foot {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.card-foot button {
  flex: 1;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 500;
  background: #25252b;
  color: #c0c0c0;
  transition: background 120ms, color 120ms;
}
.card-foot button:hover { background: #2e2e34; color: #fff; }
.card-foot button.primary {
  background: #4a3f2a;
  color: #e8d8a0;
}
.card-foot button.primary:hover { background: #5a4d34; }

.card .spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #444;
  border-top-color: #c8b988;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- style + project ---------- */
.style-editor {
  margin: 0 12px 12px;
  padding: 10px;
  background: #1a1a1f;
  border: 1px solid #2a2a30;
  border-radius: 6px;
  min-height: 80px;
  max-height: 200px;
  resize: vertical;
  font-size: 12.5px;
  line-height: 1.5;
  color: #c0c0c0;
}
.style-editor:focus { border-color: #4a3f2a; }
.project-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 12px 12px;
}
.project-actions .text-btn {
  text-align: left;
  padding: 6px 8px;
}

/* ---------- editor panel ---------- */
.editor-panel {
  display: flex;
  flex-direction: column;
  background: #1a1a1f;
  min-width: 0;
  min-height: 0; /* allow grid row to constrain height so editor can scroll */
  height: 100%;
}
.editor-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px 12px;
  border-bottom: 1px solid #25252b;
  flex-wrap: wrap;
}
.chapter-title {
  flex: 1;
  min-width: 200px;
  font-size: 18px;
  font-weight: 500;
  color: #e8d8a0;
  padding: 4px 0;
}
.chapter-title::placeholder { color: #4a4a52; }

.editor-tools {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.tool-btn {
  padding: 6px 11px;
  border-radius: 6px;
  background: #25252b;
  color: #c8c8c2;
  font-size: 12.5px;
  font-weight: 500;
  transition: background 120ms, color 120ms, opacity 120ms;
}
.tool-btn:hover:not(:disabled) { background: #2e2e34; color: #fff; }
.tool-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.tool-btn[data-tool="write_next"] { background: #3a3225; color: #e8d8a0; }
.tool-btn[data-tool="write_next"]:hover { background: #4a3f2a; }
.tool-btn.ghost { background: transparent; color: #8a8a90; font-size: 15px; padding: 4px 8px; }
.tool-btn.ghost:hover:not(:disabled) { background: #25252b; color: #e8e8e6; }
.tool-divider {
  width: 1px;
  height: 16px;
  background: #2e2e34;
  margin: 0 4px;
}
.meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #6c6c72;
  font-size: 12px;
}
.word-count { font-variant-numeric: tabular-nums; }

/* ---------- editor (contenteditable) ---------- */
.editor {
  flex: 1 1 auto;
  min-height: 0; /* critical: allows the flex child to scroll instead of overflowing the parent */
  width: 100%;
  padding: 28px max(48px, 8vw) 40px;
  background: #1a1a1f;
  color: #e8e8e6;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.75;
  overflow-y: auto;
  outline: none;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.editor:empty::before,
.editor.is-empty::before {
  content: attr(data-placeholder);
  color: #4a4a52;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  pointer-events: none;
  white-space: pre-wrap;
}
.editor ::selection { background: #4a3f2a; color: #fff; }
.editor p { margin: 0 0 1em; }
.editor div { margin: 0; }

/* AI-inserted text — same font as your prose, no italic, no background tint.
   Alternating pink shades across the chapter so consecutive inserted sections
   are visually distinguishable. JS (restripeInsertions) keeps the classes in
   sync with document order. */
.ai-inserted {
  color: #f5c2d8;
  font-style: normal;
}
.ai-inserted.shade-0 { color: #f5c2d8; } /* lighter pink */
.ai-inserted.shade-1 { color: #e09ab8; } /* deeper pink */

/* Persistent highlight for the original selection while a tool card is open,
   so the user can see what they're working on even when focus moves to the
   instruction textarea or the sidebar. Uses CSS Custom Highlight API. */
::highlight(active-selection) {
  background-color: #4a3f2a;
  color: #fff;
}

/* ---------- status bar ---------- */
.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 6px 24px;
  background: #14141a;
  border-top: 1px solid #25252b;
  color: #6c6c72;
  font-size: 11.5px;
}
.status-model { color: #8a8a90; font-variant-numeric: tabular-nums; }
.status-text-busy { color: #c8b988; }
.status-text-error { color: #d97a7a; }

/* ---------- scrollbars ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2e2e34; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a42; }

/* ---------- sidebar toggle / mobile slide-in ---------- */

/* By default (desktop) the toggle + close buttons are hidden and the
   backdrop is inert; the sidebar is a permanent column. */
.sidebar-toggle, .sidebar-close { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 800px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  /* Sidebar becomes an off-canvas drawer. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 360px);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(.2,.7,.3,1);
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.5);
    will-change: transform;
  }
  .app.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* Tap-to-dismiss backdrop appears with the sidebar. */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
  }
  .app.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Toggle (open) lives in the editor head, top-left. */
  .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #25252b;
    color: #d8d8d4;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms;
  }
  .sidebar-toggle:hover, .sidebar-toggle:active { background: #2e2e34; }

  /* Close (X) appears inside the sidebar's brand area. */
  .sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    border-radius: 5px;
    background: transparent;
    color: #8a8a90;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
  }
  .sidebar-close:hover { background: #25252b; color: #e8e8e6; }

  /* Editor panel takes the whole screen. */
  .editor-panel { grid-column: 1; }
  .editor-head {
    padding: 10px 14px 8px;
    gap: 8px;
  }
  .chapter-title { font-size: 16px; min-width: 0; flex: 1 1 140px; }
  .editor-tools { gap: 4px; }
  .tool-btn {
    padding: 6px 8px;
    font-size: 12px;
  }
  .tool-divider { display: none; }
  .meta { font-size: 11px; }
  .editor {
    padding: 18px 18px 60px;
    font-size: 18px;
  }
  .status-bar { padding: 6px 14px; font-size: 11px; }
  .status-model { display: none; }

  /* Sidebar typography — section titles were 11px which looks cramped on a
     phone. Bump section headers, brand, and chapter items for breathing room,
     and grow tap targets on action buttons. */
  .sidebar .brand {
    padding: 16px 18px;
    font-size: 15px;
  }
  .sidebar .brand-mark { font-size: 18px; }
  .sidebar .panel-head {
    padding: 18px 18px 8px;
    font-size: 13px;
    letter-spacing: 0.4px;
    flex-wrap: nowrap;
    color: #c0c0c0;
  }
  .sidebar .panel-head > span {
    display: inline-block;
    flex: 0 0 auto;
    white-space: nowrap;
    font-style: normal;
    font-weight: 600;
  }
  .sidebar .panel-head > button { flex-shrink: 0; }
  .sidebar .icon-btn {
    width: 30px;
    height: 30px;
    font-size: 18px;
    border-radius: 6px;
  }
  .sidebar .text-btn {
    padding: 6px 10px;
    font-size: 13px;
  }
  .sidebar .chapter-list { padding: 0 10px 12px; }
  .sidebar .chapter-item {
    font-size: 14px;
    padding: 9px 10px;
    gap: 10px;
  }
  .sidebar .chapter-item .chapter-num { font-size: 12px; min-width: 22px; }
  .sidebar .cards-list { padding: 6px 14px 14px; gap: 10px; }
  .sidebar .empty-state {
    font-size: 13px;
    padding: 14px 6px;
  }
  .sidebar .style-editor {
    margin: 0 14px 14px;
    font-size: 13.5px;
    min-height: 90px;
  }
  .sidebar .project-actions { padding: 6px 14px 14px; }
  .sidebar .project-actions .text-btn {
    padding: 9px 10px;
    font-size: 14px;
  }
}