/* Avanza AI Studio v77 — premium demo polish
   Scope: demo invitation and full-screen Agent workspace only. */

/* ---------- Invitation ---------- */
.agent-demo {
  background:
    radial-gradient(circle at 72% 20%, rgba(255,255,255,.09), transparent 31%),
    radial-gradient(circle at 10% 96%, rgba(255,255,255,.045), transparent 28%),
    linear-gradient(145deg, #151619 0%, #08090a 60%, #050506 100%);
}

.demo-launch-layout {
  grid-template-columns: minmax(350px, .82fr) minmax(580px, 1.18fr);
  gap: clamp(58px, 7vw, 116px);
}

.demo-launch-copy h2 {
  max-width: 650px;
  font-size: clamp(3.25rem, min(4.85vw, 7.2svh), 5.7rem);
  line-height: .96;
  letter-spacing: -.068em;
}

.demo-launch-lede {
  max-width: 560px;
  color: rgba(255,255,255,.62);
  font-size: clamp(.95rem, .96vw, 1.06rem);
  line-height: 1.68;
}

.demo-launch-primary,
.demo-launch-secondary {
  min-height: 52px;
  border-radius: 999px;
}

.demo-launch-primary {
  min-width: 178px;
  padding-inline: 25px;
  box-shadow: 0 16px 38px rgba(0,0,0,.28), inset 0 1px 0 #fff;
}

.demo-launch-secondary {
  padding-inline: 23px;
}

.demo-launch-meta {
  gap: 12px 20px;
  color: rgba(255,255,255,.48);
  font-size: clamp(.66rem, .65vw, .73rem);
}

.demo-launch-preview {
  border-color: rgba(255,255,255,.13);
  border-radius: clamp(24px, 1.8vw, 31px);
  background:
    radial-gradient(circle at 76% 8%, rgba(255,255,255,.08), transparent 31%),
    linear-gradient(145deg, rgba(255,255,255,.068), rgba(255,255,255,.022));
  box-shadow: 0 45px 115px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.1);
}

.demo-launch-preview::after {
  display: none;
}

.demo-launch-preview:hover,
.demo-launch-preview:focus-visible {
  border-color: rgba(255,255,255,.23);
  box-shadow: 0 55px 132px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.14);
  transform: translateY(-3px);
}

.demo-preview-bar {
  min-height: clamp(62px, 4.6vw, 72px);
  padding-inline: clamp(17px, 1.35vw, 22px);
}

