/* Avanza AI Studio v71 — demo refinement
   Scope: demo invitation and immersive demo only. The hero and global site system are untouched. */

/* Invitation: cleaner interaction, quieter motion, no directional icon dependency. */
.demo-launch-primary {
  min-width: min(100%, 258px);
  justify-content: center;
  gap: 0;
}

.demo-launch-preview {
  transform: none;
  box-shadow: 0 42px 110px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .42s cubic-bezier(.16,1,.3,1), border-color .28s ease, box-shadow .36s ease, background .28s ease;
}

.demo-launch-preview::after {
  opacity: .28;
}

.demo-launch-preview:hover,
.demo-launch-preview:focus-visible {
  border-color: rgba(255,255,255,.24);
  background:
    radial-gradient(circle at 75% 15%, rgba(255,255,255,.105), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.088), rgba(255,255,255,.03));
  box-shadow: 0 54px 126px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.14);
  transform: translateY(-3px);
}

.demo-preview-query {
  justify-content: flex-start;
  padding-right: 20px;
}

.demo-preview-enter {
  justify-content: center;
  min-height: 56px;
  color: rgba(255,255,255,.69);
  letter-spacing: .01em;
  transition: color .24s ease, background .24s ease;
}

.demo-launch-preview:hover .demo-preview-enter,
.demo-launch-preview:focus-visible .demo-preview-enter {
  color: #fff;
  background: rgba(255,255,255,.025);
}

/* Immersive mode: viewport-aware product framing instead of edge-to-edge enlargement. */
.demo-experience-canvas {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(18px, min(2.5vw, 3.8dvh), 46px) clamp(22px, min(5vw, 6dvh), 96px) clamp(24px, min(3.4vw, 5dvh), 62px);
}

.demo-experience .agent-console {
  width: min(88vw, 1920px);
  height: min(79dvh, 1040px);
  max-width: 100%;
  max-height: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: clamp(20px, min(1.55vw, 2.5dvh), 30px);
  background:
    radial-gradient(circle at 84% 0%, rgba(255,255,255,.045), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.058), rgba(255,255,255,.017));
  box-shadow: 0 30px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.085);
}

.demo-experience .agent-console-topbar {
  min-height: clamp(60px, min(4.4vw, 7dvh), 74px);
}

.demo-experience .agent-chat-thread {
  padding: clamp(18px, min(1.55vw, 2.65dvh), 28px);
}

.demo-experience .agent-empty-state {
  padding-block: clamp(18px, min(2vw, 3.2dvh), 34px);
}

.demo-experience .agent-starter-grid {
  width: min(100%, 900px);
  gap: clamp(8px, min(.7vw, 1.2dvh), 12px);
  margin-top: clamp(18px, min(1.65vw, 2.7dvh), 25px);
}

.demo-experience .agent-starter-grid button {
  min-height: clamp(76px, min(6vw, 9.5dvh), 88px);
  padding: clamp(14px, min(1vw, 1.8dvh), 18px) clamp(16px, 1.05vw, 20px);
}

.demo-experience .agent-empty-orb {
  margin-bottom: clamp(10px, 1.35dvh, 14px);
}

/* Short desktop/laptop viewports get a deliberately tighter composition. */
@media (min-width: 721px) and (max-height: 800px) {
  .demo-experience-header {
    min-height: 62px;
    padding-block: 8px;
  }

  .demo-experience-canvas {
    padding-block: 14px 20px;
  }

  .demo-experience .agent-console {
    width: min(88vw, 1680px);
    height: min(80dvh, 720px);
  }

  .demo-experience .agent-console-topbar {
    min-height: 58px;
    padding-block: 9px;
  }

  .demo-experience .agent-conversation-head {
    padding-block: 13px;
  }

  .demo-experience .agent-chat-thread {
    padding-block: 16px;
  }

  .demo-experience .agent-empty-state {
    padding-block: 14px;
  }

  .demo-experience .agent-empty-orb {
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
  }

  .demo-experience .agent-empty-orb span {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .demo-experience .agent-empty-orb img {
    width: 28px;
  }

  .demo-experience .agent-empty-state h3 {
    margin-top: 7px;
    font-size: clamp(1.65rem, 4.2dvh, 2.15rem);
  }

  .demo-experience .agent-empty-state > p {
    margin-top: 8px;
    font-size: .82rem;
    line-height: 1.58;
  }

  .demo-experience .agent-starter-grid {
    margin-top: 16px;
  }

  .demo-experience .agent-starter-grid button {
    min-height: 70px;
    padding-block: 13px;
  }

  .demo-experience .agent-console-footer {
    min-height: 40px;
    padding-block: 10px;
  }
}

/* Tablet and mobile remain native-size application layouts for readability. */
@media (max-width: 720px) {
  .demo-preview-enter {
    min-height: 54px;
  }

  .demo-experience-canvas {
    display: block;
    overflow: hidden;
    padding: 0;
  }

  .demo-experience .agent-console {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-launch-preview,
  .demo-preview-enter {
    transition: none !important;
  }
}