FabledGrimoire/frontend/src/views/TaskEditorView.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
import { useTasksStore } from "@/stores/tasks";
import { useNotesStore } from "@/stores/notes";
import { useToastStore } from "@/stores/toast";
import { renderMarkdown } from "@/utils/markdown";
import { useAssist } from "@/composables/useAssist";
import { apiPost } from "@/api/client";
import type { TaskStatus, TaskPriority } from "@/types/task";
import type { Editor } from "@tiptap/vue-3";
import MarkdownToolbar from "@/components/MarkdownToolbar.vue";
import TiptapEditor from "@/components/TiptapEditor.vue";

const route = useRoute();
const router = useRouter();
const store = useTasksStore();
const notesStore = useNotesStore();
const toast = useToastStore();

const title = ref("");
const body = ref("");
const status = ref<TaskStatus>("todo");
const priority = ref<TaskPriority>("none");
const dueDate = ref("");
const dirty = ref(false);
const saving = ref(false);
const showPreview = ref(false);
const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
const tiptapEditor = computed<Editor | null>(() => {
  return (editorRef.value?.editor as Editor | undefined) ?? null;
});

const taskId = computed(() =>
  route.params.id ? Number(route.params.id) : null
);
const isEditing = computed(() => taskId.value !== null);

const renderedPreview = computed(() => renderMarkdown(body.value));

// AI Assist
const assist = useAssist(body);

const renderedStreaming = computed(() => renderMarkdown(assist.streamingText.value));
const renderedProposal = computed(() => renderMarkdown(assist.proposedText.value));

// Assist panel toggle (persisted)
const ASSIST_KEY = 'fa-assist-open';
const assistOpen = ref(localStorage.getItem(ASSIST_KEY) !== 'false');
function toggleAssist() {
  assistOpen.value = !assistOpen.value;
  localStorage.setItem(ASSIST_KEY, String(assistOpen.value));
}

// Floating inline assist button
const floatingAssist = ref({ show: false, top: 0, left: 0 });
const pendingSelection = ref<{ start: number; end: number } | null>(null);
const instructionRef = ref<HTMLTextAreaElement | null>(null);

function onSelectionChange(payload: { text: string; start: number; end: number }) {
  if (payload.text.trim().length > 0) {
    const sel = window.getSelection();
    if (sel && sel.rangeCount > 0) {
      const rect = sel.getRangeAt(0).getBoundingClientRect();
      floatingAssist.value = { show: true, top: rect.top - 44, left: rect.left + rect.width / 2 };
      pendingSelection.value = { start: payload.start, end: payload.end };
    }
  } else {
    floatingAssist.value.show = false;
    pendingSelection.value = null;
  }
}

function handleInlineAssist() {
  if (!pendingSelection.value) return;
  assist.selectTextRange(pendingSelection.value.start, pendingSelection.value.end);
  assistOpen.value = true;
  localStorage.setItem(ASSIST_KEY, 'true');
  floatingAssist.value.show = false;
  nextTick(() => instructionRef.value?.focus());
}

// Diff view toggle
const showFullProposed = ref(false);

function handleAssistAccept() {
  const newBody = assist.accept();
  if (newBody !== body.value) {
    body.value = newBody;
    markDirty();
    toast.show("Section updated");
  }
  showFullProposed.value = false;
}

function truncateTarget(text: string, max = 60): string {
  const first = text.split("\n")[0];
  return first.length > max ? first.slice(0, max) + "..." : first;
}

// Tag suggestions
const suggestedTags = ref<string[]>([]);
const appliedTags = ref<Set<string>>(new Set());
const suggestingTags = ref(false);

async function fetchTagSuggestions() {
  if (suggestingTags.value) return;
  suggestingTags.value = true;
  suggestedTags.value = [];
  appliedTags.value = new Set();
  try {
    const res = await apiPost<{ suggested_tags: string[] }>("/api/notes/suggest-tags", {
      title: title.value,
      body: body.value,
    });
    suggestedTags.value = res.suggested_tags;
  } catch {
    toast.show("Failed to get tag suggestions", "error");
  } finally {
    suggestingTags.value = false;
  }
}

function applyTagSuggestion(tag: string) {
  if (appliedTags.value.has(tag)) return;
  body.value = body.value.trimEnd() + `\n#${tag}`;
  appliedTags.value.add(tag);
  markDirty();
}

function dismissTagSuggestions() {
  suggestedTags.value = [];
  appliedTags.value = new Set();
}

let savedTitle = "";
let savedBody = "";
let savedStatus: TaskStatus = "todo";
let savedPriority: TaskPriority = "none";
let savedDueDate = "";

function markDirty() {
  dirty.value =
    title.value !== savedTitle ||
    body.value !== savedBody ||
    status.value !== savedStatus ||
    priority.value !== savedPriority ||
    dueDate.value !== savedDueDate;
}

