.ai-test-chat {
  --ai-test-surface: #fff;
  --ai-test-muted: #f1f7ff;
  --ai-test-border: #dbe7f5;
  --ai-test-text: #0b1d38;
  --ai-test-secondary: #53647a;
  --ai-test-accent: var(--button-blue, #0866d6);
  --ai-test-success: #176b3a;
  --ai-test-contact-photo: url("/assets/prazenka/images/ai-contact-og-1200x630.jpg");
  width: min(1180px, calc(100% - 32px));
  max-width: 1180px;
  margin: clamp(20px, 4vw, 54px) auto clamp(42px, 7vw, 88px);
  color: var(--ai-test-text);
}

.ai-test-chat__header {
  max-width: 64ch;
  margin-bottom: clamp(12px, 2vw, 18px);
}

.ai-test-chat__header h1,
.ai-test-chat__header p {
  margin: 0;
}

.ai-test-chat__header h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.04em;
}

.ai-test-chat__header p {
  margin-top: 10px;
  color: var(--ai-test-secondary);
  font-size: clamp(1rem, 2vw, 1.13rem);
  line-height: 1.65;
}

.ai-test-chat__conversation {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid var(--ai-test-border);
  border-radius: clamp(16px, 2.5vw, 22px);
  background: var(--ai-test-surface);
  box-shadow: 0 14px 34px rgb(17 71 134 / .07);
}

.ai-test-chat__conversation::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / .14), rgb(241 247 255 / .62) 48%, var(--ai-test-surface) 78%),
    linear-gradient(90deg, rgb(243 248 255 / .3), transparent 62%),
    var(--ai-test-contact-photo);
  background-repeat: no-repeat;
  background-position: center, center, center top;
  background-size: auto, auto, 100% auto;
}

.ai-test-chat__conversation > * {
  position: relative;
  z-index: 1;
}

.ai-test-chat__messages {
  display: flex;
  min-height: clamp(280px, 42vw, 420px);
  max-height: 520px;
  padding: clamp(14px, 2.5vw, 22px);
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  border: 1px solid var(--ai-test-border);
  border-radius: 16px;
  background: rgb(241 247 255 / .85);
}

.ai-test-chat__message {
  max-width: min(82%, 720px);
  margin: 0;
  padding: 11px 14px;
  border-radius: 14px;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.ai-test-chat__message--user {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(110deg, var(--ai-test-accent), #6558e8);
}

.ai-test-chat__message--assistant,
.ai-test-chat__message--system {
  align-self: flex-start;
  background: var(--ai-test-surface);
  box-shadow: 0 3px 10px rgb(17 71 134 / .06);
}

.ai-test-chat__message--system {
  color: #9b1c1c;
  border: 1px solid currentcolor;
}

.ai-test-chat__summary {
  display: grid;
  width: min(82%, 720px);
  gap: 10px;
  align-self: flex-start;
}

.ai-test-chat__summary .ai-test-chat__message {
  max-width: none;
}

.ai-test-chat__summary-question {
  margin: 0;
  color: var(--ai-test-secondary);
  line-height: 1.5;
}

.ai-test-chat__summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ai-test-chat__summary-actions [data-ai-test-action="finalize"] {
  color: #fff;
  background: linear-gradient(110deg, var(--ai-test-accent), #6558e8);
  box-shadow: 0 8px 18px rgb(28 91 192 / .2);
}

.ai-test-chat__message-action {
  display: flex;
  width: min(82%, 720px);
  justify-content: flex-start;
  margin-top: -6px;
}

.ai-test-chat__message-action button {
  min-height: 40px;
}

.ai-test-chat__message-action--verified button {
  color: var(--ai-test-success);
  border-color: currentcolor;
}

.ai-test-chat__form {
  margin-top: 16px;
}

.ai-test-chat__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 96px;
  padding: 14px 16px;
  border: 1px solid var(--ai-test-border);
  border-radius: 14px;
  color: inherit;
  background: var(--ai-test-surface);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

.ai-test-chat__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.ai-test-chat button {
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid var(--ai-test-accent);
  border-radius: 9px;
  color: var(--ai-test-accent);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ai-test-chat__send {
  order: 3;
  color: #fff !important;
  background: linear-gradient(110deg, var(--ai-test-accent), #6558e8) !important;
  box-shadow: 0 8px 18px rgb(28 91 192 / .2);
}

.ai-test-chat button:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

.ai-test-chat button:focus-visible,
.ai-test-chat__input:focus-visible {
  outline: 3px solid rgb(8 102 214 / .35);
  outline-offset: 3px;
}

html[data-theme=dark] .ai-test-chat {
  --ai-test-surface: #172235;
  --ai-test-muted: #101928;
  --ai-test-border: #43536a;
  --ai-test-text: #e7edf7;
  --ai-test-secondary: #afbdd0;
  --ai-test-accent: #72b1ff;
  --ai-test-success: #8be0a8;
}

html[data-theme=dark] .ai-test-chat__conversation::before {
  background-image:
    linear-gradient(180deg, rgb(7 15 30 / .18), rgb(16 25 40 / .72) 48%, var(--ai-test-surface) 78%),
    linear-gradient(90deg, rgb(5 15 33 / .28), transparent 62%),
    var(--ai-test-contact-photo);
}

html[data-theme=dark] .ai-test-chat__messages {
  background: rgb(16 25 40 / .88);
}

@media (max-width: 991.98px) {
  .ai-test-chat__conversation::before {
    background-size: auto, auto, auto 470px;
  }
}

@media (max-width: 575.98px) {
  .ai-test-chat {
    margin: 20px auto 42px;
  }

  .ai-test-chat__conversation {
    padding: 14px;
  }

  .ai-test-chat__conversation::before {
    background-size: auto, auto, 100% auto;
  }

  .ai-test-chat__messages {
    min-height: 280px;
    max-height: 460px;
    padding: 14px;
  }

  .ai-test-chat__message,
  .ai-test-chat__message-action,
  .ai-test-chat__summary {
    width: auto;
    max-width: 94%;
  }

  .ai-test-chat__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ai-test-chat__actions button {
    width: 100%;
  }

  .ai-test-chat__summary-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ai-test-chat__summary-actions button {
    width: 100%;
  }
}