/* Чат CRM Petala — показ (14.10.2026, Павлон: «адаптировать разработки брата под црм петалы», вариант А — показ).
   По спецификации чата Oxbox (D:\AI\Азалия декор\CRM\oxbox-chat-spec.md): поведение «как в Telegram». Только токены темы CRM —
   светлая и тёмная тема подхватываются сами. Раскладка: список | переписка | карточка покупателя (≥1400), ≤960 — по очереди. */
.chat { display: grid; grid-template-columns: 20rem minmax(0, 1fr); height: max(32rem, calc(100dvh - 12.75rem)); /* верх 164 + поле снизу 32 + 8: окно не прокручивается */ overflow: hidden; padding: 0; }
@media (min-width: 1400px) { .chat.has-info { grid-template-columns: 20rem minmax(0, 1fr) 18rem; } }

/* список переписок */
.chat__list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.chat__lhead { display: grid; gap: 0.625rem; padding: 0.875rem; border-bottom: 1px solid var(--border); }
.chat__lhead .search { max-width: none; }
.chat__lhead .tabs { width: 100%; }
.chat__lhead .tabs button { flex: 1; }
/* строка переписки — как в Telegram (Павлон 14.10: «надо ближе к телеге»): крупная круглая аватарка в цвет, название и время,
   ниже последнее сообщение и счётчик; выбранная залита цветом кнопок, текст белый */
.chat__items { flex: 1; min-height: 0; overflow-y: auto; padding: 0.375rem; }
.ci { display: grid; grid-template-columns: 3.375rem minmax(0, 1fr) auto; gap: 0.125rem 0.75rem; align-items: center; width: 100%; padding: 0.5rem 0.625rem; border: 0; border-radius: var(--r-lg); background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.ci:hover { background: var(--accent); }
.ci .avatar { grid-row: span 2; }
.ci__name { display: flex; align-items: center; gap: 0.25rem; min-width: 0; font-size: 0.9375rem; font-weight: 600; }
.ci__name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci__kind { width: 1rem; height: 1rem; flex: none; color: var(--muted-foreground); }
.ci__time { display: flex; align-items: center; gap: 0.25rem; justify-self: end; font-size: 0.75rem; color: var(--muted-foreground); }
.ci__time .i { width: 1rem; height: 1rem; color: var(--primary); }
.ci__prev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; color: var(--muted-foreground); }
.ci__prev b { font-weight: 500; color: var(--primary); }
.ci__prev.is-typing { color: var(--primary); }
.ci__n { justify-self: end; min-width: 1.375rem; height: 1.375rem; padding: 0 0.4375rem; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: 0.75rem; font-weight: 600; line-height: 1.375rem; text-align: center; }
.ci.is-on, .ci.is-on:hover { background: var(--primary); color: var(--primary-foreground); }
.ci.is-on .ci__kind, .ci.is-on .ci__time, .ci.is-on .ci__time .i, .ci.is-on .ci__prev, .ci.is-on .ci__prev b { color: var(--primary-foreground); }
.ci.is-on .ci__n { background: var(--primary-foreground); color: var(--primary); }

/* аватарки: круг ровного цвета (градиент Павлон 14.10 попросил убрать), белые буквы; цвета — с сайта Petala (зелень знака, олива, приглушённая роза и охра
   дуги «Одной базы», серо-оливковый текста), все пять в одной светлоте, без кислотных */
