/* Camcom_AI_Assist modal — bare WordPress-admin-styled. Iterates with the
   broader Unified Admin UI project later; this is the minimum-viable shell. */

.camcom-aiassist-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	color: #1d2327;
	font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.camcom-aiassist-modal--hidden {
	display: none !important;
}

/* Embedded mode — surface fills the WP admin content area below the admin bar
   and to the right of the admin sidebar. Drops the dark backdrop, centring,
   the close X, and the card chrome. The --hidden modifier still wins (it's
   !important) so close() works the same in both modes.

   Position:fixed (rather than inline static) so the operator never has to
   page-scroll between the top of the conversation and the input at the
   bottom — the surface is always the full viewport's worth of working space.
   Host page chrome (titles, controls) sits behind the surface and reappears
   when the operator hits Cancel / Approve. */

.camcom-aiassist-modal--embedded {
	position: fixed;
	top: 32px;       /* WP admin bar */
	left: 160px;     /* WP admin sidebar (expanded) */
	right: 0;
	bottom: 0;
	background: transparent;
	padding: 0;
	display: flex;
	flex-direction: column;
	z-index: 100;    /* above page content, below WP admin sidebar (9990) + admin bar (99999) */
}

/* WP body classes for sidebar state. */
body.folded .camcom-aiassist-modal--embedded { left: 36px; }

@media screen and (max-width: 960px) {
	.camcom-aiassist-modal--embedded { left: 36px; }
}
@media screen and (max-width: 782px) {
	.camcom-aiassist-modal--embedded { top: 46px; left: 0; }
}

.camcom-aiassist-modal--embedded .camcom-aiassist-modal-inner {
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	max-height: none;
	border: 0;
	border-radius: 0;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
}

.camcom-aiassist-modal--embedded .camcom-aiassist-close {
	display: none;
}

.camcom-aiassist-modal--embedded .camcom-aiassist-body {
	/* Body fills the remaining space between the header + footer; internal
	   thread + entity-preview panes keep their own overflow:auto. */
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}

/* Sidebar mode — render_mode = 'sidebar'. Mounts into a host element provided
   by the caller (typically a persistent rail like the DevHub Co-pilot's left
   column adjacent to the project nav). Suppresses backdrop, centring, minimise
   X, and the right-hand entity-preview pane (sidebar is too narrow for two
   panes — results land in the page's main area, not in the rail). */

