/* Kyiv Hobby Center — floating action buttons (scroll-top + chat) and live mini-chat.
 * Dark theme to match vitrine.css (accent #37d0ff). Self-contained. */

.hw-fab{ position:fixed; right:18px; bottom:18px; z-index:2147483000; display:flex; flex-direction:column; align-items:flex-end; gap:12px; font-family:'Manrope',system-ui,sans-serif; }
.hw-fab__btn{ width:52px; height:52px; border:0; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.45); transition:transform .15s ease, opacity .2s ease, background .2s ease; position:relative; }
.hw-fab__btn:active{ transform:scale(.94); }

.hw-fab__top{ background:#262a36; color:#cfd3df; opacity:0; pointer-events:none; transform:translateY(8px); }
.hw-fab__top.is-on{ opacity:1; pointer-events:auto; transform:none; }
.hw-fab__top:hover{ background:#323746; color:#fff; }

.hw-fab__chat{ background:linear-gradient(135deg,#37d0ff,#1f8bff); }
.hw-fab__chat:hover{ filter:brightness(1.07); }
.hw-fab__badge{ position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:#ff4d63; color:#fff; font-size:11px; font-weight:700; line-height:19px; text-align:center; display:none; box-shadow:0 0 0 2px #14161d; }
.hw-fab__badge.is-on{ display:block; }

/* hint bubble */
.hw-fab__hint{ position:absolute; right:62px; bottom:4px; max-width:230px; background:#1b1e27; color:#e8eaf0; border:1px solid rgba(255,255,255,.12); border-radius:14px 14px 4px 14px; padding:11px 30px 11px 13px; font-size:13px; line-height:1.4; box-shadow:0 12px 30px rgba(0,0,0,.5); opacity:0; transform:translateY(6px) scale(.96); transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
.hw-fab__hint.is-on{ opacity:1; transform:none; pointer-events:auto; }
.hw-fab__hint b{ color:#37d0ff; }
.hw-fab__hint-x{ position:absolute; top:5px; right:7px; width:18px; height:18px; border:0; background:transparent; color:#7b8194; font-size:15px; cursor:pointer; line-height:1; }
.hw-fab__hint-x:hover{ color:#fff; }

/* chat panel */
.hw-chat{ position:fixed; right:18px; bottom:18px; z-index:2147483001; width:360px; max-width:calc(100vw - 24px); height:520px; max-height:calc(100vh - 36px); background:#14161d; border:1px solid rgba(255,255,255,.1); border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.6); display:flex; flex-direction:column; overflow:hidden; opacity:0; transform:translateY(16px) scale(.98); pointer-events:none; transition:opacity .2s ease, transform .2s ease; font-family:'Manrope',system-ui,sans-serif; }
.hw-chat.is-open{ opacity:1; transform:none; pointer-events:auto; }

.hw-chat__head{ background:linear-gradient(135deg,#1f2530,#171a22); padding:13px 14px; display:flex; align-items:center; gap:11px; border-bottom:1px solid rgba(255,255,255,.07); }
.hw-chat__av{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#37d0ff,#1f8bff); display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px; flex:0 0 auto; }
.hw-chat__ttl{ flex:1; min-width:0; }
.hw-chat__ttl b{ display:block; color:#fff; font-size:14px; font-weight:700; }
.hw-chat__ttl span{ display:block; color:#8ce6b0; font-size:11.5px; margin-top:1px; }
.hw-chat__ttl span::before{ content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:#3ad07a; margin-right:5px; vertical-align:1px; }
.hw-chat__x, .hw-chat__min{ width:32px; height:32px; border:0; background:transparent; color:#9aa0b0; font-size:18px; cursor:pointer; border-radius:8px; flex:0 0 auto; }
.hw-chat__x:hover, .hw-chat__min:hover{ background:rgba(255,255,255,.07); color:#fff; }
.hw-chat__min{ display:none; } /* desktop closes with the X; mobile collapses with the chevron */

.hw-chat__body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; background:#101218; }
.hw-chat__body::-webkit-scrollbar{ width:8px; }
.hw-chat__body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px; }

.hw-chat__intro{ text-align:center; color:#7b8194; font-size:12.5px; padding:10px 6px 4px; }

.hw-msg{ max-width:82%; padding:9px 12px; border-radius:14px; font-size:13.5px; line-height:1.42; word-wrap:break-word; white-space:pre-wrap; position:relative; }
.hw-msg__t{ display:block; font-size:10px; opacity:.6; margin-top:3px; }
.hw-msg--visitor{ align-self:flex-end; background:linear-gradient(135deg,#37d0ff,#1f8bff); color:#06222e; border-bottom-right-radius:5px; }
.hw-msg--owner{ align-self:flex-start; background:#222633; color:#e8eaf0; border-bottom-left-radius:5px; }

.hw-chat__foot{ padding:10px; border-top:1px solid rgba(255,255,255,.07); display:flex; gap:8px; align-items:flex-end; background:#14161d; }
.hw-chat__inp{ flex:1; resize:none; max-height:96px; min-height:40px; background:#1b1e27; border:1px solid rgba(255,255,255,.12); color:#e8eaf0; border-radius:11px; padding:10px 12px; font-family:inherit; font-size:13.5px; line-height:1.35; box-sizing:border-box; }
.hw-chat__inp::placeholder{ color:#6f7585; }
.hw-chat__inp:focus{ outline:none; border-color:#37d0ff; }
.hw-chat__send{ width:40px; height:40px; flex:0 0 auto; border:0; border-radius:11px; background:linear-gradient(135deg,#37d0ff,#1f8bff); color:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hw-chat__send:disabled{ opacity:.5; cursor:default; }
.hw-chat__send:not(:disabled):hover{ filter:brightness(1.08); }

/* On mobile/tablet the chat opens from the bottom-nav «Чат» button, so the
   side floating buttons are hidden (they overlapped the fixed bottom nav). */
@media (max-width:991.98px){
  .hw-fab{ display:none !important; }
  /* mobile: collapse with the chevron (clearer than the small X on a fullscreen panel) */
  .hw-chat__min{ display:flex; align-items:center; justify-content:center; }
  .hw-chat__x{ display:none; }
}
@media (max-width:480px){
  .hw-chat{ right:0; bottom:0; left:0; top:0; width:100vw; max-width:100vw; height:100vh; height:100dvh; max-height:100dvh; border-radius:0; border:0; }
  /* keep the chat header below the device status bar / notch */
  .hw-chat__head{ padding-top:calc(13px + env(safe-area-inset-top)); }
  .hw-chat__foot{ padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
}