/*
	AI-конструктор (js/ai-chat.js): панель разговора. Обычно — в левой колонке (ниже), в режиме AI —
	сама колонка слева; когда колонки спрятаны, а колонки чата нет (режим AI на телефоне) — поверх
	сцены, справа снизу (стили сразу ниже — это её вид на сцене); первый экран (пустая сцена) —
	посередине сцены (в конце файла).
	Кнопки и поля — общие классы студии (.btn, .icon_btn, .input, .panel_title).
*/

.ai_panel{
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 30;
	display: flex;
	flex-direction: column;
	width: min( 400px, calc( 100% - 24px ) );
	max-height: min( 72%, 600px );
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	box-shadow: var(--shadow-pop);
	overflow: hidden;
}

.ai_panel[hidden]{
	display: none;
}

.ai_head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 8px 8px 14px;
	border-bottom: 1px solid var(--line);
}

.ai_head_end{
	display: flex;
	gap: 2px;
}

.ai_log{
	flex: 1 1 auto;
	min-height: 120px;
	overflow-y: auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13px;
	line-height: 1.45;
}

/* строки переписки не сжимаются: лог прокручивается сам. Иначе колонка flex ужимает их, когда
   переписка длиннее окна, — у сообщения с лицом (min-height) текст и фон наезжали на соседние */
.ai_log > *{
	flex-shrink: 0;
}

.ai_hint{
	margin: 0;
	color: var(--text-2);
}

