/* Sticky Notes Editor */

.div-notes-container {
	display: flex;
	flex-direction: column;
	height: 0;
	min-height: 100%;
	background-color: var(--BG-base);
	box-sizing: border-box;
}

.div-notes-container .div-notes-scroll {
	flex: 1;
	min-height: 0;
	height: auto;
	align-self: stretch;
	border: none;
}

/* Board */

.div-notes-editor {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	padding: var(--DM-margin-q);
	padding-left: calc(var(--side-drawer-grip-size, 0pt) + var(--DM-margin-q));
	box-sizing: border-box;
}

.div-notes-body:has(.div-notes-thinking.pinned) .div-notes-editor {
	padding-left: var(--DM-margin-q);
}

/* Sticky toolbars: the control toolbar and the format toolbar ride above
   the board while it scrolls, styled like the document editor's toolbars. */
.div-notes-sticky {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: var(--DM-margin-s);
	background-color: var(--BG-base);
	padding-bottom: var(--DM-margin-s);
}

.div-notes-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--DM-margin-q);
	background-color: var(--BG-panel);
	padding: var(--DM-margin-q);
}

.div-notes-toolbar-side {
	display: flex;
	align-items: center;
	gap: var(--DM-margin-q);
}

/* keep the search/sort/tag side pinned to the right, also when the
   toolbar wraps and it drops to its own line */
.div-notes-toolbar-side:last-child {
	margin-left: auto;
}

/* Compact controls sized to match the btn-compact buttons beside them.
   The selects opt out of the global select { width: 100% } so they hug
   their content. */
.div-notes-toolbar .prompt-style-input,
.div-tags-add .prompt-style-input {
	height: 16pt;
	font-size: 7.5pt;
	padding: 2px 6px;
	margin-bottom: 0;
	min-width: 0;
}

.div-notes-toolbar select {
	width: auto;
}

.div-notes-search-input {
	width: 17em;
}

/* Tag filter: a tag-icon button that opens a dropdown menu of the tags. */
.div-notes-tag-menu {
	position: relative;
}

.div-notes-tag-button {
	border-radius: var(--DM-margin-q);
}

.div-notes-tag-button.selected {
	background-color: var(--BG-panel2);
}

.div-notes-tag-dropdown {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 60;
	flex-direction: column;
	min-width: 8em;
	background-color: var(--BG-panel);
	border: 1pt solid var(--AC-btn);
	border-radius: var(--DM-margin-q);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
	padding: 2pt;
}

.div-notes-tag-dropdown.open {
	display: flex;
}

/* The per-note tag menu opens fixed to its button (positioned by JS) so it
   escapes the note card's overflow clipping and scrolling. */
.div-notes-tag-dropdown-note {
	position: fixed;
	top: auto;
	right: auto;
}

.div-notes-tag-dropdown button {
	text-align: left;
	border: none;
	background: none;
	padding: 4pt 8pt;
	font-size: 7.5pt;
	line-height: 1.4em;
	cursor: pointer;
	color: var(--FG-base);
	white-space: nowrap;
}

.div-notes-tag-dropdown button:hover {
	background-color: var(--BG-panel2);
}

.div-notes-tag-dropdown button.selected {
	background-color: var(--BG-panel2);
	font-weight: bold;
}

/* Buttons on the format toolbar; the container recipe is shared with the
   document editor's toolbar in document.css. */
.div-notes-format-toolbar button {
	width: 18pt;
	height: 18pt;
	padding: 0;
	line-height: 18pt;
	text-align: center;
	border: none;
	background-color: var(--BG-base);
	border-radius: var(--DM-margin-q);
}

.div-notes-format-toolbar button.selected {
	background-color: var(--BG-panel2);
}

/* Board: multi-column layout, so each note keeps its own height and slots
   into the columns instead of stretching to the tallest note of a row. */
.div-notes-board {
	flex: 1;
	columns: 240px;
	column-gap: var(--DM-margin-q);
}

.div-notes-empty {
	column-span: all;
	opacity: 0.6;
	text-align: center;
	padding: var(--DM-margin-h) 0;
}

/* Subdued dashed buttons: the list starter, the board's archive toggle, and
   the completed-section drop target. Extras (spanning, sizing) stay in each
   button's own rule below. The .div-notes-board/.div-notes-items prefixes
   out-specify layout.css's container button rule, which would otherwise
   flatten these to the solid chrome border. */
.div-notes-board .div-notes-archive-toggle,
.div-notes-items .div-notes-items-empty,
.div-notes-items .div-notes-items-done.empty {
	border: 1pt dashed var(--AC-btn);
	background: none;
	border-radius: var(--DM-margin-q);
	padding: 4pt 0;
	cursor: pointer;
}

