:root {
  --color-primary: #3671e9;
  --color-primary-dark: #2b5bc4;
  --color-primary-tint: #eaf0ff;
  --color-bg: #ffffff;
  --color-bg-soft: #f5f7fb;
  --color-border: #d7dce6;
  --color-text: #1c2230;
  --color-text-soft: #57616f;
  --radius: 10px;
  --radius-pill: 30px;
  font-family: "Montserrat", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg-soft); color: var(--color-text); font-family: inherit; }

.section-title { text-align: center; font-size: 32px; font-weight: 700; color: var(--color-primary); padding: 24px 20px 0; }

/* ---------- Intro ---------- */
#intro-screen { max-width: 640px; margin: 0 auto; padding: 40px 24px 64px; text-align: center; }
#intro-screen p { font-size: 17px; color: var(--color-text-soft); line-height: 1.5; margin: 20px 0 28px; }

.btn-primary {
  background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-pill);
  padding: 14px 32px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .15s ease;
}
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-primary:disabled { background: #b9c2d6; cursor: not-allowed; }
.btn-small {
  background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-pill);
  padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 12px;
}
.btn-small:disabled { background: #b9c2d6; cursor: not-allowed; }
.btn-continue {
  display: inline-block;
  background: var(--color-primary); color: #fff; border: none;
  border-radius: var(--radius-pill); padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer;
  margin-top: 12px; transition: background .12s ease;
}
.btn-continue:hover { background: var(--color-primary-dark); }

/* ---------- Индикатор набора текста ---------- */
.msg.bot.typing .bubble { padding: 14px 18px; }
.typing-dots { display: flex; gap: 5px; align-items: center; height: 14px; }
.typing-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: #b9c2d6; display: inline-block;
  animation: typingBlink 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBlink {
  0%, 80%, 100% { opacity: .35; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* ---------- Feed ---------- */
#feed { max-width: 720px; margin: 0 auto; padding: 20px 16px 140px; display: flex; flex-direction: column; }

.msg { max-width: 82%; margin-bottom: 16px; }
.msg.bot { align-self: flex-start; }
.msg.user { align-self: flex-end; }

.bubble {
  border-radius: 16px;
  padding: 16px 18px;
}
.msg.bot .bubble { background: #fff; border: 1px solid var(--color-border); border-bottom-left-radius: 4px; }
.sender-label { font-size: 12px; font-weight: 700; color: var(--color-text-soft); margin: 0 0 4px; }
.msg.user .sender-label { color: var(--color-primary-dark); text-align: right; }
.step-indicator { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #9aa2b1; margin: 0 0 8px; text-transform: uppercase; }
.step-check { color: #37a662; font-size: 12px; font-weight: 700; }
.msg.user .bubble { background: var(--color-primary-tint); color: var(--color-text); border-bottom-right-radius: 4px; }
.msg.user .bubble .value-line { font-size: 14px; font-weight: 400; color: var(--color-text); }
.msg.user .edit-row { text-align: right; margin-top: 8px; }
.btn-edit {
  background: #fff; color: var(--color-primary-dark); border: 1px solid rgba(54,113,233,.25);
  border-radius: var(--radius-pill); padding: 7px 16px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .12s ease;
}
.btn-edit:hover { background: #dbe6ff; }

.msg.system { align-self: center; max-width: 90%; margin-bottom: 10px; }
.msg.system .bubble { background: #fff8e1; border: 1px solid #f0dca0; color: #7a5b00; font-size: 12px; padding: 8px 14px; border-radius: 999px; }

.question-text, .reaction-heading { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--color-text); }
.hint { font-size: 12px; color: var(--color-text-soft); margin: 0 0 16px; }
.reaction-subheading { font-size: 14px; font-weight: 700; margin: 14px 0 6px; color: var(--color-text); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.chip {
  border: 1.5px solid var(--color-border); background: #fff; border-radius: 999px; padding: 9px 18px;
  font-size: 14px; cursor: pointer; transition: all .12s ease; user-select: none;
}
.chip:hover { border-color: var(--color-primary); }
.chip.selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.chip.multi { display: inline-flex; align-items: center; }
.chip.multi::before {
  content: ""; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: 1.5px solid #b7bfd1; border-radius: 4px; margin-right: 9px; background: #fff; flex-shrink: 0;
}
.chip.multi.selected { background: var(--color-primary-tint); border-color: var(--color-primary); color: var(--color-primary-dark); }
.chip.multi.selected::before { content: "✓"; background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-size: 11px; line-height: 16px; }
.chip.locked { pointer-events: none; opacity: .55; }

.other-input { margin-top: 12px; display: none; }
.other-input.visible { display: block; }
.other-input input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--color-border); border-radius: 8px; font-size: 14px; }

.effect-input, .effect-select {
  display: block; width: 100%; padding: 10px 12px; border: 1.5px solid var(--color-border);
  border-radius: 8px; font-size: 14px; margin-bottom: 14px; font-family: inherit;
  background: #fff; color: var(--color-text);
}

.reaction-text { font-size: 14px; line-height: 1.5; color: var(--color-text-soft); margin: 0 0 14px; }
.logo-row { display: flex; gap: 10px; flex-wrap: wrap; }
.logo-placeholder { min-width: 108px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; padding: 0 12px; text-align: center; }

ul.reaction-list { list-style: none; margin: 0 0 14px; padding: 0; }
ul.reaction-list li { position: relative; padding-left: 20px; margin-bottom: 7px; font-size: 14px; color: var(--color-text-soft); line-height: 1.4; }
ul.reaction-list li::before { content: "●"; position: absolute; left: 0; top: 0; color: var(--color-primary); font-size: 13px; }

.plate-card { border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; background: #fbfcfe; }
.plate-card-header { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 8px; color: var(--color-primary-dark); }
.plate-card-header .icon-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary-tint); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.plate-card ul.reaction-list { margin-bottom: 0; }

.case-card { border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; background: #fbfcfe; }
.case-card-title { display:flex; align-items:flex-start; gap:10px; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.case-card-title .icon-badge { width: 26px; height: 26px; border-radius: 7px; background: var(--color-primary-tint); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.case-card-subtitle { font-size: 12px; color: var(--color-text-soft); margin: 0 0 10px; }
.case-card p.line { font-size: 13px; margin: 0 0 6px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card { border: 1px solid var(--color-border); border-radius: 10px; padding: 14px; background: #fbfcfe; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.stat-card .icon-badge { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-tint); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

table.summary-table { width: 100%; border-collapse: collapse; }
table.summary-table td { border: none; padding: 0 0 14px; font-size: 14px; vertical-align: top; }
table.summary-table td.label { color: var(--color-text-soft); white-space: nowrap; padding-right: 16px; width: 1%; }
table.summary-table td.value { color: var(--color-text); }
table.summary-table ul.reaction-list { margin: 0; }
table.summary-table ul.reaction-list li { margin-bottom: 3px; }

@media (max-width: 600px) {
  .msg { max-width: 94%; }
  .stat-grid { grid-template-columns: 1fr; }
}

.site-footer {
  text-align: center;
  font-size: 12px;
  color: #9aa2b1;
  padding: 24px 16px 32px;
}
.site-footer a {
  color: #9aa2b1;
  text-decoration: underline;
}
.site-footer a:hover { color: var(--color-primary); }