/* Printerei Flyer AI Design Studio: scoped to the actual Flyer Entwurf step. */
/* 1.51.0: the panel beside the chat is back for flyers – it shows what is agreed (ai-consult.css). */
.vk-consult .vk-talk__chat { width:100%; max-width:none; }
.vk-entwurf.pr-studio-enabled > .vk-pick-style,
.vk-entwurf.pr-studio-enabled > .vk-ai { display:none !important; }
.pr-studio { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; align-items:start; margin-block:16px 20px; font-size:14px; }
.pr-studio__conversation,.pr-studio__viewing { border:1px solid #e1e8e8; border-radius:20px; min-width:0; background:#fff; overflow:hidden; }
.pr-studio__conversation { display:flex; flex-direction:column; padding:20px; gap:15px; background:#f9fbfb; }
.pr-studio__brand { display:block; font-size:17px; letter-spacing:-0.02em; color:#063f45; }
.pr-studio__intro { font-size:13px; line-height:1.55; color:#5b6d6d; margin:5px 0 0; }
.pr-studio__messages { height:210px; min-height:160px; overflow:auto; display:flex; flex-direction:column; align-items:flex-start; gap:11px; padding:14px 10px; border:1px solid #e4ebeb; border-radius:16px; background:#fff; scroll-behavior:smooth; }
.pr-studio__bubble { max-width:91%; border-radius:15px 15px 15px 3px; padding:11px 14px; line-height:1.55; font-size:13.5px; margin:0; background:#e9f2f2; color:#153c40; white-space:pre-wrap; overflow-wrap:anywhere; }
.pr-studio__bubble--user { align-self:flex-end; border-radius:15px 15px 3px 15px; color:#fff; background:#075a62; }
.pr-studio__suggestions { display:flex; gap:7px; flex-wrap:wrap; }
.pr-studio__suggest { border:1px solid #cfdddd; background:#fff; border-radius:999px; padding:7px 11px; color:#075a62; cursor:pointer; font:inherit; font-size:12px; }
.pr-studio__suggest:hover { border-color:#075a62; background:#eaf5f4; }
.pr-studio__entry { display:flex; gap:9px; align-items:end; }
/* 1.48.1: one line high (as the send button), grows line by line up to four lines, then scrolls. */
.pr-studio .pr-studio__input { flex:1; width:100%; min-width:0; height:46px; min-height:46px; max-height:118px; border:1px solid #cfdcdd; border-radius:13px; padding:10px 13px; background:#fff; color:#19363a; resize:none; overflow-y:hidden; box-sizing:border-box; font:inherit; font-size:16px; line-height:24px; }
.pr-studio .pr-studio__input:focus { border-color:#cfdcdd; box-shadow:none; }
.pr-studio .pr-studio__input:focus-visible { outline:2px solid #075a62; outline-offset:1px; }
.pr-studio__send { border:0; border-radius:13px; background:#075a62; color:#fff; padding:13px 16px; cursor:pointer; min-height:46px; font:inherit; font-weight:700; }
.pr-studio__send:disabled { cursor:not-allowed; background:#a6c5c7; }
.pr-studio__hint,.pr-studio__privacy { color:#667779; line-height:1.5; font-size:12px; margin:0; }
.pr-studio__text-button { border:0; background:transparent; color:#07616a; font:inherit; font-size:13px; text-align:left; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; width:max-content; }
.pr-studio__conversation .vk-pick-style { margin:0; border-radius:12px; background:white; }
.pr-studio__generate .vk-gen { margin:0; }
.pr-studio__generate .vk-gen__btn { width:100%; justify-content:center; }
.pr-studio__error:empty { display:none; }
.pr-studio__viewing { padding:19px; display:flex; flex-direction:column; gap:14px; }
.pr-studio__preview-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pr-studio__preview-head strong { font-size:16px; color:#12383c; }
.pr-studio__face-tabs { display:flex; background:#edf3f3; border-radius:11px; padding:3px; }
.pr-studio__face-tabs[hidden] { display:none; }
.pr-studio__tab { border:0; background:transparent; border-radius:8px; padding:7px 11px; font:inherit; cursor:pointer; font-size:12px; }
.pr-studio__tab.is-active { background:white; box-shadow:0 1px 4px #0a3c421a; color:#005b63; font-weight:700; }
.pr-studio__canvas { min-height:310px; padding:20px; border-radius:16px; display:flex; align-items:center; justify-content:center; position:relative; background:linear-gradient(145deg,#edf1f1,#f8f9f9); overflow:hidden; }
.pr-studio__image { display:block; max-width:100%; max-height:590px; width:auto; height:auto; object-fit:contain; border-radius:3px; box-shadow:0 14px 42px #142f3030; }
.pr-studio__image[hidden] { display:none; }
.pr-studio__placeholder { color:#718080; text-align:center; font-size:14px; }
.pr-studio__placeholder[hidden] { display:none; }
.pr-studio__canvas.is-working::after { content:''; position:absolute; inset:0; border-radius:16px; background:#f6fbfb80; pointer-events:none; }
.pr-studio__history .vk-ai__drafts { margin:0; }
.pr-studio__approval .vk-ai__use { margin:0; border-top:1px solid #e3ebeb; padding-top:15px; }
.pr-studio__approval .vk-ai__use[hidden],.pr-studio__wait .vk-wait[hidden],.pr-studio__history .vk-ai__drafts[hidden] { display:none !important; }
.pr-studio__approval .vk-ai__take { width:100%; }
.pr-studio__viewing .vk-ai__privacy { padding:0; }
@media(max-width:1000px) { .pr-studio { grid-template-columns:minmax(0,1fr); } .pr-studio__messages{height:210px;} .pr-studio__canvas { min-height:310px; } }
@media(max-width:540px) { .pr-studio { gap:12px; } .pr-studio__conversation,.pr-studio__viewing { padding:13px; border-radius:15px; } .pr-studio__canvas{min-height:250px;padding:14px;} .pr-studio__entry { align-items:end; } .pr-studio__send { padding:10px; font-size:12px; } }
/* 1.27.1: one readable studio column inside the existing two-column order page. */
.pr-studio__project { display:block; margin:8px 0 0; color:#075a62; font-size:12px; font-weight:650; }
.pr-studio__project[hidden] { display:none; }
.pr-studio__generate .vk-gen__btn { min-height:44px; }
.pr-studio__viewing { padding:16px; }
@media(min-width:1001px){ .pr-studio__canvas { min-height:340px; } }

/* 1.47.1: draft versions as small tiles in one sideways row (they were shown at full picture size). */
.pr-studio__history .vk-ai__drafts {
	position: relative;
}

.pr-studio__history .vk-versions {
	display: grid;
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: 5.75rem;
	gap: var(--space-2);
	padding: var(--space-1) 0 var(--space-2);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	touch-action: pan-x pan-y;
}

.pr-studio__history .vk-versions::-webkit-scrollbar {
	display: none;
}

/* Sideways rows: the first tile sits at the start, the last at the end, every one between stops in the middle. */
.pr-studio__history .vk-version {
	width: 5.75rem;
	min-width: 0;
	padding: var(--space-1);
	gap: var(--space-1);
	scroll-snap-align: center;
}

.pr-studio__history .vk-version:first-child {
	scroll-snap-align: start;
}

.pr-studio__history .vk-version:last-of-type {
	scroll-snap-align: end;
}

.pr-studio__history .vk-version img {
	display: block;
	width: 100%;
	height: auto;
}

/* 1.51.1: a version opens big on click – the magnifier shows it */
.pr-studio__history .vk-version {
	position: relative;
	cursor: zoom-in;
}

.pr-studio__history .vk-version::after {
	content: "";
	position: absolute;
	top: calc(var(--space-1) + 4px);
	right: calc(var(--space-1) + 4px);
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 0.92) center / 0.875rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23045B62' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M21 21l-6.5-6.5M10 7.5v5M7.5 10h5'/%3E%3C/svg%3E");
	box-shadow: var(--shadow-sm);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
}

.pr-studio__history .vk-version:is(:hover, :focus-visible)::after {
	opacity: 1;
}

@media (hover: none) {
	.pr-studio__history .vk-version::after {
		opacity: 1;
	}
}

.pr-studio__history .vk-version > span {
	padding: 0 var(--space-1);
	font-size: var(--fs-xs);
}

/* The studio has its own «Neue Variante erstellen» button: no second one in the row. */
.pr-studio__history .vk-version--new {
	display: none;
}

/* Desktop: round arrows at the ends, only when more tiles are there than fit */
.vk-versions__nav {
	position: absolute;
	top: calc(50% + var(--space-4));
	z-index: 2;
	display: grid;
	place-items: center;
	width: var(--space-8);
	height: var(--space-8);
	padding: 0;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-secondary);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.vk-versions__nav:hover {
	border-color: var(--color-secondary);
}

.vk-versions__nav[hidden] {
	display: none;
}

.vk-versions__nav--prev {
	left: calc(var(--space-3) * -1);
}

.vk-versions__nav--next {
	right: calc(var(--space-3) * -1);
}

.vk-versions__nav svg {
	width: 1rem;
	height: 1rem;
}

/* Phones: a little smaller, swiped; the row runs to the card edge, no arrows */
@media (max-width: 640px) {
	.pr-studio__history .vk-versions {
		grid-auto-columns: 5rem;
		margin-inline: -13px;
		padding-inline: 13px;
		scroll-padding-inline: 13px;
	}

	.pr-studio__history .vk-version {
		width: 5rem;
	}

	.vk-versions__nav {
		display: none;
	}
}

/* 1.51.0: no box in a box – the studio sits flat in the step card; only the conversation keeps its frame.
   One title (the step's «KI-Designstudio»), the style as one line with a hairline under it. */
.pr-studio__conversation,
.pr-studio__viewing {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

.pr-studio__project {
	margin: 0;
}

.pr-studio__project[hidden] + * {
	margin-top: 0;
}

.pr-studio__conversation .vk-pick-style {
	padding: 0 0 var(--space-4);
	border: 0;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	background: transparent;
}

.pr-studio__messages {
	height: auto;
	min-height: 6rem;
	max-height: 13rem;
	background: var(--color-surface-alt);
	border-color: var(--color-border);
}

.pr-studio__bubble--assistant {
	border: 1px solid var(--color-border);
	background: var(--color-surface);
}

.pr-studio__send[hidden],
.pr-studio__suggestions[hidden],
.pr-studio__entry[hidden],
.pr-studio__hint[hidden],
.pr-studio__text-button[hidden] {
	display: none;
}

/* Wide screens: the flyer is shown in the column on the right – not a second time in the studio. */
@media (min-width: 1200px) {
	.pr-studio__preview-head,
	.pr-studio__canvas {
		display: none;
	}
}

/* Wrappers whose content is hidden (wait, versions, take) leave no gap. */
.pr-studio__viewing > div:not(:has(> :not([hidden]))) {
	display: none;
}

/* Phones: after the first draft the field gets the whole width, «Änderung erstellen» goes below it. */
@media (max-width: 540px) {
	.pr-studio__entry {
		flex-wrap: wrap;
	}

	.pr-studio__entry .pr-studio__send {
		flex: 1 1 100%;
	}
}