/* Kyoss gradient integration
   Keeps the original layout intact while giving each route its own atmosphere. */

body[data-kg] {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(245, 240, 232, .84), rgba(245, 240, 232, .9)),
    radial-gradient(54% 46% at 94% 11%, rgba(var(--kg-accent-rgb), .27), transparent 72%),
    radial-gradient(48% 42% at 24% 95%, rgba(var(--kg-deep-rgb), .12), transparent 74%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%;
  transition: --kg-1 640ms var(--kg-ease-in-out), --kg-2 640ms var(--kg-ease-in-out), --kg-3 640ms var(--kg-ease-in-out);
}

body[data-kg] .ambient-one {
  background: var(--kg-1);
  opacity: .2;
}

body[data-kg] .ambient-two {
  background: var(--kg-3);
  opacity: .17;
}

.side-rail,
.topbar {
  background-color: rgba(245, 240, 232, .78);
}

.main-nav a[aria-current="page"] {
  background: var(--kg-gradient);
  color: var(--kg-ink);
  box-shadow: 0 13px 30px -18px rgba(var(--kg-accent-rgb), .8);
}

.main-nav a[aria-current="page"] b {
  background: rgba(255, 255, 255, .74);
  color: var(--kg-deep);
}

.rail-profile[aria-current="page"] {
  background: var(--kg-gradient);
  color: var(--kg-ink);
  box-shadow: 0 13px 30px -20px rgba(var(--kg-accent-rgb), .78);
}

.rail-profile[aria-current="page"] small {
  color: currentColor;
  opacity: .72;
}