.div-notes-archive-toggle:hover,
.div-notes-items-empty:hover {
	opacity: 0.8;
}

/* Full-width subdued button closing the unarchived notes; archived notes
   render below it while shown. Block-level so column-span: all applies. */
.div-notes-archive-toggle {
	display: block;
	column-span: all;
	width: 100%;
	margin-bottom: var(--DM-margin-q);
	opacity: 0.5;
}

.div-notes-items-empty {
	width: 100%;
	opacity: 0.5;
}

/* Note card: wraps vertically around its content; the full-screen overlay
   offers the unconstrained reading and editing surface. */

.div-notes-note {
	display: flex;
	flex-direction: column;
	gap: var(--DM-margin-s);
	background-color: var(--BG-panel);
	border: 1pt solid var(--AC-btn);
	border-radius: var(--DM-margin-q);
	padding: var(--DM-margin-q);
	box-sizing: border-box;
	/* keep each card in one column piece and space it from the note below */
	break-inside: avoid;
	margin-bottom: var(--DM-margin-q);
}

.div-notes-note.archived {
	opacity: 0.6;
	border-style: dashed;
}

.div-notes-note-head {
	display: flex;
	gap: var(--DM-margin-s);
	align-items: center;
	/* shaded with the selected-conversation highlight, bleeding into the
	   card padding so the underline runs edge to edge */
	background-color: var(--BG-panel2);
	border-bottom: 1pt solid var(--BD-panel);
	border-radius: var(--DM-margin-q) var(--DM-margin-q) 0 0;
	margin: calc(-1 * var(--DM-margin-q)) calc(-1 * var(--DM-margin-q)) 0;
	padding: var(--DM-margin-q) var(--DM-margin-q) var(--DM-margin-s);
}

.div-notes-select {
	flex: 0 0 auto;
}

.div-notes-note-title {
	flex: 1;
	font-weight: bold;
	outline: none;
	min-height: 1.2em;
	overflow-wrap: anywhere;
}

/* Placeholders for the empty title and text editors. */
.div-notes-note-title:empty::before,
.div-notes-overlay-title:empty::before,
.div-notes-note-text:empty::before {
	content: attr(data-placeholder);
	opacity: 0.4;
	pointer-events: none;
}

.div-notes-note-actions {
	display: flex;
	gap: var(--DM-margin-s);
	flex: 0 0 auto;
}

.div-notes-note-text {
	outline: none;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
	min-height: 2em;
}

/* Checklist items reuse the choices editor's item pattern: editable text
   with insert buttons between items, a checkbox, and a grip to drag. */

.div-notes-items {
	display: flex;
	flex-direction: column;
	border-top: 1pt solid var(--BD-panel-hairline);
	padding-top: var(--DM-margin-s);
}

/* Subdued full-width starter button on notes without items. */
.div-notes-item {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	padding: 1pt 0;
}

.div-notes-item input[type="checkbox"] {
	flex: 0 0 auto;
	position: relative;
	top: 2pt;
}

.div-notes-item-text {
	flex: 1;
	outline: none;
	overflow-wrap: anywhere;
	min-height: 1.2em;
}

/* Note reorder: the head grip starts a board drag. The drop targets are
   absolutely positioned against their card (above and below it), so they
   follow the note and never disturb the layout. They stay inside the card
   box: extending past its top edge trips the multicol balancer and reflows
   the whole board mid-drag. */
.div-notes-note {
	position: relative;
}

.div-notes-note-grip {
	cursor: grab;
}

.div-notes-insert-note {
	position: absolute;
	left: 0;
	right: 0;
	height: 0;
	padding: 0;
	border: none;
	background: transparent;
	pointer-events: none;
}

.div-notes-insert-note.above {
	top: 0;
}

.div-notes-insert-note.below {
	bottom: 0;
}

.div-notes-board.dragging-notes .div-notes-insert-note {
	pointer-events: auto;
	height: 9px;
	background-color: var(--AC-trim-tint-mild);
}

.div-notes-board.dragging-notes .div-notes-insert-note.drop-target {
	background-color: var(--AC-trim-tint-heavy);
	box-shadow: 0 0 6px var(--AC-trim);
}

/* Completed tasks: dimmed below the pending list, and the drop zone that
   checks a dragged item off. Without completed items the section only
   appears as a dashed target while a drag is underway. */
.div-notes-items-done {
	display: flex;
	flex-direction: column;
	margin-top: var(--DM-margin-s);
}

