/* PageCoder RAG Chat — frontend widget. Scoped under .pcrag-* */

.pcrag-root {
  --pcrag-bg: #ffffff;
  --pcrag-fg: #1d2327;
  --pcrag-muted: #646970;
  --pcrag-border: #dcdcde;
  --pcrag-primary: #2271b1;
  --pcrag-primary-fg: #ffffff;
  --pcrag-bubble-user-bg: #2271b1;
  --pcrag-bubble-user-fg: #ffffff;
  --pcrag-bubble-bot-bg: #f0f0f1;
  --pcrag-bubble-bot-fg: #1d2327;
  --pcrag-error: #d63638;
  --pcrag-radius: 12px;
  --pcrag-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  /* Motion tokens (Material 3). Exit is deliberately faster than enter —
     that asymmetry is what makes the panel feel designed rather than
     merely animated. Shared with search-widget.css. */
  --pcrag-motion-enter: 200ms;
  --pcrag-motion-exit: 150ms;
  --pcrag-ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --pcrag-ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  /* Extra clearance above the bottom edge (Widget tab -> Lift off the bottom).
     Declared here so the calc()s below work even when widget.js never sets it. */
  --pcrag-bottom-offset: 0px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* --- Button --- */

.pcrag-button {
  position: fixed;
  bottom: calc(24px + var(--pcrag-bottom-offset, 0px));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pcrag-primary);
  color: var(--pcrag-primary-fg);
  border: none;
  cursor: pointer;
  box-shadow: var(--pcrag-shadow);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.pcrag-button:hover { transform: scale(1.05); }
.pcrag-button:active { transform: scale(0.94); transition-duration: 0.1s; }
.pcrag-button:focus-visible { outline: 3px solid var(--pcrag-primary); outline-offset: 3px; }
.pcrag-button svg { width: 28px; height: 28px; display: block; }

/* Icon cross-fade: the chat mark rotates out as the close mark rotates in. */
.pcrag-btn-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity var(--pcrag-motion-exit) var(--pcrag-ease-exit),
    transform var(--pcrag-motion-exit) var(--pcrag-ease-exit);
}
.pcrag-btn-icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.pcrag-root.pcrag-open .pcrag-btn-icon--open { opacity: 0; transform: rotate(90deg) scale(0.6); }
.pcrag-root.pcrag-open .pcrag-btn-icon--close { opacity: 1; transform: none; }

.pcrag-root[data-position="bottom-right"] .pcrag-button { right: 24px; }
.pcrag-root[data-position="bottom-left"] .pcrag-button { left: 24px; }

/* --- Panel --- */

.pcrag-panel {
  position: fixed;
  /* Moves with the button so the 16px gap between them is preserved
     (96 - 24 - 56px of button). */
  bottom: calc(96px + var(--pcrag-bottom-offset, 0px));
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  /* The cap has to shrink by the same amount, or lifting the panel on a short
     viewport pushes its top off the screen. */
  max-height: calc(100vh - 120px - var(--pcrag-bottom-offset, 0px));
  background: var(--pcrag-bg);
  color: var(--pcrag-fg);
  border-radius: var(--pcrag-radius);
  box-shadow: var(--pcrag-shadow);
  /* `display` cannot be transitioned, so the panel stays laid out and is
     hidden with visibility/opacity instead. visibility:hidden also keeps it
     out of the tab order; widget.js additionally toggles `inert`. */
  display: flex;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transform-origin: 100% 100%;
  pointer-events: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 999999;
  border: 1px solid var(--pcrag-border);
  transition:
    opacity var(--pcrag-motion-exit) var(--pcrag-ease-exit),
    transform var(--pcrag-motion-exit) var(--pcrag-ease-exit),
    visibility 0s linear var(--pcrag-motion-exit);
}
.pcrag-root[data-position="bottom-right"] .pcrag-panel { right: 24px; }
.pcrag-root[data-position="bottom-left"] .pcrag-panel { left: 24px; transform-origin: 0 100%; }
.pcrag-root.pcrag-open .pcrag-panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition:
    opacity var(--pcrag-motion-enter) var(--pcrag-ease-enter),
    transform var(--pcrag-motion-enter) var(--pcrag-ease-enter),
    visibility 0s;
}
/* Restored-open state (page load, ?pcrag_open=1) must not animate — the
   panel was already open before the visitor got here. */
