/* Tiptap editor - reusable styles */

.tiptap-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	padding: 6px 8px;
	border: 1px solid var(--border-grey, #222);
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	background: var(--darker-grey, #292929);
	position: sticky;
	top: 0;
	z-index: 5;
}

.tiptap-toolbar button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 30px;
	height: 30px;
	padding: 0 4px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	color: var(--lighter-grey, #c6c6c6);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.tiptap-toolbar button:hover {
	background: var(--grey, #414141);
	color: var(--white, #fff);
}

.tiptap-toolbar button:focus-visible {
	outline: none;
	border-color: var(--yellow, #e5ca5f);
}

.tiptap-toolbar button.is-active {
	background: var(--grey, #414141);
	color: var(--yellow, #e5ca5f);
	border-color: var(--dark-yellow, #cdb454);
}

.tiptap-toolbar button:disabled {
	opacity: 0.35;
	cursor: default;
	background: transparent;
	color: var(--lighter-grey, #c6c6c6);
}

/* When the raw-markdown textarea is active, visually disable every toolbar
   control except the raw-mode toggle itself. Buttons live as direct children
   of `.tiptap-toolbar` in full mode and inside `.tiptap-toolbar-row` in
   compact mode, so we cover both. */
.tiptap-toolbar.is-raw-mode > button:not(.tiptap-raw-btn),
.tiptap-toolbar.is-raw-mode > .tiptap-dropdown-btn,
.tiptap-toolbar.is-raw-mode > .sep,
.tiptap-toolbar.is-raw-mode .tiptap-toolbar-row > button:not(.tiptap-raw-btn),
.tiptap-toolbar.is-raw-mode .tiptap-toolbar-row > .tiptap-dropdown-btn,
.tiptap-toolbar.is-raw-mode .tiptap-toolbar-row > .sep {
	opacity: 0.35;
	pointer-events: none;
}

/* ── Compact mode (forum + comments) ──────────────────────────────────────
   Toolbar becomes a column with two rows: the always-visible primary row
   and an advanced row that toggles open via the chevron expander. */
.tiptap-toolbar.is-compact {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
}

.tiptap-toolbar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	padding: 6px 8px;
}

.tiptap-toolbar-advanced {
	display: none;
	border-top: 1px solid var(--border-grey, #222);
}

.tiptap-toolbar.is-expanded .tiptap-toolbar-advanced {
	display: flex;
}

/* "More" button — sits inline with other primary-row buttons. The dots icon
   carries the affordance and the chevron rotates 180° to signal expanded. */
.tiptap-toolbar-expand {
	gap: 2px;
}

.tiptap-toolbar-expand .chevron {
	transition: transform 150ms ease;
}

.tiptap-toolbar.is-expanded .tiptap-toolbar-expand .chevron {
	transform: rotate(180deg);
}

/* Attach-file button (forum posts only) takes over the panel's disclosure
   role when present, so we hide the panel's own <summary>. */
.forum-attachment-panel.is-headless > summary {
	display: none;
}

.tiptap-toolbar button svg {
	width: 16px;
	height: 16px;
	display: block;
}

.tiptap-toolbar .sep {
	width: 1px;
	align-self: stretch;
	background: var(--grey, #414141);
	margin: 4px 6px;
}

/* Typographic glyphs used in toolbar buttons AND dropdown flyouts. Must not
   be scoped to .tiptap-toolbar alone — flyouts render outside the toolbar. */
.t-b { font-weight: 700; font-size: 14px; }
.t-i { font-style: italic; font-family: Georgia, serif; font-size: 15px; padding: 0 2px; }
.t-s { text-decoration: line-through; font-size: 14px; }
.t-u { text-decoration: underline; text-underline-offset: 2px; font-size: 14px; }
.t-h { font-weight: 700; font-size: 13px; letter-spacing: 0.3px; }
.t-aa { font-weight: 600; font-size: 13px; letter-spacing: 0.3px; }
.t-md { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }
.t-sub, .t-sup { font-size: 13px; font-weight: 600; }
.t-sub sub, .t-sup sup { font-size: 9px; }

/* Dropdown button in the toolbar (e.g. alignment) */
.tiptap-toolbar .tiptap-dropdown-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 44px;
	height: 30px;
	padding: 0 2px 0 4px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	color: var(--lighter-grey, #c6c6c6);
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tiptap-toolbar .tiptap-dropdown-btn:hover {
	background: var(--grey, #414141);
	color: var(--white, #fff);
}
.tiptap-toolbar .tiptap-dropdown-btn.is-active {
	background: var(--grey, #414141);
	color: var(--yellow, #e5ca5f);
	border-color: var(--dark-yellow, #cdb454);
}
.tiptap-toolbar .tiptap-dropdown-btn svg {
	width: 16px;
	height: 16px;
	display: block;
}
.tiptap-toolbar .tiptap-dropdown-btn svg.chevron {
	width: 11px;
	height: 11px;
	opacity: 0.7;
}

/* Dropdown flyout — floats in the editor wrapper */
.tiptap-flyout {
	display: none;
	position: absolute;
	z-index: 15;
	padding: 4px;
	gap: 2px;
	background: var(--darker-grey, #292929);
	border: 1px solid var(--grey, #414141);
	border-radius: 4px;
	box-shadow: 0 8px 24px var(--shadow-grey, rgba(0, 0, 0, 0.5));
}
.tiptap-flyout.visible { display: flex; }
.tiptap-flyout button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	color: var(--lighter-grey, #c6c6c6);
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tiptap-flyout button:hover {
	background: var(--grey, #414141);
	color: var(--white, #fff);
}
.tiptap-flyout button.is-active {
	background: var(--grey, #414141);
	color: var(--yellow, #e5ca5f);
	border-color: var(--dark-yellow, #cdb454);
}
.tiptap-flyout button svg { width: 16px; height: 16px; display: block; }

/* Editor surface */
.tiptap-editor-area {
	border: 1px solid var(--border-grey, #222);
	border-radius: 0 0 6px 6px;
	padding: 16px 20px;
	min-height: 300px;
	background: var(--dark-grey, #2f2f2f);
	color: var(--light-grey, #f8f8f8);
	font-size: 15px;
	line-height: 1.6;
	transition: border-color 120ms ease;
	/* Contain floats from aligned images so they don't leak into sibling
	   elements (e.g. the Save button below the editor). */
	display: flow-root;
}

.tiptap-editor-area:focus-within {
	border-color: var(--dark-yellow, #cdb454);
}

/* Raw-markdown textarea — matches the editor area's skin but uses a
   monospace font and behaves like a plain <textarea>. */
textarea.tiptap-raw-editor {
	display: block;
	width: 100%;
	resize: vertical;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.5;
	white-space: pre;
	overflow: auto;
	box-sizing: border-box;
}
textarea.tiptap-raw-editor:focus {
	outline: none;
}

/* Drop-target overlay (while dragging a file over the editor). */
.tiptap-editor-area.is-drop-target {
	border-color: var(--dark-yellow, #cdb454);
	box-shadow: inset 0 0 0 2px var(--dark-yellow, #cdb454);
	position: relative;
}
.tiptap-editor-area.is-drop-target::after {
	content: 'Drop image to insert';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(205, 180, 84, 0.12);
	color: var(--yellow, #e5ca5f);
	font-weight: 700;
	letter-spacing: 0.5px;
	pointer-events: none;
	border-radius: 0 0 6px 6px;
}

/* Character / word counter below the editor area. */
.tiptap-counter {
	margin-top: 6px;
	font-size: 12px;
	color: var(--meta-grey, #a0a0a0);
	text-align: right;
	transition: color 120ms ease;
}
.tiptap-counter.is-near-limit { color: var(--orange, #FFB380); }
.tiptap-counter.is-at-limit   { color: var(--light-red, #ff707d); font-weight: 600; }

.tiptap-editor-area .tiptap {
	outline: none;
	min-height: 250px;
}

.tiptap-editor-area .tiptap > * + * { margin-top: 0.5em; }

/* Typography */
.tiptap-editor-area h1,
.tiptap-editor-area h2,
.tiptap-editor-area h3 { color: var(--white, #fff); }

.tiptap-editor-area blockquote {
	border-left: 3px solid var(--dark-yellow, #cdb454);
	padding-left: 12px;
	color: var(--meta-grey, #a0a0a0);
}

.tiptap-editor-area code {
	background: var(--darker-grey, #292929);
	padding: 2px 5px;
	border-radius: 3px;
	font-size: 0.9em;
	color: var(--light-yellow, #fbf15f);
}

.tiptap-editor-area pre {
	background: #1e1e1e;
	padding: 12px;
	border-radius: 4px;
	overflow-x: auto;
}

.tiptap-editor-area pre code {
	background: none;
	padding: 0;
	color: inherit;
}

.tiptap-editor-area ul,
.tiptap-editor-area ol { padding-left: 24px; }
/* ProseMirror wraps each <li> content in a <p>; strip the default margin so
   list spacing matches the server-rendered markdown output. */
.tiptap-editor-area li > p { margin: 0; }

/* Task lists (GFM `- [ ] text`) */
.tiptap-editor-area ul[data-type="taskList"] {
	list-style: none;
	padding-left: 4px;
}
.tiptap-editor-area ul[data-type="taskList"] li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 2px 0;
}
.tiptap-editor-area ul[data-type="taskList"] li > label {
	flex-shrink: 0;
	margin-top: 4px;
	user-select: none;
}
.tiptap-editor-area ul[data-type="taskList"] li > div {
	flex: 1 1 auto;
}
.tiptap-editor-area ul[data-type="taskList"] input[type="checkbox"] {
	cursor: pointer;
	accent-color: var(--dark-yellow, #cdb454);
}
.tiptap-editor-area ul[data-type="taskList"] li[data-checked="true"] > div {
	color: var(--meta-grey, #a0a0a0);
	text-decoration: line-through;
}

/* Subscript / superscript */
.tiptap-editor-area sub,
.tiptap-editor-area sup { line-height: 0; font-size: 0.78em; }

/* Forum quote block — a blockquote with an attribution header. Rendered
   as ONE unit: the author's drag / delete / selection all operate on both
   the header and the quoted body together. The underlying markdown stores
   only `{{quote:N}}` (the id); the displayed name is fetched live from
   the server so no username/URL is frozen into the DB. */
.tiptap-editor-area blockquote.coi-quote-block {
	padding: 0;
	position: relative;
}
.tiptap-editor-area blockquote.coi-quote-block .coi-quote-block-header {
	display: block;
	padding: 4px 12px 2px;
	color: var(--meta-grey, #a0a0a0);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.3px;
	user-select: none;
}
.tiptap-editor-area blockquote.coi-quote-block .coi-quote-block-header.coi-quote-block-missing {
	color: var(--light-red, #ff707d);
}
.tiptap-editor-area blockquote.coi-quote-block .coi-quote-block-body {
	padding: 2px 12px 4px;
}
.tiptap-editor-area blockquote.coi-quote-block .coi-quote-block-body > * + * { margin-top: 0.5em; }

/* Author link inside a rendered forum quote (public view). Styled as plain
   text — the yellow accent we use for regular links pulls too much attention
   inside a quote block. The `.coi-quote-author` class is attached by the
   HTML post-processor in HtmlHelperExtensions. Selectors are written against
   blockquote ancestors to raise specificity above site.css's `a { … }`. */
blockquote a.coi-quote-author,
.description a.coi-quote-author,
.forum-post-body a.coi-quote-author {
	color: inherit;
	text-decoration: none;
}
blockquote a.coi-quote-author:hover,
.description a.coi-quote-author:hover,
.forum-post-body a.coi-quote-author:hover {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--meta-grey, #a0a0a0);
	text-underline-offset: 2px;
}

.tiptap-editor-area hr {
	border: none;
	border-top: 1px solid var(--grey, #414141);
	margin: 16px 0;
}

.tiptap-editor-area a {
	color: var(--yellow, #e5ca5f);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tiptap-editor-area a:hover {
	color: var(--light-yellow, #fbf15f);
}

/* Placeholder */
.tiptap-editor-area p.is-editor-empty:first-child::before {
	content: attr(data-placeholder);
	color: var(--secondary-grey, #717171);
	pointer-events: none;
	float: left;
	height: 0;
}

/* Text alignment */
.tiptap-editor-area [style*="text-align: center"] { text-align: center; }
.tiptap-editor-area [style*="text-align: right"] { text-align: right; }
.tiptap-editor-area [style*="text-align: justify"] { text-align: justify; }

/* Images */
.tiptap-editor-area img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	cursor: move;
}
.tiptap-editor-area img.ProseMirror-selectednode {
	outline: 2px solid var(--yellow, #e5ca5f);
	outline-offset: 2px;
}
.tiptap-editor-area img[data-align="center"] { display: block; margin-left: auto; margin-right: auto; }
.tiptap-editor-area img[data-align="left"]   { float: left;  margin: 0 16px 8px 0; }
.tiptap-editor-area img[data-align="right"]  { float: right; margin: 0 0 8px 16px; }

/* Figure wrapper — used when an image has a caption, and also applied by the
   server-side renderer for aligned images so layout is consistent. */
.coi-figure {
	display: inline-block;
	max-width: 100%;
}
.coi-figure img {
	display: block;
	max-width: 100%;
	height: auto;
	float: none;
	margin: 0;
}
/* When the figure has an explicit width (from the size picker), stretch the
   img to fill it — without this the img would stay at its natural size and
   the caption would be wider than the picture. */
.coi-figure[style*="width"] img { width: 100%; }

/* Bare images (no caption, no figure) rendered from markdown — keep them
   inside the content column. `.tiptap-editor-area img` covers the editor,
   `.description img` covers the public detail view. */
.description img {
	max-width: 100%;
	height: auto;
}

/* YouTube embed — responsive 16:9 wrapper. Used both in the live editor
   (tiptap Youtube extension renders this structure) and on the detail page
   (HtmlHelperExtensions post-processing builds it).
   Uses `aspect-ratio` so the box keeps 16:9 even when max-width caps it —
   the older padding-bottom trick breaks under a max-width because its
   percentage is relative to the parent's width, not the element's. */
.coi-youtube,
.tiptap-editor-area div[data-youtube-video] {
	position: relative;
	width: 100%;
	max-width: 720px;
	aspect-ratio: 16 / 9;
	margin: 12px 0;
	border-radius: 4px;
	overflow: hidden;
}
.coi-youtube iframe,
.tiptap-editor-area div[data-youtube-video] iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.coi-figure[data-align="center"] { display: block; margin-left: auto; margin-right: auto; }
.coi-figure[data-align="left"]   { float: left;  margin: 0 16px 8px 0; }
.coi-figure[data-align="right"]  { float: right; margin: 0 0 8px 16px; }

.coi-caption {
	display: block;
	padding: 6px 10px 2px;
	font-size: 13px;
	font-style: italic;
	color: inherit;
	text-align: center;
	line-height: 1.4;
	outline: none;
}

/* Empty and not-focused captions: hide entirely. This keeps images without
   captions looking like plain images. When the user uses "Add caption" from
   the context menu we momentarily set display:block inline to get focus,
   and :focus below keeps it visible while editing. */
.coi-caption:empty:not(:focus) { display: none; }

.coi-caption:empty:focus::before {
	content: attr(data-placeholder);
	color: var(--secondary-grey, #717171);
}

/* Tables */
.tiptap-editor-area table {
	border-collapse: collapse;
	table-layout: fixed;   /* required for prosemirror-tables column resize */
	width: 100%;
	margin: 12px 0;
	position: relative;
	overflow: hidden;
}
.tiptap-editor-area th,
.tiptap-editor-area td {
	border: 1px solid var(--grey, #414141);
	padding: 6px 10px;
	text-align: left;
	vertical-align: top;
	position: relative;    /* anchor for .column-resize-handle */
	min-width: 40px;
}
.tiptap-editor-area th {
	background: var(--darker-grey, #292929);
	color: var(--yellow, #e5ca5f);
	font-weight: 700;
}
.tiptap-editor-area td { background: var(--dark-grey, #2f2f2f); }
.tiptap-editor-area .selectedCell {
	background: rgba(229, 202, 95, 0.18) !important;
}

/* Column resize handle — shown on hover at the right edge of each cell. */
.tiptap-editor-area .column-resize-handle {
	position: absolute;
	right: -2px;
	top: 0;
	bottom: -2px;
	width: 4px;
	background-color: var(--dark-yellow, #cdb454);
	pointer-events: none;
	z-index: 1;
}
/* ProseMirror adds this class to the editor root while dragging a handle. */
.tiptap-editor-area .ProseMirror.resize-cursor,
.tiptap-editor-area .ProseMirror.resize-cursor * {
	cursor: col-resize;
}

/* Floating popups (image tools, table tools) */
.tiptap-popup {
	display: none;
	position: absolute;
	z-index: 10;
	padding: 12px;
	gap: 8px;
	background: var(--darker-grey, #292929);
	border: 1px solid var(--dark-yellow, #cdb454);
	border-radius: 6px;
	box-shadow: 0 10px 28px var(--shadow-grey, rgba(0, 0, 0, 0.6));
}

.tiptap-popup.visible { display: flex; }
.tiptap-popup.col { flex-direction: column; }

.tiptap-popup .btn-row {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.tiptap-popup label {
	display: block;
	color: var(--meta-grey, #a0a0a0);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin: 2px 0 0;
}

.tiptap-popup button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px 10px;
	min-height: 28px;
	background: var(--dark-grey, #2f2f2f);
	border: 1px solid var(--grey, #414141);
	border-radius: 3px;
	color: var(--lighter-grey, #c6c6c6);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.tiptap-popup button.icon-only {
	width: 32px;
	padding: 0;
}

.tiptap-popup button:hover {
	background: var(--grey, #414141);
	color: var(--white, #fff);
	border-color: var(--dark-yellow, #cdb454);
}

.tiptap-popup button.is-active {
	background: var(--grey, #414141);
	color: var(--yellow, #e5ca5f);
	border-color: var(--dark-yellow, #cdb454);
}

.tiptap-popup button svg {
	width: 14px;
	height: 14px;
	display: block;
}

.tiptap-popup .caption-row {
	display: flex;
}

.tiptap-popup input[type="text"] {
	flex: 1;
	min-width: 220px;
	padding: 6px 10px;
	background: var(--dark-grey, #2f2f2f);
	border: 1px solid var(--grey, #414141);
	border-radius: 3px;
	color: var(--light-grey, #f8f8f8);
	font-size: 12px;
	line-height: 1.3;
	outline: none;
	transition: border-color 120ms ease;
}

.tiptap-popup input[type="text"]::placeholder {
	color: var(--secondary-grey, #717171);
}

.tiptap-popup input[type="text"]:focus {
	border-color: var(--dark-yellow, #cdb454);
}

/* Prompt popup (URL / YouTube entry) */
.prompt-popup { min-width: 320px; }

.prompt-popup .caption-row { margin-bottom: 2px; }

.prompt-popup .prompt-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
}

.prompt-popup .prompt-actions .spacer { flex: 1; }

.prompt-popup button.primary {
	background: var(--dark-yellow, #cdb454);
	color: #1e1e1e;
	border-color: var(--dark-yellow, #cdb454);
	font-weight: 600;
}

.prompt-popup button.primary:hover {
	background: var(--yellow, #e5ca5f);
	color: #1e1e1e;
	border-color: var(--yellow, #e5ca5f);
}

.prompt-popup button.danger {
	color: var(--light-red, #ff707d);
	border-color: var(--grey, #414141);
}

.prompt-popup button.danger:hover {
	background: var(--darker-red, #8f303a);
	color: var(--white, #fff);
	border-color: var(--darker-red, #8f303a);
}

/* Full-width text item inside a tiptap-popup (used by the image context menu). */
.tiptap-popup button.menu-item {
	display: block;
	width: 100%;
	padding: 6px 10px;
	background: none;
	border: none;
	border-radius: 3px;
	color: var(--lighter-grey, #c6c6c6);
	text-align: left;
	font-size: 13px;
	line-height: 1.4;
	min-height: 0;
	cursor: pointer;
	transition: background 100ms ease, color 100ms ease;
}
.tiptap-popup button.menu-item:hover {
	background: var(--grey, #414141);
	color: var(--white, #fff);
}
.tiptap-popup button.menu-item.danger { color: var(--light-red, #ff707d); }
.tiptap-popup button.menu-item.danger:hover {
	background: var(--darker-red, #8f303a);
	color: var(--white, #fff);
}
.tiptap-popup .menu-sep {
	height: 1px;
	background: var(--grey, #414141);
	margin: 4px 0;
}

/* Emoji picker (emoji-mart v5) — theme-matched via its CSS custom props.
   Important: height goes directly on the web component (the shadow-DOM flex
   layout reads from its host). Wrapping it in a constrained parent and using
   height:100% doesn't trigger the internal scroll reliably. */
.emoji-popup {
	padding: 0;
	/* Match the picker's --rgb-background so the right-side scrollbar gutter
	   (where emoji-mart's internal grid stops short of the host width) blends
	   in instead of showing the page through. */
	background: rgb(41, 41, 41);
	border: none;
	box-shadow: 0 10px 28px var(--shadow-grey, rgba(0, 0, 0, 0.6));
	border-radius: 10px;
}
.emoji-popup em-emoji-picker {
	--rgb-background:       41, 41, 41;   /* --darker-grey  */
	--rgb-input:            47, 47, 47;   /* --dark-grey    */
	--rgb-color:            248, 248, 248;/* --light-grey   */
	--rgb-accent:           205, 180, 84; /* --dark-yellow  */
	--color-border:         #414141;      /* --grey         */
	--color-border-over:    #cdb454;      /* --dark-yellow  */
	--border-radius:        10px;
	--font-family:          inherit;
	width: 352px;
	height: 420px;
}

/* Context menu (right-click inside a table) */
.tiptap-menu {
	display: none;
	position: absolute;
	z-index: 20;
	min-width: 200px;
	padding: 4px;
	background: var(--darker-grey, #292929);
	border: 1px solid var(--dark-yellow, #cdb454);
	border-radius: 6px;
	box-shadow: 0 10px 28px var(--shadow-grey, rgba(0, 0, 0, 0.6));
}
.tiptap-menu.visible { display: block; }

.tiptap-menu button {
	display: block;
	width: 100%;
	padding: 6px 12px;
	background: none;
	border: none;
	border-radius: 3px;
	color: var(--lighter-grey, #c6c6c6);
	text-align: left;
	font-size: 13px;
	line-height: 1.4;
	cursor: pointer;
	transition: background 100ms ease, color 100ms ease;
}

.tiptap-menu button:hover {
	background: var(--grey, #414141);
	color: var(--white, #fff);
}

.tiptap-menu button.danger { color: var(--light-red, #ff707d); }
.tiptap-menu button.danger:hover {
	background: var(--darker-red, #8f303a);
	color: var(--white, #fff);
}

.tiptap-menu .menu-sep {
	height: 1px;
	background: var(--grey, #414141);
	margin: 4px 2px;
}