:root{
  --c-call-a:#34d399;  --c-call-b:#059669;
  --c-mail-a:#fb4b3c;  --c-mail-b:#d13225;
  --c-wa-a:#25d366;    --c-wa-b:#128c7e;
  --c-tg-a:#2aabee;    --c-tg-b:#1e88d1;
  --rail-bg:linear-gradient(165deg,#141b2e 0%,#0b1120 100%);
  --tip-bg:rgba(9,14,26,.92);
}

/* ============ RAIL ============ */
.social-rail{
  position:fixed; right:0; top:35%; z-index:9999;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:16px 14px;
  background:var(--rail-bg);
  border:1px solid rgba(255,255,255,.07); border-right:none;
  border-radius:20px 0 0 20px;
  box-shadow:-12px 12px 40px rgba(0,0,0,.45);
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
  will-change:transform;
  animation:railIn .7s cubic-bezier(.22,1,.36,1) backwards;
}

.social-rail::before{
  content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:3px;
  border-radius:4px;
  background:linear-gradient(180deg,var(--c-call-a),var(--c-mail-a),var(--c-wa-a),var(--c-tg-a),var(--c-call-a));
  background-size:100% 300%;
  animation:flow 7s linear infinite;
}

.rail-head{
  display:flex; align-items:center; gap:6px;
  font-family:'Manrope',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#8ea0bf;
  padding-bottom:2px;
}

.rail-head .dot{
  width:7px; height:7px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:beat 2s ease-out infinite;
}

/* ============ AUTO-HIDE STATE ============ */
.social-rail.is-hidden{
  transform:translateX(70%); /* keeps about 30% visible */
  opacity:.6;
}

.social-rail.is-hidden:hover,
.social-rail.is-hidden:focus-within{
  transform:translateX(0);
  opacity:1;
}

/* ============ BUTTONS ============ */
.sb{
  position:relative; width:46px; height:46px; border:none; cursor:pointer;
  border-radius:14px; display:grid; place-items:center;
  color:#fff; font-size:19px; overflow:visible;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
  animation:popIn .55s cubic-bezier(.34,1.56,.64,1) backwards;
}

.sb:nth-of-type(1){animation-delay:.15s}
.sb:nth-of-type(2){animation-delay:.25s}
.sb:nth-of-type(3){animation-delay:.35s}
.sb:nth-of-type(4){animation-delay:.45s}

.sb i{
  display:inline-block;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1);
}

.sb:hover i,
.sb:focus-visible i{
  transform:rotate(180deg);
}

.sb:hover,
.sb:focus-visible{
  transform:translateX(-6px) scale(1.07);
}

.sb:active{
  transform:translateX(-6px) scale(.94);
}

.sb:focus-visible{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:3px;
}

/* Brand skins */
.sb-call{ background:linear-gradient(145deg,var(--c-call-a),var(--c-call-b)); box-shadow:0 6px 18px rgba(16,185,129,.35); }
.sb-mail{ background:linear-gradient(145deg,var(--c-mail-a),var(--c-mail-b)); box-shadow:0 6px 18px rgba(251,75,60,.35); }
.sb-wa  { background:linear-gradient(145deg,var(--c-wa-a),var(--c-wa-b));   box-shadow:0 6px 18px rgba(37,211,102,.35); }
.sb-tg  { background:linear-gradient(145deg,var(--c-tg-a),var(--c-tg-b));   box-shadow:0 6px 18px rgba(42,171,238,.35); }

.sb-call:hover{ box-shadow:0 10px 28px rgba(16,185,129,.55); }
.sb-mail:hover{ box-shadow:0 10px 28px rgba(251,75,60,.55); }
.sb-wa:hover  { box-shadow:0 10px 28px rgba(37,211,102,.55); }
.sb-tg:hover  { box-shadow:0 10px 28px rgba(42,171,238,.55); }

