/* Чат с ботом на главной akrumio.com — те же стили, что у «Связи с Akrumio» в кабинете
   (src/index.css, блок .sc-*), скопированы при сборке виджета 16.09.2026. Правки вида —
   в обоих местах. Файлов здесь нет, поэтому .sc-clip/.sc-attach/.sc-img не нужны, но не мешают. */
.sc-fab { position: fixed; right: 18px; bottom: 26px; z-index: 90; width: 60px; height: 60px; border: none; border-radius: 50%; background: linear-gradient(180deg, #5a8bff, #2f6bff); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 24px -6px rgba(47, 107, 255, 0.65), 0 2px 4px rgba(16, 24, 40, 0.15); -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease; }
.sc-fab:active { transform: scale(0.94); }
.sc-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #e8590c; color: #fff; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #f3f5fb; }
.sc-overlay { position: fixed; inset: 0; z-index: 95; width: 100vw; overflow: hidden; background: rgba(11, 18, 32, 0.35); display: flex; align-items: flex-end; justify-content: center; animation: sc-fade 0.18s ease; }
@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
.sc-sheet { display: flex; flex-direction: column; width: 100%; max-width: min(640px, 100vw); height: 90vh; height: 90dvh; background: #fff; border-radius: 28px 28px 0 0; box-shadow: 0 -10px 40px -10px rgba(16, 24, 40, 0.35); overflow: hidden; animation: sc-up 0.24s cubic-bezier(0.2, 0.8, 0.3, 1); transition: transform 0.2s ease; }
@keyframes sc-up { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sc-top { flex: none; touch-action: none; }
.sc-handle { display: block; width: 36px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: rgba(15, 23, 42, 0.14); }
.sc-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px 14px 16px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
.sc-head-text { flex: 1 1 0; min-width: 0; }
.sc-title { font-size: 17px; font-weight: 800; }
.sc-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #62697a; }
.sc-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fb36b; flex: none; }
.sc-tg { font-size: 12px; font-weight: 700; color: #2f6bff; white-space: nowrap; text-decoration: none; }
.sc-close { width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(15, 23, 42, 0.06); color: #62697a; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.sc-feed { flex: 1 1 0; overflow-y: auto; padding: 14px 14px 10px; background: #f7f9fd url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%232f6bff%27%20stroke-opacity%3D%270.10%27%20stroke-width%3D%271.6%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2024c5-2%2010-2%2015%200v18c-5-2-10-2-15%200z%27%2F%3E%3Cpath%20d%3D%27M50%2024c-5-2-10-2-15%200v18c5-2%2010-2%2015%200z%27%2F%3E%3Cpath%20d%3D%27M88%2072l2.6%205.4%206%20.9-4.3%204.2%201%205.9-5.3-2.8-5.3%202.8%201-5.9-4.3-4.2%206-.9z%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%2792%27%20r%3D%276%27%2F%3E%3Cpath%20d%3D%27M74%2020c6%200%2010%204%2010%209s-4%209-10%209h-6l-6%205v-5c-3-1-5-5-5-9s4-9%2010-9z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.sc-empty { margin: auto; text-align: center; color: #9aa1b0; font-size: 0.92rem; padding: 24px; }
.sc-day { display: flex; justify-content: center; margin: 6px 0 2px; }
.sc-day span { padding: 4px 12px; border-radius: 99px; background: rgba(15, 23, 42, 0.06); color: #62697a; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; }
.sc-row { display: flex; gap: 8px; align-items: flex-end; }
.sc-row-mine { justify-content: flex-end; }
.sc-ava { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; }
.sc-ava img { display: block; width: 28px; height: 28px; object-fit: cover; }
.sc-col { max-width: 78%; min-width: 0; }
.sc-who { font-size: 11px; font-weight: 800; color: #9aa1b0; margin: 0 0 3px 2px; }
.sc-who-owner { color: #1f8a4f; }
.sc-bubble { padding: 10px 14px 8px 12px; font-size: 15px; line-height: 1.4; word-break: break-word; }
.sc-bubble-mine { border-radius: 18px 18px 4px 18px; background: #2f6bff; color: #fff; box-shadow: 0 4px 10px -4px rgba(47, 107, 255, 0.5); }
.sc-bubble-theirs { border-radius: 18px 18px 18px 4px; background: #fff; color: #0b1220; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 10px -4px rgba(16, 24, 40, 0.12); }
.sc-text { white-space: pre-wrap; }
.sc-time { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; color: #9aa1b0; }
.sc-bubble-mine .sc-time { color: #fff; opacity: 0.8; }
.sc-via { opacity: 0.85; }
.sc-img img { display: block; max-width: 240px; max-height: 220px; border-radius: 12px; margin-bottom: 6px; }
.sc-file { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: inherit; text-decoration: underline; margin-bottom: 4px; }
.sc-bottom { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 10px 0 max(12px, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid rgba(15, 23, 42, 0.06); }
.sc-hints { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sc-hints::-webkit-scrollbar { display: none; }
.sc-hint { flex: none; height: 36px; padding: 0 14px; border-radius: 99px; background: #fff; border: 1.5px solid rgba(47, 107, 255, 0.35); color: #2f6bff; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.sc-attach { display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 0.85rem; color: #62697a; }
.sc-error { padding: 0 16px; color: #c92a2a; font-size: 0.85rem; }
.sc-compose { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.sc-clip { width: 40px; height: 40px; border: none; border-radius: 50%; background: none; color: #62697a; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
/* 16px, не меньше: иначе Safari на iPhone увеличивает страницу при фокусе, и окно вылезает за экран */
.sc-input { flex: 1 1 0; min-width: 0; height: 44px; padding: 0 16px; border: none; border-radius: 22px; background: rgba(15, 23, 42, 0.05); font: inherit; font-size: 16px; color: #1d1d1f; outline: none; }
.sc-input::placeholder { color: #9aa1b0; }
.sc-send { width: 44px; height: 44px; border: none; border-radius: 50%; background: #2f6bff; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; box-shadow: 0 6px 14px -6px rgba(47, 107, 255, 0.6); }
.sc-send:disabled { opacity: 0.45; box-shadow: none; cursor: default; }
.sc-send-dots { font-weight: 900; }
@media (min-width: 700px) { .sc-sheet { border-radius: 28px 28px 0 0; } }
.sc-note { padding: 0 16px; font-size: 12px; line-height: 1.4; color: #9aa1b0; }
/* без React бейдж и окно прячутся атрибутом hidden — display выше его перебивает */
.sc-badge[hidden], .sc-overlay[hidden], .sc-error[hidden] { display: none; }
/* предложение оставить контакт (18.09.2026) — кнопка в пузыре бота */
.sc-offer-btn { display: block; margin-top: 10px; height: 40px; padding: 0 16px; border: none; border-radius: 12px; background: #2f6bff; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 #1f4fd0; }
.sc-offer-btn:active { transform: translateY(3px); box-shadow: none; }