/* Buzz keeps its own social profile, separate from the player profile. */
.buzz-page [hidden] { display: none !important; }
.buzz-person-menu { position: fixed; z-index: 10000; width: 184px; padding: 6px; border: 1px solid #c4cde7; border-radius: 12px; background: #fffaff; box-shadow: 0 8px 28px #07133f30; }
.buzz-person-menu button { display: block; width: 100%; border: 0; border-radius: 7px; background: transparent; color: #16224a; padding: 12px; text-align: left; font: inherit; font-weight: 600; cursor: pointer; }
.buzz-person-menu button:hover, .buzz-person-menu button:focus-visible { background: #e5eaff; outline: 2px solid #c4cdef; }
.buzz-person-panel { min-width: 0; }
.buzz-rail-avatar { display: block; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: center 40%; background: #e5eaff; box-shadow: 0 0 0 2px #fff, 0 2px 5px #7483b526; }
.buzz-person-panel > button, .social-profile-banner button { border: 1px solid #c6cde5; border-radius: 999px; padding: 8px 14px; background: #f7f5ff; color: #172449; font: inherit; font-weight: 600; cursor: pointer; }
.buzz-person-panel > button:hover, .social-profile-banner button:hover { background: #e4eaff; }
.buzz-person-panel button:focus-visible { outline: 3px solid #9bace9; outline-offset: 2px; }
.social-profile-banner { position: relative; width: 100%; min-width: 0; box-sizing: border-box; }
.social-banner-art { width: 100%; height: 180px; background-color: #d9e3ff; background-image: radial-gradient(ellipse at 80% 20%, #f4b8d9, transparent 65%), linear-gradient(120deg, #d9e3ff, #eee4ff); background-size: cover; }
.social-profile-banner .social-banner-edit {
  position: absolute; right: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 7px 10px;
  border: 1px solid #ffffff90; border-radius: 8px;
  background: #ffffffe0; color: #4f5876;
  font-size: 12px; font-weight: 500; line-height: 1.3;
  box-shadow: 0 1px 5px #35416610;
}
.social-profile-banner .social-banner-edit::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.social-profile-banner .social-banner-edit:hover { background: #fff; color: #35496f; }
.buzz-person-panel > .buzz-person-back {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 4px 8px; padding: 10px 12px; min-height: 40px;
  border: 0; border-radius: 6px; background: transparent;
  color: #667593; font-size: 13px; font-weight: 500; line-height: 1.4;
  box-shadow: none;
}
.buzz-person-back-icon { font-size: 19px; line-height: 1; font-weight: 400; }
.buzz-person-panel > .buzz-person-back:hover { color: #34496f; background: #edf1fb80; }

.social-banner-editor { position: relative; z-index: 2; display: grid; gap: 16px; margin: 0; padding: 18px 20px; border-bottom: 1px solid #ece5f0; background: #fffaff; color: #29365b; }
.social-banner-editor > strong { font-size: 15px; line-height: 1.4; }
.social-banner-upload { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 13px; border: 1px dashed #dcbdd4; border-radius: 12px; background: linear-gradient(110deg, #fff5fa, #f5f6ff); cursor: pointer; }
.social-banner-upload:hover { border-color: #c677aa; background: #fff1f8; }
.social-banner-upload:focus-within { outline: 2px solid #71c9c0; outline-offset: 3px; }
.social-banner-upload-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: #f9dcec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ac4d80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3Cpath d='m4 17 5-5 4 4 3-3 4 4'/%3E%3C/svg%3E") center / 21px no-repeat; }
.social-banner-upload-copy { display: grid; gap: 3px; min-width: 0; }
.social-banner-upload-copy strong { font-size: 13px; line-height: 1.4; color: #895073; }
.social-banner-upload-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64718c; font-size: 12px; line-height: 1.4; }
.social-banner-upload input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.social-banner-editor .social-banner-format { margin: -8px 0 0; color: #82889d; font: 400 11px/1.5 Arial, sans-serif; }
.social-banner-position { display: grid; gap: 10px; color: #68728c; font-size: 12px; font-weight: 500; }
.social-banner-position-caption { display: flex; justify-content: space-between; align-items: center; }
.social-banner-position output { color: #a75687; font-size: 11px; font-variant-numeric: tabular-nums; }
.social-banner-editor input[type=range] { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 100%; height: 6px; margin: 6px 0; padding: 0; border: 0; border-radius: 9px; box-shadow: none; background: linear-gradient(90deg, #dda2c7 0 var(--banner-position, 50%), #eae8f2 var(--banner-position, 50%) 100%); cursor: pointer; }
.social-banner-editor input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: #c576aa; box-shadow: 0 1px 5px #77527840; }
.social-banner-editor input[type=range]::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: #c576aa; box-shadow: 0 1px 5px #77527840; }
.social-banner-editor input[type=range]::-moz-range-track { height: 6px; border: 0; background: transparent; }
.social-banner-editor input[type=range]:focus-visible { outline: 2px solid #71c9c0; outline-offset: 6px; }
.social-banner-editor-actions { display: flex; gap: 8px; align-items: center; padding-top: 2px; }
.social-banner-editor .social-banner-editor-actions button { min-height: 34px; padding: 7px 12px; border: 0; border-radius: 7px; background: #f0eff7; color: #68718a; box-shadow: none; font: 600 12px/1.4 Arial, sans-serif; cursor: pointer; }
.social-banner-editor .social-banner-editor-actions button:hover { background: #e9e7f2; }
.social-banner-editor .social-banner-editor-actions [type=submit] { background: #f6d4e7; color: #85426d; }
.social-banner-editor .social-banner-editor-actions [type=submit]:hover { background: #efbdd8; }
.social-banner-editor .social-banner-editor-actions [data-remove] { margin-right: auto; padding-inline: 0; background: transparent; color: #a16b84; font-weight: 400; }
.social-banner-editor .social-banner-editor-actions [data-remove]:hover { color: #87365f; }
.social-banner-editor button:disabled, .social-banner-editor input:disabled { opacity: .55; cursor: wait; }
.social-banner-editor [role=status] { margin: 0; color: #7a698a; font-size: 12px; line-height: 1.5; }
.social-banner-editor [role=status]:empty { display: none; }
@media (max-width: 640px) { .social-banner-editor { padding: 16px 15px; } }

.buzz-person-identity { padding: 0 20px 20px; }
.buzz-person-avatar { position: relative; display: block; width: 94px; height: 94px; object-fit: cover; object-position: center 40%; border: 5px solid white; border-radius: 50%; background: #e5eaff; margin-top: -36px; }
.buzz-person-identity h1 { color: #172449; font-size: 26px; line-height: 1.2; margin: 12px 0 3px; overflow-wrap: anywhere; }
/* Reuse each account's existing badge beside its Buzz profile name. */
.buzz-person-name { display: flex; align-items: center; gap: 8px; font-family: var(--buzz-username-font, inherit); }
.buzz-person-name > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.buzz-person-name .buzz-verified-badge,
.buzz-person-name .buzz-verified-icon { width: 22px; height: 22px; }
.buzz-person-handle { color: #667192; margin: 0 0 16px; }
.buzz-person-bio { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; color: #293657; }
.buzz-person-stats { color: #596787; font-size: 14px; }
.buzz-person-actions { display: flex; gap: 12px; align-items: center; }
.buzz-person-actions a,
.buzz-person-actions a:visited {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; color: #61749c;
  font-size: 13px; font-weight: 500; line-height: 1.4;
  text-decoration: none; border: 0; background: none; box-shadow: none;
}
.buzz-person-actions a:hover { color: #354f82; }
.buzz-person-actions a:focus-visible { outline: 2px solid #9bace9; outline-offset: 3px; border-radius: 3px; }
.buzz-person-actions-arrow { font-size: 15px; font-weight: 400; }

.buzz-person-heading {
  display: flex; align-items: center; gap: 9px;
  margin: 0; padding: 10px 20px 12px;
  border: 0; background: transparent; color: #29365b;
  font-size: 15px; font-weight: 700; line-height: 24px;
}
.buzz-person-heading::before {
  content: ""; flex: 0 0 26px; width: 26px; height: 26px;
  border-radius: 9px; transform: rotate(-6deg);
  background: #fce7f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bd568d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-7l-5 4v-4a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3Z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.buzz-person-heading::after {
  content: ""; flex: 1; height: 1px; margin-left: 5px;
  background: linear-gradient(90deg, #ebc6de, #dce9f3 70%, transparent);
}
.buzz-person-panel > button:last-child { margin: 16px; }
.buzz-person-panel > [data-history-more] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  min-height: 42px;
  max-width: calc(100% - 40px);
  margin: 22px auto;
  padding: 10px 22px;
  border: 1px solid #cbcbe9;
  background: linear-gradient(135deg, #f9eff8, #edf1ff);
  color: #4d5888;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: inset 0 1px 0 #fff, 0 3px 9px #7483b51a;
  transition: background 150ms ease, box-shadow 150ms ease;
}
.buzz-person-panel > [data-history-more]::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.buzz-person-panel > [data-history-more]:hover {
  background: linear-gradient(135deg, #f5e5f3, #e3eaff);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px #7483b52b;
}
.buzz-person-panel > [data-history-more]:active { box-shadow: inset 0 1px 3px #7483b52b; }
.buzz-page .buzz-notification-list { list-style: none; padding: 0; margin: 0; display: block; }
.buzz-page .buzz-notification-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; margin: 0; padding: 20px; border: 0; border-bottom: 1px solid #dfe4f2; border-radius: 0; background: #ffffff80; box-shadow: none; }
.buzz-page .buzz-notification-item.is-unread { background: linear-gradient(100deg, #fdf0f8, #edf1ff); box-shadow: inset 3px 0 #ce8dbb; }
.buzz-notification-avatar { position: relative; display: block; width: 44px; height: 48px; }
.buzz-notification-avatar img { width: 44px; height: 44px; object-fit: cover; object-position: top; border-radius: 50%; background: #d9e3ff; }
.buzz-page .buzz-notification-icon { position: absolute; right: -5px; bottom: -2px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #eee1f4; color: #82577b; border: 2px solid #fff; font: 700 15px Arial, sans-serif; }
.buzz-page .buzz-notification-copy { min-width: 0; margin: 0; color: #263557; line-height: 1.45; }
.buzz-notification-copy p { margin: 0 0 5px; overflow-wrap: anywhere; }
.buzz-notification-copy time { color: #65718d; font-size: 12px; }
.buzz-notification-new { color: #905277; background: #f5deef; border-radius: 20px; padding: 2px 7px; font-size: 11px; font-weight: 700; margin-left: 8px; }
.buzz-page .buzz-notification-post { display: block; width: 100%; margin: 10px 0 0; padding: 11px 13px; border: 1px solid #d9dff0; border-radius: 10px; background: #ffffffb0; text-align: left; color: #52607e; font: inherit; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; }
.buzz-page .buzz-notification-post:hover, .buzz-page .buzz-notification-post:focus-visible { background: #e9eeff; border-color: #a9b6df; }
@media (max-width: 640px) {
 .social-banner-art { height: 135px; }
 .buzz-person-identity { padding-inline: 15px; }
 .buzz-page .buzz-notification-item { padding: 16px 12px; gap: 10px; }
}

.social-profile-banner:has(.social-banner-editor) + .buzz-person-identity .buzz-person-avatar { margin-top: 12px; }

@media (max-width: 820px) {
  .buzz-page-grid { grid-template-areas: "buzz-left" "buzz-main" "buzz-right"; }
  .buzz-menu-card { padding: 8px; }
  .buzz-menu-card > .buzz-column-heading { display: none; }
  .buzz-action-bar { display: flex; flex-direction: row; gap: 4px; overflow-x: auto; margin: 0; padding: 0; }
  .buzz-action-bar .buzz-rail-button { flex: 0 0 auto; width: auto; min-height: 42px; gap: 6px; padding: 8px 10px; border: 0; font-size: 14px; }
  .buzz-action-bar .buzz-rail-button::after { display: none; }
  .buzz-action-bar .buzz-rail-icon { width: 18px; height: 18px; }
  .buzz-action-bar .buzz-rail-avatar { flex-basis: 24px; width: 24px; height: 24px; }

}
.buzz-live-status { position: fixed; z-index: 10001; bottom: 20px; left: 50%; transform: translateX(-50%); max-width: min(420px, 90vw); padding: 12px 18px; border: 1px solid #c6cde5; border-radius: 12px; background: #fff9ff; color: #273657; box-shadow: 0 6px 24px #07133f25; }
.buzz-live-status.is-error { border-color: #cf93b4; }

.buzz-bio-edit { padding: 4px 0; border: 0; background: none; color: #61749c; font: inherit; font-size: 13px; cursor: pointer; }
.buzz-bio-edit:hover { color: #a43e74; }
.buzz-bio-editor { display: grid; gap: 8px; margin: 14px 0; }
.buzz-bio-editor label { display: grid; gap: 8px; color: #596787; font-size: 13px; font-weight: 600; }
.buzz-bio-editor textarea { box-sizing: border-box; width: 100%; min-height: 110px; resize: vertical; border: 1px solid #dfe3ed; border-radius: 8px; background: #fff; color: #293657; padding: 10px 12px; font: 400 14px/1.5 Arial, sans-serif; }
.buzz-bio-editor-actions { display: flex; align-items: center; gap: 8px; }
.buzz-bio-count { margin-right: auto; color: #737c94; font-size: 12px; }
.buzz-bio-editor button { border: 0; border-radius: 6px; padding: 7px 12px; background: #f0f2f8; color: #596787; font: inherit; font-size: 13px; cursor: pointer; }
.buzz-bio-editor button[type=submit] { background: #fae8f1; color: #a43e74; }
.buzz-bio-editor button:disabled { opacity: .6; cursor: wait; }
.buzz-bio-status { margin: 0; color: #a43e74; font-size: 13px; }
.buzz-bio-status:empty { display: none; }
.buzz-bio :is(button, textarea):focus-visible { outline: 2px solid #63b9b0; outline-offset: 3px; }