/* Azbloq article dock — ported for Esthet */

:root {
  --tc-neutral-50: #f8fafc;
  --tc-neutral-100: #f1f5f9;
  --tc-neutral-200: #e2e8f0;
  --tc-neutral-300: #cbd5e1;
  --tc-neutral-600: #475569;
  --tc-neutral-900: #0f172a;
  --tc-system-white: #ffffff;
}

html[data-theme="dark"],
html[data-ab-theme="dark"] {
  --tc-neutral-50: #1e293b;
  --tc-neutral-100: #243447;
  --tc-neutral-200: #334155;
  --tc-neutral-300: #64748b;
  --tc-neutral-600: #cbd5e1;
  --tc-neutral-900: #f8fafc;
  --tc-system-white: #0f172a;
}

.azbloq-dock {
  position: sticky;
  bottom: 1.25rem;
  z-index: 40;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: max-content;
  max-width: calc(100% - 1.5rem);
  margin: 2rem auto 0;
}

@media (min-width: 576px) {
  .azbloq-dock { bottom: 2rem; }
}

.blog-details-page [data-article-dock].azbloq-dock {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 60;
  margin-top: 0;
  pointer-events: none;
}

.blog-details-page [data-article-dock].azbloq-dock .azbloq-dock-bar,
.blog-details-page [data-article-dock].azbloq-dock .azbloq-dock-reader {
  pointer-events: auto;
}

@media (min-width: 576px) {
  .blog-details-page [data-article-dock].azbloq-dock { bottom: 2rem; }
}

.azbloq-dock-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--tc-neutral-200);
  border-radius: 999px;
  background: var(--tc-system-white);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--tc-neutral-900) 12%, transparent);
}

html[data-theme="dark"] .azbloq-dock-bar,
html[data-ab-theme="dark"] .azbloq-dock-bar {
  border-color: color-mix(in srgb, var(--tc-neutral-900) 22%, transparent);
  box-shadow:
    0 12px 32px color-mix(in srgb, #000 45%, transparent),
    0 0 0 1px color-mix(in srgb, var(--tc-neutral-900) 10%, transparent);
}

.azbloq-dock-reader.np-reader-chrome {
  position: static;
  top: auto;
  z-index: auto;
  margin: 0;
  width: min(100vw - 1.5rem, 42rem);
  max-width: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

.azbloq-dock.is-reading .azbloq-dock-reader.np-reader-chrome {
  display: flex;
}

.azbloq-dock-reader .np-reading-toolbar {
  width: 100%;
  max-width: 100%;
  justify-content: center;
  background: var(--tc-system-white);
  border-color: var(--tc-neutral-200);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--tc-neutral-900) 12%, transparent);
}

.azbloq-dock-reader .np-reading-search,
.azbloq-dock-reader .np-resume-bar {
  width: 100%;
  max-width: 100%;
}

.azbloq-dock-read {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--tc-neutral-50);
  color: var(--tc-neutral-600);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.azbloq-dock-read:hover,
.azbloq-dock-read.is-on {
  color: #0b3a38;
  background: color-mix(in srgb, #12a89f 14%, var(--tc-system-white));
}

.azbloq-dock form { display: inline-flex; margin: 0; }
.azbloq-dock-split { width: 1px; height: 1rem; background: var(--tc-neutral-200); }

.azbloq-dock-comments,
.azbloq-dock-mark,
.azbloq-dock-top {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tc-neutral-600);
  font-size: 0.75rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.azbloq-dock-icon,
.azbloq-dock-mark,
.azbloq-dock-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--tc-neutral-50);
}

.azbloq-dock-comments svg,
.azbloq-dock-mark svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.azbloq-dock-top svg { width: 16px; height: 16px; fill: currentColor; }
.azbloq-dock-count { min-width: 1.15rem; padding-inline-end: 0.45rem; color: var(--tc-neutral-900); text-align: start; }
.azbloq-dock-comments:hover { color: #0f766e; }
.azbloq-dock-comments:hover .azbloq-dock-icon { background: color-mix(in srgb, #14b8a6 16%, var(--tc-system-white)); }
.azbloq-dock-mark.is-on,
.azbloq-dock-mark:hover,
.azbloq-dock-top:hover { color: var(--tc-neutral-900); }
.azbloq-dock-mark:hover,
.azbloq-dock-top:hover { background: var(--tc-neutral-100); }
.azbloq-dock-mark.is-on svg { fill: currentColor; }
.azbloq-dock-percent { font-size: 0.68rem; font-weight: 700; color: var(--tc-neutral-900); }

body:has(.azbloq-dock) .progress-wrap {
  display: none !important;
}

/* Clear fixed dock without padding the <body> (that created a gap after the footer). */
body.blog-details-page {
  padding-bottom: 0;
}

body.blog-details-page #blog-comments {
  scroll-margin-bottom: 5.5rem;
  padding-bottom: 4.5rem;
}