body { padding-bottom: 66px; }
.footer { margin-bottom: -66px; padding-bottom: 66px; }

.chat-launch {
  position: fixed;
  z-index: 4;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 49px;
  padding: 6px 15px 6px 7px;
  border: 1px solid #c6d3e3;
  border-radius: 50px;
  background: #fdfefe;
  color: #283e5a;
  box-shadow: 0 10px 30px #203d5a1c;
  font-size: .81rem;
  font-weight: 800;
  transition: background .2s, transform .2s var(--ease);
}
.chat-launch:hover { transform: translateY(-3px); background: #edf3fa; }
.chat-launch span, .chat-symbol {
  display: grid;
  place-items: center;
  flex: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #e8eef8;
  color: #385c87;
}
.chat-launch svg, .chat-symbol svg { width: 18px; height: 18px; }
.chat-dialog {
  position: fixed;
  inset: auto max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) auto;
  width: min(408px, calc(100vw - 36px));
  height: min(570px, calc(100dvh - 50px));
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8e1ec;
  border-radius: 25px;
  background: #fcfdff;
  color: #23334b;
  box-shadow: 0 24px 90px #243d6233;
}
.chat-dialog::backdrop { background: #20354e22; }
.chat-frame { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.chat-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: #f0f4fa;
  border-bottom: 1px solid #e3e9f2;
}
.chat-head .chat-symbol { width: 43px; height: 43px; background: #40618a; color: white; }
.chat-head h2 { font-size: 1.02rem; letter-spacing: -.03em; }
.chat-head p { margin-top: 3px; color: #52657c; font-size: .69rem; }
.chat-head p i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #638273; }
.chat-close, .chat-send {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.chat-close { margin-left: auto; color: #30465f; background: #fcfdff; border: 1px solid #dae3ed; }
.chat-close:hover { background: #e4ecf6; }
.chat-close svg, .chat-send svg { width: 19px; height: 19px; }
.chat-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 19px 17px; }
.chat-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 18px;
  border: 1px solid #e4eaf4;
  border-radius: 17px;
  background: #f4f7fc;
}
.chat-start h3 { font-size: 1.55rem; }
.chat-start p { color: #52657b; font-size: .86rem; }
.chat-prompts { display: grid; gap: 6px; width: 100%; margin-top: 3px; }
.chat-prompts button {
  width: fit-content;
  min-height: 41px;
  padding: 7px 12px;
  border: 1px solid #d8e2ee;
  border-radius: 10px;
  background: #fff;
  color: #304e73;
  font-size: .76rem;
  font-weight: 750;
  text-align: left;
}
.chat-prompts button:hover { background: #e8eff9; }
.chat-messages { display: grid; gap: 13px; }
.chat-turn { max-width: 94%; }
.chat-user { justify-self: end; }
.chat-role { display: block; margin: 0 3px 4px; color: #536980; font-size: .67rem; font-weight: 800; }
.chat-user .chat-role { text-align: right; }
.chat-turn p {
  padding: 10px 12px;
  border: 1px solid #e2e9f3;
  border-radius: 13px 13px 13px 3px;
  background: #f2f5fa;
  color: #263c56;
  font-size: .89rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-user p { border-color: #dce6f2; border-radius: 13px 13px 3px 13px; background: #e5edf8; }
.chat-waiting::before {
  display: block;
  content: "•••";
  letter-spacing: .25em;
  line-height: .95;
  animation: breathe 1.05s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: .3; } to { opacity: 1; } }
.chat-turn .chat-error { background: #fcf1eb; border-color: #eddbd0; }
.chat-input-wrap { padding: 11px 14px 13px; border-top: 1px solid #e2e9f3; }
.chat-form {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 5px 4px 11px;
  border: 1px solid #ccd8e6;
  border-radius: 50px;
  background: white;
}
.chat-form input {
  min-width: 0;
  flex: 1;
  height: 41px;
  border: 0;
  padding: 4px 1px;
  border-radius: 5px;
  color: #23334b;
  background: transparent;
  font-size: 1rem;
}
.chat-form input::placeholder { color: #596e85; }
.chat-send { background: #405d83; color: white; border: 0; }
.chat-send:disabled { opacity: .55; cursor: wait; }
.chat-input-wrap > p { margin: 7px 2px 0; color: #556981; font-size: .63rem; line-height: 1.4; }
@media (max-width: 480px) {
  .chat-launch { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .chat-dialog {
    inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px;
    width: auto;
    height: min(570px, calc(100dvh - 20px));
    border-radius: 19px;
  }
}