/* ─────────────────────────────────────────────
   workivo · AI-секретарь
   Блок на главной, страница секретаря, плавающая панель
   ───────────────────────────────────────────── */

/* Один спокойный цвет вместо трёхцветного градиента: секретарь — часть
   сервиса, а не отдельная неоновая вывеска. Белый на нём — 6.3:1. */
:root {
  --ai-1: #4f46e5;
  --ai-2: #4f46e5;
  --ai-3: #4f46e5;
  --ai-grad: #4f46e5;
  --ai-soft: #f4f4fe;
}

/* ── блок про секретаря на главной ── */

.ai-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid #e3e3f8;
  background: var(--ai-soft);
  padding: clamp(28px, 4vw, 46px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.ai-band > * { position: relative; z-index: 1; }
.ai-band__title { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -.035em; }
.ai-band__lead { margin-top: 14px; font-size: 16px; line-height: 1.55; color: #3c4356; max-width: 46ch; }

/* три шага — нумерованный список, а не «чат» с выдуманными процентами */
.ai-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ai-steps li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid #e3e3f8;
  border-radius: var(--r-md);
  font-size: 15px; line-height: 1.5; color: #3c4356;
}
.ai-steps b { color: var(--ink); }
.ai-steps__n {
  flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ai-2); color: #fff;
  font-size: 14px; font-weight: 700;
}
.ai-features { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.ai-features li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: #3c4356; }
.ai-features svg { flex: none; margin-top: 2px; color: var(--ai-2); }

/* ── знак секретаря: голова с нейросетью ── */
.ai-head { display: block; }
.ai-head.is-glowing { filter: none; }

.ai-mark {
  display: grid; place-items: center; flex: none;
  border-radius: 50%;
  background: var(--ai-grad);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* ── аватар секретаря ── */
.ai-avatar {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--ai-grad); color: #fff;
  box-shadow: var(--shadow-xs);
}
.ai-avatar-lg { width: 66px; height: 66px; border-radius: 22px; }
.ai-avatar-sm { width: 32px; height: 32px; border-radius: 11px; }

.ai-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 700;
  background: #f0ecff; color: var(--ai-2);
}

