styles.css

/* ============================================
   Notes Bridge — Settings Styles
   ============================================ */

/* ---------- Section Layout ---------- */
.aie-settings-section {
	margin-bottom: 2.5rem;
}

.aie-settings-section > .setting-item-heading {
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--background-modifier-border);
}

.aie-settings-section > .setting-item-heading .setting-item-name {
	font-size: 1.15em;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--text-normal);
}

/* ---------- Providers Section ---------- */
.aie-providers-intro {
	margin: 0 0 1.25rem 0;
	color: var(--text-muted);
	font-size: 0.9em;
	line-height: 1.6;
}

.aie-providers-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* ---------- Provider Cards ---------- */
.aie-provider-card {
	border: 1px solid var(--background-modifier-border);
	border-radius: 6px;
	background: var(--background-primary);
	overflow: hidden;
}

.aie-provider-card[open] {
	border-color: var(--background-modifier-border-hover);
}

/* Disabled provider cards get a muted look */
.aie-provider-card[data-enabled="false"] {
	opacity: 0.65;
}

/* ---------- Card Header / Summary ---------- */
.aie-provider-card summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	cursor: pointer;
	user-select: none;
	list-style: none;
}

.aie-provider-card summary::-webkit-details-marker {
	display: none;
}

.aie-provider-card summary:focus-visible {
	outline: 2px solid var(--interactive-accent);
	outline-offset: -2px;
}

/* Subtle hover affordance for the clickable card header */
.aie-provider-card summary {
	transition: background-color 80ms ease;
}
.aie-provider-card summary:hover {
	background-color: var(--background-modifier-hover);
}

/* Summary content (icon + title + status) */
.aie-provider-summary-content {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
	min-width: 0;
}

/* Provider icon wrapper */
.aie-provider-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 4px;
	background: var(--background-secondary);
	color: var(--text-muted);
	flex-shrink: 0;
}

.aie-provider-icon svg {
	width: 1.125rem;
	height: 1.125rem;
	stroke-width: 2;
}

/* Provider info wrapper (title container) */
.aie-provider-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

/* Provider title */
.aie-provider-title {
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--text-normal);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Expand / Collapse Chevron ---------- */
.aie-provider-expand-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--text-muted);
	flex-shrink: 0;
}

.aie-provider-card[open] .aie-provider-expand-icon {
	transform: rotate(180deg);
	color: var(--text-normal);
}

/* ---------- Provider Body ---------- */
.aie-provider-body {
	border-top: 1px solid var(--background-modifier-border);
	background: var(--background-primary-alt);
}

/* ---------- Settings within Cards ---------- */
.aie-provider-body > .setting-item {
	padding: 0.75rem 1rem;
	margin: 0;
	border-bottom: 1px solid var(--background-modifier-border);
}

.aie-provider-body > .setting-item:last-child {
	border-bottom: none;
}

/* Setting item name and description within cards */
.aie-provider-body .setting-item-name {
	font-weight: 500;
	font-size: 0.9em;
}

.aie-provider-body .setting-item-description {
	font-size: 0.82em;
	color: var(--text-muted);
	line-height: 1.4;
}

/* ---------- Intro Paragraphs inside Cards ---------- */
.aie-provider-body > p {
	margin: 0;
	padding: 0.75rem 1rem;
	color: var(--text-muted);
	font-size: 0.85em;
	line-height: 1.6;
	border-bottom: 1px solid var(--background-modifier-border);
}

.aie-provider-body > p a {
	color: var(--text-accent);
	text-decoration: none;
	font-weight: 500;
}

/* ---------- Inputs and Selects ---------- */
.aie-provider-body input[type="text"],
.aie-provider-body input[type="password"],
.aie-provider-body textarea,
.aie-provider-body select {
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	background: var(--background-primary);
	color: var(--text-normal);
}

.aie-provider-body input[type="text"]:focus,
.aie-provider-body input[type="password"]:focus,
.aie-provider-body textarea:focus,
.aie-provider-body select:focus {
	border-color: var(--interactive-accent);
	box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
	outline: none;
}

/* ---------- Textarea in Cards ---------- */
.aie-provider-body textarea {
	font-family: var(--font-monospace);
	font-size: 0.85em;
	min-height: 4rem;
}

/* ---------- Dropdown in Cards ---------- */
.aie-provider-body select {
	cursor: pointer;
}

/* ---------- Section Card ---------- */
.aie-section-card {
	border: 1px solid var(--background-modifier-border);
	border-radius: 6px;
	background: var(--background-primary);
	overflow: hidden;
}

/* ---------- General Settings (non-provider) ---------- */
.aie-section-card > .setting-item {
	padding: 0.625rem 1rem;
	margin: 0;
	border-bottom: 1px solid var(--background-modifier-border);
}

.aie-section-card > .setting-item:last-of-type {
	border-bottom: none;
}

/* ---------- Remote Target Selector (folder/notebook/knowledge-base picker) ---------- */
/* Value span + Choose/Clear buttons in a provider card control area.
   Long target names truncate with an ellipsis (full name still readable
   via the span's title tooltip), and the buttons never get pushed
   off-screen, even on narrow settings panels. */
.aie-target-control {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: flex-end;
	min-width: 0;
}

.aie-remote-target-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 12rem;
	min-width: 0;
	color: var(--text-muted);
	font-size: 0.85em;
}

.aie-target-control button {
	flex-shrink: 0;
}

/* Keep text inputs within provider cards from overflowing on narrow panels */
.aie-provider-body .setting-item-control input[type="text"],
.aie-provider-body .setting-item-control input[type="password"] {
	min-width: 0;
	max-width: 100%;
}

/* ---------- Enabled toggle in the provider card header ---------- */
.aie-provider-enabled {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: 0.25rem;
	cursor: pointer;
}

/* Incomplete-configuration hint: a scannable warning badge under the title */
.aie-provider-status {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.2rem;
	padding: 0.1rem 0.45rem;
	border-radius: 10px;
	font-size: 0.72em;
	line-height: 1.4;
	align-self: flex-start;
}
.aie-provider-status--incomplete {
	color: var(--text-warning, var(--text-muted));
	background: rgba(180, 130, 0, 0.14);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
	.aie-provider-status--incomplete {
		background: color-mix(in srgb, var(--text-warning, var(--text-muted)) 14%, transparent);
	}
}
.aie-provider-status--incomplete::before {
	content: "⚠";
	font-size: 0.95em;
	line-height: 1;
}

/* Hide a control (e.g. the target-row Clear button) without inline styles */
.aie-is-hidden { display: none !important; }