/* Jelenlétedben / In Your Presence: napi felolvasó sáv (TTS lejátszó + háttérzene)
   Minden napi oldal betölti; ha az adott naphoz nincs legenerált hangfájl,
   a #readerBar elem "hidden" marad (lásd assets/reader.js), a sáv egyáltalán
   nem jelenik meg. Ugyanaz az üvegszerű, ködös derengésű nyelvezet, mint a
   többi panelen: backdrop-filter blur + maszkolt színátmenetes keret. */

.reader-bar{
  position:relative; margin:22px 0 6px; padding:18px 20px 16px;
  border-radius:18px; overflow:hidden;
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  background:
    radial-gradient(120% 160% at 8% 0%, rgba(0,230,210,0.14) 0%, rgba(0,230,210,0) 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(138,107,255,0.14) 0%, rgba(138,107,255,0) 55%),
    rgba(13,19,32,0.62);
  box-shadow:0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
.reader-bar::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg, rgba(0,230,210,0.32) 0%, rgba(0,230,210,0.05) 40%, rgba(148,113,255,0.08) 60%, rgba(148,113,255,0.30) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.reader-bar[hidden]{ display:none; }

.reader-label{
  font-family:"Manrope", Arial, sans-serif;
  font-size:11px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  color:#00E6D2; opacity:0.9; margin-bottom:12px;
}

/* Csendes jelzés, ha az adott naphoz még nincs legenerált hangfájl: nincs
   gomb, nincs csúszka, csak egy visszafogott, halvány, dőlt szöveg, hogy a
   sáv eltűnése helyett világos legyen, mi történik (lásd assets/reader.js). */
.reader-pending{
  font-size:0.86rem; font-style:italic; color:var(--halvany, #a7bcc7); opacity:0.85;
}
.reader-pending[hidden]{ display:none; }

.reader-row{ display:flex; align-items:center; }
/* A puszta [hidden] attribútum önmagában nem elég: a fenti .reader-row{display:flex}
   szabály ugyanolyan specificitású, és mivel később töltődik be, felülírná a
   böngésző natív [hidden]{display:none} szabályát. Ugyanaz a jelenség, mint a
   lejátszás/szünet ikonoknál korábban - itt is kifejezetten ki kell kényszeríteni. */
.reader-row[hidden]{ display:none; }
.reader-scrub{ gap:10px; margin-bottom:12px; }
.reader-time{
  flex:0 0 auto; font-family:"Manrope", system-ui, sans-serif; font-size:0.72rem;
  color:var(--halvany, #a7bcc7); min-width:34px; text-align:center; letter-spacing:0.02em;
}

.reader-range{
  flex:1 1 auto; -webkit-appearance:none; appearance:none; height:5px; border-radius:999px;
  background:linear-gradient(90deg, rgba(0,230,210,0.55), rgba(138,107,255,0.55));
  outline:none; cursor:pointer;
}
.reader-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:15px; height:15px; border-radius:50%;
  background:#eafaf8; box-shadow:0 0 0 3px rgba(0,230,210,0.35), 0 2px 6px rgba(0,0,0,0.4);
  cursor:pointer; margin-top:0;
}
.reader-range::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; border:0;
  background:#eafaf8; box-shadow:0 0 0 3px rgba(0,230,210,0.35), 0 2px 6px rgba(0,0,0,0.4);
  cursor:pointer;
}
.reader-range::-moz-range-track{ height:5px; border-radius:999px; background:transparent; }

.reader-controls{ justify-content:space-between; gap:10px; }

.reader-speed{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  font-family:"Manrope", system-ui, sans-serif; font-size:0.76rem; font-weight:700;
  color:#cfe8e6; letter-spacing:0.02em;
  border:1px solid rgba(0,230,210,0.24); border-radius:999px; padding:7px 10px;
  background:rgba(0,230,210,0.06); background-image:none;
  color-scheme:dark; /* a lenyílásnál a böngésző saját (natív) listáját is sötétre kéri */
}
.reader-speed:focus-visible{ outline:2px solid #70FFF2; outline-offset:2px; }
.reader-speed option{
  background:#0d1522; color:#eaf2f5;
}

.reader-transport{ display:flex; align-items:center; gap:6px; }
.reader-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer; color:#a7bcc7;
  background:transparent; padding:0; position:relative;
  transition:background .16s ease, color .16s ease, transform .12s ease;
}
.reader-btn:hover{ color:#70FFF2; }
.reader-btn:focus-visible{ outline:2px solid #70FFF2; outline-offset:2px; }
/* A "hidden" HTML attribut nem mindig kap display:none-t <svg> elemeken
   (böngészőfüggő, a natív [hidden] szabály nem terjed ki megbízhatóan az
   SVG névtérre) - ezért itt kifejezetten kikényszerítjük. Enélkül a
   lejátszás/szünet és a hangjegy be/ki ikonpárok egyszerre látszódtak. */
.reader-btn svg[hidden]{ display:none !important; }
.reader-skip{ width:42px; height:42px; }
.reader-skip-n{
  position:absolute; bottom:2px; font-family:"Manrope",sans-serif; font-size:8px; font-weight:800;
}
.reader-play{
  width:46px; height:46px; margin:0 2px; color:#eafaf8;
  background:linear-gradient(135deg, rgba(0,230,210,0.32), rgba(138,107,255,0.32));
  border:1px solid rgba(0,230,210,0.4); box-shadow:0 4px 16px rgba(0,230,210,0.18);
}
.reader-play:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,230,210,0.3); }
.reader-play.is-loading{ opacity:0.6; cursor:wait; }
.reader-play .ic-play{ margin-left:2px; }
.reader-play[aria-pressed="true"] .ic-play,
.reader-play.is-playing .ic-play{ display:none; }
.reader-play.is-playing .ic-pause{ display:inline-flex !important; }

.reader-bg-wrap{ position:relative; }
.reader-bg-toggle{ width:42px; height:42px; }
.reader-bg-toggle.is-muted{ color:#5c6d76; }
.reader-bg-toggle.is-on{ color:#70FFF2; }

.reader-bg-pop{
  position:absolute; right:0; bottom:calc(100% + 10px); z-index:8;
  min-width:190px; padding:12px 14px; border-radius:14px;
  background:linear-gradient(145deg, rgba(15,23,38,0.96), rgba(18,15,30,0.96));
  border:1px solid rgba(0,230,210,0.2); box-shadow:0 14px 34px rgba(0,0,0,0.5);
}
.reader-bg-pop[hidden]{ display:none; }
.reader-bg-pop-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.reader-bg-pop-label{
  display:block; font-family:"Manrope", system-ui, sans-serif; font-size:0.72rem;
  font-weight:700; letter-spacing:0.06em; color:#cfe0e6;
}
.reader-bg-pop-close{
  flex:0 0 auto; width:20px; height:20px; padding:0; border:0; border-radius:50%;
  background:transparent; color:rgba(207,224,230,0.7); font-size:1.05rem; line-height:1; cursor:pointer;
}
.reader-bg-pop-close:hover{ background:rgba(255,255,255,0.07); color:#eaf2f5; }
.reader-bg-pop-close:focus-visible{ outline:2px solid #70FFF2; outline-offset:2px; }
.reader-bg-pop-row{ display:flex; align-items:center; gap:9px; color:#8fd8d0; }
.reader-bg-vol{
  flex:1 1 auto; -webkit-appearance:none; appearance:none; height:4px; border-radius:999px;
  background:linear-gradient(90deg, rgba(0,230,210,0.55), rgba(138,107,255,0.55)); outline:none; cursor:pointer;
}
.reader-bg-vol::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:13px; height:13px; border-radius:50%;
  background:#eafaf8; box-shadow:0 0 0 3px rgba(0,230,210,0.3); cursor:pointer;
}
.reader-bg-vol::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; border:0; background:#eafaf8;
  box-shadow:0 0 0 3px rgba(0,230,210,0.3); cursor:pointer;
}

.reader-yt-host{ position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }

@media (max-width:520px){
  .reader-bar{ padding:15px 15px 13px; }
  .reader-time{ font-size:0.68rem; min-width:30px; }
  .reader-speed{ font-size:0.7rem; padding:6px 8px; }
  .reader-play{ width:44px; height:44px; }
  .reader-skip{ width:38px; height:38px; }
  .reader-bg-toggle{ width:38px; height:38px; }
}