/* ══ WC-112b: bcai-widget.css — consolidated chat-widget + web-app-shell styles ═══════════════
 *
 * STEP 1 of 2 — INTERNAL CONSOLIDATION ONLY (this file is NOT yet a self-contained third-party
 * embed). Every widget-owned CSS rule that was previously scattered across styles-atomic.css,
 * webapp-shell.css and the responsive media sheets now lives here, loaded LAST and UNCONDITIONAL
 * in views/head.view.php (after :89) so its cascade wins over any residual site copy.
 *
 * EXTERNAL DEPENDENCIES (still relied on this step — STEP 2 will internalize them):
 *   1. Site :root custom properties defined in views/head.view.php:19-61
 *      (--page-bg, --page-color, --modal-border-color, --msg-error-color, --abstract-color,
 *       --text-color, --text-bg, --btn-main-color, --page-border-color, --promo-color …).
 *      The rules below reference these vars; without them the widget renders with unset colours.
 *   2. The site popup engine — .popup-contr / .popup-contr-wrap / .modal-header / .popup-close-btn
 *      (open/close animation + modal chrome), defined in the site sheets. #chat-popup-wrap IS a
 *      .popup-contr, so the widget's show/hide + header skin come from the site's popup engine.
 *
 * STEP 2 (separate later brief) will add :root fallbacks + a scoped copy of the popup engine so
 * this file becomes embed-grade self-contained. The orphan public/css/chat.css deleted in this
 * same commit carried a ready-made :root template (chat.css:6-27) — recover it from git history
 * (`git show 861a8b7:public/css/chat.css`) as the STEP-2 reference.
 *
 * RATING (WC-112c): the review affordance splits in two. The page-rating BADGE (.page-rating-*,
 * #page-rating-container — live site chrome, server-emitted per page, bound by main_control.js /
 * action_control.js, coupled to .page-bg.full) STAYS site-owned and byte-untouched in
 * styles-atomic/mobile/tablet/desktop/tablet-ipad-*. The rating MODAL internals (.rating-star,
 * .rating-star.selected, .popup-stars-wrap, .comment-stars-wrap, .comment-text) DO ship here now,
 * marked "rating modal — dormant until Wave F": #rating-popup-wrap has no live opener today, but the
 * modal ships with the widget bundle (the review affordance will extend to external platforms — Wave F
 * / TD#49 is its consumer). FAQ popup styles are untouched (that feature retires later, site-side).
 *
 * ALSO NOT MOVED (see the WC-112b accounting table): the universal interactive-hover treatment in
 * styles-action-elem-desktop.css is a single shared comma-separated rule that co-lists the widget's
 * :hover states with many SITE selectors (.cookie-banner-actions, .social-link-anchor,
 * .page-rating-container, .modal-nav-btn, .comments-section …). It is site-owned and cannot move
 * byte-verbatim without pulling those site selectors in; the widget's desktop hover states therefore
 * still resolve from that site sheet. Scoping them out is STEP-2 work.
 *
 * Cache-bust: included via ?v=<filemtime> (NOT asset(), which freezes ?v=1 on prod — see the
 * webapp-shell.css header note reproduced below). Consolidation is byte-verbatim (WC-112b R1 —
 * no reformatting, no dedup; duplicates preserved in cascade order). Order: base rules first
 * (source order), then @media blocks in head.view.php include order (mobile(699 portrait) →
 * tablet(max-1023 landscape) → max-1023 → desktop(min-1024) → ipad-portrait → ipad-landscape).
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   BASE (unconditional) — from styles-atomic.css:341-702 (widget block, dead .quick-* dropped)
   ───────────────────────────────────────────────────────────────────────────────────────────── */
/* Специфичный для чата контейнер внутри popup */
#chat-popup-wrap .popup-contr-wrap {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Основные стили чата */
.chat-container {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	overflow: auto;
}

/* Контейнер сообщений */
.chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scroll-behavior: smooth;
}

/* Кастомный скроллбар чата */
.chat-messages::-webkit-scrollbar {
	width: 6px;
}
.chat-messages::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}

/* Нижняя панель чата */
.dialog-wrap {
	margin-top: auto;
	margin-bottom: 30px
}

/* Стили сообщений */
.message {
	display: flex;
	flex-direction: column;
	max-width: 85%;
	margin-bottom: 8px;
	animation: messageSlideIn 0.3s ease-out;
}
.message-user {
	align-self: flex-end;
	align-items: flex-end;
}
.message-bot {
	align-self: flex-start;
	align-items: flex-start;
}
.message-error {
	align-self: center;
	align-items: center;
}

