#socialHome .socialStories{display:flex!important;overflow-x:auto!important;gap:6px!important;scrollbar-width:none}
#socialHome .socialStory{flex:0 0 16%;min-width:0;text-align:center;cursor:pointer;background:none;border:0;color:inherit}
#socialHome .socialStory.hasStory .socialStoryBubble{border:2px solid var(--myevent-accent)!important;outline:2px solid var(--myevent-accent)!important;outline-offset:2px!important}
.socialStoryBubble .socialPostAvatar{width:100%;height:100%;overflow:hidden;border-radius:inherit}.socialStoryBubble img,.socialPostAvatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.socialStoryViewer[hidden],.storyCreateSheet[hidden]{display:none!important}
.socialStoryViewer{position:fixed;inset:0;z-index:100000;background:#07090b;color:#fff;touch-action:pan-y}
.socialStoryViewer .storyMedia{position:absolute;inset:8% 0 9%;display:flex;align-items:center;justify-content:center}
.socialStoryViewer img,.socialStoryViewer video{max-width:100%;max-height:100%;object-fit:contain}
.storyHeader,.storyProgress,.storyCaption,.storyPrevious,.storyNext,.storyDelete{position:absolute;z-index:2}
.storyProgress{top:max(10px,env(safe-area-inset-top));left:5%;width:90%;height:3px;background:#888}.storyProgress span{display:block;height:100%;background:#fff}
.storyHeader{top:max(18px,env(safe-area-inset-top));left:5%;right:5%;display:flex;justify-content:space-between}.storyHeader button{color:#fff;background:transparent;border:0;font-size:24px}
.storyCaption{bottom:7%;width:100%;text-align:center;padding:0 35px;box-sizing:border-box}
.storyPrevious,.storyNext{top:30%;height:45%;width:25%;background:transparent;border:0;color:#fff;font-size:32px}.storyPrevious{left:0}.storyNext{right:0}
.storyDelete{bottom:20px;right:20px}.storyCreateSheet{position:fixed;inset:0;z-index:100001;background:#000b;display:grid;place-items:center}.storyCreateSheet>div{background:#18212b;color:white;padding:24px;border-radius:18px;display:grid;gap:12px;max-width:90vw}
/* Six compact shortcuts remain visible; additional friend Stories scroll horizontally. */
#socialHome .socialStories{display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;align-items:flex-start!important}
#socialHome .socialStories .socialStory,
#socialHome .socialStories .socialStory.me{
  flex:0 0 calc((100% - 35px)/6)!important;
  width:calc((100% - 35px)/6)!important;
  min-width:0!important;
  max-width:68px!important;
  box-sizing:border-box!important;
}
#socialHome .socialStories .socialStoryBubble,
#socialHome .socialStories .socialStory.me .socialStoryBubble{
  width:100%!important;
  max-width:68px!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  box-sizing:border-box!important;
}
#socialHome .socialStories .socialStory.me .socialStoryBubble{overflow:hidden!important}
#socialHome .socialStories .socialStory.me .myStoryThumbnail{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none
}


/* Friends shortcut — keep the same visual as the other social shortcuts */
#socialHome #socialFriendsShortcut{
  appearance:none!important;
  -webkit-appearance:none!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  min-height:0!important;
  box-shadow:none!important;
  color:inherit!important;
  font:inherit!important;
}
#socialHome #socialFriendsShortcut:active,
#socialHome #socialFriendsShortcut:focus,
#socialHome #socialFriendsShortcut:focus-visible{
  background:transparent!important;
  outline:none!important;
  box-shadow:none!important;
}
/* Always show the owner's real Story first, followed by accessible friends. */
#socialHome #friendStoriesSection.friendStoriesSection{display:block!important;min-height:84px}
#socialHome #friendStoriesStrip{display:flex!important;gap:11px;overflow-x:auto!important;scrollbar-width:none}
#socialHome #friendStoriesSection.friendStoriesSection[hidden]{display:none!important}
#socialHome .ownStoryMini .miniRing{position:relative;background:var(--myevent-accent-fill)!important;border:2px solid var(--myevent-accent)!important}
#socialHome .friendStoryMini .miniRing img,
#socialHome .friendStoryMini .miniRing video{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}

