/* Orbyte R500 — Discord-inspired information architecture with Orbyte identity. */
:root {
  --ob-rail: #1e1f22;
  --ob-sidebar: #2b2d31;
  --ob-chat: #313338;
  --ob-chat-raised: #383a40;
  --ob-hover: rgba(78, 80, 88, .54);
  --ob-selected: rgba(78, 80, 88, .82);
  --ob-copy: #f2f3f5;
  --ob-copy-muted: #b5bac1;
  --ob-accent: #5865f2;
  --ob-positive: #23a55a;
}

html:not([data-theme="light"])[data-orbyte-client="desktop"] #app.app-shell {
  --bg-0: var(--ob-rail);
  --bg-1: var(--ob-chat);
  --bg-2: var(--ob-sidebar);
  --bg-3: var(--ob-chat-raised);
  --bg-4: #404249;
  --text: var(--ob-copy);
  --muted: var(--ob-copy-muted);
  --faint: #949ba4;
  --brand: var(--ob-accent);
  gap: 0 !important;
  padding: 0 !important;
  background: var(--ob-chat) !important;
}

html[data-orbyte-client="desktop"] #app :is(.guild-rail,.channel-panel,.chat-panel,.member-panel) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-orbyte-client="desktop"] #app .guild-rail {
  padding: 12px 0 12px !important;
  background: var(--bg-0, var(--ob-rail)) !important;
}

html[data-orbyte-client="desktop"] #app .guild {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  margin: 0 auto 8px !important;
  border-radius: 50% !important;
  transition: border-radius .16s ease, background-color .16s ease, color .16s ease !important;
}

html[data-orbyte-client="desktop"] #app .guild:hover,
html[data-orbyte-client="desktop"] #app .guild.active {
  border-radius: 16px !important;
}

html[data-orbyte-client="desktop"] #app .guild.active {
  background: var(--brand, var(--ob-accent)) !important;
}

html[data-orbyte-client="desktop"] #app .server-rail-icon,
html[data-orbyte-client="desktop"] #app .server-rail-icon > img {
  width: 48px !important;
  height: 48px !important;
  border-radius: inherit !important;
}

html[data-orbyte-client="desktop"] #app .channel-panel {
  background: var(--bg-2, var(--ob-sidebar)) !important;
}

html[data-orbyte-client="desktop"] #app #serverName.server-head {
  min-height: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.2) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 0 rgba(4,4,5,.2), 0 1px 2px rgba(0,0,0,.12) !important;
}

html[data-orbyte-client="desktop"] #app .channel-scroll {
  padding: 8px 8px 10px !important;
}

html[data-orbyte-client="desktop"] #app .channel-category-head {
  min-height: 28px !important;
  padding: 4px 4px 4px 0 !important;
  color: var(--faint, #949ba4) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

html[data-orbyte-client="desktop"] #app .channel {
  min-height: 34px !important;
  margin: 1px 0 !important;
  padding: 0 8px !important;
  border-radius: 4px !important;
  color: var(--muted, var(--ob-copy-muted)) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

html[data-orbyte-client="desktop"] #app .channel:hover {
  background: var(--ob-hover) !important;
  color: var(--text, var(--ob-copy)) !important;
}

html[data-orbyte-client="desktop"] #app .channel.active {
  background: var(--ob-selected) !important;
  color: var(--text, var(--ob-copy)) !important;
}

html[data-orbyte-client="desktop"] #app .me-bar {
  min-height: 52px !important;
  padding: 6px 8px !important;
  background: color-mix(in srgb, var(--bg-0, var(--ob-rail)) 74%, var(--bg-2, var(--ob-sidebar))) !important;
}

html[data-orbyte-client="desktop"] #app .chat-panel {
  background: var(--bg-1, var(--ob-chat)) !important;
}

html[data-orbyte-client="desktop"] #app .chat-head {
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 12px 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.18) !important;
  background: var(--bg-1, var(--ob-chat)) !important;
  box-shadow: 0 1px 0 rgba(4,4,5,.2), 0 1px 2px rgba(0,0,0,.12) !important;
}

html[data-orbyte-client="desktop"] #app .messages {
  padding: 16px 0 22px !important;
  background: var(--bg-1, var(--ob-chat)) !important;
}

html[data-orbyte-client="desktop"] #app .message {
  min-height: 44px !important;
  padding: 2px 48px 2px 72px !important;
  border-radius: 0 !important;
}

html[data-orbyte-client="desktop"] #app .message:not(.grouped) {
  margin-top: 14px !important;
}

html[data-orbyte-client="desktop"] #app .message:hover {
  background: color-mix(in srgb, var(--bg-0, var(--ob-rail)) 15%, transparent) !important;
}

html[data-orbyte-client="desktop"] #app .message > .avatar {
  left: 16px !important;
  width: 40px !important;
  height: 40px !important;
}

html[data-orbyte-client="desktop"] #app .message-content {
  color: color-mix(in srgb, var(--text, var(--ob-copy)) 92%, var(--muted)) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

html[data-orbyte-client="desktop"] #app .message-author {
  font-size: 15px !important;
  font-weight: 650 !important;
}

html[data-orbyte-client="desktop"] #app .message-time {
  color: var(--faint, #949ba4) !important;
  font-size: 11px !important;
}

html[data-orbyte-client="desktop"] #app .composer-wrap {
  padding: 0 16px 24px !important;
  background: var(--bg-1, var(--ob-chat)) !important;
}

html[data-orbyte-client="desktop"] #app .composer {
  min-height: 44px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--bg-3, var(--ob-chat-raised)) !important;
  box-shadow: none !important;
}

html[data-orbyte-client="desktop"] #app #messageInput {
  min-height: 44px !important;
  padding: 12px 8px !important;
  color: var(--text, var(--ob-copy)) !important;
  font-size: 15px !important;
  line-height: 20px !important;
}

html[data-orbyte-client="desktop"] #app #messageInput::placeholder { color: var(--faint, #949ba4) !important; }

html[data-orbyte-client="desktop"] #app .member-panel {
  padding: 18px 8px !important;
  background: var(--bg-2, var(--ob-sidebar)) !important;
}

html[data-orbyte-client="desktop"] #app .member-group {
  padding: 12px 8px 6px !important;
  color: var(--faint, #949ba4) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

html[data-orbyte-client="desktop"] #app .member {
  min-height: 42px !important;
  padding: 0 8px !important;
  border-radius: 4px !important;
}

html[data-orbyte-client="desktop"] #app .member:hover { background: var(--ob-hover) !important; }

html[data-orbyte-client] :is(button,a,input,textarea,select,[tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand, var(--ob-accent)) 90%, white) !important;
  outline-offset: 2px !important;
}

