/* Avanza AI Studio v79 — semantic stoplight signals
   Color is intentionally limited to state: critical, attention, and clear. */

.demo-experience {
  --signal-critical: #ef7772;
  --signal-critical-solid: #b94f4b;
  --signal-critical-wash: rgba(239,119,114,.065);
  --signal-attention: #d6a64a;
  --signal-attention-solid: #9f7427;
  --signal-attention-wash: rgba(214,166,74,.07);
  --signal-clear: #65b47e;
  --signal-clear-solid: #4f9165;
  --signal-clear-wash: rgba(101,180,126,.065);
}

.demo-experience.is-light-theme {
  --signal-critical: #a84340;
  --signal-critical-solid: #a84340;
  --signal-critical-wash: rgba(168,67,64,.05);
  --signal-attention: #8d671d;
  --signal-attention-solid: #8d671d;
  --signal-attention-wash: rgba(141,103,29,.052);
  --signal-clear: #34784c;
  --signal-clear-solid: #34784c;
  --signal-clear-wash: rgba(52,120,76,.048);
}

.demo-experience [data-agent-tone="critical"] {
  --agent-signal: var(--signal-critical);
  --agent-signal-solid: var(--signal-critical-solid);
  --agent-signal-wash: var(--signal-critical-wash);
}

.demo-experience [data-agent-tone="attention"] {
  --agent-signal: var(--signal-attention);
  --agent-signal-solid: var(--signal-attention-solid);
  --agent-signal-wash: var(--signal-attention-wash);
}

.demo-experience [data-agent-tone="clear"] {
  --agent-signal: var(--signal-clear);
  --agent-signal-solid: var(--signal-clear-solid);
  --agent-signal-wash: var(--signal-clear-wash);
}

/* Connected and ready states use green; active processing uses amber. */
.demo-experience .agent-console-state i {
  color: var(--signal-clear);
}

.demo-experience .agent-console-state.busy i {
  color: var(--signal-attention);
}

.demo-experience .agent-sidebar-systems i,
.demo-experience .agent-console-footer i {
  color: var(--signal-clear);
  opacity: .88;
}

.demo-experience .agent-thinking-track i,
.demo-experience .agent-action-working > span::after {
  background: var(--signal-attention) !important;
  opacity: .92;
}

/* Grounded answers and verified source context receive a quiet green proof mark. */
.demo-experience .agent-response-kicker span,
.demo-experience .agent-answer-footer i,
.demo-experience .agent-action-sources span::before {
  color: var(--signal-clear);
}

.demo-experience .agent-response-kicker span {
  background: var(--signal-clear) !important;
  opacity: .9;
}

.demo-experience .agent-answer-footer span {
  color: var(--signal-clear) !important;
}

.demo-experience .agent-answer-footer strong {
  color: var(--conversation-muted) !important;
}

/* Cards stay neutral. Only the status line and a very soft surface wash carry state. */
.demo-experience .agent-answer-grid > .agent-answer-card[data-agent-tone] {
  background:
    linear-gradient(128deg, var(--agent-signal-wash) 0%, transparent 46%),
    var(--conversation-surface);
}

.demo-experience.is-light-theme .agent-answer-grid > .agent-answer-card[data-agent-tone] {
  background:
    linear-gradient(128deg, var(--agent-signal-wash) 0%, transparent 46%),
    rgba(255,255,255,.82);
}

.demo-experience .agent-answer-grid > button.agent-answer-card[data-agent-tone]:hover,
.demo-experience .agent-answer-grid > button.agent-answer-card[data-agent-tone]:focus-visible,
.demo-experience .agent-answer-grid > .agent-answer-card[data-agent-tone].is-selected {
  background:
    linear-gradient(128deg, var(--agent-signal-wash) 0%, transparent 46%),
    var(--conversation-surface-raised);
}

.demo-experience .agent-answer-card[data-agent-tone] > [data-agent-card-tag] {
  color: var(--agent-signal) !important;
}

.demo-experience .agent-answer-card[data-agent-tone] > [data-agent-card-tag]::before {
  width: 14px;
  height: 2px;
  background: currentColor;
  opacity: .9;
}

.demo-experience .agent-answer-card[data-agent-tone].is-selected {
  border-color: var(--conversation-line-strong);
  box-shadow: inset 0 2px 0 var(--agent-signal) !important;
}

/* Decision panels inherit the state of the item that opened them. */
.demo-experience .agent-action-panel[data-agent-tone] .agent-action-head small {
  color: var(--agent-signal) !important;
}

.demo-experience .agent-action-panel[data-agent-tone] .agent-action-recommendation {
  border-left: 2px solid var(--agent-signal);
  background:
    linear-gradient(110deg, var(--agent-signal-wash) 0%, transparent 62%),
    var(--conversation-surface);
}

.demo-experience.is-light-theme .agent-action-panel[data-agent-tone] .agent-action-recommendation {
  background:
    linear-gradient(110deg, var(--agent-signal-wash) 0%, transparent 62%),
    #f7f7f4;
}

.demo-experience .agent-action-panel[data-agent-tone] .agent-action-recommendation > span {
  color: var(--agent-signal) !important;
}

.demo-experience .agent-action-panel[data-agent-tone] .agent-action-recommendation > span i {
  background: currentColor !important;
  opacity: .92;
}

/* Completion uses the strongest green moment in the experience. */
.demo-experience .agent-action-success,
.demo-experience.is-light-theme .agent-action-success {
  border-color: var(--signal-clear-solid);
  background: var(--signal-clear-solid);
}

.demo-experience .agent-action-success span,
.demo-experience.is-light-theme .agent-action-success span {
  border-right-color: #fff;
  border-bottom-color: #fff;
}

.demo-experience .agent-action-complete small,
.demo-experience .agent-action-log span {
  color: var(--signal-clear) !important;
}

.demo-experience .agent-action-log span i {
  color: var(--signal-clear);
}

@media (forced-colors: active) {
  .demo-experience .agent-answer-card[data-agent-tone].is-selected {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }
}