/* Правый нижний угол: "Наверх", чат жителя, всплывающие сообщения. Свои переменные - файл общий для сайта и кабинета. */
.dock {
  --dk-brand: #ff5e38; --dk-brand-deep: #e0461f; --dk-soft: #fff1ec; --dk-ink: #222; --dk-muted: #6a6a6a; --dk-line: #e7e7e7;
  --dk-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .14);
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none;
  font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.dock > * { pointer-events: auto; }
/* атрибут hidden сильнее display у кнопок и панели: иначе скрытая панель перехватывает нажатия */
.dock [hidden] { display: none !important; }
@media (min-width: 768px) { .dock { right: 24px; bottom: 24px; } }
/* кабинет на телефоне: над нижней панелью разделов */
@media (max-width: 899px) { .dock.in-cabinet { bottom: calc(var(--tabbar-h, 64px) + 14px + env(safe-area-inset-bottom)); } }
body.nav-open .dock { display: none; }

/* ---- Наверх ---- */
.to-top { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: var(--dk-ink);
  box-shadow: var(--dk-shadow); display: grid; place-items: center; font-size: 1.15rem; cursor: pointer;
  opacity: 0; transform: translateY(12px) scale(.8); transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1), background .2s ease; }
.to-top.on { opacity: 1; transform: none; }
.to-top:hover { background: var(--dk-soft); color: var(--dk-brand-deep); }
.to-top:hover i { animation: dk-up .6s ease; }
.to-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top circle { fill: none; stroke-width: 2.5; }
.to-top .ring-bg { stroke: transparent; }
.to-top .ring { stroke: var(--dk-brand); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.to-top i { position: relative; }
@keyframes dk-up { 0% { transform: translateY(0); } 40% { transform: translateY(-6px); } 100% { transform: translateY(0); } }

/* ---- Значок чата ---- */
.chat-fab { position: relative; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 1.5rem;
  background: linear-gradient(145deg, #ff8a5c, var(--dk-brand) 55%, var(--dk-brand-deep)); box-shadow: 0 10px 26px rgba(255, 94, 56, .42);
  display: grid; place-items: center; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); animation: dk-in .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.chat-fab:hover { transform: scale(1.07) rotate(-6deg); }
.chat-fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--dk-brand); opacity: 0; }
.chat-fab.has-new::after { animation: dk-ping 2.2s ease-out infinite; }
.chat-fab.has-new i { animation: dk-wobble 3s ease-in-out 1s infinite; }
.chat-badge { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: #dc2626; color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.dock.chat-open .chat-fab { transform: rotate(0) scale(.92); }
@keyframes dk-in { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dk-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes dk-wobble { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }

/* ---- Панель сообщений ---- */
.chat-panel { position: absolute; right: 0; bottom: 72px; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 140px));
  display: flex; flex-direction: column; background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .22); overflow: hidden;
  transform-origin: bottom right; animation: dk-panel .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes dk-panel { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 16px; background: var(--dk-ink); color: #fff; }
.chat-ava { width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; flex: none; }
.chat-head b { display: block; font-size: .98rem; }
.chat-head small { font-size: .76rem; color: rgba(255, 255, 255, .7); display: flex; align-items: center; gap: 6px; }
.chat-head .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; }
.chat-head > div { flex: 1; min-width: 0; }
.chat-close { width: 40px; height: 40px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; font-size: 1rem; }
.chat-close:hover { background: rgba(255, 255, 255, .2); }
.chat-list { flex: 1; overflow-y: auto; padding: 10px; background: #f7f7f7; display: grid; gap: 8px; align-content: start; }
.chat-empty { margin: 0; padding: 18px 12px; color: var(--dk-muted); font-size: .9rem; text-align: center; line-height: 1.5; }
.chat-empty i { display: block; font-size: 1.6rem; color: var(--dk-brand); margin-bottom: 6px; }
.chat-msg { display: flex; gap: 10px; padding: 11px 12px; border-radius: 16px; background: #fff; color: var(--dk-ink); text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05); border: 1px solid transparent; transition: border-color .2s ease; }
a.chat-msg:hover { border-color: rgba(255, 94, 56, .45); }
.chat-msg.unread { background: var(--dk-soft); border-color: rgba(255, 94, 56, .25); }
.chat-msg-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--dk-soft); color: var(--dk-brand); display: grid; place-items: center; font-size: .95rem; }
.chat-msg.unread .chat-msg-ico { background: var(--dk-brand); color: #fff; }
.chat-msg-body { min-width: 0; display: grid; gap: 2px; font-size: .86rem; line-height: 1.35; }
.chat-msg-body b { font-size: .9rem; }
.chat-msg-body span { color: #3f3f3f; overflow-wrap: anywhere; }
.chat-msg-body small { color: var(--dk-muted); font-size: .72rem; }
.chat-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-top: 1px solid var(--dk-line); background: #fff; }
.chat-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 12px;
  border: 1px solid var(--dk-line); color: var(--dk-ink); font-weight: 600; font-size: .86rem; text-decoration: none; }
.chat-btn.primary { background: var(--dk-brand); border-color: var(--dk-brand); color: #fff; }
.chat-btn.primary:hover { background: var(--dk-brand-deep); }
.chat-link, .chat-sos { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; font-size: .86rem; text-decoration: none; }
.chat-link { color: var(--dk-brand-deep); font-weight: 600; }
.chat-sos { color: #dc2626; font-weight: 600; border-radius: 12px; background: #fdecec; }

/* ---- Всплывающие сообщения ---- */
.dock-toasts { display: grid; gap: 10px; justify-items: end; }
.dock-toast { position: relative; display: flex; gap: 10px; align-items: flex-start; width: min(360px, calc(100vw - 32px)); padding: 12px 12px 14px;
  border-radius: 18px; background: #fff; color: var(--dk-ink); text-decoration: none; box-shadow: 0 14px 36px rgba(0, 0, 0, .18); overflow: hidden;
  border-left: 4px solid var(--dk-brand); opacity: 0; transform: translateX(40px) scale(.96); transition: opacity .3s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.dock-toast.on { opacity: 1; transform: none; }
.dock-toast .chat-msg-ico { background: var(--dk-brand); color: #fff; animation: dk-wobble 1.2s ease .3s; }
.dt-body { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: .86rem; line-height: 1.35; }
.dt-body b { font-size: .92rem; }
.dt-body span { color: #3f3f3f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dt-close { flex: none; width: 32px; height: 32px; margin: -4px -4px 0 0; border-radius: 10px; border: 0; background: transparent; color: var(--dk-muted); cursor: pointer; }
.dt-close:hover { background: #f2f2f2; }
.dt-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--dk-brand); transform-origin: left; animation: dk-bar 9s linear forwards; }
.dock-toast.hold .dt-bar { animation-play-state: paused; }
@keyframes dk-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }