/* =========================================================================
   message.css — "Today's Message" button + circle overlay
   Reuses the :root variables already declared in worship.html
   (--bg, --surface, --gold, --gold-bright, --rule, --text, --text-muted, etc.)
   ========================================================================= */

.message-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; font-family:'Inter', sans-serif;
  background:linear-gradient(135deg, var(--gold), var(--gold-bright));
  color:#241c05; border:none; border-radius:999px;
  padding:9px 20px; cursor:pointer;
  box-shadow:0 0 0 rgba(216,178,107,0);
  transition:box-shadow .3s ease, transform .15s ease;
  margin-left:auto;
}
.message-btn:hover{ box-shadow:0 0 18px rgba(216,178,107,0.45); transform:translateY(-1px); }
.message-btn .m-icon{ font-size:15px; }

#message-overlay{
  position:fixed; inset:0; z-index:100;
  background:
    radial-gradient(circle at 50% 40%, rgba(140,111,192,0.14), transparent 55%),
    rgba(3,10,10,0.96);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
#message-overlay.visible{ opacity:1; pointer-events:auto; }

.message-modal{
  width:min(1000px, 94vw); height:min(760px, 92vh);
  background:linear-gradient(160deg, var(--surface), var(--bg-2));
  border:1px solid var(--rule); border-radius:20px;
  display:flex; flex-direction:column;
  overflow:hidden; position:relative;
  box-shadow:0 30px 90px rgba(0,0,0,0.55);
}

.message-tabs{
  display:flex; gap:8px; padding:16px 20px 0 20px; flex:0 0 auto;
}
.message-tab{
  font-family:'Inter', sans-serif; font-size:13px; font-weight:500;
  background:none; border:1px solid var(--rule); color:var(--text-muted);
  border-radius:999px; padding:7px 16px; cursor:pointer; transition:all .2s ease;
}
.message-tab:hover{ color:var(--text); border-color:var(--gold); }
.message-tab.active{ background:var(--gold); color:#241c05; border-color:var(--gold); font-weight:600; }

.message-close{
  position:absolute; top:14px; right:16px; z-index:5;
  background:none; border:1px solid var(--rule); color:var(--text-muted);
  width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:16px;
}
.message-close:hover{ border-color:var(--gold); color:var(--gold); }

.message-view{ flex:1; min-height:0; overflow:hidden; background: linear-gradient(to top, rgba(26, 15, 10, 0.4), rgba(26, 15, 10, 0.8)), url(https://cdn.tamilbookshelf.in/assets/images/worship-angels-tamilbookshelf.jpg?ver-2);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;}
.message-view[hidden]{ display:none; }

/* ---- MESSAGE (sermon audio) view ---- */
.view-audio{ display:flex; }
.player-row{
  flex:1; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:18px 32px 30px;
}
.speaker-visualizer{
  width:60px; height:78%; flex:0 0 auto;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:10px; gap:4px;
  background:rgba(255,255,255,0.01); border-radius:30px;
  border:1px solid var(--rule); box-shadow:inset 0 0 20px rgba(0,0,0,0.25);
}
.speaker-bar{
  flex:1; height:10%; min-height:6px;
  background:linear-gradient(to top, var(--gold), var(--gold-bright));
  border-radius:4px; transition:height .1s ease;
  box-shadow:0 0 10px rgba(216,178,107,0.4); opacity:0.8;
}
@media (max-width:760px){ .speaker-visualizer{ display:none; } }

.center-stage{
  flex:1; min-width:0; text-align:center; padding:0 12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative;
}
.divine-glow{
  position:absolute; width:260px; height:260px;
  background:radial-gradient(circle, rgba(216,178,107,0.20) 0%, transparent 70%);
  top:46%; left:50%; transform:translate(-50%,-50%);
  z-index:0; pointer-events:none; animation:mBreathe 6s infinite ease-in-out;
}
@keyframes mBreathe{
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:0.35; }
  50%{ transform:translate(-50%,-50%) scale(1.2); opacity:0.65; }
}
@media (prefers-reduced-motion: reduce){ .divine-glow{ animation:none; } }

.sermon-title{
  font-family:'Cinzel', serif; font-weight:600; font-size:clamp(20px,2.6vw,30px);
  letter-spacing:.5px; color:var(--gold-bright); margin:2px 0 6px; z-index:1;
  text-shadow:0 4px 14px rgba(0,0,0,0.45); max-width:34ch;
}
.sermon-folder{ font-size:12px; color:var(--text-dim); margin:0 0 22px; z-index:1; }

.waveform-container{ width:100%; max-width:480px; height:52px; margin-bottom:22px; z-index:1; }
.waveform-container canvas{ width:100%; height:100%; }

.controls-container{ width:100%; max-width:440px; z-index:1; }
.time-info{
  display:flex; justify-content:space-between; font-size:12px; color:var(--text-dim); margin-bottom:6px;
}
.progress-bar-container{
  width:100%; height:6px; background:rgba(255,255,255,0.08); border-radius:3px;
  cursor:pointer; position:relative; margin-bottom:18px;
}
.progress-bar{
  width:0%; height:100%; background:var(--gold); border-radius:3px;
  box-shadow:0 0 8px var(--gold);
}
.controls-row{ display:flex; align-items:center; justify-content:center; gap:16px; }
.controls-spacer{ width:100px; }
@media (max-width:520px){ .controls-spacer{ display:none; } .controls-row{ gap:12px; } }

.play-btn{
  background:transparent; border:2px solid var(--gold); color:var(--gold);
  width:56px; height:56px; border-radius:50%; font-size:1.1rem; cursor:pointer;
  display:inline-flex; justify-content:center; align-items:center;
  transition:all .3s ease; outline:none; flex:0 0 auto;
}
.play-btn:hover{ background:var(--gold); color:#0d1214; box-shadow:0 0 15px rgba(216,178,107,0.45); }

/* ---- VERSES (topic circle) view ---- */
.view-verses{ display:grid; grid-template-columns:1fr 340px; }
@media (max-width:760px){
  .view-verses{ grid-template-columns:1fr; grid-template-rows:1fr auto; overflow-y:auto; }
}

.message-stage{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px 26px 26px; overflow:hidden;
}
.message-eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--gold); margin:0 0 4px;
}
.message-topic{
  font-family:'Fraunces', serif; font-size:26px; font-weight:600; margin:0 0 2px;
  color:var(--gold-bright); text-align:center;
}
.message-ref{
  font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--text-dim);
  margin:0 0 10px;
}
#message-chart{ width:100%; flex:1; min-height:260px; display:flex; align-items:center; justify-content:center; }
#message-chart svg{ overflow:visible; }

.m-node{
  font-family:'Inter', sans-serif; font-size:11.5px; fill:var(--text-muted);
  cursor:default;
}
.m-link{ stroke:var(--text-dim); stroke-opacity:0.28; stroke-width:1px; fill:none; }
.m-link--hot{ stroke:var(--gold); stroke-width:1.8px; }
.m-center{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1px;
}

.message-status{
  font-size:12.5px; color:var(--text-dim); font-style:italic; margin-top:8px; display:none;
}

.message-side{
  border-left:1px solid var(--rule);
  padding:22px 22px 26px; overflow-y:auto;
}
.message-side-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px;
}
.message-side h3{
  font-family:'Fraunces', serif; font-size:16px; color:var(--gold-bright); margin:0;
}
.reroll-btn{
  background:none; border:1px solid var(--rule); color:var(--text-muted);
  border-radius:999px; padding:6px 12px; font-size:11.5px; cursor:pointer; white-space:nowrap;
}
.reroll-btn:hover{ border-color:var(--gold); color:var(--gold); }

.m-verse{
  border-left:3px solid var(--gold); border-radius:8px; background:var(--bg-2);
  padding:14px 16px; margin-bottom:12px;
  animation:mVerseIn .45s ease both;
}
@keyframes mVerseIn{ from{ opacity:0; transform:translateX(8px);} to{ opacity:1; transform:translateX(0);} }
.m-verse-text{ font-size:14px; line-height:1.75; margin:0 0 8px; color:var(--text); }
.m-verse-ref{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-dim); margin:0; }

@media (prefers-reduced-motion: reduce){
  .m-verse{ animation:none; }
}