/* ai-panel.css — AI chat panel + mobile */

.ai-panel {
    width: 350px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-default);
    transition: width 0.2s ease;
}

.ai-panel.collapsed {
    width: 0;
    overflow: hidden;
    border-left: none;
}

.ai-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-default);
    font-size: var(--font-size-sm);
    color: var(--text-bright);
    flex-shrink: 0;
}

.ai-panel-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
.ai-panel-close:hover { color: var(--text-bright); background: var(--bg-hover); }

.ai-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.ai-panel-input {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-top: 1px solid var(--border-default);
    flex-shrink: 0;
}

.ai-panel-input textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    max-height: 150px;
    overflow-y: auto;
}

.ai-panel-input .btn {
    width: auto;
    flex-shrink: 0;
    align-self: flex-end;
    justify-content: center;
}

.ai-welcome {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: 24px 12px;
}

.ai-question {
    padding: 8px 12px;
    margin: 4px 0;
    background: var(--overlay-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-bright);
    font-size: var(--font-size-sm);
    border-left: 3px solid var(--accent-primary);
}

.ai-answer {
    padding: 8px 12px;
    margin: 4px 0;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.ai-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
}

.ai-logo {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--text-secondary);
    animation: ai-glow 3s ease-in-out infinite;
}

.ai-toggle-btn:hover .ai-logo {
    color: var(--text-bright);
    text-shadow: 0 0 14px rgba(100, 180, 255, 0.9);
}

@keyframes ai-glow {
    0%, 100% { text-shadow: 0 0 4px rgba(100, 180, 255, 0.3); }
    50%      { text-shadow: 0 0 12px rgba(100, 180, 255, 0.8); }
}

@media (max-width: 768px) {
    .ai-panel {
        display: flex;
        position: fixed;
        top: 60px;
        right: 0;
        width: 85%;
        height: calc(var(--vh, 1vh) * 100 - 60px - 22px);
        max-height: calc(var(--vh, 1vh) * 100 - 60px - 22px);
        z-index: 300;
        background: var(--bg-surface);
        border-left: 1px solid var(--border-default);
        box-shadow: none;
        transform: translateX(100%);
        transition: transform 0.3s ease, visibility 0s 0.3s;
        visibility: hidden;
        overflow-y: hidden;
    }

    .ai-panel.collapsed {
        width: 85%;
        overflow: hidden;
        border-left: 1px solid var(--border-default);
    }

    .ai-panel.mobile-open {
        transform: translateX(0);
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.5);
        visibility: visible;
        transition: transform 0.3s ease;
    }
}

@media (max-width: 400px) {
    .ai-panel {
        top: 50px;
        height: calc(var(--vh, 1vh) * 100 - 50px - 22px);
        max-height: calc(var(--vh, 1vh) * 100 - 50px - 22px);
        width: 90%;
    }
    .ai-panel.collapsed { width: 90%; }

    .ai-toggle-btn {
        padding: 6px 10px;
    }
    .ai-logo {
        font-size: 12px;
    }
}

/* Streaming cursor */
.ai-streaming::after {
    content: '|';
    animation: ai-cursor-blink 0.7s step-end infinite;
    color: var(--accent-primary);
    font-weight: bold;
}
@keyframes ai-cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Error */
.ai-error {
    color: var(--accent-error, #e74c3c);
    font-size: var(--font-size-sm);
}

/* Welcome link */
.ai-welcome a {
    color: var(--accent-primary);
    text-decoration: underline;
}

/* Markdown inside AI answers */
.ai-answer p { margin: 0.4em 0; }
.ai-answer pre {
    background: var(--bg-base);
    padding: 8px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: var(--font-size-xs, 12px);
}
.ai-answer code {
    background: var(--overlay-subtle);
    padding: 1px 4px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs, 12px);
}
.ai-answer pre code {
    background: none;
    padding: 0;
}
.ai-answer ul, .ai-answer ol {
    padding-left: 1.2em;
    margin: 0.4em 0;
}
.ai-answer h1, .ai-answer h2, .ai-answer h3 {
    font-size: var(--font-size-sm);
    margin: 0.6em 0 0.3em;
    color: var(--text-bright);
}

/* Diff display */
.ai-diff {
    margin: 8px 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs, 12px);
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}
.ai-diff-add {
    background: rgba(46, 160, 67, 0.15);
    color: #3fb950;
    padding: 1px 8px;
    white-space: pre-wrap;
}
.ai-diff-del {
    background: rgba(248, 81, 73, 0.15);
    color: #f85149;
    padding: 1px 8px;
    white-space: pre-wrap;
}
.ai-diff-ctx {
    color: var(--text-secondary);
    padding: 1px 8px;
    white-space: pre-wrap;
}
.ai-diff-actions {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--border-default);
}
.ai-diff-applied { color: #3fb950; font-size: var(--font-size-sm); }
.ai-diff-rejected { color: var(--text-secondary); font-size: var(--font-size-sm); }

/* Tool execution status */
.ai-tool-status {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
    padding: 4px 0;
}
.ai-search-status {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
    padding: 4px 0;
}
.ai-search-icon {
    display: inline-block;
    animation: ai-search-pulse 1.5s ease-in-out infinite;
}
@keyframes ai-search-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.ai-sources {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-default);
    font-size: var(--font-size-xs, 12px);
    color: var(--text-secondary);
}
.ai-sources a {
    color: var(--text-link);
    text-decoration: none;
}
.ai-sources a:hover {
    text-decoration: underline;
}