/* ИИ-ассистент CRM Petala (petala/crm-ai.mjs, 26.10.2026; образец — DOCA site/crm-ai.mjs). Знак — живой шар в цветах Petala:
   олива кнопок и розовый цветов; у DOCA шар Павлон назвал «огонь», звёздочка в линию была «не нравится» */
/* живой (Павлон 27.10: «свечение иконки ИИ или вращение — оживить»): оборот 4 с вместо 7 и дышащее свечение розово-фиолетовым */
.ai-orb { position: relative; display: block; width: 1.25rem; height: 1.25rem; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgb(95 122 28 / .14), 0 2px 8px -2px rgb(194 85 122 / .55); animation: ai-glow 2.8s ease-in-out infinite; }
.ai-orb::before { content: ""; position: absolute; inset: -30%; background: conic-gradient(from 0deg, #5f7a1c, #c2557a, #8a5cc8, #c2557a, #5f7a1c); animation: ai-orb 4s linear infinite; }
@keyframes ai-glow { 0%, 100% { box-shadow: 0 0 0 1px rgb(95 122 28 / .14), 0 0 4px 0 rgb(194 85 122 / .35); } 50% { box-shadow: 0 0 0 1px rgb(95 122 28 / .14), 0 0 12px 3px rgb(160 92 200 / .6); } }
@media (prefers-reduced-motion: reduce) { .ai-orb { animation: none; } }
.ai-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / .85), rgb(255 255 255 / 0) 52%), radial-gradient(circle at 70% 80%, rgb(27 28 25 / .18), rgb(27 28 25 / 0) 60%); }
@keyframes ai-orb { to { transform: rotate(360deg); } }
.ai-btn:hover .ai-orb::before { animation-duration: 2.4s; }
@media (prefers-reduced-motion: reduce) { .ai-orb::before { animation: none; } }
.ai-btn { position: relative; }
.ai-btn__n { position: absolute; top: -0.375rem; right: -0.375rem; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font: 600 0.6875rem/1.125rem var(--font-sans-base, sans-serif); text-align: center; box-shadow: 0 0 0 2px var(--background); }
.ai-btn__n[data-n="0"] { display: none; }
.nav .ai-orb { width: 1rem; height: 1rem; margin: 0 0.0625rem; }

/* окно ассистента (28.10): боковая панель в виде .sheet CRM, немодальная — страница и знакомство рядом остаются живыми.
   Вкладки «Решения» (прежнее окно шара) и «Разговор». Ниже знакомства (9000) и тостов (60), выше шапки и меню */
