.astro-composer-title-input {
	width: 100%;
	margin-bottom: 16px;
	padding: 8px;
}

.astro-composer-button-container {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 16px;
}

/* Cursor overrides for plugin buttons. Specificity is boosted by chaining the
   class with itself so the rule beats Obsidian's default .modal button cursor
   through cascade alone. */
.astro-composer-button-container button.astro-composer-button-container button,
.astro-composer-button-container button {
	cursor: default;
}

.astro-composer-cancel-button.astro-composer-cancel-button,
.astro-composer-create-button.astro-composer-create-button {
	padding: 6px 12px;
	border-radius: 4px;
	cursor: default;
}

.astro-composer-create-button.astro-composer-create-button.mod-cta {
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
}

.astro-composer-create-button.astro-composer-create-button.mod-cta:hover {
	background-color: var(--interactive-accent-hover);
}

.astro-composer-template-textarea {
	height: 300px; /* Adjusted for 5-10 lines of properties */
	width: 100%;
	padding: 8px;
	resize: vertical; /* Allow vertical resizing */
	margin-bottom: 16px;
}

.astro-composer-modal {
	padding: 20px;
	max-width: 500px;
	margin: 0 auto;
}

.astro-composer-modal h2 {
	margin-top: 0;
}

/* Custom Content Types Styling */
.custom-content-types-container {
	margin-top: 0;
}

.custom-content-type-item {
	border: 1px solid var(--background-modifier-border);
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 16px;
	background-color: var(--background-secondary);
}

.custom-content-type-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.custom-content-type-header .setting-item {
	margin-bottom: 0;
}

.custom-content-type-header .setting-item-name {
	font-weight: 600;
	color: var(--text-normal);
}

.custom-content-type-item .setting-item {
	margin-bottom: 12px;
}

.custom-content-type-item .setting-item:last-child {
	margin-bottom: 0;
}

/* Add spacing between settings in custom content types since we removed dividers */
.custom-content-type-settings > div {
	margin-bottom: 16px;
}

.custom-content-type-settings > div:last-child {
	margin-bottom: 0;
}

.custom-content-type-settings {
	transition: all 0.2s ease-in-out;
	padding-top: 12px;
}

.custom-content-type-settings[style*="none"] {
	opacity: 0;
	transform: translateY(-10px);
}

/* Mobile-specific improvements for Astro Composer modal */
@media (max-width: 768px) {
	/* iOS-friendly input sizing inside our modal */
	.modal .astro-composer-title-input {
		font-size: 16px; /* Prevents zoom on iOS */
		padding: 12px;
		border: 1px solid var(--background-modifier-border);
		border-radius: 4px;
	}

	/* Stack the modal button row vertically on narrow screens */
	.modal .astro-composer-button-container {
		flex-direction: column;
		gap: 12px;
	}

	.modal .astro-composer-cancel-button.astro-composer-cancel-button,
	.modal .astro-composer-create-button.astro-composer-create-button {
		width: 100%;
		padding: 12px;
		font-size: 16px;
		cursor: default;
	}
}

/* Mobile-positioned modal. The .astro-composer-mobile-modal class is added by
   the title modal TS when running on mobile, so we can rely on this class
   alone (no parent-matching selector required). The body-level specificity
   plus the class chain wins over Obsidian's default modal positioning. */
body .astro-composer-mobile-modal.astro-composer-mobile-modal {
	position: fixed;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	max-height: 50vh;
	overflow-y: auto;
	width: 90vw;
	max-width: 500px;
}

/* Settings UI utility classes */
.astro-composer-setting-container-visible {
	display: block;
}

.astro-composer-setting-container-hidden {
	display: none;
}

.astro-composer-custom-type-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.astro-composer-header-name {
	flex: 1;
	min-width: 0;
}

/* Collapse button. Doubled-class selector wins over default Obsidian button
   styling without needing the bang-important escape hatch. */
.astro-composer-collapse-button.astro-composer-collapse-button {
	background: transparent;
	border: none;
	padding: 4px;
	margin-right: 4px;
	cursor: default;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease;
	box-shadow: none;
}

