/* ===========================
   Tiptap Editor Styles
   =========================== */

/* Editor tabs */
.editor-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #E0DDD8;
  margin-bottom: 0;
}

.editor-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #6B6560;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}

.editor-tab:hover {
  color: #2E2A26;
}

.editor-tab--active {
  color: #545BFE;
  border-bottom-color: #545BFE;
}

/* Toolbar */
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: #F5F3F0;
  border-bottom: 1px solid #E0DDD8;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.editor-toolbar button {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6B6560;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.editor-toolbar button:hover {
  background: #E0DDD8;
  color: #2E2A26;
}

.toolbar-separator {
  width: 1px;
  height: 18px;
  background: #E0DDD8;
  margin: 0 4px;
}

/* Editor content area (Tiptap) */
.editor-content {
  border: none;
  min-height: 400px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.7;
  outline: none;
}

.editor-content:focus-within {
  box-shadow: none;
}

/* ProseMirror specific */
.editor-content .ProseMirror {
  outline: none;
  min-height: 380px;
  cursor: text;
}

.editor-content .ProseMirror > p:only-child:has(> br.ProseMirror-trailingBreak:only-child)::before {
  content: "Start writing...";
  color: #9C9690;
  float: left;
  height: 0;
  pointer-events: none;
}

.editor-content .ProseMirror p {
  margin: 0 0 12px;
}

.editor-content .ProseMirror h1,
.editor-content .ProseMirror h2,
.editor-content .ProseMirror h3 {
  margin: 20px 0 8px;
  font-weight: 600;
}

.editor-content .ProseMirror h1 { font-size: 24px; }
.editor-content .ProseMirror h2 { font-size: 20px; }
.editor-content .ProseMirror h3 { font-size: 16px; }

.editor-content .ProseMirror ul {
  list-style-type: disc;
  padding-left: 24px;
  margin: 0 0 12px;
}

.editor-content .ProseMirror ol {
  list-style-type: decimal;
  padding-left: 24px;
  margin: 0 0 12px;
}

.editor-content .ProseMirror a {
  color: #545BFE;
  text-decoration: underline;
}

.editor-content .ProseMirror blockquote {
  border-left: 3px solid #E0DDD8;
  padding-left: 16px;
  margin: 12px 0;
  color: #6B6560;
}

.editor-content .ProseMirror code {
  background: #F5F3F0;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 13px;
}

.editor-content .ProseMirror pre {
  background: #1C1F58;
  color: #e0e0e0;
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
}

/* Froala image display classes — matches Kustomer's Froala editor rendering.
   Applied globally so images render consistently in editor, preview, and published output. */
img.fr-dib {
  margin: 5px auto;
  display: block;
  float: none;
  vertical-align: top;
}

img.fr-dib.fr-fil {
  margin-left: 0;
  margin-right: auto;
}

img.fr-dib.fr-fir {
  margin-left: auto;
  margin-right: 0;
}

img.fr-dii {
  display: inline-block;
  float: none;
  vertical-align: bottom;
  margin-left: 5px;
  margin-right: 5px;
  max-width: calc(100% - 10px);
}

img.fr-dii.fr-fil {
  float: left;
  margin: 5px 5px 5px 0;
  max-width: calc(100% - 5px);
}

img.fr-dii.fr-fir {
  float: right;
  margin: 5px 0 5px 5px;
  max-width: calc(100% - 5px);
}

img.fr-dii:not(.fr-fil):not(.fr-fir) {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

/* HTML textarea mode — syntax highlight overlay */
.html-highlight-wrapper {
  position: relative;
  border-top: 1px solid #E0DDD8;
}

.editor-html-textarea,
.html-highlight-pre {
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  tab-size: 2;
  padding: 16px;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.editor-html-textarea {
  width: 100%;
  min-height: 200px;
  border: none;
  resize: none;
  outline: none;
  overflow: hidden;
  /* Transparent text — the highlighted pre behind shows through */
  color: transparent;
  caret-color: #2E2A26;
  background: transparent;
  /* Sit on top of the pre for input */
  position: relative;
  z-index: 1;
}

.editor-html-textarea:focus {
  box-shadow: none;
}

.editor-html-textarea::selection {
  background: rgba(84, 91, 254, 0.2);
}

.html-highlight-pre {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  background: white;
  z-index: 0;
  /* Base color for non-token text (article content between tags) */
  color: #2E2A26;
}

.html-highlight-pre code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  tab-size: inherit;
}

/* Prism token colors — light theme tuned for HTML editing.
   Article text is the base color (dark, readable). Tags and syntax
   use saturated colors so structure stands out from content. */
.html-highlight-pre .token.tag { color: #BE185D; }
.html-highlight-pre .token.attr-name { color: #7C3AED; }
.html-highlight-pre .token.attr-value { color: #047857; }
.html-highlight-pre .token.punctuation { color: #BE185D; }
.html-highlight-pre .token.comment { color: #9C9690; font-style: italic; }
.html-highlight-pre .token.entity { color: #D97706; }
.html-highlight-pre .token.doctype { color: #9C9690; }
.html-highlight-pre .token.attr-equals { color: #6B6560; }

/* Preview mode */
.editor-preview {
  min-height: 400px;
  padding: 16px;
  border: none;
  background: transparent;
  font-size: 15px;
  line-height: 1.7;
}

.editor-preview h2 { font-size: 20px; margin: 20px 0 8px; }
.editor-preview h3 { font-size: 16px; margin: 16px 0 6px; }
.editor-preview p { margin: 0 0 12px; }
.editor-preview ul { list-style-type: disc; padding-left: 24px; margin: 0 0 12px; }
.editor-preview ol { list-style-type: decimal; padding-left: 24px; margin: 0 0 12px; }
.editor-preview a { color: #545BFE; }

/* Right panel type system */
.panel-heading {
  font-size: 1rem;         /* text-base (16px) */
  line-height: 1.5rem;
  font-weight: 600;        /* font-semibold */
  color: #57534e;          /* stone-600 */
  margin-bottom: 0.75rem;
}

.panel-subheading {
  font-size: 0.875rem;     /* text-sm (14px) */
  line-height: 1.25rem;
  font-weight: 600;        /* font-semibold */
  color: #57534e;          /* stone-600 */
  margin-bottom: 0.375rem;
}

.panel-body {
  font-size: 0.875rem;     /* text-sm (14px) */
  line-height: 1.25rem;
  color: #57534e;          /* stone-600 */
}

.panel-caption {
  font-size: 0.75rem;      /* text-xs (12px) */
  line-height: 1rem;
  color: #a8a29e;          /* stone-400 */
}

/* Collapsible panel sections — macOS disclosure chevrons */
.panel-section summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.panel-section summary::-webkit-details-marker { display: none; }

summary.panel-heading { margin-bottom: 0; }

/* Sidebar input text matches panel-body color */
.panel-section input[type="text"],
.panel-section input[type="url"],
.panel-section textarea {
  color: #57534e;          /* stone-600 */
}

.panel-section summary .chevron-right { display: inline; }
.panel-section summary .chevron-down { display: none; }
.panel-section[open] summary .chevron-right { display: none; }
.panel-section[open] summary .chevron-down { display: inline; }