.pcrag-root.pcrag-no-motion .pcrag-panel,
.pcrag-root.pcrag-no-motion .pcrag-button,
.pcrag-root.pcrag-no-motion .pcrag-btn-icon { transition: none !important; }

/* --- Header glow (opt-in) ---
   Mirrors the ambient glow on pagecoder.ai: one big, very soft radial
   gradient drifting slowly sideways, blended additively so it only ADDS
   light to the header and can never darken or cover the logo and title.
   Scaled down for a 380px panel — 22s instead of 32s, since the travel
   distance is a header rather than a viewport. */

.pcrag-header-glow { position: relative; overflow: hidden; }
.pcrag-header-glow > * { position: relative; z-index: 1; }

.pcrag-header-glow::before {
  content: "";
  position: absolute;
  top: -120%;
  left: -40%;
  width: 60%;
  height: 340%;
  background: radial-gradient(circle at center,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.28) 30%,
    rgba(255, 255, 255, 0.10) 55%,
    transparent 75%);
  /* Strength lives on `opacity` rather than in the gradient stops, so the
     admin slider scales the whole falloff evenly instead of flattening it.
     0.6 = the original effect toned down; 1 restores it. */
  opacity: var(--pcrag-glow-opacity, 0.6);
  filter: blur(14px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  animation: pcrag-header-glow 22s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
}

/* Continuous pass, no rest. When the operator asks for a pause between
   passes, widget.js replaces the animation with generated keyframes that
   hold at the start — the ratio of travel to rest can't be expressed with
   a fixed keyframe rule, since percentages can't take custom properties. */
@keyframes pcrag-header-glow {
  0%   { transform: translateX(0)     scale(1); }
  50%  { transform: translateX(230%)  scale(1.1); }
  100% { transform: translateX(0)     scale(1); }
}

/* --- Header --- */