function onBodyUpdate(newVal: string) {
  body.value = newVal;
  markDirty();
}

onMounted(async () => {
  if (taskId.value) {
    await store.fetchTask(taskId.value);
    if (store.currentTask) {
      title.value = store.currentTask.title;
      body.value = store.currentTask.body;
      status.value = store.currentTask.status as TaskStatus;
      priority.value = store.currentTask.priority as TaskPriority;
      dueDate.value = store.currentTask.due_date || "";
      savedTitle = title.value;
      savedBody = body.value;
      savedStatus = status.value;
      savedPriority = priority.value;
      savedDueDate = dueDate.value;
    }
  }
});

async function save() {
  if (saving.value) return;
  saving.value = true;
  try {
    const data = {
      title: title.value,
      body: body.value,
      status: status.value,
      priority: priority.value,
      due_date: dueDate.value || null,
    };
    if (isEditing.value) {
      await store.updateTask(taskId.value!, data);
      savedTitle = title.value;
      savedBody = body.value;
      savedStatus = status.value;
      savedPriority = priority.value;
      savedDueDate = dueDate.value;
      dirty.value = false;
      toast.show("Task saved");
    } else {
      const task = await store.createTask(data);
      dirty.value = false;
      toast.show("Task created");
      router.push(`/tasks/${task.id}`);
    }
  } catch {
    toast.show("Failed to save task", "error");
  } finally {
    saving.value = false;
  }
}

const showDeleteConfirm = ref(false);

function remove() {
  if (taskId.value) {
    showDeleteConfirm.value = true;
  }
}

async function confirmDelete() {
  showDeleteConfirm.value = false;
  if (!taskId.value) return;
  try {
    await store.deleteTask(taskId.value);
    dirty.value = false;
    toast.show("Task deleted");
    router.push("/tasks");
  } catch {
    toast.show("Failed to delete task", "error");
  }
}

function onKeydown(e: KeyboardEvent) {
  if ((e.ctrlKey || e.metaKey) && e.key === "s") {
    e.preventDefault();
    save();
  }
}

onMounted(() => document.addEventListener("keydown", onKeydown));
onUnmounted(() => document.removeEventListener("keydown", onKeydown));

onBeforeRouteLeave(() => {
  if (dirty.value) {
    return confirm("You have unsaved changes. Leave anyway?");
  }
});

function onBeforeUnload(e: BeforeUnloadEvent) {
  if (dirty.value) {
    e.preventDefault();
  }
}
onMounted(() => window.addEventListener("beforeunload", onBeforeUnload));
onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
</script>

