/* ═══════════════════════════════════════════════════════════════════════════
   Radio Orlicko DVR – Stylesheet
═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;1,600&family=Inter:wght@300;400;500;600&display=swap');

/* ── Proměnné ──────────────────────────────────────────────────────────── */
:root {
  --bg:           #0f0f12;
  --bg-surface:   #17171c;
  --bg-raised:    #1f1f27;
  --bg-hover:     #26262f;

  --accent:       #ff0000;
  --accent-dim:   rgba(255, 0, 0, 0.18);
  --accent-glow:  rgba(255, 0, 0, 0.35);
  --accent-dark:  #b30000;

  --text:         #f0f0f5;
  --text-mid:     #9090a8;
  --text-dim:     #55556a;

  --border:       rgba(255,255,255,0.07);
  --border-mid:   rgba(255,255,255,0.12);

  --radius:       10px;
  --radius-sm:    6px;
  --shadow:       0 4px 24px rgba(0,0,0,0.5);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text);
       min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
 
/* ── Layout ─────────────────────────────────────────────────────────── */
.app-wrap { max-width:1200px; margin:0 auto; padding:0 20px 60px; }
 
/* ── Loading overlay ────────────────────────────────────────────────── */
#loading-overlay {
  position:fixed; inset:0; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; z-index:100; transition:opacity .4s;
}
#loading-overlay.hidden { opacity:0; pointer-events:none; }
.loader-logo { font-family:'Barlow Condensed',sans-serif; font-weight:800;
               font-size:2rem; color:var(--accent); letter-spacing:1px; }
.loader-spin { width:32px; height:32px; border:3px solid var(--border-mid);
               border-top-color:var(--accent); border-radius:50%;
               animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loader-msg { font-size:.8rem; color:var(--text-mid); }
 
/* ── Live buffer overlay ────────────────────────────────────────────── */
#live-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.65); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; z-index:90;
}
.live-overlay-inner {
  display:flex; align-items:center; gap:14px;
  background:var(--bg-raised); border:1px solid var(--border-mid);
  border-radius:var(--radius); padding:20px 28px;
  font-size:.95rem; font-weight:500; color:var(--text);
}
 
/* ── Header ─────────────────────────────────────────────────────────── */
.site-header { display:flex; align-items:center; justify-content:space-between;
               padding:18px 0 16px; border-bottom:1px solid var(--border); gap:16px; }
.logo-area { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-badge { width:112px; height:112px; background:var(--accent); border-radius:8px;
              display:flex; align-items:center; justify-content:center;
              font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:18px;
              color:#fff; flex-shrink:0; }
.logo-text .name    { display:block; font-family:'Barlow Condensed',sans-serif;
                      font-weight:700; font-size:1.25rem; color:var(--text); }
.logo-text .tagline { display:block; font-size:.7rem; color:var(--text-mid);
                      letter-spacing:.8px; text-transform:uppercase; }
.header-right { display:flex; align-items:center; gap:12px; }
 
/* Live/Rec badge */
#live-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
              border-radius:5px; font-family:'Barlow Condensed',sans-serif;
              font-weight:700; font-size:.85rem; letter-spacing:1px; text-transform:uppercase; }
#live-badge.is-live { background:rgba(220,38,38,.15); color:#f87171;
                      border:1px solid rgba(220,38,38,.3); }
#live-badge.is-live  .dot { background:#f87171; animation:blink 1.2s infinite; }
#live-badge.is-rec  { background:var(--accent-dim); color:var(--accent);
                      border:1px solid rgba(244,123,32,.3); }
#live-badge.is-rec   .dot { background:var(--accent); }
.dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
 
#go-live-btn { display:none; align-items:center; gap:6px; padding:6px 14px;
               background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm);
               font-size:.78rem; font-weight:600; cursor:pointer; white-space:nowrap;
               transition:background .2s,transform .15s; }
#go-live-btn:hover { background:var(--accent-dark); transform:scale(1.03); }
 
/* ── Player Card ────────────────────────────────────────────────────── */
.player-card { background:var(--bg-surface); border:1px solid var(--border);
               border-radius:var(--radius); padding:20px 24px; margin:20px 0 0;
               display:flex; align-items:center; gap:20px; }
 
/* Cover art */
.player-art { width:76px; height:76px; border-radius:8px; flex-shrink:0;
              overflow:hidden; border:1px solid var(--border-mid);
              background:var(--bg-raised); position:relative; }
.player-art img { width:100%; height:100%; object-fit:cover;
                  transition:opacity .4s; }
.cover-default { width:100%; height:100%; display:flex; align-items:center;
                 justify-content:center; color:var(--text-dim); }
 
/* Now playing */
.np-info { flex:1; min-width:0; }
.np-artist { font-size:.875rem; color:var(--accent); font-weight:500; white-space:nowrap;
             overflow:hidden; text-overflow:ellipsis; }
