/* YAAS clean layout pass: keeps features, makes the app easier to read. */
/* Explicit preference overrides retain the existing gold accents. */
html[data-theme="light"] { color-scheme: light; --bg:#f5f2eb; --panel:#fffdf8; --soft:#eee8dc; --line:#c9bea7; --text:#241f17; --muted:#625846; --accent:#916514; --gold:#916514; --gold-light:#735010; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] body { color:#241f17; background:#f5f2eb !important; }
html[data-theme="light"] :is(.app,.workspace,.welcome-view,.workspace-page,.workspace-page-shell,.server-panel,.channel-panel,.content-panel,.member-panel,.friends-sidebar,.dm-panel,.dm-view,.dm-message-list,.messenger-page,.voice-channel-view,.voice-room-header,.voice-dock) { color:#241f17 !important; background:#f5f2eb !important; border-color:#c9bea7 !important; }
html[data-theme="light"] :is(.workspace-card,.settings-page-panel,.settings-page-nav,.settings-nav,.setting-switch,.profile-mini-card,.friend-row,.inbox-conversation,.account-bar,.modal,.modal>header,.notification-popover,.notification-item,.dm-composer,.dm-composer-shell,.dm-message:not(.mine),.message,.member-item,.server-panel>header,.channel-panel>header,.content-panel>header,.member-panel>header,.voice-personal-settings) { color:#241f17 !important; background:#fffdf8 !important; border-color:#c9bea7 !important; }
html[data-theme="light"] :is(h1,h2,h3,h4,p,strong,label,small,.section-label,.workspace-topbar,.dm-empty,.settings-info-row,.channel-copy,.member-empty,.dm-contact-copy) { color:inherit; }
html[data-theme="light"] :is(input,textarea,select,button:not(.primary):not(.danger-button),.secondary) { color:#302719 !important; background:#eee8dc !important; border-color:#b8a786 !important; }
html[data-theme="light"] .workspace-card { box-shadow:0 8px 24px #55432018 !important; }
html[data-theme="light"] .appearance-grid button span { color:#735010 !important; background:#ead49e !important; box-shadow:none !important; }
html[data-theme="light"] :is(.home-hero,.home-side-card,.feature-grid>article,.stream-empty,.stream-card,.home-search,.workspace-search,.dm-workspace-sidebar,.dm-request-card,.dm-request-list,.dm-workspace-chat) { color:#241f17 !important; background:#fffdf8 !important; border-color:#c9bea7 !important; box-shadow:0 8px 24px #55432018 !important; }
html[data-theme="light"] :is(.home-hero,.home-side-card,.feature-grid>article,.stream-empty,.workspace-title) :is(strong,small,p,h2,h3) { color:#302719 !important; }
html[data-theme="light"] :is(.online-list i,.quick-card>span,.event-list b) { color:#735010 !important; background:#ead49e !important; box-shadow:none !important; }
html[data-theme="light"] :is(button.active,.side-nav-button.active,[aria-pressed="true"],.channel-item.active,.server-item.active) { color:#382900 !important; background:#ead49e !important; border-color:#916514 !important; }
html[data-theme="light"] .dm-message.mine { color:#241900 !important; }
html[data-theme="light"] :is(.modal-layer,.messenger-layer) { background:#332b1c88 !important; }
html[data-theme="light"] :is(.auth-panel,.auth-box) { color:#241f17 !important; background:#fffdf8 !important; border-color:#c9bea7 !important; }
html[data-animations="false"] *,html[data-animations="false"] *::before,html[data-animations="false"] *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
html[data-effects="false"] :is(body,.app,.workspace,.welcome-view,.workspace-page,.workspace-page-shell,.workspace-card,.home-hero,.quick-card,.dm-panel,.dm-view,.dm-message-list,.dm-composer,.auth-screen,.auth-brand,.auth-panel) { background-image:none !important; }
html[data-effects="false"] .home-hero::before,html[data-effects="false"] .home-hero::after { display:none !important; }
html[data-effects="false"] :is(.auth-scene-video,.auth-scene-glow,.auth-scene-overlay) { visibility:hidden !important; }
html[data-effects="false"] .auth-scene,html[data-effects="false"] .auth-scene-shade { visibility:hidden !important; }
html[data-theme="light"] #auth-screen :is(.auth-panel,.auth-box,.auth-scene-header) { color:#241f17 !important; background:#fffdf8 !important; }
html[data-theme="light"] #auth-screen :is(h2,p,label,.auth-subtitle,.auth-scene-header strong) { color:#241f17 !important; }
html[data-effects="false"] :is(.workspace,.welcome-view,.dm-view,.auth-brand)::before,html[data-effects="false"] :is(.workspace,.welcome-view,.dm-view,.auth-brand)::after { display:none !important; }
html[data-compact="true"] :is(.friend-row,.member-item,.server-item,.inbox-conversation) { min-height:40px !important; padding:6px 9px !important; }
html[data-compact="true"] :is(.workspace-card,.settings-page-panel,.friend-section,.channel-list) { padding:12px !important; gap:8px !important; }
html[data-compact="true"] :is(.message-list,.dm-message-list) { padding:12px !important; gap:6px !important; }
html[data-compact="true"] .setting-switch { padding:10px !important; min-height:48px !important; }
html[data-compact="true"] .channel-template-item { height:34px !important; }
.app {
  grid-template-columns: 272px minmax(0, 1fr) 0 !important;
  background: #050506;
}

.server-panel,
.channel-panel,
.content-panel,
.member-panel {
  background: #0b0c0e !important;
}

.server-panel,
.channel-panel,
.member-panel {
  border-color: #241f18 !important;
}

.server-panel > header,
.channel-panel > header,
.content-panel > header,
.member-panel > header {
  height: 64px !important;
  background: #0a0a0b !important;
  border-color: #241f18 !important;
}

.server-actions {
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  padding: 16px !important;
}

.server-actions button {
  min-height: 42px !important;
  justify-content: center;
  border: 1px solid #31291c;
  border-radius: 12px !important;
  font-size: 11px !important;
}

.server-actions .friends-button {
  order: 3;
}

.section-label {
  margin: 6px 0 8px !important;
  color: #d6aa52 !important;
  letter-spacing: 2px !important;
}

.server-list {
  display: grid;
  gap: 7px;
  padding: 0 12px 12px !important;
}

.server-item {
  min-height: 58px;
  border: 1px solid transparent;
  border-radius: 14px !important;
}

.server-item:hover,
.server-item.active {
  border-color: #3b3020 !important;
  background: linear-gradient(135deg, #19150f, #101113) !important;
}

.server-icon,
.avatar {
  border-radius: 14px !important;
}

.server-logo {
  overflow: hidden;
  padding: 0;
  border: 1px solid #5a4727;
  background: #070708 !important;
}

.server-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.active-server-title {
  min-width: 0;
  display: flex !important;
  align-items: center;
  flex-direction: row !important;
  gap: 10px;
}

.active-server-title > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.active-server-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

.server-logo-field {
  display: grid;
  gap: 7px;
  margin: 0 16px 12px;
  color: #a5abb4;
  font-size: 11px;
  font-weight: 700;
}

.server-logo-field input {
  height: 42px;
  border: 1px solid #343a44;
  outline: 0;
  padding: 0 11px;
  border-radius: 8px;
  color: var(--text);
  background: #0f1216;
}

.account-bar {
  margin: 10px 12px 12px !important;
  border: 1px solid #282118 !important;
  border-radius: 16px !important;
  background: #101011 !important;
}

.workspace {
  background: radial-gradient(circle at 50% 0, #15110a 0, transparent 30%), #070708 !important;
}

.server-view {
  grid-template-columns: 260px minmax(0, 1fr) !important;
}

.channel-list {
  padding: 14px 11px !important;
}

.channel-template-category {
  margin-bottom: 12px !important;
  padding: 5px !important;
  border-radius: 14px !important;
  background: #0f1012 !important;
}

.template-category-header {
  margin-bottom: 5px !important;
  padding: 6px 7px !important;
}

.channel-template-item {
  height: 42px !important;
  margin: 3px 0 !important;
  border-radius: 11px !important;
}

.channel-template-item .channel-glyph {
  width: 31px !important;
  height: 28px !important;
  border-radius: 9px !important;
  font-size: 8px !important;
}

.channel-copy strong {
  font-size: 11px !important;
}

.channel-copy small {
  font-size: 8px !important;
}

.add-channel-button {
  margin: 0 12px 8px !important;
  min-height: 38px;
  border-radius: 11px !important;
}

.content-panel {
  min-width: 0;
  background: linear-gradient(180deg, #08090a, #060607) !important;
}

.content-panel > header {
  padding: 0 18px !important;
}

.content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.content-actions button {
  min-height: 38px;
  border-radius: 11px !important;
}

.message-list {
  padding: 22px !important;
}

.message {
  max-width: 900px;
  margin: 0 auto 8px;
  border: 1px solid transparent;
  border-radius: 14px !important;
}

.message:hover {
  border-color: #282118 !important;
  background: #101113 !important;
}

.message-form {
  max-width: 940px;
  width: 100%;
  margin: 0 auto;
  padding: 14px 22px 18px !important;
}

.message-form input {
  height: 48px !important;
  border-radius: 14px !important;
  background: #0d0e10 !important;
}

.mention {
  display: inline-flex;
  padding: 1px 6px;
  border: 1px solid #6b542d;
  border-radius: 999px;
  color: #ffe7a4;
  background: #21180b;
  font-weight: 900;
}

.mention-suggestions {
  display: flex;
  gap: 8px;
  max-width: 940px;
  margin: 0 auto;
  padding: 10px 22px 0;
  overflow-x: auto;
}

.mention-suggestions button {
  min-width: 170px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid #30291e;
  border-radius: 13px;
  color: #fff1c8;
  background: #111113;
  text-align: left;
}

.mention-suggestions button:hover {
  border-color: #8c6b32;
  background: #1b1710;
}

.member-list {
  display: grid;
  gap: 8px;
  padding: 14px !important;
}

.member-role-section {
  display: grid;
  gap: 8px;
}

.member-role-section > strong {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 3px;
  color: #d7b56a;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.member-item {
  min-height: 58px;
  border: 1px solid transparent;
  border-radius: 14px !important;
  background: #0f1012;
}

.member-item:hover {
  border-color: #342a1d !important;
  background: #15120d !important;
}

.welcome-view {
  padding: 48px 26px !important;
}

.welcome-logo {
  width: min(220px, 60vw) !important;
  height: 96px !important;
  margin-bottom: 18px !important;
}

.welcome-view h2 {
  font-size: clamp(30px, 4vw, 46px) !important;
  letter-spacing: -1.2px;
}

.welcome-view p {
  max-width: 560px !important;
  margin-bottom: 24px !important;
}

.welcome-view > div:last-child {
  gap: 10px !important;
}

.welcome-view > div:last-child button {
  min-height: 42px;
  border-radius: 12px !important;
}

.voice-stage {
  padding: 24px !important;
}

.voice-dock {
  padding: 14px 18px !important;
}

.voice-controls {
  gap: 10px !important;
}

.messenger-page .friends-layout {
  grid-template-columns: 360px minmax(0, 1fr) !important;
}

.messenger-quick-tabs {
  padding: 10px 12px !important;
}

.messenger-quick-tabs button {
  min-height: 40px !important;
  border-radius: 11px !important;
}

.messenger-page .friend-section {
  display: none !important;
}

.dm-tab-content {
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px 18px;
}

.dm-tab-section {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.dm-tab-section > strong {
  color: #d7b56a;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.dm-notification-row {
  width: 100%;
  display: grid;
  gap: 4px;
  text-align: left;
}

.dm-notification-row strong {
  color: #fff1c8;
}

.dm-notification-row small {
  color: #b7aa94;
  line-height: 1.4;
}

.friend-section {
  padding: 11px 13px !important;
}

.friend-row {
  min-height: 54px !important;
  border-radius: 13px !important;
}

.dm-message-list {
  padding: 20px !important;
}

.role-template-card {
  min-height: 48px !important;
  border-radius: 13px !important;
}

.role-hoist-switch {
  padding: 12px !important;
  border: 1px solid #30291e !important;
  border-radius: 14px !important;
  background: #121315 !important;
}

.role-icon-badge,
.role-access-icon {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--role-color, #d7b56a), transparent 55%);
  border-radius: 9px;
  background: #17130d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.role-chip span,
.settings-member-roles i span {
  margin-right: 5px;
}

.profile-role-tools {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #30291e;
  border-radius: 16px;
  background: #0c0d0f;
}

.profile-role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid #30291e;
  border-radius: 999px;
  background: #15110a;
  font-size: 12px;
  font-weight: 900;
}

.profile-role-pill button {
  border: 0;
  color: #ffb0a8;
  background: transparent;
  cursor: pointer;
  font-weight: 900;
}

.settings-panel[data-settings-panel="roles"] .role-layout {
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: 0 !important;
  border: 1px solid #30291e !important;
  border-radius: 18px !important;
  background: #30291e !important;
}

.settings-panel[data-settings-panel="roles"] .role-layout > div,
.settings-panel[data-settings-panel="roles"] .role-layout > form {
  background: #0d0e10 !important;
}

.settings-panel[data-settings-panel="roles"] .role-layout > div {
  padding: 14px !important;
}

.settings-panel[data-settings-panel="roles"] .role-layout > form {
  display: grid;
  gap: 14px;
  padding: 18px !important;
}

.permission-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 9px !important;
}

.permission-grid label {
  min-height: 48px;
  border: 1px solid #2b251d !important;
  border-radius: 12px !important;
  background: #121315 !important;
}

.permission-grid label:hover {
  border-color: #8c6b32 !important;
  background: #18140f !important;
}

.voice-channel-view {
  background: #060607 !important;
}

.voice-room-header {
  height: 68px !important;
  padding: 0 20px !important;
  background: #090a0c !important;
}

.voice-room-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #5a4727;
  border-radius: 12px;
  background: #14110c;
  font-size: 18px !important;
}

.voice-stage {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 14px !important;
  padding: 20px !important;
}

.voice-stage .voice-person,
.voice-stage .voice-video-tile {
  min-height: 210px !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at 50% 30%, #2a2418, #111214 68%) !important;
}

.voice-stage .voice-person:not(.muted),
.voice-video-tile#local-video-tile {
  border-color: #39b56b !important;
  box-shadow: 0 0 0 1px #39b56b55, 0 18px 40px #0008 !important;
}

.voice-video-tile#local-video-tile video {
  transform: none !important;
}

.voice-dock {
  min-height: 86px;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  background: #090a0c !important;
}

.voice-control,
.join-voice-action {
  border-radius: 14px !important;
}

.voice-control {
  width: 72px !important;
  height: 54px !important;
}

.voice-personal-settings {
  width: 340px !important;
  border-radius: 14px !important;
}

.modal {
  border-radius: 18px !important;
}

.primary {
  background: linear-gradient(135deg, #f0d185, #c69234) !important;
}

.primary:hover {
  filter: brightness(1.08);
}

.secondary {
  border: 1px solid #30291e;
  background: #171719 !important;
}

.secondary:hover {
  border-color: #8c6b32;
  color: #ffe7a4;
}

.setting-switch:has(#server-dm-setting) {
  display: none !important;
}

@media (max-width: 1120px) {
  .app {
    grid-template-columns: 255px minmax(0, 1fr) !important;
  }

  .server-view {
    grid-template-columns: 245px minmax(0, 1fr) !important;
  }

  .member-panel {
    width: 280px !important;
  }

  .voice-connection-bar {
    left: 270px !important;
    right: 18px !important;
  }
}

@media (max-width: 720px) {
  .app {
    display: block !important;
  }

  .server-actions {
    padding: 13px !important;
  }

  .workspace {
    height: calc(100vh - 60px) !important;
  }

  .server-view {
    grid-template-columns: 1fr !important;
  }

  .content-panel > header {
    padding: 0 10px !important;
  }

  .content-actions button {
    min-height: 34px;
    padding: 0 8px;
    font-size: 9px;
  }

  .message-list {
    padding: 12px !important;
  }

  .message-form {
    padding: 10px !important;
  }

  .welcome-view {
    padding: 26px 18px !important;
  }

  .welcome-logo {
    width: min(190px, 72vw) !important;
  }

  .messenger-page .friends-layout {
    grid-template-columns: 1fr !important;
  }

  .messenger-quick-tabs {
    grid-template-columns: 1fr !important;
  }

  .voice-connection-bar {
    left: 8px !important;
    right: 8px !important;
  }

  .settings-panel[data-settings-panel="roles"] .role-layout {
    grid-template-columns: 1fr !important;
  }

  .voice-dock {
    display: grid !important;
    gap: 10px;
  }

  .voice-personal-settings {
    width: 100% !important;
  }
}

/* Desktop dashboard scroll fix */
.workspace {
  min-height: 0 !important;
  overflow: hidden !important;
}

.yaas-home {
  min-height: 0 !important;
  max-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.home-main {
  padding-bottom: 56px;
}

#welcome-view.hidden,
#workspace-page.hidden,
#server-view.hidden,
#auth-screen.hidden,
#app.hidden,
.hidden {
  display: none !important;
}

.workspace-page {
  height: 100%;
  min-height: 0;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 28px;
  background:
    radial-gradient(circle at 58% 8%, #38165f66 0, transparent 28%),
    radial-gradient(circle at 85% 5%, #d6aa5218 0, transparent 24%),
    #050508;
}

.workspace-page-shell {
  max-width: 1240px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0 auto;
  padding-bottom: 56px;
}

.workspace-page-topbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(230px, 360px) auto;
  align-items: center;
  gap: 18px;
}

.workspace-title {
  display: grid;
  gap: 5px;
}

.workspace-title strong {
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.8px;
}

.workspace-title small {
  color: #a49cac;
  font-size: 13px;
}

.workspace-search {
  width: 100% !important;
}

.workspace-card {
  border: 1px solid #2f2940;
  border-radius: 18px;
  background: linear-gradient(145deg, #0f0f18, #07070b);
  box-shadow: 0 22px 70px #0008, inset 0 1px #ffffff0a;
}

.workspace-stack {
  display: grid;
  gap: 16px;
}

.page-tabs {
  padding: 14px;
}

.mini-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid #4b2d72;
  border-radius: 999px;
  color: #f2d990;
  background: #151019;
  font-size: 11px;
  font-weight: 900;
}

.dm-workspace-layout {
  min-height: calc(100vh - 155px);
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 260px;
  overflow: hidden;
}

.dm-workspace-sidebar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #30291e;
  background: linear-gradient(180deg, #0d0d0e, #080809);
}

.dm-request-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid #30291e;
}

.dm-request-card input {
  height: 42px;
  border: 1px solid #3c3222;
  border-radius: 12px;
  outline: 0;
  padding: 0 12px;
  background: #09090a;
}

.dm-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
  padding: 14px;
}

.dm-list-row {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #252118;
  border-radius: 15px;
  color: #f7eedc;
  background: linear-gradient(135deg, #151516, #0d0d0e);
  text-align: left;
}

.dm-list-row:hover,
.dm-list-row.active {
  border-color: #8c6b32;
  background: linear-gradient(135deg, #2a2115, #14110c);
  box-shadow: inset 3px 0 #d6aa52;
}

.dm-list-row .avatar {
  width: 42px;
  height: 42px;
}

.dm-list-row div {
  min-width: 0;
}

.dm-list-row strong,
.dm-list-row small,
.dm-list-row p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-list-row small,
.dm-list-row p {
  color: #a99d88;
  font-size: 11px;
}

.dm-list-row p {
  margin: 4px 0 0;
  white-space: nowrap;
}

.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #33d47a;
  box-shadow: 0 0 10px #33d47a66;
}

.dm-workspace-chat {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 74% 0, #261842, transparent 35%), #09090a;
}

.dm-workspace-chat > header {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid #30291e;
  background: #0d0d0e;
}

.dm-workspace-chat > header > div {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}

.dm-workspace-chat.empty {
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: #a99d88;
  text-align: center;
}

.dm-workspace-chat.empty span {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border: 1px solid #4a3920;
  border-radius: 26px;
  color: #f0d185;
  background: #111113;
  font-size: 34px;
}

.dm-info-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 24px 18px;
  border-left: 1px solid #30291e;
  background: linear-gradient(180deg, #0d0c13, #080809);
  text-align: center;
}

.dm-info-panel p {
  color: #a99d88;
  font-size: 12px;
  line-height: 1.5;
}

.dm-info-panel.muted {
  align-items: flex-start;
  text-align: left;
}

.inline-empty {
  align-self: center;
  margin: auto;
  padding: 18px;
  color: #a99d88;
  background: transparent !important;
}

.stream-page-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
}

.stream-card {
  width: 100%;
  color: inherit;
  text-align: left;
}

.stream-card:hover {
  border-color: #6d552e;
  transform: translateY(-1px);
}

.stream-page-card {
  width: 100%;
  text-align: left;
}

.stream-viewer-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 16px;
}

.stream-watch-main,
.stream-watch-side {
  padding: 16px;
}

.stream-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.stream-host-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.stream-host-card > div,
.stream-host-card strong,
.stream-host-card small {
  min-width: 0;
}

.stream-host-card > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stream-host-card strong,
.stream-host-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-host-card small {
  color: #a99d88;
  font-size: 11px;
}

.viewer-count-pill {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid #4d3c23;
  border-radius: 999px;
  color: #ffe7a4;
  background: #21180b;
  font-size: 11px;
  font-weight: 900;
}

.stream-player-card {
  position: relative;
  min-height: min(58vh, 520px);
  overflow: hidden;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 34px;
  border: 1px solid #433521;
  border-radius: 22px;
  background:
    linear-gradient(180deg, #00000024, #000000d9),
    radial-gradient(circle at 50% 32%, #7c35ff55, transparent 28%),
    radial-gradient(circle at 66% 58%, #d6aa5240, transparent 34%),
    #050506;
  box-shadow: inset 0 1px #ffffff12, 0 30px 90px #000c;
  text-align: center;
}

.stream-player-card::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ffffff08 0 1px, transparent 1px 16px);
  opacity: .16;
  content: "";
}

.stream-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #020203;
  transform: none !important;
}

.stream-video.hidden {
  display: none;
}

.stream-local-video {
  object-fit: contain;
}

.stream-remote-video {
  object-fit: contain;
}

.stream-player-placeholder {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 10px;
}

.stream-player-placeholder.hidden {
  display: none;
}

.stream-player-card img,
.stream-player-card strong,
.stream-player-card small,
.stream-live-badge {
  position: relative;
  z-index: 2;
}

.stream-player-card img {
  width: min(260px, 54vw);
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 18px 38px #000);
}

.stream-player-card strong {
  color: #fff8e6;
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.05;
}

.stream-player-card small {
  max-width: 520px;
  color: #c4b69c;
  line-height: 1.6;
}

.stream-live-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ff4a52, #b81925);
  box-shadow: 0 12px 26px #0008;
  font-size: 10px;
  font-weight: 900;
}

.stream-viewer-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.stream-viewer-controls .secondary.active {
  border-color: #d6aa52;
  color: #0b0905;
  background: linear-gradient(135deg, #f0d185, #c18a32);
}

.stream-watch-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stream-watch-side h3 {
  margin: 0;
  color: #fff8e6;
  font-size: 18px;
}

.stream-info-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #30291e;
}

.stream-info-line span {
  color: #a99d88;
  font-size: 11px;
}

.stream-info-line strong {
  color: #f5f1e8;
  font-size: 12px;
  text-align: right;
}

.stream-participant-box {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid #30291e;
  border-radius: 16px;
  background: #0a0a0b;
}

.stream-participant-box > strong {
  color: #ffe7a4;
  font-size: 12px;
}

#stream-participant-list {
  display: grid;
  gap: 8px;
}

.stream-participant-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid #252019;
  border-radius: 13px;
  background: #111113;
}

.stream-participant-row.is-broadcaster {
  border-color: #6d552e;
  background: linear-gradient(135deg, #181208, #111113);
}

.stream-participant-row .avatar.small {
  width: 34px;
  height: 34px;
  font-size: 11px;
}

.stream-participant-row div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stream-participant-row strong,
.stream-participant-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-participant-row strong {
  color: #f5f1e8;
  font-size: 12px;
}

.stream-participant-row small {
  color: #a99d88;
  font-size: 10px;
}

.stream-participant-row i {
  color: #d6aa52;
  font-style: normal;
  font-size: 12px;
}

.stream-chat-preview {
  margin-top: auto;
  padding: 14px;
  border: 1px solid #34291a;
  border-radius: 16px;
  background: linear-gradient(145deg, #15110d, #0a0a0c);
}

.stream-chat-preview strong {
  color: #ffe7a4;
}

.stream-chat-preview p {
  margin: 8px 0 0;
  color: #a99d88;
  font-size: 12px;
  line-height: 1.5;
}

.event-create-card {
  padding: 16px;
}

.event-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.event-form-grid .wide {
  grid-column: 1 / -1;
}

.event-form-grid input,
.event-form-grid select,
.event-form-grid textarea {
  width: 100%;
  border: 1px solid #3c3222;
  border-radius: 12px;
  outline: 0;
  padding: 11px 12px;
  color: #fff;
  background: #09090a;
}

.event-page-list,
.server-directory-list {
  display: grid;
  gap: 10px;
}

.event-page-row,
.server-directory-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #2f2940;
  border-radius: 16px;
  background: linear-gradient(145deg, #101018, #08080b);
}

.event-page-row b {
  min-height: 58px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #171006;
  background: linear-gradient(135deg, #f0d185, #c69234);
}

.event-page-row p {
  margin: 5px 0 0;
  color: #a99d88;
}

.event-page-row small,
.server-directory-row small {
  color: #a99d88;
}

.server-directory-row {
  grid-template-columns: 52px minmax(0, 1fr) auto;
}

.settings-page-layout {
  min-height: calc(100vh - 155px);
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  overflow: hidden;
}

.settings-page-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-right: 1px solid #30291e;
  background: linear-gradient(180deg, #0c0c10, #080809);
}

.settings-page-nav button {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  color: #a99d88;
  background: transparent;
  text-align: left;
  font-weight: 900;
}

.settings-page-nav button:hover,
.settings-page-nav button.active {
  color: #ffe7a4;
  background: #241e14;
}

.settings-page-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 26px;
}

.security-status-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.settings-page-panel h4 { margin: 22px 0 10px; color: var(--muted); }

.settings-page-panel h3 {
  margin: 0;
  color: #fff2d2;
  font-size: 26px;
}

.settings-page-panel p {
  max-width: 680px;
  margin: 0;
  color: #a99d88;
  line-height: 1.55;
}

.profile-mini-card,
.settings-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  padding: 16px;
  border: 1px solid #30291e;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, #3a2b12, transparent 42%), #0a0a0b;
}

.profile-mini-card > div {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 4px;
}

.settings-info-row {
  justify-content: space-between;
}

.appearance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
}

.appearance-grid button {
  min-height: 96px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px solid #2f2940;
  border-radius: 16px;
  color: #cfc6da;
  background: linear-gradient(145deg, #12111b, #0a0a0e);
}

.appearance-grid button.active,
.appearance-grid button:hover {
  border-color: #d6aa52;
  color: #ffe7a4;
  box-shadow: 0 0 0 1px #d6aa5244, 0 16px 40px #0006;
}

.appearance-grid span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: radial-gradient(circle, #4f2490, #170b2d);
}

@media (max-width: 1180px) {
  .workspace-page-topbar {
    grid-template-columns: 1fr auto;
  }

  .workspace-search {
    grid-column: 1 / -1;
    order: 3;
  }

  .dm-workspace-layout {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .stream-viewer-layout {
    grid-template-columns: 1fr;
  }

  .dm-info-panel {
    display: none;
  }
}

@media (max-width: 760px) {
  .workspace-page {
    height: calc(100vh - 60px);
    padding: 16px;
  }

  .workspace-page-topbar,
  .dm-workspace-layout,
  .settings-page-layout {
    grid-template-columns: 1fr;
  }

  .workspace-page-topbar .home-top-actions {
    justify-content: flex-start;
  }

  .dm-workspace-layout,
  .settings-page-layout {
    min-height: auto;
  }

  .dm-workspace-sidebar {
    min-height: 320px;
    border-right: 0;
    border-bottom: 1px solid #30291e;
  }

  .dm-workspace-chat {
    min-height: 440px;
  }

  .stream-viewer-header,
  .stream-viewer-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .stream-player-card {
    min-height: 360px;
    padding: 28px 18px;
  }

  .event-form-grid,
  .appearance-grid {
    grid-template-columns: 1fr;
  }

  .event-page-row,
  .server-directory-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .settings-page-nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #30291e;
  }

  .settings-page-nav button {
    min-width: max-content;
  }
}

/* Separate friends directory, persistent inbox, and compact notifications. */
.friend-directory { padding: 24px; max-width: 1120px; margin: 20px auto; }
.friend-directory h2 { font-size: 16px; margin: 28px 0 12px; }
.friend-card { display:flex; align-items:center; gap:14px; padding:16px; border-bottom:1px solid #353029; }
.friend-card > div:first-of-type { flex:1; min-width:0; }
.friend-card small { display:block; color:#ada698; margin-top:5px; }
.friend-actions { display:flex; flex-wrap:wrap; gap:8px; }
.inbox-layout { grid-template-columns:300px minmax(0,1fr); }
.inbox-search { display:block; padding:16px; color:#aaa; font-size:12px; }
.inbox-search input { display:block; width:100%; margin-top:8px; }
.inbox-layout .dm-list-row { width:100%; text-align:left; }
.inbox-layout .dm-list-row > div { min-width:0; flex:1; }
.inbox-layout .dm-list-row small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; max-width:180px; }
.inbox-layout .dm-workspace-chat { min-width:0; min-height:520px; }
.inbox-layout .dm-workspace-chat header > div { flex:1; }
.notification-popover { position:fixed; z-index:1100; top:78px; right:24px; width:350px; max-height:min(550px,75vh); background:#1c201e; border:1px solid #49473a; border-radius:16px; box-shadow:0 18px 60px #0008; color:#eee; overflow:hidden; }
.notification-popover[hidden] { display:none; }
.notification-popover header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #34382f; }
.notification-popover-list { max-height:440px; overflow:auto; padding:10px; }
.notification-popover .notification-item { display:block; width:100%; text-align:left; padding:14px; background:transparent; color:inherit; border:0; border-radius:8px; }
.notification-popover .notification-item:hover { background:#30382b; }
.notification-popover small { display:block; color:#aeb5a3; margin-top:6px; overflow-wrap:anywhere; }
@media(max-width:760px) { .inbox-layout { grid-template-columns:1fr; } .inbox-layout .dm-workspace-sidebar { max-height:280px; overflow:auto; } .friend-card { flex-wrap:wrap; } .friend-actions { width:100%; } .notification-popover { right:12px; top:64px; width:min(350px,calc(100vw - 24px)); } .inbox-layout .dm-workspace-chat header { flex-wrap:wrap; } }
.inbox-search input,.friend-directory input { background:#12151a; color:#eee; border:1px solid #393b42; padding:12px; border-radius:10px; }
.inbox-layout .dm-list-row[hidden] { display:none; }
.friend-action-dialog { max-width:460px; }
.friend-action-dialog label { display:block; margin:20px 0 12px; }
.friend-action-dialog input { display:block; width:100%; margin-top:10px; background:#13161a; color:#eee; border:1px solid #4a4435; border-radius:10px; padding:12px; }
.contact-dialog-help { color:#a8a399; font-size:13px; margin-bottom:20px; }

/* DM composer and protected media */
.dm-rich-composer{margin:12px 16px 16px;padding:12px;border:1px solid #343b58;border-radius:18px;background:#151b30;box-shadow:0 8px 24px #0002}
.dm-rich-composer textarea{display:block;width:100%;min-height:62px;max-height:180px;resize:vertical;border:0;background:transparent;color:#f3f5ff;font:inherit;padding:8px;outline-offset:2px}
.dm-composer-tools{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding-top:8px;border-top:1px solid #ffffff12}
.dm-composer-tools button,.dm-composer-emojis button,.dm-pending-media button{border:1px solid #ffffff18;border-radius:10px;padding:8px 11px;background:#222a43;color:#e9edff;cursor:pointer}
.dm-composer-tools [data-send]{margin-left:auto;background:linear-gradient(120deg,#6c5ce7,#9369ee)}
.dm-enter-hint{font-size:11px;color:#929cba}.dm-composer-status{margin:8px 4px 0;font-size:12px;color:#c3caff;min-height:16px}
.dm-pending-media{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;padding:10px;background:#242c46;border-radius:12px}.dm-pending-media img,.dm-pending-media video{max-width:220px;max-height:160px;border-radius:10px}.dm-pending-media span{font-size:12px;overflow-wrap:anywhere}
.dm-photo,.dm-message video{display:block;max-width:min(320px,100%);max-height:300px;border-radius:12px}.dm-message audio{display:block;max-width:100%;width:280px}.dm-download{display:block;font-size:11px;color:#bac6ff;margin:7px 0;overflow-wrap:anywhere}.dm-message-text{white-space:pre-wrap;margin:4px 0;overflow-wrap:anywhere}
.dm-camera-dialog{width:min(650px,92vw);background:#151b30;color:#f5f6ff;border:1px solid #525d83;border-radius:20px;padding:20px}.dm-camera-dialog::backdrop{background:#050914d9}.dm-camera-dialog header{display:flex;justify-content:space-between;align-items:center}.dm-camera-dialog video{width:100%;max-height:60vh;background:#060913;border-radius:12px;margin-top:14px}.dm-camera-dialog button{padding:10px 16px;border-radius:10px;margin:4px;border:1px solid #5c658d;background:#333b62;color:white;cursor:pointer}
.dm-rich-composer [hidden]{display:none!important}.dm-camera-dialog [hidden]{display:none!important}.dm-message-list{overflow-anchor:auto}.dm-composer-emojis{padding-top:10px}
@media(max-width:650px){.dm-enter-hint{display:none}.dm-rich-composer{margin:8px;padding:9px}.dm-composer-tools button{padding:8px}.dm-message audio{width:230px}}
#workspace-page-shell:has(.inbox-layout){padding-bottom:0;gap:14px}
.inbox-layout{height:calc(100dvh - 132px);min-height:480px}
.inbox-layout .dm-workspace-chat{min-height:0;overflow:hidden}
.inbox-layout .dm-workspace-chat>header,.inbox-layout .dm-rich-composer{flex-shrink:0}
.inbox-layout .dm-message-list{flex:1;min-height:0!important;overflow-y:auto}
.inbox-layout .dm-workspace-sidebar{overflow-y:auto}
.dm-rich-composer{border-color:#504023;background:#14120e}.dm-composer-tools button,.dm-composer-emojis button,.dm-pending-media button{background:#242018;color:#f1dfb3;border-color:#514126}.dm-composer-tools [data-send]{background:linear-gradient(120deg,#e9c775,#bc8b35);color:#21180b}.dm-composer-status{color:#d8bf88}.dm-pending-media{background:#242018}.dm-download{color:inherit}
@media(max-width:760px){.inbox-layout{height:auto;min-height:0}.inbox-layout .dm-workspace-sidebar{max-height:180px}.inbox-layout .dm-workspace-chat{height:calc(100dvh - 150px);min-height:420px}}
.dm-message .dm-photo{width:320px;height:200px;object-fit:contain;background:#0002}.dm-message video{width:320px;aspect-ratio:16/9;object-fit:contain;background:#09090a}
/* Reference DM: glass, gold, compact actions and floating panels */
.inbox-layout .dm-workspace-chat{position:relative;background:radial-gradient(ellipse at 24% 72%,#11237e66,transparent 45%),radial-gradient(ellipse at 55% 31%,#851b2855,transparent 42%),radial-gradient(ellipse at 85% 5%,#75601833,transparent 40%),#080b12}
.inbox-layout .dm-workspace-chat>header{background:#0c0e11cc;backdrop-filter:blur(18px);padding-bottom:12px;min-height:78px;border-color:#79602466}
.dm-peer-presence{position:absolute;top:50px;left:86px;z-index:1;font-size:11px;color:#9b9faa}.dm-peer-presence.online{color:#22d174}
.inbox-layout .dm-message{border:1px solid #777e9366;background:linear-gradient(135deg,#2b2e39dd,#191b25ee);color:#f2f3ff;border-radius:17px;box-shadow:0 6px 18px #0002;max-width:80%}.inbox-layout .dm-message.mine{background:linear-gradient(120deg,#ffe94d,#ffd02e 60%,#f1b62a);border-color:#ffe678;color:#151109;box-shadow:0 5px 20px #ffcf2412}
.dm-message-meta{display:flex!important;align-items:center;justify-content:space-between;gap:20px;opacity:.8;font-size:10px!important}.dm-message-meta [data-receipt]{font-size:14px;letter-spacing:-5px;padding-right:4px}
.dm-reference-composer{position:relative;border:1px solid #52607777;background:linear-gradient(135deg,#10172bcc,#0a0e16ee);border-radius:19px;padding:14px;backdrop-filter:blur(20px);margin:10px 14px 14px;box-shadow:0 8px 25px #0004}
.dm-compose-row{display:flex;align-items:center;gap:12px}.dm-compose-input{flex:1;min-width:0;border:1px solid #ffe035;border-radius:14px;background:#0b1018aa;box-shadow:inset 0 0 14px #ffda2310}.dm-compose-input textarea{min-height:52px;max-height:130px;padding:13px 15px;resize:none;outline:none;line-height:1.45}.dm-compose-input:focus-within{box-shadow:0 0 0 2px #ffdc2422}
.dm-reference-composer svg{width:22px;height:22px;flex-shrink:0}.dm-composer-tools{border:0;padding:0 12px 9px;gap:9px}.dm-composer-tools button{width:45px;height:41px;padding:9px;display:flex;justify-content:center;align-items:center;border-radius:11px;background:linear-gradient(145deg,#24314677,#121822);color:#f4f6ff;border-color:#44648199}.dm-composer-tools [data-camera]{border-color:#a6508599}.dm-composer-tools [data-mic]{border-color:#a64b4b99;touch-action:none;user-select:none}.dm-composer-tools [data-gif]{border-color:#9c4cc399;font-weight:800;font-size:12px}.dm-composer-tools [data-emoji]{border-color:#539b8899}.dm-composer-tools [data-stop],.dm-composer-tools [data-cancel]{width:auto;color:#ffafaf}
.dm-add-wrap{position:relative}.dm-reference-composer [data-add]{width:52px;height:56px;border:1px solid #ffda36;border-radius:18px;background:linear-gradient(130deg,#4b3913,#18150d);color:white;box-shadow:0 0 18px #ffd12233;display:grid;place-items:center}.dm-reference-composer [data-add] svg{width:28px;height:28px}
.dm-reference-composer [data-send]{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 18px;min-height:54px;border:1px solid #ffe971;border-radius:14px;background:linear-gradient(130deg,#ffe741,#ffc51e);color:#191306;font-weight:800;box-shadow:0 0 16px #ffdc231f}.dm-reference-composer [data-send] svg{width:19px;height:19px}
.dm-compose-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}.dm-compose-footer .dm-composer-status{margin:0;color:#b5bfd3}.dm-enter-hint{color:#a6b0c4;white-space:nowrap}
.dm-reference-composer .dm-pending-media{position:relative;flex-wrap:nowrap;background:linear-gradient(120deg,#1b2944bb,#141827);border:1px solid #158fe2;border-radius:14px;padding:12px;box-shadow:inset 0 0 18px #187eff15,0 0 12px #1479d522;margin-bottom:12px}.dm-pending-media img,.dm-pending-media video{width:145px;height:85px;object-fit:contain;border-radius:12px;background:linear-gradient(120deg,#175efb,#d72ce9)}.dm-pending-media span{flex:1;min-width:0;display:grid;gap:6px}.dm-pending-media strong{font-size:14px;overflow-wrap:anywhere}.dm-pending-media small{font-size:12px;color:#aab5ce}.dm-pending-media button{border-radius:50%;width:35px;height:35px;padding:0;font-size:24px;background:#1c2434}.dm-file-tile{width:90px;height:80px;display:grid;place-items:center;background:#223855;border-radius:10px}.dm-file-tile svg{width:34px;height:34px}
.dm-add-menu,.dm-media-picker{position:absolute;bottom:calc(100% + 12px);z-index:30;border:1px solid #88682f;border-radius:17px;background:linear-gradient(130deg,#182033,#0c111b);box-shadow:0 16px 50px #000a;backdrop-filter:blur(24px);padding:12px}.dm-add-menu{left:0;width:240px;display:grid;gap:7px}.dm-add-menu strong{padding:6px;color:#ffe17c}.dm-add-menu button{display:flex;align-items:center;gap:12px;text-align:left;padding:13px 10px;background:#ffffff08;color:white;border:1px solid #ffffff12;border-radius:10px;cursor:pointer}.dm-media-picker{left:75px;width:min(390px,calc(100% - 90px));max-height:420px;overflow:auto}.dm-media-picker header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.dm-media-picker button{background:#ffffff07;border:1px solid #ffffff14;color:#e8ecf6;border-radius:9px;padding:8px;cursor:pointer}.dm-media-picker button.active{color:#ffe66b;background:#80671c44;border-color:#dab642}.dm-media-picker input{width:100%;padding:11px;margin-bottom:10px;border:1px solid #53637e;border-radius:10px;background:#111925;color:white}.dm-picker-categories{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}.dm-picker-categories button{font-size:10px;padding:6px}.dm-picker-categories small{color:#aab7cd}.dm-picker-results{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:250px;overflow:auto}.dm-picker-results img{width:100%;border-radius:8px}.dm-picker-results.emoji-grid{grid-template-columns:repeat(6,1fr);gap:4px}.emoji-grid button{font-size:25px;padding:6px;border:0}.dm-picker-results p{grid-column:1/-1;color:#aebad0;font-size:13px}
.is-recording .dm-compose-input{border-color:#f35e72;box-shadow:0 0 22px #ff42552a}.is-recording [data-mic]{background:#cb294b;border-color:#ff789a;animation:dm-record-pulse 1s infinite}.is-recording .dm-composer-status{color:#ffb1bf}@keyframes dm-record-pulse{50%{box-shadow:0 0 0 6px #ed385b33}}
@media(max-width:650px){.dm-reference-composer{padding:9px;margin:7px}.dm-compose-row{gap:6px;flex-wrap:wrap}.dm-compose-input{order:2;flex-basis:calc(100% - 50px)}.dm-add-wrap{order:1}.dm-reference-composer [data-add]{width:42px;height:50px}.dm-reference-composer [data-send]{order:3;margin-left:auto;min-height:40px;padding:10px 15px}.dm-compose-footer{flex-wrap:wrap}.dm-media-picker{left:10px;width:calc(100% - 20px)}.dm-pending-media img,.dm-pending-media video{width:90px;height:70px}.dm-composer-tools{gap:5px;padding:0 6px 7px}.dm-composer-tools button{width:35px;height:35px;padding:7px}.dm-picker-results.emoji-grid{grid-template-columns:repeat(5,1fr)}}
@media(prefers-reduced-motion:reduce){.is-recording [data-mic]{animation:none}}
.inbox-layout .dm-workspace-chat{background:radial-gradient(ellipse at 20% 78%,#102d9555,transparent 48%),radial-gradient(ellipse at 54% 32%,#a51b333d,transparent 44%),radial-gradient(ellipse at 90% 2%,#94772035,transparent 43%),#080b12!important}
.inbox-layout .dm-message.mine{background:linear-gradient(120deg,#ffe94d,#ffd02e 60%,#f1b62a)!important;color:#151109!important;border-color:#ffe678!important}
.dm-reference-composer [data-send]{background:linear-gradient(130deg,#ffe741,#ffc51e)!important;color:#191306!important}
.dm-record-panel{display:flex;align-items:center;gap:12px;padding:12px 10px;margin-top:10px;border:1px solid #e3577166;border-radius:14px;background:#8c153622}.dm-record-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f3345b;color:white}.dm-record-bars{display:flex;align-items:center;height:44px;gap:3px;flex:1}.dm-record-bars i{display:block;flex:1;max-width:8px;height:5px;background:#ec4567;border-radius:5px;transition:height .08s}.dm-record-panel strong{color:#ffadc3;font-variant-numeric:tabular-nums}
.inbox-layout .dm-message-list{background:transparent!important}

.yaas-home{grid-template-columns:minmax(0,1fr)!important}
.home-topbar{justify-content:flex-end}
.workspace-page-topbar{grid-template-columns:minmax(0,1fr) auto}
/* Keep server navigation fixed while the chat scrolls. */
.app {height:100dvh!important;min-height:0!important;overflow:hidden!important;}
.workspace,.server-view,.content-panel,.message-view,.channel-panel,.member-panel {min-height:0!important;}
.server-view {height:100%!important;overflow:hidden!important;grid-template-rows:minmax(0,1fr)!important;}
.content-panel {height:100%!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;}
.content-panel>header,.channel-panel>header,.member-panel>header {flex-shrink:0;}
.message-view {flex:1!important;display:flex;flex-direction:column;height:0;overflow:hidden!important;}
.message-view.hidden {display:none!important;}
.message-list {flex:1!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain;}
.message-form {flex-shrink:0!important;}
.channel-panel {height:100%!important;overflow:hidden!important;}
.channel-list,.member-list {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.member-list {display:block!important;}
.member-role-section {margin-bottom:16px;}
.member-role-section>strong {display:block;margin:10px 0;font-size:12px;}
.member-access-note {display:block;padding:8px 0;color:var(--muted);}
.role-chip button {background:transparent;color:inherit;padding:0 4px;cursor:pointer;}
@media(min-width:1051px) {.member-panel {display:flex!important;position:relative!important;transform:none!important;height:100dvh!important;}}
@media(max-width:720px) {.server-view {height:calc(100% - 58px)!important;}}

/* Keep hidden app content hidden even when mobile layout sets display:block. */
.app.hidden {display:none!important;}
#inbox-back {display:none;}
.inbox-layout .dm-message {flex-shrink:0;}
.event-page-row > div {min-width:0;overflow-wrap:anywhere;}
.event-page-row strong,.event-page-row small {display:block;}
@media(max-width:760px) {
  .inbox-layout .dm-workspace-chat>header,.dm-add-menu,.dm-media-picker {backdrop-filter:none;}
  .inbox-layout .dm-message {box-shadow:none;}
  .inbox-layout.has-active-conversation .dm-workspace-sidebar {display:none;}
  #workspace-page-shell:has(.inbox-layout.has-active-conversation) > .workspace-page-topbar {display:none;}
  .inbox-layout.has-active-conversation {height:calc(100dvh - 150px);min-height:0;}
  .inbox-layout.has-active-conversation .dm-workspace-chat {height:100%;min-height:0;}
  .inbox-layout.has-active-conversation #inbox-back {display:inline-flex;flex-shrink:0;min-height:40px;}
  .inbox-layout .dm-workspace-chat > header {gap:8px;padding:10px;}
  .inbox-layout .dm-workspace-chat > header > div {min-width:0;overflow-wrap:anywhere;}
  .dm-message {min-width:0;overflow-wrap:anywhere;}
  .dm-peer-presence {position:static;padding:4px 12px;flex-shrink:0;}
  .home-hero p {white-space:normal;overflow-wrap:anywhere;}
  .dm-pending-media {min-width:0;overflow-wrap:anywhere;}
}
@media(max-width:720px) {
  .channel-panel {height:calc(100dvh - 118px)!important;bottom:60px!important;}
}
@media(min-width:1051px) {
  .app:has(#server-view:not(.hidden)) {grid-template-columns:272px minmax(0,1fr) 250px!important;}
  .app:not(:has(#server-view:not(.hidden))) > .member-panel {display:none!important;}
  .app > .member-panel {width:auto!important;min-width:0;}
}