/* Avanza AI Studio v74 — demo theme refinement
   Scope: fullscreen Agent demo only. Default theme becomes light with a topbar theme switch. */

.demo-experience {
  color-scheme: dark;
}

.agent-theme-switch {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 10px 0 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: rgba(255,255,255,.62);
  font: inherit;
  font-size: .56rem;
  font-weight: 650;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.agent-theme-switch:hover,
.agent-theme-switch:focus-visible {
  border-color: rgba(255,255,255,.18);
  color: #fff;
  background: rgba(255,255,255,.07);
}

.agent-theme-switch-text {
  line-height: 1;
}

.agent-theme-switch-track {
  position: relative;
  width: 34px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.agent-theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,.24);
  transition: transform .24s cubic-bezier(.16,1,.3,1), background .24s ease;
}

.demo-experience.is-light-theme .agent-theme-switch-track {
  background: rgba(24,24,26,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

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

.demo-experience.is-light-theme {
  color-scheme: light;
  background: #ebebe7;
}

.demo-experience.is-light-theme .demo-experience-canvas {
  background: #f6f6f2;
}

.demo-experience.is-light-theme .agent-console {
  background: #f6f6f2 !important;
}

.demo-experience.is-light-theme .agent-app-sidebar {
  border-right-color: rgba(15,17,21,.09);
  background: #efefea;
}

.demo-experience.is-light-theme .agent-sidebar-mark,
.demo-experience.is-light-theme .agent-sidebar-avatar,
.demo-experience.is-light-theme .agent-console-mark,
.demo-experience.is-light-theme .agent-avatar,
.demo-experience.is-light-theme .agent-empty-orb span {
  border-color: rgba(15,17,21,.08);
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255,255,255,.85), 0 14px 34px rgba(18,24,35,.06);
}

.demo-experience.is-light-theme .agent-sidebar-brand strong,
.demo-experience.is-light-theme .agent-sidebar-profile strong,
.demo-experience.is-light-theme .agent-console-brand strong,
.demo-experience.is-light-theme .agent-empty-state h3,
.demo-experience.is-light-theme .agent-action-head h4,
.demo-experience.is-light-theme .agent-action-complete h4 {
  color: #141517;
}

.demo-experience.is-light-theme .agent-sidebar-brand small,
.demo-experience.is-light-theme .agent-sidebar-profile small,
.demo-experience.is-light-theme .agent-console-brand small,
.demo-experience.is-light-theme .agent-conversation-head small,
.demo-experience.is-light-theme .agent-conversation-context,
.demo-experience.is-light-theme .agent-empty-state > small,
.demo-experience.is-light-theme .agent-empty-state > p,
.demo-experience.is-light-theme .agent-composer-head,
.demo-experience.is-light-theme .agent-composer-head small,
.demo-experience.is-light-theme .agent-composer-disclaimer,
.demo-experience.is-light-theme .agent-response-kicker,
.demo-experience.is-light-theme .agent-answer-footer span,
.demo-experience.is-light-theme .agent-action-head small,
.demo-experience.is-light-theme .agent-action-summary,
.demo-experience.is-light-theme .agent-action-context dt,
.demo-experience.is-light-theme .agent-action-sources small,
.demo-experience.is-light-theme .agent-action-sources span,
.demo-experience.is-light-theme .agent-action-recommendation > span,
.demo-experience.is-light-theme .agent-action-working p,
.demo-experience.is-light-theme .agent-action-complete small,
.demo-experience.is-light-theme .agent-action-complete p,
.demo-experience.is-light-theme .agent-action-log span,
.demo-experience.is-light-theme .agent-message small,
.demo-experience.is-light-theme .owner-message small,
.demo-experience.is-light-theme .agent-thinking-line,
.demo-experience.is-light-theme .agent-console-state,
.demo-experience.is-light-theme .demo-experience-back,
.demo-experience.is-light-theme .agent-topbar-reset,
.demo-experience.is-light-theme .agent-theme-switch {
  color: rgba(20,22,26,.58) !important;
}

.demo-experience.is-light-theme .agent-sidebar-new,
.demo-experience.is-light-theme .agent-topbar-reset,
.demo-experience.is-light-theme .demo-experience-back,
.demo-experience.is-light-theme .agent-theme-switch,
.demo-experience.is-light-theme .agent-console-state {
  border-color: rgba(15,17,21,.08);
  background: rgba(255,255,255,.7);
}

.demo-experience.is-light-theme .agent-sidebar-new:hover:not(:disabled),
.demo-experience.is-light-theme .agent-sidebar-new:focus-visible:not(:disabled),
.demo-experience.is-light-theme .agent-topbar-reset:hover:not(:disabled),
.demo-experience.is-light-theme .agent-topbar-reset:focus-visible:not(:disabled),
.demo-experience.is-light-theme .demo-experience-back:hover,
.demo-experience.is-light-theme .demo-experience-back:focus-visible,
.demo-experience.is-light-theme .agent-theme-switch:hover,
.demo-experience.is-light-theme .agent-theme-switch:focus-visible {
  border-color: rgba(15,17,21,.14);
  color: #141517 !important;
  background: #ffffff;
}

.demo-experience.is-light-theme .agent-sidebar-new,
.demo-experience.is-light-theme .agent-sidebar-thread,
.demo-experience.is-light-theme .agent-sidebar-profile strong,
.demo-experience.is-light-theme .agent-conversation-head strong,
.demo-experience.is-light-theme .agent-empty-state > p,
.demo-experience.is-light-theme .agent-starter-grid strong,
.demo-experience.is-light-theme .agent-prompt-compact,
.demo-experience.is-light-theme .agent-message p,
.demo-experience.is-light-theme .owner-message p,
.demo-experience.is-light-theme .agent-response > small,
.demo-experience.is-light-theme .agent-response-intro,
.demo-experience.is-light-theme .agent-answer-card,
.demo-experience.is-light-theme .agent-answer-footer strong,
.demo-experience.is-light-theme .agent-action-context dd,
.demo-experience.is-light-theme .agent-action-recommendation p,
.demo-experience.is-light-theme .agent-action-log strong {
  color: #1a1c20;
}

.demo-experience.is-light-theme .agent-sidebar-thread {
  color: rgba(20,22,26,.56);
}

.demo-experience.is-light-theme .agent-sidebar-thread span {
  background: rgba(20,22,26,.18);
}

.demo-experience.is-light-theme .agent-sidebar-thread.is-active {
  color: #16181b;
  background: rgba(255,255,255,.78);
}

.demo-experience.is-light-theme .agent-sidebar-thread.is-active span {
  background: #16181b;
  box-shadow: 0 0 0 4px rgba(17,19,22,.06);
}

.demo-experience.is-light-theme .agent-sidebar-section > small {
  color: rgba(20,22,26,.34);
}

.demo-experience.is-light-theme .agent-sidebar-systems {
  border-color: rgba(15,17,21,.08);
  background: rgba(255,255,255,.55);
}

.demo-experience.is-light-theme .agent-sidebar-systems span {
  color: rgba(20,22,26,.66);
}

.demo-experience.is-light-theme .agent-sidebar-systems small {
  color: rgba(20,22,26,.44);
}

.demo-experience.is-light-theme .agent-sidebar-systems i,
.demo-experience.is-light-theme .agent-console-state i,
.demo-experience.is-light-theme .agent-answer-footer i,
.demo-experience.is-light-theme .agent-response-kicker span,
.demo-experience.is-light-theme .agent-action-recommendation > span i,
.demo-experience.is-light-theme .agent-action-log span i {
  background: #17181b;
  box-shadow: 0 0 0 4px rgba(17,19,22,.06);
}

.demo-experience.is-light-theme .agent-console-main {
  background:
    radial-gradient(circle at 50% -12%, rgba(15,17,21,.03), transparent 34%),
    #f6f6f2;
}

.demo-experience.is-light-theme .agent-console-topbar {
  border-bottom-color: rgba(15,17,21,.08);
  background: rgba(246,246,242,.86);
}

.demo-experience.is-light-theme .agent-chat-thread {
  scrollbar-color: rgba(20,22,26,.18) transparent;
}

.demo-experience.is-light-theme .agent-chat-thread::-webkit-scrollbar-thumb {
  background: rgba(20,22,26,.16);
}

.demo-experience.is-light-theme .agent-starter-grid button,
.demo-experience.is-light-theme .agent-answer-card,
.demo-experience.is-light-theme .agent-prompt-compact,
.demo-experience.is-light-theme .owner-message,
.demo-experience.is-light-theme .agent-thinking-bubble,
.demo-experience.is-light-theme .agent-action-context dl > div,
.demo-experience.is-light-theme .agent-action-sources,
.demo-experience.is-light-theme .agent-action-working,
.demo-experience.is-light-theme .agent-action-log,
.demo-experience.is-light-theme .agent-answer-footer,
.demo-experience.is-light-theme .agent-response-stage .agent-response,
.demo-experience.is-light-theme .agent-action-panel,
.demo-experience.is-light-theme .agent-composer-inner {
  border-color: rgba(15,17,21,.08);
  background: rgba(255,255,255,.88);
  box-shadow: 0 16px 36px rgba(15,17,21,.05);
}

.demo-experience.is-light-theme .agent-starter-grid button:hover,
.demo-experience.is-light-theme .agent-starter-grid button:focus-visible,
.demo-experience.is-light-theme .agent-answer-card:hover,
.demo-experience.is-light-theme .agent-answer-card:focus-visible,
.demo-experience.is-light-theme .agent-prompt-compact:hover:not(:disabled),
.demo-experience.is-light-theme .agent-prompt-compact:focus-visible:not(:disabled) {
  border-color: rgba(15,17,21,.14);
  background: #ffffff;
}

.demo-experience.is-light-theme .agent-card-open {
  color: rgba(20,22,26,.58);
}

.demo-experience.is-light-theme .agent-message p,
.demo-experience.is-light-theme .owner-message p,
.demo-experience.is-light-theme .agent-response-intro {
  color: #202328;
}

.demo-experience.is-light-theme .owner-message {
  background: #eef1f5;
}

.demo-experience.is-light-theme .agent-thinking-line {
  color: rgba(20,22,26,.72) !important;
}

.demo-experience.is-light-theme .agent-thinking-dots i {
  background: rgba(20,22,26,.72);
}

.demo-experience.is-light-theme .agent-thinking-track {
  background: rgba(20,22,26,.08);
}

.demo-experience.is-light-theme .agent-thinking-track i {
  background: linear-gradient(90deg, rgba(20,22,26,.18), rgba(20,22,26,.78));
  box-shadow: 0 0 12px rgba(20,22,26,.08);
}

.demo-experience.is-light-theme .agent-action-panel {
  background: #ffffff;
}

.demo-experience.is-light-theme .agent-action-context dl > div,
.demo-experience.is-light-theme .agent-action-sources,
.demo-experience.is-light-theme .agent-action-working,
.demo-experience.is-light-theme .agent-action-log {
  background: #f7f7f4;
}

.demo-experience.is-light-theme .agent-action-recommendation {
  border-left-color: rgba(20,22,26,.72);
  background: #f3f4f1;
}

.demo-experience.is-light-theme .agent-action-primary {
  border-color: #17181b;
  color: #ffffff;
  background: #17181b;
}

.demo-experience.is-light-theme .agent-action-secondary {
  border-color: rgba(15,17,21,.1);
  color: #1a1c20;
  background: #ffffff;
}

.demo-experience.is-light-theme .agent-action-close {
  border-color: rgba(15,17,21,.1);
  color: rgba(20,22,26,.68);
  background: #ffffff;
}

.demo-experience.is-light-theme .agent-action-success {
  border-color: rgba(15,17,21,.12);
  background: #f4f5f1;
}

.demo-experience.is-light-theme .agent-action-success span {
  border-color: rgba(20,22,26,.28);
}

.demo-experience.is-light-theme .agent-action-success i,
.demo-experience.is-light-theme .agent-action-working i {
  background: #17181b;
  box-shadow: 0 0 0 6px rgba(20,22,26,.06);
}

.demo-experience.is-light-theme .agent-action-head {
  border-bottom-color: rgba(15,17,21,.08);
}

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

.demo-experience.is-light-theme .agent-composer-inner {
  background: #ffffff;
}

@media (max-width: 640px) {
  .agent-theme-switch {
    width: 36px;
    min-height: 36px;
    padding: 0;
    gap: 0;
  }

  .agent-theme-switch-text {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-theme-switch,
  .agent-theme-switch-thumb {
    transition: none !important;
  }
}


/* v75 light-theme legibility repair */
.demo-experience.is-light-theme .agent-response-stage .agent-response > small,
.demo-experience.is-light-theme .agent-response-kicker,
.demo-experience.is-light-theme .agent-message small,
.demo-experience.is-light-theme .owner-message small,
.demo-experience.is-light-theme .agent-answer-card small,
.demo-experience.is-light-theme .agent-answer-card em,
.demo-experience.is-light-theme .agent-answer-card [data-agent-card-tag],
.demo-experience.is-light-theme .agent-card-open,
.demo-experience.is-light-theme .agent-action-head small,
.demo-experience.is-light-theme .agent-action-summary,
.demo-experience.is-light-theme .agent-action-recommendation > span,
.demo-experience.is-light-theme .agent-action-working p,
.demo-experience.is-light-theme .agent-action-complete small,
.demo-experience.is-light-theme .agent-action-complete p,
.demo-experience.is-light-theme .agent-action-log span,
.demo-experience.is-light-theme .agent-action-sources small,
.demo-experience.is-light-theme .agent-action-sources span,
.demo-experience.is-light-theme .agent-composer-head,
.demo-experience.is-light-theme .agent-composer-head small,
.demo-experience.is-light-theme .agent-composer-disclaimer,
.demo-experience.is-light-theme .agent-conversation-context,
.demo-experience.is-light-theme .agent-empty-state > small,
.demo-experience.is-light-theme .agent-empty-state > p,
.demo-experience.is-light-theme .agent-console-brand small,
.demo-experience.is-light-theme .agent-sidebar-brand small,
.demo-experience.is-light-theme .agent-sidebar-profile small,
.demo-experience.is-light-theme .agent-sidebar-systems small,
.demo-experience.is-light-theme .agent-sidebar-section > small,
.demo-experience.is-light-theme .agent-conversation-head small,
.demo-experience.is-light-theme .agent-answer-footer span,
.demo-experience.is-light-theme .agent-console-state,
.demo-experience.is-light-theme .demo-experience-back,
.demo-experience.is-light-theme .agent-topbar-reset,
.demo-experience.is-light-theme .agent-theme-switch,
.demo-experience.is-light-theme .agent-sidebar-thread {
  color: rgba(20,22,26,.60) !important;
}

.demo-experience.is-light-theme .agent-response-intro,
.demo-experience.is-light-theme .agent-message p,
.demo-experience.is-light-theme .owner-message p,
.demo-experience.is-light-theme .agent-answer-card strong,
.demo-experience.is-light-theme .agent-answer-card p,
.demo-experience.is-light-theme .agent-answer-footer strong,
.demo-experience.is-light-theme .agent-action-head h4,
.demo-experience.is-light-theme .agent-action-context dd,
.demo-experience.is-light-theme .agent-action-recommendation p,
.demo-experience.is-light-theme .agent-action-log strong,
.demo-experience.is-light-theme .agent-starter-grid strong,
.demo-experience.is-light-theme .agent-prompt-compact,
.demo-experience.is-light-theme .agent-sidebar-new,
.demo-experience.is-light-theme .agent-sidebar-brand strong,
.demo-experience.is-light-theme .agent-sidebar-profile strong,
.demo-experience.is-light-theme .agent-conversation-head strong,
.demo-experience.is-light-theme .agent-empty-state h3,
.demo-experience.is-light-theme .agent-console-brand strong {
  color: #1a1c20 !important;
}

.demo-experience.is-light-theme .agent-sidebar-systems span,
.demo-experience.is-light-theme .agent-sidebar-new span:first-child,
.demo-experience.is-light-theme .agent-topbar-reset span:first-child,
.demo-experience.is-light-theme .demo-experience-back span:last-child {
  color: rgba(20,22,26,.66) !important;
}

.demo-experience.is-light-theme .agent-answer-card,
.demo-experience.is-light-theme .agent-answer-card *:not(.agent-card-open i),
.demo-experience.is-light-theme .agent-response-stage .agent-response,
.demo-experience.is-light-theme .agent-action-panel,
.demo-experience.is-light-theme .agent-action-context dl > div,
.demo-experience.is-light-theme .agent-action-sources,
.demo-experience.is-light-theme .agent-action-working,
.demo-experience.is-light-theme .agent-action-log,
.demo-experience.is-light-theme .agent-answer-footer,
.demo-experience.is-light-theme .agent-thinking-bubble,
.demo-experience.is-light-theme .agent-composer-inner {
  border-color: rgba(15,17,21,.08);
}

.demo-experience.is-light-theme .agent-action-recommendation p,
.demo-experience.is-light-theme .agent-action-summary,
.demo-experience.is-light-theme .agent-action-working p,
.demo-experience.is-light-theme .agent-action-complete p,
.demo-experience.is-light-theme .agent-response-intro {
  color: #202328 !important;
}

.demo-experience.is-light-theme .agent-console-topbar,
.demo-experience.is-light-theme .agent-composer,
.demo-experience.is-light-theme .agent-console-main,
.demo-experience.is-light-theme .demo-experience-canvas,
.demo-experience.is-light-theme .agent-console {
  color: #1a1c20;
}


/* v76 starter-card prompt label fix */
.demo-experience.is-light-theme .agent-starter-grid small,
.demo-experience.is-light-theme .agent-starter-grid button small,
.demo-experience.is-light-theme .agent-starter-grid button:hover small,
.demo-experience.is-light-theme .agent-starter-grid button:focus-visible small {
  color: rgba(20,22,26,.56) !important;
}

.demo-experience.is-light-theme .agent-starter-grid strong,
.demo-experience.is-light-theme .agent-starter-grid button strong,
.demo-experience.is-light-theme .agent-starter-grid button:hover strong,
.demo-experience.is-light-theme .agent-starter-grid button:focus-visible strong {
  color: #1a1c20 !important;
}