:root { --accg-color: #1e3a5f; }
#accg-root { position: fixed; right: 18px; bottom: 18px; z-index: 999999; font-family: -apple-system, 'Segoe UI', system-ui, sans-serif; }
#accg-bubble { width: 54px; height: 54px; border-radius: 50%; border: none; background: var(--accg-bubble-bg, var(--accg-color)); color: #fff; font-size: 24px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
#accg-panel { position: fixed; right: 18px; bottom: 84px; width: 340px; max-width: calc(100vw - 24px); height: 480px; max-height: calc(100vh - 120px); background: #fff; border-radius: var(--accg-radius, 14px); box-shadow: 0 10px 40px rgba(0,0,0,.28); display: flex; flex-direction: column; overflow: hidden; }
#accg-head { background: var(--accg-color); color: #fff; padding: 12px 14px; font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
#accg-head button { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; line-height: 1; padding: 6px 10px; margin: -6px -8px -6px 0; }
#accg-notice { font-size: 10.5px; color: #8a919b; padding: 6px 12px; background: #f8fafc; border-bottom: 1px solid #eef2f7; }
#accg-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.accg-m { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.accg-visitor { align-self: flex-end; background: var(--accg-color2, var(--accg-color)); color: #fff; border-bottom-right-radius: 4px; }
.accg-assistant { align-self: flex-start; background: #f1f5f9; color: #111827; border-bottom-left-radius: 4px; }
.accg-agent { align-self: flex-start; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; border-bottom-left-radius: 4px; }
.accg-sys { align-self: center; background: none; color: #94a3b8; font-size: 11.5px; }
#accg-typing { padding: 0 14px 6px; font-size: 12px; color: #94a3b8; }
#accg-form { display: flex; border-top: 1px solid #eef2f7; }
#accg-form input { flex: 1; border: none; padding: 12px; font-size: 13.5px; outline: none; }
#accg-form button { border: none; background: var(--accg-color); color: #fff; padding: 0 16px; font-weight: 700; cursor: pointer; }
#accg-foot { text-align: center; padding: 6px; background: #fafbfc; }
#accg-foot a { font-size: 11.5px; color: #64748b; }
@media (max-width: 480px) { #accg-panel { right: 8px; bottom: 76px; height: 70vh; } }

#accg-root.accg-left { right: auto; left: 18px; }
#accg-root.accg-left #accg-panel { right: auto; left: 18px; }
@media (max-width: 480px) { #accg-root.accg-left #accg-panel { left: 8px; right: auto; } }

#accg-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; margin-right: 8px; vertical-align: middle; }
#accg-head { align-items: center; }
#accg-head span { flex: 1; }
.accg-row { display: flex; align-items: flex-end; gap: 6px; }
.accg-row-visitor { justify-content: flex-end; }
.accg-row-sys { justify-content: center; }
.accg-msg-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 22px; }
.accg-m a { color: inherit; text-decoration: underline; }

#accg-teaser { position: absolute; bottom: 66px; right: 0; max-width: 320px; min-width: 260px; background: var(--accg-teaser-bg, #fff); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.22); padding: 12px 30px 12px 14px; font-size: 13px; line-height: 1.5; color: var(--accg-teaser-color, #111827); cursor: pointer; animation: accg-pop .25s ease; }
#accg-root.accg-left #accg-teaser { right: auto; left: 0; }
#accg-teaser a { color: #0047ab; }
#accg-teaser-x { position: absolute; top: 4px; right: 6px; background: none; border: none; color: #94a3b8; font-size: 16px; cursor: pointer; padding: 2px 6px; }
@keyframes accg-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#accg-panel[hidden] { display: none !important; }
#accg-typing[hidden] { display: none !important; }

#accg-foot { display: flex; align-items: center; justify-content: space-between; }
#accg-time { font-size: 11px; color: #93a0ae; padding-left: 2px; }

#accg-bubble svg { width: 55%; height: 55%; fill: #fff; }
#accg-bubble svg.accg-stroked { fill: none; stroke: #fff; stroke-width: 2; }
#accg-bubble .accg-bico { width: 62%; height: 62%; border-radius: 50%; object-fit: cover; }
.accg-m strong { font-weight: 700; }
.accg-m a { color: #2563eb; text-decoration: underline; }
.accg-visitor a { color: #fff; }

.accg-teaser-av { position: absolute; top: -17px; left: 14px; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accg-teaser-bg, #fff); box-shadow: 0 2px 8px rgba(0,0,0,.25); background: #fff; }
#accg-teaser.accg-teaser-has-av { padding-top: 26px; margin-top: 20px; overflow: visible; }

#accg-max { margin-right: -4px; }
#accg-max svg { vertical-align: middle; }
#accg-panel.accg-max { height: calc(100vh - 96px); max-height: calc(100vh - 96px); width: 420px; }
@media (max-width: 480px) { #accg-panel.accg-max { height: calc(100vh - 88px); max-height: calc(100vh - 88px); width: auto; left: 8px; right: 8px; } }