.ava { display: grid; place-items: center; width: 3.375rem; height: 3.375rem; border-radius: 50%; flex: none; color: #fff; font-size: 1.125rem; font-weight: 600; letter-spacing: 0.02em; background: #6f8b2e; overflow: hidden; }
.ava--1 { background: #bd6f87; }
.ava--2 { background: #c1a046; }
.ava--3 { background: #707d50; }
.ava--4 { background: #8b9182; }
.ava--logo { background: none; } /* знак — сам зелёный круг, углы прозрачные: подложка давала белое кольцо */
.ava--logo img { width: 100%; height: 100%; object-fit: cover; }
.conv__head .ava { width: 2.5rem; height: 2.5rem; font-size: 0.9375rem; }

/* переписка */
.conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.conv__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--border); }
.conv__head .avatar { border-radius: 50%; }
.conv__who { min-width: 0; flex: 1; }
.conv__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.conv__st { font-size: 0.8125rem; color: var(--muted-foreground); }
.conv__st.is-on { color: var(--primary); }
.conv__back { display: none; }
.conv__pin { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--border); font-size: 0.8125rem; }
.conv__pin b { color: var(--primary); font-weight: 600; }
.conv__pin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem 0.875rem; --chat-grad: radial-gradient(circle at 12% 18%, #a9c995 0, transparent 52%), radial-gradient(circle at 88% 12%, #e6e8ad 0, transparent 50%), radial-gradient(circle at 82% 88%, #9dc08c 0, transparent 55%), radial-gradient(circle at 18% 90%, #eaedc8 0, transparent 55%), #cbdcae; background: url(chat-pattern-light.webp?v=2) 0 0 / 24rem 24rem, var(--chat-grad); } /* узор и градиент как в Telegram (petala/build-chat-pattern.mjs, Павлон 14.10) */
.day { align-self: center; margin: 0.5rem 0; padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--card); color: var(--muted-foreground); font-size: 0.75rem; box-shadow: var(--shadow-sm); }
.sys { align-self: center; color: var(--muted-foreground); font-size: 0.75rem; }
.msg { max-width: min(30rem, 78%); align-self: flex-start; padding: 0.5rem 0.75rem 0.375rem; border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sm); background: var(--card); box-shadow: var(--shadow-sm); line-height: 1.4; overflow-wrap: anywhere; }
.msg--me { align-self: flex-end; border-radius: var(--r-xl) var(--r-xl) var(--r-sm) var(--r-xl); background: var(--msg-me, #f2fbdd); } /* светлее #eef8cb: на градиенте ленты пузырь сливался в жёлтом углу (14.10) */
.msg__from { font-size: 0.75rem; font-weight: 600; color: var(--primary); margin-bottom: 0.125rem; }
.msg__text { white-space: pre-wrap; }
.msg__meta { display: flex; justify-content: flex-end; align-items: center; gap: 0.25rem; margin-top: 0.125rem; font-size: 0.6875rem; color: var(--muted-foreground); }
.msg__meta .i { width: 0.875rem; height: 0.875rem; }
.msg__meta .is-read { color: var(--primary); }
.msg__reply { display: block; margin: 0.125rem 0 0.375rem; padding: 0.25rem 0.5rem; border-left: 2px solid var(--primary); border-radius: var(--r-sm); background: color-mix(in srgb, var(--primary) 8%, transparent); font-size: 0.8125rem; }
.msg__reply b { display: block; color: var(--primary); font-weight: 600; }
.msg__reply span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); }
.msg__react { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; padding: 0 0.5rem; height: 1.5rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, transparent); font-size: 0.8125rem; }
.msg__img { display: block; width: 14rem; max-width: 100%; aspect-ratio: 4 / 3; margin: 0.25rem 0; border-radius: var(--r-lg); object-fit: cover; background: var(--muted); }

