/* Community behaves like a social workspace: the shell stays in place while
   rooms, messages, and the friends list each scroll within their own pane. */
body.community-open .social-page-heading,
body.community-open .social-community-intro {
  display: none !important;
}

/* On phones, Rooms and Messages are separate lists. Opened threads use an in-thread back control. */
.social-mobile-section-title,
.social-mobile-back { display: none; }

.social-sidebar-tabs { display: none; }

@media (min-width: 1001px) {
  .social-sidebar-tabs {
    display: flex;
    gap: 5px;
    margin: 0 0 19px;
    padding: 4px;
    border: 1px solid #ffffff0b;
    border-radius: 13px;
    background: #ffffff04;
  }

  .social-sidebar-tab {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 8px 5px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #8d9db8;
    font-size: 11px;
    font-weight: 700;
  }

  .social-sidebar-tab[aria-pressed="true"] {
    border-color: #c2a8ff24;
    background: #c2a8ff1c;
    color: #e6d9ff;
  }

  .social-sidebar-section { min-width: 0; }
  .social-sidebar-section > h3 { margin-inline: 8px; }
  .social-sidebar[data-list-view="messages"] .social-sidebar-rooms,
  .social-sidebar[data-list-view="rooms"] .social-sidebar-messages { display: none; }
  .social-sidebar .social-circle { display: grid; }
  .social-sidebar-messages .social-circle { gap: 7px; }
}

/* When the on-screen keyboard is active, give community chat the whole visible
   viewport so the conversation and message composer stay together. */
