/* RAGADÓS SÁV – mobilon alul (hüvelykujj-zóna), asztalon lebegő gomb jobb alul.
   Felül piros "lejátszófej" csík mutatja, hol tart a látogató az oldalon. */
.ra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(10, 9, 9, .97) 66%, rgba(10, 9, 9, 0)); padding-top: 18px;
  transform: translateY(120%); transition: transform .5s var(--be), visibility 0s linear .5s;
  visibility: hidden; /* rejtve ne lehessen rá tabbal lépni */
}
.ra.lat { transform: none; visibility: visible; transition: transform .5s var(--be); }
.ra-csik { position: relative; height: 3px; margin: 0 2px 10px; background: rgba(255, 255, 255, .12); border-radius: 2px; }
.ra-fej { position: absolute; inset: 0; background: var(--piros); transform-origin: 0 50%; transform: scaleX(0); border-radius: 2px; }
.ra-jelolok i { position: absolute; top: -2px; width: 2px; height: 7px; background: rgba(255, 255, 255, .35); }
.ra-gombok { display: flex; gap: 10px; }
.ra-fo { flex: 1; justify-content: space-between; box-shadow: 0 10px 34px -6px rgba(216, 38, 45, .75), 0 0 0 1px rgba(255, 255, 255, .08) inset; }
.ra-felirat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* a gomb a hosszú felirattal se tolja ki a telefon gombot (flex-elem alapból nem zsugorodik a tartalma alá) */
.ra-fo { min-width: 0; }
.ra-hivas { width: 56px; padding: 0; flex: none; }
.ra.valasztva .ra-fo { animation: ra-valt .6s var(--pattan); }
@keyframes ra-valt { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: none; } }
@media (min-width: 900px) {
  .ra { left: auto; right: 28px; bottom: 28px; width: 380px; padding: 12px 14px 14px; border-radius: 16px;
    background: rgba(20, 18, 20, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--vonal); }
  /* lebegő doboz: 28 px-re van az aljától, ezért a 120% nem elég – rejtve 10 px kilógott */
  .ra:not(.lat) { transform: translateY(calc(100% + 48px)); }
}
.kepmod .ra { display: none; }
/* "↑ Vissza az idővonalhoz" – a részletekhez ugrás után */
.vissza-gomb { position: fixed; left: 50%; top: calc(var(--fejlec) + 10px); z-index: 46; transform: translate(-50%, -30px); opacity: 0; pointer-events: none;
  background: rgba(20, 18, 20, .92); border: 1px solid var(--vonal); border-radius: 999px; padding: 10px 16px; font: 700 13px/1 var(--font-cim);
  transition: opacity .3s, transform .45s var(--be); }
.vissza-gomb.lat { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }