/* CV-3444 / CV-3475: the support chat. One copy for every page that loads support-chat.js, which links this file. */
#support-chat .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#support-chat { position: fixed; right: 18px; bottom: 18px; z-index: 200; font-size: 15px; }
#chat-open {
  font: inherit; font-weight: 700; color: #fff; background: #0066cc; border: 0; border-radius: 22px;
  padding: 11px 20px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#chat-open:hover { background: #0052a3; }
#chat-panel {
  position: absolute; right: 0; bottom: 56px; width: 360px; max-width: calc(100vw - 36px); height: 480px;
  max-height: calc(100vh - 110px); background: #fff; border: 1px solid #b8c7dc; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden;
}
#chat-panel[hidden] { display: none; }
.chat-head { background: #0a2647; color: #fff; padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.chat-head strong { flex: 1; font-size: 0.95em; }
#chat-close { font: inherit; color: #fff; background: transparent; border: 0; cursor: pointer; font-size: 1.2em; line-height: 1; }
#chat-end { font: inherit; font-size: 0.8em; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.55); border-radius: 12px; padding: 2px 10px; cursor: pointer; }
#chat-end:hover { background: rgba(255,255,255,.12); }
#chat-end[hidden] { display: none; }
.chat-note.ended { background: #f0f4fa; border-top: 1px solid #d0e0f7; padding: 8px 12px; color: #0a2647; }
/* "Cora is replying": three bouncing dots while a reply is owed and someone is online */
.chat-typing { display: flex; gap: 4px; align-items: center; padding: 10px 12px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: #6b7f99; animation: chat-bounce 1.2s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-typing span { animation: none; opacity: .8; } }
#chat-end:focus-visible { outline: 2px solid #ffbf47; outline-offset: 2px; }
.chat-disclose { background: #f0f4fa; border-bottom: 1px solid #d0e0f7; padding: 8px 12px; font-size: 0.82em; color: #333; }
#chat-log { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { max-width: 85%; padding: 7px 10px; border-radius: 8px; font-size: 0.92em; white-space: pre-wrap; word-wrap: break-word; }
.chat-msg.me { align-self: flex-end; background: #0066cc; color: #fff; }
.chat-msg.them { align-self: flex-start; background: #eef2f7; color: #222; }
.chat-who { font-size: 0.78em; font-weight: 700; color: #0a2647; margin-bottom: 2px; }
.chat-note { font-size: 0.85em; padding: 0 12px; min-height: 0; }
.chat-note.err { color: #b00020; font-weight: 600; padding: 6px 12px; }
.chat-note.wait { background: #fff8e1; border-top: 1px solid #f0d58a; padding: 8px 12px; color: #4a3b00; }
.chat-link { font: inherit; background: none; border: 0; padding: 0; color: #0066cc; text-decoration: underline; cursor: pointer; }
#chat-form { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid #d0e0f7; padding: 8px; }
.chat-quick { flex-basis: 100%; }
#chat-meeting, #chat-attach { font: inherit; font-size: 0.85em; color: #0066cc; background: #fff; border: 1px solid #b8c7dc; border-radius: 14px; padding: 3px 12px; cursor: pointer; }
#chat-meeting:hover, #chat-attach:hover { background: #f0f4fa; }
#chat-attach[hidden] { display: none; }
#chat-attach[disabled] { color: #7a9cc6; cursor: default; }
#chat-meeting:focus-visible, #chat-attach:focus-visible { outline: 2px solid #ffbf47; outline-offset: 2px; }
#chat-form[hidden], #chat-log[hidden], .chat-start[hidden] { display: none; }
.chat-start { flex: 1; display: grid; gap: 6px; align-content: start; padding: 10px 12px; overflow-y: auto; font-size: 0.92em; }
.chat-start p { margin: 0 0 4px; color: #333; }
.chat-start label { font-weight: 600; color: #0a2647; font-size: 0.92em; }
.chat-start input { font: inherit; padding: 7px 9px; border: 1px solid #b8c7dc; border-radius: 4px; }
#chat-start-btn { justify-self: start; margin-top: 6px; font: inherit; font-weight: 700; color: #fff; background: #0066cc; border: 0; border-radius: 4px; padding: 8px 16px; cursor: pointer; }
#chat-start-btn[disabled] { background: #7a9cc6; cursor: default; }
.chat-who-me { font-size: 0.8em; color: #555; padding: 4px 0 0; }
.chat-who-me a, .chat-signin a, .chat-text a { color: #0066cc; }
.chat-msg.them .chat-text a { word-break: break-all; }
.chat-signin { background: #f0f4fa; border-left: 3px solid #0066cc; padding: 6px 8px; }
#chat-input { flex: 1; font: inherit; font-size: 0.92em; padding: 7px 9px; border: 1px solid #b8c7dc; border-radius: 4px; resize: none; height: 54px; }
#chat-send { font: inherit; font-weight: 700; color: #fff; background: #0066cc; border: 0; border-radius: 4px; padding: 0 14px; cursor: pointer; }
#chat-send[disabled] { background: #7a9cc6; cursor: default; }
#chat-open:focus-visible, #chat-close:focus-visible, #chat-send:focus-visible, #chat-input:focus, .chat-link:focus-visible {
  outline: 2px solid #ffbf47; outline-offset: 2px;
}