/* Chat bubble and panel */
.chat { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70; font-family: var(--body); }
.chat-bubble {
  position: relative; width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brand); color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(0,108,210,.45); transition: transform .2s, background .2s;
}
.chat-bubble:hover, .chat-bubble:focus-visible { transform: translateY(-2px); background: var(--brand-dark); outline: none; }
.chat-bubble-dot { position: absolute; top: .3rem; right: .3rem; width: .7rem; height: .7rem; border-radius: 50%; background: #ffd60a; border: 2px solid #fff; display: none; }
.chat.is-nudge:not(.is-open) .chat-bubble-dot { display: block; }
.chat.is-nudge:not(.is-open) .chat-bubble { animation: chat-nudge 1.2s ease-in-out 2; }
@keyframes chat-nudge { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } 60% { transform: translateY(-3px); } }
.chat.is-open .chat-bubble { display: none; }

.chat-panel[hidden] { display: none; }
.chat-panel {
  width: min(22rem, calc(100vw - 2.2rem)); height: min(32rem, calc(100svh - 2.2rem));
  background: #fff; color: var(--ink); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.35); display: grid; grid-template-rows: auto 1fr auto auto;
}
.chat-head { background: var(--ink); color: #fff; padding: .9rem 1rem; display: flex; align-items: center; justify-content: space-between; }
.chat-head strong { font-family: var(--display); font-size: 1.15rem; letter-spacing: .02em; display: block; }
.chat-head span { font-size: .75rem; color: #bbb; }
.chat-close { background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.chat-log { padding: 1rem; overflow-y: auto; display: grid; gap: .5rem; align-content: start; background: var(--panel); }
.chat-msg { max-width: 85%; padding: .6rem .85rem; border-radius: 14px; font-size: .95rem; line-height: 1.4; }
.chat-msg--bot { background: #fff; border-bottom-left-radius: 4px; justify-self: start; }
.chat-msg--me { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; justify-self: end; }
.chat-typing { display: flex; gap: .25rem; padding: .7rem .9rem; }
.chat-typing span { width: .4rem; height: .4rem; border-radius: 50%; background: #aaa; animation: chat-dot 1s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .15s; } .chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.chat-input { padding: .7rem 1rem; display: flex; flex-wrap: wrap; gap: .4rem; border-top: 1px solid var(--stucco-2); background: #fff; min-height: 3rem; }
.chat-chip { font: inherit; font-size: .85rem; font-weight: 600; padding: .5rem .8rem; border-radius: 999px; border: 1px solid var(--brand); color: var(--brand-dark); background: #fff; cursor: pointer; text-decoration: none; }
.chat-chip:hover, .chat-chip:focus-visible { background: var(--brand); color: #fff; outline: none; }
.chat-form { display: flex; gap: .4rem; width: 100%; }
.chat-form input { flex: 1; font: inherit; font-size: 1rem; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--stucco-2); min-width: 0; }
.chat-form input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.chat-send { font: inherit; font-weight: 600; padding: .6rem .9rem; border-radius: 10px; border: 0; background: var(--brand); color: #fff; cursor: pointer; }
.chat-foot { margin: 0; padding: .5rem 1rem .7rem; font-size: .78rem; color: var(--muted); background: #fff; }
.chat-foot a { color: var(--brand-dark); font-weight: 600; text-decoration: none; }

@media (max-width: 720px) {
  .chat { bottom: 4.4rem; right: .8rem; left: auto; }  /* clear the sticky action bar */
  .chat.is-open { left: .8rem; right: .8rem; }
  .chat-panel { width: 100%; height: min(30rem, calc(100svh - 6rem)); }
}
@media (prefers-reduced-motion: reduce) { .chat-bubble, .chat-typing span { animation: none !important; } }