/* Содержимое сообщений */
.message-content {
	padding: 10px 16px;
	border-radius: 18px;
	word-wrap: break-word;
	white-space: pre-wrap; /* WC-033: honor '\n' so multi-line lists (my_tickets) render as rows; long lines still wrap */
	font-size: 16px;
	line-height: 1.5;
	position: relative;
	color: var(--page-color);
	border: 1px solid var(--modal-border-color);
}
.message-user .message-content {
	border-bottom-right-radius: 4px;
}
.message-bot .message-content {
	border-bottom-left-radius: 4px;
}
.message-error .message-content {
	color: var(--msg-error-color);
	border: 2px solid var(--msg-error-color);;
	text-align: center;
}

/* Время сообщения */
.message-time {
	font-size: 11px;
	margin-top: 4px;
	opacity: 0.7;
}
.message-user .message-time {
	text-align: right;
}
.message-bot .message-time {
	text-align: left;
}

/* Индикатор печати */
.typing-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	font-size: 13px;
	animation: fadeIn 0.3s ease-in;
}
.typing-dots {
	display: flex;
	gap: 3px;
}
.typing-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	animation: typingDot 1.4s infinite;
}
.typing-dots span:nth-child(2) {
	animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
	animation-delay: 0.4s;
}
/* Кнопки действий */
.action-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
	animation: messageSlideIn 0.3s ease-out;
}
.dialog-wrap .action-buttons {
	margin: 8px 20px;
}
.action-button {
	padding: 8px 16px;
	background: var(--page-bg);
	color: var(--page-color);
	border: 1px solid var(--modal-border-color);
	border-radius: 8px;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.dialog-wrap .btn-secondary,
.dialog-wrap .action-button{
	border: 1px solid var(--modal-border-color);
}

/* Контейнер ввода */
.chat-input-container {
	padding:0 6px 6px 0;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin:0 20px;
	border: 1px solid var(--modal-border-color);
	border-radius: 8px;
}

/* Поле ввода */
.chat-input {
	flex: 1;
	min-height: 40px;
	max-height: 120px;
	padding: 8px 16px;
	font-size: 16px;
	font-family: inherit;
	resize: none;
	outline: none;
	line-height: 1.5;
	color: var(--page-color);
	border: none;
}
.chat-input::placeholder {
	font-size:16px;
}

/* Кнопка отправки */
.chat-send-btn {
	width: 40px;
	height: 40px;
	border: none;
	border-radius:8px;
	background: var(--text-color);
    color: var(--btn-main-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.chat-send-btn:disabled {
	background: var(--abstract-color);
	color: var(--page-bg);
	cursor: not-allowed;
	transform: none;
}

/* Кнопки формы */
.form-buttons {
	display: flex;
	gap: 8px;
	margin-top: 16px;
	padding-bottom: 20px;
}
.btn-primary {
	flex: 1;
	padding: 10px 16px;
	background: var(--text-color);
	color: var(--text-bg);
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}
.btn-primary:disabled {
	background: var(--abstract-color);
	color: var(--page-bg);
	cursor: not-allowed;
	transform: none;
}
.btn-secondary {
	padding: 10px 16px;
	background: var(--abstract-color);
	color: var(--text-color);
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
}

/* Ошибки формы */
.form-error {
	padding: 8px 12px;
	/* background: #f8d7da; */
	color: var(--msg-error-color);
	border: 2px solid var(--msg-error-color);
	border-radius: 8px;
	font-size: 13px;
	margin-bottom: 12px;
	animation: shake 0.5s ease-in-out;
}

/* CSS стили для чекбокса согласия */
.privacy-consent-container{
	max-height: 0;
	overflow: hidden;
	transition: max-height .8s ease-out;
}
.privacy-consent-wrapper {
	font-size: 12px;
	line-height: 1.4;
	padding: 12px;
	margin: 0;
}
.privacy-consent-label {
	display: flex;
	align-items: flex-start;
	cursor: pointer;
	user-select: none;
	gap: 8px;
	line-height: 1.5;
	color: var(--text-color);
}
.privacy-consent-label input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.checkmark {
	flex-shrink: 0;
	height: 16px;
	width: 16px;
	background-color: var(--page-bg);
	border: 2px solid var(--text-color);
	border-radius: 3px;
	margin-top: 2px;
	transition: all 0.3s ease;
	position: relative;
}
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid var(--text-color);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.privacy-consent-label input:checked ~ .checkmark:after {
	display: block;
}
.consent-text {
	color: var(--text-color);
	flex: 1;
}
.privacy-link {
	color: var(--text-color);
	text-decoration: none;
	font-weight: 500;
}
.privacy-link:hover {
	text-decoration: underline;
}
.privacy-consent-error {
	display: none;
	margin-top: 8px;
	animation: shake 0.5s ease-in-out;
}

/* Анимации */
@keyframes messageSlideIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes typingDot {
	0%, 60%, 100% {
		transform: translateY(0);
		opacity: 0.4;
	}
	30% {
		transform: translateY(-10px);
		opacity: 1;
	}
}
@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

/* intra-file duplicate of .message-error .message-content (was styles-atomic.css:776, after the footer block — preserved in cascade order, R1) */
.message-error .message-content {
	/* background: #f8d7da; */
	color: var(--msg-error-color);
	border: 2px solid var(--msg-error-color);
	text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   WEB-APP SHELL (unconditional) — webapp-shell.css in full (namespaced #webapp-shell / .webapp-*)
   ───────────────────────────────────────────────────────────────────────────────────────────── */
/* ══ WEB-01D: web app shell inside the chat modal ═════════════════════════════
   Its OWN stylesheet, on purpose — two reasons:

   1. CACHE. head.view.php builds every other stylesheet URL with asset(), and on
      prod asset() resolves ?v= to ASSET_VERSION — which is defined NOWHERE in this
      repo, so it falls back to the literal '1' (scripts/functions.php:607-613).
      Every CSS URL is therefore frozen at ?v=1 forever: an edit to styles-atomic.css
      NEVER reaches a browser that already cached it. That is exactly why the tab bar
      rendered unstyled ("ChatAnmelden") for the operator while a cache-busted curl
      showed the rules present. This file is included with ?v=<filemtime> instead —
      the same idiom footer.view.php already uses for JS — so every save busts.
   2. SCOPE. Everything here is under #webapp-shell / .webapp-* and cannot touch a
      chat rule.

   Historical note (WC-091): shell nodes must not be given class="contact-form" — that class
   was the chat widget's ACCORDION (`max-height:0; overflow:hidden` + a 0.8s slideDown, opened
   only by the code panel), and a panel wearing it flashed then collapsed to nothing — the
   WEB-01D-FIX-1 "vanishing login panel". Both the accordion rules and openCodePanel() are now
   DELETED (WC-081 / WC-091), so the hazard is gone; .webapp-form below stands on its own and
   replicates the LOOK (padding/inputs/heading) directly. */

#webapp-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;          /* lets the frame host shrink inside a flex parent */
  flex: 1 1 auto;
}

/* The iframe is height:100% of THIS — without a sized host it collapses to 0. */
#webapp-frame-host {
  flex: 1 1 auto;
  min-height: 60vh;
  overflow: hidden;
}
#webapp-frame-host[hidden] { display: none; }

/* ── the shell's own form skin (formerly a .contact-form lookalike, minus the accordion) ── */
.webapp-form {
  padding: 0 20px;        /* the only layout rule the old .contact-form actually contributed */
}
.webapp-form h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
}
.webapp-form input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 2px solid #555;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  color: #eee;
}
.webapp-form input:focus {
  border-color: #dda63d;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.webapp-form input::placeholder {
  color: #bbb;
  font-size: 16px;
}

/* ── bottom tab bar ───────────────────────────────────────────────────────── */
.webapp-tabs {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  background: inherit;
}
.webapp-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webapp-tab.active { border-color: currentColor; font-weight: 600; }

.webapp-login-msg { margin: 8px 0 0; font-size: 14px; }
.webapp-login-msg.is-error { color: #b00020; }

/* ─── rating modal internals (WC-112c) — dormant until Wave F; #rating-popup-wrap has no live opener. The .page-rating-* page BADGE stays site-owned (styles-atomic/desktop/tablet), byte-untouched. ─── */
/* rating modal — dormant until Wave F */
.popup-stars-wrap{border:none}
.rating-star{
	line-height: 1;
	color: var(--promo-color);
}
.rating-star.selected{
	color: var(--page-color);
}
.comment-stars-wrap{
	line-height: 1;
}
.comment-text{
	display:inline;
}

/* ─── overrides from styles-mobile.css (link media="(max-width:699px) and (orientation: portrait)") ─── */
@media (max-width:699px) and (orientation: portrait) {
/* rating modal — dormant until Wave F (WC-112c) */
.popup-stars-wrap{
	color:var(--text-color);
	text-align: right;
}
.rating-star{
	font-size:28px;
}
.comment-stars-wrap{
	font-size:16px;
}
.dialog-wrap {
  margin-bottom: 20px;
}
.chat-container {
	height: calc(100vh - 100px);
}
.chat-messages {
	padding:10px 16px;
}
.message {
	max-width: 90%;
}
.message-content {
	font-size: 15px;
	padding: 10px 14px;
}
.action-button {
	font-size: 12px;
	padding: 8px 14px;
}
.chat-input-container {
	padding: 0 4px 4px 0;
	margin: 0 16px;
}
.chat-input {
	font-size: 15px; /* Предотвращает зум на iOS */
	border-radius: 8px;
	padding: 8px 10px;
}
.chat-send-btn {
  border-radius: 8px;
}

.dialog-wrap input::placeholder {
  font-size: 15px;
}

.form-buttons {
  gap: 8px;
  padding: 0;
  margin-top: 10px;
}
.btn-secondary,
.btn-primary {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
}
}

/* ─── rating modal (WC-112c) from styles-tablet.css (link media="(max-width: 1023px) and (orientation: landscape)") — dormant ─── */
@media (max-width: 1023px) and (orientation: landscape) {
	/* rating modal — dormant until Wave F */
	.rating-star{
		font-size:42px;
	}
	.comment-stars-wrap{
		font-size:16px;
	}
}

/* ─── overrides from styles-action-elem-mobile.css (link media="(max-width:1023px)") ─── */
@media (max-width:1023px) {
.popup-contr .popup-contr-wrap .action-buttons{
	padding: 0 0 20px;
}
.popup-contr .popup-contr-wrap .action-buttons button{
	font-size: 14px;
	padding:10px 14px;
}
}

/* ─── rating modal (WC-112c) from styles-desktop.css (link media="(min-width: 1024px)") — dormant ─── */
@media (min-width: 1024px) {
	/* rating modal — dormant until Wave F */
	.rating-star{
		font-size:2.6vh;/*42px/9,1*/
	}
	.comment-stars-wrap{
		font-size:1.758241vh;/*16px/9,1*/
	}
}

/* ─── overrides from styles-tablet-ipad-mobile.css (link media="(min-width: 700px) and (max-width: 1366px) and (orientation: portrait) and (hover: none) and (pointer: coarse)") ─── */
@media (min-width: 700px) and (max-width: 1366px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
/* rating modal — dormant until Wave F (WC-112c) */
.popup-stars-wrap{
	color:var(--text-color);
	text-align: right;
}
.rating-star{
	font-size:28px;
}
.comment-stars-wrap{
	font-size:16px;
}
	
/* popup rating stars ******************************/
.rating-star{
	font-size:42px;
}
.comment-stars-wrap{
	font-size:16px;
}
.chat-container {
	height: calc(100vh - 100px);
}
.message {
	max-width: 90%;
}
.message-content {
	font-size: 14px;
	padding:10px 16px;/*10px 14px*/
	border-radius:16px;/*8px*/
}
.dialog-wrap .action-buttons {
  	margin: 0 20px;
}
.popup-contr .popup-contr-wrap .action-buttons {
    padding: 0 0 16px;
}
.action-button {
	font-size: 14px;
	padding:0.677966vh 1.1864vh;/*8px 14px*/
}
.chat-input {
	font-size: 16px; /* Предотвращает зум на iOS */
	border-radius:0.677966vh;/*8px*/
}
.chat-send-btn {
  border-radius:0.677966vh;/*8px*/
}

.btn-primary,
.btn-secondary {
  padding:0.847457vh 1.3559vh;/*10px 16px*/
  border-radius:0.677966vh;/*8px*/
  font-size: 14px;
}
}

/* ─── overrides from styles-tablet-ipad-desktop.css (link media="(min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse)") — dead .quick-button dropped from the shared border-radius selector list (D3) ─── */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
	/* rating modal — dormant until Wave F (WC-112c) */
	.rating-star{
		font-size: 3.4vh;
	}
	.comment-stars-wrap{
		font-size:2vh;/*16px/8*/
	}
.message-content {
  padding: 10px 16px;
  font-size: 15px;
}
.chat-input,
.chat-send-btn,
.btn-primary,
.btn-secondary {
  border-radius: 6px;
}
.dialog-wrap .action-buttons {
  margin: 0 20px 12px;
}
}