<template>
  <main class="editor-page">
    <div class="editor-header">
      <div class="toolbar">
        <router-link to="/tasks" class="btn-back">Back</router-link>
        <button class="btn-save" @click="save" :disabled="saving">
          {{ saving ? "Saving..." : "Save" }}
        </button>
        <button v-if="isEditing" class="btn-delete" @click="remove">
          Delete
        </button>
        <button class="btn-assist-toggle" :class="{ active: assistOpen }" @click="toggleAssist">
          ✨ Assist
        </button>
      </div>
      <input
        v-model="title"
        type="text"
        placeholder="Task title"
        class="title-input"
        @input="markDirty"
      />

      <div class="field-row">
        <div class="field">
          <label>Status</label>
          <select v-model="status" @change="markDirty" class="field-select">
            <option value="todo">Todo</option>
            <option value="in_progress">In Progress</option>
            <option value="done">Done</option>
          </select>
        </div>
        <div class="field">
          <label>Priority</label>
          <select v-model="priority" @change="markDirty" class="field-select">
            <option value="none">None</option>
            <option value="low">Low</option>
            <option value="medium">Medium</option>
            <option value="high">High</option>
          </select>
        </div>
        <div class="field">
          <label>Due Date</label>
          <input
            v-model="dueDate"
            type="date"
            class="field-input"
            @input="markDirty"
          />
        </div>
      </div>

      <div class="tag-suggest-row">
        <button class="btn-suggest-tags" @click="fetchTagSuggestions" :disabled="suggestingTags">
          {{ suggestingTags ? "Suggesting..." : "Suggest tags" }}
        </button>
        <template v-if="suggestedTags.length > 0">
          <button
            v-for="tag in suggestedTags"
            :key="tag"
            :class="['tag-pill', { applied: appliedTags.has(tag) }]"
            :disabled="appliedTags.has(tag)"
            @click="applyTagSuggestion(tag)"
          >
            #{{ tag }}
            <span v-if="appliedTags.has(tag)" class="tag-check">&#10003;</span>
          </button>
          <button class="btn-dismiss-tags" @click="dismissTagSuggestions">&times;</button>
        </template>
      </div>

      <div class="editor-tabs">
        <button
          :class="['tab', { active: !showPreview }]"
          @click="showPreview = false"
        >
          Write
        </button>
        <button
          :class="['tab', { active: showPreview }]"
          @click="showPreview = true"
        >
          Preview
        </button>
      </div>

      <MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
    </div>

    <div class="editor-body">
      <div class="editor-main">
        <div v-show="!showPreview">
          <TiptapEditor
            ref="editorRef"
            :modelValue="body"
            placeholder="Describe this task... Use #tags inline"
            :fetchTags="(q: string) => notesStore.fetchAllTags(q)"
            @update:modelValue="onBodyUpdate"
            @selectionChange="onSelectionChange"
          />
        </div>

        <div
          v-show="showPreview"
          class="preview-pane prose"
          v-html="renderedPreview"
        ></div>
      </div>

      <aside v-if="assistOpen" class="assist-panel">
        <!-- Panel header -->
        <div class="assist-panel-header">
          <span class="assist-panel-title">✨ AI Assist</span>
          <button
            class="btn-proofread"
            @click="assist.proofread()"
            :disabled="assist.state.value === 'streaming'"
          >Proofread</button>
          <button class="btn-close-assist" @click="toggleAssist">×</button>
        </div>

        <!-- Panel body -->
        <div class="assist-panel-body">

          <!-- IDLE -->
          <div v-if="assist.state.value === 'idle'" class="assist-idle">
            <div class="assist-sections-label">Sections</div>
            <div class="assist-sections">
              <div
                v-for="(section, i) in assist.sections.value"
                :key="i"
                :class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
                @click="assist.selectSection(section)"
              >
                {{ section.heading || '(preamble)' }}
              </div>
              <div v-if="!assist.sections.value.length" class="assist-empty">
                Write some content to get started.
              </div>
            </div>
            <template v-if="assist.target.value">
              <div class="assist-target-preview">
                Editing: <em>{{ truncateTarget(assist.target.value.text) }}</em>
              </div>
              <textarea
                ref="instructionRef"
                v-model="assist.instruction.value"
                placeholder="What should I do with this section?"
                class="assist-instruction"
                rows="3"
              ></textarea>
              <div class="assist-input-actions">
                <button
                  class="btn-generate"
                  @click="assist.submit()"
                  :disabled="!assist.canSubmit.value"
                >Generate</button>
                <button class="btn-clear" @click="assist.clearSelection()">Clear</button>
              </div>
            </template>
            <div v-else class="assist-hint">
              Select a section above or highlight text in the editor.
            </div>
          </div>

          <!-- ERROR -->
          <div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>

          <!-- STREAMING -->
          <div v-if="assist.state.value === 'streaming'" class="assist-streaming">
            <div class="assist-streaming-label">
              {{ assist.isProofreading.value
                ? 'Proofreading document...'
                : `Revising: "${truncateTarget(assist.target.value?.text ?? '')}"` }}
            </div>
            <div class="assist-preview-box prose" v-html="renderedStreaming"></div>
            <span class="typing-indicator">●●●</span>
          </div>

          <!-- REVIEW -->
          <div v-if="assist.state.value === 'review'" class="assist-review">
            <div class="assist-review-header">
              <span>{{ assist.isProofreading.value ? 'Document proofread' : 'Proposed changes' }}</span>
              <button class="btn-toggle-view" @click="showFullProposed = !showFullProposed">
                {{ showFullProposed ? 'Show diff' : 'Show full text' }}
              </button>
            </div>
            <div v-if="!showFullProposed" class="diff-view">
              <div
                v-for="(line, i) in assist.diff.value"
                :key="i"
                :class="['diff-line', `diff-${line.type}`]"
              >
                <span class="diff-marker">{{ line.type === 'delete' ? '−' : line.type === 'insert' ? '+' : ' ' }}</span>
                <span class="diff-text">{{ line.text }}</span>
              </div>
              <div v-if="!assist.diff.value.length" class="diff-empty">No changes.</div>
            </div>
            <div v-else class="assist-preview-box prose" v-html="renderedProposal"></div>
            <div class="assist-actions">
              <button class="btn-accept" @click="handleAssistAccept">✓ Accept</button>
              <button class="btn-reject" @click="() => { assist.reject(); showFullProposed = false; }">✗ Reject</button>
            </div>
          </div>

        </div>
      </aside>
    </div>

    <!-- Floating inline assist button (teleported to body) -->
    <teleport to="body">
      <button
        v-if="floatingAssist.show"
        class="inline-assist-btn"
        :style="{ top: floatingAssist.top + 'px', left: floatingAssist.left + 'px' }"
        @mousedown.prevent="handleInlineAssist"
      >
        ✨ Assist
      </button>
    </teleport>

    <!-- Delete confirmation -->
    <teleport to="body">
      <div v-if="showDeleteConfirm" class="modal-overlay" @click="showDeleteConfirm = false">
        <div class="modal-card" @click.stop>
          <h3 class="modal-title">Delete Task</h3>
          <p class="modal-message">Are you sure you want to delete this task? This cannot be undone.</p>
          <div class="modal-actions">
            <button class="modal-btn" @click="showDeleteConfirm = false">Cancel</button>
            <button class="modal-btn modal-btn-danger" @click="confirmDelete">Delete</button>
          </div>
        </div>
      </div>
    </teleport>
  </main>
