/* ─── NotesEditor: Rich-text editor component ─── */

/* Outer wrapper: mounted on the user's container */
.ne-toolbar {
	display: flex;
	gap: 2px;
	margin-bottom: 0;
	background: #131715;
	border: 1px solid rgba(255,255,255,.08);
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	padding: 4px 6px;
	flex-wrap: wrap;
	align-items: center;
}
.ne-btn {
	background: none;
	border: none;
	color: #889688;
	cursor: pointer;
	padding: 2px 10px;
	border-radius: 100px;
	font-size: 13px;
	font-family: 'Outfit', sans-serif;
	line-height: 1.6;
	white-space: nowrap;
}
.ne-btn:hover { background: rgba(255,255,255,.08); color: #f0f2f0; }
.ne-btn.active { background: #00c562; color: #fff; }
.ne-pill { font-size: 11px; padding: 2px 10px; letter-spacing: .3px; }
.ne-sep { color: #889688; margin: 0 4px; user-select: none; }
.ne-spinner { display: inline-flex; align-items: center; gap: 2px; margin: 0 2px; }
.ne-spinner .ne-btn { font-size: 16px; padding: 0 6px; line-height: 1.8; min-width: 22px; }
.ne-size-label { font-size: 11px; color: #a8b0a8; min-width: 28px; text-align: center; user-select: none; }
.ne-color-wrap { position: relative; }
.ne-color-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 4px;
	background: #222823;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 10px;
	padding: 8px;
	z-index: 100;
	width: max-content;
}
.ne-color-panel.open { display: flex; flex-wrap: wrap; gap: 4px; }
.ne-color-swatch {
	width: 22px; height: 22px; border-radius: 50%;
	border: 2px solid transparent; cursor: pointer;
}
.ne-color-swatch:hover { border-color: #00c562; }
.ne-color-remove {
	border-color: #889688; font-size: 10px;
	display: flex; align-items: center; justify-content: center;
	color: #889688; background: #131715;
}

/* Editor body */
.ne-editor {
	min-height: 66px;
	padding: 8px 12px;
	border-radius: 0 0 8px 8px;
	border: 1px solid rgba(255,255,255,.08);
	border-top: none;
	background: #131715;
	color: #f0f2f0;
	font-size: 14px;
	outline: none;
	line-height: 1.5;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.ne-editor:focus { border-color: #00c562; }
.ne-editor:empty:before {
	content: attr(data-placeholder);
	color: #889688;
	pointer-events: none;
}
.ne-editor ul { margin: 4px 0; padding-left: 20px; }
.ne-editor p { margin: 4px 0; }
.ne-editor div[style*="text-align"] { margin: 4px 0; }

/* Character counter */
.ne-counter {
	text-align: right;
	font-size: 11px;
	color: #889688;
	padding: 2px 4px 4px 0;
}