:host {
  display: block;

  .ai-chat-card {
    overflow: hidden;
  }

  mat-card-title {
    min-height: 2.5rem;
    width: 100%;
  }

  .ai-scope {
    gap: 0.375rem;
  }

  .ai-scope-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .ai-scope-chip,
  .ai-source-chip {
    background-color: rgba(var(--palette-foreground-base), 0.08);
    border-radius: 1rem;
    display: inline-flex;
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 0.125rem 0.625rem;
  }

  .ai-consent {
    margin: 0 auto;
    max-width: 44rem;
  }

  .ai-messages {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: min(32rem, 55vh);
    overflow-y: auto;
    padding: 0.25rem;
  }

  .ai-empty-state {
    border: 1px dashed rgba(var(--palette-foreground-base), 0.2);
    border-radius: 0.5rem;
  }

  .ai-message {
    border-radius: 0.75rem;
    max-width: min(90%, 48rem);
    padding: 0.75rem 1rem;
    white-space: pre-wrap;
  }

  .ai-message-user {
    align-self: flex-end;
    background-color: rgba(var(--palette-primary-500), 0.12);
  }

  .ai-message-assistant {
    align-self: flex-start;
    background-color: rgba(var(--palette-foreground-base), 0.06);
  }

  .ai-message-label {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }

  .ai-markdown {
    white-space: normal;

    > :last-child {
      margin-bottom: 0;
    }
  }

  .ai-user-text {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .ai-sources {
    font-size: 0.75rem;
    gap: 0.375rem;
  }

  .ai-source-chip {
    background-color: rgba(var(--palette-accent-500), 0.12);
  }

  .ai-thinking,
  .ai-error {
    border-radius: 0.5rem;
    padding: 0.75rem;
  }

  .ai-thinking {
    align-self: flex-start;
    background-color: rgba(var(--palette-foreground-base), 0.05);
  }

  .ai-error {
    background-color: rgba(var(--palette-warn-500), 0.1);
  }

  .ai-prompt {
    margin-bottom: -0.5rem;
  }

  .ai-actions {
    gap: 0.5rem;
  }

  .ai-notice {
    font-size: 0.75rem;
  }

  @media (max-width: 575.98px) {
    .ai-message {
      max-width: 100%;
    }
  }
}

:host-context(.theme-dark) {
  .ai-scope-chip {
    background-color: rgba(var(--palette-foreground-base-dark), 0.1);
  }

  .ai-empty-state {
    border-color: rgba(var(--palette-foreground-base-dark), 0.2);
  }

  .ai-message-assistant,
  .ai-thinking {
    background-color: rgba(var(--palette-foreground-base-dark), 0.08);
  }
}