html,
body {
 margin: 0;
 padding: 0;
 height: 100%;
 touch-action: manipulation;
 overscroll-behavior: none;
}

body {
 background: radial-gradient(circle at top, #020617 0%, #020617 45%, #000000 100%);
 color: #f9fafb;
 font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  
 /* 🔑 תיקון קריטי ל-Layout: הסרת ה-padding-top המיותר */
 padding-top: 0; 
 padding-bottom: 0;
  
  /* 🔑 תשתית Flexbox לניגון ברקע עקבי ב-iOS */
  display: flex;
  flex-direction: column;
}

/* ===== TOP BAR (הגובה הכולל כעת 120px) ===== */

#top-bar {
 /* 🔑 שינוי: position: relative נדרש למיקום כפתור HR */
 position: relative; 
 z-index: 30;
 padding: 10px 10px 8px; /* פדינג פנימי */
 
 /* 🔑 הגובה הכולל של הבר. משנה את גובהו (ולא רק הוספת מרווח). */
 height: 102px; /* 102px + 10px פדינג עליון + 8px פדינג תחתון = 120px גובה אפקטיבי */
 flex-shrink: 0; /* מונע התכווצות */

 /* גרדיאנט עם כמה צבעים */
background: radial-gradient(
  circle at 40% -10%,
  var(--pulse-color) 0%,
  #020617 30%,
  #020617 55%,
  #000000 70%,
  #0a1544 80%
);
 background-size: 200% 200%;
 animation: topbarBreath 45s ease-in-out infinite;
}

@keyframes topbarBreath {
 0% {
  background-size: 200% 200%;
  background-position: 50% 0%;
  --pulse-color: #6a8ae3; /* כחול */
 }
 25% {
  background-size: 210% 210%;  /* קצת גדל */
  background-position: 60% 30%;
  --pulse-color: #aa5ff0; /* סגול */
 }
 50% {
  background-size: 200% 200%;  /* חוזר למצב בסיס */
  background-position: 50% 60%;
  --pulse-color: #b786e4; /* תכלת */
 }
 75% {
  background-size: 215% 215%;  /* עוד נשימה */
  background-position: 40% 30%;
  --pulse-color: rgb(213, 221, 123); /* ירקרק */
 }
 100% {
  background-size: 200% 200%;
  background-position: 50% 0%;
  --pulse-color: #dfca88; /* שוב כחול */
 }
}


/* ===== VOLUME MENU ===== */
.menu-volume {
    padding: 10px 14px;
}

.menu-volume-label {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 6px;
}

#volume-slider {
    width: 100%;
    height: 5px;
    appearance: none;
    background: linear-gradient(
        to right,
        #22c55e 80%,
        rgba(255,255,255,0.15) 80%
    );
    border-radius: 6px;
    outline: none;
}

#volume-slider::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34,197,94,0.7);
    cursor: pointer;
}

.menu-separator {
    border: none;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 6px 0;
}


#volume-percent {
    margin-left: 6px;
    font-size: 12px;
    opacity: 0.7;
}

/* הכותרת "NG Player" */
#top-bar .page-title {
 margin: 8px 0 0;
 font-size: 24px;
 font-weight: 700;
}




/* שורת ברנד (לוגו + טקסט) */
.brand-row {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-top: 8px;

}

.brand-title {
  font-size: 24px;
  font-weight: 700;
  color: #f9fafb;
  letter-spacing: 0.03em;
}

.brand-logo {
  width: 45px;
  height: auto;
  display: block;
}

body.menu-open {
    overflow: hidden;
}

@keyframes playPulse {
    0%   { transform: scale(1);   box-shadow: 0 0 0 rgba(34,197,94,0); }
    50%  { transform: scale(1.06); box-shadow: 0 0 16px rgba(34,197,94,0.7); }
    100% { transform: scale(1);   box-shadow: 0 0 0 rgba(34,197,94,0); }
}

.player-btn-primary.pulse {
    animation: playPulse 0.3s ease-out;
}

