/* SCORD Design Bible implementation — authoritative visual layer.
   Loaded after legacy feature styles; keep behavior in app.js and visuals here. */

:root {
  --rail-width: 72px;
  --sidebar-width: 252px;
  --members-width: 278px;
  --scord-canvas: #050b18;
  --scord-surface-0: #081225;
  --scord-surface-1: rgba(14, 27, 52, .78);
  --scord-surface-2: rgba(22, 39, 70, .72);
  --scord-surface-hover: rgba(103, 95, 220, .13);
  --scord-border: rgba(139, 167, 226, .14);
  --scord-border-strong: rgba(129, 112, 255, .34);
  --scord-text-1: #f2f5ff;
  --scord-text-2: #a5b1cb;
  --scord-text-3: #71809f;
  --scord-accent: #7567ff;
  --scord-blue: #4f8cff;
  --scord-online: #35d49a;
  --scord-warning: #f4b84a;
  --scord-danger: #f0627e;
  --scord-panel-gradient: linear-gradient(145deg, rgba(17,31,58,.86), rgba(7,15,31,.94));
  --scord-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --scord-ease: cubic-bezier(.2,.8,.2,1);
}

#setup-overlay .auth-password-field {
  position: relative;
}

#setup-overlay .auth-password-field > input {
  width: 100%;
  padding-right: 52px !important;
}

#setup-overlay .auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  transform: translateY(-50%);
  place-items: center;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--scord-text-3);
  cursor: pointer;
}

#setup-overlay .auth-password-toggle:hover,
#setup-overlay .auth-password-toggle:focus-visible,
#setup-overlay .auth-password-toggle[aria-pressed="true"] {
  border-color: var(--scord-border);
  background: rgba(139, 167, 226, .09);
  color: var(--scord-text-1);
}

#setup-overlay .auth-password-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

html,
body {
  background: var(--scord-canvas) !important;
}

body {
  color: var(--scord-text-1);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html body #app.app {
  width: calc(100vw - 16px);
  height: calc(100dvh - 16px);
  margin: 8px;
  grid-template-columns: var(--rail-width) var(--sidebar-width) minmax(0, 1fr) !important;
  overflow: hidden;
  border: 1px solid rgba(139, 167, 226, .16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 74% 0%, rgba(63, 95, 210, .18), transparent 36%),
    radial-gradient(circle at 22% 100%, rgba(117, 103, 255, .12), transparent 35%),
    var(--scord-canvas) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035);
}

html body #app .server-rail {
  width: var(--rail-width) !important;
  padding: 16px 10px !important;
  gap: 10px !important;
  overflow-x: hidden !important;
  border: 0 !important;
  border-right: 1px solid var(--scord-border) !important;
  border-radius: 21px 0 0 21px;
  background: linear-gradient(180deg, rgba(7, 15, 32, .96), rgba(5, 11, 24, .9)) !important;
  backdrop-filter: blur(20px) saturate(130%);
}

html body #app .server-rail::-webkit-scrollbar { width: 0; }
html body #app .rail-divider { width: 34px; height: 1px; background: var(--scord-border); }

html body #app .rail-icon,
html body #app .server-rail-item {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  border: 1px solid rgba(139, 167, 226, .13) !important;
  border-radius: 15px !important;
  background: rgba(18, 31, 56, .74) !important;
  color: var(--scord-text-2) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
  transition: border-color 180ms var(--scord-ease), background 180ms var(--scord-ease), color 180ms var(--scord-ease) !important;
}

html body #app .rail-icon:hover,
html body #app .server-rail-item:hover {
  border-color: rgba(117,103,255,.42) !important;
  background: rgba(43, 53, 99, .76) !important;
  color: white !important;
  transform: none !important;
}

html body #app .rail-icon.active,
html body #app .server-rail-item.active {
  border-color: rgba(129,112,255,.58) !important;
  background: linear-gradient(135deg, rgba(117,103,255,.92), rgba(79,140,255,.88)) !important;
  color: white !important;
  box-shadow: 0 12px 28px rgba(79, 93, 220, .25), inset 0 1px rgba(255,255,255,.18) !important;
}

html body #app .rail-icon.active::before,
html body #app .rail-icon.active::after { display: none !important; }

html body #app .channel-sidebar {
  width: var(--sidebar-width) !important;
  flex: 0 0 var(--sidebar-width) !important;
  min-width: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--scord-border) !important;
  background:
    linear-gradient(180deg, rgba(14, 26, 49, .82), rgba(8, 17, 34, .94)) !important;
  backdrop-filter: blur(20px) saturate(128%);
}

html body #app .sidebar-header {
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 14px 0 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--scord-border) !important;
  background: rgba(13, 25, 48, .52) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

html body #app #sidebar-server-name {
  max-width: 118px;
  overflow: hidden;
  color: var(--scord-text-1) !important;
  font: 700 14px/1 Space Grotesk, sans-serif !important;
  letter-spacing: .035em !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #app .sidebar-header-actions { gap: 4px; }
html body #app .sidebar-header-btn,
html body #app .header-btn {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--scord-text-2) !important;
}

html body #app .sidebar-header-btn:hover,
html body #app .header-btn:hover,
html body #app .sidebar-header-btn:focus-visible,
html body #app .header-btn:focus-visible {
  border-color: var(--scord-border) !important;
  background: rgba(139, 167, 226, .08) !important;
  color: white !important;
}

html body #app .channel-list {
  padding: 12px 8px 18px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(139,167,226,.28) transparent;
}

html body #app .channel-category {
  min-height: 30px;
  padding: 16px 10px 6px !important;
  color: var(--scord-text-3) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}

html body #app #channel-list .channel-item,
html body #app .dm-sidebar-item {
  min-height: 44px !important;
  margin: 2px 4px !important;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--scord-text-2) !important;
  transition: background 160ms var(--scord-ease), border-color 160ms var(--scord-ease), color 160ms var(--scord-ease) !important;
}

html body #app #channel-list .channel-item:hover,
html body #app .dm-sidebar-item:hover {
  border-color: rgba(139,167,226,.11) !important;
  background: rgba(139,167,226,.055) !important;
  color: var(--scord-text-1) !important;
}

html body #app #channel-list .channel-item.active,
html body #app .dm-sidebar-item.active {
  border-color: rgba(129,112,255,.42) !important;
  background: linear-gradient(110deg, rgba(117,103,255,.22), rgba(79,140,255,.09)) !important;
  color: white !important;
  box-shadow: inset 2px 0 var(--scord-accent) !important;
}

html body #app .channel-item .ch-icon { width: 20px; color: #8393b3; font-size: 16px !important; text-align: center; }
html body #app .channel-item .ch-name { font-size: 13px !important; font-weight: 600 !important; }

html body #app .user-bar {
  height: 72px !important;
  min-height: 72px !important;
  margin: 8px !important;
  padding: 9px !important;
  gap: 9px !important;
  border: 1px solid rgba(139,167,226,.13) !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, rgba(24,43,76,.78), rgba(13,26,50,.86)) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.045);
}

html body #app .user-bar-avatar {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 50% !important;
}

