/* Live chat widget styles. Loaded by index.html without blocking the first
   paint; the widget stays out of the page (inline rule in index.html) until this file
   has arrived. Was 320 lines inlined into every one of the 94 pages. */
#chat-widget { display: block; }

/* ── Chat Widget Base ── */
#chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: 'Rubik', sans-serif;
  touch-action: none;
}
@media (min-width: 769px) {
  #chat-widget { right: 36px; }
}
#chat-widget.dragging { transition: none !important; }
#chat-widget.dragging #chat-toggle { animation: none; transform: scale(1.05); }
#chat-widget.dragging #chat-toggle::before,
#chat-widget.dragging #chat-toggle::after { display: none; }

/* ── Toggle Button ── */
#chat-toggle {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #1BDDEE 0%, #0890fb 100%);
  border: none; cursor: pointer;
  box-shadow: 0 4px 12px rgba(27, 221, 238, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  animation: bounce 2s ease-in-out infinite;
}
#chat-toggle::before, #chat-toggle::after {
  content: ''; position: absolute; width: 100%; height: 100%;
  border-radius: 50%; border: 2px solid #1BDDEE;
  animation: pulse-ring 2s ease-out infinite;
}
#chat-toggle::after { animation-delay: 1s; }
#chat-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(27, 221, 238, 0.5);
  animation: none;
}
#chat-toggle:hover::before, #chat-toggle:hover::after { animation: none; opacity: 0; }
#chat-toggle svg { width: 32px; height: 32px; }
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ── Unread Badge ── */
#chat-unread-badge {
  position: absolute; top: -4px; right: -4px;
  background: #d9534f; color: #fff; font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px; z-index: 1; border: 2px solid #fff;
}

/* ── Chat Window ── */
#chat-window {
  position: absolute; bottom: 72px; right: 0;
  width: 370px; max-height: calc(100vh - 120px);
/* No fixed height. The pre-chat is the tallest thing this panel holds, and
 at a fixed height it either scrolled on a short screen or left a hole
 under the short states. Sized to its content it does neither, and the
 chat view keeps a sensible floor through #chat-messages below. */
height: auto;
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden; display: none;
  animation: chatSlideUp 0.3s ease;
  flex-direction: column;
}
#chat-window.open { display: flex; }
@keyframes chatSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 420px) {
  #chat-window { width: calc(100vw - 48px); right: 0; }
}

/* ── Header ── */
#chat-header {
  background: linear-gradient(135deg, #1BDDEE 0%, #0890fb 100%);
  color: #fff; padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
#chat-logo { height: 22px; filter: brightness(0) invert(1); }
#chat-header-title { flex: 1; font-weight: 500; font-size: 0.95rem; }
#chat-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #5cb85c; border: 2px solid rgba(255,255,255,0.5);
  flex-shrink: 0;
}
#chat-status-dot.offline { background: #999; }
#chat-close {
  background: none; border: none; color: #fff;
  font-size: 24px; cursor: pointer; line-height: 1;
  opacity: 0.8; transition: opacity 0.2s;
}
#chat-close:hover { opacity: 1; }

/* ── Pre-chat Form ── */
#chat-prechat {
  padding: 18px 20px; text-align: left; flex: 1; overflow-y: auto;
  overscroll-behavior: contain;
}
#chat-prechat-head {
  display: flex; align-items: center; gap: 11px; margin-bottom: 10px;
}
#chat-avatar {
  width: 40px; height: 40px; flex-shrink: 0;
  background: linear-gradient(135deg, #1BDDEE 0%, #0890fb 100%);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0;
}
#chat-avatar i { font-size: 18px; color: #fff; }
#chat-prechat h4 {
  color: #092a44; font-size: 1.15rem; margin: 0; font-weight: 600;
}
#chat-prechat p {
  color: #5a6a7a; font-size: 0.85rem; line-height: 1.45;
  margin: 0 0 12px; font-family: 'Open Sans', sans-serif;
}
#prechat-form { display: flex; flex-direction: column; gap: 2px; text-align: left; }
/* Visible labels, not placeholders: a placeholder disappears the moment you
   type, taking the field's name with it exactly when you want to check what
   you are filling in — and a screen reader may never announce it at all. */