/* Full-bleed Story previews in a compact horizontal row. */
#socialHome #friendStoriesStrip.friendStoriesStrip{gap:6px!important;min-height:78px!important;padding:2px 0 6px}
#socialHome #friendStoriesStrip .friendStoryMini{flex:0 0 calc((100% - 30px)/6)!important;width:calc((100% - 30px)/6)!important;min-width:0!important;box-sizing:border-box}
#socialHome #friendStoriesStrip .friendStoryMini .miniRing{width:100%!important;height:auto!important;aspect-ratio:3/4!important;border-radius:11px!important;overflow:hidden;padding:2px!important}
#socialHome #friendStoriesStrip .friendStoryMini .miniRing>div{border:0!important;border-radius:9px!important;display:block!important;overflow:hidden}
#socialHome #friendStoriesStrip .friendStoryMini .miniRing img,
#socialHome #friendStoriesStrip .friendStoryMini .miniRing video{width:100%;height:100%;object-fit:cover;border-radius:9px;display:block;pointer-events:none}
#socialHome #friendStoriesStrip .friendStoryMini>span{font-size:9px;margin-top:3px}
#socialHome .friendStoryAdd{position:absolute;right:-3px;bottom:-2px;margin:0!important;width:18px;height:18px;border-radius:50%;background:var(--myevent-accent-fill);border:1.5px solid var(--myevent-accent);color:#fff;font-size:16px;line-height:16px;font-weight:900}
#socialHome .homeFriendsArt img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.socialFriendInvitePrompt,.socialFriendInviteShare{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:8px 0;padding:10px;border:1px solid var(--myevent-accent);border-radius:12px;background:#121820}
.socialFriendInvitePrompt.hidden,.socialFriendInviteShare.hidden{display:none!important}
.socialFriendInviteAvatar{width:46px;height:46px;flex:0 0 46px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#222b38;border:1px solid var(--myevent-accent);font-size:22px}
.socialFriendInviteAvatar img{width:100%;height:100%;object-fit:cover}
.socialFriendInviteIdentity{display:flex;flex:1 1 140px;min-width:0;flex-direction:column;gap:2px}
.socialFriendInviteIdentity strong,.socialFriendInviteIdentity small,.socialFriendInviteIdentity span{display:block;overflow-wrap:anywhere}
.socialFriendInviteIdentity small{color:#b9c3cf}
.socialFriendInviteIdentity span{font-size:12px;color:#d9e0e9}
.socialFriendInviteShare input{flex:1 1 180px;min-width:0;color:#fff;background:#0b1017;border:1px solid #46505d;border-radius:9px;padding:9px}
.socialFriendInvitePrompt button,.socialFriendInviteShare button{border:1px solid var(--myevent-accent);border-radius:9px;background:var(--myevent-accent-fill);color:#fff;padding:9px 12px}
.socialFriendInvitePrompt button[hidden]{display:none!important}
#socialHome #socialMyStory .socialStoryBubble{position:relative;display:block;width:54px!important;height:54px!important;overflow:hidden;border-radius:16px;padding:0}
#socialHome #socialMyStory .myStoryThumbnail{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
#socialHome #socialMyStory .storyAddBadge{z-index:2}
#socialStoryViewer .storyOwnerActions{display:flex;justify-content:flex-end;gap:10px;padding:10px 18px 18px}
#socialStoryViewer .storyOwnerActions button{position:static!important;width:auto!important}

/* Story reactions sit above the home indicator and remain usable with the iPhone keyboard. */
#socialStoryViewer .storyInteractions{position:absolute;z-index:5;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:#080b10d9;border-radius:16px;padding:8px}
#socialStoryViewer .storyLike,#socialStoryViewer .storyLikers{width:auto;min-width:0;padding:7px 10px;border:1px solid #ffffff77;border-radius:18px;background:#19202b;color:#fff}
#socialStoryViewer .storyLike[aria-pressed="true"]{color:#ff718f;border-color:#ff718f}
#socialStoryViewer .storyReply{display:flex;gap:6px;flex:1 1 170px;min-width:0}
#socialStoryViewer .storyReply[hidden],#socialStoryViewer .storyLikers[hidden],#socialStoryViewer .storyLikersPanel[hidden]{display:none!important}
#socialStoryViewer .storyReply input{flex:1;min-width:0;padding:9px;border:1px solid #ffffff77;border-radius:20px;background:#1a2029;color:white;font-size:16px}
#socialStoryViewer .storyReply button{width:auto;min-width:0;padding:8px 11px;border-radius:18px;color:#fff;background:var(--myevent-accent-fill);border:1px solid var(--myevent-accent)}
#socialStoryViewer .storyInteractionStatus{flex-basis:100%;margin:0;font-size:12px;line-height:1.25;color:#eee}
#socialStoryViewer .storyInteractionStatus:empty{display:none}
#socialStoryViewer .storyLikersPanel{position:absolute;z-index:8;inset:15% 5% 20%;overflow:auto;background:#151c27;border:1px solid #ffffff55;border-radius:18px;padding:18px}
#socialStoryViewer .storyLikersPanel>button{float:right;width:auto;background:transparent;color:white;border:0;font-size:24px}
#socialStoryViewer .storyLiker{display:flex;align-items:center;gap:10px;padding:7px;border-bottom:1px solid #ffffff22}
#socialStoryViewer .storyLiker .socialPostAvatar{width:34px;height:34px;border-radius:50%;overflow:hidden}
#socialStoryViewer .storyCaption{bottom:calc(16% + env(safe-area-inset-bottom));pointer-events:none}
#socialStoryViewer .storyOwnerActions{position:absolute;z-index:4;right:6px;bottom:calc(68px + env(safe-area-inset-bottom));padding:0}


/* Friends list — one compact row per person, with lightweight actions. */
#socialHome #socialFriendsView .socialPerson{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  width:100%!important;
  min-width:0!important;
  padding:7px 2px!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  box-sizing:border-box!important;
}
#socialHome #socialFriendsView .socialPerson .socialPostAvatar{
  flex:0 0 34px!important;
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  overflow:hidden!important;
}
#socialHome #socialFriendsView .socialPerson>.grow{
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#socialHome #socialFriendsView .socialFriendRowActions{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex:0 0 auto!important;
}
#socialHome #socialFriendsView .socialFriendRowActions button{
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:6px 9px!important;
  border-radius:9px!important;
  font-size:12px!important;
  line-height:1!important;
}
#socialHome #socialFriendsView .socialFriendRowActions .decline{
  background:transparent!important;
  border:1px solid #ff4d5f!important;
  color:#ff6675!important;
}
#socialHome #socialFriendsView .socialFriendIconAction{
  flex:0 0 28px!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  margin:0!important;
  padding:0!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:500!important;
  background:transparent!important;
  box-shadow:none!important;
}
#socialHome #socialFriendsView .socialFriendIconAction.remove{
  border:1px solid rgba(255,77,95,.65)!important;
  color:#ff4d5f!important;
}


