/* ── Write widget ─────────────────────────────────────────────────────────── */

.widget-write {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

.widget-write > .-sidebar {
  display: none;
  width: 176px;
  flex-shrink: 0;
  flex-direction: column;
  border-right: 1px solid var(--border-soft);
  overflow: hidden;
  background: var(--bg-canvas);
}

.widget-write.-sidebar-open > .-sidebar {
  display: flex;
}

.widget-write > .-sidebar > .-sidebar-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.widget-write .-sidebar-label {
  flex: 1;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.widget-write .-sidebar-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.widget-write .-sidebar-add:hover {
  background: var(--slate-50);
  color: var(--fg-1);
}

.widget-write > .-sidebar > .-note-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding: 6px 0;
  margin: 0;
}

/* ── Note list items ──────────────────────────────────────────────────────── */

.widget-write .-note-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title trash" "sub sub";
  align-items: center;
  gap: 0 4px;
  padding: 8px 12px 6px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.widget-write .-note-item:hover { background: var(--slate-50); }
.widget-write .-note-item.-active { background: var(--slate-50); }

.widget-write .-note-title {
  grid-area: title;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.widget-write .-note-item.-active .-note-title {
  font-weight: 600;
  color: var(--slate-700);
}

.widget-write .-note-trash {
  grid-area: trash;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.widget-write .-note-item:hover .-note-trash { opacity: 1; }

.widget-write .-note-trash:hover {
  background: var(--slate-100);
  color: var(--danger);
}

.widget-write .-note-sub {
  grid-area: sub;
  display: none;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--fg-3);
  margin-top: 2px;
  line-height: 1.2;
}

.widget-write .-note-item.-active .-note-sub { display: block; }

/* ── Main area ────────────────────────────────────────────────────────────── */

.widget-write > .-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.widget-write > .-main > .-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.widget-write .-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.widget-write .-expand-btn:hover,
.widget-write .-expand-btn.-active {
  background: var(--slate-50);
  color: var(--fg-2);
}

.widget-write .-title-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--fg-1);
  padding: 0;
  line-height: 1.35;
}

.widget-write .-title-input::placeholder { color: var(--fg-3); }

/* ── Toolbar ──────────────────────────────────────────────────────────────── */

.widget-write > .-main > .-toolbar {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.widget-write .-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-3);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.widget-write .-tool:hover    { background: var(--slate-50);  color: var(--fg-2); }
.widget-write .-tool.-active  { background: var(--slate-100); color: var(--slate-700); }

.widget-write .-tool-sep {
  width: 1px;
  height: 14px;
  background: var(--border-soft);
  margin: 0 3px;
  flex-shrink: 0;
}

/* ── Editor (Tiptap / ProseMirror) ────────────────────────────────────────── */

.widget-write > .-main > .-editor {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  min-height: 0;
}

.widget-write > .-main > .-editor .ProseMirror {
  outline: none;
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  line-height: var(--lh-prose);
  color: var(--ink);
  min-height: 100%;
}

.widget-write > .-main > .-editor .ProseMirror p       { margin: 0 0 0.7em; }
.widget-write > .-main > .-editor .ProseMirror p:last-child { margin-bottom: 0; }

.widget-write > .-main > .-editor .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--fg-3);
  pointer-events: none;
  float: left;
  height: 0;
}

.widget-write > .-main > .-editor .ProseMirror h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--slate-800);
  line-height: var(--lh-snug);
  margin: 1.2em 0 0.35em;
}

.widget-write > .-main > .-editor .ProseMirror h2:first-child { margin-top: 0; }

.widget-write > .-main > .-editor .ProseMirror strong { font-weight: 700; }
.widget-write > .-main > .-editor .ProseMirror em     { font-style: italic; }

.widget-write > .-main > .-editor .ProseMirror ul,
.widget-write > .-main > .-editor .ProseMirror ol {
  padding-left: 1.4em;
  margin: 0 0 0.7em;
}

.widget-write > .-main > .-editor .ProseMirror li      { margin-bottom: 0.2em; }
.widget-write > .-main > .-editor .ProseMirror li p    { margin: 0; }

.widget-write > .-main > .-editor .ProseMirror blockquote {
  border-left: 2px solid var(--slate-200);
  margin: 0.75em 0;
  padding: 0.1em 0 0.1em 1em;
  color: var(--fg-2);
  font-style: italic;
}

.widget-write > .-main > .-editor .ProseMirror div[data-type="highlight-quote"] {
  border-left: 3px solid var(--hl-bg, #fde68a);
  background: var(--slate-50);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px;
  cursor: pointer;
  user-select: text;
  transition: background var(--dur-fast) var(--ease-out);
}

.widget-write > .-main > .-editor .ProseMirror div[data-type="highlight-quote"]:hover {
  background: var(--slate-100);
}

.widget-write > .-main > .-editor .ProseMirror div[data-type="highlight-quote"] p {
  margin: 0 0 0.3em;
  font-style: normal;
  color: var(--ink);
}

.widget-write > .-main > .-editor .ProseMirror div[data-type="highlight-quote"] p:last-child {
  margin-bottom: 0;
}

.widget-write > .-main > .-editor .ProseMirror div[data-type="highlight-quote"] em {
  font-size: var(--fs-12);
  color: var(--fg-3);
  font-style: normal;
}

.widget-write > .-main > .-editor .ProseMirror .ProseMirror-selectednode[data-type="highlight-quote"] {
  outline: 2px solid var(--slate-300);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.widget-write > .-main > .-editor .ProseMirror code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--slate-50);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  color: var(--slate-700);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.widget-write > .-main > .-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
}

/* Hide AI button when sidebar is open */
.widget-write.-sidebar-open > .-main > .-footer > .-ai-btn {
  display: none;
}

.widget-write .-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--fg-2);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.widget-write .-ai-btn:hover {
  background: var(--slate-50);
  color: var(--fg-1);
}

.widget-write .-save-status {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--fg-3);
  white-space: nowrap;
}