/* reflections-header.css */
/* Unified header + drawer + playlist + FLOATING GLOBAL AUDIO BAR */

:root{
  --ref-bg: rgba(30, 21, 18, .92);
  --ref-ink: #f3e6dd;
  --ref-muted: #c9b0a4;
  --ref-accent: #ffb873;

  --ref-pill-bg: rgba(255,255,255,.06);
  --ref-pill-brd: rgba(255,255,255,.18);

  --ref-panel: rgba(36, 26, 22, .94);
  --ref-panel-brd: rgba(255,255,255,.12);

  --ref-shadow: 0 10px 26px rgba(0,0,0,.55);
}

/* Lock background scroll when menu is open */
body.ref-menu-lock{ overflow:hidden; }

/* ===== Header bar ===== */
.ref-header-shell{
  position:fixed;
  top:0; left:0; right:0;
  z-index:9999;
  background: var(--ref-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--ref-shadow);
  color: var(--ref-ink);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.ref-header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:.65rem .9rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.85rem;
}

/* Left group */
.ref-left{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width:0;
}

.ref-brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
  text-decoration:none;
  color:inherit;
}

.ref-brand-logo{
  width:44px;
  height:44px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background:#000;
}

.ref-titlewrap{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.ref-pagetitle{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:1.07rem;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ref-subtitle{
  font-size:.82rem;
  color:var(--ref-muted);
  margin-top:.10rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Right group */
.ref-actions{
  display:flex;
  align-items:center;
  gap:.55rem;
}

.ref-ham{
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: var(--ref-ink);
  display:grid;
  place-items:center;
  font-size:1.1rem;
  cursor:pointer;
}

.ref-pill{
  border:1px solid var(--ref-pill-brd);
  background: var(--ref-pill-bg);
  color: var(--ref-ink);
  border-radius:999px;
  padding:.50rem .88rem;
  font-weight:800;
  font-size:.92rem;
  cursor:pointer;
}

/* ===== Sliding drawer ===== */
.ref-drawer{
  position:fixed;
  top:0; left:0;
  height:100vh;
  width:min(420px, 88vw);
  z-index:10001;
  padding:1rem;
  transform:translateX(-110%);
  opacity:0;
  transition: transform .22s ease, opacity .18s ease;
}

.ref-header-shell.menu-open + .ref-drawer{
  transform:translateX(0);
  opacity:1;
}

.ref-drawer-card{
  height:100%;
  border-radius:18px;
  background: var(--ref-panel);
  border:1px solid var(--ref-panel-brd);
  box-shadow: 0 24px 80px rgba(0,0,0,.72);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.ref-drawer-head{
  padding:.95rem 1rem;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.ref-drawer-title{
  font-weight:900;
  letter-spacing:.14em;
  font-size:.78rem;
  color:var(--ref-muted);
}

.ref-drawer-close{
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color:var(--ref-ink);
  font-size:1.45rem;
  cursor:pointer;
}

.ref-drawer-list{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  list-style:none;
  margin:0;
  padding:.75rem .55rem 1.1rem;
}

.ref-drawer-link{
  display:block;
  margin:.45rem .4rem;
  padding:.78rem .85rem;
  border-radius:16px;
  text-decoration:none;
  color:var(--ref-ink);
  background: rgba(255,255,255,.04);
}

.ref-drawer-link:hover{ background: rgba(255,184,115,.10); }
.ref-drawer-link.is-active{ background: rgba(255,184,115,.18); }

/* Overlay */
.ref-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  background: rgba(0,0,0,.50);
  backdrop-filter: blur(2px);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.ref-header-shell.menu-open ~ .ref-overlay{
  opacity:1;
  pointer-events:auto;
}

/* Scroll offset */
.card { scroll-margin-top: 200px; }

/* Center reflection card title + subtitle */
h3, h3 + p{ text-align:center; }
.title-link{ display:inline-block; }

/* Mobile header wrap */
@media (max-width:640px){
  .ref-header-inner{ flex-direction:column; gap:.5rem; }
  .ref-actions{ width:100%; justify-content:space-between; }
}

/* ===== Playlist buttons ===== */
.playlist{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin-top:.5rem;
}
.playlist .track-link{
  display:block !important;
  width:100% !important;
  text-align:left !important;
  padding:.55rem .7rem !important;
  border-radius:12px !important;
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--ref-ink, #f3e6dd) !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-indent: 0 !important;
}
.playlist .track-link.active{
  outline:2px solid rgba(255,184,115,.75) !important;
}

/* ===== Floating Global Audio Bar (REAL PLAYER) ===== */
html, body{ overflow-x:hidden; }

#globalPlayer.audio-bar{
  display:none !important;

  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:10002;

  padding:.75rem .85rem;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom));

  border-radius:16px;
  background: rgba(25,18,16,.92);
  border: 2px solid rgba(255,120,70,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);

  box-sizing:border-box;
  max-width: calc(100vw - 24px);
  overflow:hidden;
  transform: translateZ(0);
}

#globalPlayer.audio-bar.is-visible{ display:block !important; }

body.has-audio-bar{ padding-bottom:110px; }
@supports (padding-bottom: env(safe-area-inset-bottom)){
  body.has-audio-bar{ padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* optional layout safety */
#globalPlayer .audio-bar__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  min-width:0;
}
#globalPlayer .audio-bar__title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:.5rem;
}
#globalPlayer .audio-bar__now{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#globalPlayer .audio-bar__buttons{
  display:flex;
  gap:.4rem;
  flex-shrink:0;
}
#globalPlayer .audio-bar__progress{
  margin-top:.55rem;
  display:flex;
  align-items:center;
  gap:.55rem;
}
#globalPlayer #seekBar{ width:100%; }