/*
  Shared website reader bottom toolbar.
  Browser-safe: no native bridge assumptions.
*/
:root {
  --reader-bottom-toolbar-height: 52px;
  --reader-bottom-toolbar-gap: 0px;
  --reader-progress-height: 4px;
  --reader-bottom-toolbar-offset: 10px;
  --reader-bottom-safe-area: env(safe-area-inset-bottom, 0px);
}

body.reader-bottom-toolbar-enabled {
  padding-bottom: calc(
    var(--reader-bottom-toolbar-height) +
    var(--reader-progress-height) +
    var(--reader-bottom-safe-area) +
    2rem
  ) !important;
}

body.reader-bottom-toolbar-enabled footer,
body.reader-bottom-toolbar-enabled #copyright,
body.reader-bottom-toolbar-enabled #unlock,
body.reader-bottom-toolbar-enabled #continue-reading-cta,
body.reader-bottom-toolbar-enabled #back-to-top {
  scroll-margin-bottom: calc(
    var(--reader-bottom-toolbar-height) +
    var(--reader-progress-height) +
    var(--reader-bottom-safe-area) +
    1.5rem
  );
}

.reader-bottom-toolbar {
  position: fixed;
  right: auto;
  bottom: calc(var(--reader-progress-height) + var(--reader-bottom-toolbar-offset) + var(--reader-bottom-safe-area));
  left: 50%;
  z-index: 9998;
  display: flex;
  justify-content: center;
  width: min(430px, calc(100vw - 24px));
  padding: 6px 10px;
  background:
    linear-gradient(180deg, rgba(20, 20, 26, 0.9), rgba(9, 9, 13, 0.98)),
    rgba(9, 9, 13, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-sizing: border-box;
  transform: translateX(-50%);
}

.reader-bottom-toolbar--compact {
  width: min(218px, calc(100vw - 24px));
  padding: 5px 9px;
}

.reader-bottom-toolbar--full {
  width: min(430px, calc(100vw - 24px));
}

.reader-bottom-toolbar__inner {
  width: 100%;
  min-height: calc(var(--reader-bottom-toolbar-height) - 10px);
  display: flex;
  gap: var(--reader-bottom-toolbar-gap);
  align-items: center;
  justify-content: space-around;
}

.reader-bottom-toolbar__button {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f7f1df;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.reader-bottom-toolbar__button:hover,
.reader-bottom-toolbar__button:focus-visible {
  color: #ffd36a;
  background: transparent;
  outline: none;
  transform: translateY(-1px);
}

.reader-bottom-toolbar__button:active {
  transform: translateY(0);
}

.reader-bottom-toolbar__icon {
  font-size: 1.05rem;
  line-height: 1;
}

.reader-bottom-toolbar__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Component reset: full-reader pages carry older button/card styles. Keep this nav app-style. */
body.reader-bottom-toolbar-enabled .reader-bottom-toolbar,
body.reader-bottom-toolbar-enabled .reader-bottom-toolbar * {
  box-sizing: border-box;
}

body.reader-bottom-toolbar-enabled .reader-bottom-toolbar {
  right: auto !important;
  left: 50% !important;
  bottom: calc(var(--reader-progress-height) + var(--reader-bottom-toolbar-offset) + var(--reader-bottom-safe-area)) !important;
  width: min(430px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;
}

body.reader-bottom-toolbar-mode-compact .reader-bottom-toolbar {
  width: min(218px, calc(100vw - 24px)) !important;
}

body.reader-bottom-toolbar-mode-full .reader-bottom-toolbar {
  width: min(430px, calc(100vw - 24px)) !important;
}

body.reader-bottom-toolbar-enabled .reader-bottom-toolbar__inner {
  display: flex !important;
  gap: 0 !important;
  align-items: center !important;
  justify-content: space-around !important;
}

body.reader-bottom-toolbar-enabled .reader-bottom-toolbar__button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 42px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 4px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
}

body.reader-bottom-toolbar-mode-compact .reader-bottom-toolbar__button {
  min-height: 34px !important;
  padding: 2px 4px !important;
}

body.reader-bottom-toolbar-mode-compact .reader-bottom-toolbar__icon {
  font-size: 1rem;
}

body.reader-bottom-toolbar-mode-compact .reader-bottom-toolbar__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.reader-bottom-toolbar-enabled .reader-bottom-toolbar__button:hover,
body.reader-bottom-toolbar-enabled .reader-bottom-toolbar__button:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

body.reader-bottom-toolbar-enabled #scroll-progress-container {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--reader-progress-height);
  z-index: 9997;
  background-color: rgba(36, 120, 245, 0.14);
  box-sizing: border-box;
}

body.reader-bottom-toolbar-enabled #scroll-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  max-width: 100%;
  background: linear-gradient(90deg, #00e5cc, #ffd36a);
  box-shadow: 0 0 8px rgba(0, 229, 204, 0.5);
  transition: width 0.16s ease-out;
}

body.reader-bottom-toolbar-enabled .reader-bottom-menu {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(
    var(--reader-progress-height) +
    var(--reader-bottom-toolbar-offset) +
    var(--reader-bottom-safe-area) +
    var(--reader-bottom-toolbar-height) +
    12px
  ) !important;
  left: 50% !important;
  z-index: 9999 !important;
  display: none !important;
  width: min(360px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(58vh, calc(100dvh - var(--reader-bottom-toolbar-height) - var(--reader-bottom-safe-area) - 96px)) !important;
  margin: 0 !important;
  padding: 0.7rem !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background:
    linear-gradient(180deg, rgba(26, 26, 34, 0.94), rgba(9, 9, 13, 0.98)),
    rgba(9, 9, 13, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42) !important;
  color: #f7f1df !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
}

body.reader-bottom-toolbar-enabled .reader-bottom-menu.reader-bottom-menu--open {
  display: block !important;
}

body.reader-bottom-toolbar-enabled .reader-bottom-menu a,
body.reader-bottom-toolbar-enabled .reader-bottom-menu button {
  color: #f7f1df !important;
}

body.reader-bottom-toolbar-enabled .reader-bottom-menu a {
  display: block;
  padding: 0.58rem 0.7rem !important;
  border-radius: 10px;
  text-decoration: none;
}

body.reader-bottom-toolbar-enabled .reader-bottom-menu a:hover,
body.reader-bottom-toolbar-enabled .reader-bottom-menu a:focus-visible {
  background: rgba(255, 211, 106, 0.14) !important;
  color: #ffd36a !important;
  outline: none;
}

body.light-mode .reader-bottom-toolbar {
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.92), rgba(246, 240, 226, 0.98)),
    rgba(246, 240, 226, 0.96);
  border-color: rgba(0, 0, 0, 0.12);
}

