/* ASJ site agent widget. External so style-src does not need 'unsafe-inline'
   on account of the chat. Deploy to /css/chat.css */
#asj-chat-ts { position: fixed; left: -9999px; top: 0; }

#asj-chat-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 9998;
  border: 0; border-radius: 999px; padding: 14px 20px;
  font: 600 15px/1 system-ui, -apple-system, sans-serif;
  background: #0F1419; color: #fff; cursor: pointer;
}
#asj-chat-panel {
  position: fixed; right: 20px; bottom: 84px; z-index: 9999;
  width: min(360px, calc(100vw - 40px)); height: min(460px, 70vh);
  background: #fff; border: 1px solid #d8d8d8; border-radius: 12px;
  display: none; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  font: 15px/1.45 system-ui, -apple-system, sans-serif; color: #111;
}
#asj-chat-panel[data-open="1"] { display: flex; }
#asj-chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.asj-m { max-width: 85%; padding: 9px 12px; border-radius: 10px; white-space: pre-wrap; word-break: break-word; }
.asj-them { background: #f1f1f1; align-self: flex-start; }
.asj-me { background: #0F1419; color: #fff; align-self: flex-end; }
#asj-chat-form { display: flex; gap: 8px; border-top: 1px solid #e6e6e6; padding: 10px; }
#asj-chat-input { flex: 1; border: 1px solid #d8d8d8; border-radius: 8px; padding: 9px 11px; font: inherit; }
#asj-chat-send { border: 0; border-radius: 8px; padding: 9px 14px; background: #0F1419; color: #fff; font: inherit; cursor: pointer; }
#asj-chat-send[disabled] { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) { #asj-chat-panel { transition: none; } }

/* Typing indicator. Three dots, so a slow reply does not look like a freeze. */
.asj-thinking { display: flex; gap: 4px; align-items: center; min-height: 12px; }
.asj-thinking span {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .35;
  animation: asj-blink 1.2s infinite ease-in-out;
}
.asj-thinking span:nth-child(2) { animation-delay: .2s; }
.asj-thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes asj-blink {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40%           { opacity: .9;  transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .asj-thinking span { animation: none; opacity: .5; }
}