.demo-preview-brand > span {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.demo-preview-brand img {
  width: 22px;
}

.demo-preview-live {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}

.demo-preview-content {
  min-height: clamp(405px, min(32vw, 52svh), 535px);
  padding-block: clamp(34px, 3.5vw, 58px);
}

.demo-preview-orb {
  width: 54px;
  height: 54px;
  border-radius: 17px;
}

.demo-preview-content > strong {
  max-width: 620px;
  font-size: clamp(1.65rem, min(2.1vw, 3.35svh), 2.25rem);
}

.demo-preview-query {
  width: min(100%, 560px);
  min-height: 60px;
  border-radius: 17px;
  background: rgba(255,255,255,.045);
}

.demo-preview-results {
  width: min(100%, 560px);
}

.demo-preview-results > span {
  min-height: 72px;
  border-radius: 13px;
  background: rgba(255,255,255,.02);
}

.demo-preview-enter {
  min-height: 52px;
  color: rgba(255,255,255,.62);
  font-size: .67rem;
  font-weight: 650;
}

/* ---------- Full-screen application shell ---------- */
.demo-experience {
  --demo-sidebar: clamp(218px, 16.4vw, 246px);
  --demo-topbar: 64px;
  background: #111214;
}

.demo-experience .agent-app-sidebar {
  padding: 14px 11px 12px;
}

.agent-sidebar-brand {
  min-height: 46px;
  padding: 3px 9px 11px;
}

.agent-sidebar-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.agent-sidebar-mark img {
  width: 19px;
}

.agent-sidebar-brand strong {
  font-size: .8rem;
}

.agent-sidebar-brand small {
  font-size: .55rem;
}

.agent-sidebar-new {
  min-height: 42px;
  border-radius: 12px;
  font-size: .68rem;
}

.agent-sidebar-section {
  gap: 4px;
  margin-top: 20px;
}

.agent-sidebar-section > small {
  padding-inline: 11px;
  color: rgba(255,255,255,.34);
  font-size: .49rem;
  letter-spacing: .14em;
}

.agent-sidebar-thread {
  min-height: 39px;
  border-radius: 10px;
  color: rgba(255,255,255,.5);
  font-size: .65rem;
  transition: color .2s ease, background .2s ease;
}

.agent-sidebar-thread.is-active {
  color: rgba(255,255,255,.94);
  background: rgba(255,255,255,.075);
}

.agent-sidebar-systems {
  padding: 12px 11px;
  border-radius: 12px;
}

.agent-sidebar-systems span {
  font-size: .59rem;
}

.agent-sidebar-systems small {
  font-size: .5rem;
  line-height: 1.55;
}

.agent-sidebar-profile {
  padding-inline: 7px;
}

.agent-sidebar-profile strong {
  font-size: .61rem;
}

.agent-sidebar-profile small {
  font-size: .49rem;
}

.demo-experience .agent-console-main {
  background:
    radial-gradient(circle at 56% -14%, rgba(255,255,255,.027), transparent 31%),
    #151617;
}

.demo-experience .agent-console-topbar {
  padding-inline: clamp(15px, 1.45vw, 24px) !important;
  border-bottom-color: rgba(255,255,255,.065);
  background: rgba(21,22,23,.9);
}

.demo-experience .agent-console-brand {
  gap: 10px;
}

.demo-experience .agent-console-mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.demo-experience .agent-console-brand strong {
  font-size: .78rem;
  letter-spacing: -.02em;
}

.demo-experience .agent-console-brand small {
  color: rgba(255,255,255,.4);
  font-size: .54rem;
}

.agent-console-actions {
  gap: 8px;
}

.demo-experience .agent-console-state {
  min-height: 34px;
  border-color: transparent;
  background: transparent;
  font-size: .58rem;
}

.agent-theme-switch,
.agent-topbar-reset,
.demo-experience-back {
  min-height: 36px;
  border-radius: 999px;
}

.agent-theme-switch {
  padding-inline: 11px 9px;
}

.demo-experience-back {
  padding-inline: 13px 11px;
}

.demo-experience .agent-workspace {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

.demo-experience .agent-conversation-head {
  min-height: 48px;
  padding-inline: clamp(20px, 2.2vw, 34px) !important;
}

.demo-experience .agent-conversation-head small {
  font-size: .48rem;
  letter-spacing: .11em;
}

.demo-experience .agent-conversation-head strong {
  margin-top: 3px;
  font-size: .65rem;
}

.agent-conversation-context {
  font-size: .52rem;
}

.demo-experience .agent-chat-thread {
  padding: clamp(24px, 3.4dvh, 44px) clamp(22px, 4.4vw, 82px) !important;
}

.demo-experience .agent-empty-state {
  width: min(100%, 900px);
  padding-bottom: clamp(42px, 6dvh, 72px) !important;
}

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

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

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

.demo-experience .agent-empty-state > small {
  font-size: .51rem;
  letter-spacing: .16em;
}

.demo-experience .agent-empty-state h3 {
  max-width: 760px;
  margin-top: 11px;
  font-size: clamp(2.25rem, min(3.8vw, 5.5dvh), 3.55rem);
  line-height: .98;
  letter-spacing: -.058em;
}

.demo-experience .agent-empty-state > p {
  max-width: 590px;
  margin-top: 16px;
  font-size: clamp(.8rem, .82vw, .9rem);
  line-height: 1.66;
}

.demo-experience .agent-starter-grid {
  width: min(100%, 800px) !important;
  gap: 10px !important;
  margin-top: clamp(25px, 3.5dvh, 36px) !important;
}

.demo-experience .agent-starter-grid button {
  position: relative;
  min-height: 82px !important;
  padding: 17px 19px !important;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.demo-experience .agent-starter-grid button::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.06), transparent 72%);
  content: "";
  opacity: 0;
  transform: translateX(-25%);
  transition: opacity .24s ease, transform .5s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}

.demo-experience .agent-starter-grid button:hover::after,
.demo-experience .agent-starter-grid button:focus-visible::after {
  opacity: 1;
  transform: translateX(22%);
}

.demo-experience .agent-starter-grid small {
  font-size: .49rem;
  letter-spacing: .13em;
}

.demo-experience .agent-starter-grid strong {
  margin-top: 8px;
  font-size: .76rem;
  line-height: 1.4;
}

/* Conversation: remove the box-inside-a-box feeling. */
.demo-experience .agent-messages {
  width: min(100%, 980px);
  gap: 24px;
}

.demo-experience .owner-message {
  width: min(82%, 600px);
  padding: 14px 17px;
  border-radius: 16px 16px 5px 16px;
}

.demo-experience .owner-message small,
.demo-experience .agent-message small {
  font-size: .52rem;
  letter-spacing: .11em;
}

.demo-experience .owner-message p {
  margin-top: 7px;
  font-size: .9rem;
  line-height: 1.48;
}