.chat-field-label {
  font-size: 0.72rem; font-weight: 600; color: #44525f;
  font-family: 'Open Sans', sans-serif; margin-top: 5px;
}
.chat-field-label:first-child { margin-top: 0; }
.chat-field-optional { font-weight: 400; color: #8a929a; }
#prechat-form input {
  width: 100%; padding: 8px 12px; border: 1px solid #ddd;
  border-radius: 8px; font-size: 0.9rem; font-family: 'Open Sans', sans-serif;
  outline: none; transition: border-color 0.2s; box-sizing: border-box;
}
#prechat-form input:focus { border-color: #0890fb; }
/* The department pick, drawn as the Hub widget draws it (owner, Oct 16 2026):
   every team on its own panel, so the choice is visible without opening
   anything and is one tap on a phone rather than a native picker. */
.chat-dept-pick {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px; background: #f0f7ff; border-radius: 8px;
  border: 1px solid transparent; box-sizing: border-box;
}
/* Start Chat pressed with no team picked. */
.chat-dept-pick-unanswered { border-color: #d9534f; }
#prechat-form .chat-dept-pick { margin-top: 7px; }
#prechat-signed-in .chat-dept-pick { margin-top: 10px; }
.chat-dept-label {
  font-size: 0.78rem; font-weight: 600; color: #092a44;
  font-family: 'Open Sans', sans-serif;
}
.chat-dept-options { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chat-dept-option {
  border: 1px solid #cfe7fb; background: #fff; color: #092a44;
  border-radius: 16px; padding: 5px 12px; font-size: 0.8rem; cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chat-dept-option:hover { border-color: #0890fb; }
.chat-dept-option[aria-checked="true"] {
  background: linear-gradient(135deg, #1BDDEE 0%, #0890fb 100%);
  color: #fff; border-color: transparent;
}
/* While the list is loading, and when it could not be fetched. */
.chat-dept-pending {
  font-size: 0.78rem; color: #5a6a7a; font-family: 'Open Sans', sans-serif;
}
.chat-dept-retry {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #0890fb; font-size: 0.78rem; text-decoration: underline;
  font-family: 'Open Sans', sans-serif;
}
/* Curse words the server marked, blurred for good (owner, Oct 16 2026): the
   visitor has no way to reveal them. The words, not the message. */
/* A web address in a message opens in a new tab (owner, Oct 16 2026). It
   takes the bubble's own colour so it reads on either side. */
.chat-msg-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.chat-msg-text a:hover { opacity: 0.8; }

/* The light formatting a message may carry (owner, Oct 20 2026). */
.chat-msg .chat-line + .chat-line { margin-top: 2px; }
.chat-msg .chat-list { margin: 2px 0; padding-left: 18px; }
.chat-msg ul.chat-list { list-style: disc; }
.chat-msg ol.chat-list { list-style: decimal; }
.chat-msg .chat-list li { margin: 1px 0; }
.chat-msg .chat-code { font-family: Consolas, Monaco, monospace; font-size: 0.92em; background: rgba(15, 23, 42, .08); border-radius: 3px; padding: 0 4px; }

.chat-blur {
  filter: blur(5px);
  user-select: none;
  border-radius: 3px;
}
/* Why a message of the visitor's own was blurred: a line of its own below
   the bubble, in italics, sitting in the visitor's column (owner, Oct 16
   2026). */
.chat-msg-warning {
  align-self: flex-end;
  max-width: 82%;
  margin: -4px 4px 2px 0;
  font-size: 11px;
  font-style: italic;
  line-height: 1.35;
  color: #8a6d3b;
  text-align: right;
  font-family: 'Open Sans', sans-serif;
}

/* "You are now chatting with our Support Team", under the pick. */
.chat-dept-note {
  margin: 4px 0 0; font-size: 0.78rem; color: #0890fb; font-weight: 600;
  font-family: 'Open Sans', sans-serif;
}

/* Label text for screen readers only, where the control already reads clearly
   to everyone else. */
.chat-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* One visible focus ring for everything in the widget. Keyboard only —
   :focus-visible leaves mouse users the look they already had. */
#chat-widget :focus-visible {
  outline: 2px solid #0890fb;
  outline-offset: 2px;
  border-radius: 4px;
}

/* No Start Chat button any more (owner, Oct 16 2026): the message box opens
   the chat, as on the Hub, and stays shut until the pre-chat is answered. */
#chat-input:disabled {
  background: #f7f9fb; color: #8a929a; cursor: not-allowed;
}
#chat-send:disabled {
  opacity: 0.45; cursor: not-allowed; transform: none;
}

/* ── Signed-in identity ── */
#prechat-signed-in { display: flex; flex-direction: column; gap: 2px; text-align: left; }
#prechat-signed-in .chat-field-label { margin-top: 10px; }
#prechat-identity {
  display: flex; align-items: center; gap: 11px; text-align: left;
  background: #f0f8ff; border: 1px solid #cfe7fb; border-radius: 8px;
  padding: 11px 12px; margin-bottom: 4px;
}
#prechat-identity-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #1BDDEE 0%, #0890fb 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: 'Rubik', sans-serif; font-size: 0.78rem; font-weight: 600;
}
.chat-identity-text { display: block; min-width: 0; flex: 1; }
/* Both lines are a single account value that must stay readable as one
   string, so they ellipsis rather than wrap. */
