.pj-chat-root {
  --pj-chat-surface: #fff;
  --pj-chat-soft: #f4f7f4;
  --pj-chat-ink: #242a25;
  --pj-chat-muted: #69716b;
  --pj-chat-border: #dce3dd;
  --pj-chat-green: #176b54;
  --pj-chat-green-dark: #115440;
  --pj-chat-green-soft: #e8f3ee;
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 1001;
  color: var(--pj-chat-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

[data-theme='dark'] .pj-chat-root {
  --pj-chat-surface: #202723;
  --pj-chat-soft: #29312c;
  --pj-chat-ink: #edf2ee;
  --pj-chat-muted: #a8b2aa;
  --pj-chat-border: #3a453e;
  --pj-chat-green: #3d9b7b;
  --pj-chat-green-dark: #318467;
  --pj-chat-green-soft: #283e34;
}

.pj-chat-root * { box-sizing: border-box; letter-spacing: 0; }
.pj-chat-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pj-chat-launcher {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-left: auto;
  padding: 0;
  color: #fff;
  background: var(--pj-chat-green);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 9px 28px rgba(20, 65, 49, .26);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.pj-chat-launcher:hover { background: var(--pj-chat-green-dark); box-shadow: 0 11px 32px rgba(20, 65, 49, .34); transform: translateY(-2px); }
.pj-chat-launcher:active { transform: translateY(0); }
.pj-chat-launcher .pj-chat-icon { width: 23px; height: 23px; }
.pj-chat-launcher .pj-icon-close { display: none; }
.pj-chat-root.is-open .pj-chat-launcher .pj-icon-chat { display: none; }
.pj-chat-root.is-open .pj-chat-launcher .pj-icon-close { display: block; }

.pj-chat-panel {
  width: min(382px, calc(100vw - 28px));
  height: min(570px, calc(100vh - 180px));
  position: absolute;
  right: 0;
  bottom: 66px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pj-chat-surface);
  border: 1px solid var(--pj-chat-border);
  border-radius: 8px;
  box-shadow: 0 18px 52px rgba(24, 37, 29, .20);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.985);
  transform-origin: bottom right;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.pj-chat-root.is-open .pj-chat-panel { opacity: 1; visibility: visible; transform: none; }
.pj-chat-header { min-height: 64px; display: flex; align-items: center; gap: 11px; padding: 0 15px; color: #f5fbf7; background: #203229; border-bottom: 1px solid #354a3f; }
.pj-chat-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #1c4f3c; background: #b8dec9; border-radius: 7px; }
.pj-chat-avatar .pj-chat-icon { width: 18px; height: 18px; }
.pj-chat-title { min-width: 0; flex: 1; }
.pj-chat-title strong, .pj-chat-title small { display: block; }
.pj-chat-title strong { font-size: 13px; line-height: 1.4; }
.pj-chat-title small { margin-top: 2px; color: #adc0b5; font-size: 10px; }
.pj-chat-reset { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: #b9c8bf; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.pj-chat-reset:hover { color: #fff; background: #31473b; }
.pj-chat-reset .pj-chat-icon { width: 16px; height: 16px; }

.pj-chat-messages { min-height: 0; display: flex; flex: 1; flex-direction: column; gap: 13px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pj-chat-message { max-width: 88%; animation: pj-message-in .17s ease-out; }
@keyframes pj-message-in { from { opacity: .25; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.pj-chat-message.is-user { align-self: flex-end; }
.pj-chat-message.is-assistant { align-self: flex-start; }
.pj-chat-bubble { padding: 10px 12px; color: var(--pj-chat-ink); background: var(--pj-chat-soft); border: 1px solid var(--pj-chat-border); border-radius: 7px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.pj-chat-message.is-user .pj-chat-bubble { color: #fff; background: var(--pj-chat-green); border-color: var(--pj-chat-green); }
.pj-chat-sources { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.pj-chat-source { max-width: 100%; display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; overflow: hidden; color: var(--pj-chat-green); background: var(--pj-chat-green-soft); border: 0; border-radius: 4px; font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.pj-chat-source[href] { text-decoration: none; }
.pj-chat-source[href]:hover { color: #fff; background: var(--pj-chat-green); }
.pj-chat-source::before { content: ""; width: 5px; height: 5px; flex: 0 0 auto; background: currentColor; border-radius: 50%; }
.pj-chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.pj-chat-suggestion { padding: 7px 9px; color: var(--pj-chat-green); background: transparent; border: 1px solid #b9d3c5; border-radius: 6px; cursor: pointer; font-size: 11px; line-height: 1.35; }
.pj-chat-suggestion:hover { background: var(--pj-chat-green-soft); border-color: var(--pj-chat-green); }
.pj-chat-typing { display: inline-flex; gap: 4px; padding: 5px 1px; }
.pj-chat-typing i { width: 5px; height: 5px; background: var(--pj-chat-muted); border-radius: 50%; animation: pj-typing 1s infinite ease-in-out; }
.pj-chat-typing i:nth-child(2) { animation-delay: .12s; }
.pj-chat-typing i:nth-child(3) { animation-delay: .24s; }
@keyframes pj-typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.pj-chat-composer { min-height: 66px; display: grid; grid-template-columns: 1fr 38px; align-items: end; gap: 8px; padding: 10px 11px; background: var(--pj-chat-surface); border-top: 1px solid var(--pj-chat-border); }
.pj-chat-input { width: 100%; min-height: 40px; max-height: 92px; margin: 0; padding: 9px 11px; color: var(--pj-chat-ink); background: var(--pj-chat-soft); border: 1px solid var(--pj-chat-border); border-radius: 6px; outline: 0; resize: none; font: inherit; font-size: 12px; line-height: 1.55; }
.pj-chat-input:focus { border-color: var(--pj-chat-green); box-shadow: 0 0 0 3px rgba(23,107,84,.11); }
.pj-chat-input::placeholder { color: var(--pj-chat-muted); }
.pj-chat-send { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: #fff; background: var(--pj-chat-green); border: 0; border-radius: 6px; cursor: pointer; }
.pj-chat-send:hover { background: var(--pj-chat-green-dark); }
.pj-chat-send:disabled { opacity: .48; cursor: wait; }
.pj-chat-send .pj-chat-icon { width: 17px; height: 17px; }

@media (max-width: 600px) {
  .pj-chat-root { inset: auto 0 0; }
  .pj-chat-launcher { position: fixed; right: 15px; bottom: 82px; }
  .pj-chat-panel { width: 100%; height: min(78svh, 640px); position: fixed; inset: auto 0 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 8px 8px 0 0; transform: translateY(16px); }
  .pj-chat-root.is-open .pj-chat-launcher { opacity: 0; pointer-events: none; }
  .pj-chat-header { min-height: 60px; }
  .pj-chat-messages { padding: 14px; }
  .pj-chat-message { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-chat-panel, .pj-chat-launcher, .pj-chat-message { transition: none; animation: none; }
}
