/* Original interface skins. Load after the feature styles so a skin can also replace
   their fixed colours without changing layout, media, avatars or user role colours. */

/* Neon Grid: black glass, electric cyan circuits and amber signal lights. The grid is
   static and confined to the chrome; the conversation stays on a quiet solid surface. */
:root[data-theme="neon-grid"] {
  --bg-rail: #050b12;
  --bg-sidebar: #08131d;
  --bg-chat: #0b1722;
  --bg-input: #101f2c;
  --bg-hover: #132c39;
  --bg-active: #173b48;
  --bg-mention: rgba(255, 180, 95, 0.1);
  --border: #214354;
  --text: #d7e8ef;
  --text-muted: #92afc0;
  --text-strong: #effcff;
  --accent: #53e7f3;
  --accent-hover: #8af2fa;
  --danger: #ff7189;
  --online: #59e1ae;
  --link: #4aa3ff; /* blue, not the cyan of body text: links in messages are not underlined until hovered */
  --bg-panel: #06101a;
  --warning: #ffb45f;
  --status-idle: #ffb45f;
  --status-offline: #7893a3;
  --mention-bg: rgba(83, 231, 243, 0.13);
  --mention-text: #91f5ff;
  --overlay-subtle: rgba(112, 208, 234, 0.09);
  --spoiler-hidden: #1d3644; /* lighter than the chat, so a hidden spoiler shows as a bar */
  --spoiler-hidden-hover: #2a4e60;
  --text-faint: #718a9a;
  --auth-glow: #123d50;
  --radius: 6px;
  --neon-ink: #041116;
  --neon-edge: rgba(83, 231, 243, 0.32);
  --neon-grid: rgba(83, 231, 243, 0.035);
  color-scheme: dark;
}

:root[data-theme="neon-grid"] ::selection { background: #276579; color: #fff; }
:root[data-theme="neon-grid"] :focus-visible { outline-color: var(--accent); }
:root[data-theme="neon-grid"] :is(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; }
:root[data-theme="neon-grid"] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--accent); }

/* The three navigation surfaces read as separate dark instrument panels. No overlays
   intercept pointer events or alter stacking for message actions, popouts or calls. */