.create-trigger,
.primary-action,
.feed-composer-trigger > svg,
.send-button,
.profile-clip-actions button:last-child {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.create-trigger {
  background: var(--kg-grad-brand);
  color: #22102e;
  box-shadow: 0 13px 28px -17px rgba(255, 94, 77, .82);
}

.create-trigger:hover {
  background: var(--kg-grad-brand);
}

.primary-action {
  background: var(--kg-grad-primary);
  box-shadow: 0 16px 34px -16px rgba(43, 76, 255, .72);
}

.primary-action:hover {
  box-shadow: 0 21px 42px -17px rgba(43, 76, 255, .82);
}

.primary-action > *,
.create-trigger > *,
.send-button > * {
  position: relative;
  z-index: 3;
}

.vibe-stage {
  box-shadow: 0 30px 82px -39px rgba(var(--kg-accent-rgb), .45), var(--shadow);
}

.vibe-stage::before {
  background: var(--kg-grad-warning);
}

.people-orbit {
  background:
    radial-gradient(54% 48% at 14% 92%, rgba(212, 255, 79, .78), transparent 72%),
    linear-gradient(145deg, #ffd6e0 0%, #ffb3c7 42%, #bfe3ff 100%);
}

.people-orbit::before {
  background: var(--kg-grad-brand);
  box-shadow: -25px 30px 70px rgba(255, 94, 77, .18);
}

.people-orbit::after {
  background: var(--kg-grad-success);
}

.orbit-core {
  background: var(--kg-grad-neutral-dark);
  box-shadow: 0 18px 46px rgba(27, 21, 56, .3);
}

.vibe-selector button.is-active {
  background: var(--kg-gradient);
  border-color: transparent;
  color: var(--kg-ink);
  box-shadow: 0 10px 24px -16px rgba(var(--kg-accent-rgb), .8);
}

.room-mini:hover .room-glyph,
.search-glyph {
  background: var(--kg-tint-strong);
  color: var(--kg-deep);
}

.feed-composer-trigger > svg {
  background: var(--kg-grad-moments);
  color: #1a1040;
}

.aside-color {
  background: var(--kg-grad-moments);
  color: #1a1040;
  box-shadow: 0 22px 50px -34px rgba(255, 77, 109, .5);
}

.aside-color p,
.aside-color a {
  color: inherit;
}

.thread-tabs button.is-active {
  background: var(--kg-grad-conversations);
  color: #fff;
}

.thread-item.is-active {
  background: linear-gradient(110deg, rgba(191, 227, 255, .78), rgba(205, 215, 255, .86));
  box-shadow: inset 4px 0 0 #2b4cff;
}

.message.is-own .message-bubble {
  background: var(--kg-grad-conversations);
  color: #fff;
  box-shadow: 0 12px 28px -20px rgba(10, 31, 184, .85);
}

.send-button {
  background: var(--kg-grad-brand);
  color: #22102e;
}

.chat-confirm-mark {
  background: linear-gradient(135deg, #ffd6e0, #ffb3c7);
}

.profile-color-field {
  background:
    radial-gradient(34% 42% at 82% 18%, rgba(110, 219, 255, .92), transparent 72%),
    var(--kg-grad-profiles);
  box-shadow: 0 28px 70px -35px rgba(183, 140, 255, .62);
}

.profile-color-field > i:nth-of-type(1) {
  background: var(--kg-grad-success);
}

.profile-color-field > i:nth-of-type(2) {
  background: var(--kg-grad-primary);
}

.profile-numbers {
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(53, 228, 255, .26), transparent 68%),
    var(--kg-grad-primary);
}

.profile-feature-track > figure,
.profile-clip-editor {
  background: var(--kg-grad-music);
}

.profile-audio-wave.is-selected i,
.profile-clip-wave::before {
  background: var(--kg-grad-brand);
}

.profile-clip-actions button:last-child {
  border-color: transparent;
  background: var(--kg-grad-success);
  color: #052a25;
}

.match-search-view {
  background:
    radial-gradient(48% 68% at 92% 10%, rgba(212, 255, 79, .13), transparent 74%),
    radial-gradient(58% 70% at 10% 100%, rgba(255, 45, 149, .16), transparent 78%),
    var(--kg-grad-neutral-dark);
}

.match-result-view {
  background:
    linear-gradient(rgba(255, 252, 247, .8), rgba(255, 252, 247, .86)),
    radial-gradient(66% 82% at 100% 0%, #bf3f6b, transparent 72%),
    radial-gradient(70% 80% at 0% 100%, #2b4cff, transparent 74%),
    var(--paper-2);
}

.notification-panel > header,
.modal-shell > header {
  background-image: linear-gradient(90deg, rgba(var(--kg-accent-rgb), .08), transparent 64%);
}

.notification-item.is-new,
.toast {
  border-color: rgba(var(--kg-accent-rgb), .36);
  box-shadow: 0 18px 44px -32px rgba(var(--kg-accent-rgb), .62);
}

@media (prefers-reduced-motion: reduce) {
  body[data-kg],
  body[data-kg] .ambient-one,
  body[data-kg] .ambient-two {
    transition: none;
  }
}

@media (max-width: 1023px) {
  body[data-kg] {
    background-image:
      linear-gradient(rgba(245, 240, 232, .9), rgba(245, 240, 232, .94)),
      radial-gradient(80% 42% at 100% 0%, rgba(var(--kg-accent-rgb), .22), transparent 75%);
  }
}

/* Optional nickname gradient: text-tuned versions of the same Kyoss palettes. */
:root {
  --kg-nick-ember: linear-gradient(120deg, #c52e29, #e84c38 48%, #a96500);
  --kg-nick-cobalt: linear-gradient(120deg, #081b9f, #2344e8 52%, #1745ad);
  --kg-nick-orchid: linear-gradient(120deg, #b71993, #7042c4 52%, #08759f);
  --kg-nick-sorbet: linear-gradient(120deg, #a96500, #ce2d67 52%, #4858c9);
  --kg-nick-cyanpop: linear-gradient(120deg, #007d98, #087b68 52%, #587400);
  --kg-nick-electric: linear-gradient(120deg, #3607b7, #6220e9 52%, #7825df);
  --kg-nick-hotnoon: linear-gradient(120deg, #bd145d, #cf3546 52%, #a95d00);
  --kg-nick-lime: linear-gradient(120deg, #607f00, #12815d 52%, #06736b);
  --kg-nick-voltage: linear-gradient(120deg, #38106f, #4b1b91 52%, #6519ad);
}

html[data-profile-nick] .profile-nick,
html[data-profile-nick] .profile-nick > span {
  color: var(--profile-nick-deep, var(--ink));
  background-image: var(--profile-nick-gradient);
  background-size: 180% 100%;
  background-position: 0 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 640ms var(--kg-ease), color 280ms var(--kg-ease);
}

html[data-profile-nick] .profile-nick:hover,
html[data-profile-nick] .profile-nick:hover > span {
  background-position: 100% 50%;
}

html[data-profile-nick] .rail-profile[aria-current="page"] .profile-nick {
  background: none;
  color: var(--kg-ink);
  -webkit-text-fill-color: currentColor;
}

.profile-nick-editor {
  padding: 25px 26px 27px;
  border-bottom: 1px solid var(--line);
}

.profile-nick-editor > div:first-child > span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
}

.profile-nick-editor h3 {
  margin: 7px 0 4px;
  font-size: 27px;
}

.profile-nick-editor > div:first-child > p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
}

.profile-nick-color-choice {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.profile-nick-swatch {
  position: relative;
  min-width: 0;
  padding: 8px 6px 9px;
  border: 1px solid var(--line);
  border-radius: 15px 6px 15px 15px;
  background: var(--paper);
  cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s, background .25s, box-shadow .25s;
}

.profile-nick-swatch:hover {
  transform: translateY(-2px);
  background: var(--paper-2);
}

.profile-nick-swatch:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.profile-nick-swatch.is-selected {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 8px 18px -14px rgba(43, 76, 255, .85);
}

.profile-nick-swatch > span {
  display: block;
  height: 28px;
  margin-bottom: 7px;
  border-radius: 9px 4px 9px 9px;
  background: var(--nick-option-gradient, var(--paper-3));
}

.profile-nick-swatch strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.profile-nick-swatch.is-selected::after {
  content: "✓";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

@media (max-width: 640px) {
  .profile-nick-editor {
    padding: 23px 20px 25px;
  }

  .profile-nick-color-choice {
    gap: 7px;
  }

  .profile-nick-swatch {
    padding-inline: 4px;
  }

  .profile-nick-swatch strong {
    font-size: 9px;
  }
}

@media (forced-colors: active) {
  html[data-profile-nick] .profile-nick,
  html[data-profile-nick] .profile-nick > span {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}