.x-share {
  position: fixed;
  z-index: 15;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.x-share svg { display: block; width: 19px; height: 19px; fill: currentColor; }
.x-share:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.home-x-share {
  bottom: var(--home-actions-bottom, max(64px, env(safe-area-inset-bottom)));
  color: var(--mint-dark);
  border-color: #fffdf5b3;
  background: #fffdf5d9;
  box-shadow: 0 3px 18px #253c3312;
  backdrop-filter: blur(12px);
}
.home-x-share:hover { background: #fffdf5; border-color: var(--mint-dark); }
.cast-focus .x-share {
  color: #f5e6dc;
  border-color: #ead4b526;
  background: #231a2b60;
  backdrop-filter: blur(16px);
}
.cast-focus .x-share:hover { background: #4b35479c; border-color: #ead4b55c; }
@media (max-width: 760px) {
  .cast-focus .conversation-dock { bottom: max(80px, calc(env(safe-area-inset-bottom) + 60px)); }
}
@media (max-width: 420px) {
  :root { --home-actions-bottom: max(80px, calc(env(safe-area-inset-bottom) + 60px)); }
  .page-actions { left: 20px; width: calc(100% - 104px); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .x-share { transition: none; }
}