/*
 * GSKordeven assistant widget.
 *
 * Served from the same origin as the site, so script-src 'self' and
 * connect-src 'self' both pass unchanged. No CDN, no external font, no
 * webfont request: the widget inherits whatever the page is already using.
 *
 * Everything is namespaced under .csa- and the panel is fixed-position, so it
 * cannot disturb the theme's layout. Colours are the GSKordeven blue and
 * violet against the dark surface the site already uses.
 */

.csa-root {
  --csa-violet: #7C5CFF;
  --csa-blue: #3FA9F5;
  --csa-surface: #14162A;
  --csa-surface-2: #1D2039;
  --csa-line: #2E3255;
  --csa-text: #ECEEFA;
  --csa-text-soft: #A8AEC9;
  --csa-user: #2A2F52;
  --csa-shadow: 0 18px 48px -12px rgba(0, 0, 0, .55);

  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99999;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- the bubble ---------- */
.csa-bubble {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--csa-violet), var(--csa-blue));
  box-shadow: var(--csa-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  padding: 0;
}
.csa-bubble:hover { transform: translateY(-2px) scale(1.04); }
.csa-bubble:focus-visible { outline: 3px solid var(--csa-blue); outline-offset: 3px; }
.csa-bubble svg { width: 27px; height: 27px; display: block; }

.csa-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  background: #E5484D;
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: none;
  place-items: center;
  padding: 0 5px;
}
.csa-root.csa-has-unread .csa-badge { display: grid; }

/* ---------- the panel ---------- */
.csa-panel {
  position: absolute;
  right: 0;
  bottom: 74px;
  width: min(390px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 130px));
  background: var(--csa-surface);
  border: 1px solid var(--csa-line);
  border-radius: 14px;
  box-shadow: var(--csa-shadow);
  display: none;
  flex-direction: column;
  overflow: hidden;
  color: var(--csa-text);
}
.csa-root.csa-open .csa-panel { display: flex; }

.csa-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  background: linear-gradient(120deg, rgba(124, 92, 255, .22), rgba(63, 169, 245, .14));
  border-bottom: 1px solid var(--csa-line);
  flex: none;
}
.csa-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #3DD68C; flex: none;
}
.csa-root.csa-offline .csa-dot { background: #E5A23D; }
.csa-title { font-weight: 600; font-size: 15px; }
.csa-sub { font-size: 11.5px; color: var(--csa-text-soft); }
.csa-close {
  margin-left: auto;
  background: transparent; border: 0; cursor: pointer;
  color: var(--csa-text-soft);
  font-size: 22px; line-height: 1;
  padding: 4px 6px; border-radius: 6px;
}
.csa-close:hover { color: var(--csa-text); background: rgba(255, 255, 255, .07); }
.csa-close:focus-visible { outline: 2px solid var(--csa-blue); }

/* ---------- messages ---------- */
.csa-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  overscroll-behavior: contain;
}
.csa-msg {
  max-width: 87%;
  padding: 10px 13px;
  border-radius: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.csa-msg.csa-bot {
  background: var(--csa-surface-2);
  border: 1px solid var(--csa-line);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.csa-msg.csa-me {
  background: var(--csa-user);
  border: 1px solid var(--csa-line);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.csa-msg a { color: var(--csa-blue); }
/* Bold comes from the assistant's **markers**, rendered as real <strong>
   elements by the widget. Slightly brighter than body text so a lead-in
   like "Email security." separates the paragraphs without shouting. */
.csa-msg strong { color: #FFFFFF; font-weight: 600; }

.csa-typing { display: flex; gap: 4px; align-items: center; padding: 4px 2px; }
.csa-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--csa-text-soft);
  animation: csa-pulse 1.3s infinite ease-in-out;
}
.csa-typing i:nth-child(2) { animation-delay: .18s; }
.csa-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes csa-pulse {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .csa-typing i { animation: none; opacity: .6; }
  .csa-bubble { transition: none; }
}

/* ---------- suggestions ---------- */
.csa-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.csa-chip {
  background: transparent;
  border: 1px solid var(--csa-line);
  color: var(--csa-text-soft);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
}
.csa-chip:hover { border-color: var(--csa-blue); color: var(--csa-text); }
.csa-chip:focus-visible { outline: 2px solid var(--csa-blue); }

/* ---------- composer ---------- */
.csa-foot {
  flex: none;
  border-top: 1px solid var(--csa-line);
  padding: 11px 12px;
  background: var(--csa-surface);
}
.csa-row { display: flex; gap: 8px; align-items: flex-end; }
.csa-input {
  flex: 1;
  resize: none;
  background: var(--csa-surface-2);
  border: 1px solid var(--csa-line);
  border-radius: 9px;
  color: var(--csa-text);
  padding: 9px 11px;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  max-height: 110px;
  min-height: 40px;
}
.csa-input:focus { outline: none; border-color: var(--csa-blue); }
.csa-input::placeholder { color: var(--csa-text-soft); }
.csa-send {
  flex: none;
  width: 40px; height: 40px;
  border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(140deg, var(--csa-violet), var(--csa-blue));
  display: grid; place-items: center;
  padding: 0;
}
.csa-send:disabled { opacity: .45; cursor: not-allowed; }
.csa-send:focus-visible { outline: 2px solid var(--csa-blue); outline-offset: 2px; }
.csa-send svg { width: 17px; height: 17px; }

.csa-note {
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--csa-text-soft);
  text-align: center;
  line-height: 1.4;
}
.csa-count { float: right; font-variant-numeric: tabular-nums; }
.csa-count.csa-warn { color: #E5A23D; }

/* ---------- small screens ---------- */
@media (max-width: 480px) {
  .csa-root { right: 14px; bottom: 14px; }
  .csa-panel {
    width: calc(100vw - 24px);
    height: min(74vh, calc(100vh - 110px));
    right: -2px;
  }
  .csa-bubble { width: 54px; height: 54px; }
}