/* ==========================================================================
   LOOKITSGRAPHIC Media Downloader — visuel URL animé
   Remplace .url-symbol (disque → chute → bac compteur)
   ========================================================================== */

.dl-visual {
  --dl-ink: var(--ink, #11110f);
  --dl-acid: var(--acid, #d9ff32);
  --dl-purple: var(--purple, #7357ff);
  --dl-sky: #62bfff;
  --dl-orange: var(--coral, #ff6038);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 16px 0 8px;
  flex-shrink: 0;
}

/* --- Disque : anneau qui tourne + flèche qui plonge -------------------- */

.dl-dial-wrap {
  position: relative;
  width: 62px;
  height: 62px;
  flex: none;
}

.dl-dial {
  position: absolute;
  inset: 0;
  border: 2px solid var(--dl-ink);
  border-radius: 50%;
  background: var(--dl-purple);
  box-shadow: 5px 5px 0 var(--dl-ink);
  overflow: hidden;
}

.dl-dial::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, transparent 0 66%, var(--dl-acid) 66% 100%);
  animation: dl-spin 1.9s linear infinite;
}

.dl-dial::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--dl-purple);
}

@keyframes dl-spin {
  to { transform: rotate(360deg); }
}

.dl-arrow {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  color: #fff;
  font: 700 24px/1 Arial, sans-serif;
  animation: dl-dive 1.9s ease-in-out infinite;
}

@keyframes dl-dive {
  0%       { transform: translateY(-7px); opacity: 0; }
  20%      { opacity: 1; }
  66%      { transform: translateY(5px); opacity: 1; }
  88%,100% { transform: translateY(11px); opacity: 0; }
}

.dl-ripple {
  position: absolute;
  inset: 0;
  border: 2px solid var(--dl-ink);
  border-radius: 50%;
  animation: dl-ripple 1.9s ease-out infinite;
}

@keyframes dl-ripple {
  0%   { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* --- Chute : trois étiquettes de format en cascade --------------------- */

.dl-chute {
  position: relative;
  width: 104px;
  height: 34px;
}

.dl-chip {
  position: absolute;
  left: 50%;
  margin-left: -16px;
  width: 32px;
  height: 15px;
  border: 2px solid var(--dl-ink);
  background: var(--dl-acid);
  display: grid;
  place-items: center;
  font: 700 6px/1 "Courier New", monospace;
  font-style: normal;
  letter-spacing: 0.06em;
  animation: dl-fall 2.6s cubic-bezier(0.5, 0, 0.9, 0.55) infinite;
}

.dl-chip:nth-child(2) {
  background: var(--dl-sky);
  animation-delay: 0.87s;
}

.dl-chip:nth-child(3) {
  background: var(--dl-orange);
  color: #fff;
  animation-delay: 1.74s;
}

@keyframes dl-fall {
  0%   { top: -8px; opacity: 0; }
  16%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { top: 34px; opacity: 0; }
}

/* --- Bac : libellé + compteur qui s'incrémente ----------------------- */

.dl-bin {
  display: flex;
  align-items: stretch;
  width: 118px;
  height: 34px;
  border: 2px solid var(--dl-ink);
  box-shadow: 4px 4px 0 var(--dl-ink);
  background: #fff;
}

.dl-bin > b {
  flex: 1;
  display: grid;
  place-items: center;
  border-right: 2px solid var(--dl-ink);
  font: 700 7px/1 "Courier New", monospace;
  letter-spacing: 0.1em;
  color: var(--dl-ink);
}

.dl-counter {
  width: 34px;
  overflow: hidden;
  background: var(--dl-acid);
}

.dl-counter ul {
  margin: 0;
  padding: 0;
  list-style: none;
  animation: dl-roll 10.4s steps(4, end) infinite;
}

.dl-counter li {
  height: 30px;
  display: grid;
  place-items: center;
  font: 700 15px/1 "Courier New", monospace;
  color: var(--dl-ink);
}

@keyframes dl-roll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-120px); }
}

/* --- Conteneur existant + hauteur url-stage ---------------------------- */

.url-symbol {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.url-stage {
  min-height: 430px;
  overflow: visible;
}

.main-panel {
  grid-template-rows: 65px minmax(430px, 1.2fr) 44px minmax(170px, 1fr) 72px;
}

.url-card {
  padding: 24px 18px 22px;
  gap: 4px;
  overflow: visible;
}

.url-card h2 {
  margin: 8px 0 4px;
}

/* --- File vide : flèche animée (contenue dans le carré) -------------- */

.empty-queue {
  gap: 10px;
  padding: 14px 12px;
}

.empty-queue b {
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}

.empty-queue b .empty-queue-arrow {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font: 900 28px/0.9 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  animation: eq-arrow-dive 1.6s ease-in-out infinite;
  will-change: transform;
}

@keyframes eq-arrow-dive {
  0%, 100% { transform: translateY(-6px); opacity: 0.7; }
  50%      { transform: translateY(-1px); opacity: 1; }
}

@media (max-width: 1100px) {
  .main-panel {
    grid-template-rows: 65px minmax(540px, auto) 78px minmax(300px, auto) 110px;
    min-height: 1080px;
  }

  .url-stage {
    min-height: 520px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dl-visual * {
    animation: none !important;
  }

  .empty-queue b .empty-queue-arrow {
    animation: none !important;
    transform: translateY(-3px);
    opacity: 1;
  }

  .dl-chip {
    opacity: 1;
  }

  .dl-chip:nth-child(1) { top: 0; }
  .dl-chip:nth-child(2) { top: 10px; }
  .dl-chip:nth-child(3) { top: 20px; }
}