/* вложения: товар, заказ, голосовое */
.att { display: flex; align-items: center; gap: 0.75rem; margin: 0.25rem 0; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); color: inherit; text-decoration: none; min-width: 15rem; }
.att img { width: 3rem; height: 3rem; border-radius: var(--r-md); object-fit: cover; background: var(--muted); flex: none; }
.att__ico { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); flex: none; }
.att__ico .i { width: 1.25rem; height: 1.25rem; }
.att__t { min-width: 0; font-size: 0.8125rem; }
.att__t b { display: block; font-size: 0.875rem; font-weight: 600; }
.att__t span { color: var(--muted-foreground); }
.voice { display: flex; align-items: center; gap: 0.625rem; min-width: 14rem; margin: 0.125rem 0; }
.voice__play { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); cursor: pointer; flex: none; }
.voice__play .i { width: 1rem; height: 1rem; fill: currentColor; stroke: none; }
.voice__bars { display: flex; align-items: center; gap: 2px; height: 1.5rem; flex: 1; }
.voice__bars i { width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--primary) 35%, transparent); }
.voice__bars i.is-done { background: var(--primary); }
.voice__dur { font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.voice__tr { display: block; margin-top: 0.25rem; padding: 0.375rem 0.5rem; border-radius: var(--r-md); background: var(--muted); font-size: 0.8125rem; color: var(--muted-foreground); }
.voice__tr b { color: var(--foreground); font-weight: 500; }
.typing { align-self: flex-start; padding: 0.5rem 0.75rem; border-radius: var(--r-xl); background: var(--card); color: var(--muted-foreground); font-size: 0.8125rem; box-shadow: var(--shadow-sm); }

/* поле ввода */
.compose { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.625rem 0.875rem; border-top: 1px solid var(--border); }
.compose textarea { flex: 1; min-height: 2.25rem; max-height: 8rem; padding: 0.4375rem 0.75rem; border: 1px solid var(--input); border-radius: var(--r-md); background: var(--card); color: inherit; font: inherit; line-height: 1.4; resize: none; }
.compose textarea:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.compose .js-send[hidden], .compose .js-mic[hidden] { display: none; }

/* карточка покупателя справа */
.cinfo { display: none; min-height: 0; overflow-y: auto; padding: 1rem; border-left: 1px solid var(--border); }
@media (min-width: 1400px) { .chat.has-info .cinfo { display: block; } }
.cinfo__top { display: grid; justify-items: center; gap: 0.25rem; text-align: center; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.cinfo__top .avatar { width: 4rem; height: 4rem; border-radius: 50%; font-size: 1.25rem; }
.cinfo__name { font-weight: 600; }
.cinfo__sub { font-size: 0.8125rem; color: var(--muted-foreground); }
.cinfo dl { display: grid; gap: 0.625rem; margin: 1rem 0; font-size: 0.8125rem; }
.cinfo dt { color: var(--muted-foreground); }
.cinfo dd { margin: 0.125rem 0 0; font-weight: 500; }
.cinfo__acts { display: grid; gap: 0.5rem; }
.cinfo h3 { margin: 1.25rem 0 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--muted-foreground); }
.cinfo__ord { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.8125rem; }

/* телефон и узкое окно: список и переписка по очереди */
@media (max-width: 960px) {
  .chat { grid-template-columns: minmax(0, 1fr); height: max(26rem, calc(100dvh - 12.5rem)); } /* верх 159 + поле 32 + 8 */
  .chat .conv { display: none; }
  .chat.is-open .chat__list { display: none; }
  .chat.is-open .conv { display: flex; }
  .conv__back { display: inline-flex; }
}
@media (max-width: 560px) { .msg { max-width: 88%; } .att { min-width: 0; } .voice { min-width: 0; } }

/* свои сообщения: бледный лайм кнопок «Демо» промо (Павлон 14.10: «вместо розовых сообщений фон давай такой»; розовый давала
   смесь в oklch — у белого нет оттенка, и зелёный уходил по кругу оттенков; все смеси здесь теперь в srgb). В тёмной теме — та же
   зелень, приглушённая к фону карточки */
[data-theme="dark"] { --msg-me: color-mix(in srgb, var(--primary) 30%, var(--card)); }
[data-theme="dark"] .msgs { --chat-grad: radial-gradient(circle at 12% 18%, #2c3f27 0, transparent 52%), radial-gradient(circle at 88% 12%, #3a3f22 0, transparent 50%), radial-gradient(circle at 82% 88%, #26381f 0, transparent 55%), radial-gradient(circle at 18% 90%, #343a26 0, transparent 55%), #1d261b; background: url(chat-pattern-dark.webp?v=2) 0 0 / 24rem 24rem, var(--chat-grad); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --msg-me: color-mix(in srgb, var(--primary) 30%, var(--card)); } :root:not([data-theme="light"]) .msgs { --chat-grad: radial-gradient(circle at 12% 18%, #2c3f27 0, transparent 52%), radial-gradient(circle at 88% 12%, #3a3f22 0, transparent 50%), radial-gradient(circle at 82% 88%, #26381f 0, transparent 55%), radial-gradient(circle at 18% 90%, #343a26 0, transparent 55%), #1d261b; background: url(chat-pattern-dark.webp?v=2) 0 0 / 24rem 24rem, var(--chat-grad); } }

/* значки в шапке переписки и в поле ввода — 22 px, как в Telegram (Павлон 14.10: «иконки какие-то не внятные» — тема рисует 16) */
.conv__head .btn--icon, .compose .btn--icon { width: 2.5rem; height: 2.5rem; color: var(--muted-foreground); }
.conv__head .btn--icon:hover, .compose .btn--icon:hover { color: var(--foreground); }
.conv__head .btn--icon svg.i, .compose .btn--icon svg.i { width: 1.375rem; height: 1.375rem; stroke-width: 1.75; }
.compose .js-send { color: var(--primary-foreground); }
.compose .js-send:hover { color: var(--primary-foreground); }

/* на весь экран: чат поверх всей CRM (меню и всплывающие окна темы — до 50, подсказки — 60) */
.chat.is-full { position: fixed; inset: 0; z-index: 55; height: 100dvh; border: 0; border-radius: 0; }
html.chat-full { overflow: hidden; }

/* буквы в аватарках по центру — как в задачах (замер 14.10: у Onest заглавные сидят выше центра круга) */
.ava { line-height: 1; text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) { .ava { padding-top: 0.18em; } }

/* скролл — как у бокового меню темы (Павлон 14.10): тонкая полоса 8 px без стрелок, ползунок полупрозрачный */
@supports not selector(::-webkit-scrollbar) { :is(.chat__items, .msgs, .cinfo, .compose textarea) { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--foreground) 20%, transparent) transparent; } } /* в Chrome — ::-webkit-scrollbar, иначе стрелки */
:is(.chat__items, .msgs, .cinfo, .compose textarea)::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; background: transparent; }
:is(.chat__items, .msgs, .cinfo, .compose textarea)::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 1rem; background: color-mix(in srgb, var(--foreground) 20%, transparent) padding-box; }
:is(.chat__items, .msgs, .cinfo, .compose textarea)::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
:is(.chat__items, .msgs, .cinfo, .compose textarea)::-webkit-scrollbar-button, :is(.chat__items, .msgs, .cinfo, .compose textarea)::-webkit-scrollbar-corner { display: none; background: transparent; }