.ai_msg{
	max-width: 92%;
	padding: 8px 10px;
	border-radius: 8px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.ai_user{
	align-self: flex-end;
	background: var(--accent-soft);
}

.ai_bot{
	align-self: flex-start;
	background: var(--surface-2);
}

/* итоговый ответ с разметкой (ai-markdown.js): абзацы, списки, таблицы, код */
.ai_md{
	white-space: normal;
}
.ai_md p,
.ai_md ul,
.ai_md ol,
.ai_md pre,
.ai_md .ai_md_table{
	margin: 0 0 6px;
}
.ai_md > :last-child{
	margin-bottom: 0;
}
.ai_md ul,
.ai_md ol{
	padding-left: 18px;
}
.ai_md li + li{
	margin-top: 2px;
}
.ai_md .ai_md_h{
	margin-top: 4px;
}
.ai_md code{
	padding: 0 3px;
	border-radius: 3px;
	background: var(--surface);
	font-size: 12px;
}
.ai_md pre{
	padding: 6px 8px;
	border-radius: 6px;
	background: var(--surface);
	overflow-x: auto;
	white-space: pre;
}
.ai_md pre code{
	padding: 0;
	background: none;
}
.ai_md_table{
	max-width: 100%;
	overflow-x: auto;
}
.ai_md table{
	border-collapse: collapse;
	font-size: 12px;
}
.ai_md th,
.ai_md td{
	padding: 2px 6px;
	border: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.ai_wait{
	align-self: flex-start;
	color: var(--text-2);
	background: none;
	padding-left: 0;
}

.ai_act,
.ai_note{
	font-size: 12px;
	color: var(--text-2);
	overflow-wrap: anywhere;
}

/* клиент на сайте фирмы (ai-chat.js: askContact, toCompany): имя и телефон, чтобы AI отвечал дальше;
   AI фирмы недоступен — кнопка «Send request» */
.ai_contact form,
.ai_note.ai_site,
.ai_note.ai_site.has_face{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.ai_contact b,
.ai_site b{
	color: var(--text);
	font-weight: 500;
}
.ai_contact_field{
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-self: stretch;
}
.ai_contact_field em{
	font-style: normal;
	color: var(--danger);
}
.ai_contact_terms,
.ai_contact_msg{
	margin: 0;
}

/* лицо AI (ai-chat.js: face) — спрайт 2 × 2: обычное, думает, неудача, успех (img/ai-face.webp,
   scripts/mascot-sprite.mjs). Внутри сообщения, на вид — слева от него, по верхнему краю. Голова —
   74% плитки (руки, лучики — вокруг): плитка 44 px — голова ~33 px */
.has_face{
	position: relative;
	margin-left: 48px;
	min-height: 40px;
}
.ai_wait.has_face,
.ai_note.has_face,
.ai_hint.has_face{
	display: flex;
	align-items: center;
}
.ai_face{
	position: absolute;
	left: -48px;
	top: -4px;
	width: 44px;
	height: 44px;
	background: url("../img/ai-face.webp?v=2") 0 0 / 200% 200% no-repeat;
}
.ai_face[data-face="think"]{
	background-position: 100% 0;
	animation: ai_face_think 1.4s ease-in-out infinite;
}
.ai_face[data-face="fail"]{
	background-position: 0 100%;
}
.ai_face[data-face="success"]{
	background-position: 100% 100%;
}
@keyframes ai_face_think{
	0%, 100%{ transform: translateY( 0 ) rotate( 0deg ); }
	50%{ transform: translateY( -2px ) rotate( -4deg ); }
}
@media (prefers-reduced-motion: reduce){
	.ai_face[data-face="think"]{
		animation: none;
	}
}

/* ход работы над вопросом (ai-chat.js: step) — одна строка: последняя мысль или шаг; раскрывается —
   размышления, реплики по ходу и действия по порядку */
.ai_think{
	font-size: 12px;
	color: var(--text-2);
}
.ai_think summary{
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	list-style: none;
}
.ai_think_now{
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ai_think summary::-webkit-details-marker{
	display: none;
}
.ai_think summary::before{
	content: "";
	width: 0;
	height: 0;
	border-left: 4px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	flex: none;
	transition: transform .15s ease;
}
.ai_think[open] summary::before{
	transform: rotate( 90deg );
}
.ai_think_body{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 6px 0 0 3px;
	padding-left: 10px;
	border-left: 2px solid var(--line);
	max-height: 320px;
	overflow-y: auto;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
/* мысль — приглушённо, реплика модели по ходу — обычным цветом, действия — как в переписке (.ai_act) */
.ai_think_think{
	font-style: italic;
}
.ai_think_say{
	color: var(--text);
}

.ai_act summary{
	cursor: pointer;
}

.ai_act div{
	margin: 4px 0 0 14px;
}

.ai_err{
	color: var(--danger);
}

/* выделенное на сцене (ai-chat.js: showSelection): строка над полем вопроса — плашка с именем,
   × снимает выделение */
.ai_sel{
	display: flex;
	padding: 8px 10px 0;
}
.ai_sel[hidden]{
	display: none;
}
.ai_sel:not([hidden]) + .ai_input{
	margin-top: 6px;
}
.ai_sel_pill{
	display: inline-flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
	max-width: 100%;
	padding: 2px 2px 2px 10px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--text);
	font-size: 12.5px;
}
.ai_sel_text{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ai_sel .ai_sel_clear{
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
}
.ai_sel .ai_sel_clear .i{
	width: 14px;
	height: 14px;
}

/* пока AI отвечает (ai-chat.js: context): замок вместо ×, плашка не меняется */
.ai_sel_lock{
	display: none;
	flex: none;
	width: 13px;
	height: 13px;
	margin-right: 4px;
	color: var(--accent-ink);
}
.ai_sel.is_busy .ai_sel_pill{
	min-height: 28px;
	padding: 2px 10px 2px 8px;
}
.ai_sel.is_busy .ai_sel_lock{
	display: block;
}
.ai_sel.is_busy .ai_sel_clear{
	display: none;
}

/* картинки к вопросу (ai-chat.js: showImages): миниатюры в рамке поля над текстом, × в углу — убрать */
.ai_images{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 0 10px;
}
.ai_images[hidden]{
	display: none;
}
.ai_image{
	position: relative;
	flex: none;
}
.ai_image img{
	display: block;
	width: 52px;
	height: 52px;
	border: 1px solid var(--line);
	border-radius: 6px;
	object-fit: cover;
	background: var(--surface-2);
}
.ai_image .ai_image_x{
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--surface);
	color: var(--text);
}
.ai_image .ai_image_x .i{
	width: 12px;
	height: 12px;
}

/* картинки перетаскивают на панель — куда отпустить */
.ai_panel.is_drop{
	outline: 2px dashed var(--accent);
	outline-offset: -4px;
}

/* картинки у вопроса в переписке — над его текстом */
.ai_user_images{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.ai_user_images{
	margin-bottom: 6px;
}
.ai_user.ai_only_images .ai_user_images{
	margin-bottom: 0;
}
.ai_user_images img{
	display: block;
	max-width: 120px;
	max-height: 90px;
	border-radius: 6px;
	object-fit: contain;
	background: var(--surface);
}

/* поле вопроса — одна скруглённая рамка: картинки, текст без своей рамки, внизу строка «Image» … отправить.
   Фокус в любом месте рамки — рамка синяя; клик по пустому месту — курсор в текст (ai-chat.js) */
.ai_input{
	display: flex;
	flex-direction: column;
	margin: 8px 10px 10px;
	padding: 10px 10px 8px 12px;
	border: 1px solid var(--line-strong);
	border-radius: 12px;
	background: var(--surface);
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .06 );
	cursor: text;
	transition: border-color .15s, box-shadow .15s;
}
.ai_input:focus-within{
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

/* под полем вопроса: AI может ошибаться — проверить модель до заказа. Мелко, спокойно; значок — цветом
   предупреждения */
.ai_caution{
	display: block;
	margin: -4px 10px 8px;
	color: var(--text-3);
	font-size: 11.5px;
	line-height: 1.35;
	text-align: center;
}
.ai_caution .i{
	width: 13px;
	height: 13px;
	margin-right: 5px;
	color: var(--warn-text);
	vertical-align: -2px;
}

/* текст растёт по строкам до max-height (ai-chat.js: ready), дальше прокручивается */
.ai_text{
	display: block;
	width: 100%;
	min-height: 44px;
	max-height: 160px;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
	line-height: 1.45;
	resize: none;
}
.ai_text::placeholder{
	color: var(--text-3);
}

.ai_bar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 6px;
	cursor: default;
}

/* приложить картинку — значок и подпись «Image», без рамки */
.ai_attach{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	margin-left: -6px;
	padding: 0 8px 0 6px;
	border: 0;
	border-radius: var(--r-sm);
	background: none;
	color: var(--text-2);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
.ai_attach .i{
	width: 18px;
	height: 18px;
}
.ai_attach:disabled{
	opacity: .4;
	cursor: default;
}
@media (pointer: fine){
	.ai_attach:hover:not(:disabled){
		background: var(--surface-2);
		color: var(--text);
	}
}

/* отправить — квадратная кнопка с треугольником (#i-send): бледная, пока отправлять нечего, синяя — когда
   есть текст или картинка (is_ready). Нажать можно всегда: пустой вопрос не уходит (ai-chat.js: submit) */
.ai_send,
.ai_stop{
	flex: none;
	height: 34px;
	margin-left: auto;
	border-radius: 8px;
}
.ai_send{
	width: 34px;
	padding: 0;
	transition: background-color .15s, border-color .15s;
}
.ai_send:not(.is_ready){
	background: var(--line-strong);
	background: color-mix( in srgb, var(--accent) 18%, var(--line) );
	border-color: transparent;
	cursor: default;
}
@media (pointer: fine){
	.ai_send:not(.is_ready):hover{
		background: color-mix( in srgb, var(--accent) 18%, var(--line) );
		border-color: transparent;
	}
}
/* цвет — кнопки (белый на синем), не серый общих .btn .i */
.ai_send .i{
	width: 17px;
	height: 17px;
	color: inherit;
}

@media ( max-width: 760px ){
	.ai_panel{
		left: 8px;
		right: 8px;
		bottom: 64px;
		width: auto;
		max-height: 62%;
	}
}

/* ---------- Чат в левой колонке (designer-ui.js: setPanels) ----------
   Открыт всегда, под деталями проекта, тянется до низа колонки; лента сообщений прокручивается
   сама. Свернуть нельзя — кнопка сворачивания есть только у окна на сцене */

.panel_left .ai_panel{
	position: static;
	flex: 1 1 auto;
	min-height: 280px;
	width: auto;
	max-height: none;
	margin-top: 12px;
	border: 0;
	border-top: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
}

.panel_left .ai_head{
	padding: 0 8px 0 14px;
	height: 40px;
	flex: none;
	border-bottom: 0;
}

.panel_left .ai_min{
	display: none;
}

/* режим AI: колонка — сам чат, от шапки до низа (ai-chat.js: chatHome, styles.css: body[data-ui="ai"]) */
.panel_left > .ai_panel{
	min-height: 0;
	margin-top: 0;
	border-top: 0;
}

.panel_left .ai_log{
	min-height: 0;
	padding: 4px 12px 12px;
}

/* ---------- Окно на сцене (колонки спрятаны) ----------
   Справа снизу, левее колонки материалов (она у правого края, styles.css), отступы 15px.
   Свёрнутое — кнопка «✦ AI designer» в правом нижнем углу, под материалами: остаётся только
   #aiClose со своей второй иконкой и подписью, без строки токенов. На телефоне развёрнутое окно —
   во всю ширину снизу */

.ai_min_open,
.ai_min_label{
	display: none;
}

.canvas_case > .ai_panel{
	right: 115px;
	bottom: 15px;
}

.canvas_case > .ai_panel.is_min{
	right: 15px;
	width: auto;
	max-height: none;
	background: none;
	border: 0;
	box-shadow: none;
	overflow: visible;
}

.canvas_case > .ai_panel.is_min .ai_head{
	padding: 0;
	border: 0;
}

.canvas_case > .ai_panel.is_min .ai_head > .panel_title,
.canvas_case > .ai_panel.is_min #aiReset,
.canvas_case > .ai_panel.is_min .ai_log,
.canvas_case > .ai_panel.is_min .ai_input,
.canvas_case > .ai_panel.is_min .ai_caution,
.canvas_case > .ai_panel.is_min .ai_sel,
.canvas_case > .ai_panel.is_min .ai_tokens,
.canvas_case > .ai_panel.is_min .ai_min_chev{
	display: none;
}

/* иконка и подпись в строку — flex с центровкой (у .icon_btn — grid на одну иконку) */
.canvas_case > .ai_panel.is_min .ai_min{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	height: 44px;
	padding: 0 18px 0 15px;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .25 );
}

.canvas_case > .ai_panel.is_min .ai_min_open{
	display: block;
	width: 20px;
	height: 20px;
}

.canvas_case > .ai_panel.is_min .ai_min_label{
	display: inline;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

@media (pointer: fine){
	.canvas_case > .ai_panel.is_min .ai_min:hover{
		background: var(--accent-hover);
		color: #fff;
	}
}

@media ( max-width: 899px ){
	.canvas_case > .ai_panel{
		left: 15px;
		right: 15px;
		bottom: 15px;
		width: auto;
		max-height: 62%;
	}
	.canvas_case > .ai_panel.is_min{
		left: auto;
	}
}

/* ---------- Первый экран (ai-chat.js: setStart) ----------
   Пустая сцена, вопросов ещё не было: то же окно — главное на странице, крупно посередине сцены:
   вопрос «What would you like to make?», поле, примеры вопросов (клик — текст в поле) и ниже
   «начать без AI» (каталог, лист). Шапки и переписки нет; с первым вопросом — обычный чат на
   своём месте; × в углу — тоже, и больше не показывается (ai-chat.js: dismissStart) */

.ai_start_title,
.ai_start_close,
.ai_examples,
.ai_start_more{
	display: none;
}

.canvas_case > .ai_panel.is_start{
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	width: min( 760px, calc( 100% - 32px ) );
	max-height: calc( 100% - 32px );
	overflow-y: auto;
	border-radius: 16px;
	transform: translate( -50%, -50% );
}

.ai_panel.is_start .ai_head,
.ai_panel.is_start .ai_log,
.ai_panel.is_start .ai_sel{
	display: none;
}

.ai_panel.is_start .ai_start_title{
	display: block;
	margin: 0;
	padding: 32px 64px 4px 32px;
	color: var(--text);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
}

.ai_panel.is_start .ai_input{
	margin: 18px 32px 0;
	padding: 14px 14px 10px 16px;
	border-radius: 14px;
}
.ai_panel.is_start .ai_caution{
	margin: 8px 32px 0;
}

.ai_panel.is_start .ai_text{
	min-height: 84px;
	max-height: 240px;
	font-size: 15px;
}

.ai_panel.is_start .ai_attach{
	font-size: 14px;
}
.ai_panel.is_start .ai_send,
.ai_panel.is_start .ai_stop{
	height: 38px;
}
.ai_panel.is_start .ai_send{
	width: 38px;
}
.ai_panel.is_start .ai_send .i{
	width: 19px;
	height: 19px;
}

/* inline-grid — как у .icon_btn: крестик посередине кнопки */
.ai_panel.is_start .ai_start_close{
	display: inline-grid;
	position: absolute;
	top: 14px;
	right: 14px;
}

/* примеры — плашками в строку, переносятся */
.ai_panel.is_start .ai_examples{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 32px 22px;
}

.ai_example{
	padding: 7px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--btn);
	color: var(--text);
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

@media (pointer: fine){
	.ai_example:hover{
		background: var(--btn-hover);
	}
}

.ai_panel.is_start .ai_tokens{
	padding: 0 32px 16px;
}

.ai_panel.is_start .ai_start_more{
	display: block;
	margin: 0;
	padding: 14px 32px 16px;
	border-top: 1px solid var(--line);
	color: var(--text-2);
	font-size: 13px;
}

@media ( max-width: 760px ){
	.ai_panel.is_start .ai_start_title{
		padding: 20px 52px 2px 18px;
		font-size: 21px;
	}
	.ai_panel.is_start .ai_input{
		margin: 14px 18px 0;
	}
	.ai_panel.is_start .ai_caution{
		margin: 8px 18px 0;
	}
	.ai_panel.is_start .ai_text{
		min-height: 64px;
	}
	.ai_panel.is_start .ai_start_close{
		top: 10px;
		right: 10px;
	}
	.ai_panel.is_start .ai_examples{
		padding: 12px 18px 16px;
	}
	.ai_panel.is_start .ai_tokens{
		padding: 0 18px 12px;
	}
	.ai_panel.is_start .ai_start_more{
		padding: 12px 18px 14px;
	}
}