.div-notes-items-done:not(.empty) {
	border-top: 1pt solid var(--BD-panel-hairline);
	padding-top: var(--DM-margin-s);
}

.div-notes-items-done.empty {
	display: none;
	padding: var(--DM-margin-s);
	opacity: 0.6;
}

.div-notes-items.dragging-items .div-notes-items-done.empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3em;
}

.div-notes-items-done.drop-target {
	border-color: var(--AC-trim);
	box-shadow: 0 0 6px var(--AC-trim);
}

.div-notes-items-done-label {
	font-size: 7pt;
	opacity: 0.5;
	margin-bottom: var(--DM-margin-s);
}

.div-notes-items-done.empty .div-notes-items-done-label {
	margin-bottom: 0;
}

.div-notes-item.done {
	opacity: 0.45;
}

/* Note tag pills: only the note's assigned tags, plus the compact tag
   menu button (aligned right) that assigns tags from the vocabulary. */
.div-notes-note-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--DM-margin-s);
	border-top: 1pt solid var(--BD-panel-hairline);
	padding-top: var(--DM-margin-s);
}

.div-notes-note-tags .div-notes-tag-menu {
	margin-left: auto;
}

.div-notes-tag-pill {
	display: inline-flex;
	align-items: center;
}

.div-notes-tag-empty {
	padding: 4pt 8pt;
	font-size: 7.5pt;
	opacity: 0.6;
	white-space: nowrap;
}

/* Full-screen overlay editor: header and thinking column mirror the code
   analysis overlay. */

.div-notes-overlay-title {
	margin: 0;
	font-size: 100%;
	text-align: center;
	overflow-wrap: anywhere;
	outline: none;
	min-height: 1.2em;
}

/* Framing of the thinking column; the flex/scroll core is shared with the
   code overlay's side panel in overlays.css. */
.div-notes-overlay-thinking {
	background-color: var(--BG-base);
	border: 1pt solid var(--BD-panel-l);
	border-radius: var(--DM-margin-q);
	padding: var(--DM-margin-q);
}

.div-notes-overlay-prompt {
	display: flex;
	align-items: center;
	gap: var(--DM-margin-q);
	padding: var(--DM-margin-q) var(--DM-margin-h);
	border-top: 1pt solid var(--BD-panel);
	background-color: var(--BG-panel);
}

.div-notes-overlay-prompt .prompt-style-input {
	flex: 1;
	height: 18pt;
	min-width: 0;
	margin-bottom: 0;
}

.span-notes-overlay-state {
	opacity: 0.6;
	white-space: nowrap;
}

/* The bare note card in the overlay: no border, no header — the overlay
   chrome provides title, read-aloud, and close. */
.div-notes-overlay-body .div-notes-note {
	width: 100%;
	max-height: none;
	overflow: visible;
	min-height: 0;
	border: none;
	background: none;
	padding: 0;
}

.div-notes-overlay-body .div-notes-note-tags {
	margin-top: var(--DM-margin-q);
}

.div-notes-overlay-body .div-notes-format-toolbar {
	display: flex;
	margin-bottom: var(--DM-margin-q);
}

/* Tag manager (Tags tab) */

.div-tags-manager {
	display: flex;
	flex-direction: column;
	gap: var(--DM-margin-q);
	padding: var(--DM-margin-q);
	padding-left: calc(var(--side-drawer-grip-size, 0pt) + var(--DM-margin-q));
}

.div-tags-add {
	display: flex;
	gap: var(--DM-margin-q);
	align-items: center;
}

.div-tags-add .prompt-style-input {
	flex: 1;
	min-width: 8em;
}

.div-tags-list {
	display: flex;
	flex-direction: column;
}

.div-tags-row {
	display: flex;
	align-items: center;
	gap: var(--DM-margin-q);
	background-color: var(--BG-panel);
	border: 1pt solid var(--BD-panel);
	border-radius: var(--DM-margin-q);
	padding: var(--DM-margin-s) var(--DM-margin-q);
	margin-bottom: var(--DM-margin-s);
}

.div-tags-name {
	font-weight: bold;
}

.div-tags-count {
	flex: 1;
	opacity: 0.6;
}

/* Subdued remove button: shaded, with a dim outline. */
.div-tags-remove {
	height: 14pt;
	line-height: 14pt;
	padding: 0 4pt;
	background-color: var(--BG-panel2);
	border: 1pt solid color-mix(in srgb, var(--BD-input) 40%, transparent);
	border-radius: var(--DM-margin-q);
}