/* Badge tiles: one icon language, a larger target, and a readable hover label. */
html[data-orbyte-client] .profile-badges,
html[data-orbyte-client] .orbyte-r40-badges {
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid color-mix(in srgb, var(--text, #f2f3f5) 8%, transparent) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--bg-0, #1e1f22) 60%, transparent) !important;
}

html[data-orbyte-client] .profile-badge {
  width: 30px !important;
  height: 30px !important;
  padding: 4px !important;
  border-radius: 6px !important;
  filter: none !important;
  background: transparent !important;
  transition: background-color .14s ease, transform .14s ease !important;
}

html[data-orbyte-client] .profile-badge:hover,
html[data-orbyte-client] .profile-badge:focus-visible {
  background: color-mix(in srgb, var(--brand, var(--ob-accent)) 18%, transparent) !important;
  transform: translateY(-1px) !important;
}

html[data-orbyte-client] .profile-badge img,
html[data-orbyte-client] .profile-badge-fallback {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

/* Boost entitlement treatment. */
.guild.ob-server-boosted::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: 4px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 3px solid var(--bg-0, var(--ob-rail));
  border-radius: 50%;
  background: url("/assets/badges/boost.svg") center/contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(255,115,198,.55));
}

.guild.ob-server-boosted .server-rail-icon {
  box-shadow: 0 0 0 2px color-mix(in srgb,#ff73c6 82%,#7c5cff), 0 0 18px rgba(255,115,198,.28) !important;
}

.ob-boost-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb,#ff73c6 15%,var(--bg-3,#383a40));
  color: color-mix(in srgb,#ff9ad8 80%,var(--text,#f2f3f5));
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.server-context-menu .ob-boost-context-item { color:#ff91d4; }
.server-context-menu .ob-boost-context-item::first-letter { color:#ff73c6; }

.ob-subscription-boosts { margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2); }
.ob-subscription-boosts>h3 { margin:0;font-size:16px; }
.ob-subscription-boosts>p { margin:5px 0 12px;color:var(--muted);font-size:12px; }
.ob-subscription-boost-list { display:grid;gap:8px; }
.ob-subscription-boost { display:flex;align-items:center;gap:11px;min-height:62px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--bg-3); }
.ob-subscription-boost img { width:34px;height:34px;flex:0 0 34px;object-fit:contain; }
.ob-subscription-boost>div { min-width:0;flex:1; }
.ob-subscription-boost strong,.ob-subscription-boost span { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ob-subscription-boost strong { font-size:13px; }
.ob-subscription-boost span { margin-top:3px;color:var(--muted);font-size:11px; }
.ob-subscription-boost-empty { padding:14px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:12px;line-height:1.5; }

/* Community server boosts and embedded checkout. */
.ob-boost-header-button { min-height:30px;margin-left:auto;padding:0 10px;border:1px solid color-mix(in srgb,#ff73c6 55%,var(--line));border-radius:7px;background:color-mix(in srgb,#ff73c6 13%,var(--bg-3));color:var(--text);font:inherit;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap; }
.ob-boost-header-button span:first-child { margin-right:5px;color:#ff8bd1; }
.ob-boost-header-button:hover { background:color-mix(in srgb,#ff73c6 21%,var(--bg-3)); }
.ob-boost-header-button:focus-visible,.ob-boost-close:focus-visible { outline:2px solid var(--brand,#5865f2);outline-offset:2px; }
.ob-boost-modal { position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:18px;background:rgba(5,6,10,.82);backdrop-filter:blur(12px); }
.ob-boost-modal.hidden { display:none!important; }
.ob-boost-modal-card { width:min(820px,100%);max-height:calc(100dvh - 36px);display:flex;flex-direction:column;overflow:hidden;border:1px solid color-mix(in srgb,#ff73c6 28%,var(--line));border-radius:18px;background:var(--bg-1,#2b2d31);color:var(--text);box-shadow:0 30px 100px rgba(0,0,0,.58); }
.ob-boost-modal-head { display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--bg-2,#313338); }
.ob-boost-modal-head>div { min-width:0;flex:1; }
.ob-boost-modal-head strong,.ob-boost-modal-kicker { display:block; }
.ob-boost-modal-head strong { margin-top:2px;font-size:17px; }
.ob-boost-modal-kicker { color:#ff8bd1;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase; }
.ob-boost-close { width:34px;height:34px;border:0;border-radius:8px;background:var(--bg-4,#3f4147);color:var(--text);font-size:20px;cursor:pointer; }
.ob-boost-modal-body { min-height:440px;padding:16px;overflow:auto; }
.ob-boost-summary { padding:18px;border:1px solid color-mix(in srgb,#ff73c6 30%,var(--line));border-radius:14px;background:radial-gradient(circle at 100% 0,rgba(255,115,198,.21),transparent 42%),linear-gradient(135deg,color-mix(in srgb,#7c5cff 12%,var(--bg-2)),var(--bg-2)); }
.ob-boost-server-row { display:flex;align-items:center;gap:11px; }
.ob-boost-server-icon { width:44px;height:44px;flex:0 0 auto;border-radius:13px;object-fit:cover;background:var(--bg-4); }
.ob-boost-server-fallback { display:grid;place-items:center;color:white;font-size:18px;font-weight:900;background:linear-gradient(135deg,#7c5cff,#ff73c6); }
.ob-boost-server-row>div:nth-child(2) { min-width:0;flex:1; }
.ob-boost-server-row span { color:var(--muted);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.06em; }
.ob-boost-server-row h2 { overflow:hidden;margin:2px 0 0;font-size:19px;text-overflow:ellipsis;white-space:nowrap; }
.ob-boost-level-badge { padding:5px 9px;border:1px solid rgba(255,139,209,.28);border-radius:999px;background:rgba(255,115,198,.12);color:#ff9bd7;font-size:10px;font-weight:850; }
.ob-boost-count-row { display:flex;align-items:baseline;gap:8px;margin-top:19px; }
.ob-boost-count-row strong { font-size:34px;line-height:1;font-variant-numeric:tabular-nums; }
.ob-boost-count-row span { color:var(--muted);font-size:12px;font-weight:700; }
.ob-boost-progress-copy { display:flex;justify-content:space-between;gap:12px;margin-top:14px;color:var(--muted);font-size:11px; }
.ob-boost-progress-copy b { color:var(--text); }
.ob-boost-progress { height:8px;margin-top:7px;overflow:hidden;border-radius:999px;background:var(--bg-4,#3f4147); }
.ob-boost-progress i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7c5cff,#ff73c6);box-shadow:0 0 15px rgba(255,115,198,.38);transition:width .3s ease; }
.ob-boost-levels { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px; }
.ob-boost-level { position:relative;min-height:126px;padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2);opacity:.68; }
.ob-boost-level.unlocked { border-color:color-mix(in srgb,#ff73c6 42%,var(--line));opacity:1; }
.ob-boost-level-top { display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.06em; }
.ob-boost-level-top strong { color:#ff8bd1; }
.ob-boost-level h3 { margin:10px 0 4px;font-size:13px; }
.ob-boost-level p { margin:0 0 22px;color:var(--muted);font-size:11px;line-height:1.4; }
.ob-boost-level-state { position:absolute;bottom:11px;left:13px;color:var(--faint);font-size:9px;font-weight:850;text-transform:uppercase; }
.ob-boost-level.unlocked .ob-boost-level-state { color:#62d28a; }
.ob-boost-action-card { display:flex;align-items:center;gap:16px;margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2); }
.ob-boost-action-card>div { min-width:0;flex:1; }
.ob-boost-action-card strong { font-size:13px; }
.ob-boost-action-card p,.ob-boost-fineprint { margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.45; }
.ob-boost-purchase { flex:0 0 auto;background:linear-gradient(135deg,#7c5cff,#d94fa8)!important; }
.ob-boost-purchase:disabled { background:var(--bg-4)!important;color:var(--muted)!important;cursor:not-allowed; }
.ob-boost-fineprint { margin:9px 3px 0;text-align:center; }
.ob-boost-loading,.ob-boost-error,.ob-boost-success { min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--muted); }
.ob-boost-error strong,.ob-boost-success strong { color:var(--text);font-size:19px; }
.ob-boost-error p,.ob-boost-success p { max-width:420px;margin:7px 0 15px;line-height:1.5; }
.ob-boost-success>span { display:grid;width:58px;height:58px;place-items:center;margin-bottom:14px;border-radius:18px;background:linear-gradient(135deg,#7c5cff,#ff73c6);color:white;font-size:25px;box-shadow:0 14px 38px rgba(255,115,198,.25); }
.ob-boost-checkout-intro { display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:10px;border-radius:10px;background:var(--bg-2); }
.ob-boost-secure-dot { width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:#23a55a;box-shadow:0 0 10px rgba(35,165,90,.42); }
.ob-boost-checkout-intro strong,.ob-boost-checkout-intro p { display:block;margin:0; }
.ob-boost-checkout-intro p { margin-top:2px;color:var(--muted);font-size:10px; }
#obBoostWhopEmbed,#obBoostWhopEmbed iframe { width:100%!important;min-height:440px!important;border:0!important; }
.ob-boost-checkout-footer { display:flex;justify-content:space-between;gap:8px;margin-top:10px; }

@media (max-width: 720px) {
  .ob-boost-modal { align-items:end;padding:0; }
  .ob-boost-modal-card { width:100%;max-height:94dvh;border-radius:18px 18px 0 0;border-bottom:0; }
  .ob-boost-levels { grid-template-columns:1fr; }
  .ob-boost-action-card { align-items:stretch;flex-direction:column; }
  .ob-boost-purchase { width:100%; }
  .ob-boost-header-button span:last-child { display:none; }
  .ob-boost-header-button span:first-child { margin:0; }
  html[data-orbyte-client="mobile"] .chat-head { min-height:48px!important; }
  html[data-orbyte-client="mobile"] .composer { border-radius:18px!important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-orbyte-client] .profile-badge,
  html[data-orbyte-client="desktop"] #app .guild { transition:none!important; }
  html[data-orbyte-client] .profile-badge:hover { transform:none!important; }
}

@media (prefers-contrast: more) {
  html[data-orbyte-client] .channel.active,
  html[data-orbyte-client] .member:hover { outline:1px solid currentColor; }
}