.demo-experience .agent-message-main {
  gap: 11px;
}

.demo-experience .agent-avatar {
  width: 39px;
  height: 39px;
  border-radius: 12px;
}

.demo-experience .agent-avatar img {
  width: 22px;
}

.demo-experience .agent-response-stage .agent-response {
  padding: 5px 0 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.demo-experience .agent-response-stage .agent-response::before {
  display: none;
}

.demo-experience .agent-response-kicker {
  margin-bottom: 17px;
  font-size: .53rem;
  letter-spacing: .105em;
}

.demo-experience .agent-response > small {
  font-size: .52rem;
}

.demo-experience .agent-response-intro {
  max-width: 850px;
  margin-top: 9px;
  font-size: clamp(1rem, 1vw, 1.12rem);
  line-height: 1.55;
}

.demo-experience .agent-answer-grid {
  gap: 10px;
  margin-top: 20px;
}

.demo-experience .agent-answer-card {
  min-height: 148px;
  padding: 18px 18px 16px;
  border-radius: 15px;
  box-shadow: 0 12px 28px rgba(0,0,0,.055);
}

.demo-experience .agent-answer-card > em {
  opacity: .72;
}

.demo-experience .agent-answer-card > small {
  font-size: .54rem;
  letter-spacing: .1em;
}

.demo-experience .agent-answer-card > strong {
  margin-top: 9px;
  font-size: .9rem;
  line-height: 1.38;
}

.demo-experience .agent-answer-card > p {
  margin-top: 7px;
  font-size: .77rem;
  line-height: 1.58;
}

.demo-experience .agent-answer-card > [data-agent-card-tag] {
  margin-top: 11px;
  border-radius: 999px;
  font-size: .59rem;
}

.demo-experience .agent-answer-footer {
  margin-top: 12px;
  border-radius: 13px;
}

.demo-experience .agent-composer {
  padding-inline: clamp(20px, 4.4vw, 82px) !important;
  padding-bottom: clamp(12px, 1.8dvh, 18px) !important;
}

.agent-composer-inner {
  width: min(100%, 980px);
  padding: 11px;
  border-radius: 17px;
  box-shadow: 0 14px 38px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.035);
}

.demo-experience .agent-composer-head {
  margin-bottom: 8px;
  font-size: .49rem;
  letter-spacing: .08em;
}

.demo-experience .agent-prompt-compact {
  min-height: 40px;
  border-radius: 10px;
  font-size: .52rem;
}

.agent-composer-disclaimer {
  margin-top: 8px;
  font-size: .45rem;
}

/* ---------- Light theme ---------- */
.demo-experience.is-light-theme,
.demo-experience.is-light-theme .demo-experience-canvas,
.demo-experience.is-light-theme .agent-console,
.demo-experience.is-light-theme .agent-console-main {
  background: #f5f5f1 !important;
}

.demo-experience.is-light-theme .agent-console-main {
  background:
    radial-gradient(circle at 56% -14%, rgba(20,22,26,.026), transparent 31%),
    #f5f5f1 !important;
}

.demo-experience.is-light-theme .agent-app-sidebar {
  border-right-color: rgba(18,20,24,.075);
  background: #edede8;
}

.demo-experience.is-light-theme .agent-console-topbar {
  border-bottom-color: rgba(18,20,24,.07);
  background: rgba(245,245,241,.91);
}

.demo-experience.is-light-theme .agent-sidebar-thread.is-active {
  background: rgba(255,255,255,.9);
  box-shadow: 0 1px 0 rgba(255,255,255,.85), 0 8px 20px rgba(18,22,30,.035);
}

.demo-experience.is-light-theme .agent-console-state {
  border-color: transparent;
  background: transparent;
}

.demo-experience.is-light-theme .agent-starter-grid button {
  border-color: rgba(17,19,22,.075);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(18,22,30,.045), inset 0 1px 0 #fff;
}

.demo-experience.is-light-theme .agent-starter-grid button:hover,
.demo-experience.is-light-theme .agent-starter-grid button:focus-visible {
  border-color: rgba(17,19,22,.14);
  background: #fff;
  box-shadow: 0 18px 38px rgba(18,22,30,.075), inset 0 1px 0 #fff;
}

.demo-experience.is-light-theme .owner-message {
  border-color: rgba(17,19,22,.075);
  background: #e9edf2;
  box-shadow: 0 10px 25px rgba(18,22,30,.035);
}

