/*
 * Tf_DevHub_Co_Pilot — persistent sidebar rail on the project hub.
 *
 * Three-column layout: project nav (existing left sidebar) + Co-pilot rail
 * (NEW, adjacent on the left) + main content (right). Diverges from common
 * co-pilot patterns (right rail in Linear / Cursor / Copilot) per the
 * operator's locked decision — action surfaces grouped on the left, main
 * content owns the right of the viewport.
 *
 * Loaded only on the themefactory_project term archive (project hub). All
 * other DevHub surfaces are untouched per the D4 scope lock.
 *
 * @since plan #188 step 3
 */

/* ── Co-pilot rail container ─────────────────────────────────────────── */

.tf-copilot {
	width: 380px;
	flex-shrink: 0;
	background: #15181c;
	border-right: 1px solid #2a2d31;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* No admin-bar offset on the rail itself — the .devhub-hub shell carries
   the offset via height: calc(100vh - 32px). The rail just fills its
   column. */

.tf-copilot__header {
	padding: 18px 20px;
	border-bottom: 1px solid #2a2d31;
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex-shrink: 0;
}

.tf-copilot__title {
	font-size: 13px;
	font-weight: 600;
	color: #68de7c;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tf-copilot__project {
	font-size: 14px;
	color: #888;
}

/* The mount target — AI-Assist's sidebar conversation renders inside this
   element via render_mode = 'sidebar'. Hidden until the operator engages;
   the empty state below sits adjacent and is hidden once the conversation
   takes over (JS swap). */

.tf-copilot__mount {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	display: none;
}

.tf-copilot.is-engaged .tf-copilot__mount {
	display: flex;
	flex-direction: column;
}

.tf-copilot.is-engaged .tf-copilot__empty {
	display: none;
}

/* ── Empty state — greeting + chips + free-form input ────────────────── */

.tf-copilot__empty {
	flex: 1 1 auto;
	padding: 20px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	color: #d4d4d4;
}

.tf-copilot__greeting {
	font-size: 14px;
	line-height: 1.5;
	color: #d4d4d4;
	margin: 0;
}

.tf-copilot__chips {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tf-copilot__chip {
	display: block;
	width: 100%;
	text-align: left;
	background: #1f2429;
	border: 1px solid #2f3439;
	color: #d4d4d4;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	font-family: inherit;
}

.tf-copilot__chip:hover,
.tf-copilot__chip:focus-visible {
	background: rgba(104, 222, 124, 0.08);
	border-color: rgba(104, 222, 124, 0.5);
	color: #68de7c;
	outline: none;
}

.tf-copilot__compose {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tf-copilot__compose-actions {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.tf-copilot__attach {
	background: transparent;
	border: 1px solid #2f3439;
	color: #d4d4d4;
	font-size: 12px;
	padding: 8px 12px;
	border-radius: 6px;
	cursor: pointer;
	font-family: inherit;
	transition: border-color 0.15s ease, color 0.15s ease;
	flex: 0 0 auto;
}

.tf-copilot__attach:hover,
.tf-copilot__attach:focus-visible {
	border-color: rgba(104, 222, 124, 0.5);
	color: #68de7c;
	outline: none;
}

.tf-copilot__compose .tf-copilot__submit {
	flex: 1 1 auto;
}

.tf-copilot__attached {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(104, 222, 124, 0.08);
	border: 1px solid rgba(104, 222, 124, 0.25);
	color: #d4d4d4;
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 6px;
}

.tf-copilot__attached-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tf-copilot__attached-clear {
	background: transparent;
	border: 0;
	color: #888;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.tf-copilot__attached-clear:hover,
.tf-copilot__attached-clear:focus-visible {
	color: #ff6b6b;
	outline: none;
}

.tf-copilot__input {
	background: #1f2429;
	border: 1px solid #2f3439;
	color: #d4d4d4;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 13px;
	font-family: inherit;
	resize: vertical;
	min-height: 64px;
}

.tf-copilot__input:focus {
	outline: none;
	border-color: rgba(104, 222, 124, 0.6);
}

.tf-copilot__submit {
	background: #68de7c;
	border: 0;
	color: #15181c;
	font-weight: 600;
	font-size: 13px;
	padding: 10px 14px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.tf-copilot__submit:hover,
.tf-copilot__submit:focus-visible {
	background: #7be88f;
	outline: none;
}

.tf-copilot__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Rail-native chrome overrides for the mounted AI-Assist conversation
   ──────────────────────────────────────────────────────────────────────
   When the Co-pilot mounts inside the rail, its default modal chrome
   (header with "Add co-pilot turn — assisted" title + cost badge,
   footer with approve/cancel buttons) looks like a squashed wizard
   modal rather than a native rail conversation. These overrides
   suppress the modal chrome and restyle the thread + input to match
   the dark rail aesthetic established by the empty state below.

   Scoped to `.tf-copilot` so future sidebar consumers don't inherit. */

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-header {
	display: none;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-footer {
	display: none;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-modal-inner {
	background: transparent;
	color: #d4d4d4;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-body {
	padding: 0;
	display: block;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-left {
	border-right: 0;
	width: 100%;
	flex: 1 1 auto;
	height: 100%;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-thread {
	background: transparent;
	padding: 16px 18px;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-turn {
	border: 0;
	max-width: 100%;
	font-size: 13px;
	line-height: 1.5;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-turn--ai {
	background: #1f2429;
	color: #e0e0e0;
	border: 1px solid #2f3439;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-turn--operator {
	background: rgba(104, 222, 124, 0.08);
	color: #e0e0e0;
	border: 1px solid rgba(104, 222, 124, 0.25);
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-turn--notice {
	background: transparent;
	border: 1px dashed #3a3f44;
	color: #888;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-turn-role {
	color: #888;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-input-row {
	background: #15181c;
	border-top: 1px solid #2a2d31;
	padding: 12px 14px;
	gap: 8px;
	/* Textarea on top, buttons (Send, future Attach) stacked below as a
	   row of their own — the rail is too narrow to keep them inline
	   alongside the textarea without squashing one or the other. */
	flex-direction: column;
	align-items: stretch;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-input-row .camcom-aiassist-input {
	width: 100%;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-input {
	background: #1f2429;
	border: 1px solid #2f3439;
	color: #d4d4d4;
	border-radius: 6px;
	padding: 10px 12px;
	min-height: 56px;
	font-size: 13px;
	font-family: inherit;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-input:focus {
	outline: none;
	border-color: rgba(104, 222, 124, 0.6);
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-input:disabled {
	background: #1a1d21;
	color: #555;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-send {
	background: #68de7c;
	border: 0;
	color: #15181c;
	font-weight: 600;
	font-size: 13px;
	padding: 10px 14px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s ease;
	white-space: nowrap;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-send:hover,
.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-send:focus-visible {
	background: #7be88f;
	outline: none;
}

.tf-copilot .camcom-aiassist-modal--sidebar .camcom-aiassist-send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Connections tab (plan #188 step 8 — per-project remote sites) ─── */

.tf-connections {
	max-width: 920px;
}

/* Env control row at the top of the connections tab — explicit
   project-environment dropdown (Development / Production). Changing
   it persists to the project's termmeta and refreshes the tab. */

.tf-connections__env-control {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	padding: 12px 16px;
	background: #1a1d21;
	border: 1px solid #2a2d31;
	border-radius: 8px;
}

.tf-connections__env-label {
	color: #d4d4d4;
	font-size: 13px;
	font-weight: 600;
}

.tf-connections__env-select {
	background: #1f2429;
	border: 1px solid #2f3439;
	color: #d4d4d4;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
}

.tf-connections__env-select:focus {
	outline: none;
	border-color: rgba(104, 222, 124, 0.6);
}

.tf-connections__env-status {
	font-size: 12px;
	color: #666;
	margin-left: auto;
}

.tf-connections__env-status[data-kind="success"] {
	color: #68de7c;
}

.tf-connections__env-status[data-kind="error"] {
	color: #ff6b6b;
}

.tf-connections__env-status[data-kind="pending"] {
	color: #d4d4d4;
}

.tf-connections__intro {
	color: #d4d4d4;
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 24px;
}

.tf-connections__intro strong {
	color: #68de7c;
	font-weight: 600;
}

.tf-connections__group {
	margin-bottom: 28px;
	background: #1a1d21;
	border: 1px solid #2a2d31;
	border-radius: 8px;
	padding: 16px 20px;
}

.tf-connections__group-header {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #2a2d31;
}

.tf-connections__group-title {
	color: #e0e0e0;
	font-size: 15px;
	font-weight: 600;
	margin: 0;
	letter-spacing: -0.01em;
}

.tf-connections__group-count {
	color: #888;
	font-size: 12px;
	background: rgba(255, 255, 255, 0.04);
	padding: 2px 8px;
	border-radius: 8px;
}

.tf-connections__group-empty {
	color: #666;
	font-size: 13px;
	font-style: italic;
	margin: 4px 0 0;
}

/* Locked opposite-env section — visible (so the operator can clean
   up legacy entries) but visibly subdued; no add form. */

.tf-connections__group--locked {
	opacity: 0.6;
	background: rgba(255, 255, 255, 0.01);
}

.tf-connections__group-lock {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	opacity: 0.8;
}

.tf-connections__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tf-connections__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.02);
	border-radius: 6px;
}

.tf-connections__item-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.tf-connections__item-name {
	color: #e0e0e0;
	font-size: 14px;
	font-weight: 500;
}

.tf-connections__item-url {
	color: #888;
	font-size: 12px;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tf-connections__item-url:hover,
.tf-connections__item-url:focus-visible {
	color: #68de7c;
	outline: none;
}

.tf-connections__item-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.tf-connections__item-user {
	color: #666;
	font-size: 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.tf-connections__item-remove {
	background: transparent;
	border: 0;
	color: #555;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	transition: color 0.15s ease, background 0.15s ease;
}

.tf-connections__item-remove:hover,
.tf-connections__item-remove:focus-visible {
	color: #ff6b6b;
	background: rgba(255, 107, 107, 0.08);
	outline: none;
}

.tf-connections__add {
	background: #1a1d21;
	border: 1px solid #2a2d31;
	border-radius: 8px;
	padding: 20px;
}

.tf-connections__add-title {
	color: #e0e0e0;
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 16px;
}

.tf-connections__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tf-connections__form-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tf-connections__form-label {
	color: #d4d4d4;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.tf-connections__form-input {
	background: #1f2429;
	border: 1px solid #2f3439;
	color: #d4d4d4;
	padding: 9px 12px;
	border-radius: 6px;
	font-size: 13px;
	font-family: inherit;
}

.tf-connections__form-input:focus {
	outline: none;
	border-color: rgba(104, 222, 124, 0.6);
}

.tf-connections__form-hint {
	color: #666;
	font-size: 11px;
	margin-top: 2px;
}

.tf-connections__form-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.tf-connections__form-submit {
	background: #68de7c;
	border: 0;
	color: #15181c;
	font-weight: 600;
	font-size: 13px;
	padding: 10px 18px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.tf-connections__form-submit:hover,
.tf-connections__form-submit:focus-visible {
	background: #7be88f;
	outline: none;
}

.tf-connections__form-status {
	font-size: 12px;
	color: #666;
}

.tf-connections__form-status[data-kind="success"] {
	color: #68de7c;
}

.tf-connections__form-status[data-kind="error"] {
	color: #ff6b6b;
}

.tf-connections__form-status[data-kind="pending"] {
	color: #d4d4d4;
}

/* ── Highlight-on-land animation (plan #188 step 7) ──────────────────── */

@keyframes tf-main-just-refreshed {
	0%   { box-shadow: inset 0 0 0 0 rgba(104, 222, 124, 0); }
	30%  { box-shadow: inset 0 0 0 3px rgba(104, 222, 124, 0.35); }
	100% { box-shadow: inset 0 0 0 0 rgba(104, 222, 124, 0); }
}

.devhub-hub__main.tf-main--just-refreshed {
	animation: tf-main-just-refreshed 1.1s ease-out;
}

/* ── Narrow-viewport collapse (D6 — plan #188 step 7) ────────────────── */

.tf-copilot-fab {
	display: none;
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 100;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #68de7c;
	color: #15181c;
	border: 0;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tf-copilot-fab:hover,
.tf-copilot-fab:focus-visible {
	transform: scale(1.05);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
	outline: none;
}

@media screen and (max-width: 1100px) {
	.tf-copilot {
		display: none;
	}

	.tf-copilot-fab {
		display: block;
	}

	/* Overlay mode — when the operator opens the rail via the floating
	   button, the rail shows on top of the main content rather than
	   pushing the layout. Pinned to the right side at narrow widths
	   (mobile / tablet pattern). */
	.tf-copilot.tf-copilot--overlay-open {
		display: flex;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(380px, 100vw);
		z-index: 99;
		box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45);
	}
}

/* ─── Gallery (plan #196 M2) ──────────────────────────────────────────
   Persistent strip at the bottom of the rail showing recent uploads +
   View-all expansion + per-item preview popover. Always visible —
   sits below the conversation mount and the empty state. */

.tf-copilot__gallery {
	flex-shrink: 0;
	padding: 12px 16px 14px;
	background: #15181c;
	border-top: 1px solid #2a2d31;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tf-copilot__gallery-header {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tf-copilot__gallery-title {
	color: #e0e0e0;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tf-copilot__gallery-count {
	color: #888;
	font-size: 11px;
}

.tf-copilot__gallery-actions {
	margin-left: auto;
	display: flex;
	gap: 6px;
}

.tf-copilot__gallery-upload,
.tf-copilot__gallery-viewall,
.tf-copilot__gallery-deleteall {
	background: #1f2429;
	border: 1px solid #2f3439;
	color: #d4d4d4;
	font-family: inherit;
	font-size: 11px;
	padding: 4px 9px;
	border-radius: 6px;
	cursor: pointer;
}

.tf-copilot__gallery-upload:hover,
.tf-copilot__gallery-upload:focus-visible,
.tf-copilot__gallery-viewall:hover,
.tf-copilot__gallery-viewall:focus-visible {
	background: #262b30;
	border-color: rgba(104, 222, 124, 0.4);
	color: #e0e0e0;
}

.tf-copilot__gallery-deleteall {
	border-color: rgba(255, 107, 107, 0.25);
	color: #ff8a8a;
}

.tf-copilot__gallery-deleteall:hover,
.tf-copilot__gallery-deleteall:focus-visible {
	background: rgba(255, 107, 107, 0.08);
	border-color: #ff6b6b;
	color: #ff6b6b;
}

.tf-copilot__gallery-upload:disabled,
.tf-copilot__gallery-deleteall:disabled {
	opacity: 0.5;
	cursor: progress;
}

.tf-copilot__gallery-status {
	font-size: 11px;
	padding: 6px 8px;
	border-radius: 5px;
	background: rgba( 255, 255, 255, 0.04 );
	color: #d4d4d4;
}

.tf-copilot__gallery-status[data-kind="success"] {
	color: #68de7c;
	background: rgba( 104, 222, 124, 0.08 );
}

.tf-copilot__gallery-status[data-kind="error"] {
	color: #ff6b6b;
	background: rgba( 255, 107, 107, 0.06 );
}

.tf-copilot__gallery-status[data-kind="pending"] {
	color: #d4d4d4;
}

.tf-copilot__gallery-strip {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
}

.tf-copilot__gallery-empty {
	grid-column: 1 / -1;
	color: #888;
	font-size: 11px;
	line-height: 1.45;
	padding: 8px 0 2px;
}

.tf-copilot__gallery-thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #0f1216;
	border: 1px solid #2a2d31;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
}

.tf-copilot__gallery-thumb:hover,
.tf-copilot__gallery-thumb:focus-visible {
	border-color: rgba(104, 222, 124, 0.4);
	outline: none;
}

.tf-copilot__gallery-thumb-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
}

.tf-copilot__gallery-thumb-code {
	position: absolute;
	bottom: 2px;
	left: 2px;
	background: rgba(0, 0, 0, 0.65);
	color: #e0e0e0;
	font-size: 10px;
	font-weight: 600;
	padding: 1px 5px;
	border-radius: 3px;
}

/* HTML [hidden] attribute defeat — `display: flex` on the rules below
   would normally override the browser's default `display: none` for
   [hidden] elements. Restore the hidden behaviour explicitly so the
   overlay + popover only show when JS removes the attribute. */

.tf-copilot__gallery-overlay[hidden],
.tf-copilot__gallery-popover[hidden] {
	display: none !important;
}

/* Expanded "view all" overlay — slides up from the rail bottom, covers
   the strip + chrome but leaves the conversation mount untouched above. */

.tf-copilot__gallery-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background: #15181c;
	z-index: 12;
	display: flex;
	flex-direction: column;
	border-top: 1px solid #2a2d31;
	overflow: hidden;
}

.tf-copilot {
	position: relative;
}

.tf-copilot__gallery-overlay-header {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid #2a2d31;
}

.tf-copilot__gallery-overlay-title {
	color: #e0e0e0;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tf-copilot__gallery-overlay-close {
	margin-left: auto;
	background: none;
	border: 0;
	color: #888;
	font-size: 18px;
	cursor: pointer;
	padding: 0 6px;
	line-height: 1;
}

.tf-copilot__gallery-overlay-close:hover,
.tf-copilot__gallery-overlay-close:focus-visible {
	color: #e0e0e0;
	outline: none;
}

.tf-copilot__gallery-overlay-grid {
	list-style: none;
	margin: 0;
	padding: 16px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	overflow-y: auto;
	flex: 1 1 auto;
}

/* Per-item preview popover — fixed on top of the rail, dismissable. */

.tf-copilot__gallery-popover {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	background: #1a1d21;
	border: 1px solid #2a2d31;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	z-index: 14;
	display: flex;
	flex-direction: column;
	max-height: 70%;
	overflow: hidden;
}

.tf-copilot__gallery-popover-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 1px solid #2a2d31;
}

.tf-copilot__gallery-popover-code {
	color: #68de7c;
	font-size: 12px;
	font-weight: 600;
}

.tf-copilot__gallery-popover-title {
	color: #e0e0e0;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tf-copilot__gallery-popover-close {
	margin-left: auto;
	background: none;
	border: 0;
	color: #888;
	font-size: 18px;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
}

.tf-copilot__gallery-popover-close:hover,
.tf-copilot__gallery-popover-close:focus-visible {
	color: #e0e0e0;
}

.tf-copilot__gallery-popover-preview {
	padding: 12px;
	overflow: auto;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tf-copilot__gallery-popover-preview img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.tf-copilot__gallery-popover-footer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid #2a2d31;
}

.tf-copilot__gallery-popover-meta {
	color: #888;
	font-size: 11px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tf-copilot__gallery-popover-delete {
	margin-left: auto;
	background: #1f2429;
	border: 1px solid rgba(255, 107, 107, 0.3);
	color: #ff6b6b;
	font-family: inherit;
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 5px;
	cursor: pointer;
}

.tf-copilot__gallery-popover-delete:hover,
.tf-copilot__gallery-popover-delete:focus-visible {
	border-color: #ff6b6b;
	background: rgba(255, 107, 107, 0.08);
}

.tf-copilot__gallery-popover-delete:disabled {
	opacity: 0.5;
	cursor: progress;
}