.aiw { position: fixed; z-index: 40; top: 0; right: 0; width: min(26rem, 100vw); height: 100dvh; display: flex; flex-direction: column; background: var(--card); color: var(--card-foreground); border-left: 1px solid var(--border); box-shadow: -8px 0 32px rgb(0 0 0 / .12); animation: sheet-in .22s cubic-bezier(.2, .8, .2, 1); }
.aiw[hidden] { display: none; }
.aiw__head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1rem 0.875rem 1.25rem; }
.aiw__head { gap: 0.25rem; }
.aiw__head .ai-orb { width: 2rem; height: 2rem; margin-right: 0.5rem; }
.aiw__ttl { margin-right: auto; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.aiw__head .btn { flex: none; }
.aiw__head .btn[hidden], .aiw__hist[hidden] { display: none; }   /* .btn и список — flex, атрибут hidden без этого не прячет */
.aiw__head .btn[aria-pressed="true"] { background: var(--accent); }
.aiw__go { margin: 0.25rem 0.375rem 0; }
.aiw__tabs { display: flex; margin: 0 1.25rem 0.75rem; }
.aiw__tabs button { flex: 1 1 0; min-width: 0; }
.aiw__main { flex: 1; min-height: 0; display: flex; border-top: 1px solid var(--border); }
.aiw__chat { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aiw__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.875rem 1.25rem 1rem; }
/* во весь экран (Павлон 28.10): слева разговоры, лента и поле — колонкой 46rem посередине, чтобы строка не тянулась на 1900 px */
.aiw--full { left: 0; width: auto; border-left: 0; box-shadow: none; animation: fade-in .16s ease-out; }
.aiw--full .aiw__tabs { width: 24rem; max-width: calc(100% - 2.5rem); }
.aiw--full .aiw__body, .aiw--full .aiw__form { padding-inline: max(1.25rem, calc((100% - 46rem) / 2)); }
.aiw__hist { flex: none; width: 17rem; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.875rem 0.75rem 1rem; overflow-y: auto; border-right: 1px solid var(--border); background: var(--muted); }
/* список разговоров — сбоку во весь экран или на месте ленты по кнопке «История» */
.aiw__hbody { display: flex; flex-direction: column; gap: 0.5rem; }
.aiw__nt { width: 100%; }
.aiw__hl { list-style: none; display: grid; gap: 0.125rem; margin: 0; padding: 0; }
.aiw__hl li { display: flex; align-items: center; border-radius: var(--r-md); }
.aiw__hl li:hover, .aiw__hl li.is-on { background: var(--card); }
.aiw__hist .aiw__hl li:hover, .aiw__hist .aiw__hl li.is-on { box-shadow: var(--shadow-sm); }
.aiw__hbody .aiw__hl li:hover, .aiw__hbody .aiw__hl li.is-on { background: var(--muted); }
.aiw__hl [data-ai-talk] { flex: 1; min-width: 0; display: grid; gap: 0.0625rem; padding: 0.5rem 0.625rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.aiw__hl [data-ai-talk] span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.875rem; }
.aiw__hl time { font-size: 0.75rem; color: var(--muted-foreground); }
.aiw__hx { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; margin-right: 0.25rem; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted-foreground); cursor: pointer; opacity: 0; }
.aiw__hx .i { width: 0.875rem; height: 0.875rem; }
.aiw__hl li:hover .aiw__hx, .aiw__hx:focus-visible, .aiw__hl li.is-on .aiw__hx { opacity: 1; }
.aiw__hx:hover { color: var(--destructive); }
@media (hover: none) { .aiw__hx { opacity: 1; } }
.aiw__he { margin: 0.25rem 0.25rem 0; font-size: 0.8125rem; color: var(--muted-foreground); }
/* кнопка «Разговор» в карточке «Поручить ИИ-ассистенту» */
.aipg__talk { gap: 0.375rem; }
.card__head:has(.aipg__talk) { align-items: center; }   /* заголовок 23 px и кнопка 36 px — середина к середине */
.aiw__body > .aip { margin: -0.5rem -0.375rem 0; }
.aip__list { display: grid; gap: 0.375rem; padding: 0 0.125rem 0.5rem; }
.aip__h { padding: 0.5rem 0.375rem 0; font-size: 0.75rem; color: var(--muted-foreground); }
.aip__warn, .aip__warn b { color: var(--destructive); }
/* реплики: менеджер — справа в цвете кнопок, ассистент — слева на сером; ответ по данным — карточкой во всю ширину */
.aim { align-self: flex-start; max-width: 88%; padding: 0.625rem 0.875rem; border-radius: var(--r-xl); border-bottom-left-radius: var(--r-sm); background: var(--muted); font-size: 0.875rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.aim--me { align-self: flex-end; border-radius: var(--r-xl); border-bottom-right-radius: var(--r-sm); background: var(--primary); color: var(--primary-foreground); }
.aim--data { align-self: stretch; max-width: none; padding: 0; background: none; white-space: normal; }
.aim--data .aians { border-radius: var(--r-xl); border-bottom-left-radius: var(--r-sm); }
.aim--err { color: var(--destructive); }
.aim--err .btn { color: var(--foreground); }   /* красный — только текст ошибки, кнопка «Спросить ещё раз» обычная */
.aim .aiq__act { white-space: normal; }
.aim__done { font-size: 0.8125rem; color: var(--success); }
.aim--wait { display: flex; gap: 0.25rem; padding: 0.875rem 1rem; }
.aim--wait i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--muted-foreground); animation: aim-dot 1.1s ease-in-out infinite; }
.aim--wait i:nth-child(2) { animation-delay: .15s; }
.aim--wait i:nth-child(3) { animation-delay: .3s; }
@keyframes aim-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .aim--wait i { animation: none; opacity: .6; } }
.aiw__try { display: flex; flex-wrap: wrap; gap: 0.375rem; padding-top: 0.25rem; }
.aiw__try button { min-height: 2rem; padding: 0.3125rem 0.75rem; line-height: 1.3; text-align: left; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: inherit; font: inherit; font-size: 0.8125rem; cursor: pointer; }
.aiw__try button:hover { background: var(--accent); }
.aiw__new { align-self: center; margin-top: 0.5rem; padding: 0.375rem 0.5rem; border: 0; background: none; color: var(--muted-foreground); font: inherit; font-size: 0.8125rem; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; cursor: pointer; }
.aiw__new:hover { color: var(--foreground); }
.aiw__form { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.75rem 1rem 1rem 1.25rem; border-top: 1px solid var(--border); }
.aiw__form[hidden] { display: none; }
.aiw__form .input { flex: 1; height: auto; min-height: 2.5rem; max-height: 10rem; padding: 0.5625rem 0.75rem; font: inherit; font-size: 0.875rem; line-height: 1.4; resize: none; }
.aiw__form .btn { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.aiw__form .btn:disabled { opacity: .4; }
.aiw__form .btn[hidden] { display: none; }
/* микрофон: идёт запись — красная точка дышит, как индикатор записи в телефоне */
.aiw__mic { color: var(--muted-foreground); }
.aiw__mic:hover { color: var(--foreground); background: var(--accent); }
.aiw__mic[aria-pressed="true"] { color: #fff; background: var(--destructive); animation: aiw-rec 1.4s ease-in-out infinite; }
@keyframes aiw-rec { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--destructive) 45%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--destructive) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .aiw__mic[aria-pressed="true"] { animation: none; } }
@media (max-width: 599px) {
  .aiw { width: 100vw; border-left: 0; }
  .aiw__head { padding-left: 1rem; }
  .aiw__fb { display: none; }   /* окно на телефоне и так во весь экран */
  .aiw__tabs { margin-inline: 1rem; }
  .aiw__body { padding-inline: 1rem; }
  .aiw__form { padding: 0.625rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom)) 1rem; }
  .aiw__form .input { font-size: 1rem; }   /* меньше 16 px — iPhone приближает страницу при фокусе */
  body:has(.aiw:not([hidden])) { overflow: hidden; }
}

