/* ═══════════════════════════════════════════════════════════════════════
   ALIAS CREATOR STYLES
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   CANONICAL SELECTOR
   ─────────────────────────────────────────────────────────────────────── */

.codex-alias-canonical-selector {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.codex-alias-no-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
}

.codex-alias-no-selection i {
    font-size: 32px;
    color: var(--io-text-tertiary);
}

.codex-alias-no-selection span {
    color: var(--io-text-tertiary);
    font-size: 13px;
}

.codex-alias-select-btn {
    padding: 10px 20px;
    background: var(--io-accent);
    color: var(--io-on-accent);
    border: none;
    border-radius: var(--io-radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--io-transition-base);
}

.codex-alias-select-btn:hover {
    background: var(--io-accent-bright);
}

/* ───────────────────────────────────────────────────────────────────────
   SELECTED CANONICAL ENTRY
   ─────────────────────────────────────────────────────────────────────── */

.codex-alias-selected {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--io-surface-raised);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius-md);
}

.codex-alias-selected-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.codex-alias-selected-term {
    font-size: 16px;
    font-weight: 600;
    color: var(--io-accent);
}

.codex-alias-selected-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.codex-alias-selected-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--io-surface-sunken);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius-sm);
    font-size: 12px;
    color: var(--io-text-secondary);
}

.codex-alias-selected-category i {
    font-size: 11px;
    color: var(--io-text-tertiary);
}

.codex-alias-selected-core {
    padding: 10px 12px;
    background: var(--io-success-subtle);
    border-left: 3px solid var(--io-success);
    border-radius: var(--io-radius-sm);
    font-size: 12px;
    line-height: 1.5;
    color: var(--io-text-primary);
}

.codex-alias-selected-core strong {
    color: var(--io-success);
    font-weight: 600;
}

.codex-alias-change-btn {
    padding: 8px 16px;
    background: var(--io-surface-base);
    color: var(--io-text-primary);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius-md);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    height: fit-content;
    transition: var(--io-transition-base);
}

.codex-alias-change-btn:hover {
    background: var(--io-surface-hover);
    border-color: var(--io-border-accent);
}