/* Command Palette & Mention Popup — Claude palette */

.ai-cmd-palette, .ai-mention-popup {
    position: absolute; bottom: 100%; left: 0; right: 0;
    max-height: 240px; overflow-y: auto;
    background: var(--claude-bg-surface); border: 1px solid var(--claude-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow);
    z-index: var(--z-dropdown); margin-bottom: var(--space-4);
    display: none;
}

.ai-cmd-item, .ai-mention-item {
    display: flex; align-items: center; gap: var(--space-8);
    padding: var(--space-8) var(--space-12); cursor: pointer;
    transition: background 0.1s;
}
.ai-cmd-item:hover, .ai-cmd-item.active,
.ai-mention-item:hover, .ai-mention-item.active {
    background: var(--claude-bg-hover);
}

.ai-cmd-name {
    font-family: var(--font-family-mono); font-weight: var(--font-weight-medium);
    color: var(--claude-terracotta); min-width: 80px;
}
.ai-cmd-args {
    font-size: var(--font-size-sm); color: var(--claude-text-muted);
    font-family: var(--font-family-mono);
}
.ai-cmd-desc {
    font-size: var(--font-size-sm); color: var(--claude-text-secondary);
    margin-left: auto; text-align: right;
}

.ai-mention-name {
    font-family: var(--font-family-mono); color: var(--claude-text-primary);
}
.ai-mention-icon {
    color: var(--claude-text-muted); width: 16px; text-align: center;
}
.ai-mention-detail {
    font-size: var(--font-size-xs); color: var(--claude-text-muted);
    margin-left: auto;
}
.ai-mention-separator {
    padding: var(--space-4) var(--space-12);
    font-size: var(--font-size-xs); color: var(--claude-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    border-top: 1px solid var(--claude-border-half);
}

/* Ghost text for autocomplete */
.ai-input-ghost {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; padding: inherit; font: inherit;
    color: var(--claude-text-muted); opacity: 0.5;
    white-space: pre-wrap; word-wrap: break-word; overflow: hidden;
}

/* Session dropdown */
.ai-session-dropdown {
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: 300px; overflow-y: auto;
    background: var(--claude-bg-surface); border: 1px solid var(--claude-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow);
    z-index: var(--z-dropdown); margin-top: var(--space-4);
    display: none;
}
.ai-session-dropdown.show { display: block; }

.ai-session-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-8) var(--space-12); cursor: pointer;
    border-bottom: 1px solid var(--claude-border-half); transition: background 0.1s;
}
.ai-session-item:hover, .ai-session-item.active { background: var(--claude-bg-hover); }
.ai-session-item:last-child { border-bottom: none; }

.ai-session-name {
    font-size: var(--font-size-md); color: var(--claude-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.ai-session-time {
    font-size: var(--font-size-xs); color: var(--claude-text-muted);
}

.ai-session-new-btn {
    display: flex; align-items: center; gap: var(--space-6);
    padding: var(--space-8) var(--space-12);
    color: var(--claude-terracotta); cursor: pointer;
    border-bottom: 1px solid var(--claude-border);
    font-weight: var(--font-weight-medium); font-size: var(--font-size-md);
}
.ai-session-new-btn:hover { background: var(--claude-bg-hover); }

.ai-session-selector {
    display: flex; align-items: center; gap: var(--space-6);
    cursor: pointer; padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-sm); position: relative;
    color: var(--claude-text-primary);
}
.ai-session-selector:hover { background: var(--claude-bg-hover); }
.ai-session-selector i.fa-robot { color: var(--claude-terracotta); }
.ai-session-selector i.fa-chevron-down { font-size: var(--font-size-xs); color: var(--claude-text-muted); }

.ai-session-right {
    display: flex; align-items: center; gap: var(--space-6);
}
.ai-session-delete {
    background: none; border: none; cursor: pointer; padding: var(--space-2) var(--space-4);
    color: var(--claude-text-muted); font-size: var(--font-size-xs);
    border-radius: var(--radius-sm); opacity: 0; transition: opacity 0.15s, color 0.15s;
}
.ai-session-item:hover .ai-session-delete { opacity: 1; }
.ai-session-delete:hover { color: var(--claude-danger, #e74c3c); }