.pcrag-header {
  padding: 12px 16px;
  background: var(--pcrag-primary);
  color: var(--pcrag-primary-fg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.pcrag-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pcrag-header-logo {
  height: 24px;
  width: auto;
  flex-shrink: 0;
  border-radius: 4px;
}
.pcrag-header strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcrag-header-right {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.pcrag-new-chat {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: inherit;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.4;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.pcrag-new-chat:hover { opacity: 1; background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5); }
.pcrag-close {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.pcrag-close:hover { background: rgba(255,255,255,0.15); }

/* --- Service notice bar --- */

.pcrag-notice {
  padding: 10px 14px;
  background: #fcf0f0;
  color: #8a1919;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid #f0d4d4;
  flex-shrink: 0;
}

/* --- Messages --- */

.pcrag-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pcrag-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--pcrag-radius);
  word-wrap: break-word;
  white-space: pre-wrap;
}
.pcrag-msg-user {
  align-self: flex-end;
  background: var(--pcrag-bubble-user-bg);
  color: var(--pcrag-bubble-user-fg);
  border-bottom-right-radius: 4px;
}
.pcrag-msg-bot {
  align-self: flex-start;
  background: var(--pcrag-bubble-bot-bg);
  color: var(--pcrag-bubble-bot-fg);
  border-bottom-left-radius: 4px;
}

/* --- Conversation style: "assistant" ---
   Every bot bubble gets the site's logo as an avatar. Done with a pseudo
   element rather than extra markup so it covers all four places a bot
   bubble is created (answer, streaming, "searching…", setup hint) without
   any of them having to know about it. */

.pcrag-style-assistant .pcrag-msg-bot {
  position: relative;
  margin-left: 40px;
  border-bottom-left-radius: var(--pcrag-radius);
  border-top-left-radius: 4px;
}
.pcrag-style-assistant .pcrag-msg-bot::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* Brand-colored disc, logo centred on top, soft ring to lift it off the
     panel. Falls back to a plain disc when no logo is configured. */
  background-color: var(--pcrag-primary);
  background-image: var(--pcrag-avatar, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px auto;
  box-shadow:
    0 0 0 2px var(--pcrag-bg),
    0 2px 6px rgba(0, 0, 0, 0.18);
}
/* The user side gets a matching indent so the two columns line up. */
.pcrag-style-assistant .pcrag-msg-user {
  border-bottom-right-radius: var(--pcrag-radius);
  border-top-right-radius: 4px;
}
/* --- Status bubble (searching / generating) --- */

.pcrag-msg-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--pcrag-muted);
  background: var(--pcrag-bubble-bot-bg);
}
.pcrag-status-icon {
  width: 16px; height: 16px;
  border: 2px solid var(--pcrag-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: pcrag-spin 0.8s linear infinite;
}
@keyframes pcrag-spin { to { transform: rotate(360deg); } }
.pcrag-status-text { font-style: italic; }

/* --- Typewriter cursor --- */

.pcrag-cursor {
  font-weight: 100;
  color: var(--pcrag-primary);
  animation: pcrag-blink 0.6s step-end infinite;
}
@keyframes pcrag-blink { 50% { opacity: 0; } }
.pcrag-msg-error {
  align-self: stretch;
  background: transparent;
  color: var(--pcrag-error);
  font-size: 13px;
  text-align: center;
  padding: 4px;
}

.pcrag-msg a { color: inherit; text-decoration: underline; }
.pcrag-msg code {
  background: rgba(0,0,0,0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12.5px;
}
.pcrag-msg-user code { background: rgba(255,255,255,0.18); }
.pcrag-citation {
  color: var(--pcrag-primary) !important;
  text-decoration: none !important;
  font-weight: 600;
  cursor: pointer;
}
.pcrag-citation:hover { text-decoration: underline !important; }
.pcrag-msg pre {
  background: #1d2327; color: #f0f0f1; padding: 10px 12px;
  border-radius: 6px; overflow-x: auto; font-size: 12px; margin: 6px 0;
  white-space: pre;
}
.pcrag-msg pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.pcrag-msg table { border-collapse: collapse; font-size: 12.5px; margin: 6px 0; width: 100%; }
.pcrag-msg th, .pcrag-msg td { border: 1px solid var(--pcrag-border); padding: 4px 8px; text-align: left; }
.pcrag-msg th { background: rgba(0,0,0,0.04); font-weight: 600; }
.pcrag-msg ul, .pcrag-msg ol { margin: 4px 0; padding-left: 18px; }
.pcrag-msg li { margin: 2px 0; }
.pcrag-msg h3, .pcrag-msg h4, .pcrag-msg h5, .pcrag-msg h6 { margin: 8px 0 4px; font-size: 13.5px; font-weight: 600; }
.pcrag-msg hr { border: none; border-top: 1px solid var(--pcrag-border); margin: 8px 0; }

/* --- Sources --- */

.pcrag-sources {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--pcrag-border);
  font-size: 12px;
  color: var(--pcrag-muted);
  white-space: normal;
}
.pcrag-sources strong { display: block; margin-bottom: 4px; }
.pcrag-sources a { display: flex; flex-wrap: nowrap; flex-direction: row; align-content: flex-start; justify-content: flex-start; align-items: center; color: var(--pcrag-primary); text-decoration: none; padding: 4px 4px; }
.pcrag-sources a:hover { text-decoration: underline; }

.pcrag-source-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pcrag-source-card {
  display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 6px;
  border: 1px solid var(--pcrag-border); border-radius: 8px;
  background: var(--pcrag-bg); color: var(--pcrag-fg);
  text-decoration: none !important; transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.pcrag-source-card:hover { border-color: var(--pcrag-primary); background: #f8f9fa; }
.pcrag-source-thumb {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 6px; object-fit: cover; flex-shrink: 0;
  background: var(--pcrag-border);
  display: block;
}
.pcrag-source-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; overflow: hidden; }
.pcrag-source-title-row {
  display: flex; align-items: center; gap: 4px; min-width: 0;
}
.pcrag-source-title {
  font-weight: 400; font-size: 12px; color: #6d6d6d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcrag-source-card:hover .pcrag-source-title { text-decoration: underline; }
.pcrag-source-arrow {
  flex-shrink: 0; width: 14px; height: 14px;
  color: var(--pcrag-muted); transition: color 0.15s, transform 0.15s;
}
.pcrag-source-card:hover .pcrag-source-arrow { color: var(--pcrag-primary); transform: translateX(2px); }
.pcrag-source-excerpt { font-size: 11.5px; color: var(--pcrag-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Feedback buttons --- */

.pcrag-feedback {
  display: flex; gap: 4px; margin-top: 6px; padding-top: 4px;
}
.pcrag-fb-btn {
  background: transparent; border: 1px solid var(--pcrag-border); border-radius: 6px;
  padding: 3px 8px; cursor: pointer; color: var(--pcrag-muted);
  display: flex; align-items: center; gap: 3px;
  transition: color 0.15s, border-color 0.15s;
}
.pcrag-fb-btn:hover { color: var(--pcrag-fg); border-color: var(--pcrag-fg); }
.pcrag-fb-btn:disabled { opacity: 0.5; cursor: default; }
.pcrag-fb-btn--active { color: var(--pcrag-primary); border-color: var(--pcrag-primary); }
.pcrag-fb-btn--active svg { fill: var(--pcrag-primary); }

/* --- Chips (follow-up + welcome) --- */

.pcrag-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
  align-self: flex-start;
}
.pcrag-chip {
  background: var(--pcrag-bg); border: 1px solid var(--pcrag-primary);
  color: var(--pcrag-primary); border-radius: 16px;
  padding: 5px 14px; font-size: 12.5px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.pcrag-chip:hover { background: var(--pcrag-primary); color: var(--pcrag-primary-fg); }

/* --- Typing indicator --- */

.pcrag-typing {
  align-self: flex-start;
  display: inline-flex; gap: 4px; padding: 14px 16px;
  background: var(--pcrag-bubble-bot-bg);
  border-radius: var(--pcrag-radius); border-bottom-left-radius: 4px;
}
.pcrag-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--pcrag-muted); animation: pcrag-bounce 1.2s infinite ease-in-out; }
.pcrag-typing span:nth-child(2) { animation-delay: 0.15s; }
.pcrag-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes pcrag-bounce {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-4px); }
}

/* --- Form --- */

.pcrag-form {
  display: flex; gap: 8px; padding: 12px;
  border-top: 1px solid var(--pcrag-border);
  flex-shrink: 0;
}
.pcrag-input {
  flex: 1; padding: 10px 12px;
  border: 1px solid var(--pcrag-border); border-radius: 8px;
  font-size: 14px; background: var(--pcrag-bg); color: var(--pcrag-fg);
  font-family: inherit; resize: none; max-height: 100px;
}
.pcrag-input:focus { outline: 2px solid var(--pcrag-primary); outline-offset: -1px; }
.pcrag-input:disabled { opacity: 0.6; }

.pcrag-send {
  background: var(--pcrag-primary); color: var(--pcrag-primary-fg);
  border: none; border-radius: 8px; padding: 0 16px;
  cursor: pointer; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pcrag-send:disabled { opacity: 0.5; cursor: not-allowed; }
.pcrag-send--icon {
  width: 40px; height: 40px; padding: 0;
  border-radius: 50%;
}
.pcrag-send--icon svg { display: block; }

/* --- Footer (powered by / trial notice) --- */

.pcrag-footer {
  padding: 6px 14px;
  background: #f6f7f7;
  border-top: 1px solid var(--pcrag-border);
  font-size: 11px;
  color: var(--pcrag-muted);
  text-align: center;
  flex-shrink: 0;
}
.pcrag-footer a { color: var(--pcrag-primary); text-decoration: none; }
.pcrag-footer a:hover { text-decoration: underline; }

/* --- Escalation card --- */

.pcrag-escalation {
  align-self: stretch;
  background: #fef9e7;
  border: 1px solid #f0d78c;
  border-radius: var(--pcrag-radius);
  padding: 12px 14px;
  text-align: center;
  font-size: 13px;
  color: #5a4b1a;
}
.pcrag-escalation p { margin: 0 0 10px; }
.pcrag-escalation-btn {
  display: inline-block;
  background: var(--pcrag-primary);
  color: var(--pcrag-primary-fg);
  padding: 8px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
.pcrag-escalation-btn:hover { opacity: 0.9; }

/* --- Citation highlight (on target pages) --- */

.pcrag-highlight {
  background: #fef08a;
  padding: 2px 0;
  border-radius: 2px;
  transition: background 0.6s ease;
}
.pcrag-highlight--fade {
  background: transparent;
}

/* --- Mobile --- */

@media (max-width: 640px) {
  .pcrag-panel {
    width: 100vw !important; height: 100vh !important; max-height: 100vh;
    height: 100dvh !important; max-height: 100dvh;   /* avoids the iOS 100vh jump */
    bottom: 0 !important; right: 0 !important; left: 0 !important;
    border-radius: 0; border: none;
    /* Full-screen on mobile reads as a bottom sheet, so it slides up
       instead of scaling from a corner. */
    transform: translateY(100%);
    transform-origin: 50% 100%;
  }
  .pcrag-root[data-position="bottom-left"] .pcrag-panel { transform-origin: 50% 100%; }
  .pcrag-root { --pcrag-motion-enter: 250ms; }
  /* Panel is a full-screen sheet below 640px, so only the button lifts. */
  .pcrag-button { bottom: calc(16px + var(--pcrag-bottom-offset, 0px)); }
  .pcrag-root[data-position="bottom-right"] .pcrag-button { right: 16px; }
  .pcrag-root[data-position="bottom-left"]  .pcrag-button { left: 16px; }
}

/* ── Small mobile fixes ── */
@media (max-width: 480px) {
  .pcrag-panel {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
  }
  .pcrag-panel .pcrag-header {
    border-radius: 0;
  }
  .pcrag-messages {
    max-height: calc(100vh - 130px) !important;
  }
  .pcrag-input {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
  .pcrag-button {
    bottom: calc(12px + var(--pcrag-bottom-offset, 0px)) !important;
    right: 12px !important;
    width: 52px !important;
    height: 52px !important;
  }
}

/* Touch targets minimum 44px */
.pcrag-send,
.pcrag-close,
.pcrag-button {
  min-width: 44px;
  min-height: 44px;
}

/* Retry button styling */
.pcrag-retry-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 16px;
  background: var(--pcrag-primary, #2271b1);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.pcrag-retry-btn:hover {
  opacity: 0.9;
}

/* Offline banner */
.pcrag-offline-banner {
  background: #fef3c7;
  color: #92400e;
  text-align: center;
  padding: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* Setup hint styling */
.pcrag-setup-hint {
  background: #f0f9ff !important;
  border: 1px dashed #93c5fd !important;
  color: #1e40af !important;
}
.pcrag-setup-hint small {
  color: #6b7280;
  display: block;
  margin-top: 4px;
}

/* --- Dark theme (matches pagecoder.ai rag-chat product page demo) --- */

.pcrag-root.pcrag-theme-dark {
  --pcrag-bg: #1a1a22;
  --pcrag-fg: #e7e7ee;
  --pcrag-muted: #9ea0ab;
  --pcrag-border: rgba(255, 255, 255, 0.08);
  --pcrag-bubble-bot-bg: rgba(255, 255, 255, 0.05);
  --pcrag-bubble-bot-fg: #e7e7ee;
  --pcrag-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
.pcrag-theme-dark .pcrag-panel {
  background: var(--pcrag-bg);
  color: var(--pcrag-fg);
  border: 1px solid var(--pcrag-border);
}
.pcrag-theme-dark .pcrag-msg code { background: rgba(255, 255, 255, 0.08); }
.pcrag-theme-dark .pcrag-msg pre { background: #0f0f16; color: #e7e7ee; }
.pcrag-theme-dark .pcrag-msg th { background: rgba(255, 255, 255, 0.04); }
.pcrag-theme-dark .pcrag-form {
  background: #16161e;
  border-top: 1px solid var(--pcrag-border);
}
.pcrag-theme-dark .pcrag-input {
  background: rgba(255, 255, 255, 0.04);
  color: var(--pcrag-fg);
  border-color: var(--pcrag-border);
}
.pcrag-theme-dark .pcrag-input::placeholder { color: rgba(231, 231, 238, 0.35); }
.pcrag-theme-dark .pcrag-footer {
  background: #14141b;
  color: rgba(231, 231, 238, 0.45);
  border-top: 1px solid var(--pcrag-border);
}
.pcrag-theme-dark .pcrag-footer a { color: var(--pcrag-primary); }
.pcrag-theme-dark .pcrag-source-card {
  background: rgba(255, 255, 255, 0.03);
  color: var(--pcrag-fg);
  border-color: var(--pcrag-border);
}
.pcrag-theme-dark .pcrag-source-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--pcrag-primary);
}
.pcrag-theme-dark .pcrag-source-title { color: rgba(231, 231, 238, 0.8); }
.pcrag-theme-dark .pcrag-chip {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--pcrag-fg);
}
.pcrag-theme-dark .pcrag-chip:hover {
  background: var(--pcrag-primary);
  color: var(--pcrag-primary-fg);
  border-color: var(--pcrag-primary);
}
.pcrag-theme-dark .pcrag-fb-btn { border-color: var(--pcrag-border); color: var(--pcrag-muted); }
.pcrag-theme-dark .pcrag-fb-btn:hover { color: var(--pcrag-fg); border-color: var(--pcrag-fg); }
.pcrag-theme-dark .pcrag-setup-hint {
  background: rgba(147, 197, 253, 0.08) !important;
  border-color: rgba(147, 197, 253, 0.4) !important;
  color: #bfdbfe !important;
}
.pcrag-theme-dark .pcrag-setup-hint small { color: rgba(231, 231, 238, 0.55); }
.pcrag-theme-dark .pcrag-offline-banner { background: #3a2a0a; color: #fcd34d; }
.pcrag-theme-dark .pcrag-notice { background: #2a1414; color: #fca5a5; border-bottom-color: rgba(252, 165, 165, 0.2); }

@media (prefers-reduced-motion: reduce) {
  /* Decorative drift is exactly what this setting asks us to stop. The glow
     stays, parked in place, so the header still looks styled. */
  .pcrag-header-glow::before { animation: none; transform: translateX(60%); }
  .pcrag-button { transition: none; }
  .pcrag-button:hover, .pcrag-button:active { transform: none; }
  .pcrag-typing span { animation: none; opacity: 0.7; }
  /* Opacity only — no travel, no scale. Effectively instant, but the
     visibility delay is kept so the panel still leaves the tab order. */
  .pcrag-panel,
  .pcrag-root.pcrag-open .pcrag-panel {
    transform: none !important;
    transition: opacity 1ms linear, visibility 0s !important;
  }
  .pcrag-btn-icon { transition: opacity 1ms linear; }
  .pcrag-btn-icon--close,
  .pcrag-root.pcrag-open .pcrag-btn-icon--open { transform: none; }
}