.np-title  { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.3rem;
             color:var(--text); white-space:nowrap; overflow:hidden;
             text-overflow:ellipsis; line-height:1.2; margin-top:2px; }
.np-show   { margin-top:6px; }
.np-show span { background:var(--bg-raised); border:1px solid var(--border);
                padding:2px 9px; border-radius:20px; font-size:.7rem; color:var(--text-mid); }
 
/* Controls */
.player-controls { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.ctrl-btn { width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            transition:transform .15s,background .2s; }
.ctrl-btn.primary   { background:var(--accent); color:#fff;
                      box-shadow:0 0 18px var(--accent-glow); }
.ctrl-btn.primary:hover   { background:var(--accent-dark); transform:scale(1.07); }
.ctrl-btn.secondary { background:var(--bg-raised); color:var(--text-mid);
                      border:1px solid var(--border-mid); }
.ctrl-btn.secondary:hover { background:var(--bg-hover); color:var(--text); }
 
/* ── Timeline section ───────────────────────────────────────────────── */
.timeline-section { margin-top:18px; }
.timeline-section-header { display:flex; align-items:center;
                            justify-content:space-between; margin-bottom:8px; }
.section-title   { font-family:'Barlow Condensed',sans-serif; font-weight:700;
                   font-size:.8rem; text-transform:uppercase;
                   letter-spacing:2px; color:var(--text-mid); }
.tl-time-window  { font-size:.72rem; color:var(--text-dim); }

/* Nový fixní kontejner držící osu a ukazatel */
.tl-container {
  position: relative;
  width: 100%;
}
 
/* Scrollovatelný kontejner */
.tl-scroll {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow-x:auto; overflow-y:hidden;
  cursor:default;
  /* scrollbar styling */
  scrollbar-width:thin;
  scrollbar-color:var(--bg-raised) transparent;
  position:relative;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.tl-scroll::-webkit-scrollbar        { height:4px; }
.tl-scroll::-webkit-scrollbar-track  { background:transparent; }
.tl-scroll::-webkit-scrollbar-thumb  { background:var(--bg-raised); border-radius:4px; }
 
/* Vnitřní kontejner – šířka nastavena JS */
.tl-inner {
  position:relative;
  /* výška = 2× řady */
  height: calc(52px + 52px);
  min-width:100%;
}
 
/* Řady */
.tl-row {
  position:absolute; left:0; right:0; height:44px;
}
#shows-track { top:4px; }
#songs-track { top:52px; }
 
/* Štítky řad */
.tl-row::before {
  content: attr(data-label);
  position:absolute; left:6px; top:50%; transform:translateY(-50%);
  font-size:.6rem; font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; color:var(--text-dim); pointer-events:none;
  z-index:4;
}
 
/* Hodinové čáry */
.tl-hour-line {
  position:absolute; top:0; height:100%;
  width:1px; background:rgba(255,255,255,.06); pointer-events:none; z-index:1;
}
 
.tl-block:hover { filter:brightness(1.25); transform:scaleY(1.05); z-index:3; }
.tl-block.show {
  background:linear-gradient(135deg,#2a3a8a,#1e2d7a);
  border:1px solid rgba(100,130,220,.35);
}
.tl-block.show-default {
  background:var(--bg-raised); border:1px dashed var(--border-mid); cursor:default;
}
.tl-block.show-default:hover { filter:none; transform:none; }
.tl-block.song {
  background:linear-gradient(135deg,rgba(244,123,32,.22),rgba(180,80,10,.22));
  border:1px solid rgba(244,123,32,.3);
}
.tl-block.song:hover { border-color:var(--accent); }
.tl-block.is-current {
  z-index: 10 !important;  
  box-shadow:0 0 0 2px var(--accent), inset 0 0 0 1px rgba(244,123,32,.25);
}
.sticky-text-wrap {
  position: sticky;
  left: 15px; /* Text se zastaví 15px od levého okraje viditelné obrazovky */
  width: max-content;
  max-width: calc(100vw - 40px);
  padding-left: 12px;
  padding-right: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  pointer-events: none;
}

/* ── OPRAVENÉ STYLY PRO BLOKY A STICKY EFEKT ── */

/* 1. HLAVNÍ BLOK (Musí být základní block bez overflow:hidden) */
.tl-block {
  position: absolute;
  top: 3px;
  height: 38px;
  border-radius: 5px;
  
  /* 📌 MAGICKÝ TRIK: Nahrazuje overflow:hidden. Ořízne text podle tvaru bloku, 
     aniž by zničil position: sticky uvnitř. */
  clip-path: inset(0 round 5px); 
  
  /* 📌 Vypnutí flexboxu, aby se sticky vnitřek mohl svobodně hýbat */
  display: block; 
  padding: 0; 
  
  transition: filter .15s, transform .1s;
  user-select: none;
  z-index: 2;
}

/* Ostatní vlastnosti bloků (barvy, stíny atd.) */
.tl-block:hover { filter: brightness(1.25); transform: scaleY(1.05); z-index: 3; }
.tl-block.show { background: linear-gradient(135deg,#2a3a8a,#1e2d7a); border: 1px solid rgba(100,130,220,.35); }
.tl-block.show-default { background: var(--bg-raised); border: 1px dashed var(--border-mid); cursor: default; }
.tl-block.show-default:hover { filter: none; transform: none; }
.tl-block.song { background: linear-gradient(135deg,rgba(244,123,32,.22),rgba(180,80,10,.22)); border: 1px solid rgba(244,123,32,.3); }
.tl-block.song:hover { border-color: var(--accent); }
.tl-block.is-current { box-shadow: 0 0 0 2px var(--accent), inset 0 0 0 1px rgba(244,123,32,.25); }

/* 2. STICKY OBAL UVNITŘ BLOKU */
.tl-block-sticky {
  position: sticky;
  left: 12px;       /* 📌 Odsazení od levého okraje obrazovky */
  
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  width: max-content;
  /* Kombinace zajišťující, že text nepřeteče blok ani obrazovku mobilu */
  max-width: min(100%, calc(100vw - 40px)); 
  
  box-sizing: border-box;
  padding-left: 8px;  
  padding-right: 8px;
  pointer-events: none; 
}

/* 3. SAMOTNÉ TEXTY (S třemi tečkami, pokud by byl blok příliš krátký) */
.block-primary { 
  font-family: 'Barlow Condensed', sans-serif; 
  font-weight: 600;
  font-size: .8rem; 
  color: var(--text); 
  line-height: 1.2; 
}

.block-secondary { 
  font-size: .65rem; 
  color: var(--text-mid); 
  margin-top: 1px; 
}

.block-primary, .block-secondary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Playhead - upraven pro fixní pozici uprostřed kontejneru */
/* 1. Klíčová změna: Tvůj nový obal musí být pozičním základem pro playhead */
.tl-container {
  position: relative;
  width: 100%;
}

/* 2. Kompletně přepiš styl pro #playhead */
#playhead {
  /* ZMĚNA: Playhead už se nepohybuje uvnitř tl-inner, ale je fixní vůči tl-scroll */
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ff0000; /* Vaše barva rysky */
  z-index: 50;
  pointer-events: none;
  
  /* Umístění přesně doprostřed viditelné zóny */
  left: 50%;
  transform: translateX(-50%);
}

/* 3. Volitelný bonus: Přidej na vrch playheadu malý designový trojúhelníček (ukazatel) */
#playhead::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--accent, #ff0000);
}
 
/* Časová osa */
.tl-time-axis {
  position:relative; height:28px; min-width:100%;
  border-top:1px solid var(--border);
}
.tl-tick {
  position:absolute; transform:translateX(-50%);
  font-size:.62rem; color:var(--text-dim); white-space:nowrap;
  top:6px;
}
.tl-tick::before {
  content:''; display:block; width:1px; height:3px;
  background:var(--border-mid); margin:0 auto 2px;
}
.tl-tick.now-tick { color:var(--accent); font-weight:600; }

#past-zone {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim, #55556a);
  font-size: 0.85rem;
  font-style: italic;
  pointer-events: none;
  z-index: 10;
  border-right: 1px dashed rgba(255, 255, 255, 0.15);
}


/* Budoucí zóna – upravena pouze pro řadu skladeb */


#future-zone {
  position:absolute;
  top:52px; /* Zarovnáno s #songs-track */
  height:44px; /* Výška řady skladeb */
  bottom:auto;

  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.02) 10px,
      rgba(255,255,255,.05) 10px,
      rgba(255,255,255,.05) 20px
    ),
    var(--bg-surface); /* Neprůhledné pozadí skryje budoucí prázdné tracky */

  border-left:1px dashed rgba(255,255,255,.12);

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--text-dim);
  font-size:.72rem;
  font-style:italic;

  pointer-events:none;
  z-index: 5;
}
 
