* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: #222;
  background: #fafafa;
  line-height: 1.5;
}
header { padding: 1rem 1.5rem; border-bottom: 1px solid #e2e2e2; background: #fff; }
header h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
header p, .muted { color: #777; margin: 0; font-size: .9rem; }
header code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: .85em; }
.back { display: inline-block; color: #555; text-decoration: none; margin-bottom: .25rem; }
.back:hover { color: #000; }

/* Компактная шапка редактора главы — даём больше места рабочей области */
header.editor-header { padding: .4rem 1rem; }
header.editor-header h1 { margin: 0; font-size: 1.05rem; font-weight: 600; }
header.editor-header .back {
  font-size: 1.1rem; margin: 0; padding: 0 .25rem;
  color: #888;
}
header.editor-header .back:hover { color: #000; }
.header-path {
  background: #f0f0f0; padding: 1px 6px; border-radius: 3px;
  font-size: .75rem; color: #666;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}

main { padding: 1.5rem; }
main.editor { padding: .75rem 1rem; }

.section { margin-bottom: 2rem; }
.section h2 { border-bottom: 1px solid #e2e2e2; padding-bottom: .25rem; font-size: 1.2rem; }
.section ul { list-style: none; padding: 0; }
.section li { padding: .4rem 0; }
.section a { color: #0645ad; text-decoration: none; }
.section a:hover { text-decoration: underline; }

/* ---------- chapters table ---------- */
.table-section { margin-bottom: 2.5rem; }
.table-section h2 {
  margin: 0 0 .25rem;
  font-size: 1.2rem;
  font-weight: 600;
}
.table-section > p.muted { margin: 0 0 .75rem; }

.chapters-table {
  width: 100%;
  max-width: 1000px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  overflow: hidden;
  font-size: 14px;
}
.chapters-table thead {
  background: #fafbfc;
  text-align: left;
}
.chapters-table th {
  padding: .6rem .9rem;
  font-weight: 600;
  color: #555;
  border-bottom: 1px solid #e2e2e2;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.chapters-table td {
  padding: .55rem .9rem;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.chapters-table tbody tr:last-child td { border-bottom: none; }
.chapters-table tbody tr:hover { background: #f8faff; }
.chapters-table a { color: #0645ad; text-decoration: none; font-weight: 500; }
.chapters-table a:hover { text-decoration: underline; }

.col-num { width: 4rem; font-variant-numeric: tabular-nums; }
.col-status { width: 8rem; }
.col-size, .col-mtime { width: 9rem; white-space: nowrap; }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3px;
}
.badge-new_version { background: #d4f4dd; color: #135020; }
.badge-drafts      { background: #fff1c2; color: #7a5800; }
.badge-plan        { background: #dde7ff; color: #1b3880; }
.badge-test        { background: #eee; color: #666; }
.badge-planned     { background: #f0f0f0; color: #888; border: 1px dashed #bbb; }
.badge-plan-ready  { background: #e7e5ff; color: #3d2c80; }
.badge-open        { background: #fff3d0; color: #8a6300; }

.plan-table .col-note { max-width: 380px; white-space: normal; font-size: 13px; }
.plan-table .col-note.muted { color: #888; }
.plan-table { max-width: 1400px; }

/* Дерево md/ — папки + файлы */
.tree-folder {
  margin-bottom: .6rem;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  background: #fff;
  max-width: 1000px;
}
.tree-folder summary {
  padding: .55rem .9rem;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: .5rem;
  list-style: none;
  border-radius: 5px;
  user-select: none;
}
.tree-folder summary::-webkit-details-marker { display: none; }
.tree-folder summary::before {
  content: "▸";
  display: inline-block;
  width: 12px;
  color: #888;
  font-size: 11px;
  transition: transform .15s;
}
.tree-folder[open] > summary::before { transform: rotate(90deg); }
.tree-folder[open] > summary { border-bottom: 1px solid #f0f0f0; }
.tree-folder summary:hover { background: #fafbfc; }
.folder-icon { font-size: 14px; }
.folder-path { background: transparent; padding: 0; color: #333; font-size: 14px; font-weight: 500; }
.folder-count { font-size: 12px; margin-left: auto; }

.tree-files {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.tree-files td {
  padding: .35rem .9rem;
  border-bottom: 1px solid #f5f5f5;
}
.tree-files tr:last-child td { border-bottom: none; }
.tree-files tr:hover { background: #f8faff; }
.tree-name { padding-left: 2.2rem !important; }
.tree-name a {
  color: #0645ad;
  text-decoration: none;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
}
.tree-name a:hover { text-decoration: underline; }
.tree-size, .tree-mtime { width: 9rem; white-space: nowrap; text-align: right; }

/* Sandbox quick link */
.sandbox-section {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(to right, #f3f0ff, #fafaff);
  border: 1px solid #d9d3f0;
  border-radius: 6px;
  max-width: 1000px;
}
.sandbox-section h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.sandbox-section p { margin: 0; font-size: 14px; }
.sandbox-section p + p { margin-top: .5rem; }
a.sandbox-link {
  display: inline-block;
  font-weight: 500;
  color: #4a3aa0;
  text-decoration: none;
  font-size: 14px;
}
a.sandbox-link:hover { text-decoration: underline; }

/* Header row with title + revert */
.header-row {
  display: flex;
  align-items: center;
  gap: .65rem;
}
#revert-btn {
  font-size: 12px;
  padding: .25rem .55rem;
  white-space: nowrap;
  background: #fff;
  color: #555;
  border: 1px solid #ccc;
  flex-shrink: 0;
}
#revert-btn:hover { background: #f5f5f5; color: #000; }

/* Метка главы на сообщениях из истории, относящихся к другим главам */
.msg-chapter {
  font-size: 11.5px;
  color: #888;
  margin-bottom: .25rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Логин */
.login-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.login-form {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  padding: 2rem;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.login-form h1 { margin: 0 0 .35rem; font-size: 1.4rem; }
.login-form p { margin: 0 0 1rem; }
.login-form input[type="password"] {
  width: 100%;
  padding: .65rem .8rem;
  font-size: 15px;
  border: 1px solid #ccd4df;
  border-radius: 4px;
  margin-bottom: .75rem;
  font-family: inherit;
}
.login-form input[type="password"]:focus {
  outline: none;
  border-color: #0645ad;
}
.login-form button[type="submit"] {
  width: 100%;
  padding: .65rem;
  font-size: 15px;
}
.login-error {
  color: #b0001c;
  margin: .75rem 0 0 !important;
  font-size: 14px;
}

/* ---------- editor layout ---------- */
main.editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: .75rem;
  align-items: stretch;
  height: calc(100vh - 70px);
  min-height: 540px;
}

.text-column {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.text-scroll {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 1rem 2.5rem 2.5rem;
}

/* верхняя панель над текстом — одна пара кнопок на всю правку */
#diff-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.25rem;
  background: linear-gradient(to right, #fffbe0, #fff5d0);
  border-bottom: 2px solid #f5c518;
  flex-shrink: 0;
}
#diff-bar.hidden { display: none; }
.diff-bar-label {
  font-weight: 600;
  color: #6b4e00;
  font-size: 14px;
}
.diff-bar-actions { display: flex; gap: .5rem; }
.diff-bar-actions button {
  padding: .5rem 1.1rem;
  font-size: 14px;
  font-weight: 600;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: transform .1s, box-shadow .1s;
}
.diff-accept { background: #1a6e2b; }
.diff-accept:hover { background: #0e4f1c; box-shadow: 0 2px 6px rgba(26, 110, 43, .4); transform: translateY(-1px); }
.diff-reject { background: #888; }
.diff-reject:hover { background: #666; box-shadow: 0 2px 6px rgba(0,0,0,.2); transform: translateY(-1px); }
#text-view {
  font-size: 16px;
  line-height: 1.7;
  max-width: 78ch;
  margin: 0 auto;
  word-wrap: break-word;
}
/* Диф-режим: пре-врап, чтобы переводы строк из markdown не склеивались */
#text-view.diff-mode { white-space: pre-wrap; display: block; }
#text-view.diff-mode > * { margin: 0; }

/* Нормальный markdown-рендер в clean-режиме */
#text-view.clean-mode > *:first-child { margin-top: 0; }
#text-view.clean-mode > *:last-child { margin-bottom: 0; }
#text-view.clean-mode h1 { font-size: 1.7em; margin: 1.2em 0 .5em; line-height: 1.25; font-weight: 700; }
#text-view.clean-mode h2 { font-size: 1.35em; margin: 1.1em 0 .4em; line-height: 1.3; font-weight: 700; }
#text-view.clean-mode h3 { font-size: 1.15em; margin: 1em 0 .3em; font-weight: 600; }
#text-view.clean-mode p { margin: 0 0 .85em; }
#text-view.clean-mode strong { font-weight: 700; }
#text-view.clean-mode em { font-style: italic; }
#text-view.clean-mode ul,
#text-view.clean-mode ol { padding-left: 1.6em; margin: .2em 0 .85em; }
#text-view.clean-mode li { margin: .15em 0; }
#text-view.clean-mode li p { margin: 0; }
#text-view.clean-mode blockquote {
  margin: 1em 0;
  padding: .3em 1em;
  border-left: 4px solid #ddd;
  color: #555;
}
#text-view.clean-mode code {
  background: #f3f3f3;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .92em;
}
#text-view.clean-mode hr {
  border: none;
  border-top: 1px solid #e2e2e2;
  margin: 1.5em 0;
}

/* edit-bar — для прямого редактирования markdown */
#edit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.25rem;
  background: linear-gradient(to right, #eef3f8, #e4ecf4);
  border-bottom: 2px solid #4a7ec5;
  flex-shrink: 0;
}
#edit-bar.hidden { display: none; }
.edit-bar-label {
  font-weight: 600;
  color: #2a4d7a;
  font-size: 14px;
}
.edit-bar-actions { display: flex; gap: .5rem; }
.edit-bar-actions button {
  padding: .5rem 1.1rem;
  font-size: 14px;
  font-weight: 600;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: transform .1s, box-shadow .1s;
}
.edit-save { background: #1a6e2b; }
.edit-save:hover { background: #0e4f1c; box-shadow: 0 2px 6px rgba(26,110,43,.4); transform: translateY(-1px); }
.edit-cancel { background: #888; }
.edit-cancel:hover { background: #666; box-shadow: 0 2px 6px rgba(0,0,0,.2); transform: translateY(-1px); }

#edit-textarea {
  flex: 1;
  border: none;
  padding: 1rem 1.5rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px;
  line-height: 1.55;
  resize: none;
  outline: none;
  background: #fafbfc;
  color: #222;
  white-space: pre-wrap;
  word-wrap: break-word;
}
#edit-textarea.hidden { display: none; }

/* в edit-mode скрываем основной просмотр — textarea занимает его место */
.text-column.edit-mode .text-scroll { display: none; }

#edit-btn {
  font-size: 12px;
  padding: .25rem .55rem;
  white-space: nowrap;
  background: #fff;
  color: #555;
  border: 1px solid #ccc;
  flex-shrink: 0;
}
#edit-btn:hover { background: #f5f5f5; color: #000; }
#edit-btn.hidden { display: none; }

/* diff pieces — лёгкие зелёный/красный: классическая семантика, без насыщенности */
.diff-unchanged { color: #222; white-space: pre-wrap; }
.diff-del {
  color: #888;
  background: #fde7eb;
  text-decoration: line-through;
  text-decoration-color: #c08;
  padding: 0 2px;
  border-radius: 2px;
}
.diff-ins {
  color: #222;
  background: #e4f7e6;
  padding: 0 2px;
  border-radius: 2px;
}


/* selection toolbar */
#selection-toolbar {
  position: absolute;
  z-index: 10;
  background: #1f2a3e;
  color: #fff;
  padding: 2px;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
#selection-toolbar.hidden { display: none; }
#selection-toolbar button {
  background: transparent;
  color: #fff;
  border: none;
  padding: .4rem .8rem;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
}
#selection-toolbar button:hover { background: #2d3a52; }

/* ---------- chat pane ---------- */
.chat-pane {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid #e2e2e2;
  background: #fafbfc;
}
.chat-header h3 { margin: 0; font-size: 1rem; color: #333; }
.chat-header button#reset-btn {
  background: transparent; color: #888;
  border: 1px solid #ddd; font-size: 13px;
  padding: 0 .65rem; height: 28px; line-height: 26px;
  white-space: nowrap;
}
.chat-header button#reset-btn:hover { background: #f0f0f0; color: #333; }

#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.msg {
  padding: .55rem .75rem;
  border-radius: 8px;
  max-width: 92%;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 14px;
}
.msg.system {
  background: #f5f7fa;
  color: #666;
  font-style: italic;
  align-self: stretch;
  font-size: 13px;
  max-width: 100%;
}
.msg.user {
  background: #e8f0fe;
  align-self: flex-end;
}
.msg.assistant {
  background: #f5f5f5;
  align-self: flex-start;
}
.msg.assistant.thinking { color: #999; font-style: italic; }
.msg.assistant.error { background: #fde7eb; color: #8a0017; }
.msg-quote {
  font-size: 12.5px;
  color: #555;
  font-style: italic;
  border-left: 3px solid #f5c518;
  padding-left: .5rem;
  margin-bottom: .4rem;
  background: rgba(245, 197, 24, .08);
  padding: .25rem .5rem;
  border-radius: 2px;
}

/* Ссылки на главы в сообщениях ассистента */
.msg-text a.chapter-link {
  text-decoration: none;
}
.msg-text a.chapter-link code {
  background: #e8f0fe;
  color: #0645ad;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12.5px;
  border: 1px solid #c5d8f5;
  transition: background .12s;
}
.msg-text a.chapter-link:hover code {
  background: #d0e0fb;
  color: #053380;
}

#quote-preview {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem .75rem;
  margin: 0 1rem;
  background: rgba(245, 197, 24, .08);
  border-left: 3px solid #f5c518;
  border-radius: 3px;
}
#quote-preview.hidden { display: none; }
.quote-preview-content {
  flex: 1;
  font-size: 12.5px;
  color: #555;
  font-style: italic;
  white-space: pre-wrap;
  max-height: 4em;
  overflow: hidden;
}
#clear-quote-btn {
  background: transparent; color: #888; border: 1px solid #ccc;
  padding: 0 .45rem; font-size: 14px; line-height: 1; height: 22px;
}
#clear-quote-btn:hover { background: #eee; }

.chat-input-row {
  display: flex;
  gap: .4rem;
  padding: .75rem 1rem;
  border-top: 1px solid #e2e2e2;
  background: #fafbfc;
}
#chat-input {
  flex: 1;
  min-height: 90px;
  max-height: 280px;
  padding: .55rem .65rem;
  font-family: inherit;
  font-size: 14px;
  border: 1px solid #ccd4df;
  border-radius: 3px;
  resize: vertical;
  line-height: 1.4;
}
#send-btn {
  align-self: stretch;
  min-width: 42px;
  font-size: 18px;
  font-weight: 700;
}
#attach-btn, #mic-btn {
  align-self: stretch;
  min-width: 42px;
  font-size: 16px;
  background: transparent;
  color: #555;
  border: 1px solid #ccd4df;
}
#attach-btn:hover, #mic-btn:hover { background: #f0f0f0; color: #333; }

#mic-btn.recording {
  background: #fde7eb;
  color: #c00;
  border-color: #c00;
  animation: mic-pulse 1s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 0, 0, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(200, 0, 0, 0); }
}

#attachments-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .35rem 1rem 0;
}
#attachments-row.hidden { display: none; }
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 2px 6px 2px 8px;
  background: #eef3f8;
  border: 1px solid #c8d6e3;
  border-radius: 3px;
  font-size: .8rem;
  color: #344;
  max-width: 240px;
}
.attach-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-chip-meta {
  color: #888;
  font-size: .75rem;
}
.attach-chip-remove {
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.attach-chip-remove:hover { color: #c00; }

.msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .35rem;
}
.msg-attachments .attach-chip {
  background: #f5f5f5;
  border-color: #ddd;
}

.status {
  padding: .4rem 1rem .65rem;
  color: #666;
  font-size: .85rem;
  min-height: 1.2em;
}
.status.status-warn {
  background: #fff3d0;
  border-top: 2px solid #e0a500;
  color: #6b4e00;
  padding: .75rem 1rem;
  font-size: .88rem;
  line-height: 1.4;
}
.status.status-warn strong { color: #8a0017; }

.status .undo-link {
  display: inline-block;
  margin-left: .5rem;
  padding: 2px 8px;
  background: #f0f0f0;
  color: #555;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  text-decoration: none;
  font-size: .85rem;
}
.status .undo-link:hover {
  background: #fde7eb;
  border-color: #b0001c;
  color: #b0001c;
}

/* generic buttons */
button {
  padding: .5rem 1rem;
  font-size: 14px;
  background: #0645ad;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
button:hover { background: #053380; }
button:disabled { background: #999; cursor: not-allowed; }
button.secondary {
  background: transparent; color: #888; border: 1px solid #ccc;
}
button.secondary:hover { background: #eee; color: #333; }