/* ========================================================
   sections.css - base styles + helpers for AI sections
   ======================================================== */
.ai-section, .ai-section-shell { position: relative; }
.ai-section *, .ai-section *::before, .ai-section *::after { box-sizing: border-box; }

/* ---------- admin editor layout ---------- */
/* "Edit with AI" button */
/* low z-index: stays behind the site's sticky header */
.ai-fab-host { position: absolute; left: 24px; bottom: 24px; z-index: 40; }
/* while editing: AI panel on the left inside the section, the section narrows next to it */
.ai-section-shell.ai-editing { display: flex; align-items: stretch; }
.ai-section-shell.ai-editing > .ai-section { flex: 1 1 auto; min-width: 0; }
/* the panel column runs the full height of the section (also under/over a sticky site header);
   the panel inside it sticks to the top of the window while a tall section scrolls */
.ai-panel-host { flex: 0 0 400px; width: 400px; min-height: 480px; position: relative; z-index: 40; align-self: stretch; background: #fff; }
/* the hero (starts under the header): the panel covers the whole section, above the header */
.ai-panel-host.ai-over-header { z-index: 99990; }
/* very short sections: keep the chat usable */
@media (max-width: 900px) {
	.ai-section-shell.ai-editing { flex-direction: column; }
	.ai-panel-host { flex-basis: auto; width: 100%; height: 75vh; }
}

/* ---------- drag & drop editor (GrapesJS) ---------- */
/* while it is open, the section itself is hidden and the editor takes its place */
.ai-section-shell.ai-visual > .ai-section { display: none; }
.ai-section-shell.ai-visual > .ai-panel-host { flex-basis: 360px; width: 360px; }
.aiv-wrap { position: relative; z-index: 40; flex: 1 1 auto; min-width: 0; height: calc(100vh - var(--ai-top, 0px)); min-height: 480px;
	display: flex; flex-direction: column; background: #f3f3f6; font: 13px/1.4 Inter, system-ui, sans-serif; color: #17171c; }
.ai-section-shell.ai-over-header .aiv-wrap { z-index: 99990; }
.aiv-toolbar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #ffffff; border-bottom: 1px solid #e4e4ea; flex-wrap: wrap; }
.aiv-group { display: inline-flex; gap: 4px; }
.aiv-status { flex: 1; color: #a26a00; font-size: 12px; }
.aiv-btn { border: 1px solid #dcdce2; background: #ffffff; color: #17171c; border-radius: 8px; padding: 5px 10px; font: 12px/1.3 Inter, system-ui, sans-serif; cursor: pointer; margin: 0; }
.aiv-btn:hover { border-color: #b9b9c4; }
.aiv-btn.on { background: #17171c; color: #ffffff; border-color: #17171c; }
.aiv-btn.aiv-primary { background: #1d8a52; color: #ffffff; border-color: #1d8a52; padding: 6px 16px; font-weight: 600; }
.aiv-body { flex: 1; display: flex; min-height: 0; }
.aiv-canvas { flex: 1 1 auto; min-width: 0; position: relative; }
/* GrapesJS sizes its canvas for its own default panels (40px top bar, 85% width); we use our own toolbar and sidebar */
.aiv-canvas .gjs-editor { background: #e9e9ee; }
.aiv-canvas .gjs-cv-canvas { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; }
.aiv-side { flex: 0 0 290px; width: 290px; display: flex; flex-direction: column; background: #444; color: #ddd; min-height: 0; }
.aiv-tabs { display: flex; border-bottom: 1px solid #333; }
.aiv-tabs button { flex: 1; border: 0; background: transparent; color: #bbb; padding: 10px 4px; font: 600 12px/1 Inter, system-ui, sans-serif; cursor: pointer; margin: 0; }
.aiv-tabs button.on { color: #fff; box-shadow: inset 0 -2px 0 #d278c9; }
.aiv-pane { flex: 1; overflow-y: auto; min-height: 0; }
.aiv-pane[hidden] { display: none; }
.aiv-hint { padding: 10px 14px; margin: 0; font-size: 12px; color: #aaa; }
.aiv-busy { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.6); font-weight: 600; }
.aiv-busy[hidden] { display: none; }
.aiv-busy div { background: #17171c; color: #fff; padding: 10px 16px; border-radius: 10px; }
/* the site's CSS must not squeeze the editor's own controls */
.aiv-wrap label, .aiv-wrap input, .aiv-wrap select { margin-bottom: 0; }
@media (max-width: 900px) {
	.aiv-wrap { height: 85vh; }
	.aiv-side { flex-basis: 220px; width: 220px; }
}

/* ---------- site file manager (drag & drop editor > Files) ---------- */
.aivfm { position: absolute; inset: 0; z-index: 30; display: flex; align-items: stretch; justify-content: center; padding: 24px; background: rgba(15,15,20,.45); }
.aivfm[hidden] { display: none; }
.aivfm-box { width: 100%; max-width: 1100px; background: #fff; border-radius: 14px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.aivfm-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #ececf0; flex-wrap: wrap; }
.aivfm-head strong { font-size: 15px; }
.aivfm-count { flex: 1; color: #8a8a94; font-size: 12px; }
.aivfm-search, .aivfm-section { border: 1px solid #dcdce2; border-radius: 8px; padding: 6px 8px; font: 13px/1.3 Inter, system-ui, sans-serif; height: auto; margin: 0; }
.aivfm-bulk { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 12px; color: #6b6b76; border-bottom: 1px solid #f2f2f5; }
.aivfm-bulk label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; font-weight: 400; }
.aivfm-hint { flex: 1; color: #9a9aa4; }
.aivfm-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 16px; align-content: start; }
.aivfm-empty { grid-column: 1 / -1; text-align: center; color: #6b6b76; padding: 30px 0; }
.aivfm-card { border: 1px solid #e4e4ea; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; font: 12px/1.4 Inter, system-ui, sans-serif; color: #17171c; }
.aivfm-card.selected { border-color: #c43030; box-shadow: 0 0 0 2px rgba(196,48,48,.2); }
.aivfm-thumb { position: relative; height: 110px; background: repeating-conic-gradient(#f1f1f4 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.aivfm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aivfm-badge { position: absolute; left: 6px; top: 6px; background: #1d8a52; color: #fff; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.aivfm-badge.unused { background: rgba(23,23,28,.6); }
.aivfm-check { position: absolute; right: 6px; top: 6px; width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: #c43030; }
.aivfm-name { font-weight: 600; padding: 6px 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aivfm-section-tag { margin: 3px 8px 0; align-self: flex-start; background: #f1effe; color: #6d4aff; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.aivfm-meta { color: #8a8a94; font-size: 11px; padding: 3px 8px 0; min-height: 15px; }
.aivfm-used { color: #1d8a52; font-size: 11px; padding: 2px 8px 0; }
.aivfm-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; margin-top: auto; }
.aiv-btn.aivfm-small { padding: 3px 7px; font-size: 11px; }
.aiv-btn.aivfm-danger:not(:disabled):hover { color: #c43030; border-color: #e7b0b0; }
.aiv-btn:disabled { opacity: .45; cursor: not-allowed; }

/* admin-only placeholder for a section without content: a real area to design in;
   editor.js moves its content below anything that covers its top (a transparent site header, a logo) */
.ai-section-empty { box-sizing: border-box; min-height: 420px; margin: 16px; padding: 48px 24px 96px; border: 2px dashed #c9c9d6; border-radius: 14px;
	color: #6b6b76; font: 15px/1.5 system-ui, sans-serif; text-align: center; background: #fafafb;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ai-section-empty strong { display: block; font-size: 22px; line-height: 1.3; color: #17171c; }

/* Background video: <div class="ai-video-bg" data-yt-bg="..."></div> */
.ai-video-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ai-video-bg iframe {
	position: absolute; top: 50%; left: 50%;
	width: 100%; height: 100%;
	border: 0; pointer-events: none;
	transform: translate(-50%, -50%);
	opacity: 0; transition: opacity .6s ease-in;
}
.ai-video-bg.is-playing iframe { opacity: 1; }
/* blocks YouTube's own controls / end screen */
.ai-video-bg::after { content: ""; position: absolute; inset: 0; }

/* Lightbox used by data-video-popup and data-ai-popup */
.ai-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px;
	background: rgba(0, 0, 0, .82); opacity: 0; transition: opacity .2s; }
.ai-lightbox.is-open { opacity: 1; }
.ai-lightbox-box { position: relative; width: 100%; max-width: 960px; max-height: 90vh; }
.ai-lightbox-box.is-content { max-width: 720px; background: #fff; color: #222; border-radius: 12px; padding: 32px; overflow: auto; }
.ai-lightbox-video { position: relative; padding-bottom: 56.25%; height: 0; background: #000; border-radius: 10px; overflow: hidden; }
.ai-lightbox-video iframe, .ai-lightbox-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ai-lightbox-close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .15); color: #fff; font: 22px/36px sans-serif; cursor: pointer; padding: 0; }
.ai-lightbox-box.is-content .ai-lightbox-close { top: 10px; right: 10px; background: rgba(0, 0, 0, .06); color: #333; }
.ai-popup[hidden] { display: none !important; }
.ai-lightbox .ai-popup { display: block; }
body.ai-lightbox-open { overflow: hidden; }