/* AI Chat Input, History Dropdown, Suggestions — Claude palette */

.ai-chat-input-area { padding: var(--space-8) var(--space-12); border-top: 1px solid var(--claude-border); }

.ai-chat-input-wrapper {
    display: flex; gap: var(--space-8); align-items: flex-end;
    background: var(--claude-bg-input); border: 1px solid var(--claude-border);
    border-radius: var(--radius-md); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-12);
    transition: border-color 0.2s; position: relative;
}
.ai-chat-input-wrapper:focus-within { border-color: var(--claude-terracotta); }
.ai-chat-input-wrapper textarea {
    flex: 1; background: transparent; border: none; color: var(--claude-text-primary);
    font-family: inherit; font-size: var(--font-size-md); resize: none; outline: none;
    max-height: 80px; padding: var(--space-4) 0;
}
.ai-chat-input-wrapper textarea::placeholder { color: var(--claude-text-muted); }

.ai-send-btn {
    padding: var(--space-6) var(--space-10); border-radius: var(--radius); flex-shrink: 0;
    background: var(--claude-terracotta); border: none; color: white;
}
.ai-send-btn:hover { background: var(--claude-terracotta-hover); }

/* Legacy AI input */
.ai-input-container { display: flex; gap: var(--space-8); position: relative; }
.ai-input-container textarea {
    flex: 1; background: var(--claude-bg-input); border: 1px solid var(--claude-border);
    border-radius: var(--radius-sm); color: var(--claude-text-primary);
    padding: var(--space-10) var(--space-12); font-family: inherit; font-size: var(--font-size-md);
    resize: none; outline: none; transition: border-color 0.2s;
}
.ai-input-container textarea:focus { border-color: var(--claude-terracotta); }
.ai-input-container textarea::placeholder { color: var(--claude-text-muted); }
.ai-submit { padding: var(--space-10) var(--space-16); align-self: flex-end; }
.ai-input-buttons { display: flex; flex-direction: column; gap: var(--space-4); align-self: flex-end; }
.ai-history-btn {
    padding: var(--space-6) var(--space-8); background: var(--claude-bg-input);
    border: 1px solid var(--claude-border); color: var(--claude-text-muted);
}
.ai-history-btn:hover { color: var(--claude-text-primary); border-color: var(--claude-terracotta); }

/* History Dropdown */
.ai-history-dropdown {
    display: none; position: absolute; bottom: 100%; right: 0; width: 350px;
    max-height: 300px; background: var(--claude-bg-surface);
    border: 1px solid var(--claude-border); border-radius: var(--radius);
    box-shadow: var(--shadow); z-index: var(--z-dropdown);
    margin-bottom: var(--space-4); overflow: hidden;
}
.ai-history-dropdown.show { display: block; }
.ai-history-header {
    padding: var(--space-8) var(--space-12); font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold); color: var(--claude-text-muted);
    border-bottom: 1px solid var(--claude-border); text-transform: uppercase; letter-spacing: 0.5px;
}
.ai-history-list { max-height: 260px; overflow-y: auto; }
.ai-history-item {
    padding: var(--space-8) var(--space-12); font-size: var(--font-size-md);
    color: var(--claude-text-secondary); cursor: pointer; transition: background 0.15s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-bottom: 1px solid var(--claude-border-half);
}
.ai-history-item:hover { background: var(--claude-bg-hover); color: var(--claude-text-primary); }
.ai-history-item:last-child { border-bottom: none; }
.ai-history-empty {
    padding: var(--space-16) var(--space-12); font-size: var(--font-size-md);
    color: var(--claude-text-muted); text-align: center;
}

/* Suggestions & Status */
.ai-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.ai-suggestion {
    background: var(--claude-bg-surface); border: 1px solid var(--claude-border);
    border-radius: var(--space-16); color: var(--claude-text-secondary);
    padding: var(--space-4) var(--space-12); font-size: var(--font-size-base);
    cursor: pointer; transition: var(--transition-normal);
}
.ai-suggestion:hover { background: var(--claude-bg-hover); color: var(--claude-text-primary); border-color: var(--claude-terracotta); }
.ai-suggestion.highlight { border-color: var(--claude-terracotta); color: var(--claude-terracotta); font-weight: var(--font-weight-medium); }

.ai-status {
    display: flex; align-items: center; gap: var(--space-8);
    padding: var(--space-8) var(--space-12); background: var(--claude-bg-input);
    border-radius: var(--radius-sm); font-size: var(--font-size-md); color: var(--claude-text-secondary);
}
.ai-status .spinner { width: 14px; height: 14px; border-width: 2px; }