.social-rail {
  --social-bg: #fffdf7;
  --social-fg: #26352d;
  --social-border: #26352d26;
  position: fixed;
  z-index: 150;
  top: 50%;
  right: env(safe-area-inset-right, 0px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font: 600 14px/1.2 system-ui, sans-serif;
}
.social-rail[data-theme="dark"] { --social-bg: #1b1b1b; --social-fg: #f4d57b; --social-border: #f4d57b40; }
.social-rail[data-theme="green"] { --social-bg: #173e32; --social-fg: #fffdf4; --social-border: #ffffff40; }
.social-rail *, .social-rail *::before, .social-rail *::after { box-sizing: border-box; }
.social-rail [hidden] { display: none !important; }
.social-rail nav { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.social-rail a, .social-rail button {
  display: flex;
  align-items: center;
  flex: none;
  gap: 12px;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--social-border);
  border-right: 0;
  border-radius: 14px 0 0 14px;
  background: var(--social-bg);
  color: var(--social-fg);
  box-shadow: -3px 4px 16px #00000012;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: width 180ms ease, background-color 180ms ease;
}
.social-rail svg { display: block; width: 22px; height: 22px; flex: 0 0 22px; fill: currentColor; }
.social-rail a span { display: none; white-space: nowrap; }
.social-rail a:hover, .social-rail a:focus-visible { width: 164px; }
.social-rail a:hover span, .social-rail a:focus-visible span { display: block; }
.social-rail a:focus-visible, .social-rail button:focus-visible { outline: 3px solid #3888ed; outline-offset: 2px; }
@media (max-width: 767px), (max-height: 480px) {
  .social-rail { gap: 6px; }
  .social-rail nav { gap: 4px; }
  .social-rail a, .social-rail button { width: 44px; height: 44px; padding: 10px; }
  .social-rail a, .social-rail a:hover, .social-rail a:focus-visible { width: 152px; }
  .social-rail a span { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .social-rail a, .social-rail button { transition: none; }
}
@media print { .social-rail { display: none; } }