/* ── Layout ── */
.editor-page {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.editor-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.5rem 0.5rem;
  border-bottom: 1px solid var(--fs-border-color);
}
.editor-body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.editor-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 0.75rem 1.5rem 1.5rem;
}

/* ── Toolbar & inputs ── */
.toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
/* Save: Moss action-primary per the Hybrid rule. Saving is "operating
   the software" — not a brand moment. Accent gradient is reserved for
   Send / empty-state CTAs. */
/* Delete: Oxblood action-destructive per Hybrid rule. Should be paired
   with a Trash icon at the call site to reinforce intent. */
.title-input:focus {
  outline: none;
  border-bottom-color: var(--fs-accent);
}
.title-input::placeholder {
  color: var(--fs-text-tertiary);
  font-weight: 400;
}
.editor-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--fs-border-color);
}
.tab {
  padding: 0.45rem 1rem;
  border: none;
  background: none;
  color: var(--fs-text-secondary);
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
}
.tab.active {
  color: var(--fs-accent);
  border-bottom-color: var(--fs-accent);
}
.preview-pane {
  padding: 0.75rem;
  border: 1px solid var(--fs-border-color);
  border-radius: var(--fs-radius-sm);
  min-height: 200px;
  background: var(--fs-surface-raised);
}

/* ── Tag suggestions ── */
.tag-suggest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--fs-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--fs-accent);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tag-pill:hover:not(:disabled) {
  background: var(--fs-accent);
  color: var(--fs-text-on-action);
}
.tag-pill.applied {
  background: var(--fs-success);
  border-color: var(--fs-success);
  color: var(--fs-text-on-action);
  cursor: default;
}
.tag-check {
  font-size: 0.7rem;
}

/* ── Assist panel ── */
.assist-panel {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--fs-border-color);
  background: var(--fs-surface-raised);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.assist-panel-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--fs-border-color);
}
.assist-panel-title {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fs-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.assist-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Section list */
.assist-sections-label {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fs-text-tertiary);
  margin-bottom: 0.2rem;
}
.assist-sections {
  border: 1px solid var(--fs-border-color);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-surface-page);
  max-height: 200px;
  overflow-y: auto;
  flex-shrink: 0;
}
.assist-section-item {
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  font-size: 0.82rem;
  border-left: 3px solid transparent;
  color: var(--fs-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assist-section-item:hover {
  background: var(--fs-surface-raised);
}
.assist-section-item.selected {
  border-left-color: var(--fs-accent);
  background: var(--fs-surface-raised);
  font-weight: 500;
}
.assist-empty,
.assist-hint {
  padding: 0.6rem 0.7rem;
  font-size: 0.82rem;
  color: var(--fs-text-tertiary);
}
.assist-target-preview {
  font-size: 0.8rem;
  color: var(--fs-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assist-target-preview em {
  font-style: normal;
  color: var(--fs-text-primary);
}
.assist-instruction {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--fs-border-color);
  border-radius: var(--fs-radius-sm);
  font-size: 0.88rem;
  font-family: inherit;
  resize: vertical;
  background: var(--fs-surface-page);
  color: var(--fs-text-primary);
  box-sizing: border-box;
  min-height: 3.5rem;
}
.assist-input-actions {
  display: flex;
  gap: 0.5rem;
}

/* Streaming */
.assist-streaming-label {
  font-size: 0.8rem;
  color: var(--fs-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assist-preview-box {
  padding: 0.65rem;
  border: 1px solid var(--fs-border-color);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-surface-page);
  font-size: 0.9rem;
  max-height: 300px;
  overflow-y: auto;
}
.typing-indicator {
  color: var(--fs-text-tertiary);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* Active hint shown in the panel while output is inline */
.assist-active-hint {
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  color: var(--fs-text-tertiary);
  text-align: center;
}

/* Error */
.assist-error {
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--fs-error) 10%, transparent);
  border: 1px solid var(--fs-error);
  border-radius: var(--fs-radius-sm);
  font-size: 0.85rem;
  color: var(--fs-error);
}

/* Review / diff */
.assist-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fs-text-secondary);
}
.diff-view {
  border: 1px solid var(--fs-border-color);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-surface-page);
  font-size: 0.82rem;
  font-family: monospace;
  max-height: 340px;
  overflow-y: auto;
  padding: 0.4rem 0;
}
.diff-line {
  display: flex;
  align-items: baseline;
  padding: 0.05rem 0.5rem;
  line-height: 1.5;
}
.diff-delete {
  background: color-mix(in srgb, var(--fs-error) 12%, transparent);
  color: var(--fs-error);
}
.diff-insert {
  background: color-mix(in srgb, var(--fs-success) 12%, transparent);
  color: var(--fs-success);
}
.diff-equal {
  color: var(--fs-text-tertiary);
}
.diff-marker {
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
  user-select: none;
  font-weight: 500;
}
.diff-text {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}
.diff-empty {
  padding: 0.5rem;
  color: var(--fs-text-tertiary);
  font-size: 0.82rem;
}
.assist-actions {
  display: flex;
  gap: 0.5rem;
}

