/* Claude Store Assistant: scoped under #csa-root so it doesn't fight the theme. */
#csa-root {
  --csa-accent: #1f5f5b;
  --csa-on-accent: #ffffff;
  --csa-surface: #ffffff;
  --csa-text: #1d2322;
  --csa-soft: #f1f3f2;
  --csa-online: #22c55e;
  --csa-header-bg: var(--csa-accent);
  --csa-on-header: var(--csa-on-accent);
  --csa-user-bg: var(--csa-accent);
  --csa-on-user: var(--csa-on-accent);
  --csa-bot-text: var(--csa-text);
  --csa-side: 20px;
  --csa-bottom: 20px;
  --csa-launch: 70px;
  --csa-muted: color-mix(in srgb, var(--csa-text) 60%, transparent);
  --csa-line: color-mix(in srgb, var(--csa-text) 12%, transparent);
  --csa-font: inherit;
  --csa-radius: 20px;
  --csa-bubble-radius: 18px;
  --csa-width: 380px;
  --csa-height: 620px;
  position: fixed;
  right: var(--csa-side);
  bottom: calc(var(--csa-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 99999;
  font-family: var(--csa-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--csa-text);
  -webkit-font-smoothing: antialiased;
}

/* Options */
#csa-root.csa-pos-left { right: auto; left: var(--csa-side); }
#csa-root.csa-launch-small { --csa-launch: 58px; }
#csa-root.csa-launch-large { --csa-launch: 84px; }
#csa-root.csa-size-compact { --csa-width: 340px; --csa-height: 520px; font-size: 14px; }
#csa-root.csa-size-large { --csa-width: 440px; --csa-height: 720px; }
#csa-root.csa-corners-square { --csa-radius: 6px; --csa-bubble-radius: 6px; }
#csa-root.csa-corners-soft { --csa-radius: 28px; --csa-bubble-radius: 22px; }

#csa-root *,
#csa-root *::before,
#csa-root *::after { box-sizing: border-box; }
#csa-root button { font: inherit; cursor: pointer; margin: 0; }
#csa-root :focus-visible { outline: 2px solid var(--csa-accent); outline-offset: 2px; }
#csa-root .csa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Avatar ---------- */
#csa-root .csa-avatar {
  display: block;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: #fde8db;
}
#csa-root .csa-avatar-photo { background: var(--csa-soft); }
#csa-root .csa-avatar-initial { display: grid; place-items: center; background: var(--csa-accent); color: var(--csa-on-accent); font-weight: 700; }
#csa-root .csa-avatar svg,
#csa-root .csa-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
#csa-root .csa-avatar-lg { width: 64px; height: 64px; }
#csa-root .csa-avatar-md { width: 42px; height: 42px; }
#csa-root .csa-avatar-sm { width: 28px; height: 28px; }

#csa-root .csa-online {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--csa-online);
  border: 2.5px solid var(--csa-surface);
}

/* ---------- Launcher ---------- */
#csa-root .csa-launch-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
}
#csa-root.csa-pos-left .csa-launch-wrap { flex-direction: row-reverse; justify-content: flex-end; }
#csa-root.csa-open .csa-launch-wrap { display: none; }

#csa-root .csa-launcher {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  width: calc(var(--csa-launch) - 12px);
  height: calc(var(--csa-launch) - 12px);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--csa-accent);
  color: var(--csa-on-accent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--csa-accent) 38%, transparent);
  transition: transform 0.18s ease;
}
#csa-root.csa-corners-square .csa-launcher-icon,
#csa-root.csa-corners-square .csa-launcher-label { border-radius: 10px; }
#csa-root .csa-launcher:hover { transform: translateY(-2px); }
#csa-root .csa-launcher-label { width: auto; padding: 0 22px 0 18px; font-weight: 600; }

#csa-root .csa-launcher-avatar {
  width: var(--csa-launch);
  height: var(--csa-launch);
  padding: 3px;
  background: var(--csa-surface);
  box-shadow: 0 0 0 3px var(--csa-accent), 0 12px 30px rgba(15, 25, 23, 0.28);
}
#csa-root .csa-launcher-avatar .csa-online { right: 2px; bottom: 2px; width: 17px; height: 17px; }

/* Attention ring while the bubble is showing */
#csa-root .csa-launcher-avatar.csa-attention::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid var(--csa-accent);
  animation: csa-ring 1.8s ease-out 4;
  pointer-events: none;
}
@keyframes csa-ring {
  from { transform: scale(1); opacity: 0.8; }
  to   { transform: scale(1.45); opacity: 0; }
}

/* "May I help you?" bubble */
#csa-root .csa-teaser {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 14px;
  max-width: 250px;
  background: var(--csa-surface);
  color: var(--csa-text);
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 14px 36px rgba(15, 25, 23, 0.2), 0 0 0 1px var(--csa-line);
  animation: csa-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#csa-root.csa-pos-left .csa-teaser { border-radius: 18px 18px 18px 4px; }