.astro-composer-collapse-button.astro-composer-collapse-button:hover {
	background-color: var(--background-modifier-hover);
	color: var(--text-normal);
}

.astro-composer-collapse-button.astro-composer-collapse-button:active {
	background-color: var(--background-modifier-active);
}

.astro-composer-collapse-button svg {
	transition: transform 0.2s ease;
}

.astro-composer-collapse-button.is-collapsed svg {
	transform: rotate(-90deg);
}

/* Reorder buttons container */
.astro-composer-reorder-buttons {
	display: flex;
	flex-direction: row;
	gap: 4px;
	margin-right: 8px;
	align-items: center;
}

/* Reorder buttons - minimal icon-only style. Same doubled-class specificity
   trick as the collapse button. */
.astro-composer-reorder-button.astro-composer-reorder-button {
	background: transparent;
	border: none;
	padding: 4px;
	cursor: default;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease;
	line-height: 1;
	opacity: 0.6;
	box-shadow: none;
}

.astro-composer-reorder-button.astro-composer-reorder-button:hover:not(:disabled) {
	background-color: var(--background-modifier-hover);
	color: var(--text-normal);
	opacity: 1;
}

.astro-composer-reorder-button.astro-composer-reorder-button:active:not(:disabled) {
	background-color: var(--background-modifier-active);
}

.astro-composer-reorder-button:disabled {
	opacity: 0.2;
	cursor: default;
}

.astro-composer-reorder-button svg {
	width: 16px;
	height: 16px;
}

.astro-composer-remove-setting {
	border-top: none;
}

.astro-composer-add-button {
	border-top: none;
}

/* Floating button container - no settings background, right-aligned */
.astro-composer-add-button-container {
	display: flex;
	justify-content: flex-end;
	margin-top: 16px;
	margin-bottom: 0;
	padding: 0;
	background: transparent;
	border: none;
}

.astro-composer-add-button-container button {
	margin: 0;
}

/* Settings tab - hidden setting elements */
/* Only hide the setting item info elements, not nested ones inside content types */
.astro-composer-setting-hidden-elements > .setting-item-info > .setting-item-name,
.astro-composer-setting-hidden-elements > .setting-item-info > .setting-item-description,
.astro-composer-setting-hidden-elements > .setting-item-control {
	display: none;
}

.astro-composer-setting-hidden-elements {
	border-top: none;
	padding-top: 0;
	padding-bottom: 0;
}

.astro-composer-setting-container-full-width {
	display: block;
	width: 100%;
}

/* Toggle classes for custom-types containers. Class chain plus body scope
   wins specificity over the parent .astro-composer-setting-hidden-elements
   rules that otherwise hide all setting children. */
body .astro-composer-custom-types-container-visible.astro-composer-custom-types-container-visible {
	display: block;
	width: 100%;
	visibility: visible;
}

body .astro-composer-setting-hidden-elements .custom-content-types-container {
	display: block;
	visibility: visible;
}

body .custom-content-types-container .custom-content-type-item {
	display: block;
	visibility: visible;
}

/* Conflict warning styles */
.astro-composer-conflict-warning {
	color: var(--text-warning);
	font-size: 0.9em;
	margin-top: 0.5em;
}

.astro-composer-conflict-warning.hidden {
	display: none;
}

/* Help button replacement */
/* No special display needed - inherits from parent flex container */

/* Ribbon context menu hiding is handled entirely in TS — `removeRibbonIconsFromContextMenu`
   walks the menu via MutationObserver and removes the items. As a belt-and-suspenders
   fallback (in case the menu paints for a frame before JS runs), the TS also tags the
   item with this marker class. The doubled-class selector wins specificity against
   Obsidian's default menu rules without needing !important. */
body .astro-composer-hidden-menu-item.astro-composer-hidden-menu-item {
	display: none;
}

/* Help button hiding. The replacement is built in TS by `syncHelpButton`, which also
   tags the original button with this marker class so we can hide it without :has(). */
body .astro-composer-original-help-button.astro-composer-original-help-button {
	display: none;
}