/* Legenda */
.tl-legend { display:flex; align-items:center; gap:16px;
             margin-top:8px; padding:0 2px; }
.legend-item { font-size:.7rem; color:var(--text-dim);
               display:flex; align-items:center; gap:6px; }
.legend-item::before { content:''; width:14px; height:8px; border-radius:3px; }
.legend-item.show::before  { background:linear-gradient(90deg,#2a3a8a,#1e2d7a); }
.legend-item.song::before  { background:linear-gradient(90deg,rgba(244,123,32,.6),rgba(180,80,10,.6)); }
.legend-item.hint::before  { display:none; }
.legend-item.hint          { margin-left:auto; font-style:italic; }
 
/* ── Status bar ─────────────────────────────────────────────────────── */
.status-bar { display:flex; align-items:center; justify-content:space-between;
              padding:10px 2px 0; font-size:.72rem; color:var(--text-dim); }
 
/* ── Error toast ────────────────────────────────────────────────────── */
#error-toast {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(80px);
  background:#3a1010; color:#fca5a5;
  border:1px solid rgba(239,68,68,.4);
  padding:10px 20px; border-radius:8px; font-size:.82rem;
  z-index:200; transition:transform .3s; pointer-events:none; white-space:nowrap;
}
#error-toast.show { transform:translateX(-50%) translateY(0); }
 
/* ── Tooltip ────────────────────────────────────────────────────────── */
.tl-tooltip {
  position:fixed; background:var(--bg-raised); border:1px solid var(--border-mid);
  border-radius:6px; padding:8px 12px; font-size:.75rem; pointer-events:none;
  z-index:300; max-width:240px; box-shadow:var(--shadow); opacity:0; transition:opacity .15s;
}
.tl-tooltip.visible { opacity:1; }
.tt-title { font-weight:600; color:var(--text); margin-bottom:2px; }
.tt-sub   { color:var(--text-mid); }
.tt-time  { color:var(--accent); font-size:.7rem; margin-top:4px; }
 
/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:700px) {
  .player-card { flex-wrap:wrap; padding:16px; gap:14px; }
  .player-art  { width:60px; height:60px; }
  .np-title    { font-size:1.1rem; }
  .site-header { flex-wrap:wrap; }
  .logo-text .tagline { display:none; }
}
@media (max-width:480px) {
  .player-controls { width:100%; justify-content:center; }
  .header-right    { gap:8px; }
}
 