.camcom-aiassist-modal--sidebar {
	position: relative;
	inset: auto;
	z-index: auto;
	background: transparent;
	padding: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

.camcom-aiassist-modal--sidebar .camcom-aiassist-modal-inner {
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	max-height: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.camcom-aiassist-modal--sidebar .camcom-aiassist-close {
	display: none;
}

.camcom-aiassist-modal--sidebar .camcom-aiassist-body {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}

/* Single column in sidebar — thread + input only. The right pane (entity form
   / live preview) is suppressed because Co-pilot results land in the page's
   main area, not in the sidebar's narrow rail. */

.camcom-aiassist-modal--sidebar .camcom-aiassist-right {
	display: none;
}

.camcom-aiassist-modal--sidebar .camcom-aiassist-left {
	width: 100%;
	flex: 1 1 auto;
}

.camcom-aiassist-modal-inner {
	display: flex;
	flex-direction: column;
	width: min(1100px, 100%);
	max-width: 1100px;
	max-height: 100%;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.camcom-aiassist-header {
	padding: 14px 18px;
	border-bottom: 1px solid #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.camcom-aiassist-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.camcom-aiassist-close {
	background: transparent;
	border: 0;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #50575e;
	padding: 0 6px;
}

.camcom-aiassist-close:hover {
	color: #1d2327;
}

.camcom-aiassist-cost {
	margin-left: auto;
	margin-right: 14px;
	font-size: 12px;
	font-weight: 600;
	color: #50575e;
	padding: 3px 8px;
	border-radius: 10px;
	background: #f0f0f1;
	font-variant-numeric: tabular-nums;
}

.camcom-aiassist-cost--hint {
	color: #8a6d00;
	background: #fff3cd;
}

.camcom-aiassist-cost--cap {
	color: #8a1f11;
	background: #fde2e0;
}

.camcom-aiassist-body {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 0;
	height: min(640px, 75vh);
	border-bottom: 1px solid #e0e0e0;
}

.camcom-aiassist-left,
.camcom-aiassist-right {
	display: flex;
	flex-direction: column;
	min-height: 0; /* allow flex children to scroll */
}

.camcom-aiassist-left {
	border-right: 1px solid #e0e0e0;
}

.camcom-aiassist-thread {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px 18px;
	background: #fafafa;
}

.camcom-aiassist-turn {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 8px;
	max-width: 88%;
}

.camcom-aiassist-turn--ai {
	background: #f0f6fc;
	border: 1px solid #d2e3ef;
	margin-right: auto;
}

.camcom-aiassist-turn--operator {
	background: #fff;
	border: 1px solid #dcdcde;
	margin-left: auto;
}

.camcom-aiassist-pending-dots {
	display: inline-flex;
	gap: 5px;
	padding: 4px 2px 2px;
}

.camcom-aiassist-pending-dots span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #5b7589;
	display: inline-block;
	animation: camcom-aiassist-pending-bounce 1.2s infinite ease-in-out;
}

.camcom-aiassist-pending-dots span:nth-child(2) { animation-delay: 0.15s; }
.camcom-aiassist-pending-dots span:nth-child(3) { animation-delay: 0.30s; }

@keyframes camcom-aiassist-pending-bounce {
	0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
	30%           { opacity: 1;   transform: translateY(-3px); }
}

.camcom-aiassist-turn--notice {
	background: transparent;
	border: 1px dashed #c3c4c7;
	color: #50575e;
	font-style: italic;
	font-size: 13px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 92%;
	padding: 8px 12px;
}

.camcom-aiassist-turn-role {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #50575e;
	margin-bottom: 4px;
	font-weight: 600;
}

.camcom-aiassist-turn-content {
	white-space: pre-wrap;
}

.camcom-aiassist-input-row {
	border-top: 1px solid #e0e0e0;
	padding: 12px 18px;
	display: flex;
	gap: 8px;
	align-items: flex-end;
	background: #fff;
}

.camcom-aiassist-input {
	flex: 1 1 auto;
	font: inherit;
	padding: 8px 10px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	resize: vertical;
	min-height: 60px;
}

.camcom-aiassist-input:disabled {
	background: #f0f0f1;
	color: #8c8f94;
	cursor: not-allowed;
}

/* Question-script opener — sits in the left pane in place of the thread
   + input row when the schema declares questions[]. */

.camcom-aiassist-opener {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 18px 20px;
	background: #fafafa;
}

.camcom-aiassist-opener-intro {
	font-size: 13px;
	color: #1d2327;
	margin-bottom: 16px;
	line-height: 1.5;
}

.camcom-aiassist-opener-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.camcom-aiassist-opener-submit-row {
	border-top: 1px solid #e0e0e0;
	padding: 12px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #fff;
}

.camcom-aiassist-opener-hint {
	font-size: 12px;
	color: #50575e;
	font-style: italic;
}

.camcom-aiassist-send {
	white-space: nowrap;
}

.camcom-aiassist-attach {
	white-space: nowrap;
	min-width: 36px;
	padding: 6px 10px;
	font-size: 16px;
	line-height: 1;
}

.camcom-aiassist-attach:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* References panel — appears between the thread and the input row whenever
   the operator has one or more references threaded (via upload OR by clicking
   tiles in the media-preview history grid). Codes (R1, R2, …) are monotonic
   so a code stays bound to the same attachment for the session. */
.camcom-aiassist-ref-panel {
	margin: 0 18px 8px;
	padding: 8px 12px;
	background: #f0f6fc;
	border: 1px solid #c5d9ed;
	border-radius: 4px;
}

.camcom-aiassist-ref-panel-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #50575e;
	margin-bottom: 6px;
}

.camcom-aiassist-ref-panel-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.camcom-aiassist-ref-tile {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid #c5d9ed;
	overflow: hidden;
	flex: 0 0 auto;
}

.camcom-aiassist-ref-tile-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.camcom-aiassist-ref-tile-thumb:not([src]),
.camcom-aiassist-ref-tile-thumb[src=""] {
	visibility: hidden;
}

.camcom-aiassist-ref-tile-code {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(10, 75, 120, 0.85);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 1px 4px;
	text-align: center;
	line-height: 1.4;
}

.camcom-aiassist-ref-tile-clear {
	position: absolute;
	top: 1px;
	right: 1px;
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	display: none;
}

.camcom-aiassist-ref-tile:hover .camcom-aiassist-ref-tile-clear {
	display: block;
}

.camcom-aiassist-ref-tile-clear:hover {
	background: #d63638;
}

/* History panel — rendered by camcomAiAssist.renderHistoryInto() into a
   host-page container. Each row shows a thumbnail (when the session has a
   final image), the first operator message, when it happened, an outcome
   badge, and a Resume/View action. */
.camcom-aiassist-history-heading {
	margin: 16px 0 8px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #646970;
}

.camcom-aiassist-history-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.camcom-aiassist-history-empty {
	padding: 14px 16px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	font-size: 13px;
	color: #50575e;
	font-style: italic;
}

.camcom-aiassist-history-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.camcom-aiassist-history-row--open {
	border-left: 3px solid #2271b1;
}

.camcom-aiassist-history-row--approved {
	border-left: 3px solid #00692f;
}

.camcom-aiassist-history-row--cancelled,
.camcom-aiassist-history-row--abandoned {
	border-left: 3px solid #c3c4c7;
}

.camcom-aiassist-history-thumb {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f6f7f7;
	border-radius: 4px;
	overflow: hidden;
	flex: 0 0 auto;
	color: #8c8f94;
}

.camcom-aiassist-history-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.camcom-aiassist-history-body {
	flex: 1 1 auto;
	min-width: 0;
}

.camcom-aiassist-history-excerpt {
	font-size: 13px;
	color: #1d2327;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 4px;
}

.camcom-aiassist-history-meta {
	font-size: 11px;
	color: #646970;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.camcom-aiassist-history-date {
	font-weight: 600;
}

.camcom-aiassist-history-badge {
	margin-left: auto;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: #f0f0f1;
	color: #50575e;
}

.camcom-aiassist-history-badge--open      { background: #f0f6fc; color: #0a4b78; }
.camcom-aiassist-history-badge--approved  { background: #e6f3e8; color: #00692f; }
.camcom-aiassist-history-badge--cancelled { background: #fcf0f1; color: #8c1c1c; }
.camcom-aiassist-history-badge--abandoned { background: #f0f0f1; color: #50575e; }

.camcom-aiassist-history-action {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Click-to-zoom lightbox for the live preview. Operator clicks the primary
   media image and it opens here at full window size. Dismisses on backdrop
   click, the close button, or Escape. */
.camcom-aiassist-media-primary-img {
	cursor: zoom-in;
}

.camcom-aiassist-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.82);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 200000; /* above the AI-Assist modal (which sits at ~160000) */
	padding: 40px;
}

.camcom-aiassist-lightbox-inner {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.camcom-aiassist-lightbox-img {
	max-width: 100%;
	max-height: calc(100vh - 120px);
	object-fit: contain;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
	border-radius: 4px;
}

.camcom-aiassist-lightbox-caption {
	color: #f0f0f1;
	font-size: 12px;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	background: rgba(0, 0, 0, 0.45);
	padding: 4px 10px;
	border-radius: 3px;
}

.camcom-aiassist-lightbox-close {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	color: #1d2327;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.camcom-aiassist-lightbox-close:hover {
	background: #f0f0f1;
}

.camcom-aiassist-right {
	padding: 14px 18px;
	overflow-y: auto;
}

.camcom-aiassist-preview-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #50575e;
	margin-bottom: 10px;
	font-weight: 600;
}

.camcom-aiassist-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.camcom-aiassist-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.camcom-aiassist-field-label {
	font-size: 12px;
	font-weight: 600;
	color: #1d2327;
}

.camcom-aiassist-field-input {
	font: inherit;
	padding: 7px 9px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	width: 100%;
	box-sizing: border-box;
}

.camcom-aiassist-form-empty {
	color: #888;
	font-style: italic;
	padding: 20px 0;
	text-align: center;
}

/* Attachment field (form preview mode). */

.camcom-aiassist-attachment {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	border: 1px dashed #c3c4c7;
	background: #fafafa;
}

.camcom-aiassist-attachment-preview {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
}

.camcom-aiassist-attachment-thumb {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border: 1px solid #dcdcde;
	border-radius: 3px;
	background: #fff;
}

.camcom-aiassist-attachment-id {
	font: 12px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	color: #50575e;
}

.camcom-aiassist-attachment-empty {
	font-style: italic;
	color: #8c8f94;
	font-size: 13px;
}

.camcom-aiassist-attachment-actions {
	display: flex;
	gap: 6px;
}

/* Media preview (right pane when schema.preview_kind === 'media'). */

.camcom-aiassist-media-preview {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.camcom-aiassist-media-primary {
	border: 1px solid #dcdcde;
	background: #fff;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px;
	gap: 8px;
	min-height: 220px;
}

.camcom-aiassist-media-primary-img {
	display: block;
	max-width: 100%;
	max-height: 320px;
	object-fit: contain;
}

.camcom-aiassist-media-primary-meta {
	font: 12px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	color: #50575e;
}

.camcom-aiassist-media-primary-empty {
	color: #8c8f94;
	font-style: italic;
}

.camcom-aiassist-media-history-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #50575e;
	font-weight: 600;
	margin-top: 4px;
}

.camcom-aiassist-media-history {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 6px;
}

.camcom-aiassist-media-tile {
	position: relative;
	border: 1px solid #dcdcde;
	background: #fff;
	border-radius: 3px;
	cursor: pointer;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.camcom-aiassist-media-tile:hover {
	border-color: #2271b1;
}

.camcom-aiassist-media-tile--current {
	border-color: #2271b1;
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.35);
}

.camcom-aiassist-media-tile--reference {
	border-color: #8a6d00;
}

.camcom-aiassist-media-tile--reference::before {
	content: 'reference';
	position: absolute;
	top: 4px;
	left: 4px;
	background: #8a6d00;
	color: #fff;
	font-size: 10px;
	padding: 1px 5px;
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	z-index: 1;
}

.camcom-aiassist-media-tile-img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: #f0f0f1;
}

.camcom-aiassist-media-tile-caption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	padding: 4px 6px;
	background: #fafafa;
	border-top: 1px solid #f0f0f1;
}

.camcom-aiassist-media-tile-id {
	font: 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	color: #50575e;
}

.camcom-aiassist-media-tile-ref {
	background: transparent;
	border: 1px solid #dcdcde;
	color: #50575e;
	font-size: 10px;
	padding: 1px 5px;
	border-radius: 2px;
	cursor: pointer;
	line-height: 1.2;
}

.camcom-aiassist-media-tile-ref:hover {
	border-color: #8a6d00;
	color: #8a6d00;
}

.camcom-aiassist-media-tile--reference .camcom-aiassist-media-tile-ref {
	background: #8a6d00;
	color: #fff;
	border-color: #8a6d00;
}

.camcom-aiassist-footer {
	padding: 12px 18px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* ── Place-product affordance ─────────────────────────────────────────────── */

.camcom-aiassist-media-place-product {
	background: #fff;
	border: 1px solid #2271b1;
	color: #2271b1;
	font-size: 12px;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: 3px;
	cursor: pointer;
	line-height: 1.4;
	margin-top: 4px;
	transition: background 0.1s, color 0.1s;
}

.camcom-aiassist-media-place-product:hover {
	background: #2271b1;
	color: #fff;
}

/* ── Box picker overlay ───────────────────────────────────────────────────── */

.camcom-aiassist-boxpicker {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.88);
	z-index: 200000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.camcom-aiassist-boxpicker-inner {
	background: #1d2327;
	color: #f0f0f1;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	max-width: 92vw;
	max-height: 92vh;
	min-width: 480px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.camcom-aiassist-boxpicker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
	border-bottom: 1px solid #2c3338;
	background: #2c3338;
}

.camcom-aiassist-boxpicker-title {
	font-size: 14px;
	font-weight: 600;
}

.camcom-aiassist-boxpicker-close {
	background: transparent;
	color: #f0f0f1;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 8px;
	border-radius: 3px;
}

.camcom-aiassist-boxpicker-close:hover {
	background: rgba(255, 255, 255, 0.1);
}

.camcom-aiassist-boxpicker-chooser {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border-bottom: 1px solid #2c3338;
	flex-wrap: wrap;
	font-size: 12px;
}

.camcom-aiassist-boxpicker-chooser-label {
	font-weight: 500;
	color: #c3c4c7;
}

.camcom-aiassist-boxpicker-chooser-select {
	background: #1d2327;
	color: #f0f0f1;
	border: 1px solid #50575e;
	border-radius: 3px;
	padding: 4px 8px;
	font-size: 12px;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.camcom-aiassist-boxpicker-chooser-empty {
	color: #a7aaad;
	font-style: italic;
}

.camcom-aiassist-boxpicker-upload {
	background: #2271b1;
	border: 1px solid #2271b1;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 3px;
	cursor: pointer;
}

.camcom-aiassist-boxpicker-upload:hover {
	background: #135e96;
	border-color: #135e96;
}

.camcom-aiassist-boxpicker-canvas {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: #0a0a0a;
	flex: 1 1 auto;
	min-height: 320px;
	overflow: auto;
}

.camcom-aiassist-boxpicker-bg {
	display: block;
	max-width: 100%;
	max-height: calc(92vh - 240px);
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

.camcom-aiassist-boxpicker-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: crosshair;
	background: transparent;
}

.camcom-aiassist-boxpicker-box {
	position: absolute;
	border: 2px dashed #39ff8f;
	background: rgba(57, 255, 143, 0.18);
	pointer-events: none;
	display: none;
	box-sizing: border-box;
}

.camcom-aiassist-boxpicker-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
	border-top: 1px solid #2c3338;
	background: #2c3338;
	gap: 12px;
}

.camcom-aiassist-boxpicker-readout {
	font: 12px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	color: #c3c4c7;
	flex: 1 1 auto;
}

.camcom-aiassist-boxpicker-actions {
	display: flex;
	gap: 8px;
}

.camcom-aiassist-boxpicker-cancel,
.camcom-aiassist-boxpicker-confirm {
	font-size: 13px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 3px;
	cursor: pointer;
	border: 1px solid transparent;
}

.camcom-aiassist-boxpicker-cancel {
	background: transparent;
	border-color: #50575e;
	color: #c3c4c7;
}

.camcom-aiassist-boxpicker-cancel:hover {
	background: rgba(255, 255, 255, 0.08);
}

.camcom-aiassist-boxpicker-confirm {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
}

.camcom-aiassist-boxpicker-confirm:hover:not([disabled]) {
	background: #135e96;
	border-color: #135e96;
}

.camcom-aiassist-boxpicker-confirm[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ── Media-action button row (Download / Save / Export) ──────────────────── */

.camcom-aiassist-media-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 6px;
	width: 100%;
	justify-content: center;
}

.camcom-aiassist-media-action {
	background: #fff;
	border: 1px solid #c3c4c7;
	color: #50575e;
	font-size: 12px;
	font-weight: 500;
	padding: 5px 10px;
	border-radius: 3px;
	cursor: pointer;
	line-height: 1.4;
	transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.camcom-aiassist-media-action:hover:not([disabled]) {
	background: #f0f0f1;
	border-color: #50575e;
	color: #1d2327;
}

.camcom-aiassist-media-action[disabled] {
	opacity: 0.6;
	cursor: default;
}

.camcom-aiassist-media-action--done {
	background: #f0f6fc;
	border-color: #c5d9ed;
	color: #135e96;
}

/* ── Canva export picker overlay ──────────────────────────────────────────── */

.camcom-aiassist-canvapicker-inner {
	min-width: 460px;
	max-width: 560px;
}

.camcom-aiassist-canvapicker-body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 120px;
}

.camcom-aiassist-canvapicker-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.camcom-aiassist-canvapicker-row label {
	font-size: 12px;
	font-weight: 500;
	color: #c3c4c7;
	min-width: 90px;
}

.camcom-aiassist-canvapicker-name {
	flex: 1 1 auto;
	background: #1d2327;
	color: #f0f0f1;
	border: 1px solid #50575e;
	border-radius: 3px;
	padding: 6px 8px;
	font-size: 12px;
}

.camcom-aiassist-canvapicker-locked {
	font-size: 12px;
	color: #a7aaad;
	padding: 4px 0;
}

.camcom-aiassist-canvapicker-empty {
	color: #a7aaad;
	font-style: italic;
	font-size: 12px;
	text-align: center;
	padding: 20px 0;
}

.camcom-aiassist-canvapicker-create {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px dashed #50575e;
	border-radius: 4px;
}

.camcom-aiassist-canvapicker-create label {
	font-size: 11px;
	color: #c3c4c7;
	font-weight: 500;
}