html body #app .user-bar-name { color: var(--scord-text-1) !important; font-size: 12px !important; font-weight: 750 !important; }
html body #app .status-text { color: var(--scord-text-2) !important; font-size: 10px !important; }
html body #app .status-dot { background: var(--scord-online) !important; }
html body #app .user-bar-controls { grid-template-columns: repeat(3, 40px) !important; gap: 4px !important; }

html body #app .user-bar .user-ctrl-btn {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid rgba(139,167,226,.1) !important;
  border-radius: 10px !important;
  background: rgba(139,167,226,.055) !important;
  color: var(--scord-text-2) !important;
}

html body #app .user-bar .user-ctrl-btn:hover { border-color: rgba(129,112,255,.32) !important; background: rgba(117,103,255,.13) !important; color: white !important; }

html body #app .main-content {
  min-width: 0;
  padding: 12px !important;
  background:
    radial-gradient(circle at 64% 12%, rgba(64,96,205,.11), transparent 30%),
    radial-gradient(circle at 16% 88%, rgba(117,103,255,.07), transparent 32%),
    transparent !important;
}

html body #app .chat-view,
html body #app .voice-view,
html body #app .home-view {
  min-width: 0;
  min-height: 0;
  overflow: hidden !important;
  border: 1px solid var(--scord-border) !important;
  border-radius: 18px !important;
  background: var(--scord-panel-gradient) !important;
  box-shadow: var(--scord-shadow), inset 0 1px rgba(255,255,255,.03) !important;
}

html body #app .chat-header,
html body #app .voice-header {
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--scord-border) !important;
  background: rgba(15, 29, 55, .66) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
}

html body #app .chat-header .header-left { gap: 9px !important; }
html body #app .channel-hash { color: #7f90b1 !important; font-size: 22px !important; }
html body #app #active-channel-name { color: var(--scord-text-1) !important; font: 700 16px/1 Space Grotesk, sans-serif !important; }
html body #app .chat-header-right { gap: 5px !important; }
html body #app .peer-badge { min-height: 28px; display: inline-flex; align-items: center; padding: 0 9px !important; border: 1px solid var(--scord-border); background: rgba(139,167,226,.06) !important; color: var(--scord-text-2) !important; }

html body #app .chat-body {
  min-height: 0;
  gap: 0;
  padding: 0 !important;
  background: rgba(4,10,22,.2) !important;
}

html body #app .messages-column { min-width: 0; background: transparent !important; }
html body #app .members-split-handle { width: 1px !important; border: 0 !important; background: var(--scord-border) !important; }

html body #app .messages-area {
  padding: 24px clamp(22px, 3.2vw, 54px) 18px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(139,167,226,.3) transparent;
}

html body #app .messages-welcome {
  max-width: 520px;
  margin: 20px 0 30px !important;
  padding: 18px 0 22px !important;
  border-bottom: 1px solid rgba(139,167,226,.1);
  text-align: left !important;
}

html body #app .messages-welcome-icon {
  display: grid;
  width: 48px !important;
  height: 48px !important;
  place-items: center;
  border: 1px solid rgba(129,112,255,.34);
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(117,103,255,.34), rgba(79,140,255,.16)) !important;
  color: #c9d4ff;
  box-shadow: none !important;
}

html body #app .messages-welcome h3 { margin-top: 14px !important; color: var(--scord-text-1) !important; font: 700 20px/1.2 Space Grotesk, sans-serif; }
html body #app .messages-welcome p { color: var(--scord-text-2) !important; font-size: 13px !important; }

/* Discord-like timeline: no opaque message bubbles and no self alignment split. */
html body #app .message.msg-row,
html body #app .message.msg-row.msg-row--self,
html body #app .message.msg-row.msg-row--other {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  transition: background 140ms var(--scord-ease) !important;
}

html body #app .message.msg-row:hover { background: rgba(139,167,226,.045) !important; }

html body #app .msg-row-inner,
html body #app .msg-row--self .msg-row-inner {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

html body #app .msg-avatar {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  margin-top: 2px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50% !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.2);
}

html body #app .msg-stack { min-width: 0; flex: 1; }
html body #app .msg-bubble,
html body #app .msg-bubble--self,
html body #app .msg-bubble--other,
html body #app .msg-row--self .msg-bubble,
html body #app .message.msg-row .msg-bubble,
html body #app .message.msg-row.msg-row--self .msg-bubble {
  width: fit-content !important;
  max-width: min(780px, 100%) !important;
  margin: 0 !important;
  padding: 0 0 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--scord-text-1) !important;
}

html body #app .msg-header { display: flex !important; align-items: baseline !important; gap: 8px !important; margin: 0 0 3px !important; }
html body #app .msg-author { color: #98b8ff !important; font-size: 13px !important; font-weight: 750 !important; }
html body #app .msg-author.is-you { color: #a99cff !important; }
html body #app .msg-time { color: var(--scord-text-3) !important; font-size: 10px !important; }
html body #app .msg-text { color: #dce4f7 !important; font-size: 14px !important; line-height: 1.55 !important; overflow-wrap: anywhere; }
html body #app .msg-row.grouped .msg-avatar { visibility: hidden; }

html body #app .typing-indicator { width: fit-content; margin: 0 0 0 22px !important; padding: 4px 9px !important; border: 1px solid var(--scord-border); border-radius: 999px; background: rgba(15,29,55,.78) !important; }

html body #app .chat-input-area {
  width: calc(100% - var(--members-width) - 1px);
  padding: 9px clamp(22px, 3.2vw, 54px) 18px !important;
  border: 0 !important;
  background: linear-gradient(180deg, transparent, rgba(5,11,24,.86) 34%) !important;
  backdrop-filter: none !important;
}

html body #app .chat-view:has(.members-panel.collapsed) .chat-input-area { width: 100%; }

html body #app .chat-input-wrapper {
  min-height: 52px;
  gap: 6px !important;
  padding: 6px 7px 6px 10px !important;
  border: 1px solid rgba(139,167,226,.16) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(28,44,75,.8), rgba(13,25,49,.88)) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.045) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
}

html body #app .chat-input-wrapper:focus-within { border-color: rgba(129,112,255,.46) !important; box-shadow: 0 0 0 3px rgba(117,103,255,.1), 0 16px 38px rgba(0,0,0,.26) !important; }
html body #app #chat-input { min-height: 40px !important; padding: 8px 10px !important; color: var(--scord-text-1) !important; font-size: 14px !important; }
html body #app #chat-input::placeholder { color: #71809f !important; }

html body #app .input-action-btn,
html body #app .input-send-btn {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #8fa0c2 !important;
}

html body #app .input-action-btn:hover { border-color: var(--scord-border) !important; background: rgba(139,167,226,.08) !important; color: white !important; }
html body #app .input-send-btn { border-color: rgba(129,112,255,.34) !important; background: linear-gradient(135deg, var(--scord-accent), var(--scord-blue)) !important; color: white !important; box-shadow: 0 9px 20px rgba(79,100,230,.24); }
html body #app #gif-btn { width: 42px !important; min-width: 42px !important; font: 800 10px/1 Space Grotesk, sans-serif; letter-spacing: .06em; }

/* Directory panel mirrors the ImageGen Dizin column. */
html body #app .members-panel {
  width: var(--members-width) !important;
  min-width: var(--members-width) !important;
  flex: 0 0 var(--members-width) !important;
  margin: 12px 12px 12px 10px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--scord-border) !important;
  border-radius: 16px !important;
  background: linear-gradient(160deg, rgba(18,34,63,.76), rgba(8,17,34,.9)) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.03);
}

