/*!***********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/style.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************/
* { box-sizing: border-box; }

body {
  margin: 0;
  background: #f5f7fa;
  color: #17202a;
  font-family: Arial, "Apple SD Gothic Neo", sans-serif;
}

button,
textarea { font: inherit; }

.chat-shell {
  width: min(100% - 32px, 760px);
  margin: 0 auto;
  padding: 40px 0 28px;
}

.chat-header h1 { margin: 3px 0 8px; }
.chat-header > p:last-child { margin: 0 0 22px; color: #596573; }
.eyebrow { margin: 0; color: #087f6b; font-size: 13px; font-weight: 700; }

.message-list {
  min-height: 440px;
  padding: 20px;
  overflow-wrap: anywhere;
  border: 1px solid #dde3ea;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 28px rgb(16 24 40 / 5%);
}

.message {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 88%;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f0f3f6;
}

.message.user { margin-left: auto; background: #dff7f0; }
.message span { color: #52606d; font-size: 12px; font-weight: 700; }
.message p { margin: 6px 0 0; line-height: 1.6; white-space: pre-wrap; }
.message.pending { color: #687582; }
.message.pending small {
  display: block;
  margin-top: 2px;
  color: #788693;
  font-size: 12px;
}

.referral-card {
  max-width: 94%;
  margin: 0 0 14px;
  padding: 18px;
  border: 1px solid #e5c56b;
  border-radius: 14px;
  background: #fffbeb;
  box-shadow: 0 4px 14px rgb(120 85 0 / 7%);
}

.referral-label {
  color: #7a5700;
  font-size: 12px;
  font-weight: 700;
}

.referral-card h2 {
  margin: 6px 0 8px;
  color: #3d3420;
  font-size: 18px;
  line-height: 1.45;
}

.referral-card > p {
  margin: 0;
  color: #514936;
  line-height: 1.6;
}

.referral-actions {
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 10px;
  background: #fff;
  color: #3d4450;
  line-height: 1.55;
}

.referral-actions strong { font-size: 14px; }
.referral-actions ol { margin: 7px 0 0; padding-left: 21px; }
.referral-actions li + li { margin-top: 5px; }

.referral-card .referral-note {
  margin-top: 12px;
  color: #6c4f00;
  font-size: 13px;
  font-weight: 700;
}

.composer {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 9px;
  gap: 9px;
  margin-top: 12px;
}

.composer textarea {
  width: 100%;
  min-height: 78px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid #bdc7d2;
  border-radius: 10px;
  background: #fff;
  line-height: 1.45;
}

.composer textarea:focus { border-color: #087f6b; outline: 2px solid #bde9df; }
.composer button {
  min-width: 92px;
  border: 0;
  border-radius: 10px;
  background: #087f6b;
  color: #fff;
  font-weight: 700;
}
.composer button:disabled { cursor: not-allowed; opacity: .55; }
.composer .stop-button {
  border: 1px solid #b42318;
  background: #fff;
  color: #b42318;
}
.composer > p { grid-column: 1 / -1; margin: 0 3px; color: #697684; font-size: 12px; }

@media (max-width: 560px) {
  .chat-shell { width: min(100% - 20px, 760px); padding-top: 24px; }
  .message-list { min-height: 400px; padding: 14px; }
  .message { max-width: 94%; }
  .composer { grid-template-columns: 1fr; }
  .composer button { min-height: 44px; }
}