/* =========================================================
   dock.css — single bottom icon-dock that hosts all reader
   tools. Icons only; tapping one slides out its panel.
   ========================================================= */

/* The dock replaces the legacy floating controls on story pages.
   Hide them from the FIRST paint (body.story is static) so they never flash
   before the dock builds. The dock still triggers them programmatically. */
body.story .share,
body.story .tts-btn,
body.story .read-btn,
body.has-dock .share,
body.has-dock .tts-btn,
body.has-dock .read-btn { display: none !important; }

/* The player takes the dock's place while open (one bar, not two); × restores it */
body.has-dock .tts-player { bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); }
body.is-tts-open .dock { display: none !important; }

/* Toasts must sit ABOVE the dock, not under it */
body.has-dock .sx-toast,
body.has-dock .tts-toast { bottom: 6rem; }
body.is-reading .sx-toast,
body.is-reading .tts-toast { bottom: 1.5rem; }

/* Resume chips hide while reading or while the player is open */
body.is-reading .tts-resume,
body.is-tts-open .tts-resume,
body.is-reading .read-resume,
body.is-tts-open .read-resume { display: none !important; }

/* Leave room at the very bottom so the dock never covers the page footer
   (the «© … · Конфиденциальность» line). */
body.has-dock { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }

.dock {
  position: fixed; left: 50%; bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 95; display: flex; align-items: center; gap: .15rem;
  padding: .35rem; border-radius: 999px;
  background: rgba(18, 14, 10, 0.82); border: 1px solid var(--rule, #2a251e);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5);
  transition: gap .25s ease, padding .25s ease;
}
body.is-reading .dock, body.is-reading .dock-drawer { display: none; }

.dock__btn {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px; background: transparent; color: var(--ink-soft, #b6ad97);
  cursor: pointer; transition: background .18s, color .18s, transform .18s;
}
.dock__btn:hover { background: rgba(255,255,255,.07); color: var(--ink, #ede4d0); }
.dock__btn.is-active { background: var(--accent, #d9b878); color: #1a1206; }
.dock__btn svg { width: 19px; height: 19px; display: block; }
.dock__sep { width: 1px; height: 22px; background: var(--rule); margin: 0 .15rem; flex: none; }
.dock__toggle svg { transition: transform .3s ease; }

/* collapsed → only the toggle remains, as a small pill */
.dock.is-collapsed .dock__btn--feat,
.dock.is-collapsed .dock__sep { display: none; }
.dock.is-collapsed .dock__toggle svg { transform: rotate(180deg); }

/* ---- drawer above the dock ---- */
.dock-drawer {
  position: fixed; left: 50%; bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(12px);
  z-index: 94; width: min(420px, calc(100vw - 1.5rem));
  background: #14100b; border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55); padding: 1.1rem 1.2rem;
  opacity: 0; pointer-events: none; transition: opacity .24s ease, transform .24s ease;
  font-family: var(--sans, sans-serif);
}
.dock-drawer.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dock-drawer__h { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 .9rem; }

/* share grid */
.dk-share { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.dk-sbtn { font-family: var(--sans); font-size: .88rem; color: var(--ink-soft); background: rgba(255,255,255,.04); border: 1px solid var(--rule); border-radius: 10px; padding: .7rem .9rem; cursor: pointer; text-align: left; transition: all .18s; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
.dk-sbtn:hover { border-color: var(--accent); color: var(--ink); }
/* EPUB download spans the full width below the share row + reads as the primary "take it with you" action */
.dk-sbtn--epub { grid-column: 1 / -1; text-align: center; color: var(--accent); border-color: rgba(217,184,120,.4); }
.dk-share__hint { font-family: var(--sans); font-size: .76rem; color: var(--muted); margin: .55rem 0 0; text-align: center; }

/* reactions */
.dk-react { display: flex; gap: .5rem; flex-wrap: wrap; }
.dk-rbtn { font-family: var(--sans); font-size: .88rem; color: var(--ink-soft); background: rgba(255,255,255,.04); border: 1px solid var(--rule); border-radius: 999px; padding: .5rem .9rem; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; transition: all .18s; min-height: 44px; box-sizing: border-box; }
.dk-rbtn:hover { border-color: var(--accent); color: var(--ink); }
.dk-rbtn.is-mine { border-color: var(--accent); background: rgba(217,184,120,.12); color: var(--ink); }
.dk-rbtn .n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }
.dk-rbtn.is-pop { animation: dkPop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes dkPop { 0%{transform:scale(1)} 40%{transform:scale(1.16)} 100%{transform:scale(1)} }
.dk-letter { margin-top: 1rem; font-family: var(--sans); font-size: .88rem; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; border-bottom: 1px solid transparent; }
.dk-letter:hover { border-bottom-color: var(--accent); }

/* subscribe */
.dk-subrow { display: flex; gap: .5rem; }
.dk-input { font-family: var(--sans); font-size: .95rem; color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid var(--rule); border-radius: 10px; padding: .7rem .85rem; width: 100%; }
.dk-input:focus { border-color: var(--accent); }
.dk-gold { font-family: var(--sans); font-weight: 600; font-size: .9rem; white-space: nowrap; background: var(--accent); color: #1a1206; border: none; border-radius: 10px; padding: .7rem 1.2rem; cursor: pointer; }
.dk-gold:hover { filter: brightness(1.08); }
.dk-gold:disabled { opacity: .5; cursor: default; }
.dk-hint { font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); margin: 0 0 .7rem; line-height: 1.4; }
.dk-tg { font-family: var(--sans); font-size: .82rem; color: var(--muted); margin: .7rem 0 0; }
.dk-tg a { color: var(--accent); border-bottom: 1px solid transparent; }
.dk-tg a:hover { border-bottom-color: var(--accent); }
.dk-ok { font-family: var(--sans); color: var(--accent); }
.dk-textarea { font-family: var(--serif); font-size: 1rem; line-height: 1.6; min-height: 120px; resize: vertical; }
.dk-form { display: flex; flex-direction: column; gap: .6rem; }

@media (prefers-reduced-motion: reduce) { .dock, .dock-drawer, .dock__toggle svg { transition: none; } }
@media print { .dock, .dock-drawer { display: none !important; } }