.demo-experience.is-light-theme .agent-response-stage .agent-response {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.demo-experience.is-light-theme .agent-answer-card {
  border-color: rgba(17,19,22,.075);
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 28px rgba(18,22,30,.045), inset 0 1px 0 #fff;
}

.demo-experience.is-light-theme .agent-answer-card:hover,
.demo-experience.is-light-theme .agent-answer-card:focus-visible {
  border-color: rgba(17,19,22,.14);
  background: #fff;
  box-shadow: 0 18px 38px rgba(18,22,30,.07), inset 0 1px 0 #fff;
}

.demo-experience.is-light-theme .agent-answer-footer {
  border-color: rgba(17,19,22,.075);
  background: rgba(255,255,255,.72);
  box-shadow: none;
}

.demo-experience.is-light-theme .agent-composer {
  background: linear-gradient(to top, rgba(245,245,241,.98) 72%, rgba(245,245,241,0));
}

.demo-experience.is-light-theme .agent-composer-inner {
  border-color: rgba(17,19,22,.075);
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 38px rgba(18,22,30,.065), inset 0 1px 0 #fff;
}

/* ---------- Responsive refinement ---------- */
@media (min-width: 901px) and (max-height: 760px) {
  .demo-experience {
    --demo-sidebar: 214px;
    --demo-topbar: 58px;
  }

  .demo-experience .agent-empty-state h3 {
    font-size: clamp(1.9rem, 4.7dvh, 2.35rem);
  }

  .demo-experience .agent-empty-state > p {
    margin-top: 9px;
    font-size: .76rem;
  }

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

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

  .demo-experience .agent-answer-card {
    min-height: 132px;
  }
}

@media (max-width: 900px) {
  .demo-experience {
    --demo-topbar: 60px;
  }

  .demo-experience .agent-chat-thread {
    padding-inline: clamp(16px, 4vw, 28px) !important;
  }

  .demo-experience .agent-composer {
    padding-inline: clamp(12px, 3vw, 24px) !important;
  }
}

@media (max-width: 640px) {
  .demo-experience {
    --demo-topbar: 58px;
  }

  .demo-experience .agent-console-topbar {
    gap: 8px;
    padding-inline: 11px !important;
  }

  .demo-experience .agent-console-brand {
    min-width: 0;
  }

  .demo-experience .agent-console-brand strong {
    overflow: hidden;
    max-width: 130px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .demo-experience .agent-console-actions {
    gap: 6px;
  }

  .demo-experience .agent-conversation-head {
    min-height: 42px;
    padding-inline: 14px !important;
  }

  .demo-experience .agent-chat-thread {
    padding: 18px 12px 26px !important;
  }

  .demo-experience .agent-empty-state {
    align-content: start;
    padding-top: clamp(34px, 7vh, 60px) !important;
  }

  .demo-experience .agent-empty-state h3 {
    max-width: 340px;
    font-size: clamp(2rem, 9vw, 2.55rem);
  }

  .demo-experience .agent-empty-state > p {
    max-width: 360px;
    font-size: .76rem;
    line-height: 1.6;
  }

  .demo-experience .agent-starter-grid {
    gap: 8px !important;
  }

  .demo-experience .agent-starter-grid button {
    min-height: 70px !important;
    padding: 14px 16px !important;
  }

  .demo-experience .owner-message {
    width: 92%;
  }

  .demo-experience .agent-message-main {
    gap: 8px;
  }

  .demo-experience .agent-avatar {
    width: 34px;
    height: 34px;
  }

  .demo-experience .agent-response-intro {
    font-size: .93rem;
  }

  .demo-experience .agent-answer-card {
    min-height: 0;
  }

  .agent-composer-inner {
    border-radius: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-experience .agent-starter-grid button::after {
    display: none;
  }
}

/* v77.1 — compact mobile chrome and response reading position */
@media (max-width: 640px) {
  .demo-experience .agent-console-brand strong {
    font-size: 0;
  }

  .demo-experience .agent-console-brand strong::after {
    content: "Avanza Agent";
    font-size: .72rem;
    letter-spacing: -.02em;
  }

  .demo-experience .agent-console-state {
    display: none;
  }

  .agent-topbar-reset:disabled {
    display: none;
  }

  .demo-experience-back span:last-child {
    display: block !important;
    color: rgba(255,255,255,.72) !important;
    font-size: 1rem;
    font-weight: 500;
  }

  .demo-experience.is-light-theme .demo-experience-back span:last-child {
    color: rgba(20,22,26,.72) !important;
  }

  .agent-theme-switch-track {
    width: 32px;
    height: 18px;
  }

  .agent-theme-switch-thumb {
    width: 14px;
    height: 14px;
  }

  .demo-experience.is-light-theme .agent-theme-switch-thumb {
    transform: translateX(14px);
  }
}