#csa-root .csa-teaser[hidden] { display: none; }
#csa-root .csa-teaser::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--csa-accent);
}
#csa-root .csa-teaser-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 6px 13px 18px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
#csa-root .csa-teaser-name { font-size: 12.5px; font-weight: 600; color: var(--csa-muted); }
#csa-root .csa-teaser-msg { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--csa-text); }
#csa-root .csa-teaser-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin: 6px 6px 0 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--csa-muted);
}
#csa-root .csa-teaser-close:hover { background: var(--csa-soft); color: var(--csa-text); }
@keyframes csa-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Window ---------- */
#csa-root .csa-panel {
  display: flex;
  flex-direction: column;
  width: var(--csa-width);
  height: min(var(--csa-height), calc(100vh - 40px));
  background: var(--csa-surface);
  border-radius: var(--csa-radius);
  box-shadow: 0 24px 64px rgba(15, 25, 23, 0.26), 0 0 0 1px var(--csa-line);
  overflow: hidden;
  transform-origin: bottom right;
  animation: csa-in 0.22s ease-out;
}
#csa-root.csa-pos-left .csa-panel { transform-origin: bottom left; }
#csa-root .csa-panel[hidden] { display: none; }
@keyframes csa-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Header */
#csa-root .csa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 12px 16px 18px;
  border-bottom: 1px solid var(--csa-line);
}
#csa-root.csa-header-color .csa-header {
  background: var(--csa-header-bg);
  color: var(--csa-on-header);
  border-bottom-color: transparent;
}
#csa-root .csa-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
#csa-root .csa-head-avatar { position: relative; flex: none; }
#csa-root .csa-head-avatar .csa-avatar { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent); }
#csa-root .csa-head-avatar .csa-online { width: 12px; height: 12px; right: -1px; bottom: -1px; border-color: var(--csa-header-bg); }
#csa-root.csa-header-plain .csa-head-avatar .csa-online { border-color: var(--csa-surface); }
#csa-root .csa-title {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
}
#csa-root .csa-subtitle { margin: 3px 0 0; font-size: 13px; line-height: 1.3; opacity: 0.85; }
#csa-root .csa-actions { display: flex; gap: 2px; flex: none; }
#csa-root .csa-icon-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.8;
}
#csa-root .csa-icon-btn:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }

/* ---------- Messages ---------- */
#csa-root .csa-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#csa-root .csa-day {
  align-self: center;
  margin: 0 0 2px;
  font-size: 12px;
  color: var(--csa-muted);
}
#csa-root .csa-row { display: flex; align-items: flex-end; gap: 8px; }
#csa-root .csa-row-user { justify-content: flex-end; }
#csa-root .csa-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--csa-bubble-radius);
  overflow-wrap: anywhere;
}
#csa-root .csa-bot {
  background: var(--csa-soft);
  color: var(--csa-bot-text);
  border-bottom-left-radius: min(var(--csa-bubble-radius), 5px);
}
#csa-root .csa-user {
  background: var(--csa-user-bg);
  color: var(--csa-on-user);
  border-bottom-right-radius: min(var(--csa-bubble-radius), 5px);
}
#csa-root .csa-bot a {
  color: var(--csa-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Minimal style */
#csa-root.csa-style-minimal .csa-bot {
  padding: 2px 0 2px 12px;
  background: transparent;
  color: var(--csa-text);
  border-radius: 0;
  border-left: 2px solid var(--csa-accent);
}
#csa-root.csa-style-minimal .csa-typing { padding-left: 12px; }

/* Quick replies */
#csa-root .csa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 36px;
}
#csa-root .csa-chip {
  padding: 7px 14px;
  border: 1.5px solid var(--csa-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--csa-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  transition: background 0.15s ease, color 0.15s ease;
}
#csa-root .csa-chip:hover { background: var(--csa-accent); color: var(--csa-on-accent); }
#csa-root.csa-corners-square .csa-chip { border-radius: 6px; }

#csa-root .csa-error {
  padding: 8px 12px;
  border-left: 3px solid #b3261e;
  background: #fbeeed;
  color: #7a1a14;
  font-size: 14px;
  border-radius: 6px;
}

/* Typing indicator */
#csa-root .csa-typing { display: flex; gap: 4px; padding: 14px 16px; }
#csa-root .csa-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--csa-muted);
  animation: csa-dot 1.1s infinite ease-in-out;
}
#csa-root .csa-typing span:nth-child(2) { animation-delay: 0.15s; }
#csa-root .csa-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes csa-dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---------- Composer ---------- */
#csa-root .csa-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 6px 6px 6px 4px;
  border: 1.5px solid var(--csa-line);
  border-radius: min(var(--csa-bubble-radius) + 6px, 26px);
  background: var(--csa-surface);
  transition: border-color 0.15s ease;
}
#csa-root .csa-compose:focus-within { border-color: var(--csa-accent); }
#csa-root .csa-input {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  margin: 0;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  color: var(--csa-text);
  font: inherit;
  font-size: 16px; /* prevents iOS zoom on focus */
  line-height: 1.4;
  resize: none;
  box-shadow: none;
  outline: none;
}
#csa-root .csa-input::placeholder { color: var(--csa-muted); }
#csa-root .csa-send {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--csa-accent);
  color: var(--csa-on-accent);
}
#csa-root.csa-corners-square .csa-send { border-radius: 6px; }
#csa-root .csa-send:disabled { opacity: 0.5; cursor: wait; }

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
  #csa-root.csa-hide-mobile,
  #csa-root.csa-teaser-desktop-only .csa-teaser { display: none !important; }
  #csa-root.csa-launch-large { --csa-launch: 70px; }
  #csa-root.csa-open,
  #csa-root.csa-open.csa-pos-left { right: 12px; left: 12px; }
  #csa-root .csa-panel { width: 100%; height: calc(100vh - 80px); height: calc(100dvh - 80px); }
  #csa-root .csa-launcher-text { display: none; }
  #csa-root .csa-launcher-label { width: 58px; padding: 0; }
  #csa-root .csa-teaser { max-width: calc(100vw - 110px); }
}

@media (prefers-reduced-motion: reduce) {
  #csa-root .csa-panel,
  #csa-root .csa-teaser,
  #csa-root .csa-typing span,
  #csa-root .csa-launcher-avatar.csa-attention::before { animation: none; }
  #csa-root .csa-launcher { transition: none; }
}