/* ══════════════════════════════════════════════════
   PANEL.CSS — Bottom panel shared across all pages.
   Loaded by index.html and directly by post.html.
═══════════════════════════════════════════════════ */

/* ─── Bottom Panel ──────────────────────────────── */

/* Mantém Roboto Mono no painel independentemente do --font global */
.bottom-panel,
.bp-loading-text { --font: 'Roboto Mono', monospace; }

/* Idle dim — opacity gerida pelo JS via classes abaixo */
.bottom-panel--idle { opacity: 0.05; }

.bottom-panel {
  position: fixed;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: stretch;
  width: min(860px, calc(100vw - 32px));
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  font-family: var(--font, 'Inter', sans-serif);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  transition: transform 0.38s cubic-bezier(0, 0, 0.2, 1), bottom 0.38s cubic-bezier(0, 0, 0.2, 1);
}

/* Velocidades de transição para o idle dim.
   Aplicadas pelo JS em _applyIdleDim() em vez de inline style.transition —
   evita sobrescrita da cascade e conflito com transições activas no painel.
   Colocadas APÓS .bottom-panel para garantir precedência (mesma especificidade,
   regra posterior vence na cascade). */
.bottom-panel--idle-out {
  transition: transform 0.38s cubic-bezier(0, 0, 0.2, 1),
              bottom   0.38s cubic-bezier(0, 0, 0.2, 1),
              opacity  0.7s  ease-out;
}
.bottom-panel--idle-in {
  transition: transform 0.38s cubic-bezier(0, 0, 0.2, 1),
              bottom   0.38s cubic-bezier(0, 0, 0.2, 1),
              opacity  0.324s ease-out;
}

/* Arrows */
.bp-arrow {
  flex-shrink: 0;
  width: 44px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.45);
  opacity: 1;
  transition: opacity 0.66s ease-out 0.36s, background 0.15s, color 0.15s;
}

.bp-arrow:hover {
  background: rgba(255,255,255,0.07);
  color: #ffffff;
}

.bp-arrow--disabled {
  opacity: 0.15;
  cursor: default;
  pointer-events: none;
}

/* Viewport clips the sliding track */
.bp-viewport {
  flex: 1;
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,0.1);
  border-right: 1px solid rgba(255,255,255,0.1);
  opacity: 1;
  transition: opacity 0.66s ease-out 0.36s, border-color 0.22s ease-out;
}

/* Hide left border when prev arrow is disabled (first slide) */
.bp-arrow--disabled + .bp-viewport {
  border-left-color: transparent;
}

.bp-track {
  display: flex;
  width: 400%;
  transition: transform 0.35s cubic-bezier(0, 0, 0.2, 1);
}

/* Each slide occupies 1/4 of the track = 100% of the viewport */
.bp-slide {
  width: calc(100% / 4);
  padding: 13px 22px 15px;
  box-sizing: border-box;
  min-height: 59px;
}

.bp-label {
  font-size: 10.4px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 13px;
  font-family: 'Inter', sans-serif;
}

/* Category buttons */
.bp-cats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}

.bp-cat-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 4.2px 11px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  font-family: var(--font, 'Inter', sans-serif);
  border-radius: 0;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  user-select: none;
}

.bp-cat-btn:hover {
  border-color: rgba(255,255,255,0.6);
  color: #ffffff;
}

.bp-cat-btn.active {
  background: #ffffff;
  color: #0d0d0d;
  border-color: #ffffff;
}

/* Contact links */
.bp-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.bp-link {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.12s;
  white-space: nowrap;
}

.bp-link:hover {
  color: #ffffff;
}

/* Credits slide */
.bp-slide--credits {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-credits {
  font-size: 10.4px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  text-align: center;
  line-height: 1.8;
}


/* ─── Apresentação slide ────────────────────────── */

.bp-apresentacao {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.bp-apresentacao-photo {
  width: 49px;
  height: 49px;
  flex-shrink: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.06) 0px,
    rgba(255,255,255,0.06) 1px,
    rgba(255,255,255,0.03) 1px,
    rgba(255,255,255,0.03) 9px
  );
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
}

.bp-apresentacao-text {
  flex: 1;
  font-size: 12.7px;
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
  font-family: var(--font, 'Inter', sans-serif);
}

/* ─── Loading state ─────────────────────────────── */

/* Panel collapsed to 1/4 height, centred vertically */
.bottom-panel--loading {
  transform: translateX(-50%) scaleY(0.25);
}

/* Hide viewport during loading — fast fade-out */
.bottom-panel--loading .bp-viewport {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease-out !important;
}

/* Arrows e scroll arrows: desaparecem instantaneamente para não ficarem
   visíveis e distorcidos durante a compressão scaleY do painel */
.bottom-panel--loading .bp-arrow,
.bottom-panel--loading .bp-scroll-arrows {
  opacity: 0;
  pointer-events: none;
  transition: none !important;
}


/* Loading text — fixed overlay, outside panel so scaleY doesn't distort it */
/* height is set dynamically by syncLoadingTextPos() in JS               */
.bp-loading-text {
  position: fixed;
  bottom: 44px;
}

/* Em post mode o bottom é gerido por JS (_syncPostPanelBottom) */

.bp-loading-text {
  left: 50%;
  transform: translateX(-50%);
  width: min(860px, calc(100vw - 32px));
  height: 59px; /* fallback — overridden by JS */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.4px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  color: rgba(255,255,255,0.45);
  opacity: 0;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
  user-select: none;
  z-index: 51;
}

/* Instant variant — suppresses ALL transitions */
.bottom-panel--instant,
.bottom-panel--instant * {
  transition: none !important;
}

/* ─── Post panel: single slide ─────────────────── */


