/* =========================================================================
   messages.css — Christian Messages Audio Visual Reader
   Same gold/dark theme family as worship.html / reader.html.
   ========================================================================= */
:root{
  --bg:#030a0a; --bg-2:#141e30; --surface:#10171c; --surface-2:#243b55;
  --rule: rgba(216,178,107,0.16);
  --gold:#D8B26B; --gold-bright:#F0CE86;
  --text:#F2EFE4; --text-muted:#b1b890; --text-dim:#6a7096;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:var(--bg);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(140,111,192,0.10), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(216,178,107,0.07), transparent 40%);
  color:var(--text); font-family:'Inter', sans-serif;
  height:100vh; overflow:hidden; display:flex; flex-direction:column;
}

header.topbar{
  flex:0 0 auto; border-bottom:1px solid var(--rule);
  padding:10px 24px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:baseline; gap:10px; white-space:nowrap; }
.brand-mark{ color:var(--gold); font-size:20px; }
.brand-name{ font-family:'Fraunces', serif; font-size:20px; font-weight:600; }
.brand-sub{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; }
.topbar-nav{ display:flex; gap:8px; margin-left:auto; }
.topbar-nav a{
  font-size:13px; color:var(--text-muted); text-decoration:none;
  border:1px solid var(--rule); border-radius:999px; padding:7px 16px;
}
.topbar-nav a:hover{ color:var(--text); border-color:var(--gold); }
.sidebar-toggle{
  display:none; background:none; border:1px solid var(--rule); color:var(--text-muted);
  border-radius:8px; width:34px; height:34px; cursor:pointer; font-size:16px;
}

.shell{ flex:1; min-height:0; display:flex; }

/* ---- sidebar (books + chapters) ---- */
.sidebar{
  width:300px; flex:0 0 auto; border-right:1px solid var(--rule);
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  overflow-y:auto; padding:16px 14px 40px;
}
.book-group{ margin-bottom:6px; }
.book-header{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 10px; border-radius:10px; cursor:pointer;
  font-family:'Fraunces', serif; font-size:14px; color:var(--gold-bright);
}
.book-header:hover{ background:rgba(255,255,255,0.03); }
.book-header .chev{ font-size:11px; color:var(--text-dim); transition:transform .2s ease; }
.book-header.open .chev{ transform:rotate(90deg); }
.chapter-list{ list-style:none; margin:2px 0 8px; padding:0 0 0 10px; display:none; }
.chapter-list.open{ display:block; }
.chapter-item{
  padding:8px 10px; border-radius:8px; cursor:pointer; margin-bottom:3px;
  font-size:12.5px; color:var(--text-muted); line-height:1.4;
  border:1px solid transparent; transition:all .15s ease;
}
.chapter-item:hover{ background:rgba(216,178,107,0.08); color:var(--text); border-color:var(--rule); }
.chapter-item.active{ background:var(--gold); color:#241c05; font-weight:600; }
.sidebar-empty{ font-size:12px; color:var(--text-dim); font-style:italic; padding:6px 10px; }

/* ---- main viewer ---- */
.viewer{ flex:1; min-width:0; display:flex; flex-direction:column; }

.viewer-header{
  flex:0 0 auto; text-align:center; padding:16px 24px 8px; border-bottom:1px solid var(--rule);
}
.v-eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--gold); margin:0 0 4px;
}
.v-title{ font-family:'Fraunces', serif; font-size:22px; color:var(--gold-bright); margin:0; }
.v-sub{ font-size:12px; color:var(--text-dim); margin:4px 0 0; }

.viewer-body{ flex:1; min-height:0; display:flex; overflow:hidden; }

.visual-col{
  flex:0 0 260px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:20px; border-right:1px solid var(--rule); position:relative;
}
.divine-glow{
  position:absolute; width:220px; height:220px;
  background:radial-gradient(circle, rgba(216,178,107,0.18) 0%, transparent 70%);
  top:38%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none; animation:mBreathe 6s infinite ease-in-out;
}
@keyframes mBreathe{
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:0.3; }
  50%{ transform:translate(-50%,-50%) scale(1.18); opacity:0.6; }
}
@media (prefers-reduced-motion: reduce){ .divine-glow{ animation:none; } }

.visualizer{
  display:flex; align-items:flex-end; gap:4px; height:90px; width:180px; z-index:1;
}
.visualizer .v-bar{
  flex:1; background:linear-gradient(to top, var(--gold), var(--gold-bright));
  border-radius:3px; height:8%; box-shadow:0 0 8px rgba(216,178,107,0.4); opacity:.6;
  transition:height .1s ease;
}

.dock-btn{
  background:none; border:1px solid var(--rule); color:var(--text-muted);
  width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.dock-btn:hover{ border-color:var(--gold); color:var(--gold); }
.dock-btn.play{ width:52px; height:52px; border-color:var(--gold); color:var(--gold); font-size:18px; }
.dock-btn.play:hover{ background:var(--gold); color:#241c05; }
.transport-row{ display:flex; align-items:center; gap:10px; z-index:1; }

.dock-meta{ font-size:11.5px; color:var(--text-dim); text-align:center; z-index:1; }

/* ---- text panel ---- */
.text-col{ flex:1; min-width:0; overflow-y:auto; padding:22px 30px 60px;background: #fff; }
.content-text{ font-size:14px; line-height:2; color:#272727;max-width: 80ch;
    margin-left: auto;
    margin-right: auto;text-align: justify; }
.content-text .sentence{
  cursor:pointer; border-radius:3px; padding:1px 2px; transition:background .15s ease, color .15s ease;
}
.content-text .sentence:hover{ background:rgba(216,178,107,0.10); }
.content-text .sentence.speaking{
  background:rgba(216,178,107,0.22); color:var(--gold-bright); box-shadow:0 0 0 1px rgba(216,178,107,0.25);background: rgb(255 240 211 / 22%);
    color: #ff804d;
}

/* ---- controls dock (bottom) ---- */
.audio-dock{
  flex:0 0 auto; border-top:1px solid var(--rule);
  padding:10px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.15));
}
.dock-field{ display:flex; flex-direction:column; gap:3px; }
.dock-field label{ font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); }
.dock-field select, .dock-field input[type="range"]{
  background:var(--surface); border:1px solid var(--rule); color:var(--text);
  border-radius:6px; padding:5px 6px; font-size:11.5px; max-width:190px;
}
.dock-settings{ display:flex; align-items:center; gap:14px; margin-left:auto; flex-wrap:wrap; }
.mute-toggle{
  background:none; border:1px solid var(--rule); color:var(--text-muted);
  border-radius:999px; padding:6px 12px; font-size:11.5px; cursor:pointer;
}
.mute-toggle.active{ border-color:var(--gold); color:var(--gold); }

.reader-status{
  font-size:12px; color:var(--text-dim); font-style:italic; padding:8px 24px; display:none;
}

@media (max-width:900px){
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:30; transform:translateX(-100%);
    transition:transform .25s ease; box-shadow:20px 0 40px rgba(0,0,0,0.5);
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .viewer-body{ flex-direction:column; }
  .visual-col{ flex:0 0 auto; flex-direction:row; border-right:none; border-bottom:1px solid var(--rule); padding:14px; }
  .visualizer{ height:50px; width:120px; }
}