@media (max-width: 1000px) {
  body.mobile-community-input-active { height: var(--mobile-visual-height, 100dvh); overflow: hidden; }
  body.mobile-community-input-active .header,
  body.mobile-community-input-active .mobile-app-nav,
  body.mobile-community-input-active > footer { display: none !important; }
  body.mobile-community-input-active #content {
    position: fixed;
    z-index: 40;
    inset: var(--mobile-visual-top, 0px) 0 auto;
    display: flex;
    width: 100%;
    height: var(--mobile-visual-height, 100dvh);
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  body.mobile-community-input-active .social-page {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 7px 8px max(7px, env(safe-area-inset-bottom));
    overflow: hidden;
  }
  body.mobile-community-input-active .social-mobile-tabs { flex: none; margin: 0 0 6px; }
  body.mobile-community-input-active .social-workspace {
    display: flex;
    flex: 1;
    height: 0;
    min-height: 0;
    max-height: none;
    border-radius: 14px;
  }
  body.mobile-community-input-active .social-conversation { flex: 1; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
  body.mobile-community-input-active .social-conversation-head { flex: none; min-height: 56px; padding: 7px 10px; }
  body.mobile-community-input-active .social-conversation-head h2 { margin-bottom: 2px; font-size: 15px; }
  body.mobile-community-input-active .social-conversation-head p,
  body.mobile-community-input-active .social-compose-help { display: none; }
  body.mobile-community-input-active .social-feed { flex: 1; height: 0; min-height: 0; padding: 10px; overscroll-behavior: contain; }
  body.mobile-community-input-active .social-compose { flex: none; margin: 0 6px max(6px, env(safe-area-inset-bottom)); padding: 8px 10px; }
  body.mobile-community-input-active .social-compose textarea { min-height: 42px; max-height: 18dvh; resize: none; }
  body.mobile-community-input-active .social-mention-picker { max-height: 25dvh; overflow-y: auto; }
}

@media (max-width: 1000px) {
  .social-page[data-mobile-view="messages"] .social-friends-panel {
    display: block !important;
  }

  .social-page[data-mobile-view="messages"] .social-sidebar,
  .social-page[data-mobile-view="messages"] .social-conversation,
  .social-page[data-mobile-view="rooms"] .social-friends-panel,
  .social-page[data-mobile-view="rooms"] .social-conversation,
  .social-page[data-mobile-view="chat"] .social-sidebar,
  .social-page[data-mobile-view="chat"] .social-friends-panel {
    display: none !important;
  }

  .social-page[data-mobile-view="rooms"] .social-sidebar {
    display: block !important;
  }

  .social-page[data-mobile-view="chat"] .social-conversation {
    display: flex !important;
  }

  .social-sidebar-tabs { display: none !important; }
  .social-sidebar .social-circle { display: none !important; }
  .social-mobile-section-title { display: block; }
  .social-friends-panel > h3:not(.social-mobile-section-title) { display: none; }

  .social-conversation-head .social-mobile-back {
    display: grid;
    place-items: center;
    flex: none;
    min-width: 44px;
    min-height: 44px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 78%, transparent);
    color: var(--text);
    font-size: 0;
  }

  .social-conversation-head .social-mobile-back::before {
    content: "‹";
    font-size: 26px;
    line-height: 1;
  }

  .social-conversation-head .social-mobile-back:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .social-friends-panel {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .social-friends-panel .social-friend-link,
  .social-friends-panel .remove-friend,
  .social-add-friend .button,
  .social-request button {
    min-height: 44px;
  }

  .social-friends-panel .social-mobile-section-title {
    margin: 17px 0 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
}

@media (max-width: 380px) {
  .social-mobile-tabs { margin-bottom: 8px; }
  .social-page { padding-inline: 9px; }
  .social-conversation-head { padding-inline: 10px; }
  .social-conversation-head .social-mobile-back { min-width: 40px; }
  .social-friends-panel { padding-inline: 14px; }
}

@media (min-width: 1001px) {
  body.community-open {
    height: 100dvh;
    overflow: hidden;
  }

  body.community-open #content {
    display: flex;
    height: calc(100dvh - 78px);
    min-height: 0;
    overflow: hidden;
  }

  body.community-open footer {
    display: none;
  }

  body.community-open .social-page {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .social-page-heading {
    flex: none;
    min-height: 58px;
    margin: 0 2px 10px;
    gap: 18px;
  }

  .social-page-heading h1 {
    max-width: none;
    margin: 0 0 3px;
    font-size: clamp(25px, 2.4vw, 34px);
    letter-spacing: -.045em;
  }

  .social-page-heading .eyebrow {
    margin: 0 0 3px;
    font-size: 8px;
  }

  .social-page-heading .muted {
    max-width: none;
    font-size: 11px;
    line-height: 1.45;
  }

  .social-live-badge {
    flex: none;
    padding: 9px 12px;
    font-size: 8px;
  }

  .social-community-intro {
    display: none;
  }

  .social-workspace {
    flex: 1;
    grid-template-columns: clamp(220px, 18vw, 290px) minmax(0, 1fr) clamp(260px, 20vw, 320px);
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: 0;
  }

  .social-sidebar,
  .social-friends-panel {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c2a8ff25 transparent;
  }

  .social-sidebar {
    padding: 22px 17px;
  }

  .social-sidebar-brand {
    padding-bottom: 22px;
  }

  .social-conversation {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .social-conversation-head {
    flex: none;
    min-height: 74px;
    padding: 14px 22px;
  }

  .social-conversation-head h2 {
    margin-bottom: 3px;
    font-size: 19px;
  }

  .social-feed {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 16px 22px;
  }

  .social-compose {
    flex: none;
    margin: 0 15px 14px;
  }

  .social-friends-panel {
    display: flex;
    flex-direction: column;
    padding: 22px 18px;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
  }

  .social-aside-head {
    padding: 0 0 15px;
    border-bottom: 1px solid #ffffff12;
  }

  .social-aside-head .eyebrow {
    margin-bottom: 5px;
    font-size: 8px;
  }

  .social-aside-head h2 {
    margin: 0 0 5px;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.04em;
  }

  .social-aside-head p {
    margin: 0;
    font-size: 10px;
    line-height: 1.5;
  }

  .social-add-friend {
    margin: 16px 0 20px;
  }

  .social-add-friend label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #8998ae;
  }

  .social-add-friend label > div {
    gap: 7px;
    margin-top: 8px;
  }

  .social-add-friend input {
    min-height: 40px;
    padding: 9px 11px;
    border-color: #ffffff18;
    border-radius: 10px;
    font-size: 11px;
    transition: border-color .18s ease, background .18s ease;
  }

  .social-add-friend input:focus {
    border-color: color-mix(in srgb, var(--accent) 65%, transparent);
    background: color-mix(in srgb, var(--bg) 90%, var(--accent));
  }

  .social-add-friend .button {
    min-height: 40px;
    padding: 8px 12px;
    border-color: color-mix(in srgb, var(--accent) 32%, #ffffff16);
    border-radius: 10px;
    font-size: 10px;
  }

  .social-friends-panel > h3 {
    margin: 0 0 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid #ffffff0c;
    font-size: 8px;
    letter-spacing: .12em;
  }

  .social-friends {
    display: grid;
    gap: 4px;
    max-height: min(42vh, 420px);
    margin: 0;
    padding: 0;
  }

  .social-friend-row {
    position: relative;
    gap: 7px;
    min-height: 54px;
    margin: 0;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: border-color .18s ease, background .18s ease;
  }

  .social-friend-row:hover,
  .social-friend-row:focus-within {
    border-color: #ffffff12;
    background: #ffffff06;
  }

  .social-friend-link {
    gap: 10px;
  }

  .social-friend-link .social-avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .social-friend-link strong {
    font-size: 11px;
    color: #e0e7f2;
  }

  .social-friend-link small {
    margin-top: 3px;
    color: #8795aa;
    font-size: 9px;
  }

  .remove-friend {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #8795aa;
    opacity: 0;
    font-size: 15px;
    transition: opacity .18s ease, background .18s ease, border-color .18s ease;
  }

  .social-friend-row:hover .remove-friend,
  .remove-friend:focus-visible {
    border-color: #ffffff16;
    background: #ffffff08;
    opacity: 1;
  }

  .social-request {
    padding: 11px;
    border-radius: 12px;
  }

  .social-privacy {
    flex: none;
    margin-top: auto;
    padding: 13px;
    border: 1px solid #ffffff12;
    border-radius: 13px;
    background: #ffffff04;
  }

  .social-privacy strong {
    color: #d8e0ec;
    font-size: 10px;
  }

  .social-privacy small {
    color: #8795aa;
    font-size: 9px;
  }

  .social-friends-panel > .social-account-privacy {
    flex: none;
    margin-top: auto;
    padding: 12px;
    border: 1px solid #ffffff12;
    border-radius: 13px;
    background: #ffffff04;
  }

  .social-friends-panel > .social-account-privacy > h3 {
    display: none;
  }

  .social-friends-panel .social-account-privacy .social-privacy {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
}

.friend-remove-dialog {
  width: min(440px, calc(100% - 32px));
  border: 1px solid #ffffff1c;
  border-radius: 22px;
  background: linear-gradient(145deg, #171d2b, #0e1420);
  color: #eef2fb;
  box-shadow: 0 26px 90px #0009;
}

.friend-remove-dialog::backdrop {
  background: #050811bd;
  backdrop-filter: blur(8px);
}

.friend-remove-dialog .dialog-inner {
  padding: 28px;
}

.friend-remove-dialog .eyebrow {
  margin-bottom: 10px;
}

.friend-remove-dialog h2 {
  margin-bottom: 10px;
  font-size: 25px;
  letter-spacing: -.04em;
}

.friend-remove-dialog .muted {
  font-size: 13px;
  line-height: 1.7;
}

.friend-remove-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 23px;
}

.friend-remove-confirm {
  border-color: #ef818a80;
  background: #a83e4a;
  color: #fff;
}

.friend-remove-confirm:hover:not(:disabled) {
  border-color: #ff9ba2;
  background: #bc4652;
}

@media (max-width: 580px) {
  .friend-remove-dialog .dialog-inner {
    padding: 22px;
  }

  .friend-remove-dialog h2 {
    font-size: 22px;
  }
}

.member-profile-dialog{width:min(560px,calc(100vw - 32px));max-width:none;max-height:min(820px,calc(100dvh - 32px));padding:0;overflow:auto;border:1px solid #8e77ba66;border-radius:24px;background:linear-gradient(155deg,#151927f2,#0b101cf5);color:var(--text,#f4f1ff);box-shadow:0 32px 100px #0009;}
.member-profile-inner{padding:0;}
.member-profile-banner{height:138px;overflow:hidden;background:radial-gradient(ellipse at 75% 15%,#9674d852,transparent 48%),linear-gradient(120deg,#222037,#101723);border-bottom:1px solid #ffffff12;}
.member-profile-banner img{display:block;width:100%;height:100%;object-fit:cover;opacity:.82;}
.member-profile-identity{position:relative;display:flex;align-items:flex-end;gap:16px;margin:-42px 24px 0;}
.member-profile-identity>.social-avatar{width:82px;height:82px;flex:none;border:4px solid #111521;border-radius:25px;box-shadow:0 8px 26px #0008;font-size:25px;}
.member-profile-identity>div{min-width:0;padding:0 0 5px;}
.member-profile-identity .eyebrow{margin:0 0 4px;font-size:9px;letter-spacing:.15em;color:#77d8ef;}
.member-profile-identity h2{margin:0;font-size:25px;line-height:1.16;overflow-wrap:anywhere;}
.member-profile-identity .muted{margin:4px 0 0;color:#aab5c9;font-size:12px;}
.member-profile-details{padding:19px 26px 6px;}
.member-profile-bio{margin:0;color:#dce3ef;font-size:14px;line-height:1.65;overflow-wrap:anywhere;}
.member-profile-stats{display:flex;gap:10px;margin-top:16px;}
.member-profile-stats>span{display:flex;flex-direction:column;gap:3px;min-width:108px;padding:10px 13px;border:1px solid #ffffff12;border-radius:12px;background:#ffffff06;}
.member-profile-stats strong{font-size:15px;}
.member-profile-stats small,.member-profile-watched small{color:#9ba9bc;font-size:10px;}
.member-profile-watched{display:grid;gap:7px;margin-top:19px;}
.member-profile-watched>.eyebrow{margin-bottom:2px;color:#a997d8;font-size:9px;letter-spacing:.15em;}
.member-profile-watched>a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid #ffffff12;border-radius:10px;background:#ffffff05;color:inherit;text-decoration:none;font-size:12px;}
.member-profile-watched>a:hover{border-color:#9f83dc77;background:#9f83dc12;}
.member-profile-watched>a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.member-profile-actions{display:flex;flex-wrap:wrap;gap:9px;padding:16px 24px 22px;border-top:1px solid #ffffff12;margin-top:18px;}
.member-profile-actions .button{min-height:40px;padding:9px 14px;border-radius:12px;font-size:12px;}
.member-profile-actions .member-action-danger{border-color:#e06e7a66;color:#ffb2ba;background:#a62b381b;}
.member-profile-actions .member-action-danger:hover{background:#a62b3835;}
.member-moderation-dialog{width:min(460px,calc(100vw - 30px));max-height:calc(100dvh - 30px);overflow:auto;}
.member-moderation-dialog .dialog-inner{display:grid;gap:13px;}
.member-moderation-dialog .eyebrow{margin:0;color:#75d8ef;font-size:10px;letter-spacing:.15em;}
.member-moderation-dialog h2,.member-moderation-dialog p{margin:0;}
.member-moderation-dialog select{min-height:42px;padding:9px 12px;border:1px solid var(--line,#303b51);border-radius:11px;background:#0a101a;color:var(--text,#f4f1ff);}
.member-moderation-dialog [role=status]:empty{display:none;}
.member-moderation-dialog [role=status]{color:#ffb2ba;font-size:12px;}
@media(max-width:520px){.member-profile-banner{height:108px}.member-profile-identity{margin-left:18px;margin-right:18px;gap:12px}.member-profile-identity>.social-avatar{width:70px;height:70px;border-radius:22px}.member-profile-identity h2{font-size:21px}.member-profile-details{padding:16px 19px 4px}.member-profile-actions{padding:14px 18px 18px}.member-profile-actions .button{flex:1 1 calc(50% - 9px)}}