#prechat-identity-name, #prechat-identity-email {
  display: block; font-family: 'Open Sans', sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#prechat-identity-name { font-size: 0.85rem; font-weight: 600; color: #092a44; line-height: 1.3; }
#prechat-identity-email { font-size: 0.74rem; color: #5a6a7a; line-height: 1.35; }
.chat-identity-verified {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  font-size: 0.68rem; font-weight: 700; color: #1a7f4f;
  font-family: 'Open Sans', sans-serif;
}
.chat-identity-verified i { font-size: 0.7rem; }
/* ── Sign in with the Hub ── */
.chat-text-btn {
  display: block; width: 100%; background: none; border: none;
  padding: 4px 0; margin-top: 8px; cursor: pointer; text-align: center;
  font-family: 'Open Sans', sans-serif; font-size: 0.74rem; color: #0890fb;
  text-decoration: underline; text-underline-offset: 2px;
}
.chat-text-btn:hover { color: #0b74c4; }
.chat-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; color: #0b74c4; border: 1px solid #a9d6f7;
  padding: 11px 18px; border-radius: 8px; cursor: pointer;
  font-weight: 600; font-size: 0.85rem; width: 100%;
  font-family: 'Open Sans', sans-serif;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.chat-btn-secondary:hover { background: #f4faff; border-color: #0890fb; }
/* Under the guest form it is one quiet line. The visitor who needs it
   there is a customer on a browser we have never seen signed in, which
   is a rare thing, and a second bordered button next to Start Chat
   would make the choice look consequential when either one reaches the
   same team. */
.chat-btn-secondary.chat-signin-link {
  background: none; border: none; padding: 6px 0; margin-top: 12px;
  font-size: 0.74rem; font-weight: 600; color: #0890fb;
  text-decoration: underline; text-underline-offset: 2px;
}
.chat-btn-secondary.chat-signin-link:hover { background: none; color: #0b74c4; }
.chat-btn-secondary.chat-signin-link i { display: none; }
/* Promoted to the primary action for a browser that has held a Hub
   session before: that visitor is a customer, and signing in saves the
   agent a manual identity check on every chat. */
.chat-btn-secondary.primary {
  background: linear-gradient(135deg, #1BDDEE 0%, #0890fb 100%);
  color: #fff; border: none; padding: 12px 24px;
  font-size: 0.95rem; font-weight: 500;
}
.chat-btn-secondary.primary:hover {
  background: linear-gradient(135deg, #1BDDEE 0%, #0890fb 100%);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(8, 144, 251, 0.4);
}
/* One line at the widget's width: this sits under a button that is
   already explained, and a second line pushes it off the panel. */
.chat-prechat-sub {
  font-size: 0.72rem; color: #8a929a; margin: 4px 0 0; line-height: 1.45;
  font-family: 'Open Sans', sans-serif;
}
#prechat-waiting { display: flex; flex-direction: column; }
#chat-avatar-wait {
  width: 40px; height: 40px; margin: 0; color: #0890fb; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
#chat-avatar-wait i { font-size: 22px; }

/* ── Resolving skeleton ── */
#prechat-resolving { display: flex; flex-direction: column; gap: 9px; text-align: left; }
.chat-sk { background: #eef2f6; border-radius: 6px; }
.chat-sk-line { height: 11px; width: 40%; }
.chat-sk-line.chat-sk-wide { width: 60%; }
.chat-sk-field { height: 41px; border-radius: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .chat-sk { animation: chatSkShimmer 1.4s ease-in-out infinite; }
  @keyframes chatSkShimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
}

/* ── Messages Area ── */
#chat-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column;
  background: #f8f9fa;
  /* The panel has no fixed height any more, so the conversation needs a
     floor of its own or a chat with two messages in it would be a
     letterbox, and a ceiling, or a long chat grew the panel to the top of
     the screen before the list ever scrolled (owner report, Oct 15 2026).
     Between the two it scrolls inside the panel, and overscroll-behavior
     keeps a flick at the end of the list from scrolling the page behind. */
  min-height: 300px;
  max-height: 380px;
  overscroll-behavior: contain;
}
#chat-messages-list {
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.chat-msg {
  max-width: 82%; padding: 10px 14px;
  font-size: 0.88rem; line-height: 1.5;
  font-family: 'Open Sans', sans-serif;
  word-wrap: break-word;
}
.chat-msg.visitor {
  align-self: flex-end;
  background: linear-gradient(135deg, #1BDDEE 0%, #0890fb 100%);
  color: #fff; border-radius: 18px 18px 4px 18px;
}
.chat-msg.admin {
  align-self: flex-start; background: #fff;
  color: #333; border-radius: 18px 18px 18px 4px;
  border: 1px solid #e8e8e8;
}
.chat-msg.system {
  align-self: center; background: transparent;
  color: #999; font-size: 0.78rem; font-style: italic;
  text-align: center; padding: 4px 0;
}
.chat-msg-sender {
  font-size: 0.72rem; font-weight: 600; margin-bottom: 2px; opacity: 0.7;
}
.chat-msg-time {
  font-size: 0.68rem; opacity: 0.6; margin-top: 3px; text-align: right;
}
.chat-msg.failed { opacity: 0.75; }
.chat-msg-error {
  font-size: 0.7rem; margin-top: 4px; color: #ffe0dc;
}
.chat-msg-error a { color: #fff; text-decoration: underline; }

/* ── Typing Indicator ── */
#chat-typing {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: #999; padding: 4px 0;
  font-family: 'Open Sans', sans-serif;
}
.typing-dots span {
  animation: typingBounce 1.4s infinite ease-in-out;
  font-size: 1.2rem; line-height: 1; color: #0890fb;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

/* ── Input Area ── */
#chat-input-area {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-top: 1px solid #eee;
  background: #fff; flex-shrink: 0;
}
#chat-input-row {
  display: flex; align-items: flex-end; gap: 8px;
}
#chat-end-btn {
  background: none; border: none; color: #999;
  font-size: 0.75rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 2px 0; transition: color 0.2s;
  font-family: 'Open Sans', sans-serif;
}
#chat-end-btn:hover { color: #d9534f; }
#chat-end-btn i { font-size: 0.7rem; }
#chat-input {
  flex: 1; padding: 10px 14px; border: 1px solid #ddd;
  border-radius: 20px; font-size: 0.88rem; font-family: 'Open Sans', sans-serif;
  outline: none; resize: none; max-height: 100px; line-height: 1.4;
  transition: border-color 0.2s;
}
#chat-input:focus { border-color: #0890fb; }
#chat-send {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #1BDDEE 0%, #0890fb 100%);
  border: none; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s; flex-shrink: 0;
}
#chat-send:hover { transform: scale(1.05); }
#chat-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
#chat-send i { font-size: 14px; }

/* ── Inline Rating Prompt ── */
#inline-rating {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 10px; background: #f0f7ff; border-radius: 8px;
  border: 1px solid #d0e3f7;
}
.inline-rating-text { font-size: 0.78rem; color: #333; }
.inline-rating-stars { display: flex; gap: 4px; }
/* Stars are real buttons so a keyboard can reach and press them; the reset
   keeps them looking exactly as they did. */
.inline-star {
  font-size: 24px; color: #ddd; cursor: pointer;
  transition: color 0.15s, transform 0.15s;
  background: none; border: none; padding: 0; line-height: 1;
}
.inline-star:hover, .inline-star.active { color: #f0ad4e; transform: scale(1.15); }
.inline-rating-thanks {
  font-size: 0.75rem; color: #5cb85c; font-weight: 600;
}

/* ── Chat Ended / Rating ── */
#chat-ended { flex: 1; display: flex; align-items: center; justify-content: center; }
#chat-stars { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.chat-star {
  font-size: 28px; color: #ddd; cursor: pointer;
  transition: color 0.15s, transform 0.15s;
  background: none; border: none; padding: 0; line-height: 1;
}
.chat-star:hover, .chat-star.active { color: #f0ad4e; transform: scale(1.15); }
.chat-btn-primary {
  background: linear-gradient(135deg, #1BDDEE 0%, #0890fb 100%);
  color: #fff; border: none; padding: 10px 24px;
  border-radius: 8px; cursor: pointer; font-weight: 500;
  font-size: 0.9rem; transition: transform 0.2s;
}
.chat-btn-primary:hover { transform: translateY(-1px); }
#chat-rating-submit { margin-top: 10px; font-size: 0.82rem; padding: 8px 18px; }
#chat-rating-skip { margin-top: 6px; color: #8a929a; }
#chat-rating-skip:hover { color: #5a6a7a; }
.chat-rating-thanks {
  font-size: 0.88rem; color: #1a7f4f; font-weight: 600; margin: 0 0 4px;
  font-family: 'Open Sans', sans-serif;
}

/* ── Consent line ── */
#chat-consent {
  flex-shrink: 0; padding: 7px 14px 9px; border-top: 1px solid #eee;
  background: #fff; font-size: 0.66rem; line-height: 1.4; color: #8a929a;
  text-align: center; font-family: 'Open Sans', sans-serif;
}
#chat-consent a {
  color: #0890fb; text-decoration: underline; text-underline-offset: 2px;
  white-space: nowrap;
}

/* ── Greeting Bubble ── */
#chat-bubble {
  position: absolute; bottom: 8px; right: 72px;
  background: #fff; padding: 10px 36px 10px 16px;
  border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: none; animation: bubbleSlide 0.4s ease; white-space: nowrap;
}
#chat-bubble.show { display: block; }
#chat-bubble span { color: #092a44; font-size: 0.95rem; font-weight: 500; }
#chat-bubble::after {
  content: ''; position: absolute; right: -8px; bottom: 16px;
  width: 0; height: 0; border: 8px solid transparent;
  border-left-color: #fff; border-right: 0;
}
#bubble-close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #999; font-size: 18px;
  cursor: pointer; line-height: 1; padding: 4px;
}
#bubble-close:hover { color: #666; }
@keyframes bubbleSlide {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── Scrollbar ── */
#chat-messages::-webkit-scrollbar { width: 5px; }
#chat-messages::-webkit-scrollbar-track { background: transparent; }
#chat-messages::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* ── Validation Errors ── */
.chat-validation-error {
  font-size: 0.72rem; color: #d9534f; padding: 2px 14px 0;
  font-family: 'Open Sans', sans-serif; display: none;
}
.chat-char-count {
  font-size: 0.68rem; color: #999; text-align: right; padding: 0 14px;
  font-family: 'Open Sans', sans-serif; display: none;
}
.chat-char-count.over-limit { color: #d9534f; font-weight: 600; }

/* ── Seen Indicator ── */
.chat-seen-indicator {
  font-size: 0.7rem; color: #999; text-align: right;
  padding: 2px 4px 0; font-family: 'Open Sans', sans-serif;
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
}
.chat-seen-indicator i { font-size: 0.65rem; color: #0890fb; }

/* ── Files in the chat (Oct 23 2026) ── */
/* The paperclip next to Send, shown once a chat is open. */
#chat-attach {
  width: 40px; height: 40px; border-radius: 50%;
  background: #f0f4f8; border: 1px solid #dde4ec; cursor: pointer; color: #4a5a6a;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0; transition: background 0.2s, color 0.2s;
}
#chat-attach:hover { background: #e3f1fe; color: #0670c9; }
#chat-attach:disabled { opacity: 0.45; cursor: not-allowed; }
#chat-attach svg { display: block; }
/* "Uploading name..." under the message box. */
#chat-upload-status {
  font-size: 0.72rem; color: #5a6a7a; padding: 0 14px;
  font-family: 'Open Sans', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A file waiting for the malware scan: its name and a small line. */
.chat-att-file { font-weight: 600; word-break: break-all; }
.chat-att-status { font-size: 0.72rem; opacity: 0.8; font-style: italic; margin-top: 2px; }
/* A file the scan removed, or one that expired: a muted bubble, no link. */
.chat-msg.chat-msg-att-infected,
.chat-msg.chat-msg-att-expired {
  background: #f4f6f8; color: #5a6a7a; border: 1px solid #e1e6eb;
}
.chat-msg.chat-msg-att-infected { background: #fdf3f2; color: #a33a30; border-color: #f2d4d0; }
.chat-att-muted, .chat-att-alert { font-style: italic; }
.chat-att-glyph { font-style: normal; margin-right: 2px; }