html body #app .members-panel.collapsed { width: 0 !important; min-width: 0 !important; flex-basis: 0 !important; margin-inline: 0 !important; border: 0 !important; }

html body #app .members-panel-head { flex: 0 0 auto; padding: 18px 16px 12px; border-bottom: 1px solid rgba(139,167,226,.1); }
html body #app .members-panel-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
html body #app .members-panel-kicker { display: block; margin-bottom: 5px; color: #7f90b0; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
html body #app .members-panel-head h3 { margin: 0; color: var(--scord-text-1); font: 700 17px/1.1 Space Grotesk, sans-serif; }
html body #app .members-panel-head p { margin: 5px 0 12px; color: var(--scord-text-3); font-size: 11px; }
html body #app .members-panel-count { display: inline-grid; min-width: 26px; min-height: 26px; place-items: center; border: 1px solid rgba(129,112,255,.18); border-radius: 8px; background: rgba(117,103,255,.1); color: #b8aeff; font-size: 10px; font-weight: 800; }
html body #app .members-panel-search { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 11px; border: 1px solid rgba(139,167,226,.13); border-radius: 10px; background: rgba(5,12,26,.38); color: #7485a6; }
html body #app .members-panel-search:focus-within { border-color: rgba(129,112,255,.38); box-shadow: 0 0 0 3px rgba(117,103,255,.08); }
html body #app .members-panel-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--scord-text-1); font: inherit; font-size: 12px; }
html body #app .members-panel-search input::placeholder { color: #687897; }

html body #app #members-list {
  padding: 8px 9px 16px !important;
  scrollbar-color: rgba(117,103,255,.4) transparent !important;
  scrollbar-width: thin !important;
}

html body #app #members-list::-webkit-scrollbar { width: 7px; }
html body #app #members-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: linear-gradient(#6079b6,#7567ff); background-clip: padding-box; }

html body #app .members-panel .member-role-cat {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 28px;
  padding: 12px 7px 6px !important;
  background: linear-gradient(180deg, rgba(11,23,44,.98), rgba(11,23,44,.9));
  backdrop-filter: blur(12px);
  color: #7485a5 !important;
  font-size: 9px !important;
  letter-spacing: .13em !important;
}

html body #app .members-panel .member-item {
  min-height: 48px !important;
  margin: 2px 0 !important;
  padding: 7px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
}

html body #app .members-panel .member-item:hover { border-color: rgba(139,167,226,.12) !important; background: rgba(117,103,255,.09) !important; transform: none !important; }
html body #app .members-panel .member-avatar { width: 34px !important; height: 34px !important; flex-basis: 34px !important; border-radius: 50% !important; }
html body #app .members-panel .member-name { color: #d9e2f5 !important; font-size: 12px !important; }

/* Voice and modal surfaces share the same panel language. */
html body #app .voice-participants { gap: 12px !important; padding: 18px !important; background: transparent !important; }
html body #app .voice-participant-card { border: 1px solid var(--scord-border) !important; border-radius: 18px !important; background: linear-gradient(145deg, rgba(25,42,72,.76), rgba(10,20,39,.92)) !important; box-shadow: 0 18px 45px rgba(0,0,0,.2); }
html body #app .voice-participant-card.speaking { border-color: rgba(53,212,154,.7) !important; box-shadow: 0 0 0 3px rgba(53,212,154,.1), 0 18px 45px rgba(0,0,0,.22) !important; }
html body #app .voice-controls { width: fit-content; max-width: calc(100% - 32px); margin: 0 auto 16px; padding: 8px !important; border: 1px solid var(--scord-border) !important; border-radius: 16px !important; background: rgba(12,24,47,.84) !important; box-shadow: 0 18px 45px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
html body #app .voice-empty-state-icon { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(129,112,255,.3); border-radius: 15px; background: rgba(117,103,255,.13); color: #b8c8ff; }

html body .modal-backdrop { background: rgba(1,5,14,.58) !important; backdrop-filter: blur(8px) saturate(115%) !important; }
html body #modal.modal,
html body .modal-content {
  border: 1px solid rgba(139,167,226,.16) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(18,34,63,.97), rgba(7,15,31,.98)) !important;
  box-shadow: 0 32px 100px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.04) !important;
}

html body #app button:focus-visible,
html body #app input:focus-visible,
html body #app textarea:focus-visible,
html body .modal button:focus-visible,
html body .modal input:focus-visible {
  outline: none !important;
  border-color: var(--scord-border-strong) !important;
  box-shadow: 0 0 0 3px rgba(117,103,255,.18) !important;
}

/* Existing generated Friends page adopts the same shell instead of floating edge-to-edge. */
html body #app .scord-friends-directory { border-radius: 17px; background: var(--scord-panel-gradient) !important; }
html body #app .scord-friends-directory__topbar { min-height: 92px; padding: 20px 28px !important; background: rgba(15,29,55,.62) !important; }
html body #app .scord-friends-directory__layout { grid-template-columns: minmax(0,1fr) 278px !important; }
html body #app .scord-friends-directory__aside { margin: 12px; border: 1px solid var(--scord-border) !important; border-radius: 16px; background: linear-gradient(160deg, rgba(18,34,63,.72), rgba(8,17,34,.88)) !important; }

@media (max-width: 1180px) {
  :root { --sidebar-width: 232px; --members-width: 240px; }
  html body #app .chat-input-area { width: calc(100% - var(--members-width) - 1px); }
  html body #app .chat-header-right .connection-badge { display: none !important; }
}

@media (max-width: 980px) {
  html body #app .members-panel { position: absolute !important; inset: 76px 12px 78px auto; z-index: 50; width: min(300px, calc(100vw - 32px)) !important; min-width: 0 !important; flex-basis: auto !important; margin: 0 !important; box-shadow: 0 28px 80px rgba(0,0,0,.5); }
  html body #app .members-panel:not(.mobile-active) { visibility: hidden !important; pointer-events: none !important; }
  html body #app .members-panel.mobile-active { visibility: visible !important; pointer-events: auto !important; transform: none !important; }
  html body #app .members-panel.collapsed { display: none !important; }
  html body #app .chat-input-area { width: 100%; }
  html body #app .scord-friends-directory__layout { grid-template-columns: 1fr !important; }
  html body #app .scord-friends-directory__aside { display: none !important; }
}

@media (max-width: 768px) {
  html body #app.app { width: 100vw; height: 100dvh; margin: 0; grid-template-columns: 1fr !important; border: 0; border-radius: 0; }
  html body #app .main-content { padding: 0 !important; }
  html body #app .chat-view,
  html body #app .voice-view,
  html body #app .home-view { border: 0 !important; border-radius: 0 !important; }
  html body #app .server-rail { border-radius: 0; }
  html body #app .chat-header,
  html body #app .voice-header { padding-inline: 12px !important; }
  html body #app .messages-area { padding: 18px 10px 12px !important; }
  html body #app .message.msg-row { padding-inline: 5px !important; }
  html body #app .msg-avatar { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
  html body #app .chat-input-area { padding: 8px 10px calc(64px + env(safe-area-inset-bottom)) !important; }
  html body #app .chat-input-wrapper { gap: 2px !important; padding-inline: 5px !important; }
  html body #app #gif-btn,
  html body #app #translate-toggle-btn { display: none !important; }
  html body #app .input-action-btn,
  html body #app .input-send-btn,
  html body #app .sidebar-header-btn,
  html body #app .header-btn,
  html body #app .mobile-only-btn,
  html body #app .user-bar .user-ctrl-btn { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
  html body #app .scord-friends-directory__topbar { padding: 18px 16px !important; }
  html body #app .mobile-tabbar button > span { display: grid; width: 22px; height: 22px; place-items: center; }
  html body #app .mobile-tabbar button > span svg { width: 20px; height: 20px; }
}