/* Show scroll arrows and hide next arrow in post mode via CSS
   (not inline style) so opacity transitions fire correctly during loading */
.bottom-panel--post .bp-scroll-arrows { display: flex; }
.bottom-panel--post #bp-next          { display: none; }

.bottom-panel--post .bp-viewport {
  border-left: none;
  border-right: none;
}

.bp-slide--post {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  height: 82px;
  box-sizing: border-box;
}

/* Category tag column — fixed, no scroll, top-aligned with first title */
.bp-slide--post .bp-label {
  flex-shrink: 0;
  width: 110px;
  padding: 9px 72px 0 30px;
  display: flex;
  align-items: flex-start;
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

/* ─── Document list ─────────────────────────────── */

.bp-doc-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  min-height: 0;
  padding: 7px 18px 7px 32px;
}
.bp-doc-list::-webkit-scrollbar { display: none; }

.bp-doc-item {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: baseline;
  padding: 2.5px 0;
  cursor: pointer;
  font-size: 12.7px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.38);
  transition: color 0.12s;
  user-select: none;
  line-height: 1.3;
}
.bp-doc-item:hover  { color: rgba(255,255,255,0.75); }
.bp-doc-item.active { color: #ffffff; }

/* Date column — fixed width, monospace, muted — no hover variation */
.bp-doc-date {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 9.2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #4a4a4a;
  white-space: nowrap;
}
.bp-doc-item.active .bp-doc-date { color: #888888; }

/* Title column — fills remaining space */
.bp-doc-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Char count column */
.bp-doc-chars {
  margin-left: 14px;
  font-variant-numeric: tabular-nums;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 9.2px;
  color: #585858;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ─── Scroll arrows (post mode only) ──────────── */

.bp-scroll-arrows {
  flex-shrink: 0;
  width: 44px;
  display: none;
  flex-direction: column;
  align-items: stretch;
  opacity: 1;
  transition: opacity 0.66s ease-out 0.36s;
}

.bp-scroll-btn {
  flex: 1;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  transition: background 0.15s, color 0.15s;
}

.bp-scroll-btn:hover {
  background: rgba(255,255,255,0.07);
  color: #ffffff;
}

.bp-scroll-btn + .bp-scroll-btn {
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ─── Panel left button (sitemap) ───────────────── */
/* Floating circle positioned just to the left of the panel */

.panel-side-btns-left {
  position: fixed;
  bottom: 44px;
  right: calc(50% + min(430px, 50vw - 16px) + 28px);
  height: 73px;
  display: flex;
  align-items: center;
  z-index: 50;
  pointer-events: auto;
  transition: opacity 0.9s ease-out;
}

.psb-map {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  border: none;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width  0.38s cubic-bezier(0, 0, 0.2, 1),
              height 0.38s cubic-bezier(0, 0, 0.2, 1),
              transform 0.38s cubic-bezier(0, 0, 0.2, 1),
              opacity 0.25s ease-out;
}

.psb-map:hover                                               { transform: scale(1.05); }
.bottom-panel--post ~ .panel-side-btns-left .psb-map         { width: 36px; height: 36px; }
.bottom-panel--post ~ .panel-side-btns-left .psb-map:hover   { transform: scale(1.35); }

.psb-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Dim state — applied via JS only after panel expansion completes */
.panel-side-btns-left--dim .psb-map       { opacity: 0.1; }
.panel-side-btns-left--dim .psb-map:hover { opacity: 1; }

/* ─── Panel side buttons (profile photo + key) ──── */
/* Floating circles positioned just to the right of the panel */

.panel-side-btns {
  position: fixed;
  bottom: 44px;
  left: calc(50% + min(430px, 50vw - 16px) + 28px);
  height: 73px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 50;
  pointer-events: auto;
  transition: opacity 0.9s ease-out;
}


/* ── Profile photo ── */
.psb-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: none;
  background: #d0ccc6;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  display: block;
  transition: width  0.38s cubic-bezier(0, 0, 0.2, 1),
              height 0.38s cubic-bezier(0, 0, 0.2, 1),
              transform 0.38s cubic-bezier(0, 0, 0.2, 1),
              opacity 0.25s ease-out;
}

.psb-photo:hover                                          { transform: scale(1.05); }
.bottom-panel--post ~ .panel-side-btns .psb-photo         { width: 30px; height: 30px; }
.bottom-panel--post ~ .panel-side-btns .psb-photo:hover   { transform: scale(1.10); }

.psb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
}

/* ── Key button ── */
.psb-key {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: width  0.38s cubic-bezier(0, 0, 0.2, 1),
              height 0.38s cubic-bezier(0, 0, 0.2, 1),
              transform 0.38s cubic-bezier(0, 0, 0.2, 1),
              opacity 0.25s ease-out,
              background 0.18s;
}

.psb-key:hover                                          { transform: scale(1.05); background: #000; }
.bottom-panel--post ~ .panel-side-btns .psb-key         { width: 30px; height: 30px; }
.bottom-panel--post ~ .panel-side-btns .psb-key:hover   { transform: scale(1.10); background: #000; }

/* Dim state — applied via JS only after panel expansion completes */
.panel-side-btns--dim .psb-photo,
.panel-side-btns--dim .psb-key  { opacity: 0.4; }
.panel-side-btns--dim .psb-photo:hover,
.panel-side-btns--dim .psb-key:hover  { opacity: 1; }

.psb-key img {
  height: 13px;
  width: auto;
  display: block;
  pointer-events: none;
  opacity: 0.55;
  transition: height 0.38s cubic-bezier(0, 0, 0.2, 1), opacity 0.18s;
}

.psb-key:hover img { opacity: 1; }
.bottom-panel--post ~ .panel-side-btns .psb-key img { height: 8px; }