/* ── Floating inline assist button (teleported to body) ── */
.inline-assist-btn {
  position: fixed;
  z-index: 100;
  transform: translateX(-50%);
  padding: 0.3rem 0.75rem;
  background: var(--fs-action-primary);
  color: var(--fs-text-on-action);
  border: none;
  border-radius: var(--fs-radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
  box-shadow: 0 2px 8px var(--color-shadow);
  pointer-events: auto;
}

/* ── Sidebar shared styles ── */
.sidebar-toggle {
  display: none;
  width: 100%;
  padding: 0.6rem 1rem;
  background: var(--fs-surface-raised);
  border: none;
  border-bottom: 1px solid var(--fs-border-color);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fs-text-secondary);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.sidebar-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.sb-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sb-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fs-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sb-select,
.sb-input {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--fs-border-color);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-surface-raised);
  color: var(--fs-text-primary);
  font-size: 0.875rem;
  font-family: inherit;
  box-sizing: border-box;
}
.sb-select:focus,
.sb-input:focus {
  outline: none;
  border-color: var(--fs-accent);
}
.sb-divider {
  height: 1px;
  background: var(--fs-border-color);
  margin: 0.15rem 0;
}
@media (max-width: 720px) {
  .sidebar-toggle { display: block; }
  .sidebar-content {
    display: none;
    padding: 0.75rem 1rem;
  }
  .sidebar-content.sidebar-open { display: flex; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .editor-body {
    flex-direction: column;
  }
  .assist-panel {
    width: auto;
    flex: 0 0 45%;
    border-left: none;
    border-top: 1px solid var(--fs-border-color);
    border-radius: var(--fs-radius-lg) var(--fs-radius-lg) 0 0;
  }
  .editor-header {
    padding: 0.75rem 1rem 0.5rem;
  }
  .editor-main {
    padding: 0.5rem 1rem 1rem;
  }
}

/* ---------------------------------------------------------------------------
 * Editor button aliases.
 *
 * These names are used across six views, so they alias onto the shared variants
 * rather than every call site being rewritten — the class stays the app's, the
 * appearance comes from components.css. Same reasoning as .btn-small: a name
 * already in the templates is cheaper to point somewhere than to replace.
 *
 * They are @extend-shaped, which CSS lacks, so each carries the variant's own
 * declarations. That is the one duplication this migration cannot remove — but
 * it is duplication of a REFERENCE (a var()), not of a value, so a palette
 * change still moves everything at once.
 * ------------------------------------------------------------------------ */

.btn-accept,
.btn-generate,
.btn-save {
  background: var(--fs-action-primary);
  color: var(--fs-text-on-action);
  border: none;
}
.btn-accept:not(:disabled):hover,
.btn-generate:not(:disabled):hover,
.btn-save:not(:disabled):hover {
  background: var(--fs-action-primary-hover);
}

.btn-back,
.btn-clear,
.btn-reject,
.btn-proofread,
.btn-suggest-tags {
  background: none;
  border: var(--fs-border);
  color: var(--fs-text-primary);
}
.btn-back:not(:disabled):hover,
.btn-clear:not(:disabled):hover,
.btn-reject:not(:disabled):hover,
.btn-proofread:not(:disabled):hover,
.btn-suggest-tags:not(:disabled):hover {
  border: var(--fs-border-hover);
  background: var(--fs-surface-hover);
}

.btn-delete {
  background: var(--fs-action-destructive);
  color: var(--fs-text-on-action);
  border: none;
}
.btn-delete:not(:disabled):hover {
  background: var(--fs-action-destructive-hover);
}

/* Shared geometry for every alias above. */
.btn-accept, .btn-generate, .btn-save, .btn-back, .btn-clear, .btn-reject,
.btn-delete, .btn-dismiss-tags, .btn-proofread, .btn-suggest-tags {
  border-radius: var(--fs-radius-md);
  font-family: var(--fs-font-body);
  font-weight: var(--fs-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fs-dur-fast) var(--fs-ease),
              border-color var(--fs-dur-fast) var(--fs-ease),
              color var(--fs-dur-fast) var(--fs-ease);
}
.btn-accept, .btn-generate, .btn-save, .btn-back, .btn-clear, .btn-reject,
.btn-delete {
  padding: var(--fs-space-2) var(--fs-space-4);
  font-size: var(--fs-size-label);
}
.btn-proofread, .btn-suggest-tags {
  padding: var(--fs-space-1) var(--fs-space-3);
  font-size: var(--fs-size-tiny);
}
.btn-dismiss-tags {
  background: none;
  border: none;
  color: var(--fs-text-tertiary);
  padding: 2px var(--fs-space-1);
  font-size: var(--fs-size-tiny);
  line-height: 1;
}
.btn-dismiss-tags:hover { color: var(--fs-text-primary); }

.btn-accept:disabled, .btn-generate:disabled, .btn-save:disabled,
.btn-back:disabled, .btn-clear:disabled, .btn-reject:disabled,
.btn-delete:disabled, .btn-proofread:disabled, .btn-suggest-tags:disabled,
.btn-dismiss-tags:disabled {
  opacity: var(--fs-disabled-opacity);
  cursor: not-allowed;
}

/* Shared by NoteEditorView and TaskEditorView — both carried identical scoped
   copies of these until #2903 (milestone 299); one source here. */
.body-tabs-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--fs-border-color);
}
.body-editor-wrap {
  min-height: 200px;
}
.stream-preview {
  border: 1px solid var(--fs-border-color);
  border-radius: var(--fs-radius-sm);
  padding: 0.75rem;
  background: var(--fs-surface-raised);
  min-height: 200px;
}
.main-diff {
  flex: 1;
  min-height: 0;
}
.assist-section-title {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fs-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
