/* JOY AI — premium desktop counterpart to the approved compact mobile treatment.
   Scoped to the Auto Exchange hero on desktop widths only. The official JOY
   Automart logo/header asset and all concierge behavior remain untouched. */

@media (min-width: 901px) {
  .jae-hero__content {
    width: min(790px, 55vw);
  }

  .jae-concierge__panel--hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: 760px;
    margin-top: 24px;
    padding: 18px;
    gap: 14px;
    border-radius: 28px;
    border-color: rgba(197, 148, 47, 0.48);
    backdrop-filter: blur(28px) saturate(138%);
    -webkit-backdrop-filter: blur(28px) saturate(138%);
  }

  .jae-home--dark .jae-concierge__panel--hero {
    background:
      radial-gradient(circle at 85% 30%, rgba(204, 151, 47, 0.105), transparent 31%),
      linear-gradient(155deg, rgba(14, 14, 13, 0.965), rgba(6, 6, 6, 0.985));
    box-shadow:
      inset 0 1px 0 rgba(255, 225, 154, 0.09),
      inset 0 0 58px rgba(185, 127, 20, 0.04),
      0 30px 72px -42px rgba(0, 0, 0, 0.96);
  }

  .jae-home--light .jae-concierge__panel--hero {
    background:
      radial-gradient(circle at 85% 30%, rgba(198, 143, 41, 0.075), transparent 32%),
      linear-gradient(155deg, rgba(255, 254, 250, 0.985), rgba(250, 246, 237, 0.965));
    border-color: rgba(190, 139, 39, 0.5);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 0 54px rgba(174, 119, 23, 0.028),
      0 28px 64px -42px rgba(88, 62, 17, 0.28);
  }

  /* Fine orbital engraving mirrors the approved mobile treatment while using
     the extra desktop canvas rather than adding another content card. */
  .jae-concierge__panel--hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 108px;
    right: -48px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.6;
    background:
      radial-gradient(circle at center, rgba(228, 178, 74, 0.82) 0 3px, rgba(228, 178, 74, 0.2) 4px 7px, transparent 8px),
      repeating-radial-gradient(circle at center, transparent 0 24px, rgba(203, 152, 52, 0.19) 25px 26px, transparent 27px 39px);
    mask-image: radial-gradient(circle at center, #000 0 59%, transparent 84%);
    -webkit-mask-image: radial-gradient(circle at center, #000 0 59%, transparent 84%);
  }

  .jae-home--light .jae-concierge__panel--hero::after {
    opacity: 0.76;
  }

  .jae-concierge__panel--hero .jae-concierge__bar {
    position: relative;
    z-index: 1;
    min-height: 68px;
    gap: 14px;
    padding: 3px 6px 14px;
    margin: 0;
    border-bottom-color: color-mix(in srgb, var(--jae-border) 74%, transparent);
  }

  .jae-concierge__panel--hero .jae-concierge__avatar {
    width: 50px;
    height: 50px;
    box-shadow:
      0 0 0 1px rgba(216, 169, 66, 0.72),
      0 0 0 5px rgba(212, 175, 55, 0.075),
      0 10px 24px -13px rgba(212, 175, 55, 0.78);
  }

  .jae-concierge__panel--hero .jae-concierge__avatar svg {
    width: 19px;
    height: 19px;
  }

  .jae-concierge__panel--hero .jae-concierge__identity {
    gap: 3px;
  }

  .jae-concierge__panel--hero .jae-concierge__identity strong {
    font-size: 17px;
    letter-spacing: 0.115em;
  }

  .jae-concierge__panel--hero .jae-concierge__identity small {
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.025em;
  }

  .jae-concierge__panel--hero .jae-concierge__thread {
    position: relative;
    z-index: 1;
    gap: 11px;
    max-height: min(31vh, 265px);
    padding: 0;
  }

  .jae-concierge__panel--hero .jae-concierge__thread--intro {
    min-height: 150px;
    padding: 0;
  }

  .jae-concierge__panel--hero .jae-concierge__thread--intro .jae-concierge__message {
    width: 64%;
    max-width: 64%;
    margin: 0;
  }

  .jae-concierge__panel--hero .jae-concierge__thread--intro .jae-concierge__badge {
    display: none;
  }

  .jae-concierge__panel--hero .jae-concierge__thread--intro .jae-concierge__message > div {
    width: 100%;
    padding: 16px 18px;
    border-radius: 20px;
    border-bottom-left-radius: 20px;
    font-size: 14.4px;
    line-height: 1.52;
    letter-spacing: -0.006em;
    box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.78);
  }

  .jae-home--dark .jae-concierge__panel--hero .jae-concierge__thread--intro .jae-concierge__message > div {
    background: rgba(14, 14, 14, 0.79);
    border-color: rgba(193, 145, 48, 0.4);
  }

  .jae-home--light .jae-concierge__panel--hero .jae-concierge__thread--intro .jae-concierge__message > div {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(186, 135, 38, 0.43);
    box-shadow: 0 18px 36px -28px rgba(90, 61, 15, 0.3);
  }

  .jae-concierge__panel--hero .jae-concierge__composer {
    position: relative;
    z-index: 2;
    min-height: 58px;
    align-items: center;
    gap: 9px;
    padding: 5px 6px 5px 47px;
    border-radius: 20px;
    border-color: rgba(194, 144, 44, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .jae-concierge__panel--hero .jae-concierge__composer::before {
    content: "✦";
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--jae-gold);
    font-size: 21px;
    line-height: 1;
    text-shadow: 0 0 14px rgba(214, 164, 58, 0.28);
    pointer-events: none;
  }

  .jae-concierge__panel--hero .jae-concierge__composer textarea {
    min-height: 46px;
    max-height: 112px;
    padding: 11px 0 9px;
    font-size: 14.2px;
    line-height: 1.45;
  }

  .jae-concierge__panel--hero .jae-concierge__composer-actions {
    gap: 5px;
  }

  .jae-concierge__panel--hero .jae-concierge__restart,
  .jae-concierge__panel--hero .jae-concierge__send {
    min-width: 46px;
    min-height: 46px;
    width: 46px;
    height: 46px;
  }

  .jae-concierge__panel--hero .jae-concierge__send {
    border: 1px solid rgba(255, 229, 164, 0.46);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.44),
      0 12px 26px -15px rgba(207, 151, 39, 0.84);
  }

  .jae-concierge__panel--hero .jae-concierge__chips {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
  }

  .jae-concierge__panel--hero .jae-concierge__chips button {
    width: 100%;
    min-height: 43px;
    padding: 8px 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 999px;
    border-color: rgba(190, 140, 40, 0.4);
    font-size: 12.2px;
    letter-spacing: 0;
  }

  .jae-concierge__panel--hero .jae-concierge__chips button:nth-child(n + 3) {
    display: none;
  }

  .jae-home--dark .jae-concierge__panel--hero .jae-concierge__chips button {
    background: rgba(7, 7, 7, 0.4);
  }

  .jae-home--light .jae-concierge__panel--hero .jae-concierge__chips button {
    background: rgba(255, 255, 255, 0.5);
  }

  .jae-concierge__panel--hero .jae-concierge__footnote {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 72px;
    padding: 0;
    border: 1px solid rgba(190, 140, 40, 0.42);
    border-radius: 20px;
    overflow: hidden;
  }

  .jae-concierge__panel--hero .jae-concierge__footnote > span {
    display: none;
  }

  .jae-concierge__panel--hero .jae-concierge__footnote > a {
    position: relative;
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 16px 70px 12px 61px;
    color: var(--jae-text);
    font-size: 13px;
    line-height: 1.05;
    letter-spacing: 0.12em;
  }

  .jae-concierge__panel--hero .jae-concierge__footnote > a::before {
    content: "◇";
    position: absolute;
    left: 18px;
    top: 17px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--jae-gold);
    border: 1px solid rgba(202, 151, 50, 0.72);
    transform: rotate(45deg);
    border-radius: 5px;
    font-size: 15px;
  }

  .jae-concierge__panel--hero .jae-concierge__footnote > a::after {
    content: "65B+ parts · Global inventory";
    position: absolute;
    left: 61px;
    top: 41px;
    color: var(--jae-faint);
    font-size: 11.7px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: none;
  }

  .jae-concierge__panel--hero .jae-concierge__footnote > a > svg {
    position: absolute;
    right: 13px;
    top: 12px;
    width: 48px;
    height: 48px;
    padding: 14px;
    border-radius: 50%;
    border: 1px solid rgba(205, 154, 51, 0.46);
    color: #171005;
    background: linear-gradient(140deg, var(--jae-gold-metal), var(--jae-gold-soft));
    box-shadow: 0 11px 22px -15px rgba(205, 150, 43, 0.82);
  }

  .jae-home--dark .jae-concierge__panel--hero .jae-concierge__footnote {
    background: linear-gradient(100deg, rgba(10, 10, 10, 0.84), rgba(16, 13, 8, 0.58));
  }

  .jae-home--light .jae-concierge__panel--hero .jae-concierge__footnote {
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.72), rgba(250, 245, 233, 0.82));
  }

  .jae-concierge__panel--hero .jae-concierge__message {
    max-width: 88%;
  }

  .jae-concierge__panel--hero .jae-concierge__message > div {
    padding: 11px 14px;
    font-size: 13.5px;
    line-height: 1.5;
  }

  .jae-concierge__panel--hero .jae-concierge__vehicle {
    min-height: 42px;
  }

  .jae-concierge__panel--hero .jae-concierge__action {
    min-height: 42px;
    padding-inline: 15px;
  }

  /* Preserve the existing Explore/Sell functions while making them visually
     subordinate to JOY AI, matching the approved compact hierarchy. */
  .jae-hero__actions {
    gap: 10px;
    margin-top: 16px;
  }

  .jae-hero__actions a {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.075em;
  }
}

@media (min-width: 1280px) {
  .jae-hero__content {
    width: min(820px, 56vw);
  }

  .jae-concierge__panel--hero {
    max-width: 790px;
  }
}