#ai-chat-wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 400px;
    background: var(--surface, #fff);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
}
#ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}
#ai-messages::-webkit-scrollbar { width: 5px; }
#ai-messages::-webkit-scrollbar-track { background: transparent; }
#ai-messages::-webkit-scrollbar-thumb { background: var(--gray-200, #e5e7eb); border-radius: 99px; }
.ai-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: 80%;
    animation: aiFadeIn .18s ease;
}
@keyframes aiFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.ai-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.ai-msg.assistant { align-self: flex-start; }
.ai-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.ai-msg.user .ai-avatar { background: #3b82f6; color: #fff; }
.ai-msg.assistant .ai-avatar { background: #10b981; color: #fff; }
.ai-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-msg.user .ai-bubble {
    background: #3b82f6;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ai-msg.assistant .ai-bubble {
    background: var(--gray-100, #f3f4f6);
    color: var(--text, #111827);
    border-bottom-left-radius: 4px;
}
.ai-msg-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ai-msg-name {
    font-size: 11px;
    font-weight: 600;
    color: #10b981;
    padding-left: 2px;
    letter-spacing: 0.02em;
}
.ai-bubble code {
    background: rgba(0,0,0,.08);
    padding: 1px 4px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12.5px;
}
.ai-bubble pre {
    background: rgba(0,0,0,.08);
    padding: 10px 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 6px 0 0;
}
.ai-bubble pre code { background: none; padding: 0; }
.ai-typing {
    display: flex; gap: 4px; align-items: center; padding: 8px 12px;
}
.ai-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--gray-400, #9ca3af);
    animation: aiBounce 1.2s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes aiBounce { 0%,60%,100% { transform:translateY(0); } 30% { transform:translateY(-6px); } }
#ai-input-bar {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    background: var(--surface, #fff);
}
#ai-input {
    flex: 1; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px; padding: 9px 12px;
    font-size: 13.5px; resize: none; outline: none;
    background: var(--gray-50, #f9fafb); color: var(--text, #111827);
    transition: border-color .15s; line-height: 1.5;
    min-height: 46px; max-height: 140px; overflow-y: auto;
    font-family: inherit;
}
#ai-input:focus { border-color: #3b82f6; background: var(--surface, #fff); }
#ai-send-btn {
    width: 46px; height: 46px; border-radius: 12px;
    border: none; background: #3b82f6; color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: background .15s, transform .1s;
}
#ai-send-btn:hover { background: #2563eb; }
#ai-send-btn:active { transform: scale(.93); }
#ai-send-btn:disabled { background: var(--gray-300, #d1d5db); cursor: not-allowed; transform: none; }
#ai-clear-btn {
    font-size: 12.5px; padding: 7px 14px; border-radius: 10px;
    border: 1px solid var(--gray-200, #e5e7eb);
    background: var(--gray-100, #f3f4f6); color: var(--gray-500, #6b7280);
    cursor: pointer; white-space: nowrap; transition: all .15s;
}
#ai-clear-btn:hover { background: var(--gray-200, #e5e7eb); color: var(--text, #111827); }
#ai-empty-state {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; color: var(--gray-400, #9ca3af);
    pointer-events: none;
}
#ai-empty-state svg { opacity: .35; }
#ai-empty-state p { font-size: 13px; margin: 0; }