/* ============================================================
   SAVVY — Помощник «Савва» в кабинете пайщика.
   Панель на дашборде + окно диалога. Опирается на токены style.css
   (зелёная палитра, Gilroy/Montserrat, .card). Тон — тёплый, спокойный.
   ============================================================ */

/* Атрибут hidden должен прятать элементы, у которых базовый display:flex —
   иначе flex перебивает UA-правило [hidden]{display:none} (как .auth-screen в style.css). */
.savva[hidden],
.savva-chips[hidden],
.savva-typing[hidden],
.savva-input[hidden],
.savva-off[hidden] { display:none; }

/* Карточка помощника — поверх базовой .card. Мягкий зелёный акцент слева. */
.savva { position:relative; overflow:hidden; }
.savva::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--green-light), var(--green-main));
}

/* ── Шапка: аватар + имя ─────────────────────────────────────── */
.savva-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.savva-ava {
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--green-light), var(--green-main));
  color:#fff; font-weight:800; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(64,145,108,0.28);
  font-family:'Gilroy','Montserrat',sans-serif;
}
.savva-ava.sm { width:30px; height:30px; font-size:13px; box-shadow:none; }
.savva-head-text { flex:1; min-width:0; }
.savva-name { font-size:17px; font-weight:800; color:var(--green-dark); letter-spacing:.2px; }
.savva-role { font-size:12px; color:var(--gray-500); font-weight:500; }
.savva-status {
  font-size:11px; font-weight:700; color:var(--green-main);
  background:var(--green-subtle); border:1px solid var(--green-pale);
  padding:4px 10px; border-radius:50px; white-space:nowrap;
}

/* ── Приветствие «Савва уже знает вашу семью» ────────────────── */
.savva-greeting {
  background:var(--green-subtle); border:1px solid var(--green-pale);
  border-radius:var(--radius-sm); padding:16px 18px; margin-bottom:16px;
}
.savva-greeting-title { font-size:15px; font-weight:700; color:var(--green-dark); margin-bottom:10px; }
.savva-greeting.soft .savva-greeting-title { margin-bottom:6px; }
.savva-facts { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.savva-fact {
  font-size:13px; font-weight:600; color:var(--green-dark);
  background:#fff; border:1px solid var(--green-pale);
  padding:6px 12px; border-radius:50px;
}
.savva-need { font-size:13px; color:var(--text-secondary); line-height:1.5; margin:0; }
.savva-need b { color:var(--green-dark); font-weight:700; }
.savva-greeting.soft .savva-need { margin-top:2px; }

/* ── Чипы-подсказки ──────────────────────────────────────────── */
.savva-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.savva-chip {
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--green-dark); background:#fff;
  border:1px solid var(--green-pale); border-radius:50px;
  padding:9px 16px; transition:all .2s ease;
}
.savva-chip:hover { background:var(--green-bg); border-color:var(--green-light); }
.savva-chip:disabled { opacity:.5; cursor:default; }

/* ── Лента диалога ───────────────────────────────────────────── */
.savva-feed {
  display:flex; flex-direction:column; gap:12px;
  max-height:360px; overflow-y:auto; padding:4px 2px;
  scroll-behavior:smooth;
}
.savva-feed:empty { display:none; }
.savva-msg { display:flex; align-items:flex-end; gap:8px; max-width:100%; animation:fadeUp .35s ease; }
.savva-msg.is-savva { justify-content:flex-start; }
.savva-msg.is-user { justify-content:flex-end; }
.savva-bubble {
  max-width:80%; padding:11px 15px; border-radius:16px;
  font-size:14px; line-height:1.55; white-space:pre-wrap; word-wrap:break-word;
}
.savva-msg.is-savva .savva-bubble {
  background:var(--green-subtle); border:1px solid var(--green-pale);
  color:var(--text-primary); border-bottom-left-radius:6px;
}
.savva-msg.is-user .savva-bubble {
  background:var(--green-main); color:#fff; border-bottom-right-radius:6px;
}

/* ── «Савва печатает…» ───────────────────────────────────────── */
.savva-typing { display:flex; align-items:center; gap:8px; margin-top:12px; }
.savva-typing-text { font-size:12px; color:var(--gray-500); font-weight:500; }
.savva-dots { display:inline-flex; gap:4px; align-items:center; }
.savva-dots i {
  width:6px; height:6px; border-radius:50%; background:var(--green-light);
  animation:savvaBounce 1.2s infinite ease-in-out both;
}
.savva-dots i:nth-child(2) { animation-delay:.16s; }
.savva-dots i:nth-child(3) { animation-delay:.32s; }
@keyframes savvaBounce {
  0%, 80%, 100% { transform:scale(.6); opacity:.5; }
  40% { transform:scale(1); opacity:1; }
}

/* ── Поле ввода ──────────────────────────────────────────────── */
.savva-input { display:flex; gap:10px; margin-top:16px; align-items:center; }
.savva-input input {
  flex:1; min-width:0; font-family:inherit; font-size:14px;
  padding:12px 16px; border:1.5px solid var(--gray-300);
  border-radius:50px; background:#fff; color:var(--text-primary);
  transition:border-color .2s ease;
}
.savva-input input:focus { outline:none; border-color:var(--green-light); }
.savva-input input::placeholder { color:var(--gray-400); }
.savva-input button {
  flex-shrink:0; font-family:inherit; font-size:14px; font-weight:700;
  color:#fff; background:var(--green-main); border:none; cursor:pointer;
  padding:12px 22px; border-radius:50px; transition:background .2s ease;
}
.savva-input button:hover { background:var(--green-dark); }
.savva-input.is-busy { opacity:.65; pointer-events:none; }

/* ── Плашка «Савва скоро заработает» ─────────────────────────── */
.savva-off {
  display:flex; align-items:center; gap:10px; margin-top:16px;
  background:var(--green-subtle); border:1px dashed var(--green-pale);
  border-radius:var(--radius-sm); padding:14px 16px;
  font-size:13px; color:var(--text-secondary); line-height:1.5;
}
.savva-off::before { content:"🌱"; font-size:16px; flex-shrink:0; }

/* ── Адаптив ─────────────────────────────────────────────────── */
@media (max-width:900px) {
  .savva-bubble { max-width:85%; }
  .savva-feed { max-height:300px; }
  .savva-input button { padding:13px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .savva-msg, .savva-feed { animation:none; scroll-behavior:auto; }
  .savva-dots i { animation:none; opacity:.7; }
}