.playlist-menu {
    position: fixed;
    top: 74px;
    left: 15px;
    right: 15px;

    width: auto; /* רוחב מלא בין הרווחים */
    z-index: 9999;

    background: linear-gradient(
        180deg,
        rgba(34,26,57,0.98),
        rgba(20,15,40,0.98)
    );

    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
}

.playlist-menu {
    padding: 14px 16px;
}

.playlist-menu .menu-item {
    padding: 10px 12px;
    border-radius: 10px;
}

.playlist-menu .menu-item:hover {
    background: rgba(255,255,255,0.08);
}


.playlist-menu > .menu-item {
    padding: 8px 12px;
    color: #fff;
    cursor: pointer;
}

.playlist-menu div:hover {
    background: rgba(255,255,255,0.1);
}

.hidden { display: none; }

@media (display-mode: standalone) {
  .playlist-menu {
        top: calc(74px + env(safe-area-inset-top, 0));
    }
}


/* ===== APP LAYOUT - מכל ראשי Flexbox ===== */

#app {
 /* 🔑 גובה מלא יחסי (100% של ה-body) */
 height: 100dvh;
 width: 100vw;
 color: #ffffff;
 display: flex;
 flex-direction: column; /* מסדר את הבר, הרשימה והנגן זה מתחת לזה */
 font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 min-height: 0;
}

/* אזור רשימת שירים - תופס את המקום הנותר וגולל */
.app-main {
  padding: 1rem;
  padding-bottom: 1rem;

  /* 🔥 Android TV safe scroll */
  height: calc(100vh - 120px - 110px); /* top-bar + player */
  overflow-y: scroll;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: auto;

  /* 🧹 לא מזיק, אבל לא קריטי עכשיו */
  min-height: 0;
}

/* העלמת פס הגלילה בכל הדפדפנים */
.app-main {
    scrollbar-width: none; /* ל-Firefox */
    -ms-overflow-style: none; /* ל-Internet Explorer/Edge */
}

.app-main::-webkit-scrollbar {
    display: none; /* ל-Chrome, Safari וטלוויזיות (TCL/Android) */
}

.app-title {
 font-size: 1.5rem;
 margin-bottom: 1rem;
}

/* ===== SONG LIST ===== */

/* תיקון ייעודי לטלוויזיות חכמות בלבד */
@media screen and (min-width: 1025px) and (hover: none), 
       screen and (min-width: 1025px) and (pointer: coarse) {
    
    .song-list {
        /* ריווח ענקי בתחתית רק למסכי טלוויזיה */
        padding-bottom: 300px !important;
    }

    .app-main {
        /* מבטיח שהדפדפן של הטלוויזיה לא יבטל את הגלילה */
        overflow-y: scroll !important;
        height: auto !important;
        flex: 1 !important;
    }
}

.song-list {
 list-style: none;
 padding: 8px 0 24px;
 margin: 0;
}