body.light-mode .reader-bottom-toolbar__button {
  color: #15130f;
  background: transparent;
}

body.light-mode .reader-bottom-toolbar__button:hover,
body.light-mode .reader-bottom-toolbar__button:focus-visible {
  color: #7a5300;
  background: transparent;
}

body.sepia-mode {
  background-color: #f2e3c6;
  color: #302416;
}

body.sepia-mode .book,
body.sepia-mode main,
body.sepia-mode #reader,
body.sepia-mode #copyright {
  color: #302416;
}

body.sepia-mode .reader-bottom-toolbar {
  background:
    linear-gradient(180deg, rgba(88, 62, 31, 0.9), rgba(48, 34, 18, 0.98)),
    rgba(48, 34, 18, 0.96);
  border-color: rgba(255, 230, 185, 0.24);
}

body.sepia-mode .reader-bottom-toolbar__button {
  color: #f8e7c1;
}

body.sepia-mode .reader-bottom-toolbar__button:hover,
body.sepia-mode .reader-bottom-toolbar__button:focus-visible {
  color: #ffd36a;
  background: transparent;
}

@media (max-width: 420px) {
  :root {
    --reader-bottom-toolbar-gap: 6px;
  }

  .reader-bottom-toolbar {
    padding-right: 4px;
    padding-left: 4px;
    width: min(390px, calc(100vw - 16px));
  }

  .reader-bottom-toolbar--compact,
  body.reader-bottom-toolbar-mode-compact .reader-bottom-toolbar {
    width: min(200px, calc(100vw - 16px)) !important;
  }

  .reader-bottom-toolbar__button {
    font-size: 0.62rem;
  }
}