#ai-chatbot { --ac-blue-600:#2563eb; --ac-blue-700:#1d4ed8; --ac-blue-800:#1e40af; --ac-blue-100:#eef4ff; --ac-ink:#20242b; --ac-muted:#717985; --ac-line:#e3e7ed; --ac-surface:#f5f7fa; position:relative; width:100%; padding:38px 0 80px; color:var(--ac-ink); }
#ai-chatbot button, #ai-chatbot textarea { font:inherit; }
.ac-shell { position:relative; display:grid; grid-template-columns:276px minmax(0, 1fr) 264px; grid-template-rows:minmax(0, 1fr); height:720px; margin-top:34px; overflow:hidden; border:1px solid var(--ac-line); border-radius:14px; background:#fff; box-shadow:0 18px 45px rgba(30,64,175,.055); }
.ac-sidebar { display:flex; min-width:0; min-height:0; flex-direction:column; border-right:1px solid var(--ac-line); background:var(--ac-surface); }
.ac-brand { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; min-height:76px; padding:14px 16px; border-bottom:1px solid var(--ac-line); }
.ac-brand-mark { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px; background:var(--ac-blue-600); color:#fff; font-size:13px; font-weight:800; }
.ac-brand strong, .ac-brand span { display:block; }
.ac-brand strong { font-size:12px; }
.ac-brand div span { margin-top:4px; color:#929aa5; font-size:8px; letter-spacing:.03em; }
.ac-brand > button { display:none; color:#818995; font-size:22px; }
.ac-new-chat { display:flex; align-items:center; justify-content:center; gap:8px; min-height:40px; margin:15px 14px 11px; border:1px solid #cad6f5; border-radius:8px; background:#fff; color:var(--ac-blue-700); font-size:11px; font-weight:700; transition:border-color .15s ease, background .15s ease; }
.ac-new-chat:hover { border-color:var(--ac-blue-600); background:var(--ac-blue-100); }
.ac-new-chat span { font-size:15px; font-weight:400; }
.ac-history { display:flex; min-height:0; flex:1; flex-direction:column; gap:3px; overflow-y:auto; padding:0 8px; }
.ac-nav-label { display:flex; align-items:center; justify-content:space-between; padding:9px; color:#89919c; font-size:9px; }
.ac-nav-label strong { letter-spacing:.06em; }
.ac-history > button { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:10px; align-items:center; min-height:60px; padding:9px; border-radius:9px; text-align:left; transition:background .15s ease; }
.ac-history > button:hover { background:#edf1f6; }
.ac-history > button.is-active { background:#fff; box-shadow:0 1px 5px rgba(30,64,175,.07); }
.ac-history-icon { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; background:#e3e9f4; color:#596578; font-size:9px; font-weight:700; }
.ac-history > button.is-active .ac-history-icon { background:var(--ac-blue-600); color:#fff; }
.ac-history > button span:last-child { min-width:0; }
.ac-history strong, .ac-history small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-history strong { font-size:10px; font-weight:650; }
.ac-history small { margin-top:5px; color:#9ba2ac; font-size:8px; }
.ac-sidebar-foot { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; min-height:68px; padding:12px 15px; border-top:1px solid var(--ac-line); }
.ac-profile { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--ac-blue-600); color:#fff; font-size:10px; font-weight:800; }
.ac-sidebar-foot strong, .ac-sidebar-foot div span { display:block; }
.ac-sidebar-foot strong { font-size:10px; }
.ac-sidebar-foot div span { margin-top:4px; color:#979fa9; font-size:8px; }
.ac-sidebar-foot > button { color:#8b939d; letter-spacing:.12em; }
.ac-conversation { position:relative; display:flex; min-width:0; min-height:0; flex-direction:column; background:#fff; }
.ac-conversation-head { display:flex; align-items:center; gap:10px; min-height:76px; padding:13px 19px; border-bottom:1px solid var(--ac-line); }
.ac-mobile-menu { display:none; width:34px; height:34px; border:1px solid var(--ac-line); border-radius:8px; color:#687180; }
.ac-ai-avatar { position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border-radius:11px; background:var(--ac-blue-600); color:#fff; }
.ac-ai-avatar span { font-size:10px; font-weight:800; letter-spacing:.05em; }
.ac-ai-avatar i { position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border:2px solid #fff; border-radius:50%; background:#78a5ff; }
.ac-conversation-head > div:nth-of-type(2) { min-width:0; flex:1; }
.ac-conversation-head h3 { font-size:13px; }
.ac-conversation-head p { margin-top:4px; overflow:hidden; color:#929aa5; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.ac-reset { display:flex; align-items:center; gap:6px; min-height:32px; padding:0 9px; border:1px solid var(--ac-line); border-radius:8px; color:#687180; font-size:9px; transition:border-color .15s ease, background .15s ease; }
.ac-reset:hover { border-color:#c8d4f0; background:var(--ac-blue-100); }
.ac-reset svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.ac-messages { display:flex; min-height:0; flex:1; flex-direction:column; gap:19px; overflow-y:auto; padding:25px 25px 15px; scroll-behavior:smooth; }
.ac-message { display:grid; grid-template-columns:32px minmax(0, 1fr); gap:10px; max-width:86%; }
.ac-message.is-user { display:flex; max-width:76%; align-self:flex-end; justify-content:flex-end; }
.ac-message-avatar { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9px; background:var(--ac-blue-600); color:#fff; font-size:8px; font-weight:800; }
.ac-message.is-user .ac-message-avatar { display:none; }
.ac-message-body { min-width:0; }
.ac-message-meta { display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.ac-message.is-user .ac-message-meta { justify-content:flex-end; }
.ac-message-meta strong { font-size:9px; }
.ac-message-meta time { color:#a1a8b2; font-size:8px; font-variant-numeric:tabular-nums; }
.ac-bubble { padding:11px 13px; border-radius:4px 11px 11px 11px; background:var(--ac-surface); color:#47505d; font-size:10px; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.ac-message.is-user .ac-bubble { border-radius:11px 4px 11px 11px; background:var(--ac-blue-600); color:#fff; }
.ac-answer-title { display:block; margin-bottom:8px; color:#263140; font-size:11px; }
.ac-answer-list { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.ac-answer-list li { display:grid; grid-template-columns:18px 1fr; gap:7px; align-items:start; }
.ac-answer-list span { display:flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:5px; background:#fff; color:var(--ac-blue-700); font-size:7px; font-weight:800; }
.ac-answer-actions { display:flex; gap:3px; margin-top:7px; }
.ac-answer-actions button { display:flex; align-items:center; justify-content:center; min-width:26px; height:25px; padding:0 7px; border-radius:6px; color:#87909b; font-size:8px; }
.ac-answer-actions button:hover { background:var(--ac-blue-100); color:var(--ac-blue-700); }
.ac-typing { display:flex; align-items:center; gap:3px; min-height:24px; padding:0 25px; color:#929aa5; font-size:8px; }
.ac-typing[hidden] { display:none; }
.ac-typing span { width:4px; height:4px; border-radius:50%; background:var(--ac-blue-600); animation:acTyping .9s infinite alternate; }
.ac-typing span:nth-child(2) { animation-delay:.18s; }
.ac-typing span:nth-child(3) { animation-delay:.36s; }
.ac-typing b { margin-left:5px; font-weight:400; }
.ac-suggestions { display:flex; gap:6px; overflow-x:auto; padding:4px 20px 10px; }
.ac-suggestions button { flex:none; min-height:29px; padding:0 10px; border:1px solid #d8e1f4; border-radius:7px; color:#536079; font-size:8px; transition:border-color .15s ease, color .15s ease; }
.ac-suggestions button:hover { border-color:var(--ac-blue-600); color:var(--ac-blue-700); }
.ac-notice { position:absolute; right:20px; bottom:126px; z-index:5; max-width:280px; padding:8px 10px; border:1px solid #d8e1f4; border-radius:7px; background:#fff; color:#586883; font-size:8px; box-shadow:0 8px 22px rgba(30,64,175,.1); opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity .15s ease, transform .15s ease; }
.ac-notice.is-on { opacity:1; transform:translateY(0); }
.ac-composer { margin:0 20px 18px; padding:10px 11px 9px; border:1px solid #d9e0ea; border-radius:11px; background:#fff; box-shadow:0 8px 24px rgba(30,64,175,.05); transition:border-color .15s ease, box-shadow .15s ease; }
.ac-composer:focus-within { border-color:var(--ac-blue-600); box-shadow:0 0 0 3px rgba(37,99,235,.09); }
.ac-composer textarea { display:block; width:100%; min-height:34px; max-height:100px; padding:4px 3px 7px; border:0; background:transparent; font-size:10px; line-height:1.5; resize:none; }
.ac-compose-foot { display:flex; align-items:center; justify-content:space-between; }
.ac-compose-foot > div { display:flex; align-items:center; gap:7px; }
.ac-compose-foot > div button { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:7px; color:#818a96; }
.ac-compose-foot > div button:hover { background:var(--ac-surface); }
.ac-compose-foot > div svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.ac-compose-foot > div span { color:#a0a7b0; font-size:7px; }
.ac-send { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:var(--ac-blue-600); color:#fff; transition:background .15s ease, transform .15s ease; }
.ac-send:hover { background:var(--ac-blue-700); }
.ac-send:active { transform:translateY(1px); }
.ac-send svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.ac-context { min-width:0; min-height:0; overflow-y:auto; border-left:1px solid var(--ac-line); background:#fbfcfe; }
.ac-context > header { display:flex; align-items:center; justify-content:space-between; min-height:76px; padding:0 18px; border-bottom:1px solid var(--ac-line); }
.ac-context > header strong { font-size:11px; }
.ac-context > header span { padding:4px 6px; border-radius:5px; background:var(--ac-blue-100); color:var(--ac-blue-700); font-size:7px; font-weight:800; letter-spacing:.08em; }
.ac-context section { padding:18px; border-bottom:1px solid var(--ac-line); }
.ac-context section h3 { margin-bottom:12px; font-size:9px; letter-spacing:.02em; }
.ac-tone { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:4px; border-radius:8px; background:#edf1f6; }
.ac-tone button { min-height:30px; border-radius:6px; color:#77808c; font-size:8px; }
.ac-tone button.is-active { background:#fff; color:var(--ac-blue-700); font-weight:700; box-shadow:0 1px 4px rgba(30,64,175,.08); }
.ac-context-card { display:grid; grid-template-columns:auto 1fr; gap:9px; padding:10px 0; }
.ac-context-card + .ac-context-card { border-top:1px solid #edf0f4; }
.ac-context-card > span { display:flex; align-items:center; justify-content:center; width:27px; height:27px; border-radius:7px; background:var(--ac-blue-100); color:var(--ac-blue-700); font-size:7px; font-weight:800; }
.ac-context-card strong { display:block; font-size:8px; }
.ac-context-card p { margin-top:4px; color:#8b939e; font-size:8px; line-height:1.55; }
.ac-capabilities ul { display:flex; flex-direction:column; gap:9px; }
.ac-capabilities li { display:flex; align-items:center; gap:7px; color:#65707d; font-size:8px; }
.ac-capabilities i { width:5px; height:5px; border-radius:50%; background:var(--ac-blue-600); }
.ac-api-note { margin:18px; padding:13px; border-radius:8px; background:var(--ac-blue-100); color:#54698f; font-size:8px; line-height:1.6; }
.ac-api-note b { display:block; margin-bottom:3px; color:var(--ac-blue-700); font-size:8px; letter-spacing:.08em; }
.ac-overlay { display:none; }

@keyframes acTyping {
	from { transform:translateY(0); opacity:.45; }
	to { transform:translateY(-3px); opacity:1; }
}

@media screen and (max-width:1100px) {
	.ac-shell { grid-template-columns:270px minmax(0, 1fr); }
	.ac-context { display:none; }
}

@media screen and (max-width:768px) {
	#ai-chatbot { padding:28px 0 50px; }
	.ac-shell { grid-template-columns:1fr; height:680px; border-radius:12px; }
	.ac-sidebar { position:absolute; top:0; bottom:0; left:0; z-index:30; width:min(300px, 86vw); box-shadow:18px 0 44px rgba(30,64,175,.14); transform:translateX(-105%); transition:transform .2s ease; }
	.ac-sidebar.is-open { transform:translateX(0); }
	.ac-brand > button, .ac-mobile-menu { display:block; }
	.ac-overlay { position:absolute; inset:0; z-index:25; background:rgba(27,38,61,.34); }
	.ac-overlay.is-on { display:block; }
	.ac-message { max-width:92%; }
	.ac-message.is-user { max-width:88%; }
}

@media screen and (max-width:480px) {
	.ac-conversation-head { padding:12px; }
	.ac-reset span { display:none; }
	.ac-messages { padding:18px 14px 12px; }
	.ac-suggestions { padding-right:12px; padding-left:12px; }
	.ac-composer { margin:0 12px 12px; }
	.ac-compose-foot > div span { display:none; }
}

@media (prefers-reduced-motion:reduce) {
	.ac-sidebar, .ac-new-chat, .ac-history > button, .ac-reset, .ac-send { transition:none; }
	.ac-typing span { animation:none; }
}