/* Event participants can open a compact profile and start a friendship. */
.memberProfileTrigger{
  appearance:none!important;-webkit-appearance:none!important;width:100%!important;text-align:left!important;
  color:inherit!important;font:inherit!important;cursor:pointer!important;
}
.memberProfileTrigger .memberProfileChevron{margin-left:auto;font-size:24px;line-height:1;opacity:.7}
.memberFriendProfileSheet{position:fixed;inset:0;z-index:100002;background:rgba(0,0,0,.68);display:grid;place-items:center;padding:18px}
.memberFriendProfileSheet[hidden]{display:none!important}
.memberFriendProfileCard{position:relative;width:min(330px,calc(100vw - 36px));box-sizing:border-box;padding:24px 20px 20px;border:1px solid #34475a;border-radius:20px;background:#101a24;color:#fff;text-align:center;box-shadow:0 18px 55px rgba(0,0,0,.45)}
.memberFriendProfileClose{position:absolute;top:10px;right:12px;width:32px;height:32px;padding:0;border:0;background:transparent;color:#fff;font-size:27px;line-height:1}
.memberFriendProfileAvatar{width:76px;height:76px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#17283a;font-size:38px}
.memberFriendProfileAvatar img{width:100%;height:100%;object-fit:cover}
.memberFriendProfileCard strong{display:block;font-size:18px}
.memberFriendProfileRole{display:block;margin-top:3px;color:#a9b8c8;font-size:13px}
.memberFriendProfileIdentity{display:block;margin-top:6px;color:#8294a5;font-size:10px;overflow-wrap:anywhere}
.memberFriendProfileActions{display:flex;justify-content:center;gap:8px;margin-top:16px}
.memberFriendProfileActions button{width:auto!important;min-width:0!important;padding:9px 13px!important;border-radius:10px!important}
.memberFriendProfileActions .danger{background:transparent!important;border:1px solid #ff4d5f!important;color:#ff6675!important}
.memberFriendProfileStatus{margin:14px 0 0;color:#b9c6d3;font-size:13px}


/* Home Friends shortcut — real accepted friend profiles and aligned label. */
#socialHome #socialFriendsShortcut{position:relative!important}
#socialHome #socialFriendsShortcut #homeFriendsPreview{
  position:absolute!important;left:50%!important;top:8px!important;transform:translateX(-50%)!important;
  width:54px!important;height:50px!important;inset:auto!important;opacity:1!important;
  display:block!important;pointer-events:none!important;
}
#socialHome #socialFriendsShortcut #homeFriendsPreview .homeFriendProfileBubble{
  position:absolute!important;width:34px!important;height:34px!important;border-radius:50%!important;
  overflow:hidden!important;display:grid!important;place-items:center!important;
  background:#182330!important;border:2px solid #ffd22e!important;
  box-shadow:0 2px 7px #0009!important;font-size:19px!important;font-style:normal!important;
}
#socialHome #socialFriendsShortcut #homeFriendsPreview .homeFriendProfileBubble img{
  width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important;
}
#socialHome #socialFriendsShortcut #homeFriendsPreview .homeFriendProfileBubble:nth-child(1){left:0!important;top:7px!important;z-index:3!important}
#socialHome #socialFriendsShortcut #homeFriendsPreview .homeFriendProfileBubble:nth-child(2){left:20px!important;top:0!important;z-index:2!important}
#socialHome #socialFriendsShortcut #homeFriendsPreview .homeFriendProfileBubble:nth-child(3){left:12px!important;top:16px!important;z-index:4!important}
#socialHome #socialFriendsShortcut #homeFriendsPreview em{right:-5px!important;bottom:0!important;z-index:6!important}
#socialHome #socialFriendsShortcut>b{
  position:absolute!important;left:0!important;right:0!important;bottom:7px!important;
  margin:0!important;text-align:center!important;line-height:1!important;z-index:7!important;
}


/* Stories shortcut — stacked story frames and label aligned with sibling shortcuts. */
#socialHome #socialStoriesShortcut{justify-content:flex-start!important}
#socialHome #socialStoriesShortcut .homeStoriesArt{
  position:relative!important;
  width:42px!important;
  height:42px!important;
  margin-top:17px!important;
  flex:0 0 42px!important;
}
#socialHome #socialStoriesShortcut .homeStoriesArt span{
  position:absolute!important;
  width:25px!important;
  height:34px!important;
  border:2px solid #fff!important;
  border-radius:7px!important;
  box-sizing:border-box!important;
  background:rgba(255,255,255,.05)!important;
  box-shadow:0 0 7px rgba(255,255,255,.18)!important;
}
#socialHome #socialStoriesShortcut .homeStoriesArt span:first-child{left:4px!important;top:2px!important;opacity:.58!important}
#socialHome #socialStoriesShortcut .homeStoriesArt span:last-child{left:13px!important;top:7px!important}
#socialHome #socialStoriesShortcut>b{
  margin-top:auto!important;
  margin-bottom:9px!important;
  line-height:1.05!important;
}