/* ========================================================================== */
/* 2026-08 flawless pass — one geometry system, one scroll owner per surface. */
/* ========================================================================== */

:root { --sidebar-width: 284px; }

html body #app .messages-column {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}
html body #app .messages-area { min-height: 0; flex: 1 1 auto; }
html body #app .chat-input-area {
  width: 100% !important;
  flex: 0 0 auto;
  padding: 8px 14px 12px !important;
}
html body #app .chat-input-wrapper { max-width: none; }
html body #app .members-panel { align-self: stretch; }

html body #app .home-view.home-discovery-active {
  min-height: 0;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
}
html body #app .home-view.home-discovery-active .scord-server-discovery {
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 0;
}
html body #app .home-view.home-discovery-active .scord-discovery-grid {
  min-height: 0;
  flex: 1 1 0;
  align-content: start;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Bottom-left identity and voice cards follow the sidebar flow. */
html body #app .channel-sidebar { min-width: var(--sidebar-width); }
html body #app .voice-status-bar {
  position: static !important;
  inset: auto !important;
  display: flex;
  width: auto !important;
  min-height: 62px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 8px 6px;
  padding: 9px 10px 9px 12px;
  border: 1px solid rgba(63,213,162,.22);
  border-radius: 15px;
  background: linear-gradient(135deg,rgba(20,55,68,.9),rgba(12,27,51,.94));
  box-shadow: inset 0 1px rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.18);
  backdrop-filter: blur(18px) saturate(135%);
}
html body #app .voice-status-bar.hidden { display: none !important; }
html body #app .voice-status-bar .vsb-left { display: flex; min-width: 0; align-items: center; gap: 10px; }
html body #app .voice-status-bar .vsb-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #35d49a; box-shadow: 0 0 14px rgba(53,212,154,.7); }
html body #app .voice-status-bar .vsb-copy { display: grid; min-width: 0; gap: 3px; }
html body #app .voice-status-bar .vsb-kicker { color: #70dcb6; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
html body #app .voice-status-bar #vsb-channel-name { overflow: hidden; color: #effff8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
html body #app .voice-status-bar .vsb-btn { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,110,132,.22); border-radius: 11px; background: rgba(239,68,91,.12); color: #ff879b; cursor: pointer; }
html body #app .voice-status-bar .vsb-btn:hover { border-color: rgba(255,110,132,.5); background: rgba(239,68,91,.24); color: #fff; }

html body #app .user-bar {
  min-height: 76px !important;
  height: 76px !important;
  margin: 0 8px 8px !important;
  padding: 9px 10px !important;
  gap: 8px !important;
  border: 1px solid rgba(139,167,226,.18) !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg,rgba(23,43,76,.92),rgba(12,25,49,.96)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.2) !important;
}
html body #app .user-bar-avatar { width: 42px !important; height: 42px !important; min-width: 42px !important; }
html body #app .vsb-controls { min-width: 0 !important; flex: 1 1 auto !important; overflow: hidden; }
html body #app .user-bar-name { display: block; max-width: 100%; overflow: hidden; color: #f6f8ff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
html body #app .status-bar { max-width: 100%; }
html body #app .status-indicator { min-width: 0; }
html body #app .status-text { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
html body #app .status-custom { display: none !important; }
html body #app .user-bar-controls { display: flex; flex: 0 0 auto; gap: 4px !important; margin-left: auto; }
html body #app .user-bar .user-ctrl-btn { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; border-radius: 11px !important; }

/* Message actions sit beside content instead of nesting into the text bubble. */
html body #app .msg-row-inner { padding-right: 156px; }
html body #app .msg-quick-actions {
  top: 6px;
  right: 8px;
  gap: 3px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(8,18,36,.92);
  box-shadow: 0 12px 30px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.04);
}
html body #app .msg-quick-action { width: 32px; height: 32px; border-radius: 8px; }
html body #app .msg-edited-badge { display: inline-flex; margin-left: 7px; color: #8495b7; font-size: 10px; font-style: italic; vertical-align: baseline; }
html body #app .msg-row--deleted { min-height: 42px; padding-block: 4px !important; }
html body #app .msg-tombstone { display: inline-flex; min-height: 36px; align-items: center; gap: 8px; margin-left: 48px; padding: 0 12px; border: 1px dashed rgba(139,167,226,.18); border-radius: 11px; background: rgba(139,167,226,.035); color: #8392af; font-size: 12px; font-style: italic; }