:root[data-theme="neon-grid"] :is(.guild-rail, .sidebar, .member-list, .settings-nav) {
  background-image:
    linear-gradient(var(--neon-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--neon-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}
:root[data-theme="neon-grid"] .guild-rail { box-shadow: inset -1px 0 0 var(--neon-edge); }
:root[data-theme="neon-grid"] .sidebar { box-shadow: inset -1px 0 0 var(--border); }
:root[data-theme="neon-grid"] .member-list { box-shadow: inset 1px 0 0 var(--border); }
:root[data-theme="neon-grid"] #titlebar { box-shadow: inset 0 -1px 0 var(--border); }
:root[data-theme="neon-grid"] .titlebar-drag { color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase; }
:root[data-theme="neon-grid"] :is(.sidebar-header, .chat-header, .search-panel-header) {
  background-color: var(--bg-sidebar);
  background-image: linear-gradient(90deg, rgba(83, 231, 243, 0.07), transparent 65%);
  box-shadow: 0 1px 0 rgba(83, 231, 243, 0.08);
}
:root[data-theme="neon-grid"] .chat-header .channel-title::before { color: var(--accent); }
:root[data-theme="neon-grid"] :is(.channel-category, .member-group, .settings-nav .profile-section-title, .friends-heading) {
  color: #a2c6d4;
  letter-spacing: 0.1em;
  font-size: 11px;
}
:root[data-theme="neon-grid"] .guild-icon {
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px var(--border);
  background-color: #0e202c;
}
:root[data-theme="neon-grid"] .guild-icon:hover,
:root[data-theme="neon-grid"] .guild-icon.active {
  border-radius: 12px;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 16px rgba(83, 231, 243, 0.18);
}
:root[data-theme="neon-grid"] .guild-icon.action:hover,
:root[data-theme="neon-grid"] .guild-icon.update-ready { background: var(--online); }
:root[data-theme="neon-grid"] .guild-icon::before { background: var(--accent); box-shadow: 0 0 10px rgba(83, 231, 243, 0.5); }
:root[data-theme="neon-grid"] .rail-separator { height: 1px; background: var(--border); }
:root[data-theme="neon-grid"] :is(.channel, .settings-nav button, .qs-row, .role-row) { border-radius: 3px; }
:root[data-theme="neon-grid"] :is(.channel.active, .settings-nav button.active, .qs-row.active, .role-row.active) {
  background: linear-gradient(90deg, #173b48, #102631);
  box-shadow: inset 2px 0 0 var(--accent), inset 0 0 0 1px rgba(83, 231, 243, 0.1);
  color: var(--text-strong);
}
:root[data-theme="neon-grid"] .channel.active > .icon { color: var(--accent); opacity: 1; }
:root[data-theme="neon-grid"] .channel.unread:not(.active) { color: #c7f8fc; }
:root[data-theme="neon-grid"] .user-panel { box-shadow: inset 0 1px 0 var(--border); }

/* Cyan geometry frames the history start; no texture sits behind message text. */
:root[data-theme="neon-grid"] .channel-start {
  background-image: linear-gradient(90deg, var(--accent), rgba(83, 231, 243, 0.12) 36%, transparent 80%);
  background-size: calc(100% - 32px) 1px;
  background-position: 16px bottom;
  background-repeat: no-repeat;
}
:root[data-theme="neon-grid"] .channel-start h2 { letter-spacing: -0.025em; }
:root[data-theme="neon-grid"] .message:hover,
:root[data-theme="neon-grid"] .message.menu-target { background: rgba(83, 231, 243, 0.035); }
:root[data-theme="neon-grid"] .message.mentioned,
:root[data-theme="neon-grid"] .message.mentioned:hover { background: var(--bg-mention); }
:root[data-theme="neon-grid"] .message.reply-target { background: rgba(83, 231, 243, 0.07); }
:root[data-theme="neon-grid"] .message .actions { box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35); }
:root[data-theme="neon-grid"] .reaction.me,
:root[data-theme="neon-grid"] .poll-answer.choice.selected { background: var(--mention-bg); }
:root[data-theme="neon-grid"] .poll-answer.mine .poll-bar { background: rgba(83, 231, 243, 0.18); }
:root[data-theme="neon-grid"] .search-highlight { background: rgba(255, 180, 95, 0.22); color: #ffe2bf; }
:root[data-theme="neon-grid"] .content pre { border-left: 2px solid var(--neon-edge); }
/* The rail and sidebar fills sit too close to the chat for inline code and link previews, so
   both get the panel outline. */
:root[data-theme="neon-grid"] .content code { box-shadow: inset 0 0 0 1px var(--border); }
:root[data-theme="neon-grid"] .content pre code { box-shadow: none; }
:root[data-theme="neon-grid"] .embed:not(.bare) { box-shadow: inset 0 0 0 1px var(--border); }
:root[data-theme="neon-grid"] :is(.poll, .file-card, .search-result, .pin-item, .inbox-item, .active-now-card) {
  box-shadow: inset 0 1px 0 rgba(83, 231, 243, 0.045);
}
:root[data-theme="neon-grid"] .composer {
  box-shadow: inset 0 0 0 1px var(--border), inset 3px 0 0 var(--neon-edge);
}
:root[data-theme="neon-grid"] .composer:focus-within {
  box-shadow: inset 0 0 0 1px var(--accent), inset 3px 0 0 var(--accent), 0 0 18px rgba(83, 231, 243, 0.055);
}
:root[data-theme="neon-grid"] :is(.attach-button, .emoji-button):hover { color: var(--accent); }
:root[data-theme="neon-grid"] .reply-bar { box-shadow: inset 0 1px 0 var(--border), inset 3px 0 0 var(--neon-edge); }

/* Frames are painted with inset shadows to preserve all existing dialog dimensions. */
:root[data-theme="neon-grid"] :is(.settings, .modal, .quick-switcher, .auth-card) {
  box-shadow: inset 0 0 0 1px var(--neon-edge), 0 0 0 1px #02080e,
    0 24px 80px rgba(0, 0, 0, 0.6), 0 0 36px rgba(83, 231, 243, 0.05);
}
:root[data-theme="neon-grid"] :is(.settings, .modal, .quick-switcher)::backdrop { background: rgba(1, 6, 12, 0.82); }
:root[data-theme="neon-grid"] .settings-nav { box-shadow: inset -1px 0 0 var(--border); }
:root[data-theme="neon-grid"] .settings-content > h2 { letter-spacing: -0.025em; }
:root[data-theme="neon-grid"] :is(.context-menu, .status-menu, .profile-card, .incoming-call, .transfers-panel, .search-suggestions, .emoji-autocomplete, .emoji-picker, .pins-popout, .inbox-popout) {
  box-shadow: inset 0 0 0 1px var(--neon-edge), 0 12px 40px rgba(0, 0, 0, 0.55);
}
:root[data-theme="neon-grid"] .toast { background: #10212d; border-top-color: var(--neon-edge); }
:root[data-theme="neon-grid"] .save-bar { box-shadow: inset 0 0 0 1px var(--border), 0 4px 16px rgba(0, 0, 0, 0.5); }
:root[data-theme="neon-grid"] .drop-overlay { background: rgba(4, 28, 39, 0.94); }
:root[data-theme="neon-grid"] .drop-card { border-color: var(--accent); color: var(--text-strong); box-shadow: 0 0 40px rgba(83, 231, 243, 0.1); }
:root[data-theme="neon-grid"] .drop-card .muted { color: var(--text-muted); }

/* Native-bright cyan, mint and coral fills need dark ink, including small hover states.
   Keep this list explicit: avatars and role swatches may contain user-chosen colours. */
:root[data-theme="neon-grid"] :is(
  button.primary, a.download-button, .guild-icon:hover, .guild-icon.active,
  .guild-icon.update-ready, .guild-icon.action:hover, .guild-icon.home-button.active,
  .guild-icon.home-button:hover, .context-menu-item:focus:not(.disabled), .context-menu-check.on,
  .status-option:hover, .status-option:hover .small, .attach-menu .status-option:hover .icon,
  .spacing-options button[aria-checked="true"], .transfers-count, .timeout-preset.selected,
  .jump-bar, .jump-bar .jump-present, .unread-bar, .unread-bar button, a.app-link:hover,
  .content .mention.clickable:hover, .content .mention.clickable:focus-visible,
  .pin-jump:hover, .inbox-jump:hover, .search-jump:hover,
  .search-page-button:hover:not(:disabled), .poll-view:hover, .poll-answer.selected .poll-check,
  .friends-tab.friends-tab-add:not(.active), .dm-join-call, .dm-join-call .icon,
  .incoming-call-button.accept, .invite-card-join:not(.joined, :disabled), .tri-option.allow.selected,
  .server-icon-preview, .call-popout-avatar, .appearance-preview .avatar
) { color: var(--neon-ink); }
:root[data-theme="neon-grid"] :is(
  .danger-button, .guild-admin-modal .modal-actions button.danger-button,
  .attachment-modal .modal-actions button.danger-button, .context-menu-item.danger:focus,
  .titlebar-controls button.close:hover, .connection-banner, .pending .remove,
  .live-badge, .call-bar button.active-off, .call-bar button.hangup,
  .call-popout-bar button.active-off, .call-popout-bar button.hangup,
  .member .mod-actions button.danger:hover, .incoming-call-button.decline,
  .voice-chat-button .mention-badge, .channel-mention-badge, .guild-mention-badge,
  .rail-badge, .inbox-badge, .qs-badge, .new-messages-divider span,
  .tri-option.deny.selected, .ban-row button.revoke-ban:hover
) { color: var(--neon-ink); }
:root[data-theme="neon-grid"] button.primary,
:root[data-theme="neon-grid"] a.download-button { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
:root[data-theme="neon-grid"] button.primary:hover,
:root[data-theme="neon-grid"] a.download-button:hover { box-shadow: 0 0 18px rgba(83, 231, 243, 0.18); }
:root[data-theme="neon-grid"] .context-menu-item:focus .context-menu-check { border-color: currentColor; }
:root[data-theme="neon-grid"] .context-menu-item:focus .context-menu-check.on { background: var(--neon-ink); color: var(--accent); }
:root[data-theme="neon-grid"] .switch-input:checked + .switch::after { background: var(--neon-ink); }

/* Calls retain black video surfaces; edge lights are outside the media. */
:root[data-theme="neon-grid"] .call-view { background: #03080e; }
:root[data-theme="neon-grid"] .tile:not(.speaking) { box-shadow: 0 0 0 1px var(--border); }
:root[data-theme="neon-grid"] .tile.speaking { box-shadow: 0 0 0 2px var(--online), 0 0 18px rgba(89, 225, 174, 0.14); }
:root[data-theme="neon-grid"] .call-bar button { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--border); }
:root[data-theme="neon-grid"] .call-bar button.on { background: var(--accent); color: var(--neon-ink); }
:root[data-theme="neon-grid"] .voice-panel .controls button { box-shadow: inset 0 0 0 1px var(--border); }
:root[data-theme="neon-grid"] .voice-panel .controls button.on { box-shadow: inset 0 0 0 1px rgba(89, 225, 174, 0.4); }

/* An original CSS-only grid on the sign-in screen. No downloaded artwork or fonts. */
:root[data-theme="neon-grid"] .auth {
  background-image:
    radial-gradient(ellipse at 50% 35%, rgba(21, 74, 93, 0.6), transparent 60%),
    linear-gradient(rgba(83, 231, 243, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 231, 243, 0.065) 1px, transparent 1px);
  background-color: var(--bg-rail);
  background-size: auto, 48px 48px, 48px 48px;
}
:root[data-theme="neon-grid"] .auth-card { border-top: 2px solid var(--accent); }
:root[data-theme="neon-grid"] .auth-card h1 { color: var(--accent); text-transform: uppercase; letter-spacing: 0.2em; }

/* Message navigation uses one brief acknowledgement; the skin itself never animates. */
:root[data-theme="neon-grid"] .message.jump-flash { animation-name: neon-grid-jump; }
@keyframes neon-grid-jump {
  0%, 30% { background: rgba(83, 231, 243, 0.15); }
  100% { background: transparent; }
}
:root[data-theme="neon-grid"][data-reduced-motion="reduce"] .message.jump-flash { animation: none; background: rgba(83, 231, 243, 0.1); }