/* Чат на сайте Френка (26.10.2026) — палитра сайта (ink #e8f6ff, accent #8fdcff, фон #010307), Space Grotesk; на телефоне — лист снизу. */
.fchat { position: fixed; right: 24px; bottom: 24px; z-index: 30; font-family: "Space Grotesk", system-ui, sans-serif; }
.fchat-btn { display: inline-flex; align-items: center; gap: 10px; background: rgba(1, 3, 7, .72); color: #e8f6ff; border: 1px solid rgba(143, 220, 255, .45); border-radius: 999px; padding: 12px 20px; font: 500 14px "Space Grotesk", sans-serif; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 24px rgba(143, 220, 255, .18); transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s cubic-bezier(.22, 1, .36, 1); }
.fchat-btn:hover { transform: translateY(-2px); border-color: #8fdcff; }
.fchat-btn:active { transform: scale(.98); }
.fchat-dot { width: 8px; height: 8px; border-radius: 50%; background: #8fdcff; box-shadow: 0 0 10px #8fdcff; animation: fchat-pulse 2.4s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes fchat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.fchat.is-open .fchat-btn { display: none; }
/* первый экран (эталон v3) не перекрываем: кнопка появляется после прокрутки за 60 % экрана — frank-chat.js ставит .is-shown */
.fchat:not(.is-shown):not(.is-open) .fchat-btn { opacity: 0; transform: translateY(16px); pointer-events: none; }
.fchat-btn { opacity: 1; }
.fchat .fchat-btn { transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1), border-color .3s cubic-bezier(.22, 1, .36, 1); }
.fchat-panel { position: absolute; right: 0; bottom: 0; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 48px)); display: flex; flex-direction: column; background: rgba(4, 9, 16, .94); border: 1px solid rgba(160, 220, 255, .22); border-radius: 16px; box-shadow: 0 30px 80px #000c, 0 0 40px rgba(143, 220, 255, .08); overflow: hidden; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.fchat-panel[hidden] { display: none; }
.fchat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid rgba(160, 220, 255, .16); }
.fchat-head b { display: block; font-size: 16px; font-weight: 500; color: #e8f6ff; }
.fchat-head span { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 400 12px "JetBrains Mono", monospace; color: rgba(200, 232, 255, .62); }
.fchat-head i { width: 6px; height: 6px; border-radius: 50%; background: #8fdcff; box-shadow: 0 0 8px #8fdcff; }
.fchat-x { background: transparent; border: 1px solid rgba(160, 220, 255, .22); color: #e8f6ff; border-radius: 50%; width: 32px; height: 32px; font-size: 20px; line-height: 1; cursor: pointer; }
.fchat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; scrollbar-width: none; }
.fchat-log::-webkit-scrollbar { display: none; }
.fchat-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.fchat-msg.bot { align-self: flex-start; background: rgba(143, 220, 255, .08); color: #e8f6ff; border: 1px solid rgba(143, 220, 255, .16); border-bottom-left-radius: 4px; }
.fchat-msg.user { align-self: flex-end; background: #e8f6ff; color: #010307; border-bottom-right-radius: 4px; }
.fchat-msg.typing { color: rgba(200, 232, 255, .62); letter-spacing: .2em; }
.fchat-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid rgba(160, 220, 255, .16); }
.fchat-form textarea { flex: 1; resize: none; font: 400 14px "Space Grotesk", sans-serif; color: #e8f6ff; background: #010307; border: 1px solid rgba(160, 220, 255, .22); border-radius: 12px; padding: 12px; min-height: 44px; max-height: 120px; outline: none; scrollbar-width: none; }
.fchat-form textarea:focus { border-color: #8fdcff; }
.fchat-form button { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 0; background: #e8f6ff; color: #010307; font-size: 20px; cursor: pointer; }
.fchat-form button:disabled { opacity: .5; cursor: wait; }
.fchat-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.fchat-foot { margin: 0; padding: 0 16px 12px; font: 400 11px "JetBrains Mono", monospace; color: rgba(200, 232, 255, .4); }
@media (max-width: 700px) {
  .fchat { right: 16px; bottom: 16px; }
  .fchat.is-open { left: 0; right: 0; bottom: 0; }
  .fchat-panel { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: min(78vh, 620px); border-radius: 16px 16px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .fchat-dot { animation: none; } .fchat-btn:hover { transform: none; } }