.lexxy-ai-field--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #fff;
  overflow: hidden;
}
.lexxy-ai-field--fullscreen > label,
.lexxy-ai-field--fullscreen > p { display: none; }

.lexxy-ai-field__editor--with-action .lexxy-editor__content { padding-bottom: 3rem; }

.lexxy-ai-field--fullscreen > .lexxy-ai-field__editor {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.lexxy-ai-field--fullscreen lexxy-editor {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
}
.lexxy-ai-field--fullscreen lexxy-toolbar { flex: none; }
.lexxy-ai-field--fullscreen .lexxy-editor__content,
.lexxy-ai-field--fullscreen .ai-markdown-preview { flex: 1; min-height: 0; overflow: auto; }
.lexxy-ai-field--fullscreen .rt-history-panel { flex: 1; height: auto; min-height: 0; }

.rt-diff-ins {
  background-color: #dcfce7;
  text-decoration: none;
}
.rt-diff-del {
  background-color: #fee2e2;
  text-decoration: line-through;
}
.rt-diff-block { border-left: 3px solid #c7d2fe; padding-left: 0.5rem; }
.rt-diff-block-added { border-left: 3px solid #86efac; background: #f0fdf4; padding-left: 0.5rem; }
.rt-diff-block-removed {
  border-left: 3px solid #fca5a5;
  background: #fef2f2;
  padding-left: 0.5rem;
  text-decoration: line-through;
  opacity: 0.75;
}

/* Version history — split-view panel, shown in place of the editor content */
.rt-history-panel {
  display: flex;
  height: min(60vh, 30rem);
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}
.rt-history-panel > turbo-frame {
  flex: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
}
.rt-history {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.rt-history__empty { padding: 3rem 1.25rem; text-align: center; }
.rt-history__split { display: flex; flex: 1; min-height: 0; }

.rt-history__list {
  width: 320px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid #e5e7eb;
}
.rt-history__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.rt-history__row:hover { background: #f9fafb; }
.rt-history__row.is-selected {
  background: #eef2ff;
  border-left-color: #4f46e5;
}
.rt-history__row-main { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.rt-history__time { font-size: 0.875rem; font-weight: 600; color: #111827; }
.rt-history__author { font-size: 0.75rem; color: #6b7280; }
.rt-history__pill {
  margin-left: 0.375rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #4338ca;
  background: #e0e7ff;
  border-radius: 9999px;
  vertical-align: middle;
}
.rt-history__delta { display: flex; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.rt-history__add { color: #15803d; }
.rt-history__del { color: #b91c1c; }

.rt-history__detail { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rt-history__detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}
.rt-history__detail-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  margin: 0; /* the panel is inside .lexxy-editor__content, which margins paragraphs */
  font-size: 0.75rem;
  color: #6b7280;
}
.rt-history__detail-time { font-weight: 600; color: #111827; }
.rt-history__detail-sep { color: #d1d5db; }
.rt-history__detail-tools { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
.rt-history__toggles { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.rt-history__toggle { display: inline-flex; border: 1px solid #d1d5db; border-radius: 0.375rem; overflow: hidden; }
.rt-history__toggle-btn {
  padding: 0.1875rem 0.625rem;
  font-size: 0.75rem;
  color: #374151;
  text-decoration: none;
}
.rt-history__toggle-btn.is-active { background: #4f46e5; color: #fff; }
.rt-history__body { flex: 1; overflow: auto; padding: 1.25rem; font-size: 0.875rem; color: #1f2937; }
.rt-history__empty-diff { margin: 0; color: #6b7280; font-size: 0.875rem; }
.rt-history__body .lexxy-content { max-width: 65ch; }
.rt-history__baseline { font-size: 0.6875rem; color: #9ca3af; white-space: nowrap; }
.rt-history__md {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #374151;
}
.rt-history__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid #e5e7eb;
}
.rt-history__footer > p { margin: 0; }
/* Scoped under .rt-history-panel so the editor's content button:hover rule
   (which is more specific than a bare class) can't override the background. */
.rt-history-panel .rt-history__restore {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: #4f46e5;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}
.rt-history-panel .rt-history__restore:hover {
  color: #fff;
  background: #4338ca;
}

.rt-history-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: #fff;
  background: #111827;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2);
}

/* Mobile back bar: hidden on desktop, shown as a header in the detail pane. */
.rt-history__back {
  display: none;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #4f46e5;
  background: none;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
}

/* Mobile: one pane at a time (master-detail). The list fills the panel; tapping
   a version swaps to the detail, and the back bar returns to the list. */
@media (max-width: 640px) {
  .rt-history-panel { height: 75vh; }
  .rt-history__list { width: 100%; border-right: none; }
  .rt-history__back { display: inline-flex; }
  .rt-history-panel:not(.rt-history-panel--detail) .rt-history__detail { display: none; }
  .rt-history-panel.rt-history-panel--detail .rt-history__list { display: none; }
  .rt-history__detail-head { flex-wrap: wrap; gap: 0.5rem; }
  .rt-history__detail-tools { justify-content: flex-start; }
  .rt-history__footer { flex-wrap: wrap; gap: 0.5rem; }
  .rt-history__restore { width: 100%; }
}