.song-item {
 display: flex;
 align-items: center;
 padding: 0.75rem;
 margin-bottom: 0.5rem;
 border-radius: 0.85rem;
 background: rgba(15, 23, 42, 0.95);
 cursor: pointer;
 gap: 0.75rem;
 transition:
  background 0.15s ease,
  transform 0.12s ease,
  box-shadow 0.15s ease;
 box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.song-item:hover {
 background: rgba(17, 24, 39, 0.98);
 box-shadow: 0 5px 18px rgba(0, 0, 0, 0.55);
}

/* שורה פעילה */
.song-item--active {
 background: linear-gradient(135deg, #14532d, #15803d);
 color: #f9fafb;
 transform: translateX(4px);
 box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
}

.song-item--active .song-artist {
 opacity: 0.9;
}

.song-item--active,
.song-item--active:hover {
 background: linear-gradient(135deg, #14532d, #15803d) !important;
 color: #f9fafb;
}

.song-info {
 flex: 1;
 overflow: hidden;
}

.song-cover {
 width: 55px;
 height: 55px;
 border-radius: 12px;
 object-fit: cover;
 flex-shrink: 0;
 box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
}

.song-title {
 font-weight: 600;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 font-size: 0.95rem;
}

.song-artist {
 font-size: 0.8rem;
 color: #9ca3af;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

/* סלוט של האקולייזר בשורה */
.song-eq-slot {
 width: 80px;
 height: 40px;
 margin-left: 8px;
 display: flex;
 align-items: flex-end;
 justify-content: center;
 overflow: hidden;
 opacity: 0;
 transition: opacity 0.15s ease;
}

.song-item--active .song-eq-slot {
 opacity: 1;
}

/* ===== VISUALIZER ===== */

#visualizer {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: flex-end;
 justify-content: center;
 gap: 3px;
 overflow: hidden;
}

.visualizer-bar {
 width: 2px;
 height: 100%;
 border-radius: 999px;
 transform-origin: bottom;
 transform: scaleY(0.2);
 transition: transform 0.05s linear;
 background: linear-gradient(to top, #22c55e, #a855f7);
 box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
 opacity: 0.85;
}

/* רק כשהאקולייזר פעיל – להדגיש קצת יותר */
.visualizer--active .visualizer-bar {
 opacity: 1;
}

.song-eq-slot > #visualizer {
    position: relative !important; 
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important; /* 🔑 ודא שהוא מוצג כ-flexbox */
}
/* ===== PLAYER BOTTOM BAR (לא מקובע) ===== */

#player {
 /* 🔑 הוסר position: fixed. נשאר בתחתית עקב Flexbox */
 z-index: 40;
 background: radial-gradient(circle at top, #020617, #020617 40%, #000 100%);
 border-top: 1px solid #111827;
 padding: 10px 14px 16px;
 box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.8);
 
 /* מונע התכווצות של הנגן */
 flex-shrink: 0;
}

.player-meta {
 margin-bottom: 0.5rem;
}

.player-title {
 font-size: 0.95rem;
 font-weight: 600;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

.player-artist-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px; /* קצת רווח ביניהם */
}

/* artist – תופס בערך 80% */
.player-artist {
    flex: 0 0 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* הזמן – בצד ימין, קטן ועדין */
.player-duration {
    flex: 0 0 20%;
    text-align: left;
    font-size: 12px;
    color: #44c977;
}

/* סרגל התקדמות */
.player-progress {
  width: 100%;
  margin-bottom: 0.75rem;
  accent-color: #3b82f6;

  position: relative;
  z-index: 1000;
  pointer-events: auto;

  /* 🔑 זה הפיקס שחסר לך */
  touch-action: none;
}



/* ===============================
   PLAYER RANGE (Progress + Volume)
   =============================== */
/* ===============================
   RANGE THUMB WITH SMILE (FINAL)
   =============================== */

/* בסיס */

/* ניקוי ובנייה מחדש של ה-Progress Bar */
#player input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100%;
    height: 30px; 
    background: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: none;
    touch-action: none; /* קריטי למניעת גלילה בזמן גרירה */
}

/* הפס עצמו */
#player input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    background: #1f2937;
    border-radius: 999px;
    border: none;
}

/* הכפתור (הסמיילי) */
#player input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 26px;
    height: 26px;
    margin-top: -9px; /* ממקם בדיוק במרכז ה-track */
    border-radius: 50%;
    background-color: #f97316;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    position: relative;
    z-index: 2;
}

/* הסמיילי במצב נגינה */
#player.is-playing input[type="range"]::-webkit-slider-thumb {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='9' cy='9' r='1.5' fill='white'/><circle cx='15' cy='9' r='1.5' fill='white'/><path d='M8 14c1.2 1.2 2.8 1.2 4 1.2s2.8 0 4-1.2' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}


.player-btn {
    font-size: 1.6rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: none;
    background: #020617;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.player-btn:active {
    transform: scale(0.96);
}

/* כפתורים */
.player-controls {
 display: flex;
 justify-content: center;
 gap: 1.8rem;
 align-items: center;
}