/* ── Skrýt štítky řad při hoveru (zoom = dostatek místa na texty bloků) ── */
.tl-scroll:hover .tl-row::before { opacity: 0; transition: opacity .2s; }
.tl-row::before { transition: opacity .2s; }
 
/* ── Cursor pro drag-scroll ─────────────────────────────────────────────── */
.tl-scroll          { cursor: grab; }
.tl-scroll:active   { cursor: grabbing; }
/* Bloky mají vlastní cursor */
.tl-block[style*="pointer"] { cursor: pointer !important; }
 
/* Časové ticky – klikatelné pro seek */
.tl-tick         { cursor: pointer; }
.tl-tick:hover   { color: var(--accent); }
.tl-tick.now-tick:hover { color: var(--accent-dark); }


/* Živý blok hrající skladby – vykreslí se v celé šíři a barvě */
.tl-block.song.live-moving-block {
  background: rgba(244, 123, 32, 0.40) !important; /* Celý blok je oranžový */
  border-color: rgba(244, 123, 32, 0.6) !important;
  overflow: hidden;
  position: absolute;
}

/* Samotné šrafování neodehrané budoucnosti UVNITŘ bloku písničky */
.tl-block.song.live-moving-block::after {
  content: '';
  position: absolute;
  /* Začátek šrafování se dynamicky posouvá podle playheadu */
  left: var(--playhead-px, 0px);
  right: 0;
  top: 0;
  bottom: 0;
  /* Šrafovaná textura */
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.05) 10px,
    transparent 10px,
    transparent 20px
  );
  /* Ztmavení budoucí části, aby bylo jasné, že ještě nehrála */
  background-color: rgba(23, 23, 28, 0.45); 
  pointer-events: none;
}

/* ── CHATWOOT – zelená tečka při online agentovi (injektována JS) ── */
        #cw-online-dot {
            position: fixed;
            /* Chatwoot bublina: 56×56px, bottom:20px, right:20px
               Tečka (14px) leží na jejím pravém horním rohu:
               bottom = 20 + 56 - 7 = 69px  |  right = 20 - 7 = 13px        */
            bottom: 69px;
            right: 13px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #22c55e;
            border: 2px solid #fff;
            z-index: 2147483647;   /* stejný max jako Chatwoot widget */
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s;
            box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
        }
        #cw-online-dot.visible {
            opacity: 1;
            animation: cwDotPulse 2.5s ease-in-out infinite;
        }
        @keyframes cwDotPulse {
            0%   { box-shadow: 0 0 0 0   rgba(34,197,94,0.5); }
            60%  { box-shadow: 0 0 0 8px rgba(34,197,94,0);   }
            100% { box-shadow: 0 0 0 0   rgba(34,197,94,0);   }
        }
        @media (max-width: 768px) {
            /* Chatwoot na mobilu bývá o trochu menší/jinde – doladit dle potřeby */
            #cw-online-dot {
                bottom: 62px;
                right: 10px;
                width: 12px;
                height: 12px;
            }
        }