.sfi-share {
  --sfi-deck-blue: 117, 211, 255;
  --sfi-deck-gold: 218, 183, 108;
  position: absolute;
  z-index: 22;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: min(430px, calc(var(--sfi-stage-width, 100vw) - 28px));
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(191, 232, 251, 0.3);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(var(--sfi-deck-blue), .035) 1px, transparent 1px) 0 0 / 19px 19px,
    linear-gradient(0deg, rgba(var(--sfi-deck-blue), .025) 1px, transparent 1px) 0 0 / 19px 19px,
    linear-gradient(145deg, rgba(8, 18, 28, .97), rgba(2, 6, 11, .96));
  box-shadow: 0 20px 62px rgba(0, 0, 0, 0.54), 0 0 30px rgba(var(--sfi-deck-blue), .06), inset 0 1px rgba(255, 255, 255, 0.055);
  color: rgba(242, 251, 255, 0.94);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  backdrop-filter: blur(18px) saturate(115%);
}

.sfi-share-identity { display: grid; gap: 2px; min-width: 0; }
.sfi-share-identity span { color: rgba(191, 232, 251, 0.56); font-size: 7px; letter-spacing: 0.14em; }
.sfi-share-identity strong { color: rgba(245, 251, 255, 0.92); font-family: Georgia, "Times New Roman", serif; font-size: 13px; font-weight: 400; }
.sfi-share-description { margin: 0; color: rgba(225, 240, 247, .7); font-size: 9px; line-height: 1.5; }
.sfi-share-module-label {
  color: rgba(156, 215, 242, .52);
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.sfi-share-instruments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.sfi-share-narration,
.sfi-share-duration,
.sfi-share-state,
.sfi-share-copy,
.sfi-share-command {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(173, 223, 247, .15);
  border-radius: 11px;
  background: linear-gradient(155deg, rgba(154, 220, 250, .065), rgba(0, 0, 0, .18));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), inset 0 -12px 28px rgba(0, 0, 0, .08);
}
.sfi-share-narration::after,
.sfi-share-duration::after,
.sfi-share-state::after,
.sfi-share-copy::after,
.sfi-share-command::after {
  position: absolute;
  top: 0;
  left: 10px;
  width: 28px;
  height: 1px;
  background: rgba(var(--sfi-deck-blue), .58);
  box-shadow: 0 0 8px rgba(var(--sfi-deck-blue), .24);
  content: "";
}
.sfi-share-narration { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 55px; padding: 8px; color: rgba(238, 247, 251, 0.78); cursor: pointer; }
.sfi-share-narration input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sfi-share-narration-mark { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(191, 232, 251, .3); border-radius: 7px; background: rgba(191, 232, 251, .06); }
.sfi-share-narration-mark::before { width: 5px; height: 8px; border: 1.5px solid currentColor; border-top: 0; border-radius: 0 0 6px 6px; color: rgba(164, 222, 247, .68); content: ""; }
.sfi-share-module-copy { display: grid; min-width: 0; gap: 3px; }
.sfi-share-module-copy strong { overflow: hidden; color: rgba(243, 251, 255, .9); font-size: 9px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.sfi-share-narration-state { padding: 3px 5px; border: 1px solid rgba(var(--sfi-deck-blue), .24); border-radius: 4px; color: rgba(183, 231, 251, .68); font-size: 6px; font-weight: 750; letter-spacing: .12em; }
.sfi-share-narration:has(input:checked) { border-color: rgba(123, 218, 255, .38); background: linear-gradient(155deg, rgba(71, 176, 222, .13), rgba(5, 18, 27, .56)); color: rgba(242, 251, 255, .95); }
.sfi-share-narration:has(input:checked) .sfi-share-narration-mark { border-color: rgba(123, 218, 255, .7); background: rgba(69, 184, 231, .2); box-shadow: 0 0 15px rgba(76, 192, 241, .19), inset 0 0 8px rgba(107, 211, 255, .09); }
.sfi-share-narration:focus-within { border-color: rgba(191, 232, 251, .72); outline: none; }
.sfi-share-duration { display: grid; align-content: center; gap: 5px; min-height: 55px; padding: 8px 10px; }
.sfi-share-time { color: rgba(231, 242, 188, .93); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1; white-space: nowrap; text-shadow: 0 0 13px rgba(var(--sfi-deck-gold), .18); }
.sfi-share-state { display: grid; gap: 5px; padding: 8px 10px; }
.sfi-share-status { margin: 0; overflow: hidden; color: rgba(238, 247, 251, 0.74); font-size: 8.5px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.sfi-share-copy { display: grid; gap: 6px; padding: 8px; }
.sfi-share-copy[hidden] { display: none; }
.sfi-share-copy-controls { display: grid; grid-template-columns: minmax(96px, 1fr) auto; align-items: center; gap: 6px; min-width: 0; }
.sfi-share-copy-actions { display: flex; gap: 4px; min-width: 0; }
.sfi-share-command { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; }
.sfi-share-controls { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-self: stretch; gap: 5px; width: 100%; }
.sfi-share-controls button { width: 100%; min-width: 0; }
.sfi-share[data-state="idle"] .sfi-share-controls button:not([hidden]),
.sfi-share[data-state="requesting"] .sfi-share-controls button:not([hidden]),
.sfi-share[data-state="recording"] .sfi-share-controls button:not([hidden]),
.sfi-share[data-state="publishing"] .sfi-share-controls button:not([hidden]) { grid-column: 1 / -1; }
@keyframes sfi-share-copied {
  from { transform: scale(0.96); box-shadow: 0 0 0 rgba(91, 216, 160, 0); }
  to { transform: scale(1); box-shadow: 0 0 18px rgba(91, 216, 160, 0.2); }
}

.sfi-app-shell .sfi-share button,
.sfi-app-shell .sfi-share input[type="text"] {
  min-height: 34px;
  border: 1px solid rgba(191, 232, 251, 0.3);
  border-radius: 9px;
  background: rgba(191, 232, 251, 0.09);
  color: rgba(242, 251, 255, 0.94);
  font: inherit;
  font-size: 9px;
}
.sfi-share button { min-width: 76px; padding: 5px 10px; cursor: pointer; font-weight: 650; letter-spacing: .015em; }
.sfi-share-copy-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 32px; padding: 4px 7px; white-space: nowrap; }
.sfi-share-action-icon { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.sfi-share-action-label { font-size: 8px; }
.sfi-share-controls button:not(.is-secondary) { border-color: rgba(122, 212, 253, .52); background: linear-gradient(145deg, rgba(61, 151, 193, .3), rgba(20, 72, 103, .28)); box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 0 15px rgba(62, 177, 227, .08); }
.sfi-share button.is-secondary { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.035); color: rgba(255, 255, 255, 0.68); }
.sfi-share-copy[data-copied="true"] input[type="text"] {
  border-color: rgb(139, 231, 190);
  background: rgba(53, 177, 121, 0.16);
  box-shadow: 0 0 0 2px rgba(91, 216, 160, 0.2), inset 0 0 14px rgba(91, 216, 160, 0.08);
  color: rgb(240, 255, 248);
}
.sfi-share-copy[data-copied="true"] input[type="text"]::selection { background: rgb(87, 189, 142); color: rgb(3, 23, 14); }
.sfi-share-copy[data-copied="true"] .sfi-share-action-copy {
  border-color: rgb(139, 231, 190);
  background: rgba(53, 177, 121, 0.42);
  box-shadow: 0 0 18px rgba(91, 216, 160, 0.2);
  color: rgb(240, 255, 248);
  font-weight: 700;
  animation: sfi-share-copied 240ms ease-out;
}
.sfi-share[data-copy-status="copied"] .sfi-share-status { color: rgb(166, 240, 205); font-weight: 650; }
.sfi-share input[type="text"] { min-width: 0; padding: 5px 8px; }
.sfi-share button:hover,
.sfi-share button:focus-visible,
.sfi-share input[type="text"]:focus-visible { border-color: rgba(191, 232, 251, 0.72); outline: none; }
.sfi-share button:disabled,
.sfi-share input:disabled { opacity: 0.45; cursor: wait; }
.sfi-share[data-state="recording"] .sfi-share-state { border-color: rgba(255, 133, 108, .38); }
.sfi-share[data-state="recording"] .sfi-share-state::after { background: rgba(255, 126, 101, .88); box-shadow: 0 0 10px rgba(255, 105, 82, .42); }
.sfi-share[data-state="recording"] .sfi-share-status { color: rgba(255, 205, 193, .9); }

.sfi-share[data-compact="true"] {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  width: min(390px, calc(var(--sfi-stage-width, 100vw) - 28px));
  padding: 7px;
}
.sfi-share[data-compact="true"] .sfi-share-identity,
.sfi-share[data-compact="true"] .sfi-share-description,
.sfi-share[data-compact="true"] .sfi-share-copy { display: none; }
.sfi-share[data-compact="true"] .sfi-share-instruments { display: block; }
.sfi-share[data-compact="true"] .sfi-share-duration,
.sfi-share[data-compact="true"] .sfi-share-state,
.sfi-share[data-compact="true"] .sfi-share-command { min-height: 42px; padding: 6px 8px; }
.sfi-share[data-compact="true"] .sfi-share-duration { min-width: 86px; }
.sfi-share[data-compact="true"] .sfi-share-state {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sfi-share[data-compact="true"] .sfi-share-command { display: block; padding: 4px; }
.sfi-share[data-compact="true"] .sfi-share-module-label,
.sfi-share[data-compact="true"] .sfi-share-command > .sfi-share-module-label { display: none; }
.sfi-share[data-compact="true"] .sfi-share-time { font-size: 13px; }
.sfi-share[data-compact="true"] .sfi-share-status { font-size: 8px; white-space: normal; }
.sfi-share[data-compact="true"] .sfi-share-controls { align-items: center; height: auto; }
.sfi-share[data-compact="true"] .sfi-share-controls button { min-width: 68px; height: 34px; min-height: 34px; padding: 4px 7px; }

.sfi-share-entry {
  position: absolute;
  z-index: 48;
  inset: 0;
  display: grid;
  box-sizing: border-box;
  place-items: center;
  padding: clamp(16px, 4vw, 44px);
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(2, 7, 12, .42), transparent 62%);
}
.sfi-share-entry[hidden] { display: none; }
.sfi-share-entry-card {
  display: grid;
  box-sizing: border-box;
  gap: 11px;
  width: min(460px, 100%);
  max-width: 100%;
  min-width: 0;
  padding: clamp(20px, 4vw, 29px);
  overflow: hidden;
  border: 1px solid rgba(155, 224, 255, .52);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(9, 21, 31, .98), rgba(2, 7, 12, .97));
  box-shadow: 0 28px 92px rgba(0, 0, 0, .68), 0 0 42px rgba(103, 202, 247, .12), inset 0 1px rgba(255, 255, 255, .08);
  color: rgba(244, 251, 255, .96);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  pointer-events: auto;
  backdrop-filter: blur(24px) saturate(122%);
}
.sfi-share-entry-eyebrow { color: rgba(145, 215, 247, .68); font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.sfi-share-entry-title { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 5vw, 31px); font-weight: 400; line-height: 1.08; }
.sfi-share-entry-explanation,
.sfi-share-entry-interaction,
.sfi-share-entry-status { margin: 0; }
.sfi-share-entry-explanation { color: rgba(240, 249, 253, .88); font-size: 13px; line-height: 1.5; }
.sfi-share-entry-interaction { color: rgba(221, 238, 246, .66); font-size: 11px; line-height: 1.5; }
.sfi-share-entry-status { min-height: 16px; color: rgba(152, 222, 251, .72); font-size: 9px; letter-spacing: .035em; }
.sfi-share-entry[data-state="failed"] .sfi-share-entry-status { color: rgba(255, 184, 163, .9); }
.sfi-share-entry-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 4px; }
.sfi-share-entry-actions button {
  box-sizing: border-box;
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(191, 232, 251, .3);
  border-radius: 11px;
  background: rgba(191, 232, 251, .08);
  color: rgba(244, 251, 255, .9);
  cursor: pointer;
  font: 600 10px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.sfi-share-entry-actions .sfi-share-entry-play {
  grid-column: 1 / -1;
  min-height: 54px;
  border-color: rgba(148, 222, 255, .74);
  background: linear-gradient(125deg, rgba(50, 129, 170, .72), rgba(22, 77, 112, .7));
  box-shadow: 0 12px 34px rgba(19, 102, 146, .3), inset 0 1px rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 13px;
}
.sfi-share-entry-actions .sfi-share-entry-record { grid-column: 1 / -1; }
.sfi-share-entry-actions button:hover,
.sfi-share-entry-actions button:focus-visible { border-color: rgba(190, 236, 255, .9); outline: none; background-color: rgba(132, 213, 250, .16); }
.sfi-share-entry-actions button:disabled { opacity: .45; cursor: wait; }

.has-share-recipient [data-sfi-world-fullscreen] {
  border-color: rgba(139, 219, 255, .62);
  box-shadow: 0 0 0 1px rgba(94, 198, 246, .16), 0 0 22px rgba(76, 187, 238, .18);
  color: rgba(233, 249, 255, .94);
}

@media (prefers-reduced-motion: reduce) {
  .sfi-share-copy[data-copied="true"] .sfi-share-action-copy { animation: none; }
}

@media (max-width: 640px) {
  .sfi-share {
    right: 9px;
    bottom: max(9px, env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    width: calc(var(--sfi-stage-width, 100vw) - 18px);
    padding: 9px;
    border-radius: 13px;
  }
  .sfi-share-identity { min-width: 0; }
  .sfi-share-copy { padding: 6px; }
  .sfi-share-copy-controls { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  .sfi-share-copy-actions { gap: 3px; }
  .sfi-share-copy-actions button { width: 32px; min-width: 32px; min-height: 32px; padding: 0; border-radius: 8px; }
  .sfi-share-action-label { display: none; }
  .sfi-share-controls { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sfi-share-preview-button,
  .sfi-share-new-recording { grid-column: 1 / -1; }
  .sfi-share button { min-height: 36px; min-width: 72px; padding-inline: 7px; }
  .sfi-share-copy-actions button { min-width: 32px; min-height: 32px; padding-inline: 0; }
  .sfi-share[data-compact="true"] .sfi-share-controls { height: auto; }
  .sfi-share[data-compact="true"] .sfi-share-controls button { height: 36px; min-height: 36px; }
  .sfi-share[data-state="created"] { grid-template-columns: minmax(88px, .72fr) minmax(0, 1.28fr); }
  .sfi-share[data-state="created"] .sfi-share-identity,
  .sfi-share[data-state="created"] .sfi-share-copy,
  .sfi-share[data-state="created"] .sfi-share-command { grid-column: 1 / -1; }
  .sfi-share[data-state="created"] .sfi-share-description,
  .sfi-share[data-state="created"] .sfi-share-narration { display: none; }
  .sfi-share[data-state="created"] .sfi-share-instruments { display: block; }
  .sfi-share[data-state="created"] .sfi-share-duration,
  .sfi-share[data-state="created"] .sfi-share-state { min-height: 44px; padding-block: 6px; }
  .sfi-share-entry { padding: 12px; }
  .sfi-share-entry-card { gap: 9px; padding: 18px; border-radius: 18px; }
}

@media (max-width: 480px) {
  .sfi-share[data-compact="true"] {
    grid-template-columns: auto minmax(0, 1fr);
    width: calc(var(--sfi-stage-width, 100vw) - 18px);
  }
  .sfi-share[data-compact="true"] .sfi-share-command { grid-column: 1 / -1; }
  .sfi-share[data-compact="true"] .sfi-share-controls,
  .sfi-share[data-compact="true"] .sfi-share-controls button { width: 100%; }
}

@media (max-width: 360px) {
  .sfi-share-instruments { grid-template-columns: minmax(0, 1fr); }
  .sfi-share-entry-actions { grid-template-columns: minmax(0, 1fr); }
  .sfi-share-entry-actions .sfi-share-entry-play,
  .sfi-share-entry-actions .sfi-share-entry-record { grid-column: 1; }
  .sfi-share button { min-width: 0; }
}