/* буквы аватарок векторной картинкой (Павлон 14.10: «сдвинуты вверх») — центр заглавных без округления строки */
.ava { padding: 0; text-box: normal; }
.ltr { display: block; width: 100%; height: 100%; overflow: visible; }
.ltr text { fill: #fff; font-family: inherit; font-size: 34px; font-weight: 600; text-anchor: middle; letter-spacing: 0.02em; }

/* ширина колонок тянется мышью (Павлон 14.10, «как в телеге»): --chat-l / --chat-r ставит chat.js из перетаскивания;
   ручка — полоса 9 px на границе колонок, при наведении и перетаскивании — линия цветом кнопок. Только с 961 px: ниже колонок нет */
@media (min-width: 961px) {
  .chat { position: relative; grid-template-columns: var(--chat-l, 20rem) minmax(0, 1fr); }
  .chat-split { position: absolute; top: 0; bottom: 0; z-index: 3; width: 9px; margin-left: -5px; cursor: col-resize; touch-action: none; outline: none; }
  .chat-split::after { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: transparent; transition: background-color .15s, width .15s, left .15s; }
  .chat-split:hover::after, .chat-split.is-drag::after, .chat-split:focus-visible::after { left: 3px; width: 3px; background: var(--primary); }
  .chat-split--l { left: var(--chat-l, 20rem); }
  .chat-split--r { display: none; left: auto; right: var(--chat-r, 18rem); margin: 0 -4px 0 0; }
}
@media (min-width: 1400px) {
  .chat.has-info { grid-template-columns: var(--chat-l, 20rem) minmax(0, 1fr) var(--chat-r, 18rem); }
  .chat.has-info .chat-split--r { display: block; }
}
@media (max-width: 960px) { .chat-split { display: none; } }
html.is-col-resize, html.is-col-resize * { cursor: col-resize !important; user-select: none !important; }

/* список перестраивается под свою ширину (Павлон 14.10: «поля начинают вылезать за край при сжатии»): контейнерный запрос
   по ширине колонки, а не окна — колонку тянут мышью */
.chat__list { container-type: inline-size; container-name: clist; }
.chat__unmini { display: none; }
@container clist (max-width: 21rem) {
  .chat__lhead .tabs button { padding: 0 0.25rem; font-size: 0.75rem; }
  .ci { gap: 0 0.625rem; padding: 0.5rem; }
  .ci .ava { width: 3rem; height: 3rem; }
  .ci .ci__time { font-size: 0.6875rem; }
}
@container clist (max-width: 17.5rem) {
  .chat__lhead .tabs button { letter-spacing: -0.01em; }
  .ci { grid-template-columns: 2.75rem minmax(0, 1fr) auto; }
  .ci .ava { width: 2.75rem; height: 2.75rem; }
}
/* только кружки, как в Telegram: список уже 192 px схлопнут в полосу 76 px; имя — подсказкой, счётчик — на кружке */
.chat.is-mini .chat__lhead { padding: 0.625rem 0; justify-items: center; }
.chat.is-mini .chat__lhead > :not(.chat__unmini) { display: none; }
.chat.is-mini .chat__unmini { display: inline-flex; color: var(--muted-foreground); }
.chat.is-mini .chat__items { padding: 0.375rem 0.25rem; }
.chat.is-mini .ci { position: relative; display: flex; justify-content: center; padding: 0.375rem 0; }
.chat.is-mini .ci > :not(.avatar):not(.ci__n) { display: none; }
.chat.is-mini .ci .ava { width: 3.375rem; height: 3.375rem; }
.chat.is-mini .ci__n { position: absolute; top: 0.125rem; right: 0.125rem; box-shadow: 0 0 0 2px var(--card); }
.chat.is-mini .ci.is-on, .chat.is-mini .ci.is-on:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); }
/* выбранная строка залита цветом кнопок — кружку светлое кольцо, иначе зелёный «П» на зелёном пропадает */
.ci.is-on .ava { box-shadow: 0 0 0 2px var(--primary-foreground); }
.ci.is-on .ava--logo { background: var(--primary-foreground); } /* буква знака — прорезь: на зелёной строке пропадала, круг был просто зелёным (Павлон 15.10) */
.chat.is-mini .ci.is-on .ava { box-shadow: 0 0 0 2px var(--primary); }

/* запись голосового в живой переписке из кабинета (14.10): полоса на месте поля, как в кабинете покупателя */
.rec { flex: 1; display: flex; align-items: center; gap: 0.625rem; min-height: 2.25rem; padding: 0 0.25rem 0 0.75rem; border: 1px solid var(--input); border-radius: var(--r-md); background: var(--card); font-size: 0.875rem; }
.rec__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #d4483b; animation: rec-blink 1s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .rec__dot { animation: none; } }
.rec__t { font-variant-numeric: tabular-nums; }
.rec__l { flex: 1; color: var(--muted-foreground); }
.rec__x { padding: 0.25rem 0.625rem; border: 0; border-radius: var(--r-md); background: none; color: var(--primary); font: 500 0.8125rem/1.25rem var(--font, inherit); cursor: pointer; }
.rec__x:hover { background: var(--muted); }
.is-rec .js-attach { visibility: hidden; }