/*  Allison's box — the chat widget.
    Brand: background #1f2933, accent #e8590c, tag #f6c744.
    Kept deliberately standalone (no framework, no build step) because the same widget
    is going to be mounted on customer websites later for the customer-facing chat.
    Everything is scoped under .allison so it cannot leak into the host page. */

.allison {
  --a-bg: #1f2933;
  --a-bg-2: #273542;
  --a-line: #3a4a5a;
  --a-ink: #eef2f6;
  --a-dim: #a7b4c1;
  --a-accent: #e8590c;
  --a-tag: #f6c744;
  --a-radius: 14px;
  display: flex;
  flex-direction: column;
  background: var(--a-bg);
  color: var(--a-ink);
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius);
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  min-height: 520px;
  max-height: min(78vh, 720px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.allison *,
.allison *::before,
.allison *::after { box-sizing: border-box; }

/* ---- header ---- */
.allison-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--a-bg-2);
  border-bottom: 1px solid var(--a-line);
}
.allison-avatar {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%;
  background: var(--a-accent);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 18px;
}
.allison-title { font-weight: 700; font-size: 16px; letter-spacing: .2px; }
.allison-sub { font-size: 12.5px; color: var(--a-dim); }
.allison-step {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: #22303c;
  background: var(--a-tag);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* ---- the conversation ---- */
.allison-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.allison-msg {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  animation: allison-in .18s ease-out;
}
.allison-msg.bot {
  align-self: flex-start;
  background: var(--a-bg-2);
  border: 1px solid var(--a-line);
  border-bottom-left-radius: 4px;
}
.allison-msg.me {
  align-self: flex-end;
  background: var(--a-accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.allison-msg.flag {
  border-color: var(--a-tag);
  box-shadow: inset 3px 0 0 var(--a-tag);
}
.allison-who {
  display: block;
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--a-dim);
  margin-bottom: 3px;
}
@keyframes allison-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* typing dots */
.allison-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.allison-typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--a-dim);
  animation: allison-blink 1s infinite ease-in-out;
}
.allison-typing i:nth-child(2) { animation-delay: .15s; }
.allison-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes allison-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* quick replies */
.allison-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 2px 10px; }
.allison-quick button {
  font: inherit;
  font-size: 14px;
  color: var(--a-ink);
  background: transparent;
  border: 1.5px solid var(--a-accent);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
}
.allison-quick button:hover,
.allison-quick button:focus-visible { background: var(--a-accent); color: #fff; }

/* ---- composer ---- */
.allison-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--a-line);
  background: var(--a-bg-2);
}
.allison-form input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 16px;              /* 16px stops iOS zooming the page on focus */
  color: var(--a-ink);
  background: var(--a-bg);
  border: 1px solid var(--a-line);
  border-radius: 10px;
  padding: 11px 12px;
}
.allison-form input::placeholder { color: #7f8d9a; }
.allison-form input:focus-visible { outline: 2px solid var(--a-tag); outline-offset: 1px; }
.allison-form button {
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--a-accent);
  border: 0;
  border-radius: 10px;
  padding: 0 18px;
  cursor: pointer;
}
.allison-form button:disabled { opacity: .5; cursor: default; }

.allison-foot {
  font-size: 11.5px;
  color: var(--a-dim);
  padding: 0 14px 12px;
  background: var(--a-bg-2);
}
.allison-done .allison-form { display: none; }

@media (prefers-reduced-motion: reduce) {
  .allison-log { scroll-behavior: auto; }
  .allison-msg, .allison-typing i { animation: none; }
}

@media (max-width: 560px) {
  .allison { min-height: 70vh; max-height: none; border-radius: 12px; }
  .allison-msg { max-width: 92%; }
}