/* Social centre: the same compact sapphire glass language as chat and settings. */
html body #app .msg-row-inner { padding-right: 198px; }
html body #app .msg-poll-host { margin-top: 10px; max-width: min(560px,100%); }
html body #app .social-inbox-btn { position: relative; }
html body #app .social-inbox-count {
  position: absolute; top: -5px; right: -6px; display: grid; min-width: 16px; height: 16px;
  place-items: center; padding: 0 4px; border: 2px solid #162949; border-radius: 99px;
  background: linear-gradient(135deg,#ff6f91,#e64968); color: #fff; font: 800 9px/1 Inter,sans-serif;
  box-shadow: 0 5px 16px rgba(230,73,104,.28);
}
html body #app .social-inbox-count.hidden { display: none !important; }
html body #modal.modal.modal--wide-social { width: min(700px,94vw) !important; }
html body #modal-body > .scord-social-inbox,
html body #modal-body > .scord-connections,
html body #modal-body > .scord-report-form,
html body #modal-body > .scord-poll-form { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
html body #modal-body > .scord-social-inbox *,
html body #modal-body > .scord-connections * { min-width: 0; }
@media (max-width: 600px) {
  html body .scord-connections-grid { grid-template-columns: minmax(0,1fr) !important; }
  html body .scord-social-inbox-head { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
  html body .scord-social-inbox-actions { justify-content: flex-start !important; }
}
html body .scord-social-inbox,
html body .scord-connections,
html body .scord-report-form,
html body .scord-poll-form { display: grid; gap: 16px; color: var(--scord-text-1,#f3f6ff); }
html body .scord-social-inbox { width: min(650px,calc(100vw - 48px)); }
html body .scord-social-inbox-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 15px; border-bottom: 1px solid rgba(139,167,226,.12); }
html body .scord-social-inbox h3,
html body .scord-connections h3,
html body .scord-report-form h3,
html body .scord-poll-form h3 { margin: 4px 0 5px; color: #f6f8ff; font: 750 22px/1.1 Space Grotesk,Inter,sans-serif; letter-spacing: -.025em; }
html body .scord-social-inbox p,
html body .scord-connections p,
html body .scord-report-form p,
html body .scord-poll-form p { margin: 0; color: #92a3c3; font-size: 12px; line-height: 1.5; }
html body .scord-social-inbox-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
html body .scord-social-text-btn { min-height: 36px; padding: 0 10px; border: 1px solid rgba(139,167,226,.18); border-radius: 9px; background: rgba(139,167,226,.055); color: #b8c7e8; cursor: pointer; font: 700 11px/1 Inter,sans-serif; }
html body .scord-social-text-btn:hover,
html body .scord-social-text-btn:focus-visible { border-color: rgba(117,103,255,.5); background: rgba(117,103,255,.14); color: #fff; outline: 0; }
html body .scord-inbox-list { display: grid; max-height: min(460px,52vh); gap: 7px; overflow-y: auto; overscroll-behavior: contain; padding-right: 3px; scrollbar-width: thin; scrollbar-color: rgba(117,103,255,.5) transparent; }
html body .scord-inbox-item { display: grid; grid-template-columns: 35px minmax(0,1fr) auto; align-items: start; gap: 10px; width: 100%; min-height: 68px; padding: 11px; border: 1px solid rgba(139,167,226,.1); border-radius: 12px; background: rgba(10,22,43,.42); color: inherit; cursor: pointer; text-align: left; transition: border-color 160ms var(--scord-ease),background 160ms var(--scord-ease); }
html body .scord-inbox-item:hover,
html body .scord-inbox-item:focus-visible { border-color: rgba(117,103,255,.43); background: rgba(62,62,132,.17); outline: 0; }
html body .scord-inbox-item.is-unread { border-color: rgba(86,150,255,.25); background: linear-gradient(105deg,rgba(54,87,164,.2),rgba(14,28,54,.5)); }
html body .scord-inbox-glyph { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(139,167,226,.18); border-radius: 11px; background: rgba(139,167,226,.08); color: #c9d7f4; font: 800 15px/1 Inter,sans-serif; }
html body .scord-inbox-glyph--mention { border-color: rgba(86,150,255,.35); background: rgba(79,140,255,.13); color: #82b8ff; }
html body .scord-inbox-glyph--friend { border-color: rgba(53,212,154,.28); background: rgba(53,212,154,.11); color: #78e5bd; }
html body .scord-inbox-glyph--report { border-color: rgba(255,171,74,.28); background: rgba(255,171,74,.1); color: #ffc276; }
html body .scord-inbox-copy { display: grid; min-width: 0; gap: 2px; }
html body .scord-inbox-copy strong { overflow: hidden; color: #edf2ff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
html body .scord-inbox-copy span { overflow: hidden; color: #92a3c3; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
html body .scord-inbox-copy small { color: #677a9e; font-size: 10px; }
html body .scord-inbox-unread { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #68a7ff; box-shadow: 0 0 10px rgba(104,167,255,.7); }
html body .scord-social-empty { display: grid; min-height: 130px; place-content: center; gap: 5px; padding: 20px; border: 1px dashed rgba(139,167,226,.15); border-radius: 13px; color: #899ab9; text-align: center; }
html body .scord-social-empty strong { color: #e6edff; font-size: 13px; }
html body .scord-social-empty span { font-size: 11px; }
html body .scord-connections { width: min(680px,calc(100vw - 48px)); }
html body .scord-connections-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
html body .scord-connections-grid > section { display: grid; align-content: start; gap: 8px; min-height: 196px; padding: 12px; border: 1px solid rgba(139,167,226,.12); border-radius: 14px; background: rgba(9,20,39,.48); }
html body .scord-connections-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid rgba(139,167,226,.09); color: #91a3c7; font-size: 10px; font-weight: 800; letter-spacing: .11em; }
html body .scord-connections-title b { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 7px; background: rgba(117,103,255,.14); color: #c8c2ff; font-size: 10px; }
html body .scord-connection-row { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(139,167,226,.07); }
html body .scord-connection-row:last-child { border-bottom: 0; }
html body .scord-connection-avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: linear-gradient(135deg,#7567ff,#4f8cff); color: #fff; font: 800 11px/1 Inter,sans-serif; }
html body .scord-connection-avatar.is-blocked { background: rgba(240,98,126,.16); color: #ff9aae; }
html body .scord-connection-row > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
html body .scord-connection-row strong { overflow: hidden; color: #eef3ff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
html body .scord-connection-row small { overflow: hidden; color: #7f91b4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
html body .scord-connection-row > div { display: flex; gap: 4px; }
html body .scord-connection-row button { min-height: 30px; padding: 0 8px; border: 1px solid rgba(139,167,226,.18); border-radius: 8px; background: rgba(139,167,226,.07); color: #c7d4ee; cursor: pointer; font: 700 10px/1 Inter,sans-serif; }
html body .scord-connection-row button:hover { border-color: rgba(117,103,255,.48); background: rgba(117,103,255,.16); color: #fff; }
html body .scord-report-form,
html body .scord-poll-form { width: min(470px,calc(100vw - 48px)); }
html body .scord-report-form label,
html body .scord-poll-form label { display: grid; gap: 7px; color: #becbe3; font-size: 11px; font-weight: 750; }
html body .scord-report-form label > span { color: #7587a8; font-weight: 500; }
html body .scord-report-form select,
html body .scord-report-form textarea,
html body .scord-poll-form input { width: 100%; min-height: 42px; box-sizing: border-box; border: 1px solid rgba(139,167,226,.18); border-radius: 10px; outline: 0; background: rgba(5,14,29,.62); color: #eef3ff; font: 13px/1.4 Inter,sans-serif; }
html body .scord-report-form select,
html body .scord-poll-form input { padding: 0 12px; }
html body .scord-report-form textarea { min-height: 92px; padding: 10px 12px; resize: vertical; }
html body .scord-report-form select:focus,
html body .scord-report-form textarea:focus,
html body .scord-poll-form input:focus { border-color: rgba(117,103,255,.65); box-shadow: 0 0 0 3px rgba(117,103,255,.12); }

/* GIF picker: its result grid owns scroll and never escapes the composer. */
html body #app .gif-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  display: grid;
  width: min(430px,calc(100vw - 32px));
  max-height: min(520px,64vh);
  grid-template-rows: auto minmax(0,1fr);
  gap: 10px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(139,167,226,.2);
  border-radius: 16px;
  background: linear-gradient(155deg,rgba(18,34,64,.98),rgba(7,16,33,.99));
  box-shadow: 0 24px 70px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(22px) saturate(140%);
}
html body #app .gif-popover.hidden { display: none !important; }
html body #app .gif-popover #gif-input { min-height: 42px; padding: 0 12px; border: 1px solid rgba(139,167,226,.17); border-radius: 11px; outline: 0; background: rgba(4,11,24,.62); color: #f4f7ff; }
html body #app .gif-popover #gif-input:focus { border-color: rgba(117,103,255,.62); box-shadow: 0 0 0 3px rgba(117,103,255,.12); }
html body #app .gif-results { min-height: 0; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(117,103,255,.58) transparent; }
html body #app .gif-results::-webkit-scrollbar { width: 7px; }
html body #app .gif-results::-webkit-scrollbar-track { background: transparent; }
html body #app .gif-results::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: linear-gradient(#6078b7,#8068f7) padding-box; }
html body .scord-user-menu .scord-user-menu-tag { color: #8fb8ff; font: 700 11px/1.25 "Space Grotesk", sans-serif; letter-spacing: .02em; }

/* User settings — ImageGen v2 translated into native, responsive UI. */
html body .modal.modal--wide-settings { width: min(1240px,calc(100vw - 40px)) !important; height: min(700px,calc(100vh - 40px)) !important; max-width: none !important; max-height: none !important; overflow: hidden !important; border-color: rgba(117,103,255,.42) !important; border-radius: 20px !important; background: linear-gradient(145deg,rgba(13,26,51,.985),rgba(6,14,29,.99)) !important; box-shadow: 0 38px 110px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.055) !important; }
html body .modal.modal--wide-settings .modal-header { min-height: 70px; padding: 0 26px; border-bottom: 1px solid rgba(139,167,226,.12); background: rgba(13,28,55,.72); }
html body .modal.modal--wide-settings .modal-title { font: 750 20px/1 Space Grotesk,sans-serif; }
html body .modal.modal--wide-settings .modal-body { height: calc(100% - 70px) !important; max-height: none !important; padding: 0 !important; overflow: hidden !important; }
html body .modal.modal--wide-settings .modal-footer { display: none !important; }
html body .modal.modal--wide-settings .scord-settings-shell { display: grid !important; width: 100%; height: 100% !important; max-height: none !important; grid-template-columns: 260px minmax(0,1fr); overflow: hidden !important; background: transparent; }
html body .modal.modal--wide-settings .scord-settings-nav { display: flex; min-height: 0; flex-direction: column; gap: 7px; padding: 24px 18px; overflow: hidden; border-right: 1px solid rgba(139,167,226,.12); background: linear-gradient(180deg,rgba(23,38,70,.58),rgba(7,16,34,.78)); }
html body .modal.modal--wide-settings .scord-settings-nav::before { content: "SH  " attr(data-user); display: grid; min-height: 86px; place-items: center; margin-bottom: 10px; border: 1px solid rgba(139,167,226,.15); border-radius: 15px; background: radial-gradient(circle at 50% 15%,rgba(117,103,255,.22),transparent 64%),rgba(139,167,226,.04); color: #e8edff; font: 750 15px/1.2 Space Grotesk,sans-serif; }
html body .modal.modal--wide-settings .scord-settings-nav button { display: flex; min-height: 45px; align-items: center; padding: 0 13px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #aab7d1; font-size: 12px; font-weight: 680; }
html body .modal.modal--wide-settings .scord-settings-nav button:hover { border-color: rgba(139,167,226,.14); background: rgba(139,167,226,.06); color: #edf2ff; }
html body .modal.modal--wide-settings .scord-settings-nav button.active { border-color: rgba(139,112,255,.48); background: linear-gradient(90deg,rgba(117,82,255,.34),rgba(88,69,181,.22)); color: #fff; box-shadow: inset 3px 0 #8b74ff,0 8px 25px rgba(72,50,173,.16); }
html body .modal.modal--wide-settings .scord-settings-nav button.danger { margin-top: auto; color: #ff8299; }
html body .modal.modal--wide-settings .scord-settings-content { min-width: 0; min-height: 0; padding: 26px 30px !important; overflow: hidden !important; }
html body .modal.modal--wide-settings .scord-settings-page:not(.hidden) { display: grid !important; min-height: 0; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 14px 18px; }
html body .modal.modal--wide-settings .scord-settings-page > h3,
html body .modal.modal--wide-settings .settings-account-card,
html body .modal.modal--wide-settings .settings-hint,
html body .modal.modal--wide-settings .settings-unique-id { grid-column: 1/-1; }
html body .modal.modal--wide-settings .scord-settings-page > h3 { margin: 0 0 4px; color: #f6f8ff; font: 750 26px/1.1 Space Grotesk,sans-serif; letter-spacing: -.025em; }
html body .modal.modal--wide-settings .scord-settings-page > label { display: grid; gap: 7px; margin: 0; color: #aebbd3; font-size: 11px; font-weight: 700; }
html body .modal.modal--wide-settings .modal-input { min-height: 42px; padding: 9px 11px; border-color: rgba(139,167,226,.16); border-radius: 10px; background: rgba(5,13,29,.52); }
html body .modal.modal--wide-settings textarea.modal-input { min-height: 70px; resize: vertical; }
html body .modal.modal--wide-settings .settings-account-card { min-height: 112px; margin: 0 0 2px; border: 1px solid rgba(117,103,255,.25); border-radius: 16px; background: radial-gradient(circle at 86% 12%,rgba(117,80,255,.26),transparent 40%),linear-gradient(135deg,rgba(31,50,90,.72),rgba(11,24,48,.86)); }
html body .modal.modal--wide-settings .settings-hint { margin: -5px 0 0; color: #7f8da9; font-size: 10px; line-height: 1.45; }
html body .modal.modal--wide-settings .scord-check { min-height: 46px; display: flex !important; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(139,167,226,.12); border-radius: 11px; background: rgba(139,167,226,.035); }
@media (min-width: 861px) and (min-height: 700px) {
  html body #modal.modal--wide-settings { width: min(1240px,calc(100vw - 40px)) !important; }
  html body #modal.modal--wide-settings .modal-body { height: calc(100% - 70px) !important; overflow: hidden !important; }
  html body #modal.modal--wide-settings .scord-settings-shell { height: 100% !important; min-height: 0 !important; margin: 0 !important; }
  html body #modal.modal--wide-settings .scord-settings-content { overflow: hidden !important; padding: 26px 30px !important; }
}

/* Server settings — wide native sheet based on the dedicated mockup. */
html body #server-settings-panel.scord-server-settings.v25-server { position: fixed !important; inset: 22px !important; z-index: 6000; display: grid !important; width: auto !important; height: auto !important; max-width: 1680px; margin: auto; grid-template-columns: 280px minmax(0,1fr); overflow: hidden; border: 1px solid rgba(85,171,255,.36); border-radius: 20px; background: linear-gradient(145deg,rgba(10,24,50,.985),rgba(5,13,29,.995)); box-shadow: 0 42px 130px rgba(0,0,0,.68),inset 0 1px rgba(255,255,255,.055); }
html body #server-settings-panel .scord-server-settings-nav { display: flex; min-height: 0; flex-direction: column; gap: 6px; padding: 30px 20px; overflow: hidden; border-right: 1px solid rgba(139,167,226,.12); background: radial-gradient(circle at 0 0,rgba(117,82,255,.17),transparent 34%),rgba(8,20,43,.76); }
html body #server-settings-panel .scord-server-settings-nav strong { display: flex; min-height: 72px; align-items: center; margin-bottom: 14px; padding: 0 14px; border: 1px solid rgba(139,167,226,.14); border-radius: 14px; background: rgba(139,167,226,.04); color: #f2f5ff; font: 750 15px/1.2 Space Grotesk,sans-serif; }
html body #server-settings-panel .scord-server-settings-nav button { min-height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #a7b5d0; text-align: left; }
html body #server-settings-panel .scord-server-settings-nav button:hover { border-color: rgba(139,167,226,.14); background: rgba(139,167,226,.06); color: white; }
html body #server-settings-panel .scord-server-settings-nav button.active { border-color: rgba(139,112,255,.52); background: linear-gradient(90deg,rgba(117,82,255,.4),rgba(68,57,150,.22)); color: white; box-shadow: inset 3px 0 #8c78ff; }
html body #server-settings-panel .scord-server-settings-nav button.danger { margin-top: auto; color: #ff8095; }
html body #server-settings-panel .scord-server-settings-main { display: grid; min-width: 0; min-height: 0; padding: 30px 34px 82px !important; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(117,103,255,.54) transparent; }
html body #server-settings-panel .srv-page:not(.hidden) { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 15px 20px; }
html body #server-settings-panel .srv-page > h2,
html body #server-settings-panel .srv-page > .modal-info,
html body #server-settings-panel .srv-page > .v25-invite-box,
html body #server-settings-panel .srv-page > .permission-grid,
html body #server-settings-panel .srv-page > .srv-danger-zone { grid-column: 1/-1; }
html body #server-settings-panel .server-quick-stats { display: grid; grid-column: 1/-1; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 4px; }
html body #server-settings-panel .server-quick-stats article { display: grid; min-height: 86px; align-content: center; gap: 7px; padding: 14px 16px; border: 1px solid rgba(139,167,226,.13); border-radius: 13px; background: linear-gradient(145deg,rgba(22,41,75,.56),rgba(9,20,42,.76)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
html body #server-settings-panel .server-quick-stats span { color: #8292b2; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
html body #server-settings-panel .server-quick-stats strong { color: #f4f7ff; font: 750 20px/1 Space Grotesk,sans-serif; }
html body #server-settings-panel .server-quick-stats .is-live { color: #52dda9; }
html body #server-settings-panel .srv-page > h2 { margin: 0 0 8px; color: #f7f9ff; font: 760 28px/1.1 Space Grotesk,sans-serif; letter-spacing: -.03em; }
html body #server-settings-panel .srv-page > label { display: grid; gap: 7px; margin: 0; color: #aab8d2; font-size: 11px; font-weight: 700; }
html body #server-settings-panel footer { position: absolute; right: 0; bottom: 0; left: 280px; display: flex; min-height: 68px; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 34px; border-top: 1px solid rgba(139,167,226,.13); background: rgba(7,17,36,.92); backdrop-filter: blur(18px); }

@media (max-height: 720px) {
  html body .modal.modal--wide-settings .scord-settings-content { overflow-y: auto !important; }
}
@media (max-width: 1100px) {
  html body #server-settings-panel.scord-server-settings.v25-server { grid-template-columns: 230px minmax(0,1fr); }
  html body #server-settings-panel footer { left: 230px; }
  html body #server-settings-panel .srv-page:not(.hidden) { grid-template-columns: 1fr; }
  html body #server-settings-panel .srv-page > * { grid-column: 1 !important; }
  html body #server-settings-panel .server-quick-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 768px) {
  :root { --sidebar-width: 284px; }
  html body #app .msg-row-inner { padding-right: 52px; }
  html body #app .msg-tombstone { margin-left: 8px; }
  html body .modal.modal--wide-settings { width: 100vw !important; height: 100dvh !important; border-radius: 0 !important; }
  html body .modal.modal--wide-settings .scord-settings-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
  html body .modal.modal--wide-settings .scord-settings-nav { flex-direction: row; padding: 8px 12px; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(139,167,226,.12); }
  html body .modal.modal--wide-settings .scord-settings-nav::before,
  html body .modal.modal--wide-settings .scord-settings-nav button.danger { display: none; }
  html body .modal.modal--wide-settings .scord-settings-nav button { min-width: max-content; min-height: 44px; }
  html body .modal.modal--wide-settings .scord-settings-content { padding: 18px 14px !important; overflow-y: auto !important; }
  html body .modal.modal--wide-settings .scord-settings-page:not(.hidden) { grid-template-columns: 1fr; }
  html body .modal.modal--wide-settings .scord-settings-page > * { grid-column: 1 !important; }
  html body #server-settings-panel.scord-server-settings.v25-server { inset: 0 !important; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); border: 0; border-radius: 0; }
  html body #server-settings-panel .scord-server-settings-nav { flex-direction: row; padding: 9px 12px; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(139,167,226,.12); }
  html body #server-settings-panel .scord-server-settings-nav strong,
  html body #server-settings-panel .scord-server-settings-nav button.danger { display: none; }
  html body #server-settings-panel .scord-server-settings-nav button { min-width: max-content; }
  html body #server-settings-panel .scord-server-settings-main { padding: 18px 14px 84px !important; }
  html body #server-settings-panel footer { left: 0; padding: 0 14px; }
}

@media (max-width: 480px) {
  html body #app .chat-header-right .peer-badge,
  html body #app .chat-header-right #pins-toggle-btn { display: none !important; }
  html body #app .msg-time { display: none; }
  html body #app .members-panel { inset: 68px 8px 70px auto; width: calc(100vw - 16px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body #app *,
  html body #app *::before,
  html body #app *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Product polish: discovery, message actions and durable-server settings. */
html body #app #discover-btn { color: #8fa6d8; }
html body #app #discover-btn.active,
html body #app #discover-btn:hover { border-color: rgba(80,181,255,.38) !important; background: linear-gradient(145deg, rgba(117,103,255,.28), rgba(56,189,248,.16)) !important; color: white !important; }

html body #app .scord-friends-directory__head-actions { display: flex; align-items: center; gap: 8px; }
html body #app .scord-friends-directory__discover,
html body #app .scord-discovery-secondary,
html body #app .scord-discovery-primary {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--scord-border);
  border-radius: 11px;
  background: rgba(139,167,226,.07);
  color: var(--scord-text-1);
  cursor: pointer;
  font: 750 12px/1 Inter, sans-serif;
}
html body #app .scord-friends-directory__discover:hover,
html body #app .scord-discovery-secondary:hover { border-color: var(--scord-border-strong); background: rgba(117,103,255,.12); }
html body #app .scord-discovery-primary { border-color: rgba(117,103,255,.5); background: linear-gradient(135deg, #7567ff, #4f8cff); box-shadow: 0 12px 30px rgba(79,140,255,.18); color: white; }

html body #app .scord-server-discovery {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border-radius: 17px;
  background: var(--scord-panel-gradient);
}
html body #app .scord-server-discovery.hidden { display: none !important; }
html body #app .scord-discovery-head {
  display: flex;
  min-height: 118px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--scord-border);
  background: radial-gradient(circle at 78% -20%, rgba(79,140,255,.22), transparent 42%), rgba(15,29,55,.62);
}
html body #app .scord-discovery-head h1 { margin: 5px 0 5px; color: var(--scord-text-1); font: 750 clamp(24px,2.3vw,32px)/1 Space Grotesk,sans-serif; letter-spacing: -.03em; }
html body #app .scord-discovery-head p { max-width: 620px; margin: 0; color: var(--scord-text-2); font-size: 13px; line-height: 1.5; }
html body #app .scord-discovery-head-actions { display: flex; gap: 8px; }
html body #app .scord-discovery-toolbar { display: flex; align-items: center; gap: 16px; padding: 20px 28px 8px; }
html body #app .scord-discovery-search { display: flex; min-width: 0; min-height: 44px; flex: 1; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--scord-border); border-radius: 12px; background: rgba(5,12,26,.55); color: #8293b6; }
html body #app .scord-discovery-search:focus-within { border-color: var(--scord-border-strong); box-shadow: 0 0 0 3px rgba(117,103,255,.1); }
html body #app .scord-discovery-search input { width: 100%; min-width: 0; min-height: 42px; border: 0; outline: 0; background: transparent; color: var(--scord-text-1); font: 14px/1 Inter,sans-serif; }
html body #app .scord-discovery-count { color: var(--scord-text-3); font-size: 11px; white-space: nowrap; }
html body #app .scord-discovery-grid { display: grid; min-height: 0; padding: 14px 28px 34px; grid-template-columns: repeat(3,minmax(220px,1fr)); gap: 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(117,103,255,.38) transparent; }
html body #app .scord-discovery-card { display: flex; min-height: 238px; flex-direction: column; padding: 18px; border: 1px solid rgba(139,167,226,.13); border-radius: 16px; background: linear-gradient(155deg, rgba(22,39,70,.65), rgba(8,18,37,.82)); box-shadow: inset 0 1px rgba(255,255,255,.035); transition: border-color 170ms var(--scord-ease), transform 170ms var(--scord-ease), background 170ms var(--scord-ease); }
html body #app .scord-discovery-card:hover { border-color: rgba(117,103,255,.4); background: linear-gradient(155deg, rgba(33,48,85,.72), rgba(10,20,42,.88)); transform: translateY(-2px); }
html body #app .scord-discovery-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
html body #app .scord-discovery-icon { position: relative; display: grid; width: 50px; height: 50px; place-items: center; overflow: hidden; border: 1px solid rgba(129,112,255,.35); border-radius: 15px; background: linear-gradient(135deg,#7567ff,#398fdc); color: white; font: 800 18px/1 Space Grotesk,sans-serif; }
html body #app .scord-discovery-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html body #app .scord-discovery-live { display: inline-flex; min-height: 26px; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid rgba(53,212,154,.18); border-radius: 99px; background: rgba(53,212,154,.07); color: #78e5bd; font-size: 10px; font-weight: 750; }
html body #app .scord-discovery-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--scord-online); box-shadow: 0 0 10px rgba(53,212,154,.5); }
html body #app .scord-discovery-copy { flex: 1; padding: 16px 0 14px; }
html body #app .scord-discovery-copy h2 { margin: 0 0 6px; color: var(--scord-text-1); font: 750 17px/1.2 Space Grotesk,sans-serif; }
html body #app .scord-discovery-copy p { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--scord-text-2); font-size: 12px; line-height: 1.55; }
html body #app .scord-discovery-meta { display: flex; min-height: 40px; flex-wrap: wrap; align-content: center; gap: 4px 12px; padding: 9px 0; border-top: 1px solid rgba(139,167,226,.09); color: var(--scord-text-3); font-size: 10px; }
html body #app .scord-discovery-join { display: flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; border: 1px solid rgba(117,103,255,.3); border-radius: 11px; background: rgba(117,103,255,.12); color: #d9e2ff; cursor: pointer; font: 750 12px/1 Inter,sans-serif; }
html body #app .scord-discovery-join:hover { border-color: rgba(117,103,255,.58); background: rgba(117,103,255,.22); color: white; }
html body #app .scord-discovery-empty { display: flex; min-height: 260px; grid-column: 1/-1; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--scord-text-2); text-align: center; }
html body #app .scord-discovery-empty strong { color: var(--scord-text-1); font-size: 15px; }
html body #app .scord-discovery-empty button { min-height: 40px; margin-top: 8px; padding: 0 14px; border: 1px solid var(--scord-border-strong); border-radius: 10px; background: rgba(117,103,255,.14); color: white; cursor: pointer; }
html body #app .scord-discovery-skeleton { height: 238px; border: 1px solid var(--scord-border); border-radius: 16px; background: linear-gradient(110deg,rgba(139,167,226,.04) 30%,rgba(139,167,226,.1) 45%,rgba(139,167,226,.04) 60%); background-size: 240% 100%; animation: scord-discovery-loading 1.3s ease infinite; }
@keyframes scord-discovery-loading { to { background-position-x: -220%; } }

html body #app .msg-row-inner { position: relative; }
html body #app .msg-quick-actions { position: absolute; top: 6px; right: 8px; z-index: 2; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--scord-border); border-radius: 10px; background: rgba(9,19,38,.94); box-shadow: 0 10px 28px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity 140ms var(--scord-ease), transform 140ms var(--scord-ease); }
html body #app .msg-row:hover .msg-quick-actions,
html body #app .msg-row:focus-within .msg-quick-actions { opacity: 1; pointer-events: auto; transform: translateY(0); }
html body #app .msg-quick-action { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #91a3c6; cursor: pointer; }
html body #app .msg-quick-action:hover { background: rgba(139,167,226,.1); color: white; }
html body #app .msg-quick-action.danger:hover { background: rgba(240,98,126,.13); color: #ff8da3; }

html body .scord-public-toggle { display: flex !important; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(139,167,226,.13); border-radius: 12px; background: rgba(139,167,226,.045); cursor: pointer; }
html body .scord-public-toggle input { width: 18px; height: 18px; accent-color: #7567ff; }
html body .scord-public-toggle span { display: grid; gap: 3px; }
html body .scord-public-toggle strong { color: var(--scord-text-1); font-size: 12px; }
html body .scord-public-toggle small { color: var(--scord-text-3); font-size: 10px; font-weight: 500; }

@media (max-width: 1120px) {
  html body #app .scord-discovery-grid { grid-template-columns: repeat(2,minmax(220px,1fr)); }
}
@media (max-width: 768px) {
  html body #app .scord-friends-directory__head-actions { width: 100%; }
  html body #app .scord-friends-directory__discover,
  html body #app .scord-friends-directory__add { min-height: 44px; flex: 1; }
  html body #app .scord-friends-directory__tabs button { min-height: 44px; }
  html body #app .scord-discovery-head { min-height: 0; align-items: stretch; flex-direction: column; padding: 20px 16px; }
  html body #app .scord-discovery-head-actions { width: 100%; }
  html body #app .scord-discovery-head-actions button { min-height: 44px; flex: 1; }
  html body #app .scord-discovery-toolbar { align-items: stretch; flex-direction: column; gap: 8px; padding: 14px 14px 6px; }
  html body #app .scord-discovery-count { align-self: flex-end; }
  html body #app .scord-discovery-grid { padding: 10px 14px calc(82px + env(safe-area-inset-bottom)); grid-template-columns: 1fr; }
  html body #app .scord-discovery-card { min-height: 280px; }
  html body #app .scord-discovery-join { min-height: 44px; }
  html body #app .msg-quick-actions { top: 0; right: 0; opacity: 1; pointer-events: auto; transform: none; background: transparent; box-shadow: none; }
  html body #app .msg-quick-action:not(.danger) { display: none; }
  html body #app .msg-quick-action { width: 44px; height: 44px; }
  html body #toast-container { top: auto !important; right: 12px !important; bottom: calc(72px + env(safe-area-inset-bottom)) !important; left: 12px !important; align-items: stretch; }
  html body #toast-container .toast { width: 100%; max-width: none; }
}