/* карточка решения: одна разметка для окна и страницы */
.aiq { display: grid; gap: 0.25rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
.aiq__top { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--muted-foreground); }
.aiq__cost, .aiq__ok { margin-left: auto; white-space: nowrap; }
.aiq__ok { color: var(--success); }
.aiq__t { font-weight: 600; line-height: 1.35; }
.aiq__s { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--muted-foreground); }
.aiq__act { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; }
.aiq__act .btn { height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; }
.aiq.is-done { background: var(--muted); border-color: transparent; }
.aiq--full { padding: 1rem; gap: 0.375rem; }
.aiq--full .aiq__t { font-size: 0.9375rem; }
.aiq__who { list-style: none; margin: 0.5rem 0 0; padding: 0; border-top: 1px solid var(--border); }
.aiq__who li { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid var(--border); font-size: 0.8125rem; }
.aiq__who b { font-weight: 500; }
.aiq__who span { color: var(--muted-foreground); }
.aiq__lt { grid-column: 1 / -1; margin: 0.125rem 0 0.25rem; padding: 0.5rem 0.75rem; border-radius: var(--r-md); background: var(--muted); color: var(--foreground); line-height: 1.5; white-space: pre-line; }
.aiq__lt.is-wait { color: var(--muted-foreground); }
.aiq__sent { margin-top: 0.5rem; }
/* черновик поручения правится прямо в карточке */
.aiq__ed { display: block; grid-column: 1 / -1; width: 100%; height: auto; margin: 0.25rem 0; padding: 0.5rem 0.75rem; font: inherit; font-size: 0.8125rem; line-height: 1.5; resize: vertical; background: var(--card); }
label.aiq__msg { display: block; }
.aiq.is-done .aiq__lt { background: var(--card); }   /* сделанная карточка сама серая — письмо на сером терялось */
.aiq__sent summary { width: max-content; max-width: 100%; padding: 0.25rem 0; cursor: pointer; font-size: 0.8125rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.aiq__msg { margin: 0.5rem 0 0; padding: 0.625rem 0.75rem; border-radius: var(--r-md); background: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.aiq__msg span { display: block; margin-bottom: 0.125rem; font-size: 0.75rem; color: var(--muted-foreground); }
.aiq__st { margin: 0.25rem 0 0; font-size: 0.8125rem; }
.aiq__go { justify-self: start; margin-top: 0.25rem; font-size: 0.8125rem; font-weight: 500; color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
/* цепочка как в мессенджере: отправлено → доставлено → прочитано → ответили */
.aich { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0; margin: 0.375rem 0 0; padding: 0; font-size: 0.75rem; }
.aich li { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--muted-foreground); }
.aich li + li::before { content: ""; width: 0.875rem; height: 1px; margin: 0 0.375rem; background: var(--border); }
.aich .is-ok { color: var(--foreground); }
.aich .is-ok::after { content: "✓"; color: var(--success); font-weight: 600; }
.aich .is-win { color: var(--success); font-weight: 600; }
.aich .is-cur { font-style: italic; }
.aiq__res { list-style: none; margin: 0.5rem 0 0; padding: 0; border-top: 1px solid var(--border); }
.aiq__res li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid var(--border); font-size: 0.8125rem; }
.aiq__res b { font-weight: 500; }
.aiq__res span { color: var(--muted-foreground); }
.aiq__res .is-win { color: var(--success); font-weight: 500; }

/* журнал «Сделал сегодня» */
.ail { list-style: none; margin: 0; padding: 0; }
.ail li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid var(--border); font-size: 0.8125rem; line-height: 1.4; }
.ail li:first-child { border-top: 0; }
.ail time { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.fpop .ail { padding: 0 0.5rem; }

/* страница раздела */
.aipg { display: grid; gap: 1rem; }
/* в зелёной плашке «Принёс» шар крупнее, без кольца (Павлон 27.10: «какая-то обводка — убрать»), подложка темнее фона, а не светлее,
   свечение — только мягкий ореол */
.aipg .kpi__ico .ai-orb { width: 1.625rem; height: 1.625rem; animation-name: ai-glow-on; }
.aipg .kpi--accent .kpi__ico { background: rgb(0 0 0 / .2); }
@keyframes ai-glow-on { 0%, 100% { box-shadow: 0 0 4px 0 rgb(255 190 228 / .25); } 50% { box-shadow: 0 0 12px 3px rgb(255 190 228 / .55); } }
/* Павлон 27.10: «что-то не то, возможно шарик светлым надо», «или подложку убрать» — оливковый сектор шара сливался с зелёной
   плашкой. Выбрал из четырёх вариантов «без подложки»: светлый жемчужный шар 32 px прямо на зелёном (тёмная подложка, белая плашка
   и прежний шар — в git, коммит 46c8caa) */
.aipg .kpi--accent .kpi__ico { background: none; }
.aipg .kpi--accent .ai-orb { width: 2rem; height: 2rem; }
.aipg .kpi--accent .ai-orb::before { background: conic-gradient(from 0deg, #ffffff, #f7c3da, #d6c0f7, #f7c3da, #ffffff); }
.aipg__cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.aipg__col { display: grid; gap: 1rem; min-width: 0; }
.aipg .card { padding: 1.25rem 1.5rem; display: grid; gap: 0.875rem; }
.aipg__list { display: grid; gap: 0.5rem; }
.aipg__empty { margin: 0; color: var(--muted-foreground); }
.aiask { display: flex; gap: 0.5rem; }
.aiask .input { flex: 1 1 auto; min-width: 0; padding-left: 0.75rem; }
.aiask__ex { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.aiask__ex button { min-height: 1.75rem; padding: 0.25rem 0.625rem; line-height: 1.25; text-align: left; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: inherit; font: inherit; font-size: 0.8125rem; cursor: pointer; }
.aiask__ex button:hover { background: var(--accent); }
/* ответ на вопрос под полем: колонка узкая — название и цифры друг под другом */
.aians { background: var(--muted); border-color: transparent; }
.aians .aiq__who li { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
.aians .aiq__who li:has(span:empty) { padding-top: 0.75rem; }
.aians .aiask__ex { margin-top: 0.375rem; }
.aitask { display: grid; gap: 0.5rem; padding: 0.875rem 0; border-top: 1px solid var(--border); }
.aitask:first-of-type { border-top: 0; padding-top: 0; }
.aitask b { font-weight: 600; }
.aitask p { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--muted-foreground); }
.aitask .tabs, .ailim .tabs { justify-self: start; }
.tabs button[aria-checked="true"] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }
.ailim { display: grid; gap: 0.5rem; padding-top: 0.875rem; border-top: 1px solid var(--border); }
.ailim__row { display: flex; align-items: center; gap: 0.5rem; }
.ailim__row .input { width: 8rem; padding-left: 0.75rem; }
.ailim__bar { height: 0.375rem; border-radius: 999px; background: var(--muted); overflow: hidden; }
.ailim__bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.ailim__bar.is-warn i { background: var(--destructive); }
.ailim p { margin: 0; font-size: 0.8125rem; color: var(--muted-foreground); }
@media (max-width: 1099px) { .aipg__cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .aipg .card { padding: 1rem; }
  /* показатели 2×2: столбиком они занимали 600 px до первого решения */
  .aipg .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .aipg .kpi { padding: 0.875rem; gap: 0.25rem; }
  .aipg .kpi__top { font-size: 0.8125rem; }
  .aipg .kpi__ico { display: none; }
  .aipg .kpi__val { font-size: 1.375rem; }
  .aipg .kpi__note { font-size: 0.6875rem; line-height: 1.3; }
  .aiq__who li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .aiask { flex-direction: column; }
}