#cms-agent-root { position: relative; z-index: 9998; }
.cms-agent-button { position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; border: 0; border-radius: 999px; background: var(--cms-agent-color, #4f46e5); color: #fff; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .25); cursor: pointer; display: grid; place-items: center; font-size: 28px; transition: transform .15s ease; z-index: 9998; }
.cms-agent-button:hover { transform: scale(1.08); }
.cms-agent-panel { position: fixed; right: 20px; bottom: 20px; width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 40px)); background: #fff; border: 1px solid rgba(15, 23, 42, .08); border-radius: 14px; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .25); display: flex; flex-direction: column; overflow: hidden; z-index: 9999; }
.cms-agent-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--cms-agent-color, #4f46e5); color: #fff; }
.cms-agent-avatar { width: 36px; height: 36px; border-radius: 999px; background: rgba(255, 255, 255, .15); display: grid; place-items: center; font-size: 20px; flex: 0 0 auto; }
.cms-agent-title { flex: 1; min-width: 0; }
.cms-agent-title strong { display: block; font-size: 14px; }
.cms-agent-title span { display: block; font-size: 11px; opacity: .85; }
.cms-agent-title span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 999px; background: #22c55e; }
.cms-agent-close { border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 22px; line-height: 1; opacity: .9; padding: 4px; }
.cms-agent-messages { flex: 1; overflow-y: auto; padding: 16px 14px; background: #f8fafc; display: flex; flex-direction: column; gap: 10px; }
.cms-agent-bubble-row { display: flex; gap: 8px; align-items: flex-start; }
.cms-agent-bubble-row.user { flex-direction: row-reverse; }
.cms-agent-mini-avatar { width: 28px; height: 28px; border-radius: 999px; background: #e2e8f0; display: grid; place-items: center; font-size: 16px; flex: 0 0 auto; }
.cms-agent-bubble { max-width: 80%; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; color: #0f172a; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.cms-agent-bubble-row.user .cms-agent-bubble { background: var(--cms-agent-color, #4f46e5); border-color: var(--cms-agent-color, #4f46e5); color: #fff; }
.cms-agent-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.cms-agent-suggestions button { padding: 8px 12px; border-radius: 8px; background: #fff; border: 1px solid #e2e8f0; color: #475569; font-size: 13px; cursor: pointer; text-align: left; }
.cms-agent-suggestions button:hover { border-color: var(--cms-agent-color, #4f46e5); color: var(--cms-agent-color, #4f46e5); }
.cms-agent-error { font-size: 12px; color: #991b1b; background: #fee2e2; padding: 8px 10px; border-radius: 6px; }
.cms-agent-input { padding: 10px; border-top: 1px solid #e2e8f0; background: #fff; display: flex; align-items: flex-end; gap: 8px; }
.cms-agent-input textarea { flex: 1; min-height: 38px; max-height: 100px; resize: none; padding: 8px 10px; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 13px; line-height: 1.5; font-family: inherit; outline: none; }
.cms-agent-input button { height: 38px; min-width: 60px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--cms-agent-color, #4f46e5); color: #fff; cursor: pointer; font-size: 13px; font-weight: 700; }
.cms-agent-input button:disabled { cursor: not-allowed; opacity: .5; }
.cms-agent-dot { width: 6px; height: 6px; border-radius: 999px; background: #94a3b8; animation: cmsAgentDotBlink 1.4s ease-in-out infinite; }
.cms-agent-dot:nth-child(2) { animation-delay: .18s; }
.cms-agent-dot:nth-child(3) { animation-delay: .36s; }
@keyframes cmsAgentDotBlink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 520px) {
  .cms-agent-button { right: 14px; bottom: 14px; }
  .cms-agent-panel { right: 10px; bottom: 10px; width: calc(100vw - 20px); height: min(620px, calc(100vh - 20px)); }
}