.player-btn-primary {
    all: unset;                     /* 🔥 מנקה הכול – אין ריבוע שחור */
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;
    border-radius: 50%;

    background: radial-gradient(
        circle at 30% 30%,
        #22c55e,
        #16a34a 55%,
        #14532d 100%
    );

    cursor: pointer;

    box-shadow:
        0 0 0 4px rgba(34,197,94,0.25),
        0 10px 26px rgba(0,0,0,0.65);

    transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.player-btn-primary:hover {
    filter: brightness(1.08);
}

.player-btn-primary:active {
    transform: scale(0.94);
    box-shadow:
        0 0 0 6px rgba(34,197,94,0.35),
        0 6px 18px rgba(0,0,0,0.7);
}

.player-btn-primary:focus,
.player-btn-primary:focus-visible {
    outline: none;
}
.player-btn-primary .play-icon {
    width: 26px;
    height: 26px;
    fill: #ffffff;
    margin-left: 2px;      /* איזון ויזואלי */
    pointer-events: none;
}
.player-btn-primary svg {
    width: 26px;
    height: 26px;
    display: block;
}

.player-btn-primary svg path {
    fill: #ffffff !important;   /* 🔥 זה קריטי */
}
/* ===== RESET BUTTON (HR) - ממוקם בתוך הטופ בר ===== */

#btn-reset-audio {
 /* 🔑 שינוי: מיקום מוחלט ביחס ל-#top-bar */
 position: absolute; 
 top: 10px; /* מרווח מלמעלה בתוך הבר */
 right: 14px; /* מרווח מימין בתוך הבר */
 
 z-index: 9999;
 width: 72px;
 height: 40px;
 background-color: #4b5563;
 border-radius: 10px;
 border: 1px solid rgba(148, 163, 184, 0.6);
 color: #e5e7eb;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}


/* ===== DEBUG PANEL (נשאר מקובע) ===== */

#debug-panel {
 position: fixed;
 left: 4px;
 top: 50%;
 transform: translateY(-50%);
 max-width: 45vw;
 max-height: 40vh;
 overflow-y: auto;
 font-size: 10px;
 line-height: 1.2;
 color: #e5e7eb;
 background: rgba(15, 23, 42, 0.85);
 padding: 4px 6px;
 border-radius: 6px;
 z-index: 9999;
 pointer-events: none; 
 white-space: nowrap;
 box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
}

#debug-panel .debug-line {
 margin-bottom: 2px;
 opacity: 0.9;
}


#top-bar > #visualizer {
 position: absolute;
 width: 0;
 height: 0;
 overflow: hidden;
}
.brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* LEFT ו־RIGHT נשארים בשני הצדדים */
    padding: 4px 6px;
}

/* קבוצה שמאלית — לוגו + טקסט */
.brand-left {
    display: flex;
    align-items: center;
    gap: 6px; /* רווח קטן בין הלוגו לטקסט */
}

.brand-title {
    font-size: 18px; 
    color: #fff;
    margin: 0;
}

/* ההמבורגר יישאר כמו שהוא */
.brand-controls {
    display: flex;
    align-items: center;
}


.hamburger {
    width: 26px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;

    position: relative;
    z-index: 10000;
}

.hamburger span {
    display: block;
    height: 3px;
    background-color: #fff;
    border-radius: 3px;
    transition: 0.25s ease;
}

@keyframes mock-pump {
  0%  { transform: scaleY(0.4); } 
  50% { transform: scaleY(0.8); }
  100% { transform: scaleY(0.6); } 
}

/* 2. הפעלת האנימציה באמצעות Class (visualizer--ios-active) */
.visualizer--mock.visualizer--ios-active .visualizer-bar { 
animation-name: mock-pump;  
  /* 🔑 התיקון: הגדל את משך הזמן כדי להאט את הקפיצות */
  animation-duration: 0.8s; /* שנה מ-0.8s ל-1.2s (או 1.5s אם עדיין מהר) */  
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;  
  animation-delay: calc(var(--bar-index) * 0.30s); /* השהייה מבוססת על אינדקס הבר */
}
.visualizer--mock {
    /* נטרל כל הגבלה קודמת שניתנה ל-#visualizer */
    width: 80px !important; /* רוחב שמתאים ל-slot (כפי שראינו קודם ב-CSS) */
    height: 40px !important; /* גובה קבוע שמאפשר ל-bars להופיע */
    display: flex !important; /* ודא שהוא מתנהג כ-flex container */
    align-items: flex-end !important; /* יישור כלפי מטה */
    justify-content: center !important;
    gap: 3px !important;
}