/* ── страница секретаря ── */
.ai-hero {
  display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
  padding: 26px;
  border-radius: var(--r-xl);
  border: 1px solid #e7e4fb;
  background: var(--ai-soft);
}
.ai-hero__actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.ai-status {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600;
}
.ai-status::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 0 3px var(--success-soft);
}
.ai-status.is-off::before { background: var(--muted-2); box-shadow: 0 0 0 3px #eceef2; }

.ai-layout { display: grid; grid-template-columns: 1fr 330px; gap: 22px; align-items: start; margin-top: 20px; }
.ai-side { position: sticky; top: calc(var(--header-h) + 18px); display: flex; flex-direction: column; gap: 16px; }

.ai-queue { display: flex; flex-direction: column; gap: 12px; }
.ai-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  padding: 16px 18px;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.ai-item.is-checked { border-color: var(--ai-2); box-shadow: 0 0 0 3px rgba(79, 70, 229, .14); }
.ai-item__head { display: flex; align-items: flex-start; gap: 12px; }
.ai-item__check { width: 20px; height: 20px; accent-color: var(--ai-2); cursor: pointer; flex: none; margin-top: 3px; }
.ai-item__title { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; }
.ai-item__sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ai-item__reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ai-item__draft {
  margin-top: 12px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 12px 14px;
}
.ai-item__draft textarea {
  width: 100%; min-height: 92px; border: 0; background: transparent; resize: vertical;
  font-size: 13.5px; line-height: 1.55; color: #39404f; outline: none;
}
.ai-item__foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

.ai-bulk {
  position: sticky; bottom: calc(16px + var(--cookie-offset, 0px)); z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  background: var(--ink); color: #fff;
  box-shadow: var(--shadow-lg);
  margin-top: 14px;
}
.ai-bulk .btn-primary { background: var(--ai-grad); border: 0; box-shadow: none; }

.ai-insight {
  display: flex; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
}
.ai-insight__ico { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.ai-insight.is-warning .ai-insight__ico { background: var(--warning-soft); color: var(--warning); }
.ai-insight.is-info .ai-insight__ico { background: var(--accent-soft); color: var(--accent); }
.ai-insight.is-success .ai-insight__ico { background: var(--success-soft); color: var(--success); }

.ai-log { display: flex; flex-direction: column; }
.ai-log__item { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.ai-log__item:last-child { border-bottom: 0; }
.ai-log__ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; background: #f0ecff; color: var(--ai-2); }

.ai-range { width: 100%; accent-color: var(--ai-2); }
.ai-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-mode__btn {
  padding: 12px; border-radius: var(--r-md); cursor: pointer; text-align: left;
  border: 1.5px solid var(--line); background: var(--surface);
  transition: all var(--fast);
}
.ai-mode__btn:hover { border-color: #cfd6e4; }
.ai-mode__btn.is-active { border-color: var(--ai-2); background: #faf8ff; }
.ai-mode__btn b { display: block; font-size: 14px; }
.ai-mode__btn span { font-size: 12px; color: var(--muted); }

/* ── плавающая кнопка секретаря ── */
.ai-fab {
  position: fixed;
  right: 24px;
  bottom: calc(24px + var(--cookie-offset, 0px));
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 22px 0 8px;
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  color: #fff;
  background: var(--ai-grad);
  box-shadow: var(--shadow-md), 0 2px 8px -2px rgba(14, 20, 32, .2);
  /* одно появление — без бесконечного покачивания, перелива и пульса */
  animation: fabIn .5s var(--ease);
  transition: transform var(--normal), box-shadow var(--normal);
}
.ai-fab:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-lg), 0 3px 10px -2px rgba(14, 20, 32, .25);
}
.ai-fab:active { transform: translateY(-1px) scale(.99); }

.ai-fab__orb {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(4px);
}

.ai-fab__text { text-align: left; line-height: 1.15; }
.ai-fab__text b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.ai-fab__text small { display: block; font-size: 11.5px; opacity: .78; margin-top: 2px; }

.ai-fab__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  border: 2px solid var(--bg);
}

/* подсказка при первом появлении */
.ai-hint {
  position: fixed;
  right: 24px;
  bottom: calc(96px + var(--cookie-offset, 0px));
  z-index: 94;
  max-width: 280px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  line-height: 1.5;
  animation: hintIn .4s var(--ease) both;
}
.ai-hint::after {
  content: '';
  position: absolute;
  right: 34px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: var(--ink);
  transform: rotate(45deg);
}
.ai-hint b { display: block; margin-bottom: 3px; }
.ai-hint button {
  margin-top: 10px;
  border: 0;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ai-hint button:hover { background: rgba(255, 255, 255, .26); }

@keyframes fabIn { from { opacity: 0; transform: translateY(24px) scale(.85); } }
@keyframes hintIn { from { opacity: 0; transform: translateY(10px); } }

.ai-panel {
  position: fixed; right: 24px; bottom: calc(94px + var(--cookie-offset, 0px)); z-index: 96;
  width: 390px; max-width: calc(100vw - 32px);
  max-height: min(620px, calc(100vh - 140px));
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: panelIn .28s var(--ease);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.ai-panel__head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  background: var(--ai-soft);
}
.ai-panel__body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ai-msg { max-width: 88%; font-size: 14px; line-height: 1.5; padding: 11px 14px; border-radius: 16px; animation: bubbleIn .3s var(--ease); }
.ai-msg.is-bot { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 6px; }
.ai-msg.is-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.ai-msg__block { align-self: stretch; max-width: 100%; padding: 0; background: none; }
.ai-card {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px; background: var(--surface); color: var(--ink);
  display: flex; flex-direction: column; gap: 8px;
}
.ai-card + .ai-card { margin-top: 8px; }
.ai-card__top { display: flex; align-items: center; gap: 10px; }
.ai-card__title { font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.ai-card__sub { font-size: 12.5px; color: var(--muted); }
.ai-panel__quick { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 16px 12px; }
.ai-panel__quick .chip { font-size: 12.5px; height: 32px; }
.ai-panel__foot { display: flex; gap: 9px; padding: 12px 14px; border-top: 1px solid var(--line-2); }
.ai-panel__foot input {
  flex: 1; height: 42px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  outline: none; font-size: 14px;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.ai-panel__foot input:focus { border-color: var(--ai-2); box-shadow: 0 0 0 4px rgba(79, 70, 229, .16); }
.ai-panel__send { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--ai-grad); color: #fff; }

.ai-typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); animation: typing 1.1s infinite; }
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ── адаптив ── */
@media (max-width: 980px) {
  .ai-layout { grid-template-columns: 1fr; }
  .ai-side { position: static; }
  .ai-band { grid-template-columns: 1fr; padding: 30px; }
}

@media (max-width: 860px) {
  .ai-fab { right: 14px; bottom: calc(90px + var(--cookie-offset, 0px)); height: 54px; padding: 0 18px 0 6px; gap: 10px; }
  .ai-fab__orb { width: 42px; height: 42px; }
  .ai-fab__text small { display: none; }
  .ai-hint { right: 14px; bottom: calc(154px + var(--cookie-offset, 0px)); max-width: min(280px, calc(100vw - 28px)); }
  .ai-panel { right: 12px; left: 12px; bottom: calc(148px + var(--cookie-offset, 0px)); width: auto; max-height: calc(100vh - 220px); }
}

@media (max-width: 560px) {
  .ai-hero { padding: 20px; }
  .ai-hero__actions { margin-left: 0; width: 100%; }
  .ai-hero__actions .btn { flex: 1; }
}

/* на телефоне секретарь уже есть во вкладке нижней навигации — плавающая
   кнопка там только закрывала бы содержимое */
@media (max-width: 860px) {
  .ai-fab, .ai-hint { display: none; }
}