</template>

<style scoped>
/* ── 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(--color-border);
}
.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;
}
.btn-back {
  text-decoration: none;
  color: var(--color-primary);
}
.btn-save {
  padding: 0.45rem 1rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-save:disabled {
  opacity: 0.6;
  cursor: default;
}
.btn-delete {
  padding: 0.45rem 1rem;
  background: var(--color-danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-assist-toggle {
  margin-left: auto;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 0.85rem;
}
.btn-assist-toggle.active {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.title-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  font-size: 1.25rem;
  font-weight: 600;
  background: var(--color-bg-card);
  color: var(--color-text);
}
.editor-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
}
.tab {
  padding: 0.45rem 1rem;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
}
.tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.preview-pane {
  padding: 0.75rem;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  min-height: 200px;
  background: var(--color-bg-card);
}
.field-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}
.field label {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.field-select,
.field-input {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  color: var(--color-text);
  font-size: 0.9rem;
}

/* ── Tag suggestions ── */
.tag-suggest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.btn-suggest-tags {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 0.8rem;
}
.btn-suggest-tags:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-suggest-tags:disabled {
  opacity: 0.6;
  cursor: wait;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: transparent;
  color: var(--color-primary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tag-pill:hover:not(:disabled) {
  background: var(--color-primary);
  color: #fff;
}
.tag-pill.applied {
  background: var(--color-success, #2ecc71);
  border-color: var(--color-success, #2ecc71);
  color: #fff;
  cursor: default;
}
.tag-check {
  font-size: 0.7rem;
}
.btn-dismiss-tags {
  padding: 0.1rem 0.4rem;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.btn-dismiss-tags:hover {
  color: var(--color-text);
}

/* ── Assist panel ── */
.assist-panel {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  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(--color-border);
}
.assist-panel-title {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.btn-proofread {
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.btn-proofread:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-proofread:disabled {
  opacity: 0.5;
  cursor: default;
}
.btn-close-assist {
  padding: 0.1rem 0.4rem;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.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: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}
.assist-sections {
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  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(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assist-section-item:hover {
  background: var(--color-bg-secondary);
}
.assist-section-item.selected {
  border-left-color: var(--color-primary);
  background: var(--color-bg-secondary);
  font-weight: 500;
}
.assist-empty,
.assist-hint {
  padding: 0.6rem 0.7rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.assist-target-preview {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assist-target-preview em {
  font-style: normal;
  color: var(--color-text);
}
.assist-instruction {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-family: inherit;
  resize: vertical;
  background: var(--color-bg);
  color: var(--color-text);
  box-sizing: border-box;
  min-height: 3.5rem;
}
.assist-input-actions {
  display: flex;
  gap: 0.5rem;
}
.btn-generate {
  padding: 0.4rem 0.9rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
}
.btn-generate:disabled {
  opacity: 0.5;
  cursor: default;
}
.btn-clear {
  padding: 0.4rem 0.9rem;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

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

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

/* Review / diff */
.assist-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.btn-toggle-view {
  font-size: 0.75rem;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.diff-view {
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  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(--color-danger) 12%, transparent);
  color: var(--color-danger);
}
.diff-insert {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
}
.diff-equal {
  color: var(--color-text-muted);
}
.diff-marker {
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
  user-select: none;
  font-weight: 700;
}
.diff-text {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}
.diff-empty {
  padding: 0.5rem;
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.82rem;
}
.assist-actions {
  display: flex;
  gap: 0.5rem;
}
.btn-accept {
  padding: 0.4rem 1rem;
  background: var(--color-success);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
}
.btn-reject {
  padding: 0.4rem 1rem;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.modal-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 32px var(--color-shadow);
}
.modal-title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}
.modal-message {
  margin: 0 0 1.25rem;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}
.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.modal-btn {
  padding: 0.45rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.9rem;
}
.modal-btn-danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

/* ── 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(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  .editor-header {
    padding: 0.75rem 1rem 0.5rem;
  }
  .editor-main {
    padding: 0.5rem 1rem 1rem;
  }
}
</style>