/* ודא שה-bars הפנימיים עובדים */
.visualizer--mock .visualizer-bar {
    height: 100%; /* תופס את כל גובה ה-40px שקבענו */
    transform-origin: bottom; /* להפעלה נכונה של האנימציה */
}



/* ======================================================= */
/* 1. הגדרת אנימציית הזוהר הפועם (@keyframes) */
/* ======================================================= */
@keyframes pulsing-glow {
    0% {
        /* זוהר חלש וצמוד: הפיזור קטן יותר (לדוגמה, 4px) */
        box-shadow: 0 0 4px rgba(186, 227, 187, 0.4); 
    }
    50% {
        /* שיא הזוהר (הפעימה): הפיזור בינוני (לדוגמה, 8px ו-12px) */
        box-shadow: 0 0 8px rgba(112, 207, 134, 0.8), 
                    0 0 12px rgba(230, 114, 245, 0.5); 
    }
    100% {
        /* חוזר לזוהר החלש והצמוד */
        box-shadow: 0 0 4px rgba(205, 232, 57, 0.4); 
    }
}

.song-item--active { /* 🔑 התיקון: שימוש ב-song-item--active */
    /* הוסף את צבע הרקע הדומה לגוון הזוהר (אם לא קיים) */
    /* background: #4caf50; */ 
    
    /* 🔑 מפעילים את האנימציה */
    animation-name: pulsing-glow;
    
    /* 🔑 משך האנימציה (כדי להתאים לקצב) */
    animation-duration: 3.0s;
    
    /* פונקציית תזמון חלקה (למעבר עדין) */
    animation-timing-function: ease-in-out; 
    
    /* חזרה אינסופית */
    animation-iteration-count: infinite; 
}

.app_version {
 position: absolute;
    bottom: 33px;
    left: 19px;
    z-index: 99;
    color: #fff;
    font-size: 10px;
    padding: 2px;
}


.menu-section {
  padding: 12px 10px;
  
}

.menu-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-section-title .status {
  font-size: 11px;
  font-weight: 500;
  color: #22c55e;
  opacity: 0.8;
  letter-spacing: 0.04em;
}

.menu-section.protection-active {
  border-left: 3px solid rgba(34,197,94,0.6);
  
}

.menu-section.protection-active .menu-section-title::after {
  content: " • ACTIVE";
  font-size: 11px;
  color: #22c55e;
  margin-left: 6px;
  font-weight: 500;
}


.menu-toggle-row {
  padding: 6px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 12px
}

.menu-toggle-label {
 font-size: 15px;
  font-weight: 600;
}

.menu-select-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-select-row select {
  font-size: 14px;
  padding: 6px 8px;
  background: #020617;
  color: #fff;
}

.menu-select-row label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.menu-hint {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: #94a3b8;
  opacity: 0.85;
}

.menu-section::after {
  content: "";
  display: block;
  height: 1px;
  background: rgba(34,197,94,0.25);
  margin-top: 12px;
}
/* ======================================================== */
/* 2. סטיילינג למסכים גדולים ב-Standalone Mode (PWA Desktop) */
/* ======================================================== */
@media all and (display-mode: standalone) {
  
  #top-bar {
    /*      דוחף את התוכן הפנימי כלפי מטה:
     10px (הריפוד הבסיסי הרצוי) + env(safe-area-inset-top, 0)
    */
    padding-top: calc(10px + env(safe-area-inset-top, 0));
    
    /* ודא שה-Height הוא אוטומטי */
    height: auto; 
    
    /* ודא שהריפוד התחתון אינו נפגע */
    padding-bottom: 8px; 
  }
  
  /* (השאר את תיקון הנגן התחתון) */
  #player {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)); /* משתמשים ב-16px כבסיס כפי שמוגדר למטה */
  }
}