.storyCreateSheet .storyMusicSelected{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--myevent-accent);border-radius:12px;background:#101923}
.storyCreateSheet .storyMusicSelected[hidden],.storyCreateSheet .storyMusicSearchPanel[hidden]{display:none!important}
.storyCreateSheet .storyMusicSelected span{display:flex;flex:1;min-width:0;flex-direction:column}.storyCreateSheet .storyMusicSelected strong,.storyCreateSheet .storyMusicSelected small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.storyCreateSheet .storyMusicSelected small{color:#b8c4d1}.storyCreateSheet .storyMusicSelected button{width:32px;height:32px;padding:0;border-radius:50%}
.storyCreateSheet .storyMusicSearchPanel{display:grid;gap:8px;max-height:42vh;overflow:auto}.storyCreateSheet .storyMusicSearchPanel>div:first-child{display:flex;gap:7px}
.storyCreateSheet .storyMusicSearchPanel input{min-width:0;flex:1;padding:10px;border:1px solid #46505d;border-radius:10px;background:#0b1017;color:#fff;font-size:16px}
.storyCreateSheet .storyMusicResults{display:grid;gap:6px}.storyCreateSheet .storyMusicResult{display:flex;align-items:center;gap:9px;width:100%;text-align:left}
.storyCreateSheet .storyMusicResult img{width:44px;height:44px;object-fit:cover;border-radius:8px}.storyCreateSheet .storyMusicResult span{display:flex;min-width:0;flex-direction:column}.storyCreateSheet .storyMusicResult strong,.storyCreateSheet .storyMusicResult small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#socialStoryViewer .storyMusicBadge{position:absolute;z-index:6;left:50%;bottom:calc(22% + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:82%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:7px 12px;border:1px solid #ffffff66;border-radius:18px;background:#080b10d9;color:#fff}
#socialStoryViewer .storyMusicBadge[hidden]{display:none!important}


/* iPhone Story composer: keep portrait previews and controls inside the viewport. */
.storyCreateSheet{
  box-sizing:border-box;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  place-items:start center;
}
.storyCreateSheet>div{
  box-sizing:border-box;
  width:min(100%,560px);
  max-width:100%;
  max-height:none;
  margin:auto 0;
}
.storyMediaPreview{
  width:100%;
  max-height:min(48dvh,420px);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
}
.storyMediaPreview[hidden]{display:none!important}
.storyMediaPreview img,.storyMediaPreview video{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:min(48dvh,420px);
  object-fit:contain;
}
@supports not (height:1dvh){
  .storyMediaPreview,.storyMediaPreview img,.storyMediaPreview video{max-height:48vh}
}

/* Story composer: hard mobile width containment for iPhone Safari. */
.storyCreateSheet{width:100%;max-width:100vw;overflow-x:hidden}
.storyCreateSheet>div{min-width:0;overflow-x:hidden}
.storyCreateSheet>div>*{box-sizing:border-box;min-width:0;max-width:100%}
.storyMusicSelected{width:100%;overflow:hidden}
.storyMusicSelected span{min-width:0;overflow:hidden}
.storyMusicSelected strong,.storyMusicSelected small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.storyMusicExcerpt{min-width:0;width:100%;overflow:hidden}
.storyMusicExcerpt label{min-width:0;max-width:100%}
.storyMusicExcerpt input[type="range"]{width:100%;max-width:100%;min-width:0}
.storyMusicExcerpt button,#storyAddMusic,#storyPickFile,#storyUseCamera,#storyPublish,#storyCloseSheet{width:100%;max-width:100%;white-space:normal}
@media(max-width:600px){
 .storyCreateSheet{padding-left:12px;padding-right:12px}
 .storyCreateSheet>div{width:100%;max-width:calc(100vw - 24px);padding:18px}
}