/* The intake chat (public/assets/chat.js): the corner button and the panel.
   Colours, fonts and radii come from the design direction's custom
   properties, like everything in site.css. */
.site-chat { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; font-family: var(--font-ui, var(--font-body)); }
/* The panel, the start step and the form are shown and hidden with the hidden attribute; a display rule below must never override it. */
.site-chat [hidden] { display: none !important; }
.chat-launcher {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.1rem; border: 2px solid var(--color-cta); border-radius: 999px;
  background: var(--color-cta); color: var(--color-cta-ink);
  font-weight: 650; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.chat-launcher:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); }
.site-chat.is-open .chat-launcher { display: none; }
.chat-panel {
  position: fixed; right: 1rem; bottom: 1rem; width: min(24rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100vh - 2rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--rule-color);
  border-radius: var(--card-radius, 12px); box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.chat-panel__head { display: flex; align-items: flex-start; gap: .5rem; padding: .9rem 1rem; background: var(--color-brand); color: var(--color-on-dark); }
.chat-panel__title { margin: 0; font-size: 1.05rem; color: inherit; }
.chat-panel__note { margin: .25rem 0 0; font-size: .8rem; line-height: 1.35; opacity: .9; }
.chat-panel__close { margin-left: auto; flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.chat-panel__close:hover { background: rgba(255, 255, 255, .15); }
.chat-panel__log { flex: 1 1 auto; overflow-y: auto; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .5rem; min-height: 6rem; }
.chat-panel__log:empty { display: none; }
.chat-msg p { margin: 0; padding: .55rem .8rem; border-radius: 1rem; font-size: .95rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg--assistant p { background: var(--color-tint); border-bottom-left-radius: .3rem; margin-right: 2rem; }
.chat-msg--visitor p { background: var(--color-brand); color: var(--color-on-dark); border-bottom-right-radius: .3rem; margin-left: 2rem; }
/* Each message settles in; the typing bubble's three dots pulse while a reply is on its
   way (site.css stops both animations for people who ask for reduced motion, leaving
   the dots still). */
.chat-msg { animation: chat-msg-in .18s ease-out both; }
@keyframes chat-msg-in { from { opacity: 0; transform: translateY(.3rem); } to { opacity: 1; transform: none; } }
.chat-msg--typing p { display: inline-flex; align-items: center; gap: .32rem; padding: .8rem .95rem; }
.chat-msg--typing i { display: block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-ink); opacity: .45; animation: chat-typing 1.2s ease-in-out infinite; }
.chat-msg--typing i:nth-child(2) { animation-delay: .16s; }
.chat-msg--typing i:nth-child(3) { animation-delay: .32s; }
@keyframes chat-typing { 0%, 60%, 100% { opacity: .45; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-.2rem); } }
.chat-panel__form.is-waiting button[type="submit"] { opacity: .55; cursor: progress; }
.chat-panel__start { padding: .75rem 1rem 1rem; border-top: 1px solid var(--rule-color); }
.chat-panel__start p { margin: 0 0 .6rem; font-size: .9rem; }
.chat-panel__verify { min-height: 65px; margin-bottom: .6rem; }
.chat-panel__alt { color: var(--color-muted); font-size: .8rem !important; margin-top: .6rem !important; }
.chat-panel__form { padding: .6rem 1rem .8rem; border-top: 1px solid var(--rule-color); display: grid; gap: .5rem; }
.chat-panel__form textarea { width: 100%; resize: vertical; padding: .55rem .7rem; border: 1px solid var(--rule-color); border-radius: var(--input-radius, 8px); background: var(--color-paper); }
.chat-panel__actions { display: flex; gap: .5rem; align-items: center; }
.chat-panel__actions .button { padding: .5rem 1rem; }
.chat-panel__end { margin-left: auto; border: 0; background: transparent; color: var(--color-muted); text-decoration: underline; cursor: pointer; font-size: .85rem; }
.chat-panel__status { margin: 0; padding: 0 1rem .6rem; font-size: .85rem; color: var(--color-muted); }
.chat-panel__status:empty { display: none; }
.chat-panel__status--error { color: var(--color-error, #a0271e); }
@media (max-width: 30rem) {
  .chat-panel { right: .5rem; bottom: .5rem; width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); }
}
@media print { .site-chat { display: none; } }