.sb .ping{
  position:absolute; inset:-3px; border-radius:inherit; pointer-events:none;
  border:2px solid var(--c-wa-a);
  animation:ping 2.4s cubic-bezier(0,.5,.5,1) infinite;
}

/* Tooltip */
.sb::before{
  content:attr(data-label);
  position:absolute; right:calc(100% + 14px); top:50%;
  transform:translate(8px,-50%);
  font-family:'Sora',sans-serif; font-size:12px; font-weight:600;
  color:#eef2ff; background:var(--tip-bg);
  border:1px solid rgba(255,255,255,.09);
  padding:7px 12px; border-radius:9px; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}

.sb::after{
  content:"";
  position:absolute; right:calc(100% + 9px); top:50%;
  width:8px; height:8px;
  transform:translate(8px,-50%) rotate(45deg);
  background:var(--tip-bg);
  border-right:1px solid rgba(255,255,255,.09);
  border-top:1px solid rgba(255,255,255,.09);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}

.sb:hover::before,
.sb:focus-visible::before{
  opacity:1; transform:translate(0,-50%);
}

.sb:hover::after,
.sb:focus-visible::after{
  opacity:1; transform:translate(0,-50%) rotate(45deg);
}

.sb .lbl{ display:none; }

.ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.55);
  transform:scale(0);
  animation:ripple .6s ease-out forwards;
}

/* ============ ANIMATIONS ============ */
@keyframes railIn { from{ opacity:0; transform:translateX(60px);} }
@keyframes popIn  { from{ opacity:0; transform:translateX(34px) scale(.6);} }
@keyframes flow   { to{ background-position:0 300%; } }
@keyframes beat   { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)} 100%{box-shadow:0 0 0 9px rgba(34,197,94,0)} }
@keyframes ping   { 0%{transform:scale(1);opacity:.8} 80%,100%{transform:scale(1.55);opacity:0} }
@keyframes ripple { to{ transform:scale(3.2); opacity:0; } }

/* ============ TABLET ============ */
@media (max-width:1023px){
  .sb{
    width:42px; height:42px;
    font-size:17px;
    border-radius:12px;
  }

  .social-rail{
    gap:12px;
    padding:14px 12px;
  }
}

/* ============ MOBILE PORTRAIT ============ */
@media (max-width:640px){
  .social-rail{
    top:40%;
    right:0; left:auto; bottom:auto;
    flex-direction:column;
    border-radius:14px 0 0 14px;
    padding:10px 8px;
    gap:10px;
    box-shadow:-6px 6px 20px rgba(0,0,0,.3);
    animation-name:railIn;
  }

  .social-rail::before{
    left:-1px; top:10px; bottom:10px; width:2px;
  }

  .rail-head{
    font-size:8px;
    letter-spacing:.1em;
  }

  .rail-head .dot{
    width:5px; height:5px;
  }

  .sb{
    width:clamp(34px, 9vw, 42px);
    height:clamp(34px, 9vw, 42px);
    font-size:clamp(14px, 3.5vw, 17px);
    border-radius:10px;
    animation-name:popIn;
  }

  .sb:hover,
  .sb:focus-visible{
    transform:translateX(-4px) scale(1.05);
  }

  .sb::before,
  .sb::after{
    display:none;
  }

  .sb .lbl{
    display:none;
  }
}

/* ============ MOBILE / SMALL LANDSCAPE ============ */
@media (orientation:landscape) and (max-height:640px){
  .social-rail{
    top:32%;
    padding:8px 6px;
    gap:8px;
    border-radius:12px 0 0 12px;
  }

  .social-rail::before{
    top:8px; bottom:8px; width:2px;
  }

  .rail-head{
    display:none;
  }

  .sb{
    width:clamp(28px, 7vh, 36px);
    height:clamp(28px, 7vh, 36px);
    font-size:clamp(12px, 2.4vh, 15px);
    border-radius:9px;
  }

  .sb:hover,
  .sb:focus-visible{
    transform:translateX(-3px) scale(1.04);
  }

  .sb .ping{
    inset:-2px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}